Web Designer

Programmer

Coder

Jumat, 19 Februari 2021

Element User Experience
Gambar Element User Experience
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.

Illustrasi 5 Elemen UX
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.

skema interaksi
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.

Informasi arsitektur
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)

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.

wireframe design
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.

user interface
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



I have rich experience in web site design & building and customization. Also I am good at html, css, javascript, wordpress, php, jquery, bootstrap. I love to talk with you about our unique approach. Feel free to contact me writing an email with your project idea.

2 komentar:

Contact Me

Address/Street

West Java, Indonesia

Email

atmaja.krisnantara@yahoo.com

Website

dwiatmajakrisnantara.github.io