Aturan Emas Desain Antarmuka (2013)
(cs.umd.edu)- 8 prinsip desain antarmuka dari Ben Shneiderman adalah tolok ukur praktis yang dapat diterapkan pada sebagian besar sistem interaktif, tetapi tiap ranah desain memerlukan validasi dan penyesuaian
- Terminologi dan perilaku yang konsisten, kegunaan universal, serta umpan balik informatif adalah syarat dasar yang membuat pengguna dapat memprediksi dan memahami perubahan status
- Alur kerja perlu dikelompokkan ke dalam unit yang memiliki awal, tengah, dan akhir; pada titik penyelesaian, konfirmasi yang jelas perlu diberikan agar pengguna mudah beralih ke tindakan berikutnya
- Pencegahan kesalahan harus diutamakan; saat kesalahan terjadi, panduan pemulihan yang spesifik dan kemudahan untuk membatalkan tindakan perlu mengurangi kecemasan pengguna
- Dengan menempatkan rasa kendali dan beban ingatan yang rendah sebagai pusat, produktivitas dan rasa mahir dapat ditingkatkan pada antarmuka seluler, desktop, dan web
Sifat dan Cakupan Penerapan Prinsip
- Ben Shneiderman merangkum pengetahuan desain antarmuka pengguna yang sangat luas menjadi beberapa Golden Rules dan menyusunnya sebagai panduan yang dapat diterapkan pada sebagian besar sistem interaktif
- Prinsip-prinsip ini lahir dari pengalaman dan telah disempurnakan selama lebih dari 30 tahun, tetapi dalam ranah desain tertentu diperlukan validasi dan penyesuaian tersendiri
- Daftar awal dari tahun 1985 juga diterima sebagai panduan yang berguna bagi mahasiswa dan desainer, lalu Jakob Nielsen, Jeff Johnson, dan lainnya menambahkan variasi serta perluasan
- Versi ini berasal dari bagian 3.3.4 dalam Designing the User Interface: Strategies for Effective Human-Computer Interaction: Sixth Edition
8 Aturan Emas Desain Antarmuka
-
Kejar konsistensi
- Dalam situasi serupa, diperlukan urutan tindakan yang konsisten
- Istilah yang sama harus digunakan pada prompt, menu, dan layar bantuan
- Warna, tata letak, penggunaan huruf kapital, dan font juga harus konsisten secara menyeluruh
- Pengecualian seperti konfirmasi perintah hapus atau tidak menampilkan karakter saat memasukkan kata sandi harus dapat dipahami dan terbatas
-
Kejar kegunaan universal
- Perlu desain yang fleksibel, yang mengenali kebutuhan pengguna yang beragam dan memudahkan transformasi konten
- Perbedaan antara pemula dan pakar, kelompok usia, disabilitas, perbedaan internasional, serta keragaman teknologi memperluas cakupan kebutuhan
- Penjelasan untuk pemula serta pintasan dan fitur percepatan bagi pakar meningkatkan persepsi terhadap kualitas antarmuka
-
Berikan umpan balik informatif
- Setiap tindakan pengguna harus diikuti oleh umpan balik antarmuka
- Untuk tindakan kecil yang sering terjadi, respons sederhana sudah cukup, tetapi untuk tindakan yang jarang dan penting diperlukan respons yang lebih substansial
- Menyajikan objek perhatian secara visual memudahkan perubahan ditunjukkan dengan jelas
-
Rancang alur dialog yang memberi rasa tuntas
- Urutan tugas harus disusun sebagai kelompok yang memiliki awal, tengah, dan akhir
- Umpan balik informatif saat satu kelompok tugas selesai memberikan rasa pencapaian, kelegaan, dan sinyal kesiapan untuk tugas berikutnya
- Pada situs e-commerce, contohnya adalah alur dari pemilihan produk menuju pembayaran, lalu menutup transaksi dengan halaman konfirmasi yang jelas
-
Cegah kesalahan
- Sedapat mungkin, antarmuka harus dirancang agar pengguna tidak dapat membuat kesalahan serius
- Contohnya adalah menonaktifkan item menu yang tidak sesuai, atau tidak mengizinkan karakter alfabet pada kolom input angka
- Saat kesalahan terjadi, berikan panduan pemulihan yang sederhana, konstruktif, dan spesifik
- Jangan membuat pengguna harus mengisi ulang seluruh formulir nama dan alamat hanya karena satu kode pos salah; arahkan mereka untuk memperbaiki bagian yang salah saja
- Tindakan yang keliru sebaiknya tidak mengubah status antarmuka, atau disertai cara untuk memulihkan status tersebut
-
Izinkan pembatalan dengan mudah
- Sedapat mungkin, tindakan harus dapat dibatalkan
- Kemampuan membatalkan tindakan memberi pengguna keyakinan bahwa mereka dapat membatalkan kesalahan, sehingga mengurangi kecemasan dan mendorong mereka menjelajahi pilihan yang belum dikenal
- Unit pembatalan bisa berupa satu tindakan, pekerjaan entri data, atau kelompok tugas seperti blok nama dan alamat
-
Pertahankan agar pengguna memegang kendali
- Pengguna mahir sangat ingin merasa bahwa mereka mengendalikan antarmuka, dan bahwa antarmuka merespons tindakan mereka
- Perubahan yang tidak terduga, perubahan pada tindakan yang sudah familier, entri data yang membosankan, kesulitan memperoleh informasi yang dibutuhkan, serta situasi saat hasil yang diinginkan tidak dapat dibuat akan membuat pengguna tidak nyaman
-
Kurangi beban memori jangka pendek
- Kapasitas pemrosesan informasi memori jangka pendek manusia terbatas, dan sebagai aturan praktis orang dapat mengingat sekitar “7±2 chunks”
- Hindari antarmuka yang mengharuskan pengguna mengingat informasi dari satu layar lalu menggunakannya di layar lain
- Ponsel tidak boleh meminta pengguna memasukkan ulang nomor telepon, posisi di situs web harus terus ditampilkan, dan formulir panjang harus dipadatkan agar muat dalam satu layar
Tolok Ukur Praktis bagi Desainer
- Prinsip-prinsip ini perlu ditafsirkan, disempurnakan, dan diperluas sesuai tiap lingkungan
- Meski memiliki keterbatasan, prinsip-prinsip ini menjadi titik awal yang baik bagi desainer seluler, desktop, dan web
- Entri data yang disederhanakan, tampilan yang dapat dipahami, serta umpan balik yang cepat dan informatif berfokus pada peningkatan produktivitas pengguna
- Antarmuka yang baik harus membantu pengguna merasakan kompetensi, kemahiran, dan kendali terhadap sistem
1 komentar
Komentar Hacker News
Meski sering dianggap bukan bagian wajib dari "desain" UI, performa juga kerap diabaikan
UI dengan performa buruk pada dasarnya melanggar semua aturan desain ini. Sony Android Smart TV saya terlihat bagus, tetapi UI-nya sangat lambat sampai nyaris tidak bisa dipakai
UI yang tidak stabil dan terus berubah juga melanggar sebagian besar prinsip ini. Smart TV sangat buruk dalam hal ini juga; tata letak layar beranda dan posisi ikon aplikasi sering berubah tanpa alasan jelas
Tambahan keluhan pribadi saya yang makin parah adalah ikon tanpa label. Sering kali bahkan tidak ada tooltip, dan kalau Anda harus mencari dokumentasi di Google hanya untuk tahu nama tombol, berarti desain UI itu buruk
Anak muda berkumpul di antarmuka yang sulit digunakan, dan kerumitannya berfungsi seperti ciri orang dalam yang menyingkirkan generasi orang tua
Desainer yang baik membahas dengan developer bagaimana UI yang mereka usulkan akan memengaruhi performa, dan membantu kompromi ketika engineering harus mengambil keputusan teknis yang terlihat oleh pengguna
Bukan cuma UI-nya punya ratusan ikon kecil, dokumentasinya juga memakai ikon-ikon itu apa adanya. Manualnya seperti, "pertama klik [], lalu tekan [], dan terakhir masuk ke [] lalu lakukan []"
Ini cerita tentang versi sangat awal V5, sudah lama sekali, jadi semoga sekarang lebih baik
Sisanya hampir semuanya mendekati urusan coding
Setiap pagi saya mendengarkan dua podcast berita yang sama, tetapi rekomendasi aplikasi diacak setiap pagi tanpa alasan
Yang lebih menjengkelkan, saat aplikasi mulai, ia sempat menampilkan tata letak kemarin, lalu berhenti sekitar satu detik untuk memuat, kemudian menyusun ulang item. Pada momen itu saya hampir selalu salah menekan item yang bergerak, dan itu sangat membuat frustrasi
Seorang desainer yang bekerja dengan saya beberapa tahun lalu menjelaskan dengan sangat baik mengapa konsistensi itu penting
Ini bukan soal palet warna terbatas atau pilihan font yang tak akan disadari siapa pun. Kalau terlalu mengejar aturan detail, hasilnya justru software yang buruk. Ada orang yang keliru mengira makin sedikit variasi UI, makin konsisten jadinya
Intinya adalah membuat pengguna bisa menjadi ahli dalam software tersebut
Desainer itu memakai Microsoft Office sebagai contoh. Orang bangga karena merasa "menguasai" Microsoft Office, dan karena merasakan inersia "Office", mereka bisa berpindah antaraplikasi dengan alami. Saya merasakan hal yang sama di Vim. Kita seperti langsung tahu bagaimana sesuatu seharusnya bekerja, dan plugin baru yang dibuat dengan baik biasanya menghormati pola itu
Office dan (Neo)Vim bukan contoh UI yang luar biasa, tetapi keduanya sangat stabil
Misalnya saat menampilkan empat pilihan, Anda bisa memakai combobox item centang yang bisa dicari dari [Insert UI Library] dengan tema merek, atau cukup menampilkan radio button atau checkbox biasa yang berlabel. Opsi kedua lebih baik dalam segala hal
Hanya dengan melihat lingkaran dan kotak, pengguna tahu apakah mereka harus memilih satu atau beberapa, mereka bisa melihat keempat pilihan sekaligus, keyboard mobile tidak akan muncul untuk "mencari" lalu menutupi layar kecil lebih jauh, dan aksesibilitasnya hampir selalu 100%
Tetapi opsi ini gagal pada kriteria "cocok lucu dengan sistem desain kami", jadi desainer biasanya memilih yang pertama, dan lebih buruk lagi, menjadikannya standar sampai penggunaan widget biasa dianggap sebagai "bug"
Pada akhirnya, terlalu banyak "desainer UX" memuja estetika dan branding sambil mengorbankan semua hal lain. Widget UI bukan tempat untuk menampilkan merek atau kreativitas. Sama seperti Anda tidak seharusnya membuat font sendiri yang memaksa semua huruf berbentuk logo. Pelanggan lebih peduli apakah mereka bisa menyelesaikan pekerjaannya daripada soal merek
Itu sangat merusak kemampuan untuk menemukan fitur yang dibutuhkan
Selalu terasa istimewa melihat seseorang yang tidak menganggap dirinya teknis bergerak sangat cepat di Excel
Aturan desain UI Microsoft cukup luar biasa. Berkat konsistensi selama bertahun-tahun, orang tetap bisa memakai software itu meski upgrade setiap 1–2 tahun. Saya tidak mengatakan ini karena saya penggemar Microsoft
Inti upgrade adalah perubahan bertahap yang meningkatkan UX. Namun saya tidak paham kenapa tim desain tidak menolak ketika Win 95 memperkenalkan konsep "klik kanan di mana saja untuk properti serta pengaturan/detail yang lebih dalam". Itu adalah fitur tak terlihat yang tidak menunjukkan kepada pengguna bahwa klik kanan itu mungkin. Rasanya tak seorang pun memahami klik kanan selama beberapa kali pertama memakai Win 95
Saya setuju bahwa kemahiran itu relevan, tetapi rasanya masih perlu ada penghubung tambahan tentang mengapa konsistensi menghasilkan kemahiran
Konsistensi berarti apa yang sudah diketahui pengguna tentang sistem bertambah seperti bunga majemuk ke bagian lain dari sistem. Jika sistem konsisten, usaha yang dikeluarkan untuk mempelajari X dan Y juga membuat mereka memahami Z dan W, karena semuanya akan bekerja dengan cara yang sama. Dalam sistem yang tidak konsisten, nilai yang didapat dari investasi belajar sebelumnya jauh lebih kecil
Office, setidaknya dalam jangka panjang, tidak stabil. Ribbon yang terkenal itu adalah penyimpangan menyedihkan dari UI Word yang dulu stabil dan efisien, dan kemunduran Microsoft yang sulit dipahami di seluruh platform Windows memperburuk masalah. Misalnya menghilangkan menu bar dari aplikasi. Saya benar-benar tidak tahu kenapa mereka melakukan itu
Satu lagi "aturan" yang rasanya perlu ditambahkan adalah menampakkan model konseptual kepada pengguna
Jika pengguna tidak memahami model konseptual produk, ikon dan label sebagus apa pun akan tetap membingungkan. Misalnya bayangkan produk yang memiliki perintah "New Configuration"; sejak awal sudah tidak jelas apa itu "Configuration". Apakah ini template untuk mendefinisikan objek lain? Cara untuk cepat berpindah di antara beberapa kumpulan opsi? Wadah seperti folder?
UI harus dirancang agar pengguna bisa menyimpulkan model konseptual hanya dengan menjelajahi antarmukanya. Ini tidak selalu mudah dilakukan
Bagian "misalnya ketika pengguna memasukkan kode pos yang salah, jangan paksa mereka mengisi ulang seluruh formulir nama-alamat; cukup arahkan mereka untuk memperbaiki bagian yang salah" adalah sumber keluhan terbesar, dan masih sangat sering terlihat
Bahkan pada formulir multi-halaman, prinsip ini harus tetap dijaga saat bolak-balik antarhalaman
"Tindakan yang salah tidak boleh mengubah status antarmuka, dan jika sudah berubah maka harus ada panduan untuk memulihkannya ke kondisi semula" juga penting
Pada layar kecil seperti ponsel dan jam tangan, desainer yang ingin menghemat ruang makin bergantung pada ikon. Namun banyak ikon terasa asing atau sulit ditafsirkan, dan kadang baru bisa dipahami setelah ditekan. Ikon seperti itu harus selalu punya cara untuk kembali ke keadaan semula saat terjadi kesalahan
Sudah jadi masalah saat mencoba login dengan alamat email dan kata sandi, tetapi kalau saya menekan "Forgot your password", saya tidak ingin dikirim ke formulir yang meminta saya memasukkan lagi alamat email yang barusan saya ketik
Pernyataan "nonaktifkan item menu yang tidak sesuai dengan membuatnya abu-abu" ada syaratnya
Jika alasan item itu dibuat abu-abu tidak jelas, jangan lakukan itu. Biarkan perintah tetap aktif, dan saat diklik jika memang belum bisa digunakan, jelaskan lewat pesan galat mengapa itu tidak tersedia sekarang. Memaksa pengguna menebak alasan perintah dinonaktifkan itu membuat frustrasi
Pengecualiannya adalah ketika kemungkinan besar pengguna baru diberi tahu bahwa itu tidak bisa digunakan setelah mereka membuang banyak waktu sampai akhir
Bacaan terkait: https://medium.com/@vedranio/james-bond-and-the-design-of-di...
Rasanya itu mengambil kelebihan dari kedua sisi
Ada aplikasi to-do yang melakukan ini. Perintah premium tidak dibedakan secara visual dari perintah gratis, jadi saya sering mengkliknya, dan setiap kali itu memunculkan dialog ajakan berlangganan yang memutus seluruh alur
Menurut saya itu cacat UI yang serius
UI yang menonaktifkan tindakan tertentu tanpa memberi tahu alasannya selalu membuat saya kesal
10 heuristik usability dari Nielsen berfungsi baik sebagai penunjuk arah
https://www.nngroup.com/articles/ten-usability-heuristics/
Halaman NN jauh lebih mudah dicerna, lebih ringkas, dan tata letaknya juga jauh lebih baik
Kedua tulisan sama-sama berisi informasi dan arahan yang layak diperhatikan, tetapi ironis bahwa halaman sumber asli memakai konvensi lama berupa ukuran huruf dan paragraf yang seragam—sesuatu yang justru ditinggalkan halaman NN
Saya juga kesal karena Hacker News tidak mengikuti sebagian prinsip ini. Saat mengedit tulisan yang sudah ada, setelah menekan tombol "update" umpan baliknya tidak cukup jelas. Mungkin halamannya dirender ulang
UI yang membuat saya salah klik dengan menyisipkan sesuatu tepat di posisi yang hendak saya pilih harus dihentikan
Mungkin ini pelanggaran atas beberapa aturan sebelumnya, atau masalah yang bisa diredam, tetapi secara pribadi ini benar-benar membuat saya gila dan menurut saya termasuk kesalahan yang sangat serius
Ada satu aturan penting yang hilang. Dulu ini terasa begitu jelas sampai-sampai dianggap biasa: bedakan informasi statis dan elemen yang dapat dioperasikan
Selain itu, elemen yang tidak bisa diterapkan jangan disembunyikan; buat saja abu-abu. Dengan begitu pengguna belajar bahwa fungsi itu ada, di mana letaknya, dan syarat apa yang harus dipenuhi untuk bisa menggunakannya
Terkait hal itu, jangan pernah bergantung pada UI petak umpet yang hanya menampilkan sesuatu saat pengguna tanpa sengaja mengarahkan kursor. Pengguna ingin menyelesaikan pekerjaan, bukan menjelajahi Advent calendar
Salah satu aturan emas yang saya pelajari adalah bahwa setelah antarmuka dirender, elemen tidak boleh bergerak tak terduga
Google sangat parah dalam hal tombol yang berpindah di antara saat saya mengacungkan jempol dan saat saya menyentuh layar, tetapi bukan hanya Google yang seperti itu
Jika target baru muncul dalam waktu sekitar 0,25 detik sebelum disentuh, jangan hasilkan event sentuh. Berdasarkan kecepatan reaksi manusia, tidak mungkin orang bisa mengincar dan menekan tombol secepat itu
Ini jelas merupakan aturan emas yang bersifat utopis
Sebagian besar orang mungkin tidak akan menentang aturan-aturan seperti ini
Meski begitu, kebanyakan pengembang kemungkinan pernah berhadapan dengan antarmuka yang sering melanggar aturan-aturan ini. Bukan karena mereka tidak memahaminya atau tidak menginginkannya, melainkan karena biayanya pada saat itu terlalu besar
Misalnya, dapat dibatalkan sangat sulit diwujudkan, dan struktur data di bawah aplikasi harus dirancang sejak awal dengan hal itu dalam pikiran agar bisa dilakukan. Pencegahan kesalahan juga sama; mengetahui dengan tepat apa yang dianggap sebagai kesalahan itu sendiri sulit dan mahal, dan memberikan umpan balik yang sempurna dalam bahasa pengguna jauh lebih rumit