Sebuah masalah yang sering ditemukan adalah miskomunikasi, tidak hanya antara desainer dan developer, tetapi juga antara para desainer. Sering ditemukan kasus ketika seorang client atau developer memiliki spesifikasi yang rumit dan beragam pada satu layar yang sama; misalnya, state terpilih dan belum terpilih, dropdown terbuka dan tertutup.

Pada akhirnya, misalnya, ada dua home page di file Figma: satu home page dengan tab notifikasi terbuka, dan home page lainnya dengan tab notifikasi tertutup.

Manajemen state layar untuk hal-hal printilan seperti ini, terutama di Figma, masih termasuk sulit dilakukan. Dari antara beberapa kendala yang bisa ditemukan adalah tim stakeholder yang ingin melihat keseluruhan spesifikasi desain sebelum mereferensikan design system.

Dalam satu kasus unik yang saya temui, ada juga inkompatibilitas software untuk user testing yang digunakan dengan fitur variant component dari Figma. Designer kemudian terpaksa mendesain kembali secara layar per layar untuk melakukan user testing.

Komunikasi dapat menjadi sulit akibat hal-hal kecil ini. Di sinilah gunanya sistem NICo.

Selayang pandang

Sistem NICo adalah sebuah sistem organisasi user flow yang berbasis pada penomoran, interaksi dan konten. Pada prinsip dasarnya, suatu langkah atau layar dalam user flow dapat dibagi menjadi tiga bagian:

1. N - Numbering: Penomoran untuk menandai bagian user flow dan hirarki selanjutnya. Setiap langkah atau layar dalam user flow diberikan nomor unik yang menggambarkan fungsi dan letaknya dalam hirarki. Misalnya, angka A000; dengan A yang menandakan fungsi tertentu dalam user flow serta angka 0 yang menandakan bahwa langkah ini adalah langkah teratas/terawal dalam user flow.
2. I - Interaction: Setiap bagian dari user flow diberikan indeks interaksi. Indeks ini menunjukkan interaksi apa yang dapat dilakukan dalam langkah/layar tersebut. Dari beberapa interaksi yang mungkin adalah: Lihat, Edit, atau Pilih.
3. Co - Content: Bagian ini menggambarkan konten yang akan ditemui pengguna dalam bagian tertentu user flow. Content ditentukan oleh dan menentukan Interaction. Misal, dalam layar tertentu seseorang bisa melihat informasi terkait pembayaran dan mengeklik Informasi Selanjutnya.

Dengan sistem ini, maka setiap layar dan langkah yang ditentukan menjadi jelas sebelum bergerak ke wireframe.

Konten + interaksi

Sistem ini didasarkan pada dua artefak desain yang saya pelajari ketika belajar UI/UX di kursus California Institute of the Arts dari Coursera.

Peta konten

Peta konten pada intinya adalah sebentuk user flow yang lebih sederhana. Peta konten ini hanya menggambarkan konten, tanpa interaksi. Jadi, konten apa yang ditemukan seorang pengguna di layar tertentu; dan konten apa yang ditemukan setelahnya.

Misalnya, dalam sebuah situs e-commerce mungkin seseorang akan pertama-tama menemukan home page, kemudian saat hendak melihat sebuah produk, orang itu akan lanjut ke halaman produk. Dalam sebuah peta konten, dapat digambarkan seperti ini:

Home page → Product page

Peta interaksi

Peta interaksi menggambarkan interaksi yang dapat dilakukan seseorang. Misal, di langkah 1 seseorang dapat melakukan aksi “masukkan ke keranjang” dan di langkah 2 ia dapat “lihat isi keranjang”. Kuncinya di sini adalah bahwa peta interaksi menggambarkan interaksi yang dapat dilakukan seseorang.

<aside> 💡 Dalam tahap ini, kita belum masuk ke pendefinisian user interface, maka apakah user diminta meng-klik, tap, atau swipe dan seterusnya masih belum terlalu penting.

</aside>