UI Design: Bukan Hanya Soal Tampilan Semata!
People ignore design that ignores people. — Frank Chimero
Kata User Interface (UI) Design sudah pasti marak terdengar di telinga kita sebagai seseorang yang sering bekerja dalam bagian proses pengembangan aplikasi, baik dalam bentuk website, mobile app, atau dekstop app.
UI Design sering dikatikan dengan User Experience (UX) Design padahal keduanya adalah hal yang berbeda walaupun memang berkaitan satu sama lain.
Ada pula sumber yang menyebutkan bahwa UI design merupakan bagian dari UX design. Nahloh jadi bingung sendiri :D
Oke mari kita luruskan saja,
Menurut situs usertesting.com, User Iterface (UI) adalah segala sesuatu yang berkaitan dengan desain dari sebuah program yang memungkinkan seseorang untuk berinteraksi dengan produk atau jasa yang disediakan.
Di lain sisi, User Experience (UX) adalah proses interaksi yang dilakukan antara seorang pengguna dengan produk atau jasa yang dilihat sebagai pengalaman secara keseluruhan.
Gampangnya sih, kalau UI itu desain tampilan yang akan dilihat oleh pengguna dan dapat digunakan sebagai media interaksi, kalau UX itu pengalaman interaksi antara pengguna melalui UI yang sudah ada tadi dengan produk / jasa yang diberikan oleh program kita.
Nah semoga penjelasan yang saya berikan bisa mudah kalian terima ya karena pada artikel ini kita akan fokus ke pembahasan mengenai User Interface (UI) Design secara singkat, padat, dan tentu saja semoga jelas hehe :D
UI itu soal pengguna!
Sudah kita ketahui bahwa kepanjangan dari UI adalah User Interface, yang dapat dibagi menjadi dua hal yang berbeda yaitu User dan Interface.
Kata user pada UI merupakan sebuah indikasi bahwa UI yang baik sudah seharusnya memperhatikan kebutuhan pengguna. Tidak ada UI yang baik tapi malah membuat pusing penggunanya (misal: penggunaan warna yang tidak kontras sehingga membuat mata pusing).
Jadi untuk dapat membuat UI yang baik ya kalian harus memposisikan diri sebagai pengguna agar dapat melihat berbagai kemungkinan kasus yang ada dan mengimplementasikannya melalui Interface yang baik.
Step-by-step UI Design
Setelah mengetahui apa itu UI Design, kita masuk ke dalam tahapan membuat UI Design itu sendiri. Agar menghasilkan UI Design yang baik, setidaknya dibutuhkan 3 proses yang harus kalian lalui, yaitu:
Wireframe (low-fidelity design)
Hal yang pertama kali harus dilakukan saat proses pembuatan UI Design adalah membuat wireframe. Wireframe dapat dikatakan sebagai sketsa awal atau kerangka dasar dari aplikasi yang akan dibuat. Karena itu, wireframe masuk ke dalam kategori low-fidelity design atau desain dengan keakuratan yang rendah.
Pada proses perancangan wireframe, pekerjaan yang harus dilakukan adalah membuat tata letak secara keseluruhan dari aplikasi yang akan dibuat. Kalian dapat membuat wireframe dengan memanfaatkan berbagai tools gratis yang tersedia seperti Figma, Wireframe.co, dan lain sebagainya.
Mockup (high-fidelity design)
Setelah membuat rancangan dasar dari aplikasi yang akan kita buat dan telah disetujuan oleh berbagia stakeholder, tahapan selanjutnya adalah membuat mockup.
Dilansir dari Keenethics, mockup adalah gambaran mid/high-fidelity yang menggambarkan aplikasi kita (berdasarkan wireframe) dengan melengkapi informasi seperti pilihan warna desain, layout, tipografi, iconography, visual navigasi, dan keseluruhan tampilan produk yang akan dibuat.
Untuk membuat mockup, kalian juga dapat menggunakan berbagai tools yang tersedia gratis seperti Figma ataupun aplikasi berbayar seperti Sketch dan AdobeXD.
Prototype
Mirip tapi tak sama adalah kalimat yang pantas dikaitkan antara prototype dan mockup.
Jika mockup adalah bentuk desain dari aplikasi yang sudah lengkap (semua aspek sudah final), maka prototype adalah bentuk dinamis dari mockup dimana sudah terdapat simulasi interaksi yang nantinya akan dapat dilakukan oleh pengguna ketika aplikasi kita sudah selesai dibuat.
Dengan kata lain, dengan adanya prototype secara tidak langsung kita sudah membuat simulasi bagaimana cara kerja aplikasi kita dengan segala interaksi yang dapat dilakukannya.
Untuk membuat prototype, kamu dapat menggunakan tools yang sama pada saat merancang mockup karena biasanya memang terdapat fitur prototyping di dalam aplikasi untuk mockup design.
Tips — 10 Usability Heuristics
Setelah kalian mengetahui apa yang dimaksud dengan UI Design dan tahapan yang harus dilalui agar menghasilkan UI Design yang baik, kalian juga harus menanamkan 10 nilai yang sangat berpengaruh terhadap UI/UX dari aplikasi kalian.
Sepuluh nilai tersebut terkandung dalam teori yang bernama Usability Heuristics. Eits jangan salah, hampir semua orang yang menggeluti duni UI/UX menjadikan nilai tersebut sebagai prinsip yang pegang dalam membuat UI/UX yang baik.
Adapun kesepuluh nilai tersebut berdasarkan contohnya antara lain (menggunakan proyek SekolahKu sebagai contoh) , yaitu:
1. Visibility of System Status
Sistem harus selalu memberikan informasi kepada pengguna mengenai segala hal yang terjadi melalui feedback yang sesuai dengan frekuensi dan dalam waktu yang wajar.
2. Match Between System and The Real World
Sistem harus menggunakan bahasa yang biasa digunakan oleh pengguna pada kehidupan nyata (tidak terlalu baku dan tidak terlalu santai).
3. User Control and Freedom
Sistem harus memberikan kebebasan kepada pengguna untuk memilih fungsi yang dapat meninggalkan suatu kondisi yang tidak dikehendaki.
4. Consistency and Standard
Sistem memiliki standar untuk elemen, penggunaan kata/istilah yang konsisten di setiap halaman.
5. Error Prevention
Sistem harus memberikan pesan error yang baik jika pengguna melakukan kesalahan sebagai feedback.
6. Recognition Rather Than Recall
Sistem harus memberikan keleluasaan kepada pengguna dalam mencari tahu informasi yang ada ketimbang memaksa mereka untuk mengingat informasi.
7. Flexibility and Efficiency of Use
Sistem memberi keleluasan dengan memberi alternatif aksi yang mengakomodir pengguna pemula dan pengguna yang sudah ahli.
8. Aesthetic and Minimalist Design
Sistem tidak boleh mengandung informasi yang tidak relevan atau jarang dibutuhkan.
9. Help Users Recognize, Diagnose, and Recover from Errors
Pesan error harus dinyatakan dalam bahasa yang sederhana, tanpa kode yang rumit, menunjukkan masalah secara tepat dan menyarankan solusi secara konstruktif.
10. Help and Documentation
Sistem harus memiliki dokumentasi yang relevan dan fitur “help” yang baik, sehingga user dapat mempelajari segala sesuatu yang terkait dengan sistem.
Itulah beberapa hal yang dapat saya sampaikan mengenai UI Design. Semoga dengan adanya artikel ini dapat membantu kalian yang sedang berusaha untuk membuat UI Design dari aplikasi yang akan kalian kerjakan nantinya.
Jika terdapat kesalahan, kritik, dan saran dapat teman-teman sampaikan melalui Linkedin saya atau memberikan komentar melalui postingan ini.
Terima Kasih :)
