5 Elemen User Experience

Tidak sedikit orang yang mengangap lingkup kerja seorang UX designer hanyalah membuat wireframe dan user flow. Apakah anggapan itu salah?

Gambar 1. Ruang lingkup UX

Tidak salah, namun kurang tepat. Wireframe dan user flow hanya sebagian kecil dari lingkup yang seharusnya seorang UX designer lakukan. Pahami bahwa UX melingkupi hampir setiap aspek dari pengembangan sebuah produk baik dari segi bisnis maupun produknya itu sendiri (Gambar 1).

Gambar 2. Illustrasi 5 elemen UX

Ilustrasi iceberg di atas (Gambar 2) mengambarkan bahwa yang sering user lihat adalah sebagian kecil dari proses UX (elemen ke-5 surface). User mungkin tidak tahu proses sebelum tampilan itu bisa sampai pada tangan mereka.

Mari pahami UX berperan sebagai dasar pengembangan suatu produk/layanan dengan mempelajari elemen apa saja yang terdapat dalam UX.

Gambar 3. Lima elemen UX

Menurut Jesse James Garrett dalam bukunya UX terbagi menjadi 5 Elemen. Strategy — Scope — Stucture — Skeleton — Surface.

Pertanyaan dasar 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 ini terbagi menjadi dua bagian yaitu Product Objectives dan User Needs. Stategi ini bukan hanya tentang bagaimana user menggunakan produk tapi juga bagaimana produk yang dibuat sesuai dengan kebutuhan user. Apa yang kita inginkan sesuai dengan yang user butuhkan.

Product Objectives
Penentuan tujuan bisnis perlu pemahaman yang matang, diindentifikasi dan dijelaskan secara rinci solusi dari masalah user yang ingin diselesaikan. Brand identity perlu dibangun untuk memberikan kesan positif pada user atas merek yang kita buat. Selanjutnya yang perlu dipersiapkan adalah tolak ukur keberhasilan ketika produk sudah berhasil dibuat.

User Need
Agar lebih mudah dalam mengetahui kebutuhan user hal yang perlu dilakukan adalah Segmentasi, misal segmentasi demografis seperti jenis kelamin, umur, tingkat pendidikan, status pernikahan, pendapatan dan lain sebagainya. Hal ini dapat mempermudah dalam memahami kebutuhan user.

Pahami kebutuhan pengguna dengan melakukan Research/penelitian tujuannya mengumpulkan informasi yang berhubungan dengan produk yang ingin dikembangkan. Metode yang dapat dilakukan adalah survey, wawancara ataupun membuat focus group untuk memperoleh data yang umum seperti sikap dan persepsi pengguna. Untuk memperoleh data yang lebih spesifik ataupun yang berhubungan dengan kebiasaan user, kita dapat melakukan user test atau field studies.

Banyak metode penelitian yang dapat dilakukan, tentunya pemilihan metode perlu disesuaikan dengan data apa yang ingin kita dapatkan. Metode penelitan sesuai dengan kebutuhan informasi yang ingin diketahui dapat dilihat pada gambar 4 berikut:

Gambar 4. User research method

Pembahasan lebih lengkap mengenai metode research ini dapat dilihat disini.

Langkah berikutnya pada layer ini adalah buat persona untuk menetukan target user yang lebih spesifik. Persona merupakan karakter fiksi yang direpresntasikan dari segmentasi pengguna. Persona dapat membantu dalam mengingat target pengguna selama proses perancangan produk. Jika belum memahami bagaimana membuat persona yang sesuai, dapat dipelajari lebih lengkap mengenai pembuatan persona disini.

Secara umum pada layar ini yang 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 dimuat.

Functional Spesifications
Dalam setiap pengembangan produk tentunya perlu ada dokumen yang berisikan spesifikasi fungsi, fitur apa 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 akan mengarahkan pengguna ke halaman baterai ketika pengguna mencoba membeli senter tanpa baterai.

Be spesific. Menjelaskan setiap spesifikasi fungsi 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 teks/kalimat, gambar, video, dll. Konten yang tampilkan dapat disesuaikan dengan produk yang akan kita buat.

Potongan dokumen pada Gambar 5 merupakan dokumen hasil pada layer scope. Untuk contoh lengkap dapat akses disini.

Gambar 5. Contoh dokumen hasil dari layer scope

Pada layer ini mempelajari bagaimana kita memahami perilaku dan pemikiran pengguna tujuannya adalah pemahaman dalam penentuan struktur produk agar pengalaman pengguna sesuai dengan produk yang ingin dikembangkan.

Interaction Design
merupakan interaksi dua arah antara pengguna dengan produk. Bagaimana respon produk/layanan ketika user melakukan suatu tindakan tertentu. Contoh sederhana 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.

Buat conceptual model yang merupakan representasi visual yang dapat membantu kita memahami perbedaan berbagai jenis informasi yang perlu ditampilkan dalam produk/layanan yang akan kita buat. Conceptual dapat mengilustasikan kebutuhan, prioritas, dan memberikan kejelasan. Untuk apa kita membuat conceptual model? Agar Stekholder, pengguna ataupun kita sendiri dapat memahami bagaimana produk/layanan berprilaku sebenarnya. Sebagai contoh conceptual model flickr pada gambar 6 dibawah ini.

Gambar 6. Flickr Conceptual Model

Information architecture
berkaitan dengan bagaimana user memproses informasi yang terdapat dalam produk/layanan kita. Pengelompokan informasi berdasarkan kategori membantu kita dalam leveling of information. Contoh sederhana pada gambar 7.

Gambar 7. Contoh sederhana information architecture.

Layer ini kita perlu memikirkan Interface design meliputi komponen-komponen interface design seperti button, list, toggle, dll. Navigation design meliputi seberapa mudah user menggunakan produk/layanan yang kita buat dalam mencapai tujuannya. Information design meliputi seberapa efektif informasi disampaikan kepada user.

Interface design
sebaiknya disesuaikan dengan taget 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. Consistency menjadi poin yang perlu diperhatikan ketika kita merancang suatu interface agar user familiar (intuitif/mudah dipahami) dengan desain yang diciptakan. Kita dapat mengikuti guideline yang ada seperti material design atau pun iOs human interface guidelines 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
adalah tentang bagaimana pengguna dapat berpindah dari satu halaman ke halaman lainnya dengan mudah.

Information design
adalah bagaimana mengelola informasi yang kita miliki untuk ditampilkan secara baik agar user dapat memahami informasi dengan lebih mudah. Informasi dapat diubah menjadi bentuk visual seperti pie chart, grafik, dll. Pengelompokan informasi (misal: kategori produk yang ada di Tokopedia) dapat mempermudah user menemukan informasi yang sedang dicari.

Setelah interaction design, information architercture dan navigation design sudah jelas, langkah selanjutnya adalah membuat wireframe (gambar 8) sesuai dengan ketiga aspek Skeleton tersebut.

Gambar 8. Contoh wireframe

Layer ini berkaitan dengan perancangan sensory design. Sensory design meliputi panca indra manusia. Bagaimana user melihat, mendengar, menyentuh, mencium, merasakan. Biasanya pada layer ini UX Designer berkoordinasi dengan UI Designer dan menjadi tanggung jawab bersama untuk memastikan hasil visualisasi desain sesuai dengan yang dinginkan. Untuk sebagian perusahaan seperti Tokopedia misalnya sudah memiliki ahli dibidang UI Designer sehingga sudah ada orang yang bertanggung jawab dalam hal user interface. Lain halnya jika kita berperan sebagai UX/UI Designer, itu berarti kita harus berperan penting pada layer ini. Contoh user interface pada gambar 9.

Gambar 9. Contoh hasil perancangan pada layer surface — User interface.

Adapun yang perlu diperhatikan pada layer ini adalah:

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 rapi dan nyaman untuk user lihat, contohnya The 8-point grid system.

Consistency. Color Palletes, Typography, Style Guide tidak kalah penting untuk kita pikirkan dalam layer ini.

Terdapat 5 elemen UX secara garis besar yang dapat kita pahami sebagai dasar menjadi seorang UX Designer yang profesional.

Thanks!

Semoga artikel ini bermanfaat, jika anda merasa artikel ini bermanfaat jangan lupa bagikan ke teman anda 🙂

Reference: The Elements of User Experience — Jasse James Garrett