Evaluasi dan Solusi Desain GUI Berbasis Kaidah IMK

Kaidah IMK dalam Proyek GUI

Untuk memecahkan masalah GUI, kita harus mengacu pada 8 Golden Rules (Ben Shneiderman) dan 10 Usability Heuristics (Jakob Nielsen).

• Konsistensi: Apakah tombol "Simpan" di setiap halaman memiliki warna dan posisi yang sama?

• Feedback: Apakah sistem memberi tahu pengguna bahwa proses sedang berjalan?

• Pencegahan Kesalahan: Apakah sistem mencegah pengguna menekan tombol berbahaya secara tidak sengaja?

• Efisiensi: Apakah tersedia shortcut bagi pengguna ahli?

8 Golden Rules (Ben Shneiderman)

Aturan ini lebih fokus pada desain interaksi secara umum agar pengguna merasa memegang kendali penuh atas sistem.

1. Strive for Consistency (Konsistensi): Gunakan terminologi, warna, tata letak, dan jenis huruf yang seragam di seluruh aplikasi.

2. Seek Universal Usability (Usabilitas Universal): Desain harus fleksibel untuk pemula (menyediakan panduan) maupun ahli (menyediakan shortcut).

3. Offer Informative Feedback (Umpan Balik Informatif): Untuk setiap tindakan pengguna, sistem harus memberikan respons (misal: muncul ikon loading saat memproses).

4. Design Dialogs to Yield Closure (Dialog yang Memberikan Penutup): Urutan tindakan harus memiliki awal, tengah, dan akhir. Contoh: Pesan "Transaksi Berhasil" setelah pembayaran.

5. Prevent Errors (Pencegahan Kesalahan): Sebisa mungkin desain sistem agar pengguna tidak bisa membuat kesalahan fatal (misal: tombol "Submit" tidak aktif jika formulir belum lengkap).

6. Permit Easy Reversal of Actions (Pembatalan Tindakan): Harus ada fitur "Undo" atau "Back" untuk mengurangi kecemasan pengguna jika mereka salah klik.

7. Keep Users in Control (Kendali Pengguna): Pengguna harus merasa bahwa mereka yang menggerakkan sistem, bukan sistem yang memaksa pengguna.

8. Reduce Short-term Memory Load (Kurangi Beban Memori): Manusia sulit mengingat banyak hal sekaligus. Jangan paksa pengguna mengingat informasi dari satu layar untuk digunakan di layar lain.

10 Usability Heuristics (Jakob Nielsen)

Heuristik ini sering digunakan sebagai alat audit/evaluasi untuk mendiagnosis masalah spesifik pada antarmuka.

1. Visibility of System Status: Pengguna harus selalu tahu apa yang sedang terjadi melalui umpan balik yang tepat waktu.

2. Match Between System and the Real World: Gunakan kata-kata dan konsep yang akrab bagi pengguna, bukan istilah teknis pemrograman.

3. User Control and Freedom: Sediakan "pintu keluar darurat" jika pengguna salah memilih fitur (tombol Cancel atau Undo).

4. Consistency and Standards: Ikuti konvensi platform (misal: logo di kiri atas biasanya mengarah ke Beranda).

5. Error Prevention: Lebih baik mencegah masalah daripada memberikan pesan error yang bagus.

6. Recognition Rather Than Recall: Buat objek dan opsi terlihat. Pengguna tidak boleh harus mengingat informasi dari bagian dialog sebelumnya.

7. Flexibility and Efficiency of Use: Sediakan fitur untuk mempercepat pengguna ahli (seperti Keyboard Shortcuts).

8. Aesthetic and Minimalist Design: Jangan tampilkan informasi yang tidak relevan atau jarang dibutuhkan; setiap elemen tambahan akan bersaing dengan informasi penting.

9. Help Users Recognize, Diagnose, and Recover from Errors: Pesan error harus menggunakan bahasa sederhana, menyatakan masalah dengan tepat, dan menyarankan solusi.

10. Help and Documentation: Meskipun sistem harus bisa digunakan tanpa panduan, dokumentasi yang mudah dicari tetap perlu disediakan untuk membantu tugas tertentu.

Perbedaan utama

macOS Big Sur Official Trailer

Contoh Diagnosis Kesalahan Berdasarkan Platform

Mari kita bedah beberapa kasus nyata yang sering kita temui di kehidupan sehari-hari, di mana aplikasi populer atau sistem digital melanggar kaidah IMK.

1. Pelanggaran: Error Prevention & User Control

Kasus: Tombol "Delete" Tanpa Konfirmasi

• Masalah: Pernahkah Anda menggunakan aplikasi catatan (Notes) atau email di mana saat Anda menekan ikon sampah, data langsung hilang permanen tanpa bertanya "Apakah Anda yakin?"

• Analisis: Ini melanggar Rule #5 (Prevent Errors) dari Shneiderman dan Heuristic #3 (User Control and Freedom) dari Nielsen.

• Solusi IMK: Harusnya ada dialog konfirmasi (Pop-up) atau fitur "Undo" (Urungkan) selama beberapa detik setelah penghapusan.

2. Pelanggaran: Match Between System and the Real World

Kasus: Pesan Error Teknis (Computer Speak)

• Masalah: Saat sebuah website gagal memuat data, muncul pesan: "Error 0x8004210B: SMTPServer timeout connection failed."

• Analisis: Pengguna awam tidak tahu apa itu SMTP atau kode heksadesimal. Ini melanggar Heuristic #2 dari Nielsen.

• Solusi IMK: Gunakan bahasa manusia: "Maaf, koneksi internet Anda terputus. Silakan coba kirim ulang pesan Anda beberapa saat lagi."

3. Pelanggaran: Visibility of System Status

Kasus: Tombol "Submit" yang Tidak Bereaksi

• Masalah: Anda menekan tombol "Bayar" di aplikasi belanja online. Layar tidak berubah, tidak ada animasi loading, sehingga Anda menekan tombol tersebut berkali-kali karena mengira aplikasi hang. Ternyata, transaksi Anda terproses 5 kali.

• Analisis: Melanggar Heuristic #1 (Visibility of System Status).

• Solusi IMK: Saat tombol ditekan, ubah warna tombol menjadi abu-abu (disable) dan munculkan ikon spinner (loading) agar pengguna tahu sistem sedang bekerja.

4. Pelanggaran: Consistency and Standards

Kasus: Letak Menu "Logout" yang Tersembunyi

• Masalah: Di hampir semua aplikasi, menu Logout ada di dalam profil atau pojok kanan atas. Namun, ada satu aplikasi yang meletakkan Logout di dalam menu "Bantuan" -> "Lainnya" -> "Keluar".

• Analisis: Melanggar Heuristic #4 (Consistency and Standards). Pengguna akan merasa frustrasi karena "kebiasaan" mereka di aplikasi lain tidak berlaku di sini.

• Solusi IMK: Letakkan menu navigasi di tempat yang umum (konvensional) agar pengguna tidak perlu belajar lagi dari nol.

5. Pelanggaran: Aesthetic and Minimalist Design

Kasus: Website "Cluttered" (Berantakan)

• Masalah: Website berita yang penuh dengan iklan pop-up, sidebar yang bergerak, teks yang berkedip, dan video yang otomatis terputar (auto-play).

• Analisis: Melanggar Heuristic #8 (Aesthetic and Minimalist Design). Informasi utama tertutup oleh elemen yang tidak relevan.

• Solusi IMK: Terapkan White Space (ruang kosong) agar mata pengguna bisa fokus pada konten berita utama.

https://share.google/6ij0j6iaI9vrgtKoa

Kuis

Pilihlah jawaban yang paling tepat!

1. Kasus: Sebuah aplikasi mobile memiliki tombol "Hapus Akun" berwarna merah cerah tepat di sebelah tombol "Simpan". Pengguna sering salah tekan. Kaidah IMK apa yang dilanggar?

   • A. Konsistensi

   • B. Error Prevention (Pencegahan Kesalahan)

   • C. Feedback

2. Kasus: Sebuah website pemerintah memiliki 15 menu utama di halaman depan tanpa kategori. Hal ini menyebabkan...

   • A. Low Efficiency

   • B. High Cognitive Load (Beban Kognitif Tinggi)

   • C. Good Accessibility

3. Kasus: Pada layar smartphone, elemen navigasi diletakkan di pojok kiri atas yang sulit dijangkau jempol. Masalah ini berkaitan dengan...

   • A. Ergonomics & Reachability

   • B. Color Contrast

   • C. System Status

Tantangan

Judul Tantangan: "The GUI Doctor"

Instruksi:

1. Cari "Pasien": Temukan satu aplikasi (Mobile/Web/Desktop) yang menurut kelompok Anda memiliki antarmuka yang membingungkan.

2. Lakukan Diagnosis: Gunakan 10 Usability Heuristics untuk menemukan minimal 5 kesalahan fatal pada desain tersebut. Sertakan screenshot sebagai bukti.

3. Berikan Resep (Solusi): Gambar ulang (bisa berupa wireframe kasar atau menggunakan alat seperti Figma) bagian yang salah tersebut menjadi desain yang sesuai dengan kaidah IMK.

4. Justifikasi: Jelaskan mengapa desain baru Anda lebih baik daripada desain sebelumnya.

Samsung's UI Evolution | 2009 - 2024 | A Comparative Walkthrough from TouchWiz to OneUI 📱