Mengungkap Rahasia UI Bebas Clutter

Ucapkan selamat tinggal pada antarmuka yang berantakan dan membingungkan! Di dunia digital saat ini, memastikan bahwa UI aplikasi, situs web, atau aplikasi web Anda menyajikan informasi dengan jelas dan ringkas sangatlah penting. Tahukah Anda bahwa 90% UI adalah teks? Itulah mengapa fokus pada presentasi teks dan mengurangi kebisingan visual sangat penting.

Mari selami contoh wireframe layar aplikasi podcast.

Layar menampilkan daftar episode, tombol putar, dan sisa waktu episode yang sedang diputar. Informasi paling penting yang perlu disoroti adalah lokasi pengguna di dalam aplikasi dan tindakan yang tersedia yang dapat mereka lakukan . Dalam hal ini, tab "Episode" dan episode yang sedang diputar adalah indikator terpenting. Informasi lainnya, seperti tanggal dan durasi episode, dapat dianggap kurang penting oleh

1. memperkecil ukuran font,
2. mengurangi bobot font,
3. mengurangi kontras warna (sambil memastikan itu dapat diakses)

Untuk memandu pengguna tentang apa yang dapat diklik dan apa yang tidak, gunakan warna primer untuk menyorot status saat ini dan warna netral untuk tindakan sekunder.

Dengan menggunakan pendekatan ini, Anda dapat membantu pengguna memindai informasi penting dan membuat keputusan berdasarkan informasi tentang tindakan yang harus mereka ambil.

Beberapa takeaways kunci dari latihan ini-

• Hindari menggunakan warna yang sama untuk tombol utama dan teks yang tidak dapat diklik, kecuali warna tombolnya tentu saja hitam.

• Tekankan dengan tidak menekankan. Soroti konten penting Anda, seperti tajuk utama dan poin-poin, dengan menggunakan warna gelap, ketebalan font tebal, atau perbesar ukuran font. Di sisi lain, pertahankan konten sekunder, seperti ekstensi tanggal dan informasi tambahan, tetap sederhana dengan menggunakan warna abu-abu, ketebalan font biasa, atau kurangi ukuran font.

• Pastikan pengguna Anda tahu apa yang dapat mereka lakukan! Tindakan utama harus sangat jelas, tindakan sekunder harus mudah terlihat tetapi tidak berlebihan, dan tindakan tersier harus ada untuk ditemukan pengguna tetapi tidak menghilangkan fokus utama.

Referensi-

Gambar rangka yang digunakan dalam latihan ini awalnya disediakan oleh Arjun saat melakukan tantangan Visual 50 hari.