TEKNIK PURWARUPA ANTARMUKA PENGGUNA

TEKNIK PURWARUPA ANTARMUKA PENGGUNA

FAKULTAS ILMU KOMPUTER - UNIVERSITAS BRAWIJAYA

4/9/2017

HCD
H

Hear

C

Create

D

Deliver

STUDY CASE – PROBLEM !!!

 Menciptakan sebuah sistem interaktif yg dapat membantu pengguna angkutan
umum di Kota Malang.

HEAR- MENGGALI PENGETAHUAN
1. Menuliskan berbagai hal yg telah diketahui, misal:
 Apa yg dibutuhkan/diinginkan user:
• sistem pencarian jalur angkot di Kota Malang


Teknologi apa yg dapat membantu: smartphone



Solusi/ide yg sudah diterapkan di tempat lain:
 Bandung https://angkot.tibandung.com/
 Jakarta http://kiri.travel/



Hipotesis sementara untuk menjawab tantangan:

•

Aplikasi mobile pencarian angkot

2. Menuliskan berbagai hal yg belum diketahui, misal:
 Apa yg dilakukan, dipikirkan, dirasakan user
 Bagaimana reaksi user thd solusi sementara yg ditawarkan
 Apakah kebutuhan user di masa yg akan datang
 Tantangan dalam mengimplementasikan ide

HEAR- MENENTUKAN NARASUMBER
1. Target pengguna utama:
• Masyarakat yg sehari-hari naik angkot
 Pelajar
 Masyarakat yang tidak bisa mengendarai/ memiliki kendaraan bermotor
2. Target pengguna sampingan:
 mahasiswa pendatang
 wisatawan
3. Stakeholder
 Pemerintah

 Organisasi angkutan

HEAR- MENENTUKAN NARASUMBER (CATEGORY)
1. Narasumber positif
 Pelajar SMP/SMA yg sehari-hari menggunakan angkot dan memiliki
smartphone
 Wisatawan backpacker
2. Narasumber rata-rata:
 Mahasiswa
pendatang
yg
menggunakan
angkot
dan
memiliki smartphone
3. Narasumber negatif
 Ibu rumah tangga yg terkadang
• menggunakan angkot dan tidak
• memiliki smartphone

HEAR- MENENTUKAN METODE RISET
 Berbagai metode riset kualitatif:
 Individual Interview
 Group Interview
 In Context Immersion
 Self-Documentation
 Community-Driven Discovery
 Expert Interviews
 Seeking Inspiration in New Places

HEAR- PANDUAN WAWANCARA/ OBSERVASI
 Latar belakang narasumber
1. Nama, usia, pekerjaan, kegiatan sehari-hari, hobi.
2. Latar belakang ekonomi

 Tentang angkot
1. Alasan menggunakan atau tidak menggunakan angkot
2. Perilaku ketika menggunakan angkot
3. Pengetahuan ttg angkot: jalur, tarif, jam operasional, waktu tempuh

 Tentang gadget
1. Melek teknologi / tidak
2. Tipe, jenis dan jumlah gadget yg digunakan
3. Perilaku ketika menggunakan gadget

HEAR- ANALISIS PERSONA
• Persona:
sebuah gambaran deskriptif tentang seseorang yg
merepresentasikan
kelompok user.
Fungsi :
 Membantu kita memahami keberagaman user.
 Memberikan pemahaman tentang end-user kepada seluruh tim
(desainer, developer, marketing, eksekutif)
 Menghilangkan asumsi yang kita miliki terhadap user
(user is not like me)

HEAR- CONTOH PERSONA (1)
 Nabilah adalah pelajar SMA berusia 15 tahun. Rumahnya di
Sawojajar, sekolah di SMAN 1 Malang. Transportasi rumahsekolah menggunakan angkot.

 Untuk mengantisipasi angkot yg jalannya lelet, Nabilah selalu
berangkat ke sekolah lebih pagi.
 Nabilah sudah mandiri naik angkot sejak SMP (3 tahun) dan
sering hangout dgn teman-temannya ke berbagai tempat di
Malang. Namun pengetahuannya ttg jalur angkot terbatas pada
tempat-tempat yg pernah dikunjungi.
 Nabilah juga rajin menabung, sehingga mampu membeli
sebuah smartphone low-end yg digunakan untuk
berkomunikasi dgn teman-temannya dan mengakses sosial
media.

HEAR- CONTOH PERSONA (1)
 Nadine adalah seorang pekerja kantoran dari Jakarta yg memiliki
hobi traveling dengan gaya backpacker. Nadine biasanya
berpergian sendiri atau dalam kelompok kecil (2-3 org).
 Nadine tergabung dalam forum online untuk berbagi informasi
seputar traveling.
 Pengetahuan Nadine tentang jalan dan rute angkot di Malang
sangat minim.
 Nadine menggunakan smartphone mid-end yg memiliki kamera

resolusi tinggi dan mampu mendukung office-work.

HEAR- CONTOH PERSONA (1)
 Persona 3: Maudy adalah seorang mahasiswi Filkom UB dari
Lumajang. Rumah kosnya berada di Jl. Bendungan Sutami sehingga
untuk transportasi ke kampus menggunakan angkot.
• Maudy baru satu tahun menetap di Malang sehingga pengetahuan
ttg angkotnya terbatas hanya pada angkot yg melewati kampus UB.
 Maudy menggunakan smartphone mid-end yg yg digunakan untuk
berkomunikasi dgn teman-temannya, mengakses sosial media,
memiliki kamera resolusi tinggi dan mampu mendukung campuswork.

HEAR- CONTOH PERSONA (1)
 Imah adalah seorang ibu rumah tangga sederhana yg
menggunakan jasa angkot bila berpergian jauh dari rumah. Namun
untuk jarak dekat, Imah menggunakan jasa becak langganannya,
misal bila menjemput anaknya sekolah.
 Imah merupakan warga asli Malang namun pengetahuannya ttg
jalur angkot terbatas pada tempat-tempat yg pernah dikunjungi.
 Imah masih menggunakan ponsel non-smartphone. Imah

berpendapat bahwa penggunaan gadget berdampak buruk untuk
perkembangan anak.

HEAR- TEMUAN PENTING!
 Latar belakang narasumber
1. Penumpang angkot sangat beragam latar belakangnya.

 Tentang angkot
1. Alasan menggunakan angkot karena: tidak bisa naik kend bermotor,
lebih aman
2. User membutuhkan informasi ttg: jalur, tarif, jam operasi, perkiraan
waktu tempuh.
3. Penumpang tidak naik-turun angkot di tempat pemberhentian/halte
sehingga menimbulkan kemacetan.
4. Fasilitas halte sangat terbatas dan tidak ada informasi jalur angkot
5. Pemkot Malang berencana untuk memperbaiki sistem angkot dan
membangun fasilitas penunjangnya.

HEAR- TEMUAN PENTING!
 Tentang gadget

1. Tidak semua orang menggunakan smartphone, namun
jumlah penggunanya terus meningkat.
2. Smartphone yg digunakan adalah Android kategori
low-end hingga mid-end
3. Smartphone digunakan untuk komunikasi, sosial media
dan office-work.

CREATE

 Menciptakan sebuah sistem interaktif yang dapat:
 membantu pengguna angkutan umum di Kota Malang
menemukan informasi jalur angkot
 merubah perilaku penumpang/sopir angkot agar naikturun penumpang di tempat pemberhentian/halte.

CREATE- IDEAS GENERATION
• Skenario:
Cerita yg merepresentasikan interaksi antara user dgn sistem.
• Fungsi :
 Membantu merubah konsep desain menjadi sebuah kerangka desain
 Memvalidasi desain yg akan dirancang

 Memberikan pemahaman ttg end-user kepada seluruh tim (desainer, developer,
marketing, eksekutif)
 Menghilangkan asumsi yg kita miliki thd user
(user is not like me)

CREATE- HALTE INTERAKTIF

CREATE- INTERAKTIF DISPLAY

CREATE- MOBILE APP

CREATE- FLOW CHART
Berdasarkan
lokasi

Angkot yg
disarankan

Cari
Angkot

Detil rute

Tarif

Berdasarkan
jalur

Pilih jalur
angkot

Scan
barcode

Konfirmasi

Check-in
Halte
Petunjuk

Jam operasi

save to
mobile
App
mobile

CREATE- CONTOH SKENARIO
 Nabilah seorang pelajar SMA di Malang ingin hangout bersama
teman-temannya ke MOG dgn menumpang angkot. Biasanya
Nabila tidak pernah nyegat angkot di halte, namun dia tertarik
mencoba sebuah sistem baru yaitu: bila selama 10 kali naik-turun
angkot di halte, bisa gratis naik angkot gratis 3 kali.
 Nabila mendownload aplikasi di smartphone-nya. Kemudian
menuju halte terdekat dari sekolahnya, lalu check-in melalui
aplikasi dan memberhentikan angkot yg akan mengantarnya ke
tujuan.
 Di angkot, Nabila men-scan barcode yg tertempel di dalam angkot
dan mendapatkan setengah poin. Nabila kemudian turun, check-in
di halte dekat MOG dan mendapatkan setengah poin lagi.
 Di akhir minggu, Nabila telah mendapatkan 10 poin dan bisa naik
angkot gratis tiga kali dengan menunjukkan fitur “gratis naik
angkot” di smartphone-nya.

CREATE- CONTOH SKENARIO
 Nadine seorang wisatawan backpacker ingin mencari informasi
angkot dari stasiun ke sebuah homestay di Jl. Malabar.
 Nadine mendatangi halte interaktif di depan stasiun, kemudian
meng-input lokasi awal, alamat tujuan, memilih moda transportasi
angkot kemudian menekan tombol submit.
 Pada layar kemudian ditampilkan bahwa angkot yg melewati area
tujuan adalah AL dan ADL, Nadine memilih ADL. Selanjutnya
muncul rincian dimana Nadine harus naik dan turun dari angkot.
Untuk melengkapi informasi ditampilkan juga tarif, jam operasi dan
perkiraan waktu tempuh.
 Informasi tersebut dipindahkan ke smartphone Nadine melalui QR
code. Nadine kemudian mengikuti petunjuk dan berhasil tiba di
tempat tujuan.

DELIVER-PROTOTYPE
•

•
•
•

DELIVER-PROTOTYPE

DELIVER-PROTOTYPE TYPE

(Houde and Hill)

DELIVER-PROTOTYPE

DELIVER-PROTOTYPE




Low Fidelity: berupa setengah konsep dari sistem utama, fungsi terbatas, interaksi terbatas.
High Fidelity: representasi ber teknologi tinggi dari konsep desain, sepenuhnya interaktif.

DELIVER-PROTOTYPING STRATEGIES

DELIVER-PROTOTYPING STRATEGIES
Horizontal Prototypes.
Horizontal prototype merupakan low fidelity prototype yang hanya memberikan gambaran umum dari
sebuah system dari perpektif user untuk mengatasi masalah consistency (fitur aplikasi harus konsisten
dengan user commands), coverage (gambaran semua fungsi yang disediakan), and redundancy (tidak ada
fitur berbeda yang berjalan dengan sebuah user command yang sama).
Vertical Prototypes.
Kebalikan dari Horizontal , Sebuah prototype interface yang diimplementasikan secara mendetail.
Tujuannya adalah memastikan sebuah interface dapat direalisaikan mulai dari rancangan hingga dapat
berjalan sesuai kebutuhan.
Scenario-based prototypes
user interface designers biasanya melakukan task analysis untuk mengidentifikasi task yang harus dilakukan
oleh user di dalam system. Sebuah scenario akan memberikan gambaran nyata mengenai bagaimana
desain yang dibuat dapat berjalan pada lingkungan pengguna secara nyata.

DELIVER-PROTOTYPE TOOLS
•
•
•
•

•
•
•
•

DELIVER-PARTICIPATORY DESIGN

PARTICIPATORY
DESIGN

DELIVER-PARTICIPATORY DESIGN




Teknik Design yang melibatkan semua calon users baik customers, karyawan, partner, client, dll dsb
Tujuan participatory design:
 Digunakan untuk menciptakan suatu interface / system yang lebih nyaman bagi user.
 User, baik calon user/ exisiting user dilibatkan dalam proses design, menemukan masalah lalu
bersama-sama mencari solusinya.

DELIVER-PARTICIPATORY DESIGN



Kelebihan participatory design:
 Informasi yang didapatkan untuk proses design lebih akurat.
 Kesempatan yang lebih banyak bagi user untuk menyampaikan ide.
 Implementasi akan suatu interface/ system akan cenderung berhasiil karena keterlibatan client
tersebut.
 Client / user cenderung lebih bisa menerima hasil akhir dari design yang kita buat.

DELIVER-PARTICIPATORY DESIGN



Kekurangan participatory design:
 Cost / biaya yang lebih mahal
 Proses design yang lebih panjang dan lama
 Menimbulkan rasa penolakan / ketidaksukaan dari pihak yang tidak dilibatkan dalam proses design
 Memaksa Designer untuk mengikuti ide dari partisipan yang tidak kompeten
 Memperuncing konflik personal antara tim design dan users

TERIMA KASIH