Bikin Desain yang cakep sekaligus User Friendly
by
Iosi Pratama
by
Iosi Pratama
Hmm, bahasan yang cukup menarik. Ini adalah bahasan yang akan saya sharingkan di GNFI senin depan. Semoga yang saya tulis atau sampaikan nanti bermanfaat bagi yang menerimanya.
Terdengar klise? Gapapa.
Bikin desain yang cakep sekaligus User Friendly.
Dari topik diatas, dapat aku bagi menjadi 2 hal yang saling berkaitan. Yang pertama adalah
bikin desain yang cakep
. Yang kedua
bikin desain yang User Friendly
. Mari kita bahas satu persatu. Sebelum itu, tentang prioritas UI dan UX kamu bisa membaca nya disini
Mengenai prioritas, UI dulu atau UX dulu?
.
Untuk bikin desain yang cakep caranya gimana? Oke, mari aku bahas dari sudut pandangku sendiri yaa.
Dalam mendesain UI khususnya tentu desainer manapun tidak ada yang langsung terlahir di dunia ini, bayi lalu bisa mendesain sebuah user interface yang cakep banget. Kamu udah tau pastinya. Ada desain yang biasa aja. Ada desain yang cakep. Dan ada desain yang cakep buanget pol. Perbedannya adalah dari kelamaan desainer nya mendesain. Semakin lama mendesain, maka dia akan semakin pengalaman mengetahui trik-trik cara membuat suatu desain cakep.
Untuk level proses dari mendesain UI UX sendiri, aku coba jabarkan versi sederhana. Katakanlah ada tokoh namanya Fatih.
Difase awalan ini biasanya hasil UI yang didesain Fatih masih ala kadarnya. Desain cenderung suka-suka karena keterbatasan pengetahui tentang desain UI. Baru mau belajar UI dari bidang lain, bisa desain grafis maupun programmer. Yang dia lakukan
Mencoba mendesain UI untuk pertama kalinya - Kedua, ketiga, dan seterusnya masih dibawah 50 Desain. *Ngga pasti juga sih angkanya
Menjiplak desain tanpa tahu mendalam landasan "kenapa-nya" dalam mendesain
Yang dia pelajari
Belajar menggunakan aplikasi desain berserta tool nya
Menjiplak ukuran tiap elemen (font, icon, button, dropshadow dll) dari refrensi yang dia suka.
Banyak cari-cari referensi dan belajar tentang UI UX di berbagai sumber (Medium, Youtube, dll)
Belajar fundamental desain tentang typography, spacing, color contrast, whitespace, dll.
Beberapa link referensi yang mungkin membantu
Untuk temen temen yang mau memasuki Industri UI/UX
Apa saja hal yang sebaiknya dipelajari oleh UI Designer?
Daily UI Design Mackenzie Child
Di fase ini, Fatih telah bekerja sebagai UI UX Designer di sebuah perusahaan. Hasil desainnya sudah mulai bagus. Sudah terbiasa dengan tool dan sedikit banyak tahu bagaimana desain yang bagus itu. Disini mata desain Fatih sudah mulai terlatih. Yang dia lakukan
Menjoba memodifikasi desain dari referensi yang dia pilih kemudian dia kembangkan sesuai desain yang dibutuhkan.
Yang dia pelajari
Pengetahuan lanjutan bagaimana trik mendesain UI yang lebih baik.
Belajar membuat desain yang bagus menjadi semakin wow lagi dengan sedikit edit sana-sani.
Belajar mempertanyakan "kenapa" dalam hal-hal desain
Belajar mendesain dengan cara / teknik yang benar "best practice"
Beberapa link referensi yang bisa membantu
Cara eksplorasi Layout biar enggak gitu gitu aja?
Proses Eksplorasi Design — Dashboard Design
Yang terakhir adalah fase pengayom desainer-desainer muda. Disini Fatih sudah berpengalaman lebih dari 5 tahun di dunia UI UX Design dan telah mendesain banyak sekali screen sebelumnya. Telah melewati fase-fase yang diatas, sekarang Fatih lebih aktif memberikan feedback maupun sharing ilmu nya kepada desainer muda. Saat lihat suatu desain, dia langsung kebayang bagaimana membuat desain tersebut bisa jadi lebih cakep lagi (dalam otak). Yang dia lakukan
Sharing ilmu-ilmu nya kepada desainer muda.
Beberapa link referensi yang berhubungan
Dear Team Leader, hal hal yang bisa meningkatkan hubungan mu dengan team mu
Dear Team Leader, jangan buru buru menyalahkan anggota team mu
Berikut ini saya coba sertakan beberapa tips kecil yang bisa langsung kamu praktikan agar desain kamu makin cakep.
1. Untuk paragraf atau teks, sebaiknya tidak menggunakan alignment justify
Perhatikan dua desain dibawah ini. Fokus pada text paragraf nya. Terlihat text yang menggunakan alignmen justify / rata tengah (sebelah kiri) memiliki letter spacing yang kurang beraturan sehingga susah dibaca. [caption id="attachment_1570" align="aligncenter" width="1600"]
Sumber:
[/caption]
2. Kalau ingin menaruh elemen diatas foto, gunakan overlay
Dengan menggunakan overlay didesain dibawah ini (sebelah kanan) maka text terlihat lebih jelas karena kontras nya cukup. [caption id="attachment_1571" align="aligncenter" width="2000"]
Sumber:
[/caption]
3. Gunakan border atau shadow untuk membuat batasan yang jelas
Perhatikan desain dibawah ini. [caption id="attachment_1574" align="aligncenter" width="2880"]
Sumber:
[/caption] Sekarang perhatikan dibawah ini. Dengan ditambah border maka desain card lebih jelas satu kesatuannya. Mana elemen yang berhubungan atau tidak. [caption id="attachment_1572" align="aligncenter" width="2880"]
Sumber:
[/caption] Cara lain selain yang sekarang populer selain border untuk memperjelas antar elemen yang berbeda adalah menggunakan shadow. Lihat desain dibawah ini. Terlihat lebih clean bukan? [caption id="attachment_1573" align="aligncenter" width="2880"]
Sumber:
[/caption]
4. Pemisahan Konten
Perhatikan desain dibawah ini. [caption id="attachment_1575" align="aligncenter" width="2800"]
Sumber:
Hal kecil yang bisa kamu perhatikan agar desain UI mu makin cakep
[/caption] Desain 1 ? Semua menu ditaruh semua berurutan dari atas kebawah. Desain seperti ini akan terlihat rapi kalau menu nya sedikit. Namun kalau banyak, maka user ada kemungkinan akan kesulitan untuk mencari suatu menu dengan cepat. Desain 2 dan Desain 3 ? Menu dipisah berdasarkan kategori nya. Dengan desain ini kita beramsumsi user akan semakin mudah untuk mencari menu yang dibutuhkan dengan langsung melihat kategori.
5. Hilang border agar tampilan terlihat makin clean
Perhatikan desain dibawah ini. Dengan menghilangkan border terlihat desain lebih clean dan cakep.
6. Menggunakan Spacing (Margin / Padding) yang konsisten dan beraturan
Contoh menggunakan spacing yang konsisten menggunakan kelipatan 5 dalama mendesain UI aplikasi. [caption id="attachment_1583" align="alignnone" width="1500"]
Sumber:
[/caption] Untuk nomor 7 dan seterusnya kamu bisa cek lebih lengkap nya di ?
yaa .... Oke setelah mengatahui cara-cara mendesain yang cakep. Sekarang kita lanjut ke bagaimana mendesain agar desain kita user friendly.
Untuk membuat desain yang cakep minta feedback nya bisa ke teman desainer. Namun kalau mau bikin desain yang user friendly, minta feedback nya yaa ke target pengguna sebenarnya, bukan desainer. Kecuali produk kita memang untuk desainer seperti software Photoshop, AI, Figma, dll. Perlu diketahui juga bahwa desain akan selalu berkembang karena berbagai macam faktor dibawah ini
Jadi user friendly disini bukanlah sebuah titik yang saklek / kaku. Desain yang sekarang user friendly bisa jadi tidak lagi user friendly lagi dilain waktu. Kembali lagi bisa karena hal diatas.
Berkaitan dengan alur, efisiensi, dan kemudahan
Suatu desain bisa dikatakan user friendly ketika mayoritas pengguna tidak kesulitan dalam mengoperasikannya. Seiring berkembang pesatnya ilmu Yu Ex -> User Experience beberapa tahun belakangan. Definisi kata user friendly pun meningkat menjadi,
.
Berikut adalah hal-hal yang bersifat '
' dalam mendesain desain yang user friendly.
1. Riset terlebih dahulu tentang masalah dan kebutuhan calon pengguna
Untuk riset sendiri banyak cara yang bisa dilakukan. Misalnya dari pengalaman pribadi maupun orang lain. Dari postingan di sosial media. Maupun dari mana saja. Misalnya Fatih ingin mendesain aplikasi untuk kasir. Maka diperlu melakukan riset atau cari tahu, kira-kira yang dibutuhkan dalam membuat kasir untuk gimana sih. Tomboh apa saja. Menu apa saja. Fatih bisa mengamati dari mesin kasir nyata yang ada di mall-mall. Kemudian tulis hal-hal pokoknya.
2. Melakukan test ke pengguna dan memperbaikinya
Nah ini sekali lagi, dari tahap desain cakep ke user-friendly harus melewati tahap ini dulu. Fatih harus mencobakan langsung desain prototype aplikasi kasir tadi UKM dan pelajari reaksinya. Di UX, ini istilah nya melakukan Usability Testing. Untuk metode nya, kamu bisa googling. Sedehananya gini. Siapkan prototype nya. Kemudian cari target pengguna. Disini kasusnya Fatih adalah UKM sebagai target market. Kemudian Fatih mempersiapkan tugas berupa cerita yang akan menjadi intruksi untuk UKM nya, misalnya
Ada pembeli "Sifulan" yang membeli barang "Sabun". Uang nya Rp 50.000. Coba operasikan hingga jadi nota pembelian.
Bagaimana cara kamu "pengguna" edit harga barang?
Untuk tugas diatas, fokuskan memang pada hal-hal yang inti dari produk yang desain. Kita tidak terlalu perlu untuk mengetes login, register, ganti profil karena ini kita bisa pakai referensi yang sudah ada.
Berikut adalah beberapa bahan belajar lanjutan yang aku rekomendasikan karena terbukti aku sangat terbantu dengan ilmu-ilmu yang dibagikan disini.
Yang pertama adalah dari Medium nya Mas Dwinawan. Mas Nawan ini adalah Cristiano Ronaldo nya UI Desain di Indonesia. Level nya sudah di pengayom desainer dan terus berkomitmen untuk sharing ilmu tentang mendesain User Interface.
[caption id="attachment_1585" align="aligncenter" width="800"]
Refactoring UI. Check on
[/caption] Refactoring UI adalah sebuah situs yang berisikan trik mendesain UI agar terlihat makin cakep dengan mengetahui cara-cara nya. Di Refactoring UI terdapat artikel, video, dan juga buku yang semua sangat aku rekomendasikan untuk di pelajari.