[UI/UX]10 Kegunaan Heuristik dan Cara Memasukannya Pada Desain Produk

on

|

views

and

comments

# 1: Visibilitas status sistem

SISTEM HARUS SELALU MENJAGA PENGGUNA YANG DIBERI INFORMASI MENGENAI APA YANG TERJADI, MELALUI UMPAN BALIK YANG TEPAT DALAM WAKTU YANG Wajar.

Apa artinya: Jangan membuat pengguna bertanya-tanya; menawarkan segala macam umpan balik (visual, audio, haptic) untuk membantu mereka memahami apa yang terjadi. Sangat penting untuk memberikan umpan balik pada tindakan yang dilakukan oleh pengguna – dalam kasus seperti itu, umpan balik bertindak sebagai pengakuan bagi pengguna (yaitu, pengguna memahami bahwa sistem menerima permintaan mereka).

Contoh: Memuat. Waktu buka dapat bervariasi secara drastis tergantung pada konteksnya, dan ketika pengguna tidak memiliki umpan balik, mereka hanya tidak memiliki informasi apakah sistem melakukan sesuatu atau tidak. Umpan balik mengurangi kekhawatiran bahwa sistem tidak merespons.

Image for post

Download animation by Aaron Iker

Image for post

Layar Kerangka. Gambar dengan viget

Umpan balik sistem tidak harus visual; itu bisa berupa audio. Beberapa produk mengintegrasikan suara secara alami ke dalam produk mereka, sehingga suara menjadi bagian dari branding mereka. Sebagai contoh, banyak dari kita yang tahu suara boot Apple Mac.

# 2: Pertandingan antara sistem dan dunia nyata

SISTEM HARUS BERBICARA DENGAN BAHASA PENGGUNA, DENGAN KATA, FRASA, DAN KONSEP TERKENAL BAGI PENGGUNA, LEBIH DARI KETENTUAN SYARAT YANG BERBASIS SISTEM.

Apa artinya: Sangat penting untuk mengidentifikasi semua tempat di aplikasi Anda yang dapat menyebabkan kebingungan dan mendesain ulang mereka untuk menjadikannya jelas bagi audiens target Anda. Kebingungan dapat disebabkan oleh istilah yang tidak dikenal atau konsep yang tidak dikenal. Untuk mengatasi masalah pertama, kita perlu menghindari jargon dan menggunakan istilah yang akrab bagi audiens target Anda. Untuk mengatasi masalah kedua, kita perlu mengandalkan analogi dari dunia nyata.

Contoh: analogi dunia nyata. Mercedes menggunakan metafora kursi fisik untuk kontrol penyesuaian kursi listrik. Ini membantu penumpang memahami cara mengatur kursi sesuai dengan kebutuhan mereka.

Image for post

Tombol penyesuaian kursi di Mercedes. Gambar oleh Amazon
# 3: Kontrol dan kebebasan pengguna

PENGGUNA SERING MEMILIH FUNGSI SISTEM OLEH MISTAKE DAN AKAN MEMBUTUHKAN “EXIT DARURAT” UNTUK MENINGGALKAN NEGARA YANG TIDAK DIINGINKAN TANPA HARUS MELALUI DIALOG YANG DIPERPANJANGKAN.

Apa artinya: Mendukung membatalkan dan mengulang untuk operasi pengguna

Contoh: Membatalkan tindakan. Saat pengguna mengirim pesan menggunakan Gmail, layanan ini menawarkan dialog konfirmasi dengan tombol Undo. Tombol ‘Undo’ memungkinkan pengguna untuk membatalkan pengiriman jika pesan itu dikirim secara tidak sengaja.

Antarmuka Gmail memungkinkan Anda untuk ‘Membatalkan’ operasi pengiriman surat.
# 4: Konsistensi dan standar

PENGGUNA TIDAK HARUS BERTINDAK DENGAN BAIK-BAIK KATA, SITUASI, ATAU TINDAKAN YANG BERARTI DENGAN HAL YANG SAMA.

Apa artinya: Berusaha keras untuk desain yang konsisten. Tawarkan konsistensi ‘internal’ (konsistensi keputusan desain individu dalam aplikasi Anda) dan konsistensi ‘eksternal’ (konsistensi dengan standar platform).

Contoh: Navigasi produk. Lokasi objek navigasi penting harus konsisten. Struktur dan lokasi menu navigasi harus sama di berbagai bagian aplikasi / situs web Anda.

Image for post

Aplikasi Twitter iOS menggunakan bilah tab yang membantu menjamin navigasi yang dapat diprediksi
# 5: Pencegahan kesalahan

BAHKAN LEBIH BAIK DARIPADA PESAN KESALAHAN YANG BAIK ADALAH DESAIN YANG HATI-HATI YANG MENCEGAH SEBUAH MASALAH DARI BERJALAN DI TEMPAT PERTAMA. KONDISI KECUALI BUKTI KESALAHAN ATAU PERIKSA UNTUK PENGGUNA MEREKA DAN SAAT INI DENGAN PILIHAN KONFIRMASI SEBELUM MEREKA BERKOMITMEN DENGAN TINDAKAN

Apa artinya: Desain produk Anda untuk meminimalkan jumlah total kasus ketika pengguna dapat menghadapi masalah dan akan membutuhkan dukungan & bantuan.

Contoh: Formulir input. Validasi inline dalam formulir dapat digunakan untuk memvalidasi data saat itu juga, sehingga pengguna tidak perlu mengetuk tombol Kirim. Teknik ini sangat bagus untuk kata sandi karena dapat memberi tahu pengguna apa yang perlu diubah dan mengapa.

Image for post

Inline validation in action. Image by Mihael Konjević

# 6: Pengakuan bukannya mengingat

MINIMASI BEBAN MEMORY PENGGUNA DENGAN MEMBUAT OBYEK, TINDAKAN, DAN OPSI YANG TERLIHAT. PENGGUNA TIDAK HARUS MENGINGAT INFORMASI DARI SATU BAGIAN DIALOG KEPADA LAIN. INSTRUKSI UNTUK PENGGUNAAN SISTEM HARUS DIPERLIHAT ATAU MUDAH DIPERCAYA DIRI SETIAP SAAT.

Apa artinya: ‘Jangan membuat pengguna berpikir’ (Steve Krug). Berikan semua saran yang diperlukan saat pengguna membutuhkannya.

Contoh: Rekomendasi kontekstual. Saran pengetikan pencarian Google adalah contoh rekomendasi kontekstual yang bagus. Saat pengguna mulai mengetik, Pencarian Google menyarankan permintaan yang relevan, dan ini membantu pengguna menemukan permintaan yang relevan dalam waktu yang lebih singkat.

Image for post

Google Penelusuran menyarankan kueri berdasarkan apa yang Anda ketikkan
# 7: Fleksibilitas dan efisiensi penggunaan

ACCELERATORS – TIDAK DILIHAT OLEH PENGGUNA NOVICE – MUNGKIN SERING MENINGKATKAN INTERAKSI UNTUK PENGGUNA AHLI SEPERTI YANG SISTEM DAPAT MELAYANI KEDUA PENGGUNA YANG TIDAK BERPENGALAMAN DAN PENGALAMAN YANG BERPENGALAMAN.

Apa artinya: Tawarkan pintasan yang memungkinkan pengguna untuk interaksi yang lebih efisien dengan produk Anda.

Contoh: Pintasan. Adobe XD menawarkan pintasan keyboard yang akan memungkinkan Anda menggunakan tindakan yang sering dilakukan tanpa mengklik menu.

Image for post

Adobe XD menawarkan pintasan yang memungkinkan pengguna berpengalaman untuk bekerja lebih efektif
# 8: Desain estetis dan minimalis

SETIAP UNIT EKSTRA INFORMASI DALAM KOMPETISI DIALOG DENGAN UNIT RELEVAN INFORMASI DAN MENGHANCURKAN VISIBILITAS RELATIF MEREKA.

Apa artinya: Ikuti pendekatan ‘kurang lebih’ dalam desain Anda. Hapus semua elemen yang tidak perlu yang tidak memiliki dampak positif pada pengalaman pengguna.

Contoh: Prioritaskan konten di atas chrome. Produk minimalis fokus pada konten dan menghapus semua detail desain visual yang tidak perlu. Situs web Apple adalah contoh minimalis yang sangat baik. Banyak halaman situs web yang berpusat pada satu produk atau ide tertentu, dan ini membuatnya lebih mudah untuk memprioritaskan informasi.

Image for post
Situs web Apple adalah contoh minimalis yang sangat baik.
# 9: Bantu pengguna mengenali, mendiagnosis, dan memulihkan dari kesalahan

PESAN KESALAHAN HARUS DIUNGKAPKAN DALAM BAHASA LATIHAN (TANPA KODE), DENGAN BENAR MENUNJUKKAN MASALAH, DAN SECARA KONSTRUKTIF MENYARANKAN SOLUSI.

Apa artinya: Jangan hanya menyatakan fakta bahwa pengguna menghadapi masalah, tawarkan solusi tentang bagaimana menyelesaikannya.

Contoh: Kejelasan dan manfaat pesan kesalahan. Saat pengguna melihat pesan kesalahan seperti ini

Image for post

Pesan kesalahan ini terlihat samar dan menakutkan

Mereka jarang tahu apa yang harus dilakukan selanjutnya. Itulah mengapa sangat penting untuk memberikan jalur yang jelas tentang cara mengatasi masalah. Bandingkan pesan di atas dengan yang berikut ini. Terbukti pesan apa yang berfungsi lebih baik bagi pengguna.

Image for post

Mailchimp memberi tahu pengguna apa yang sebenarnya salah dan menawarkan solusi untuk masalah ini
# 10: Bantuan dan dokumentasi

BAHKAN BAHWA INI LEBIH BAIK JIKA SISTEM DAPAT DIGUNAKAN TANPA DOKUMENTASI, MUNGKIN DIPERLUKAN UNTUK MEMBERIKAN BANTUAN DAN DOKUMENTASI. SETIAP INFORMASI TERSEBUT SEHARUSNYA UNTUK MENCARI, FOKUS PADA TUGAS PENGGUNA, LANGKAH-LANGKAH BETON UNTUK DILAKUKAN, DAN JANGAN TERLALU BESAR.

Apa artinya: Tawarkan dokumentasi yang bermanfaat di dalam produk Anda. Dokumentasi harus menjadi bagian dari jaminan desain produk; harus berupa dokumen hidup yang akan diperbarui secara berkala.

Contoh: Bantuan dan dokumentasi dalam aplikasi. Monday.com menawarkan bantuan dan dukungan tepat di dalam produk.

Image for post

Monday.com membantu pengguna memecahkan masalah.

sumber:uxplanet.org

Share this
Tags

Must-read

Mantaflow Creating Fire

Menciptakan efek api? Mudah dengan Mantaflow! https://www.youtube.com/watch?v=lR9vjaYzeYQ
spot_img

Recent articles

More like this