Proses Desain

(Pada Sebuah Interaksi)

Nur’aini, M.Kom

Interaksi Manusia dan Komputer

Prodi Sistem Informasi
Universitas Amikom Yogyakarta
 Bisa di-skip saja?
Fungsi tidak
Ini menghabiskan waktu
berguna, saya saya
bingung &?!%#$&
menggunakannya

Customer
Pain
Kenapa Penting?

⮚ Menangkap permasalahan pengguna

⮚ Menggali yang belum didapatkan oleh
pengguna
⮚ Memberikan apa yang diinginkan dan
dibutuhkan pengguna
⮚ Mengantisipasi kegagalan pengguna
How to Get?
Find the User Experience..!!
 Step in UX
Design

•Analyzing user data

•Creating persona
•Understanding ideation
•Working scenario and storyboards
•Creating paper prototypes
•Implementation planning
 Analyzing User
Data

✔ Temukan di mana “tempat rasa sakit”

✔ Jika diperlukan, dapatkan informasi
kebutuhan pengguna dan dari
stakeholder
✔ Rancang solusi untuk menghilangkan This Photo by Unknown Author is licensed under CC BY-SA

“rasa sakit”
 Creating Persona

Persona
⮚ Merupakan potret dari pengguna
⮚ Ketika muncul pertanyaan, “Siapa yang
akan menggunakan aplikasi ini?”
⮚ Dapat membantu desainer untuk
memotret kebutuhan pengguna
User Persona - Contain
• Name • Customer
Segmentation
• Photo
(optional)
• Quote (optional)
• Key needs/goals
• Basic • Key Pain Point
Demographic • Brand (optional)
• Age
• Tech Profile
• Income level
• Internet connection
• Location
• Job title • Smartphone
• Laptop/PC
• General Description
Source: UX for Dummies
Meliputi:
1. Data Demografi
Mendefinisikan “siapa” yang akan menggunakan
2. Data Psikografi
Mendefinisikan alasan “mengapa” mereka
menggunakan
3. Profil Pengguna
a. Mendapatkan potret pengguna
b. Memahami bagaimana pengguna biasa
menghabiskan waktu
c. Mendapatkan insight dari pengguna
4. Analisis Data
Persona Example
 Ideation

⮚Gali kreativitas
⮚Tampung setiap ide dan masukan
⮚Bisa jadi perlu adanya sebuah
“paksaan”
 Skenario dan
Storyboard
• Skenario
⮚ Memastikan ide yang diusulkan akan
diimplementasikan
⮚ Memberikan gambaran yang jelas

• Storyboard
⮚ Versi visual dari scenario
⮚ Buat perencanaan interaksi antara This Photo by Unknown Author is licensed under CC BY-SA

pengguna dan sistem

 Journey Mapping
Cara terbaik untuk memetakan kerangka perjalanan pengguna

Kolom Kiri Terdiri dari:

1. Action
Tindakan yang dilakukan, misalkan ketika melakukan pencarian online maka akan mendapatkan informasi
di website anda
2. Point contact
Tempat pengguna melakukan interaksi (misal: sosial media, website, atau device yang digunakan)
3. Emotions
a. Tempatkan diri Anda pada posisi pengguna
b. Informasi yang didapatkan membantu proses memetakan pengalaman pengguna
4. Pain Points
Temukan hambatan yang mungkin akan muncul, sehingga dapat diantisipasi lebih awal
5. Opportunities
Menangkap emosi pengguna. Misal jika banyak pengguna memilih untuk berlama-lama pada sebuah
halaman, hal itu mengindikasikan ada sebuah keberhasilan kebergunaan pada fitur/ halaman tertentu
 Paper
Prototype

Membantu pengujian kegunaan

Yang perlu diperhatikan: awal dan menyarankan untuk

Paper prototype tidak hanya membuat gambar,
tetapi juga bagaimana cara kerjanya dari tiap menu/ melakukan perubahan oleh
fungsi
Contoh: https://www.youtube.com/watch?v=y20E3qBmHpg
pengguna
Kapan Menggunakan Paper Prototyping?

⮚ Saat perangkat untuk membuat prototype yang tersedia tidak

mendukung komponen dan ide yang akan diterapkan
⮚ Ketika anggota tim kurang berkompeten menggunakan aplikasi
untuk membuat prototype
⮚ Mockup/ Prototype berbasis aplikasi komputer tidak bisa
menjelaskan dengan detail bagaimana jika sebuah tombol diklik
atau aksi apa terjadi jika sebuah data disimpan, dsb
 Selain Paper Prototype:
1. Skecth

Sketsa, adalah cara tercepat dalam

memvisualisasikan konsep.
Buat sketsa dengan tools apapun
disekitar kita yang mudah ditemukan
seperti : pensil, pulpen, paper App
bahkan Microsoft Paint
 Sketch
Contoh sketsa dengan teknik crazy eight sketch

https://www.youtube.com/watch?v=yz4g87XapQ0
 Selain Paper Prototype: (con’t)
2. Lo-fidelity design (wireframe)

Wireframe adalah blueprint bagi para

UI/UX designer.
Wireframe adalah skema atau
kerangka yang dapat memberikan
gambaran kasar (low-fidelity) setiap
halaman yang terdapat dalam sebuah
website/aplikasi sebelum memasuki
tahapan visual mockup.

Beberapa contoh tool wireframe :

Figma, UXPin, Balsamiq, Axure, and Proto.io
Selain Paper Prototype: (con’t)
3. Hi-fidelity design (Mock-up)

⮚Representasi tingkat menengah-tinggi dari

sebuah rancangan desain
⮚Mengisi detail visual seperti warna,
tipografi, spacing, dll.
⮚Membantu keputusan desain visual
sebelum masuk ke coding

Mockup tools ex : Figma, Invision, draw io,

pencil project, Mockflow
Selain Paper Prototype: (con’t)
4. Prototype

⮚Representasi tingkat tinggi dari sebuah

rancangan yang mencakup fungsionalitas
⮚Pengguna dapat berinteraksi dengan UI
mirip seperti berinteraksi pada sebuah
produk
⮚Memprediksi dan mecahkankan masalah
usability sebelum pengembangan lebih
lanjut
⮚Prototype akan terlihat sangat mirip
dengan mockup, tetapi pada prototype
menambahkan elemen interaksi.
 Implementation
Planning

Planning is about
prioritized, relate,
and build a
foundation.
Terima Kasih