Pengenalan Tahap Dalam UI/UX
Guide for beginners; #TAHAP1
Apa itu UI dan UX? Apa perbedaannya?
Simpelnya..
UI “User Interface” → dapat di artikan sebagai overall look yang meliputi warna, tipografi, layout, design yang berfokus pada tampilan high fidelity sebagai penentu kenyaman pengguna saat menggunakan produk (dalam hal ini aplikasi mobile, website, dll).
Hasil akhir UI : Mockup (Final look), Style guide
UX “User Experince” → berfokus kepada strategi dan pemecahan masalah yang dihadapi pengguna, meliputi kenyamanan, kepuasan atau bahkan perasaan frustasi saat menggunakan produk (dalam hal ini aplikasi mobile, website, dll).
- Onboarding experience (Sign in, Sign up)
- Memahami alur proses (First impression)
- Emotional impact & kepuasan pengguna dalam mengakses produk (dalam hal ini aplikasi mobile, website, dll)
Hasil akhir UX : Wireframe, Sitemap/Userflow, dll
Lalu untuk tahapan awalnya lakukan UI atau UX dulu?
Jawabannya adalah UX, lakukan tahapan User Experince (UX) terlebih dahulu setelahnya masuk ketahapan User Interface (UI).
WORKFLOW UI/UX
1. Read brief (berbasis projek dari klien)
Tahapan ini sering dilakukan oleh freelance diawal, klien sudah memberikan brief tentang gambaran komponen, contoh design, atau hal apa saja yang harus ada dalam produk projek (dalam hal ini aplikasi mobile, website, dll).
2. Case Study
Tahapan ini dilakukan bila klien memberi hak penuh ide kepada designer produk, atau untuk designer yang ingin membuat portfolio tanpa projek, bisa juga untuk designer yang mempunyai ide sendiri untuk membangun startup (terdapat proses user persona).
3. User flow
Gambaran alur yang akan dijalani oleh pengguna (biasanya terdiri dari berbagai tahapan seperti; login, sign up, search, checkout, dll).
Rekomendasi tools yang dapat digunakan; whimsical.com, XMIND
4. Sitemap
Proses dan komponen apa saja yang akan dibuat dalam tiap Screen, misalnya dalam Sing up (register) terdapat komponen; Full name, Email, Password, CTA Button, CTA Link (mengarahkan he halaman Login).
Rekomendasi tools yang dapat digunakan; whimsical.com, XMIND
5. Wireframe
Gambaran dasar design berbentuk low fidelity, pada tahap ini berfokus pada tata letak (layout).
Rekomendasi tools yang dapat digunakan; whimsical.com, balsamiq
6. Mood board
Mengumpulkan style design (riset untuk ide design).
Aplikasi sumber inspirasi; Pinterest, Dribble
7. Style guide
Tahapan ini memberikan gambaran besar saat membuat design, bertujuan untuk mempermudah pekerjaan developer saat membuat produk (dalam hal ini aplikasi mobile, website, dll).
8. Visual design
Masuk ketahapan pembuatan high fidelity untuk hasil lebih menarik dari versi wireframe.
Tools yang biasa digunakan; Sketch, Figma, Adobe XD
9. Prototyping
Menghubungkan koneksi antar screen, dan menjalankan animasi di screen.
Tools yang biasa digunakan; Figma, Adobe XD, InVision, Marvel
10. Usability testing
Melakukan pengetesan keseluruhan pada hasil akhir produk (dalam hal ini aplikasi mobile, website, dll), apakah sesuai dengan alur yang telah dibuat atau tidak (tahapan ini pada umumnya dilakukan oleh UX Designer) *tetapi disarankan bagi UI Designer untuk mempelajari tahapannya juga.
If this article is useful, please click the clap button, and give a feedback for better articles.
