it-swarm.asia

Kapan menggunakan ikon vs. ikon dengan teks vs. tautan teks saja?

Apakah ada aturan kapan menggunakan ikon vs. ikon dengan teks vs. tautan teks saja di aplikasi web?

Sebagai contoh:

disk icon

vs.

disk icon simpan

vs.

simpan


Pertanyaan tambahan: Apakah disk icon save -atau- save disk icon lebih baik?

172
jmb

Ikon terkenal tidak efektif sebagai label, karena sangat sulit untuk diartikan dengan benar tanpa pelatihan atau pengalaman. Untuk sebagian besar situasi, pengguna belajar interpretasi yang benar lebih baik dengan teks saja daripada dengan ikon saja. Lihat: Wiedenbeck, S (1999). Penggunaan ikon dan label dalam program aplikasi pengguna akhir: Studi empiris tentang pembelajaran dan retensi. Perilaku & Teknologi Informasi, 18 (2), p68-82.

Ikon sangat buruk untuk sesuatu yang abstrak, seperti Faktur atau Tawaran, karena hal-hal abstrak umumnya tidak memiliki citra visual yang kuat (baik Faktur dan Tawaran dapat direpresentasikan sebagai dokumen kertas, tetapi bagaimana Anda membedakannya?). Demikian pula, ikon sangat buruk untuk tindakan (mis., Simpan, Terbitkan); sulit untuk menunjukkan dengan jelas suatu proses dengan gambar. Ya, ikon digunakan sepanjang waktu di toolbar untuk tindakan, tetapi toolbar dimaksudkan untuk para ahli, dan meskipun demikian pengguna sering bingung oleh mereka (rata-rata, pengguna hanya tahu enam item toolbar Word setelah secara teratur menggunakan Word untuk dua tahun ).

Ikon dapat menghemat ruang di atas teks, tetapi dengan harga pengakuan. Untuk ikon kecil, seperti 16x16 piksel, sangat sulit bagi pengguna untuk mengenali apa yang seharusnya menjadi gambar, apalagi gambar yang seharusnya diperjuangkan. Satu pengguna yang saya tahu mengira ikon "disk" untuk menyimpan adalah gambar TV. (Dia sudah cukup tua untuk mengetahui apa itu floppy disk.) Saya pribadi menggunakan Word selama bertahun-tahun berpikir ikon Track Changes adalah semacam batu Rosetta bergaya. Pengguna ahli merasa lebih mudah untuk mengandalkan posisi fisik yang dihafal dari kontrol bilah alat daripada label ikon untuk memilih kontrol. Ikon yang lebih besar (mis., Setidaknya 32 kali 32 piksel) dapat membantu pengenalan, tetapi gunakan begitu banyak ruang sehingga Anda sebaiknya menggunakan ruang tersebut untuk label teks yang jelas. Jika ruang terbatas, sering kali Anda lebih baik menggunakan teks yang disingkat daripada ikon.

Sangat sulit mendapatkan ikon dengan benar. Jangan mencoba mengembangkan ikon baru tanpa iterasi ekstensif pengujian pengguna. Meski begitu, Anda mungkin gagal. Desainer Microsoft mencoba segalanya untuk membuat ikon yang dapat ditafsirkan untuk toolbar Outlook sebelumnya menyerah dan pergi dengan label teks pada kontrol tombol.

Label ikon juga menyulitkan dukungan teknis (mis., "Klik pada lembar kuning dengan tanda centang biru," versus "Klik‘ Terima ’").

Sebagai patokan, ikon saja seharusnya diizinkan ketika setidaknya dua dari tiga kondisi berikut ini berlaku:

  1. Spasi sangat terbatas (mis., Terlalu kecil untuk teks saja).

  2. Ikon terstandarisasi (mis. Gambar floppy disk untuk disimpan)

  3. Ikon tersebut mewakili objek dengan analog fisik atau atribut visual yang kuat (mis., Ikon printer untuk mengakses atribut printer, atau persegi panjang merah untuk mengatur latar belakang halaman merah).

Tooltips diperlukan untuk ikon ketika mereka digunakan sendiri, tetapi mereka adalah pengganti yang buruk untuk label teks. Pengguna Anda tidak harus menggunakan aplikasi Anda dengan mencari-cari sesuatu. Fakta bahwa label teks tidak pernah membutuhkan tooltips grafis adalah petunjuk yang cukup bagus bahwa teks lebih baik daripada ikon.

Jika ruang memungkinkan, ikon yang dikombinasikan dengan teks adalah yang terbaik. (Saya pikir ada penelitian yang menunjukkan ini dari akhir 1980-an tetapi saya tidak dapat menemukannya.) Penggunaan ikon dengan teks secara selektif membuat item tertentu lebih menonjol atau menambah minat visual. Ini juga dapat meningkatkan kemampuan memindai item, tetapi label teks yang baik juga bisa melakukannya. Pengguna telah dikenal secara subyektif menganggap suatu aplikasi lebih mudah jika memiliki ikon, bahkan ketika mereka tidak benar-benar meningkatkan kinerja (lihat Wiedenbeck, 1999 yang dikutip di atas), sehingga merupakan alasan lain untuk menggabungkan ikon dan teks.

Saya biasanya melihat ikon di atas atau di kiri label teks. Saya tidak berpikir itu secara inheren lebih baik daripada alternatif, tetapi itu adalah konvensi yang harus Anda ikuti juga jika Anda memiliki kontrol di samping satu sama lain sehingga pengguna dapat mengandalkan pengalaman untuk mengetahui label teks mana yang sesuai dengan ikon mana.

232

Dari grup Neilson/Norman pada ikon :

Ringkasan : Pemahaman pengguna akan ikon didasarkan pada pengalaman sebelumnya. Karena tidak adanya penggunaan standar untuk sebagian besar ikon, label teks diperlukan untuk mengkomunikasikan makna dan mengurangi ambiguitas.

Ikon Membutuhkan Label Teks

Untuk membantu mengatasi ambiguitas yang dihadapi hampir semua ikon, label teks harus ada di samping ikon untuk memperjelas artinya dalam konteks tertentu. (Dan bahkan jika Anda menggunakan ikon standar, sering kali lebih aman untuk memasukkan label, terutama jika Anda sedikit mengubah ikon untuk menyesuaikan preferensi atau kendala estetika Anda.)

Label ikon harus terlihat setiap saat, tanpa ada interaksi dari pengguna. Untuk ikon navigasi, label sangat penting. Jangan mengandalkan hover untuk mengungkapkan label teks: tidak hanya meningkatkan biaya interaksi , tetapi juga gagal menerjemahkan dengan baik pada perangkat sentuh.

Situs web sability.gov menggunakan ikon navigasi untuk Metode, Templat dan Dokumen, dan Pedoman pada setiap halaman dalam situs [ contoh w/teks & w/o teks ]. Jika saya meminta setiap orang yang membaca artikel ini untuk mengirim saya ikon yang mewakili Metode, saya yakin saya akan menerima berbagai macam desain. Seperti yang kami nyatakan sebagai bagian dari pedoman desain untuk kegunaan beranda tahun yang lalu, “jika Anda merasa perlu merenungkan untuk menghasilkan ikon navigasi, kemungkinan itu tidak akan mudah dikenali atau intuitif. untuk pengguna. " Sementara versi seluler situs mengakui bahwa label teks perlu menyertai ikon-ikon untuk memberikan makna, versi desktop menyembunyikan label-label ini sampai pengguna yang penasaran memutuskan untuk mengarahkan kursor ke sana. Memperbaiki item navigasi ini di sisi kiri halaman agar tetap tersedia bagi pengguna ketika mereka menggulir menunjukkan bahwa organisasi percaya bahwa item itu penting dan bermanfaat. Namun, menghapus ikon label teks ini menjadikannya sama sekali tidak berarti dan kontraproduktif dengan tujuan menyediakan akses mudah ke konten.

18
KyleMit

Menurut penelitian yang dikutip oleh Don Norman, ikon saja berfungsi paling tidak baik. Teks solo berfungsi lebih baik daripada ikon. Dan teks + ikon berfungsi paling baik.

8
Hisham

Selain jawaban di atas, saya ada benarnya.

Situs web seperti apa itu?

Jika situs web itu jarang digunakan, Anda harus memberi label ikon Anda. Atau pengguna baru mungkin menemukan UI rumit.

Jika situs web akan digunakan sering, seperti Gmail, ikon yang bagus dengan tips alat yang ditempatkan dengan baik lebih baik daripada menggunakan pendekatan hanya teks atau ikon saja. Saya cukup yakin Google membahas pertanyaan ini, karena dulu mereka menggunakan tombol teks saja, tetapi sekarang mereka menggunakan ikon + tips alat di Gmail. Pendekatan baru ini memberikan antarmuka yang bersih tanpa mengorbankan kegunaan. Bahkan Photoshop dan Notepad ++ menggunakan pendekatan serupa.

7
jackandjill

Biarkan pengguna memilih, default ke Keduanya.

Teks + Ikon membantu pengguna pertama kali mempelajari ikon; tetapi karena dia menggunakan aplikasi lebih banyak, pengguna akan terbiasa dengan ikon dan tidak membutuhkan teks lagi. Begitu dia tahu apa artinya ikon, dia lebih suka ruang kerja yang lebih besar daripada Teks yang berlebihan.

5
Lie Ryan

Pertama, kapan Anda akan merancang antarmuka pengguna, Anda harus mempertimbangkan prinsip-prinsip kegunaan (konsistensi, keterjangkauan, dll.). Affordance adalah salah satu konsep utama dan itu berarti bahwa antarmuka Anda harus intuitif. Misalnya, ikon Anda harus dikaitkan dengan makna tindakan berikut seperti contoh yang dikutip di atas untuk ikon simpan oleh Michael. Beberapa ikon juga distandarisasi dan Anda dapat menggunakan kembali artinya. Intinya adalah bahwa jika Anda hanya menggunakan ikon untuk bilah alat, dll. Anda harus menggunakan tooltip jika ikon tidak cukup baik untuk mengekspresikan artinya tetapi jika ikon Anda cukup permisif mereka tidak memerlukan label dan tooltip bisa cukup.

Bagaimanapun, sulit untuk merancang ikon secara khusus ketika sistem Anda untuk sistem tertentu dan Anda harus merancang ikon. Dalam hal ini, Anda dapat mengusulkan beberapa desain dan mengevaluasinya dengan pengguna. Mungkin bermanfaat untuk mengetahui pendapat pengguna tentang sistem, antarmuka visual, dan ikon Anda. Anda juga dapat membuat tes ulang kenangan satu hari setelah tes Anda yang sebenarnya mencoba untuk mengevaluasi apakah pengguna dapat mengingat ikon Anda, makna atau ikon Anda atau area yang mungkin di mana mereka dapat menemukan tindakan yang Anda tanyakan. Kuesioner juga dapat membantu jika Anda memiliki lebih dari satu desain untuk ikon.

Di sisi lain, jika Anda perlu memberi label saya pikir lebih baik label di bawah ikon: [ikon] [label]

Ingat bahwa “keterjangkauan adalah aspek dari suatu objek yang membuatnya jelas bagaimana objek itu akan digunakan. Dalam tampilan antarmuka pengguna, fitur yang menciptakan biaya biasanya visual. .. "Rosson, M. B. & Carroll, J. M. (2002) Teknik Kegunaan, Morgan Kaufmann.

Atau mungkin jika Anda punya waktu ... Anda dapat membaca ini: www.cs.swan.ac.uk/~csharold/cv/files/Affordance.pdf

Jika selama proses desain Anda telah mempertimbangkan harga, mungkin label tidak diperlukan dan Anda hanya menggunakan tooltip jika tidak, Anda dapat mempertimbangkan label di bawah ikon dan mengevaluasi atau mengusulkan lebih banyak desain untuk dievaluasi dengan pengguna (tidak begitu banyak) mereka dapat menjadi kolega di awal hingga versi yang bisa diuji dengan pengguna akhir.

5
user1982

Dalam tren saat ini Sistem harus berbicara dalam bahasa pengguna, dengan kata-kata, frasa, dan konsep yang akrab bagi pengguna, bukan istilah yang berorientasi sistem. Ikuti konvensi dunia nyata, membuat informasi muncul dalam urutan yang alami dan logis. dan ketika Anda menggunakan bahasa Inggris selalu simpan huruf-huruf di sisi kanan. karena jelas ikon akan menjadi daya tarik utama. Karenanya, pengguna mungkin mengabaikan huruf di depan.

untuk contoh iTunes- Diorganisasikan sebagai perpustakaan yang berisi perpustakaan media Anda: musik, film, pertunjukan, buku audio. Di bawah Perpustakaan adalah Toko tempat Anda dapat membeli lebih banyak media untuk dimasukkan ke Perpustakaan Anda.

enter image description here

dan untuk tren terbaru seperti desain palet Google dan windows ubin 2D menyarankan ikon. tetapi lebih baik memiliki ikon dengan alat mouse tip cepat melayang-layang. semoga berhasil.

4
Miller

Setelah membaca semua pertanyaan dan setuju dengan semua, saya ingin menambahkan sudut pandang ekstra.

Sebelum memutuskan untuk menampilkan ikon, jangan tampilkan ikon, tambahkan teks di sekitar teks, jangan tambahkan teks apa pun, Anda harus menjawab beberapa pertanyaan:

  • Di mana Anda ingin menambahkan ikon?
  • Mengapa Anda membutuhkan ikon?
  • Siapa yang akan menggunakan ikon-ikon ini?
  • Apa pengetahuan tentang ikon/konten/tindakan oleh pengguna?
  • Apakah biasa menggunakan ikon untuk itu?
  • Anda akan membuat interaksi pengguna lebih mudah?

Dan untuk menjawab pertanyaan-pertanyaan ini Anda harus mempertimbangkan beberapa poin:

  • Orang-orang menggunakan smartphone setiap hari, setiap waktu dan ikon paling terkenal seperti Facebook, Youtube, Google, What's App, Instagram, dan lainnya perlu menunjukkan label untuk menjamin bahwa orang akan tahu.

enter image description here

  • Word/Google Docs menggunakan ikon yang berhasil tanpa teks karena sama selama bertahun-tahun dan semua orang sudah tahu apa itu tetapi meskipun demikian pada mouse mereka menunjukkan teks untuk menjelaskan ikon.

enter image description here

  • Wilayah geografis yang berbeda dapat memahami ikon Anda secara berbeda. Misalnya di Inggris lebih umum menggunakan keranjang di e-commerce dan sebaliknya di Amerika Serikat adalah keranjang. Itu terjadi karena pengaruh bahasa daerah.

  • Ikon kompleks dapat menghentikan konversi Anda karena kesalahpahaman.

enter image description here

Dan Anda dapat melihat perbandingan bagus yang saya pinjam Smashing Magazine .

enter image description here

Mempertimbangkan semua jawaban saya akan menggunakan teks dengan ikon pada 90% kasus dan posisi teks tergantung pada konsep desain Anda dan apakah mudah bagi pengguna untuk menghubungkannya.

Dan seperti yang selalu saya katakan di komentar saya, tidak ada yang benar di sini, Anda harus menguji, membandingkan pengguna ANDA di situs web/aplikasi ANDA.

2
Rafael Perozin

Ini akan tergantung pada pengguna. Dari sudut pandang Usability, memiliki ikon dan teks memberikan hasil yang lebih baik karena mengikuti pengakuan atas penarikan, asalkan ikon diterima oleh populasi yang masuk akal. Hanya memiliki ikon ini berlaku untuk mesin terbang simbolis - yang mudah dipahami secara global. Hanya teks yang paling sesuai ketika item arbitrer dan tidak memiliki mesin terbang yang dapat dikenali untuk mewakili mereka. Untuk item seperti itu, memiliki teks saja mungkin adalah yang terbaik. Namun, nomenklatur yang digunakan harus diuji untuk penggunaan yang sesuai.

2
Kernan Kobaya