Bikin Desain yang cakep sekaligus User Friendly

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?.

Bikin desain yang cakep

Untuk bikin desain yang cakep caranya gimana?

Oke, mari aku bahas dari sudut pandangku sendiri yaa.

Butuh Proses yang tidak instan. Namun bertumbuh.

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.

Level Desainer Mendesain UI UX

Untuk level proses dari mendesain UI UX sendiri, aku coba jabarkan versi sederhana. Katakanlah ada tokoh namanya Fatih.

Fase Awalan – PDKT 

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

Fase Jadi UI UX Desainer 

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

Fase Pengayom Desainer

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


Usaha-usaha agar desain makin cakep

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.

1 No alignment justify
Sumber: Hal kecil yang bisa kamu perhatikan agar desain UI mu makin cakep

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.

2 Overlay pada Foto
Sumber: Hal kecil yang bisa kamu perhatikan agar desain UI mu makin cakep

3. Gunakan border atau shadow untuk membuat batasan yang jelas

Perhatikan desain dibawah ini.

3 Pembeda section
Sumber: Hal kecil yang bisa kamu perhatikan agar desain UI mu makin cakep

Sekarang perhatikan dibawah ini.

Dengan ditambah border maka desain card lebih jelas satu kesatuannya. Mana elemen yang berhubungan atau tidak.

3 Pembeda Section border
Sumber: Hal kecil yang bisa kamu perhatikan agar desain UI mu makin cakep

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?

3 Pembeda section shadown
Sumber: Hal kecil yang bisa kamu perhatikan agar desain UI mu makin cakep

4. Pemisahan Konten

Perhatikan desain dibawah ini.

4 Pemisahan konten
Sumber: Hal kecil yang bisa kamu perhatikan agar desain UI mu makin cakep

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.

Desain UI Tanpa Border
Sumber: https://refactoringui.com/

6. Menggunakan Spacing (Margin / Padding) yang konsisten dan beraturan

Contoh menggunakan spacing yang konsisten menggunakan kelipatan 5 dalama mendesain UI aplikasi.

6 Ukuran yang konsisten
Sumber: Tentang ukuran pada desain UI

Untuk nomor 7 dan seterusnya kamu bisa cek lebih lengkap nya di 👉  Tips Desain Refactoring UI yaa

….

Oke setelah mengatahui cara-cara mendesain yang cakep. Sekarang kita lanjut ke bagaimana mendesain agar desain kita user friendly.


Bikin desain yang 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

  1. Kebutuhan user yang selalu ingin lebih, nggak pernah puas.
  2. Adanya layanan baru
  3. Kepentingan bisnis
  4. Ada teknologi baru / fitur baru yang ternyta bisa mempermudah.

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, user mampu mengoperasikan desain / produk dengan mudah, efisien, dan menyenangkan.

To Do List Untuk membuat desain yang User Friendly

Berikut adalah hal-hal yang bersifat ‘sunnah muakkad‘ 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.


Rekomendasi Belajar Lanjutan

Berikut adalah beberapa bahan belajar lanjutan yang aku rekomendasikan karena terbukti aku sangat terbantu dengan ilmu-ilmu yang dibagikan disini.

Medium nya Mas Dwinawan

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.

Link Medium Mas Dwinawan

Medium Dwinawan

Materi (Video & Buku) Refactoring UI

Refactoring UI.jpg
Refactoring UI. Check on https://refactoringui.com

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.

Refactoring UI Youtube

Refactoring UI Buku

 

By Iosi Pratama

Hi, I'm Iosi. I do design digital products. Other than that, I'd love doing photography. writing, and doing sports. Let's be my friend. Grab me on Twitter @iosipratama

Leave a comment

Your email address will not be published. Required fields are marked *