Design

Pilih icon atau label ?

November 5, 2015 3:40 pm

Saya mau berbagi cerita tentang pengalaman beberapa pekan yang lalu. Saya memiliki client startup lokal yang kebetulan sekarang sedang dalam fase pengembangan dan ready to launch. Kita kerja bareng mendesain salah satu produknya yaitu mobile application platform. Mobile apps ini menjadi media utama mereka berhadapan dengan costumer. Ini merupakan muka mereka, ini merupakan representasi perusahaan mereka, sehingga setiap design decision sangat mempengaruhi karakter yang akan dibawa.

Di tengah perbincangan, kita berdebat apa harus kita tambahkan icon di salah satu screen. Apa memang butuh? Dan kalau memang butuh, seberapa butuh? Temen saya sangat memaksa untuk menambah icon, teman yang lain tidak setuju. Dia prefer label over icon. Saya sih antara yes dan no. Sedikit bingung memang memberikan advice tentang desain apalagi kalau pengetahuan akannya masih minim.

 

Research Sederhana

Dari situ saya mencoba menggali lebih dalam. Saya yakin research merupakan hal yang mandatory untuk menghasilkan good design. Hasil research saya memuaskan. Icon telah digunakan oleh banyak orang bahkan sebelum manusia mengenal bahasa. Jaman itu icon dikenal dengan kata lain yaitu pictogram. Pictogram dipandang sebagai ekspresi awal dari sebuah bahasa. Di masa ini pictogram pun masih digunakan di berbagai kebudayaan non-bahasa sebagai media komunikasi utama.

 

Kita pun kerap melihat icon di berbagai tempat yang dilalui oleh orang-orang multi-culture, seperti airport atau public facility places. Dimana orang-orang ga mengenal satu bahasa dengan bahasa yang lain. Contohnya ditempat orang Indonesia ga mengerti bahasa dan tulisan cina, begitu pula juga sebaliknya, disitulah biasanya icon digunakan sebagai media komunikasi utama. Kita juga setiap hari melihat icon sebagai rambu lalu lintas. Rambu stop, rambu dilarang parkir, belok kanan, nanjak, dan lain lain. Icon merupakan bahasa universal yang dipahami bersama.

Makin kemari icon semakin popular digunakan di design interface. Gambar di bawah merupakan tampilan GUI yang pertama kali di dunia, digunakan pada desktop komputer Xerox Star (mungkin jaman bapak saya kali ya x| ). Terbilang, designer David Smith invented the concept of icons and the desktop metaphor.

Saya coba memahami kenapa icon berkembang sangat populer di user interfaces (UI). Apa benefit menggunakan icon? Pertama icon membuat UI lebih menyenangkan dan lebih menarik. Mata kita lebih senang melihat gambar dan terkesan familiar. Dan apabila ditempatkan dengan benar, icon bisa memberikan sentuhan unik atau watak atau karakter pada sistem yang dibuat.

Terlebih, icon bisa menggantikan kata (menyingkat deskripsi yang panjang-panjang). Dengan banyaknya media yang ukurannya semakin mengecil saat ini, penggunaan icon jadi bukan populer lagi tapi sesaat menjadi penting dan mandatory. Tapi awas, dibalik keunggulannya, icon bisa berubah menjadi “design trap” (red: jebakan betmen). Hampir semua icon tidak memberikan informasi yang jelas. Icon membuat orang berpikir lebih dalam. Apa maksud si icon ini? maksudnya garis ini apa sih? Lambang itu apa artinya? dsb. Lalu, apa bagusnya UI yang cantik kalau informasinya ga jelas? Disinilah kita menyadari, hanya gunakan icon bila pesan yang diberikan itu 100% clear. Kalau ga jelas, jangan!

Ngomong-ngomong mengenai icon yang ga jelas, saya jadi keingetan salah satu teman yang ngepost gambar lucu di twitter.

Kita selalu lihat icon-icon ini di baju kita ya kan? haha membingungkan. Sama dengan Ron, dulu juga saya mikir yang sama, ini apa sih maksudnya si setrika itu, apalagi si segitiga tunggal, malah lebih kaya pembatas jalan. lol

Kembali ke diskusi icon dengan beberapa client, saat pro kontra penggunaan icon, sering saya dapet alasan seperti : “Orang-orang udah sering pake software kita kok, setiap hari selalu gunain, jadi mereka pasti udah tau apa fungsinya si icon itu”. Make sense. Tapi saya ga yakin itu sepenuhnya benar. Saya pake apple mail setiap hari, tapi saya tetep selalu bingung saat mau ngirim email baru, yang mana yang harus saya klik?

Dan lebih parahnya lagi, Users akan cenderung meninggalkan sesuatu yang dia tidak pahami. itu merupakan nature kita, alam bawah sadar menuntun untuk melakukannya. Contoh lain, ketika Google memutuskan untuk menyimpan apps-apps lain nya di dalam icon kotak-kotak yang kurang jelas, banyak penggunanya yang complain “Where is my Google Calendar?”

1

Contoh lain lagi, ketika Twitter mendesain ulang tampilan webnya. Pengguna twitter ga bisa memahami dengan jelas apa yang harus dilakukan. Icon untuk men-twit kurang menggambarkan fungsi nya itu sendiri.

2

Untungnya, versi terbaru telah ditambahkan informasi yang lebih membantu.

3

Apa kamu pengguna instagram? Bagi kamu pengguna iOS, apa kamu tau apa fungsi icon di kanan atas ini? Sebelum kamu coba sendiri, boleh deh kamu tebak. Lalu kamu lakukan sendiri.

Icon ini memberikan fungsi feature untuk mengirim postingan foto kamu secara private ke orang tertentu. Hm.. sebagai instagram user kamu pasti sering melihat ini. Tapi apa kamu pernah pake? Itu karena informasi yang dibawa oleh icon itu kurang jelas. Ditambah lagi tampilan instagram di berbagai platform kurang konsisten baik dari penggunaan languange, typography, layout & placement, dan visual style. Bahkan feature di atas tidak ada di selain platform iOS (sampai saat artikel ini dibuat).

Di lain sisi, Konteks merupakan hal yang sangat penting saat kita menggunakan icons. Hati- hati! Beberapa icon yang sangat jelas pesannya (kaya mail icon, trash icon, etc) bisa bermakna ambigu bila tidak didukung dengan konteks yang jelas. Ketika kamu buka Gmail conversation di gmail kamu, kamu melihat seperti ini. Coba perhatikan, 2 icon ini punya bentuk yang mirip-mirip, tapi apa informasinya sama?

4

Saya sih buka inbox saya sangat sering, mungkin 3 jam/ sekali, saat saya mau reply email saya tau icon mana yang harus saya klik. Tapi untuk orang baru, apa dia sadar? Mungkin dia bakal sadar kalau sudah mencoba dan salah untuk pertama kali.

Tumblr icons mungkin terlihat membingunkan bagi sebagian orang. Dia sangat jelas, bagi pengguna Tumblr. Bagi orang diluar Tumblr? sangat ga jelas (What hi! is it for !?). Ketika aplikasi ini digunakan hanya dalam konteks exisiting users, ini menjadi sangat make sense.

Rdio Mac app tampilannya seperti ini:

Semua icon yang dipake disini sangat jelas informasinya dalam konteks music player. Coba perhatikan icon pause (2 garis tegak bersebalahan) dalam konteks music itu masuk akal dan orang langsung mengenalinya, coba icon ini dipakai di rambu lalu lintas, buat bingung? Sehingga konteks sangatlah menentukan.(notes : Terlepas dari itu, aneh ya 1 icon punya 2 arti yang berbeda, perhatikan volume dan currently playing song).

Jadi, coba saya pertegas lagi: Jangan pakai icon kalau maknanya ga 100% jelas untuk semua orang! Ketika kamu ragu, tinggalkan! Ganti dengan label. Label berisi teks selalu lebih jelas. (Hal yang subhat bukankah lebih baik ditinggalkan bukan?)

Kalau kamu mau mempertahankan benefit grafis dari si icon, kamu bisa combine penggunaan icon dengan label. Solusi yang cerdas menggabungkan gambar dan teks. Mac App Store contohnya. Penggunaan teks disini hukumnya wajib (bukan sunnah lagi) karena kalo ditinggal hanya dengan icon saja, informasinya akan sangat blur.

Twitter juga ngelakuin hal yang sama :

Kita lihat facebook untuk contoh yang terakhir. Facebook akhir-akhir ini mengganti icon hamburger nya (icon 3 garis horizontal bertumpuk, biasanya menunjukkan menu) dengan tampilan yang lebih jelas dan menjelaskan. Tidak hanya itu, icon nya ditambahkan juga dengan label, sehingga kebingungan user bisa ditekan hingga <1%. Well done facebook team!

Saya harap dengan penjelasan singkat ini, kita jadi lebih paham mengenai icon dan penggunannya baik benefitnya maupun design trap nya. Icon bisa saja dengan mudah merusak unsur paling penting dalam user interface : yaitu clariity. Jadi hati-hati dan selalu test setiap design decision kepada user. Ketika kebingungan menghampiri, ingat-ingat: The best icon is a text label.

WRITTEN BY
Achmad Ramadhani Wasil
Tall, pale, and half-Cimahian. Full-time designer and half time engineer who occasionally dabbles in tech

Have thoughts to share?