Jika Sebelumnya kita telah membahas 7 konsep dasar UI/UX design. Nah pada pembahasan tersebut, Saya sudah menyinggung sedikit mengenai perbedaan UI design dan UX design, yaitu UI berbicara tentang apa yang dilihat user dan bagaimana user berinteraksi, sedangkan UX banyak berbicara mengenai aspek sistem yang membangun experience user.
Perbedaannya tentu tidak sekedar itu, banyak bedanya hehe. Biar gak ketuker-tuker lagi, mana UI dan mana UX, kita bahas satu per satu saja ya, dimulai dari UI design.
“User Interface Design (UI Design) adalah proses yang digunakan desainer untuk membangun interface pada software atau perangkat komputerisasi, yang berfokus pada look atau style."
Sumber (interaction-design.org)
Definisi tersebut cukup bisa dimengerti kan ya? Selanjutnya, kita bahas elemen dasar UI design yuk. Elemen ini akan banyak dan sering dipikirkan oleh UI designer. Masing-masing elemen memiliki metode agar bisa digunakan dengan baik dan benar.
Elemen Dasar User Interface Design
1. Aligment
Ketika kita menginginkan aplikasi terlihat sangat rapi atau clean tetapi banyak elemen yang harus ada pada suatu page, apa yang harus kita lakukan? UI Designer perlu membedakan beberapa elemen dan beberapa konten menjadi beberapa kelompok. Penentuan kelompok-kelompok ini didasarkan pada tinggkat kebutuhan suatu digital product.
Apa yang menjadi point-of-view dari satu page pada suatu aplikasi harus terlihat memiliki ruang sendiri, tidak menempel dengan elemen atau konten lain sehingga user dapat dengan mudah berfokus pada elem atau konten tersebut.
Ketika suatu page memiliki komponen berupa image, title, subtitle dan description, maka yang perlu pertama kali dilakukan adalah mengambil satu elemen terpenting atau elemen utama dari beberapa elemen tersebut.
Seperti yang Saya jelaskan sebelumnya bahwa elemen utama harus memiliki ruang sendiri atau setidaknya memiliki batas yang cukup agar tidak terkesan penuh atau diibaratkan user dapat bernafas dengan mudah pada saat melihat halaman dengan elemen-elemen tersebut.
Pada suatu page atau bagian dari suatu page yang terdiri dari hanya dua elemen yaitu icon dan text maka icon harus memiliki ruang sendiri dibagian kiri halaman. Kemudian text deskripsi juga diletakkan diruang sendiri yaitu berada disisi kanan icon pendampingnya, text ini juga harus rata pada sisi kiri atau segaris lurus disisi kiri (kanan icon).
Hal ini bertujuan untuk membuat halaman terlihat rapi (tidak tercampur antar elemen) serta memiliki konsistensi yang baik pada sisi design. Case pada paragraf ini juga dapat diterapkan pada text yang memiliki bullet point.
2. Size & contrast
Seperti pada saat menerapkan aligment, UI Designer juga harus mampu mengelompokkan tingkat kepentingan elemen atau konten. Contoh sederhana adalah pada title suatu konten, title ini harus ditonjolkan karena menjadi point-of-view konten.
Title dapat ditonjolkan dengan memberikan size text yang lebih besar dari text yang lain serta dicetak bold agar terlihat semakin jelas. Title pada konten terkadang tidak hanya berfungsi sebagai perwakilan kata dari suatu deskripsi atau sekumpulan text, namun juga dapat digunakan sebagai pemanis tampilan aplikasi. Kita juga dapat menggunakan jenis font yang berbeda ketika text ini berfungsi sebagai pemanis.
Contrast pada aplikasi biasanya diterapkan dengan memberikan warna yang berbeda yang lebih mencolok contohnya pada button utama yang mewakili suatu action. User dapat dengan mudah memahami bahwa button tersebut merupakan perwakilan dari suatu action dengan melihat kontras yang diterapkan.
Namun apakah kontras pada produk digital hanya dapat diterapkan dengan perbedaan warna? Tentu tidak! Contrast juga dapat diterapkan dengan membagi ruang elemen atau konten, contohnya konten-konten dapat ditaruh pada sisi website yang lebarnya sekitar ¾ dari keseluruhan lebar website. ¼ sisa halaman dikanan diberikan konten pemanis.
Membedakan ukuran elemen juga dapat digunakan untuk memberikan kontras, seperti image yang berukuran besar, image yang berukuran besar ini akan menarik perhatian user dan memberikan experience yang menyenangkan untuk user.
3. Space
Berdasarkan UI layout dan composition, space adalah aspek yang diperlukan pada visual language dari design selain warna, text, dan icon. Space akan membantu UI Designer membuat “breathing room” untuk mata user dan kemudian membuat user nyaman untuk menghadap kepada suatau page dalam waktu cukup lama.
Space juga dapat membantu user untuk memahami function pada produk digital serta membuat user dapat berfokus pada konten-konten yang penting. Untuk itulah UI Designer harus mampu memahami space pada desain serta memahami konsep dari space tersebut. Konsep-konsep tersebut terbagi menjadi dua yaitu proximity dan negative space atau white space.
A. Proximity
Proximity adalah salah satu kaidah design dari Gestalt Theory in UI/UX design. Kaidah dari proximity ini didasarkan pada elemen atau objek yang menyerupai satu sama lain pada suatu halaman yang berhubungan dengan elemen atau objek lainnya.
UI Designer dapat mengimplementasi proximity ini untuk membedakan atau menonjolkan suatu grup elemen dan membuat sub-hirarki untuk grup-grup UI elemen tersebut. Gak usah diambil pusing! Proximity hanya mengenai menempatkan elemen-elemen yang saling berhubungan berdekatan.
Contoh proximity ini adalah icon notification atau inbox yang diletakkan berdekatan dengan icon chat. Pada umumnya mereka diletakkan pada ujung kanan atas suatu halaman aplikasi.
B. Negative Space atau White Space
Merupakan space yang berada diantara elemen-elemen UI pada suatu halaman. Penerapan white space pada UI Design dapat membantu memisahkan elemen satu dengan elemen lain sehingga user dapat fokus pada suatu elemen dan dapat memahami elemen secara lebih mudah. Penggunaan white space didasarkan pada konten atau item.
Suatu halaman yang memiliki konten atau item yang lebih banyak hanya membutuhkan sedikit white space dibandingkan dengan halaman lain yang hanya sedikit memiliki konten atau item. Contoh yang sering kita jumpai adalah white space pada halaman login dan white space pada halaman Home.
Pada halaman login pada umumnya tidak memiliki banyak konten sehingga kita dapat memberikan white space lebih banyak. Pemberian white space yang banyak disekitar konten atau login memudahkan user untuk fokus pada login aplikasi.
Sedangkan pada halaman home yang pada umumnya memiliki banyak konten, maka pemberian white space harus lebih hemat agar user tetap mendapatkan breathing room namun tetap mendapatkan view dari konten-konten lain. Contoh lain yang hanya membutuhkan white space adalah halam produk pada website atau aplikasi e-commerce.
4. Color Theory
Menurut teman-teman sekalian pemilihan warna tergolong mudah atau sulit? Jika kita memilih warna berdasarkan color psychology ini akan lebih complicated, karena dalam color psychology, pemilihan warna mempengaruhi mood dan behavior user.
Walaupun user jarang memperhatikan secara seksama terhadap warna pada suatu produk namun mata mereka tetap menerima warna tersebut dan warna-warna itu masuk ke otak kemudian memberikan sinyal untuk endocrine system yang akan mengeluarkan suatu hormon yang mempengaruhi mood dan emosi user.
Apabila kita memikirkan tentang bisnis dan marketing, tentu hal-hal tersebut harus dipikirkan karena akan berdampak untuk jalannya bisnis mereka. Menurut penelitian dari Colorcom menunjukkan bahwa user atau customer hanya membutuhkan waktu 90 detik untuk menilai suatu produk dan sekitar 62% hingga 90% penilaian tersebut didasarkan hanya pada warna.
Namun kita tidak perlu memikirkan terlalu dalam, cukup mengetahui basic dari color theory (color combination) yang akan kita aplikasikan pada saat mendesign produk. Apa saja basic color theory tersebut?
A. Color Wheel
Color wheel digunakan dengan tujuan untuk membedakan warna satu sama lain dan mengkombinasikan warna-warna tersebut. Color cicle ini biasanya digunakan untuk mengambil 3 warna yaitu warna primary, secondary dan tertiary.
Color cicle ditemukan pada tahun 1966 oleh Isaac Newton dengan cara sistematik dan semenjak itu terdapat banyak transformasi namun tetap berpacu pada main tool dari color combination.
 |
| Contoh Color wheel | Sumber Gambar (color-meanings.com) |
B. Color Models
Sebelum kita memilih beberapa warna dan mengkombinasikan-nya, kita perlu memahami bahwa warna memiliki dua sifat yang berbeda yaitu real color yang ada dipermukaan objek dan warna yang dihasilkan dari cahaya seperti televisi atau laptop. Dua jenis warna tersebut membentuk model warna dengan color cicle yaitu additive dan subtractive.
 |
| Contoh Color Models | Sumber Gambar (officexpress.co.uk) |
1) Additive color menganggap warna merah, biru dan hijau sebagai warna primer.
Tiga warna ini kemudian kita kenal sebagai sistem warna RGB. Sistem pewarnaan ini merupakan dasar dari semua warna yang digunakan pada screen suatu produk teknologi. Kombinasi warna primer dalam suatu proporsi dari sistem tersebut menghasilkan warna sekunder yaitu Cyan, Magenta dan Yellow (CMY).
2) Subtractive color memperoleh daftar warna dari pengurangan cahaya.
Model ini terdiri dari dua sistem pewarnaan, yang pertama adalah Red, Yellow dan Blue (RYB). RYB dikenal sebagai artistic system yang sering digunakan pada pendidikan seni.
RYB adalah dasar untuk color theory ilmiah modern yang menentukan bahwa CMY adalah set warna yang paling efektif dari tiga warna untuk dikombinasikan. CMY banyak digunakan dalam media cetak, warna yang digunakan termasuk warna tinta hitam sehingga selanjutnya sistem pewarnaan ini dinamai dengan Cyan, Magenta, Yellow dan Black (CMYK).
C. Color Harmony
Color harmoni adalah penyusunan warna pada desain dengan cara yang efektif yang sesuai dengan persepsi user ketika warna dikombinasikan atau diaplikaksikan pada produk digital user akan merasa senang dan tenang melihatnya. Color harmoni sangat penting dalam mendesain karena user dapat terkesan dari aplikasi berdasarkan first-looknya.
 |
| Contoh Penerapan Typography | Sumber Gambar (uxplanet.org) |
Dalam mendesain sebuah page, typography tidak hanya berfungsi sebagai petunjuk atas suatu informasi, lebih dari itu! Ketika kita dapat mengolah suatu kata atau kalimat, typography dapat berfungsi sebagai decorative element.
Terlebih apabila UI design dari aplikasi tidak memiliki banyak konten dan tidak memungkinkan untuk memberi image accent terlalu banyak. Namun perlu dicatat, bahwa poin utama pada typography adalah mengenai kemudahan dalam membaca.
Catatan lain dari typography adalah, user mungkin saja tidak membaca kata atau kalimat tetapi mereka men-scan kata atau kalimat tersebut. Proses user men-scan ini harus terasa nyaman di mata mereka.
Lalu, sebagai UI designer, elemen apa saja yang harus harus dipikirkan agar tujuan typography dapat terlaksana? Mari kita bahas satu per satu ya.
A. Typeface dan Font
Hal dasar dalam typography adalah 2 elemen tersebut. Typeface adalah tipe karakter huruf yang terdiri dari semua size dan weight. Pemilihan typeface ini sebaiknya mengikuti karakter dari company atau setidaknya sejalan dengan identitas company.
Nah karakter ini kemudian direpresentasikan kedalam satu jenis font. Tips dalam menentukan typeface dan font! kalian bisa memulai dengan mengenali company lebih dalam sehingga kalian tahu betul bagaimana identitas dan karakter dari company tersebut, atau ketika suatu digital platform mewakili satu layanan.
Kalian dapat lebih spesifik menentukan karakternya berdasarkan layanan tersebut. Untuk pemilihan font, UI designer harus jeli banget dalam melihat font di berbagai ukuran. Kita harus lebih peka guys, sangat banyak font yang ketika kita melihat di ukuran normal terlihat indah namun ketika ukurannya lebih besar tidak seindah ukuran normalnya.
B. White Space
Sudah berapa kali kita membahas white space di modul ini? Sepertinya berkali-kali hehe. Karena white space ini sangat berpengaruh pada banyak elemen guys tidak terkecuali pada elemen typography. Pada typography, white space akan memudahkan user untuk membaca dan membuat user nyaman ketika men-quick-scan suatu kata atau kalimat.
C. Allignment
Sama seperti white space, sepertinya kita juga sudah berkali-kali membahas allignment hehe. Tujuan allignment pada typography ini adalah menempatkan dan meratakan text pada suatu garis lurus, ntah itu garis lurus kiri, kanan, tengah, kiri-kanan, atau kombinasi dua garis lurus seperti perataan di tengah untuk title dan perataan kiri-kanan untuk deskripsi.
6. onsistency
Hampir semua elemen pada UI design yang sudah kita bahas pada modul ini mengedepankan sisi konsitensi, tujuannya adalah agar elemen-elemen tersebut terlihat seragam atau saling menyerupai satu sama lain dan biar gak bikin pusing user!.
Bayangkan saja jika setiap berpindah page, user perlu berpikir maksud dan tujuan elemen! Bisa jadi user kabur dari aplikasi yang kita desain. Selain memperhatikan masing-masing UI design elemen, ada hal-hal lain yang harus kita pikirkan. Nah hlo makin banyak aja ya kita bahas tentang ke-konsistensian ini hehe.
Tapi gak banyak kok, cuma dua, apa saja? Cek dibawah yaa…
A. Bedakan Ke-konsistensian Berdasarkan Platform
Pada digital platform kita mengenal iOS yang digunakan pada gadget-gadget dari Apple dan Android yang digunakan pada banyak gadget. Masing-masing platform ini memiliki guideline yang berbeda.
Untuk iOS kita bisa mengikuti guideline dari developer.apple.com dan untuk Android kita bisa lihat di material.io. Guideline-guideline ini akan membantu membuat UI design yang sesuai dengan perspektif user sehingga UI design yang kita buat menjadi lebih mudah dan lebih cepat dipahami.
B. Mengikuti Desain App Lain Bukan Berarti Menjiplak
Di era teknologi saat ini, digital platform telah bertebaran dimana-mana dan sudah sangat melekat dengan keseharian user. Mereka dapat “bertahan” berjam-jam mengakses digital platform untuk tujuan tertentu dan mereka merasa nyaman melakukan hal tersebut.
Inilah salah satu tujuan utama UI designer. Bagaimana suatu desain menjadi nyaman dan familiar bagi user, salah satunya dengan mengikuti UI desain dari digital platform yang sering mereka gunakan atau yang sama dengan main idea dari digital platform yang akan kita bangun.
Seperti pada point pertama, hal ini dilakukan dengan tujuan agar user lebih mudah dan lebih cepat memahami digital platform. Mereka akan dengan mudah mencapai tujuannya karena sudah familiar dengan desain dan experience digital platform yang kita bangun.
7. Simplicity
Kalau kalian belanja online di suatu e-commerce, kalian pernah ngebayangin gak sih seberapa banyak sistem berproses agar produk yang kalian order bisa sampai di tempat kalian? Dan kalian pernah ngebayangin gak seberapa rumit Google memproses pencarian dari keyword yang kalian tulis di halaman pencarian Google?.
Kalau kalian tidak pernah memikirkan itu, berarti e-commerce dan Google telah membuat interface sedemikian rupa sehingga apa yang rumit menjadi tampak sederhana dimata kalian. Itulah jobdesc yang harus dilakukan oleh UI designer, bagaimana membuat sekumpulan sistem yang rumit pada suatu digital platform, nampak sederhana atau simple di mata user.
Jobdesc ini sebenarnya lebih banyak masuk ke ranah UX designer, yaitu membagi beban antara front-end dan back-end system sehingga apa yang ada pada front-end hanyalah apa yang sesuai dengan kebutuhan user.
Namun UI designer tetap perlu memikirkannya. Bagaimana caranya?
A. User Paham Tanpa Penjelasan
Sebagai UI designer, tentu kita tidak akan menjelaskan masing-masing fitur atau elemen pada app atau website. UI designer juga tidak mungkin memberikan training agar user memahami segala yang ada pada app atau website tersebut. Maka berpikirlah bagaimana membuat UI design yang mudah dipahami tanpa perlu menjelaskannya kepada user.
B. User Terbiasa Melakukan dengan Cara Ini
UI design yang baik tidak terlalu membutuhkan desain yang baru dan atau berbeda. UI designer hanya perlu memahami bagaimana user pada umumnya melakukan sesuatu di digital platform. Hal ini membutuhkan kepekaan atau pemikiran yang kritis terhadap perspektif user. UI designer perlu melihat secara jeli bagaimana user mendapatkan apa yang menjadi kebutuhan dan tujuan mereka.
Sumber Referensi : uxplanet