Daftar Periksa Desain UX

Selama proses desain, beberapa kekurangan pada produk Anda tidak akan diperhatikan. Hal-hal kecil (atau kadang-kadang besar) dapat melakukan banyak hal untuk merusak pengalaman yang dimiliki pengguna saat menggunakan perangkat lunak Anda. Kami mengumpulkan daftar poin untuk Anda periksa sebelum desain ditandatangani.

Harap dicatat bahwa tidak semua poin ini berlaku untuk semua produk, tetapi secara umum, ini adalah yang paling relevan.

Desain Interaksi

01 – Tindakan berulang atau aktivitas yang sering terasa mudah

Mengapa penting: Tindakan berulang untuk hasil yang sama (misalnya, mengisi formulir yang berbeda dengan informasi yang sama) adalah tugas berat yang tidak membantu pengguna mencapai tujuannya lebih cepat atau lebih baik. Pengguna kemungkinan juga akan mencoba mencari jalan keluarnya: misalnya, mencari pesaing yang dapat membantu mereka melakukannya dengan lebih cepat/lebih baik.

Cara mengujinya: Anda harus mulai dengan menganalisis semua aliran produk Anda dan mengamati perilaku pengguna. Anda ingin memastikan bahwa, jika ada tindakan berulang, ada cara untuk memfasilitasinya: opsi untuk menggunakan informasi yang dimasukkan sebelumnya.

02 – Pengguna dapat dengan mudah memulihkan dari kesalahan

Mengapa penting: Sering kali, pengguna melakukan tindakan yang tidak diinginkan atau tindakan yang tidak mengarah pada hasil yang diinginkan – dan mengizinkan mereka untuk kembali dan mencoba lagi berarti mereka tidak akan frustrasi dan akan pulih dengan mudah dan terus mengikuti arus.

Cara mengujinya: Pertama, pastikan sistem navigasi Anda memungkinkan untuk kembali, dan tindakan tersebut dapat dibatalkan. Kemudian, saat melakukan pengujian kegunaan, buat skenario di mana pengguna kemungkinan besar akan melakukan tindakan yang salah dan periksa apakah dia dapat dengan mudah memulihkannya.

03 – Pengguna didukung secara memadai sesuai dengan tingkat keahliannya

Mengapa penting: Penting untuk memastikan bahwa pengguna pemula di produk Anda memiliki pengalaman belajar yang lancar. Namun, begitu mereka sudah terbiasa dengan produk, itu akan memberi tempat bagi alat yang membantu mereka bergerak lebih cepat melalui arus. Kedua skenario meningkatkan kegunaan dan retensi. Misalnya, pintasan untuk pengguna ahli, tooltips untuk pengguna pemula, dll.

Cara mengujinya: Pertama, periksa apakah Anda memiliki alat untuk kedua audiens. Kemudian, lakukan uji kegunaan dengan pengguna pemula dan ahli untuk melihat apakah alat ini digunakan dengan benar.

04 – Mengakses bantuan tidak menghalangi kemajuan pengguna

Mengapa penting: Pengguna meminta bantuan setiap kali mereka terjebak di bagian tertentu dari produk Anda. Penting untuk bantuan – online atau offline – untuk menjadi tambahan dan memungkinkan pengguna untuk melanjutkan pekerjaan di mana mereka tinggalkan.

Cara mengujinya: Buat skenario pengujian di mana pengguna akan meminta bantuan dan melihat apakah alur kerja dan kemajuan mereka terganggu.

Desain visual

05 – Tidak lebih dari tiga warna primer

Mengapa penting: Ini bukan aturan tetap – dan terkadang, untuk kasus tertentu, lebih dari tiga warna primer dapat digunakan. Namun, perlu diingat bahwa menggabungkan tiga warna sudah sulit, jadi untuk kebanyakan kasus, lebih dari itu harus dihindari.

Cara mengujinya: Pastikan palet warna yang Anda gunakan saat mendesain produk tidak lebih dari tiga warna primer.

06 – Warna saja tidak digunakan untuk menyampaikan hierarki, konten, atau fungsionalitas

Mengapa penting: Memiliki produk yang dapat diakses bukanlah nilai tambah – itu suatu keharusan. Penyandang disabilitas visual, seperti buta warna hanya mengandalkan warna untuk menyampaikan hierarki, konten, atau fungsionalitas. Ini berarti mereka tidak akan dapat menggunakan produk Anda dan akan menjadi demografi yang dikecualikan.

Cara mengujinya: colorfilter.wickline.org akan membiarkan Anda meletakkan filter warna di atas halaman web Anda dan mengujinya untuk berbagai jenis buta warna. Anda juga dapat menangkap layar produk Anda dan mengubahnya menjadi skala abu-abu pada editor gambar dan melihat apakah Anda dapat membedakan warna dengan mudah.

07 – Hirarki visual mengarahkan pengguna ke tindakan yang diperlukan

Mengapa penting: Pengguna mengandalkan hierarki dan petunjuk produk untuk mengetahui apa yang harus dilakukan dan ke mana harus pergi – penting untuk memahami hal ini dan membimbing mereka dengan benar menggunakan hierarki tersebut.

Cara mengujinya: Pahami bagaimana alur di dalam produk Anda bekerja dan apakah tindakan utamanya didorong oleh hierarki visual.

08 – Item di atas hierarki visual adalah yang paling penting

Mengapa penting: hierarki visual memungkinkan pengguna memindai informasi dengan cepat, memprioritaskan konten berdasarkan kebutuhan mendesak mereka. Item di dekat bagian atas hierarki visual harus paling penting bagi bisnis dan paling relevan bagi pengguna.

Cara mengujinya: Tangkap layar produk digital Anda, lalu Gaussian mengaburkan tangkapan layar itu hingga radius sekitar 5 piksel. Saat melihat hasilnya, Anda akan langsung memvisualisasikan hierarki dan memperhatikan elemen mana yang menonjol. Apakah itu yang paling penting bagi bisnis dan pengguna?

09 – Tindakan utama secara visual berbeda dari tindakan sekunder

Mengapa penting: Memiliki tindakan utama dan sekunder yang berbeda berarti pengguna tidak akan bingung saat berinteraksi dengan produk Anda dan tidak akan membuat kesalahan. Misalnya, "Kirim" dan "Batal" harus jelas berbeda.

Cara mengujinya: Saat melakukan pengujian kegunaan, amati kesalahan umum yang dihasilkan bukan dari niat pengguna tetapi dari tindakan primer dan sekunder yang kurang jelas. Juga, saat meninjau desain, pastikan warna, ukuran, pemosisian, dan elemen lain membedakan tindakan.

10 – Elemen interaktif tidak diabstraksikan

Mengapa penting: Saat menggunakan produk baru, pengguna datang dengan serangkaian harapan yang dibangun dari pengalaman sebelumnya menggunakan produk digital lainnya – misalnya, seperti apa tampilan tombol dan cara kerjanya. Memenuhi harapan itu berarti Anda tidak menciptakan gesekan yang tidak perlu.

Cara mengujinya: Pertama, tinjau produk Anda untuk mencari area di mana pola umum tidak digunakan. Misalnya, tautan yang tidak terlihat seperti tautan.

11 – Pengiriman formulir dikonfirmasi dengan cara yang berbeda secara visual

Mengapa penting: Sangat penting untuk memberikan konfirmasi kepada pengguna apakah suatu tindakan berhasil dilakukan atau tidak. Misalnya, setelah mengirimkan formulir, pesan konfirmasi yang jelas dalam bentuk spanduk warna berarti bahwa pengguna dapat melanjutkan ke tugas berikutnya.

Cara mengujinya: Periksa semua area produk Anda tempat pengguna memasukkan informasi. Setelah input pengguna selesai, memicu konfirmasi apakah tindakan itu berhasil atau tidak. Pastikan umpan balik sangat jelas mengenai status akhir.

12 – Pesan peringatan konsisten

Apa itu: Pesan peringatan memiliki gaya visual yang sama dan muncul di lokasi yang sama dengan cara yang sama.

Mengapa penting: Memiliki pesan peringatan yang konsisten berarti pengguna akan selalu memahami apa yang harus segera diperhatikan. Tidak konsisten dengan peringatan akan berarti beban mental ekstra setiap kali peringatan baru muncul.

Cara mengujinya: Pastikan pesan peringatan memiliki gaya visual yang sama dan posisinya serupa atau identik.

13 – Pesan peringatan secara visual berbeda

Mengapa penting: Dengan memastikan bahwa pesan peringatan dibedakan dengan jelas dari elemen layar lainnya, pengguna dapat benar-benar memperhatikan dan/atau menindaklanjutinya.

Cara mengujinya: Setelah memeriksa sendiri diferensiasi visual, lihat bagaimana reaksi pengguna terhadap pesan peringatan dalam pengujian kegunaan.

Arsitektur Informasi

14 – Navigasi konsisten

Mengapa penting: Cara pengguna mengarahkan dan kemudian menavigasi melalui produk Anda secara langsung memengaruhi apakah mereka dapat menyelesaikan tujuan mereka terlepas dari halaman mereka saat ini.

Cara mengujinya: Periksa dokumentasi arsitektur informasi Anda dan pastikan bahwa navigasi dapat dijangkau di setiap halaman dan tidak berubah atau hilang. Sebelum mendalami desain visual, cobalah penyortiran kartu atau pengujian pohon untuk memastikan jalur arsitektur informasi Anda seintuitif mungkin.

15 – Ruang untuk berkembang

Mengapa penting: Anda tidak dapat mendesain ulang navigasi produk dan sistem informasi setiap kali fitur atau konten baru muncul. Menu navigasi dan tata letak keseluruhan perlu mendukung lebih banyak kategori/topik tanpa putus. Merancang dengan ruang untuk pertumbuhan berarti bahwa upaya desain dan pengembangan besar-besaran dengan mudah dilakukan di seluruh antarmuka.

Cara mengujinya: Tanyakan kepada semua pemangku kepentingan tentang bagaimana konten dapat berkembang seiring waktu dalam produk. Apakah Anda akan mendukung konten yang lebih statis? Apakah arsitektur perlu mendukung video?

Tipografi

16 – Tidak lebih dari dua keluarga tipe berbeda yang digunakan

Mengapa penting: Ini bukan aturan tetap: kadang-kadang dimungkinkan untuk melakukan lebih dari dua. Tetapi secara umum, mencocokkan lebih dari dua bukanlah pekerjaan yang mudah. Untuk kegunaan dan tujuan visual, berpegang pada dua menyederhanakan hierarki tipografi Anda, yang meningkatkan pemahaman.

Cara mengujinya: Pastikan desain Anda tidak mencampur lebih dari dua jenis keluarga. Akan membantu jika Anda juga memastikan bahwa keluarga yang Anda pilih cocok (pelajari lebih lanjut di sini).

17 – Font yang digunakan untuk konten teks berukuran minimal 12px

Mengapa penting: Sekali lagi, ini bukan aturan tetap – Anda dapat, secara teori, menggunakan ukuran yang lebih kecil untuk tujuan tertentu – tetapi secara umum, keterbacaan sangat berkurang untuk ukuran di bawah 12 piksel.

Cara mengujinya: Periksa semua konten Anda dan pastikan font yang digunakan setidaknya berukuran 12 piksel.

18 – Cadangan kata-kata besar untuk label, header, atau akronim

Mengapa penting: Membatasi penggunaan kata-kata dengan huruf besar dikenal untuk memudahkan pemahaman – secara visual tidak terlalu berat dan lebih mudah dicerna oleh pengguna. Ini harus digunakan secara khusus untuk penekanan atau kasus yang sangat terbatas – akronim, misalnya.

Cara mengujinya: Jalankan pemeriksaan konten secara menyeluruh dan pastikan bahwa kata-kata dengan huruf besar dibatasi hanya pada header, label, atau akronim.

19 – Gaya font atau keluarga yang berbeda digunakan untuk memisahkan konten dari kontrol

Mengapa penting: Perlu ada indikator yang jelas tentang apa itu konten dan apa itu kontrol – yaitu, apa yang dapat berinteraksi dengan pengguna. Indikator tersebut dapat berupa ukuran, warna, posisi, font, dll. Font adalah salah satu yang penting: menggunakan gaya atau keluarga yang berbeda berarti pengguna tidak akan bingung dan akan dengan mudah mengidentifikasi apa yang dapat berinteraksi dengannya.

Cara mengujinya: Identifikasi semua kontrol dalam produk Anda dan pastikan kontrol tersebut menonjol dari konten. Saat menjalankan tes kegunaan, perhatikan apakah pengguna mengalami kesulitan berinteraksi dengan kontrol.

20 – Ukuran/berat font membedakan antara tipe konten

Mengapa penting: Ini sangat memengaruhi keterbacaan dan pemahaman. Membuat perbedaan yang jelas antara judul, subjudul, dan paragraf mengurangi beban mental yang berlebihan dalam mencerna konten itu. Ini juga memiliki manfaat visual – terlihat dan terasa lebih baik.

Cara mengujinya: Saat meninjau konten di dalam produk Anda, pastikan bahwa judul, subjudul, dan paragraf menggunakan ukuran dan bobot font yang berbeda.

Antarmuka pengguna

21 – Kedekatan dan keselarasan

Mengapa penting: Pengguna memiliki kecenderungan untuk mengelompokkan – secara fungsional atau kontekstual – item yang dekat satu sama lain. Bilah navigasi adalah contoh yang bagus untuk ini. Mengikuti pola ini dan mengelompokkan item yang terhubung berarti pengguna langsung memahami antarmuka Anda.

Cara mengujinya: Cari item yang fungsinya mirip dan periksa apakah (bila memungkinkan) mereka dikelompokkan bersama.

22 – Indikator kemajuan untuk alur kerja multi-langkah

Mengapa penting: Khusus untuk alur kerja multi-langkah, pengguna dapat dengan mudah merasa kewalahan atau bertanya-tanya berapa lama hingga akhirnya selesai. Indikator kemajuan membantu mereka menemukan lokasinya sendiri, tetapi yang lebih penting, ini menciptakan rasa pencapaian dan mengurangi tingkat drop.

Cara mengujinya: Periksa semua alur di dalam produk Anda di mana terdapat langkah-langkah berbeda untuk mencapai sesuatu, lalu pastikan bahwa kemajuan ditunjukkan melalui indikator.

23 – Elemen latar depan (seperti konten dan kontrol) mudah dibedakan dari latar belakang

Mengapa penting: Penting bagi penyandang disabilitas visual. Ini juga meningkatkan kurva belajar dan pemahaman pengguna. Perbedaan yang jelas memfasilitasi navigasi, memberikan lebih banyak perhatian pada tombol, dan meningkatkan kegunaan secara umum.

Cara mengujinya: Tangkap layar produk Anda dan Gaussian mengaburkan tangkapan layar itu ke Radius sekitar 3px hingga 5px. Saat melihat hasilnya, dapatkah Anda dengan mudah membedakan apa yang ada di latar depan dan apa yang ada di latar belakang?

Selamat telah melewati daftar! Namun, ini bukan akhir.

Produk Anda sekarang lebih solid, dan Anda mungkin telah meningkat di beberapa area – mungkin sekarang lebih mudah diakses, misalnya – tetapi ingat selalu untuk terus menguji, mengumpulkan umpan balik pengguna, dan terus melakukan iterasi.