UI Design Introduction
Sebelum kamu membaca materi ini, pasti kamu melalui proses saat membuka
halaman beranda MySkill di handphone atau laptop, lalu kamu membuka halaman
login untuk masuk ke akunmu, hingga sampai ke halaman e-learning untuk
membuka materi belajar yang kamu pilih. Nah, beberapa halaman yang kamu buka
tadi merupakan bagian dari UI (User Interface) Design lho! Hmmm, jadi apa sih
UI Design itu? 🤔
Pengertian UI Design
UI (User Interface) adalah bagian visual di mana interaksi antara user dengan
sebuah perangkat terjadi. Sedangkan UI Design adalah proses merancang visual
pada sebuah perangkat dengan memfokuskan pada gaya, visualisasi, coloring, dan
kreativitas lainnya pada interface yang akan digunakan oleh user. Sederhananya,
UI Design merupakan tampilan produk yang ingin kita perlihatkan kepada user.
Format UI Design
1. GUI (Graphical User Interface). GUI merupakan sistem komponen visual
interaktif pada perangkat lunak, di mana user dapat berinteraksi dengan
komponen grafis seperti ikon, tombol, dan menu. Dalam GUI, visual yang
ditampilkan menyampaikan informasi yang relevan beserta tindakan yang
dapat user lakukan seperti klik, drag, dan lain-lain.
Contoh GUI. Sumber: HubSpot
Pada contoh gambar di atas, terdapat format GUI pada halaman Spotify, di mana
kita dapat melakukan interaksi pada halaman tersebut seperti mengklik tombol
play, melakukan scroll untuk melihat daftar lagu, menaikkan atau menurunkan
volume suara, dan sebagainya.
2. VUI (Voice User Interface). VUI merupakan format pada interface yang
memungkinkan user untuk mengontrol sistem atau perangkat lunak secara
sebagian atau keseluruhan menggunakan perintah suara. Dengan VUI, user dapat
berinteraksi pada perangkat dengan ucapan atau suara yang dimilikinya. VUI
membantu user untuk menjalankan perangkat dengan lebih efisien, karena user
tidak perlu terlalu lama menatap layar, mengetik di keyboard, atau mengklik
halaman tertentu. Contoh VUI yang mudah kita temukan sehari-hari yaitu pada
Google Assistant, Siri, dan Alexa.
Sumber: Google
3. Gesture Based Interface. Ini merupakan format pada UI Design yang
memungkinkan user melakukan gerakan tertentu untuk mengoperasikan perangkat.
Dengan format interface ini, user dapat berinteraksi dengan perangkat tanpa harus
melakukan klik, swipe, maupun scroll pada perangkat. Perangkat yang
menggunakan gesture based juga memungkinkan adanya “gerakan tanpa
sentuhan”, yaitu user dapat melakukan klik maupun swipe tanpa menyentuh layar
pada perangkat. Contoh penerapan teknologi gesture based yaitu Xbox, yang
memanfaatkan kamera dan sensor untuk melacak pergerakan pengguna pada
beberapa game interaktif. Contoh lainnya yaitu dalam bidang kesehatan, UI
berbasis gesture based dapat dimanfaatkan oleh dokter untuk untuk melihat
gambar dan catatan medis tanpa harus keluar dari ruang operasi.
Contoh Gesture Based Interface. Sumber: Novel Interfaces
4. Menu Driven Interface. Ini merupakan format UI Design yang memungkinkan
user untuk berinteraksi dengan perangkat melalui serangkaian menu. Ketika user
menggunakan perangkat elektronik seperti smartphone atau komputer, user akan
dihadapkan pada beberapa pilihan menu. Setelah user mengklik opsi menu tertentu
lalu user akan diarahkan pada layar menu berikutnya hingga user mendapatkan
hasil yang diharapkan. Contoh penggunakan teknologi berbasis menu driven
interface yaitu pada mesin ATM.
Contoh Menu Driven Interface. Sumber: BRI Mobile
Skill UI Designer
Setelah mempelajari pengertian dan format pada UI Design, berikutnya kamu
wajib tahu skill apa aja yang wajib dimiliki oleh UI Designer. Simak beberapa poin
di bawah ini yap!
1. Mampu menggunakan software UI Design. Ada beberapa software yang
perlu kamu kuasai untuk menjadi seorang UI Designer. Dua jenis software
yang dapat kamu pelajari dan kuasai yaitu software design seperti Figma,
Adobe XD, dan Sketch. Berikutnya ada software prototyping yaitu
Protopie, Framer, dan Principle.
2. Mampu memahami teori-teori design, contohnya yaitu color theory,
layouting, typography, dan UI Principles.
a. Color Theory: Pedoman yang digunakan oleh UI Designer dalam
menyampaikan pesan kepada user melalui warna. Dengan color theory, UI
Designer bisa memilih pasangan warna yang enak dipandang dan menyampaikan
pesan dengan baik. Color theory juga dapat membantu designer untuk merancang
tampilan visual sesuai identitas produk yang sedang dibuat.
b. Layouting: Merupakan teknik dalam mengatur tata letak dalam menciptakan
perpaduan antara teks dan gambar menjadi lebih nyaman dipandang. Dengan
layouting yang baik, user akan lebih mudah memahami informasi dan pesan yang
disampaikan pada suatu produk.
c. Typography: Merupakan teknik dalam mengatur huruf dan teks agar lebih
mudah dipahami oleh user. Sebuah perangkat atau produk yang memiliki
typography yang baik akan membuat user merasa nyaman ketika menggunakan
produk tersebut.
d. UI Principles: Terdapat prinsip-prinsip yang perlu diimplementasikan oleh
seorang UI Designer dalam mendesain suatu produk, diantaranya yaitu structure,
simplicity, visibility, feedback, tolerance, dan reuse.
3. Menguasai soft skill seperti mampu berkolaborasi dalam tim, memiliki
kemampuan berkomunikasi dengan tepat dan jelas, serta dapat mempresentasikan
hasil design dengan baik. Soft skill ini penting untuk dimiliki setiap UI Designer
agar design yang kita buat dapat dipahami oleh tim lain, sehingga produk yang kita
buat dapat membantu mengatasi permasalahan user.
Karakteristik UI Design yang Baik
1. Jelas dan Intuitif. User interface yang baik harus memiliki tampilan dengan
makna yang jelas dan mudah dipahami oleh user. Dalam hal ini yaitu
mampu memberi tahu user tentang tindakan yang dilakukannya, perubahan,
hingga keuntungan atau kesalahan yang diperoleh user ketika
mengoperasikan suatu perangkat/produk melalui bahasa yang jelas, ringkas,
dan tidak ambigu.
2. Konsisten. Tampilan yang konsisten akan lebih memudahkan user dalam
berinteraksi pada suatu produk/perangkat. User interface juga sebaiknya
menggunakan elemen yang umum digunakan untuk membuat UI sehingga
user lebih mudah dalam mengoperasikan suatu navigasi. Contohnya yaitu
untuk menutup halaman, kita dapat menggunakan tombol X di pojok kanan
atas.
3. Responsif dan Inklusif. Sebuah perangkat/produk dengan UI yang
responsif akan membuat user semakin nyaman dalam menggunakan produk
tersebut. Selain itu, UI yang inklusif dan ramah digunakan oleh setiap
kalangan juga akan membuat produk yang kita buat akan semakin diminati
oleh lebih banyak user.
Fungsi UI yang Baik
1. Meningkatkan pengalaman user. Ketika seorang UI Designer mampu
mendesain sebuah tampilan yang baik dan mudah dipahami user, hal ini
akan meningkatkan kenyamanan user dalam menggunakan produk yang kita
buat.
2. Menaikkan retention rate. User yang nyaman dalam menggunakan produk
kita akan secara langsung menaikkan retention rate produk tersebut. Dengan
demikian user akan terus menerus bergantung pada produk kita dalam
mengatasi permasalahan yang dihadapinya. Tentu kita akan senang ketika
memiliki banyak user yang setia dalam menggunakan produk kita bukan?
3. Meningkatkan reputasi produk. Di saat kita mampu membuat banyak user
betah dan nyaman dalam menggunakan produk, hal itu dapat meningkat
reputasi brand produk tersebut. Ketika reputasi produk kita semakin baik di
mata user, maka kemungkinan income yang kita peroleh juga akan semakin
meningkat.
Perbedaan UI dan UX Design
Setelah mempelajari berbagai teori tentang UI, mungkin kamu penasaran apa sih
bedanya UI Design dan UX Design? Bukankah dua istilah ini sering digunakan
bersamaan ya?
Pada umumnya UI Design berfokus pada elemen interface yang tampak secara
visual seperti tipografi, ilustrasi, warna, bilah menu, dan lain-lain. Sedangkan UX
Design berfokus pada flow pengalaman user dan experience mereka ketika
menggunakan suatu produk.
Biar kamu lebih paham, simak perbedaan UI dan UX pada penjelasan di bawah ini.
1. Tujuan: Tujuan dari UI adalah untuk membuat tampilan visual yang
menarik dan dapat dipahami user, sedangkan tujuan dari UX adalah untuk
memberikan kenyamanan user saat menggunakan produk.
2. Fokus: UI berfokus pada kesan user terhadap tampilan visual produk,
sedangkan UX berfokus pada kepuasan dan pengalaman user ketika
menggunakan produk.
3. Elemen: Elemen dalam UI yaitu garis, bentuk, warna, tipografi, dan visual
interaksi lainnya. Sedangkan elemen pada UX terdiri dari usability,
interaction design, navigasi, hingga branding.
Learn more via: [Link]