Bab 4. UX Design vs UI Design
Apa Perbedaan (Atau Kesamaan) UX Design dan UI Design. Bagian 2— Dasar-Dasar UX Design dari Kitab UX Design.
“Membuat interface (produk) itu seperti membangun rumah: Jika Anda tidak membuat fondasi/dasar yang tepat, dekorasi sebagus apapun tidak bisa memperbaiki bangunan yang sudah dibuat.”
— Jef Raskin, ahli human-computer-interaction yang memulai project Macintosh di Apple tahun 1970-an
Kenapa Perlu Bisa Membedakan UX Design dan UI Design?
Mengerti perbedaan antara UX Design dan UI Design, bukan sekedar untuk teori, tapi akan berpengaruh pada proses design. Beberapa orang (kalau bukan kebanyakan) menganggap design itu hanya terkait warna, pemilihan font, gambar/foto, dan icon. Padahal UX Design itu jauh melebihi warna dsb. Favorit saya dalam menjelaskan apa elemen yang membangun UX Design, itu dari Jesse James Garret, dengan model “Elements of User Experience” nya.
Elements of User Experience dari Jesse James Garret
Meskipun dia menulis spesifik untuk web, tapi prinsipnya bisa diterapkan di design secara umum, malah kalau nanti kita bicara Design Sprint di Bagian 3, elemen dari User Experience yang Garret jelaskan, sejalan dengan tahapan dari Design Sprint. Berikut snapshot dari Elements of User Experience.
Lapisan 1. Fondasi. Kebutuhan Pengguna dan Tujuan Bisnis.
User Experience dibangun dari bawah ke atas. Sama halnya dengan membangun gedung, yang dibawah adalah fondasinya. Sebagus apapun hiasan (dalam hal ini warna, font, gambar/foto, icon), jika fondasinya tidak kuat, maka UX nya bisa roboh. Fondasi di UX, adalah Strategi — Kebutuhan Pengguna dan Tujuan Bisnis (User Needs dan Business Goals). Untuk mengerti pengguna dan bisnis, Anda wajib bicara dan ketemu langsung dengan pengguna dan tim bisnis (termasuk product manager, management, bahkan bisa jadi sampai CEO). Untuk detail nya, apa yang perlu dicari tahu dari pengguna dan tim bisnis, nanti kita bahas di Design Sprint ya, Bagian 3.
Lapisan 2. Cakupan. Features dan Content.
Setelah mengerti tentang pengguna dan bisnis, baru lanjut ke lapisan selanjutnya, yaitu bicara tentang Scope/Cakupan. Apa features dan content yang bisa memuaskan kebutuhan pengguna dan memenuhi target bisnis? Dalam menentukan Scope ini, belum dibahas implementasi detail nya, tapi lebih ke deskripsi saja. Untuk memetakan features/content ini, saya sering menggunakan Kano Model. Di Kano Model, paling tidak ada 3 klasifikasi utama dari features/content:
- Must-be/Expected/Wajib: Ini features/content yang jadi syarat untuk Anda bisa masuk ke pasar/kompetisi.
- Desired/Performance: Dengan features/content ini, Anda bisa tetap kompetitif/stay in the market.
- Delighters/Excitement: Dengan ini, Anda menonjol di banding kompetitor, world class.
Kemampuan memprioritaskan features/content penting, karena Anda bisa memiliki 1001 features, tapi yang jadi pertanyaan adalah seberapa penting features itu pada tahap sekarang (untuk pengguna dan bisnis), dan seberapa cepat Anda bisa meluncurkan features tersebut. Dengan kecepatan meluncurkan produk, Anda bisa segera belajar bagaimana pasar/pengguna merespon produk Anda, mendapat feedback dari pengguna, dan membuat sesuatu yang lebih baik dengan cepat. Hal ini juga berpengaruh ke moral/semangat dari tim. Produk yang butuh terlalu lama untuk diluncurkan (6–12 bulan, apalagi sampai 24 bulan), mengambil terlalu banyak waktu, tenaga, dan semangat.
Lapisan 3. Struktur. Information Architecture dan Interaction Design.
Di lapisan ke-3 ini, mulai dibuat user flow dan struktur informasi. Bagaimana pengguna berinteraksi dengan produk Anda, dan informasi/data apa saya yang dibutuhkan, termasuk struktur datanya. Di tahap ini, belum bicara/diskusi tentang wireframes (detail dari screen/webpage). Ini contoh dari user flow:
Contoh dari Information Architecture:
Lapisan 4. Rangka/Skeleton. Wireframes.
Di lapisan ke-4, ini yang biasanya kita sebut wireframes. Disini UI Design dimulai. Di wireframes, semua hal yang tadinya abstrak (dari mulai user needs, business goals, features/content, sampai user flow/information architecture), dibuat nyata/tangible. Di tahap ini, mulai dipikirkan navigasi, layout, pemilihan komponen (misalnya radio box, dropdown, button, dll), dan bagaimana informasi ditampilkan. Semuanya ini tetap sejalan dengan lapisan 1-Strategi: kebutuhan pengguna dan tujuan bisnis. Untuk setiap penambahan screen, pemilihan komponen, penambahan langkah, Anda mesti selalu bertanya, bagaimana penambahan/pemilihan tersebut bisa membantu pengguna memenuhi kebutuhannya, atau membantu bisnis mencapai tujuannya.
Lapisan ke-5. Permukaan/Surface. Visual Design.
Di tahap paling atas ini, barulah kita ‘mempercantik’ wireframes/skeleton di lapisan ke-4. Yang termasuk di tahap permukaan, biasanya:
- Warna
- Icon
- Gambar/Foto
- Font/Typography
- Copy Writing Style
Design is not just what it looks like and feels like. Design is how it works.
— Steve Jobs
Dengan mengerti elemen yang membangun User Experience, idealnya Anda akan memiliki pendekatan yang berbeda saat mendesign produk. Ketimbang langsung lompat membuat wireframes, atau malah langsung membuat design lengkap dengan warna, icon, dan gambar, Anda akan mulai dari fondasi: mencari tahu apa kebutuhan pengguna (termasuk pain points/kesulitan, unmet needs-kebutuhan yang belum ada penyedia layanannya) dan memastikan Anda memahami apa tujuan bisnis (hal yang membuat bisnis bisa sukses). Membuat design (wireframes/visual design) relatif mudah, yang jauh lebih sulit adalah mencari tahu masalah yang penting untuk dipecahkan. Ada 1001 masalah, tapi hanya beberapa yang penting dan impactful untuk dipecahkan. Di bab selanjutnya kita akan latihan membedah UX dari sebuah app, menggunakan model dari Elements of User Experience.
Daftar Isi | Bagian 2| Next: Bab 5. Membedah UX Design dari Sebuah App
