TEKNIK PURWARUPA ANTARMUKA PENGGUNA · Latar belakang narasumber 1. Nama, usia, pekerjaan, kegiatan...

TEKNIK PURWARUPA ANTARMUKA PENGGUNA

FAKULTAS ILMU KOMPUTER - UNIVERSITAS BRAWIJAYA 4/9/2017

HCD

DCH Hear Create Deliver

STUDY CASE – PROBLEM !!!

Menciptakan sebuah sistem interaktif yg dapat membantu pengguna angkutanumum 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 memilikismartphone

Wisatawan backpacker

2. Narasumber rata-rata:

Mahasiswa pendatang yg menggunakan angkot danmemiliki 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 narasumber1. Nama, usia, pekerjaan, kegiatan sehari-hari, hobi.2. Latar belakang ekonomi

Tentang angkot1. Alasan menggunakan atau tidak menggunakan angkot2. Perilaku ketika menggunakan angkot3. Pengetahuan ttg angkot: jalur, tarif, jam operasional, waktu tempuh

Tentang gadget1. Melek teknologi / tidak2. Tipe, jenis dan jumlah gadget yg digunakan3. 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 rumah-sekolah menggunakan angkot.

Untuk mengantisipasi angkot yg jalannya lelet, Nabilah selaluberangkat ke sekolah lebih pagi.

Nabilah sudah mandiri naik angkot sejak SMP (3 tahun) dansering hangout dgn teman-temannya ke berbagai tempat diMalang. Namun pengetahuannya ttg jalur angkot terbatas padatempat-tempat yg pernah dikunjungi.

Nabilah juga rajin menabung, sehingga mampu membelisebuah smartphone low-end yg digunakan untukberkomunikasi dgn teman-temannya dan mengakses sosialmedia.

HEAR- CONTOH PERSONA (1)

Nadine adalah seorang pekerja kantoran dari Jakarta yg memilikihobi traveling dengan gaya backpacker. Nadine biasanyaberpergian sendiri atau dalam kelompok kecil (2-3 org).

Nadine tergabung dalam forum online untuk berbagi informasiseputar traveling.

Pengetahuan Nadine tentang jalan dan rute angkot di Malangsangat minim.

Nadine menggunakan smartphone mid-end yg memiliki kameraresolusi tinggi dan mampu mendukung office-work.

HEAR- CONTOH PERSONA (1)

Persona 3: Maudy adalah seorang mahasiswi Filkom UB dariLumajang. Rumah kosnya berada di Jl. Bendungan Sutami sehinggauntuk transportasi ke kampus menggunakan angkot.

• Maudy baru satu tahun menetap di Malang sehingga pengetahuanttg angkotnya terbatas hanya pada angkot yg melewati kampus UB.

Maudy menggunakan smartphone mid-end yg yg digunakan untukberkomunikasi dgn teman-temannya, mengakses sosial media,memiliki kamera resolusi tinggi dan mampu mendukung campus-work.

HEAR- CONTOH PERSONA (1)

Imah adalah seorang ibu rumah tangga sederhana ygmenggunakan jasa angkot bila berpergian jauh dari rumah. Namununtuk jarak dekat, Imah menggunakan jasa becak langganannya,misal bila menjemput anaknya sekolah.

Imah merupakan warga asli Malang namun pengetahuannya ttgjalur angkot terbatas pada tempat-tempat yg pernah dikunjungi.

Imah masih menggunakan ponsel non-smartphone. Imahberpendapat bahwa penggunaan gadget berdampak buruk untukperkembangan anak.

HEAR- TEMUAN PENTING!

Latar belakang narasumber1. Penumpang angkot sangat beragam latar belakangnya.

Tentang angkot1. Alasan menggunakan angkot karena: tidak bisa naik kend bermotor,

lebih aman

2. User membutuhkan informasi ttg: jalur, tarif, jam operasi, perkiraanwaktu tempuh.

3. Penumpang tidak naik-turun angkot di tempat pemberhentian/haltesehingga menimbulkan kemacetan.

4. Fasilitas halte sangat terbatas dan tidak ada informasi jalur angkot

5. Pemkot Malang berencana untuk memperbaiki sistem angkot danmembangun fasilitas penunjangnya.

HEAR- TEMUAN PENTING!

Tentang gadget

1. Tidak semua orang menggunakan smartphone, namunjumlah penggunanya terus meningkat.

2. Smartphone yg digunakan adalah Android kategorilow-end hingga mid-end

3. Smartphone digunakan untuk komunikasi, sosial mediadan office-work.

CREATE

Menciptakan sebuah sistem interaktif yang dapat:

membantu pengguna angkutan umum di Kota Malangmenemukan informasi jalur angkot

merubah perilaku penumpang/sopir angkot agar naik-turun 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

Cari

Angkot

Berdasarkan

lokasi

Angkot yg

disarankanDetil rute

save to

mobileTarif

save to

mobile

Jam operasi

save to

mobile App

Berdasarkan

jalur

Pilih jalur

angkot

Tarif

Check-in

Halte

Scan

barcodeKonfirmasi

Petunjuk

CREATE- CONTOH SKENARIO Nabilah seorang pelajar SMA di Malang ingin hangout bersama

teman-temannya ke MOG dgn menumpang angkot. BiasanyaNabila tidak pernah nyegat angkot di halte, namun dia tertarikmencoba sebuah sistem baru yaitu: bila selama 10 kali naik-turunangkot di halte, bisa gratis naik angkot gratis 3 kali.

Nabila mendownload aplikasi di smartphone-nya. Kemudianmenuju halte terdekat dari sekolahnya, lalu check-in melaluiaplikasi dan memberhentikan angkot yg akan mengantarnya ketujuan.

Di angkot, Nabila men-scan barcode yg tertempel di dalam angkotdan mendapatkan setengah poin. Nabila kemudian turun, check-indi halte dekat MOG dan mendapatkan setengah poin lagi.

Di akhir minggu, Nabila telah mendapatkan 10 poin dan bisa naikangkot gratis tiga kali dengan menunjukkan fitur “gratis naikangkot” di smartphone-nya.

CREATE- CONTOH SKENARIO

Nadine seorang wisatawan backpacker ingin mencari informasiangkot dari stasiun ke sebuah homestay di Jl. Malabar.

Nadine mendatangi halte interaktif di depan stasiun, kemudianmeng-input lokasi awal, alamat tujuan, memilih moda transportasiangkot kemudian menekan tombol submit.

Pada layar kemudian ditampilkan bahwa angkot yg melewati areatujuan adalah AL dan ADL, Nadine memilih ADL. Selanjutnyamuncul rincian dimana Nadine harus naik dan turun dari angkot.Untuk melengkapi informasi ditampilkan juga tarif, jam operasi danperkiraan waktu tempuh.

Informasi tersebut dipindahkan ke smartphone Nadine melalui QRcode. Nadine kemudian mengikuti petunjuk dan berhasil tiba ditempat 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 STRATEGIESHorizontal Prototypes. Horizontal prototype merupakan low fidelity prototype yang hanya memberikan gambaran umum darisebuah system dari perpektif user untuk mengatasi masalah consistency (fitur aplikasi harus konsistendengan user commands), coverage (gambaran semua fungsi yang disediakan), and redundancy (tidak adafitur 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 dapatberjalan sesuai kebutuhan.

Scenario-based prototypes user interface designers biasanya melakukan task analysis untuk mengidentifikasi task yang harus dilakukanoleh user di dalam system. Sebuah scenario akan memberikan gambaran nyata mengenai bagaimanadesain 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 lalubersama-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 clienttersebut.

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