Banyak yang beranggapan lingkup dunia kerja seorang UX designer hanyalah
membuat wireframe dan user flow. Apakah yang beranggapan seperti itu salah ?
Tidak bisa juga disalahkan, tapi lebih kurang tepat. Wireframe dan user flow
hanyalah sebagian kecil dari lingkup yang mana seharusnya seorang UX Designer
lakukan. Pahami bahwa UX melingkupi hampir setiap aspek dari perkembangan
sebuah produk baik dari segi bisnis maupun produknya itu sendiri.
Gambar. Illustrasi 5 Elemen UX
Ilustrasi iceberg tersebut menggambarkan bahwa yang selalu user lihat ialah
sebagian kecil dari proses UX (Elemen ke-5 surface). User mungkin tidak
mengetahui proses sebelum tampilan itu bisa sampai kepada tangan mereka.
Untuk lebih lanjutnya, mari kita pahami UX berperan sebagai dasar pengembangan
suatu produk/layanan dengan mempelajari elemen apa saja yang terdapat dalam
UX.
Menurut Jesse James Garrett dalam bukunya
UX terbagi menjadi 5 Elemen. Yaitu terdiri dari STRATEGY, SCOPE, STRUCTURE, SKELETON dan SURFACE.
1. STRATEGY
Pertanyaan yang mendasari dari penentuan strategy adalah :
What do we want to get out of this product ?
What do our users want to get out of it ?
Pada layer tersebut terbagi menjadi dua bagian yaitu terdiri dari Product Objective
dan User Needs.Strategi ini bukan sekedar tentang bagaimana user
menggunakan produk tapi juga bagaimana produk yang dibuat sesuai dengan
kebutuhan pengguna/user. Aapa yang kita inginkan sesuai dengan yang user
butuhkan.
PRODUCT OBJECTIVE
Penentuan tujuan bisnis juga perlu pemahaman yang matang, diindentifikasi dan
dijelaskan secara rinci solusi dari masalah user yang ingin diselesaikan.
Brand identity perlu dibangung untuk memberikan kesan positif pada user atas
merek yang telah kita buat. Selanjutnya yang perlu dipersiapkan adalah tolak
ukur keberhasilan ketika produk sudah berhasil dibuat.
USER NEED
Agar lebih mudah dalam memahami dan mengetahui kebutuhan user hal yang perlu
dilakukan adalah Segmentasi, misal segmentasi demografis seperti jenis
kelamin, umur, tingkat pendidikan, status pernikahan, pendapatan dan masih
banyak lagi sebagainya. Hal ini dapat mempermudah dalam memahami kebutuhan
user.
Pahami kebutuhan pengguna dengan melakukan research/penelitian
tujuannya guna mengumpulkan suatu informasi yang berhubungan dengan produk
yang ingin dikembangkan. Metode yang bisa dapat dilakukan adalah survey,
wawancara, ataupun dengan cara membuat focus group
untuk memperoleh data yang umum seperti sikap dan persepsi
pengguna. Untuk memperoleh data yang lebih spesifik ataupun yang
berhubungan dengan user, kita dapat melakukan user test atau field studies.
Banyak metode penelitian yang dapat dilakukan, tentunya pemilihan metode perlu
juga disesuaikan dengan data apa yang ingin kita dapatkan. Metode penelitian
sesuai dengan kebutuhan informasi yang ingin diketahui.
Pembahasan lebih lengkap mengenai metode research ini dapat dilihat disini.
Langkah berikutnya pada layer ini adalah membuat persona untuk
menentukan target user yang lebih spesifik. Persona merupakan karakter fiksi
yang direpresentasikan dari segmentasi pengguna. Persona dapat membantu dalam
mengingat target pengguna selama proses perancangan produk. Jika belum dapat
memahami bagaimana membuat persona yang sesuai, dapat dipelajari lebih lengkapnya mengenai pembuatan persona disini.
Lebih ringkasnya pada tahap awal bagaimana ingin membangun produk dengan UX
yang baik. Pada layer strategy ditentukan terlebih dahulu tujuan dari produk
itu untuk apa dan memahami apa yang menjadi kebutuhan pengguna. Pertanyaan
dasar yang muncul yaitu "Ingin buat apa ?", "Tujuan apa yang dicari ? Apa
parameternya ?", "Siapa yang menggunakan ?", "Adakah data pendukung ?", dan
masih banyak lagi sebagainya. Sehingga dapat dipahami pada layer strategy ini
meliputi:
1. Tujuan Bisnis (Business Goal)
2. Identitas Brand (Brand Identity)
3. Parameter Kesuksesan (Success Metric)
4. Segmentasi Pengguna (User Segmentation)
5. Kebergunaan Dan Riset Pengguna (Usability & User Reasearch)
6. Model Pengguna/Persona (Creating Persona)
2. SCOPE
Secara umum pada bagian ini yang harus dan perlu dipahami adalah apa yang akan
kita buat dan apa yang tidak akan dibuat. Dengan begini kita dapat mengetahui
sejauh mana lingkup dari produk yang akan dibuat.
Sifat produk pada dasarnya terbagi menjadi dua, antara produk sebagai
fungsionalitas dengan produk sebagai informasi. Produk sebagai fungsionalitas
fokus dalam mempertimbangkan set fitur yang akan dibuat, sedangkan produk
sebagai informasi kita fokus dalam menentukan konten apa saja yang akan dibuat
didalam produk.
FUNCTIONAL SPESIFICATIONS
Dalam setiap pengembangan produk tentunya perlu ada dokumen yang berisikan
spesifikasi fungsi, fitur apa saja yang akan ada pada produk kita. Hal yang
perlu diperhatikan pada pembuatan dokumen ini adalah:
Be positive. Menggunakan kalimat yang positif, misalnya:
(Negatif) Sistem tidak mengijinkan user membeli senter tanpa baterai
Kalimat ini akan lebih baik jika:
(Positif) Sistem mengarahkan pengguna ke halaman baterai ketika pengguna mencoba membeli senter tanpa baterai.
Be spesific. Menjelaskan setiap spesifikasi secara jelas dan spesifik,
misalnya
(Tidak spesifik) Produk yang paling banyak diminati pembeli akan diberi tanda.
Sebaiknya:
(Spesifik) Produk dengan jumlah transaksi terbanyak akan tampil di urutan teratas halaman hotlist.
CONTENT REQUIREMENT
Informasi apa yang akan ditampilkan perlu dideskripsikan dan dipersiapkan
secara matang pada bagian ini. Informasi seperti gambar, video, teks/kalimat,
maps, dan lain sebagainya. Konten yang ditampilkan dapat disesuaikan dengan
produk yang akan kita buat.
Potongan hasil pada layer scope. Untuk contoh lengkapnya dapat akses disini.
Secara jelasnya pembahasan di atas dari tujuan produk dan kebutuhan pengguna
menjadi persyaratan spesifik untuk apa konten dan fungsionalitas produk yang
ditawarkan ke pengguna. Lapisan tersebut meliputi :
1. Fungsionalitas dan konten
2. Menentukan persyaratan
3. Spesifikasi fungsional
4. Persyaratan konten
5. Memprioritaskan persyaratan
3. STRUCTURE
Pada layer ini kita akan mempelajari bagaimana memahami prilaku dan
pemikiran pengguna tujuannya adalah pemahaman dalam penentuan struktur
produk agar pengalaman pengguna sesuai dengan produk yang ingin dikembangkan.
INTERACTION DESIGN
Merupakan interaksi yang terjadi secara dua arah antara si pengguna dengan
suatu produk. Bagaimana respon produk/layanan ketika user melakukan suatu
tindakan tertentu. Contoh sederhananya ketika user klik icon love maka icon
tersebut berubah menjadi merah, contoh lain ketika user klik gambar produk
maka sistem akan merespon dengan mengarahkan user pada halaman detail produk
tersebut.
Buat conceptual model yang merupakan representasi dari perwujudan visual yang
dapat membantu kita memahami perbedaan berbagai jenis informasi yang perlu
ditampilkan dalam produk/layanan yang akan kita buat. Conceptual dapat
menggambarkan kebutuhan, prioritas, dan memberikan kejelasan. Untuk apa kita
membuat conceptual model? Agar Stekholder, pengguna ataupun kita sendiri dapat
memahami bagaimana produk/layanan berprilaku selayaknya.
Gambar. Interaction Design
INFORMATION ARCHITECTURE
Berkaitan dengan bagaimana user memperoleh informasi yang terdapat dalam suatu
produk/layanan kita. Pengelompokan informasi dapat berdasarkan kategori
membantu kita dalam suatu leveling of information.
Gambar. Information Architecture
Dengan kata lain akan didapatkan gambaran jelas mengenai apa yang terdapat
pada produk akhir. Untuk itulah pada layer ini dilakukan pengembangan struktur
secara konseptual yang berdasarkan dua poin di atas :
1. Desain Interaksi (Interaction Design)
2. Arsitektur Informasi (Information Architecture)
2. Arsitektur Informasi (Information Architecture)
4. SKELETON
Untuk bagian ini kita perlu memikirkan Interface design yang
khususnya meliputi komponen-komponen interface design seperti button, list,
toogle, dll. Navigation design meliputi seberapa mudah user
menggunakan produk/layanan yang telah kita buat dalam mencapai tujuan.
Informasi design meliputi seberapa efektif informasi yang akan disampaikan
kepada setiap user.
INTERFACE DESIGN
Seharusnya disesuaikan dengan target dan kebiasaan user dalam menggunakan
aplikasi (mental model pengguna). Misal cara baca orang asia dan timur tengah,
contoh lain penggunaan warna merah, kuning, hijau, dll. Consistecy menjadi
poin yang perlu diperhatikan ketika kita merancang sebuah interface agar user
familiar (intuitif/mudah dipahami) dengan desain yang dirancang. Kita dapat
juga mengikuti guidelines yang ada seperti
material design
atau pun
iOs human interface giudelines
untuk merancang interface, Ataupun kita dapat membuat guidelines desain
sendiri jika memungkinkan. Salah satu poin keberhasilan suatu desain interface
adalah
seberapa intuitif interface yang kita buat.
NAVIGATION DESIGN
Tentang bagaimana penggunaan dapat berpindah dari satu halaman ke halaman
lainnya dengan mudah.
INFORMATION DESIGN
Bagaimana mengelola informasi yang kita miliki untuk ditampilkan secara baik
agar user dapat memahami informasi dengan lebih gampang. Informasi dapat
diubah menjadi bentuk visual seperti pie chart, grafik, dll. Pengelompokan
informasi (misal: kategori produk yang ada di Alikasi Tokopedia) dapat
mempermudah user menemukan informasi yang sedang dicari.
Setelah interaction design, informasi architecture dan navigation design sudah
jelas, langkah selanjutnya adalah membuat wireframe, sesuai dengan
ketiga aspek Skeleton tersebut.
Gambar. Contoh Wireframe
Dengan kata lain pada sesi Skeleton ini bisa di singkat dengan beberapa
poin utama, yaitu :
1. Desain Antarmuka
2. Desain Navigasi
3. Desain Informasi
4. Kerangka (Wireframe)
5. SURFACE
Pada layer kali ini berkaitan dengan suatu kegiatan perancangan
sensory design. Sensory design meliputi panca indra manusia.
Bagaimana user melihat, mendengar, menyentuh, mencium, merasakan.
Biasanya pada sesi layer ini UX Design berkoordinasi dengan UI Designer
dan menjadikan sebuah tanggung jawab bersama untuk memastikan hasil
visualisasi desain sesuai dengan yang diinginkan. Untuk sebagian
perusahaan seperti
Tokopedia
misalnya sudah mempunyai ahli dibidang UI Designer sehingga sudah ada
orang yang bertanggung jawab atas semua hal user interface. Lain dengan
halnya jika kita berperan sebagai UI/UX Designer, itu berarti kita harus
berperan sangat penting pada sesi layer ini.
Gambar. Contoh user interface
Ada juga yang harus diperhatikan pada layer ini yaitu antara lainnya :
Follow the Eye -- Ketahui bagaimana alur user membaca suatu
halaman seperti Z pattern F pattern.
Contrast -- Dapat membantu mengkomunikasikan kepada user
informasi utama dan membuat perhatian lebih pada daerah tertentu.
Grid -- Agar layout interface yang kita buat terlihat rapih dan
nyaman untuk dilihat user, contohnya The 8-point grid system.
Consistency, Color Palettes, Typography,
Style Guide tidak kalah penting juga untuk kita pikirkan pada
layer ini.
Untuk lapisan-lapisan diatas bisa diuraikan meliputi:
1. Kontras dan keseragaman
2. Konsistensi internal dan eksternal
3. Palet warna (color palette) dan tipografi
4. Mockup desain dan style guide
