Interested in what we do?
Let’s have a talk, and see how together we can take your brand to the next level.
Blogs · Expertise · Featured · UX · What We Do
UI Design 101 bareng Mahisi
Ada beberapa tahapan dan tools yang bisa mempermudah designer dalam membuat User Interface (UI design) untuk web/app perusahaan Anda. Semacam yang akan kita bahas ini, nih!
Pengembangan website atau aplikasi tentunya nggak bisa dipisahkan dengan UI/UX design. Jika UX atau User Experience design fokus pada interaksi user dengan brand Anda, UI atau User Interface mengarah pada tampilan antarmuka dari website atau app itu sendiri. Both UI and UX sangat krusial dalam menentukan kesuksesan bisnis Anda. Makanya, untuk membuat UI/UX design yang oke punya, ada beberapa hal yang mesti Anda perhatikan.
Nah, di artikel kali ini kami akan spesifik ngebahas tentang UI design dan apa saja yang perlu diingat dalam proses pembuatannya. Sebelum ngobrol lebih jauh tentang step-by-step dan tools-nya, nggak ada salahnya kita buka dengan pertanyaan yang paling sering ditanyakan oleh kebanyakan orang: What makes a great UI design?
“UI design yang baik tentunya yang bisa ngejawab kebutuhan user melalui visual”, kata Mahisi Annatsa, UI designer kami di Definite. Menurut Mahisi, UI design yang oke punya wajib memenuhi tiga poin penting, yaitu: functionality, aesthetics, dan personalization. Jadi, selain berfungsi dengan baik, UI design harus memiliki nilai estetika yang menarik dan personalisasi yang bisa membantu user memenuhi kebutuhannya.
Nah, kemarin kita udah ngebahas tentang wireframing di artikel ini, di mana para UX designer melakukan proses penentuan dan perencanaan susunan informasi mana yang penting buat ditonjolin di website. Kalau wireframing diibaratin kaya kita nentuin denah ruangan yang ngutamain fungsi, UI designing bisa dibilang proses pemolesannya a.k.a. it’s the time to make it aesthetic (ya walaupun fungsi dan personalisasi juga perlu).
Lalu, sama halnya dengan proses perumusan UX, pembuatan antarmuka juga perlu menerapkan design thinking atau pendekatan berbasis solusi untuk memecahkan masalah, in this case, it’s your user’s problem. “Harus inget kalau kita mendesain bukan untuk diri sendiri. Ada orang-orang yang harus kita bantu dan elevate their experience on an everyday basis,” lanjut Mahisi.
Mahisi menjabarkan, secara umum, ada tiga tahapan yang biasa diterapkan di Definite dalam proses UI design.
Tahap awal yang bisa dibilang sangat krusial dalam proses UI designing: (user) research!
Research jadi step pertama yang mesti dilakukan supaya kami lebih kenal user luar dalam. Bisa dibilang, riset merupakan tahapan terpenting dalam UI design karena tanpa riset, kita akan susah menentukan arah dan tujuan yang ingin dicapai saat pengerjaan UI design. Data pendukung seperti brand story, jenis produk/service yang ditawarkan, dan persona user sangat berguna untuk mengembangkan turunan-turunan interface yang akan kami buat. Data tersebut juga menjadi panduan kami selama keseluruhan proses design. So, in case ada masalah di tengah pengerjaan, kami selalu bisa refer ke hasil riset untuk mencari solusinya.
Proses UI designing.
Langkah kedua adalah proses design dan pengembangan UI itu sendiri. Biasanya kami mulai pengerjaan setelah dapat gambaran flow dari tim UX terkait fitur dan halaman apa saja yang mesti ada di website atau aplikasinya.
Pada tahap ini, kami biasanya mulai dengan membuat style guide, semacam panduan design yang isinya elemen-elemen penting yang dibutuhkan dalam pengembangan produk tersebut. Termasuk di dalamnya, typography, color, key visual, button, text field, dan lain sebagainya.
Style guide ini bisa dibilang yang paling penting dalam proses UI designing. Dengan style guide, desainer kami bisa terbantu untuk lebih fokus dan efisien saat pengembangan prototype karena udah ada panduan yang diikuti. Oh iya, style guide ini juga terus kami kembangkan selama pembuatan UI berjalan, lho. Dan, di akhir pengerjaan kami akan menghasilkan UI Library yang membantu konsistensi desain untuk brand atau product yang sedang dikembangkan.
Tahap terakhir dalam dalam UI designing: testing and iteration.
Setelah berhasil membuat interface dalam satu flow atau screen, saatnya melakukan user testing. Apakah UI design yang kami kembangkan dapat dimengerti oleh user?
Pada tahap ini, user akan mencoba menggunakan design prototype yang sudah kami buat. Interaksi yang terjadi antara target user dan prototype akan memberikan kita insight jika ada part yang harus di-improve, diperbaiki, atau bahkan dihilangkan.
Kalau user sudah paham dengan prototype yang kami buat, kami bisa lanjutkan hasil design tersebut kepada developer. Jika sebaliknya, user belum grasp the logic behind the interface (and possibly the UX design too), kami akan melakukan pengkajian ulang atau iterasi untuk mencari pemecahan masalahnya based on feedback yang diberikan.
Tahap ini biasanya jadi tahap yang paling challenging karena perlu dilakukan testing dan iteration berkali-kali sampai permasalahan user benar-benar terjawab. Tapi tentu aja nggak ada yang kami skip. Because at the end of the day, our goal is to always help our user. :)
Selain langkah-langkah yang udah dijelasin di atas, penting juga untuk selalu keep in touch dengan trend di luar sana. Salah satunya bisa dari ngikutin perkembangan tools untuk UI design. Mahisi punya list beberapa useful tools yang umumnya digunakan para UI designer, dan tentunya juga dipakai oleh tim kami di Definite.
“Nggak berhenti belajar dan beradaptasi.” Ujarnya. “Pekerjaan kita deket sama crafting tools jadi harus selalu paham apa yang sedang terjadi di luar sana. Selain itu, kita harus bisa emphatic all the time karena kita selalu mengutamakan solusi untuk masalah yang dihadapi user dan stakeholder. Intinya sih jangan takut sama trial dan error.” Tambah Mahisi.
Nah, sampai sini Anda pastinya udah ada sedikit gambaran tentang komponen apa saja yang perlu ada di UI design, langkah-langkahnya, sampai tools yang dapat Anda pelajari untuk mulai mengembangkan antarmuka website brand Anda. Thank you Mahisi untuk kuliah 3 SKS-nya! :) <3
Makanya, di Definite, kami menerapkan konsep Meaningful UX. Konsep ini kami kemas dalam rumus sederhana ICT = P yang merupakan singkatan dari Informed, Convenient, Thoughtful = Pleasurable. ICT = P memungkinkan kami membuat UI design yang tak hanya valid dan solutif, tapi juga memberikan manfaat atau meaning bagi user dan orang-orang yang terlibat di dalamnya. Nah, kalau Anda masih penasaran dan ingin tahu lebih jauh tentang metode kami, ngobrol santai bareng kami aja, yuk. :)
