10 Aturan Desain UI yang Baik untuk Diikuti Pada Setiap Proyek Desain Web

Lewatlah sudah hari-hari situs Geocities dengan HTML mereka yang di-hardcode dan tidak pernah berubah. Situs dan aplikasi saat ini dinamis dan interaktif. Tugas kita sebagai desainer adalah membuatnya sehingga antarmuka yang mereka gunakan untuk berinteraksi dengan desain UI web kita sedekat mungkin dengan ideal. Untungnya, ada beberapa aturan universal yang dapat membantu. Kami telah mengumpulkan apa yang kami anggap sebagai prinsip desain terbaik sehingga Anda dapat meningkatkan semua proyek desain web masa depan Anda.

10 Aturan Desain UI yang Baik untuk Diikuti Pada Setiap Proyek Desain Web

Berlangganan Saluran Youtube Kami

1. Jadikan Semua Kebutuhan Pengguna Mudah Diakses

Baik itu serangkaian alat desain untuk aplikasi desain web, inventaris untuk karakter dalam video game, spreadsheet, atau apa pun, jika pengguna tidak dapat menemukan apa yang mereka inginkan, mereka akan terpental dari perangkat lunak Anda. Tab membuat segala sesuatunya dapat diakses. Pintasan dan arahkan tooltips juga.

Kami memilih untuk menggunakan tab untuk mengatur Divi, misalnya. Semua alat yang Anda butuhkan ada di sana di pembuatnya, dipisahkan berdasarkan kategori. Bilah alat juga dapat diakses. Jika Anda menggunakan WordPress, toolbar admin memberi Anda kemampuan untuk dengan cepat membuka editor posting, penyesuai tema, pengaturan plugin, dan sebagainya. Opsi diberi label dengan jelas, dan Anda tidak perlu mencarinya.

Contoh lain adalah opsi Bantuan/Dukungan/Kontak. Saat mendesain UI, baik itu untuk aplikasi seluler, aplikasi web, situs web WordPress, atau apa pun, pengguna Anda akan selalu perlu menemukan tombol Bantuan (atau tombol Hubungi Dukungan). Mereka benar-benar perlu menghubungi Anda di beberapa titik . Itu sebabnya Anda harus selalu memastikan untuk meletakkan tombol bantuan di depan dan di tengah. Lihatlah Divi. Di setiap modul, kami memiliki tombol dukungan yang siap untuk Anda, di ujung jari Anda, kapan pun Anda membutuhkannya.

Selain itu, jendela bantuan muncul dengan tutorial video tentang fitur apa pun yang sedang Anda kerjakan. Dengan menyertakan dalam modul ini, Divi menjadi jauh lebih mudah diakses dan tidak membuat frustrasi. Plus, sebagai bagian dari UI, lokasi bantuan konsisten di seluruh produk. Yang membawa kita ke poin berikutnya…

2. Konsisten

Seperti yang kami katakan beberapa saat yang lalu, konsisten dalam penempatan fitur dalam UI Anda adalah penting. Tetapi Anda juga harus memperhatikan bahwa UI Anda berfungsi dan terlihat konsisten di seluruh produk juga. Tidak memiliki menu di atas satu halaman dan di bawah yang lain. Jangan mengatur ulang item menu setiap kali dimuat. Pastikan bahwa pengguna Anda tahu di mana hal-hal berada di situs Anda. Jika Anda menyimpan formulir kontak di bawah posting blog Anda, jangan putuskan untuk mengabaikannya. Pengguna akan melihat dan bingung.

Konsistensi juga mencakup font dan desain Anda harus bekerja dari halaman ke halaman. Jangan bertukar font header/body dari halaman ke halaman.

Ada ide menarik yang disebut prinsip paling tidak mengejutkan yang mengatakan jika Anda membuat pengguna Anda terkejut dengan cara kerja sesuatu… kerjakan ulang sehingga lebih intuitif.

Selain itu, Anda harus memastikan bahwa UI Anda sesuai untuk platform Anda — aplikasi iOS bekerja secara berbeda dalam beberapa kasus dibandingkan Android. Situs desktop memiliki kebutuhan yang berbeda dari situs seluler untuk menu, galeri, dan bahkan checkout produk. Konsistensi berarti Anda tidak membuat pengguna frustrasi dengan membuat mereka harus mencari tahu apa yang harus dilakukan di situs Anda.

3. Jelas

Ini mungkin tampak seperti pengulangan di atas, tetapi kejelasan dan konsistensi berbeda. Kejelasan berarti Anda ingin pengguna Anda tahu apa yang harus dilakukan setiap saat. Dalam beberapa hal, ini juga mempengaruhi desain UX karena mengurangi frustrasi pada pengguna Anda dan meningkatkan retensi dan mengurangi rasio pentalan.

Kejelasan adalah alasan mengapa desain web minimalis (dan sampai batas tertentu brutal) begitu populer. Orang tidak bingung tentang tujuan situs atau halaman apa pun karena tidak ada (atau sedikit) kekacauan. Anda ingin memberikan pengalaman sebaliknya yang dilakukan Ling's Cars.

Salah satu cara untuk mencapai kejelasan adalah dengan berpindah dari satu langkah ke langkah lainnya pada halaman yang berbeda. Alih-alih memiliki proses checkout, gulir ke bawah halaman — atau dimasukkan ke dalam satu bagian atau kotak — minta pengguna Anda menavigasi dari Halaman Produk ke halaman Keranjang Belanja ke Halaman Checkout ke halaman Pilih Pembayaran Anda ke halaman Tempatkan Pesanan untuk halaman Konfirmasi. (Amazon melakukan ini, seperti yang Anda lihat pada gambar di bawah).

Mereka akan tahu persis di mana mereka berdiri dalam proses, menghilangkan ambiguitas apapun. Ini sangat penting bagi pengguna seluler, karena real estat layar sangat mahal .

4. Berikan Umpan Balik

Hal terakhir yang diinginkan pengguna adalah tidak mengerti apa yang sedang terjadi. Jika mereka menekan tombol, berikan indikasi bahwa tombol itu ditekan. Anda dapat melakukannya dengan berbagai cara. Anda dapat menganimasikan tombol, membuatnya tampak tenggelam ke dalam halaman. Memuat ikon (seperti MacOS Rainbow Wheel) memberikan umpan balik, “Kami sedang mengerjakan permintaan Anda”, tanpa harus mengatakannya.

Jika Anda mengizinkan pengguna untuk mengunggah file (seperti dengan Dropbox atau Google Drive), berikan indikasi waktu yang tersisa. Berikan pop-up atau modal yang memberi tahu mereka bahwa tindakan mereka berhasil mengurangi frustrasi dan kebingungan.

Sungguh, setiap kali pengguna mengambil tindakan apa pun dalam antarmuka Anda, hanya sedikit pengakuan dapat menjadi perbedaan dalam pengalaman yang baik dan yang kurang bersemangat.

5. Gunakan Pengenalan, Bukan Ingat

Kebalikan dari keterampilan mengerjakan tes yang baik, Anda ingin pengguna Anda mengenali segala sesuatu tentang situs Anda saat mereka melihatnya. Mereka tidak perlu memikirkannya dan mengingat informasinya. Lebih dari segalanya, Anda merampingkan antarmuka Anda sehingga setiap bagian intuitif dan bergerak dari satu titik ke titik lain. Ini dapat dilakukan dengan menggunakan ikon yang dapat dikenali seperti yang kami sebutkan di atas. Orang mengenali ikon tertentu untuk hal-hal tertentu.

Itu juga dapat dilakukan dengan menggunakan tur virtual untuk memandu pengguna melalui suatu proses, bahkan ketika itu bukan pertama kalinya mereka. Mereka akan mengenali prosesnya begitu modal pertama muncul, dan mereka tidak perlu mengeluarkan energi untuk mengingat dengan tepat bagaimana melakukan tindakan tersebut.

Anda mungkin juga dapat melakukannya melalui pesan yang ditempatkan dengan baik yang mengingatkan pengguna Anda tentang apa yang dilakukan situs Anda. Kami mencapai ini di Divi dengan tooltips hover sederhana — bahkan jika seseorang tidak mengingat apa yang dilakukan ikon, kami mengarahkan mereka ke fungsinya. Setelah itu, mereka harus mengenali ikon tersebut. Atau setidaknya tooltip jika mereka melayang lagi. Atau bahkan proses melayang untuk mendapatkan informasi.

6. Pilih Bagaimana Orang Akan Berinteraksi Terlebih Dahulu

kredit foto John Picklap, milik MarieClaire.com

Anda tahu apa yang terburuk? Mendorong pintu tarik. Terutama ketika Anda baru saja mendorong sebelumnya untuk sampai ke yang itu. Perancang gedung itu membuat antarmuka pengguna tidak konsisten, jadi Anda tidak tahu bagaimana melakukan apa yang perlu Anda lakukan. Bagaimana dengan menekan sesuatu yang terlihat seperti bukan tombol, tetapi tetap menunggu tanggapan? Yah, itu karena para desainer itu tidak mempertimbangkan bagaimana penggunanya akan berinteraksi dengan produk mereka. Jadi saat Anda mendesain UI Anda, pilih satu gerakan (mungkin dua) dan pertahankan.

Pada perangkat seluler, itu cenderung menggesek. Lihat Snapchat. Hampir setiap tindakan dilakukan dengan menggesek , termasuk mencapai pengaturan dan profil Anda. Anda dapat menggeser Snapchat ke bawah untuk melihat diri Anda sendiri, geser ke kiri untuk membuka percakapan, kanan ke cerita, dan ke atas untuk mendapatkan kenangan Anda (atau apa pun sebutannya minggu ini). Mereka memilih bagaimana mereka ingin penggunanya berinteraksi dengan produk mereka dan merancang UI mereka untuk mengakomodasi itu. Bukan sebaliknya.

Saat Anda mendesain UI, pilih apakah Anda akan menggunakan menu dan ketukan, ikonografi, gesekan dan gestur, atau yang lainnya sama sekali. Alexa dan Siri menggunakan input suara sebagai interaksi UI utama mereka. Cara mereka memberikan informasi dan melakukan tugas mereka dirancang di sekitar masukan tertentu itu. Dan sebagai pengguna, Anda tahu apa yang harus dilakukan secara intuitif karena informasi tersebut telah ditetapkan untuk Anda di awal. Para desainer memberi tahu Anda apa yang harus dilakukan, dan Anda melakukannya . Pengguna Anda akan menghargai Anda melakukan hal yang sama untuk mereka.

7. Ikuti Standar Desain

Pepatah lama jika tidak rusak, jangan perbaiki berlaku di sini. Sebenarnya tidak perlu mencoba merevitalisasi sesuatu jika standarnya berhasil. Mulai dari penggunaan ikon hingga penempatan elemen standar. Anda tidak ingin bertentangan dengan apa yang diharapkan pengguna Anda lakukan. Orang tahu bahwa tanda tanya (?) menunjukkan bantuan. Jadi jangan gunakan tanda seru (!) . Jika Anda ingin pengguna menemukan menu seluler Anda, gunakan ikon hamburger (tiga garis bertumpuk), bukan kotak.

Pikirkan tentang bilah pencarian. Mereka cenderung berada di tempat yang sama di sebagian besar situs: bagian atas sidebar atau akhir menu header. Jika tidak ada, bagian tengah halaman atas. Jika Anda memutuskan untuk memasukkan satu-satunya bidang pencarian di bagian bawah sidebar, footer halaman, atau di bawah teks posting blog Anda, orang tidak akan tahu ke mana harus mencari. Bahkan jika Anda mengidentifikasinya dengan ikon kaca pembesar standar.

Tidak ada yang salah dengan berpikir di luar kebiasaan dan mencari desain baru dan inovatif, tetapi itu tidak berarti bahwa desainnya sulit digunakan.

8. Hirarki Elemen Penting

Tidak, kami tidak bermaksud bahwa baik Bumi, Angin, Air, atau Api adalah bos dari yang lain. Maksud kami elemen pada halaman Anda harus memiliki hierarki yang jelas untuk utilitas dan cara pengguna melihat halaman. Pada dasarnya, Anda ingin memastikan bahwa fungsi yang paling penting ada di bagian atas halaman masing-masing. Selain itu, hierarki semacam ini dapat mengarahkan pengguna ke halaman secara organik, mengarahkan pengguna melalui layanan Anda.

Elemen besar yang berkurang ukurannya saat Anda bergerak melalui proses menunjukkan pentingnya dan keteraturan. Begitu juga dengan warna dan kontras. Memanfaatkan spasi juga penting, karena kekacauan dapat menghambat kemajuan pengguna dan mengalihkan perhatian dari tujuan halaman. Garis yang bersih, banyak ruang, dan elemen yang terdefinisi dengan baik dapat secara visual menunjukkan kepada pengguna Anda cara berpindah melalui UI Anda tanpa dokumentasi atau anotasi apa pun.

Aturan praktis yang layak adalah Anda ingin menjaga segala sesuatunya mengalir dari kiri ke kanan, atas ke bawah.

9. Buat Segalanya Sederhana

Lihat formulir kontak ini:

Sekarang lihat yang ini:

Keduanya adalah formulir kontak untuk mengajukan permintaan. Salah satunya adalah tidak ada masalah untuk diisi, sementara yang lain sedikit lebih sakit kepala. Di luar sebagai formulir pemerintah, desain formulir bawah tidak dibuat untuk pengguna tetapi untuk administrator. Itu bukan pekerjaanmu. Tugas Anda adalah membuat segala sesuatunya senyaman mungkin bagi pengguna . Dan salah satu cara terbaik untuk melakukannya adalah memotong apa pun yang tidak mutlak diperlukan.

10. Jaga agar Pengguna Anda Bebas & Terkontrol

Hal terakhir yang ingin kami sentuh — dan hal terakhir yang ingin Anda lakukan dengan UI Anda — adalah mengambil kendali dari pengguna. Atau untuk membuat mereka merasa terkekang atau dibatasi oleh desain Anda. Anda ingin memberdayakan mereka, dan UI Anda harus memungkinkan mereka melakukan tindakan yang mereka inginkan. Ada dua bagian dalam aturan ini: konteks dan izin .

Pertama, tindakan apa pun yang perlu dilakukan pengguna harus ditempatkan di dekat apa yang ingin mereka lakukan. Jika mereka perlu mengedit postingan, tombol edit harus berada di dekat tombol simpan , publikasikan/kirimkan , pratinjau . Bahkan, opsi yang lebih baik adalah menu kontekstual untuk semua tindakan yang dapat dilakukan pengguna pada item (atau halaman) tertentu. Jika Anda konsisten dengan UI Anda, seperti yang kita bicarakan di atas, pengguna Anda akan memahami bahwa menu konteks atau bilah alat ini akan selalu memiliki seluruh daftar tindakan untuk elemen tertentu.

Selain itu, UI Anda harus selalu membuat pengguna merasa seolah-olah mereka dapat keluar dari atau mengembalikan tindakan apa pun yang mereka lakukan. Saat Anda mendesain UI, mereka akan menggunakannya . Jadi mereka membutuhkan izin (atau bahkan kebebasan) untuk melakukan apa yang mereka butuhkan untuk menyelesaikan pekerjaan. Melakukan ini bisa sesederhana menambahkan tombol batal ke setiap halaman checkout e-niaga Anda (karena menekan tombol kembali browser dapat menyebabkan segalanya menjadi kacau). Mungkin itu fitur undo sehingga mereka merasa eksperimen itu baik-baik saja. Atau riwayat revisi untuk proyek skala besar (seperti di Google Drive atau WordPress atau Git).

Ketika pengguna Anda merasa bebas dan tidak dibatasi, Anda jelas telah mengikuti beberapa prinsip desain UI yang baik.

Apakah UI Siap?

Permainan kata yang buruk. Aku tahu, maaf. Tetapi dengan aturan UI ini, Anda benar-benar akan siap untuk membuat proyek desain web Anda berikutnya keluar dari taman. Sementara beberapa di antaranya mungkin berlaku lebih untuk beberapa proyek daripada yang lain, UI yang baik adalah UI yang baik, dan UI yang baik mengarah ke UX yang baik. Tapi itu topik untuk posting yang sama sekali berbeda.

Apakah Anda memiliki aturan untuk desain UI yang baik yang selalu Anda ikuti?

Gambar unggulan artikel oleh emojoez / shutterstock.com