Ruang Service.Com \\ 10 Kesalahan Umum Desain UI - Kekuatan desain UI sedemikian rupa sehingga dapat mencakup perbedaan antara aplikasi yang sangat sukses dan aplikasi yang gagal memberikan dampak—atau lebih buruk lagi, meninggalkan kesan buruk yang tak terlupakan bagi pengguna! Ketika datang untuk membuat aplikasi berkualitas tinggi, semua detail kecil sangat penting. Itulah mengapa saya ingin membagikan beberapa kesalahan desain UI yang paling umum dan bagaimana Anda dapat memperbaikinya, atau menghindarinya sama sekali. Jika Anda baru memulai karir Anda, menyadari kesalahan ini akan terbukti sangat berharga.

10 Kesalahan Umum Desain UI

Setiap aplikasi berbeda dan tidak ada formula universal untuk membuat antarmuka yang sempurna (jika Anda mengetahuinya, tetapi mengirimkan email ke saya!), daftar di bawah ini pasti akan membantu Anda memberikan desain yang lebih baik. Ini juga akan berfungsi sebagai "daftar periksa" dari hal-hal yang ingin Anda hindari saat mendesain antarmuka.

Jadi tanpa basa-basi lagi, berikut adalah sepuluh kesalahan desain UI yang harus dihindari dengan segala cara .

10 Kesalahan Umum Desain UI

1. Inkonsistensi yang tidak berguna dalam elemen UI Anda

Untuk memastikan aplikasi yang halus dan ringkas, hindari menggunakan terlalu banyak gaya yang berbeda. Ini akan mengirimkan sinyal campuran ke pengguna Anda! Kuncinya adalah berulang-ulang pola dan elemen kapan pun Anda bisa. Desain yang tampak konsisten sangat membantu dalam membangun kepercayaan dengan pengunjung Anda dan dalam menciptakan pengalaman yang menyenangkan. Plus, ini akan membantu pengguna Anda mempelajari aplikasi Anda lebih cepat.

Untuk menghindari inkonsistensi, perhatikan elemen-elemen berikut:

Penggunaan palet warna yang konsisten untuk elemen seperti tombol, teks, tautan, header, footer, status hover, dll.
Gaya font yang konsisten untuk judul, paragraf, tautan, dll.
Gunakan sudut bulat atau persegi untuk bentuk di aplikasi Anda: Ikon, kartu, tombol, dll.
Ketebalan garis yang konsisten: untuk ikon, pembagi, dan garis lain yang Anda gunakan.
Setiap elemen yang menyimpang dengan cara apa pun pasti memiliki alasan untuk melakukannya.

2. Menggunakan drop-shadow default

Lebih sedikit lebih banyak dalam hal drop-shadow. Saya selalu menyarankan untuk tidak menggunakannya secara berlebihan atau Anda akan berakhir dengan desain yang sangat sibuk dan berisi. Tetapi jika Anda harus menggunakannya, ikuti tips ini:

Jangan gunakan drop-shadow default, itu digunakan untuk disesuaikan.
Buat itu sangat halus. Jangan gunakan hitam untuk drop shadow karena ini adalah warna yang sangat keras, alih-alih gunakan versi yang lebih gelap dari warna latar belakang Anda; ini akan terlihat lebih alami.

3. Sedikit perbedaan antara tombol primer dan sekunder

Saat bekerja dengan aplikasi, Anda akan memiliki banyak tindakan yang dapat diselesaikan pengguna. Penting untuk memberikan kepentingan visual pada tindakan utama. Semua navigasi terjadi melalui tombol, jadi Anda harus memudahkan pengguna untuk mengidentifikasi tombol utama dengan membuat tebal dan menonjol. Tindakan sekunder harus muncul tetapi masih terlihat jika pengguna mencarinya.

Berikut cara membedakan tombol primer dan sekunder:

Gunakan bobot visual yang berbeda untuk tombol primer dan sekunder. Tombol dengan bobot visual terkuat akan mendapat perhatian lebih.
Jadi gunakan warna yang kuat , teks tebal dan ukuran untuk memberikan bobot visual pada tombol utama. lakukan sebaliknya untuk tindakan sekunder.

4. Kurangnya hierarki teks

Teks adalah unit utama dari konten informasi, itulah alasan mengapa teks harus selalu dapat dibaca dan diatur. Teks yang diformat dengan benar-benar memfasilitasi persepsi pengguna tentang informasi.

Tugas kami sebagai desainer adalah mengatur ini dengan cara yang paling mudah diakses dan komprehensif. Berikut adalah beberapa hal yang perlu diingat:

Memiliki banyak kontras antara setiap judul gaya: Gunakan, berat, dan warna untuk memisahkan setiap gaya.
Agar hierarki informasi terlihat jelas, mulai dengan judul besar yang harus menjadi elemen halaman yang paling menonjol. Sub-judul dan teks lainnya harus jauh lebih kecil, dan seterusnya.
Gunakan spasi dan kerning yang mencukupi.
Pisahkan blok teks Anda dengan jelas, gunakan sedikit ruang untuk menghubungkan informasi terkait dan menggunakan banyak ruang untuk memisahkan blok informasi yang berbeda secara visual.

5. Ikonografi yang buruk

kadang-kadang ikon menjadi bagian "termudah dari desain. Beberapa desainer bahkan melihatnya sebagai elemen dekoratif "ekstra", padahal sebenarnya mereka juga merupakan bagian mendasar dari antarmuka modern. Terutama di ponsel mana ikon setara dengan tombol (lihat saja Snapchat), Anda akan menemukan antarmuka yang sebagian besar terbuat dari ikon.

Itulah mengapa sangat penting untuk memilih "simbol" yang tepat yang mengomunikasikan elemen makna dengan jelas, dan menjaga gaya ikon yang konsisten di seluruh aplikasi Anda.

Dalam hal ikonografi, ikuti tip berikut:

Gunakan vektor / SVG untuk ikon Anda . Ini adalah cara termudah untuk memastikan ikon Anda akan terlihat tajam di perangkat atau resolusi apa pun.
Gunakan gaya yang konsisten: Pertama-tama, semua ikon Anda harus digariskan atau diisi. Selain itu, pastikan garis dan radius sudut yang konsisten.
Pastikan pesan ikon Anda jelas.

6. Elemen yang tidak selaras

Aku akan mengakuinya, aku orang aneh keselarasan. Tapi itu hanya karena begitu Anda menemukan kekuatan yang menyelaraskan berbagai hal, Anda menyadari bahwa itu adalah kunci untuk membuat tata letak apa pun terlihat indah dan seimbang.

Ada dua cara mendasar untuk membantu Anda mengatur antarmuka: kisi 12 kolom dan dasar. Keduanya tidak terlihat dalam desain akhir, sangat penting untuk memiliki antarmuka yang seimbang.

Banyak desainer berpikir menggunakan kisi-kisi dapat membatasi kreativitas Anda, dan di satu sisi itu benar. Namun, jika Anda baru memulai sebagai desainer UI , saya yakin Anda perlu mempelajari aturannya terlebih dahulu sebelum Anda melanggarnya.

Inilah tip teratas saya untuk penyelarasan dalam desain UI:

Jangan sejajarkan item terkait dengan sisi yang berbeda. Selalu mencoba untuk menyelaraskan elemen terkait dengan sisi yang sama karena menghubungkannya secara visual.

7. Kontras Rendah

Kontras adalah segalanya pada komposisi visual. Ketika Anda memiliki kontras rendah antara elemen antarmuka Anda, semua elemen bersama dan Anda berakhir dengan antarmuka yang membosankan dan sulit dibaca karena semuanya terlihat sama. Kontras rendah dengan kegunaan rendah.

Dalam hal kontras dalam desain UI, ikuti tip berikut:

Penggunaan kontras untuk mengarahkan perhatian pengguna melalui antarmuka Anda. Misalnya: gunakan warna kontras tinggi untuk ajakan bertindak.
Gunakan untuk membedakan dengan jelas berbagai bagian aplikasi Anda. Misalnya: gunakan warna latar belakang yang berbeda untuk menunjukkan perbedaan yang jelas antara header, konten, dan footer.
Gunakan untuk membedakan elemen dari latar belakang. Contoh: Foto dengan teks di atas mungkin sulit dibaca, jadi pastikan teks Anda dapat dibaca dengan kontras tinggi antara foto dan teks Anda.
Jika ragu, gunakan situs web ini untuk memeriksa apakah Anda memiliki kontras yang cukup antara 2 warna.

8. Bentuk yang mencengangkan

Formulir adalah bagian penting dari perjalanan pengguna; mereka digunakan untuk login, mendaftar, check out, dll. Jadi, penting untuk memberikan panduan yang jelas sebelum dan sebelum mengirimkan formulir.

Berikut adalah beberapa petunjuk untuk desain formulir:

Hindari hanya menggunakan warna untuk menunjukkan kesalahan. Selalu berikan umpan balik yang dapat ditindaklanjuti untuk memudahkan proses entri yang benar.
Jika formulir terlalu panjang, pertimbangkan untuk memecahnya menjadi beberapa bagian logistik dan menunggu lama untuk menunjukkan langkah pengguna.

9. Target sentuh yang buruk di ponsel dan tablet

Target sentuh kecil membuat frustrasi karena dapat mempersulit pengguna untuk menyelesaikan tindakan yang diinginkan. Kita semua pernah mengalami kegagalan mengetuk tombol yang salah pada ponsel cerdas kita dan harus menunggu saat layar yang salah dimuat!

Jadi, saat mendesain elemen yang dapat diklik, ingatlah bahwa pengguna dilengkapi dengan jari dengan ukuran yang berbeda:

Buat target ramah jari dengan mengingat bahwa lebar rata-rata jari telunjuk orang dewasa adalah 1,6 hingga 2cm.
Buat target sentuh Anda setidaknya selebar 45-57 piksel. Ini akan memberi pengguna cukup ruang untuk mencapai target tanpa harus khawatir tentang akurasi.

10. Menggunakan gambar yang tidak relevan atau berkualitas rendah

Foto di Antarmuka Anda akan membantu untuk menceritakan sebuah cerita, jadi pilihlah gambar yang kuat yang akan melengkapi cerita dan tampilan aplikasi Anda.

Ingatlah tips ini saat memilih gambar:

mengatasi foto yang tidak relevan. Tampilkan foto yang terkait dengan layanan atau produk Anda.
Gunakan gambar berkualitas tinggi saja.
Pilih foto yang kreatif dan realistis. mengatasi foto stok palsu atau dipentaskan.

Kesalahan umum Desain UI: Takeaway

Tujuan akhir bagi desainer UI adalah untuk menghasilkan antarmuka yang intuitif dan estetis. Itu harus menghasilkan kepercayaan, yang mengarah ke lebih banyak konversi. Ingatlah semua kesalahan ini sebagai daftar periksa hal-hal yang harus dihindari saat mendesain, dan segera Anda mungkin menemukan bahwa Anda telah mendominasi prinsip-prinsip desain ini dan tidak memerlukan daftar itu di depan Anda lagi. Saya sangat berharap Anda menemukan panduan ini berguna dan membantu Anda membuat desain yang lebih halus. Selamat mendesain!