interaksi manusia & komputer - · pdf filecontoh: persona 1 interaksi manusia &...
TRANSCRIPT
INTERAKSI MANUSIA & KOMPUTERSemester Ganjil 2015/2016
LUTFI FANANI
Interaction Design Basic
Interaction DesignInteraksi Manusia & Komputer
Lutfi Fanani
Kita tidak hanya berpikir ttg bagaimana mendesain suatu
sistem interaktif, namun bagaimana interaksi yg terjadi.
Mendesain interaksi bukan hanya ttg artefak/produk,
namun ttg bagaimana penggunaan produk tersebut dapat
mempengaruhi cara kerja/perilaku penggunanya.
INTERA
CTION
DESIGN
WHATI
SDESIG
N?
HCD
PROCE
SS
INTERAC
TIONDES
IGNPRO
CESS
PERSO
NA
SCENA
RIO
Interaction DesignInteraksi Manusia & Komputer
Lutfi Fanani
What is
Design?
INTERA
CTION
DESIGN
WHATI
SDESIG
N?
HCD
PROCE
SS
INTERAC
TIONDES
IGNPRO
CESS
PERSO
NA
SCENA
RIO
Interaction DesignInteraksi Manusia & Komputer
Lutfi Fanani
INTERA
CTION
DESIGN
WHATI
SDESIG
N?
HCD
PROCE
SS
INTERAC
TIONDES
IGNPRO
CESS
PERSO
NA
SCENA
RIO
What is Design?Interaksi Manusia & Komputer
Lutfi Fanani
“achieving goals within constraints”
goal = tujuan constraint = batasan
Goals: What is the purpose of the product? Who is it for?
Why do they want it?
Constraint: What materials must we use? What standards
must we adopt? How much can it cost? How much time do
we have to develop it? Are there health and safety issues?
INTERA
CTION
DESIGN
WHATI
SDESIG
N?
HCD
PROCE
SS
INTERAC
TIONDES
IGNPRO
CESS
PERSO
NA
SCENA
RIO
Golden Rule of DesignInteraksi Manusia & Komputer
Lutfi Fanani
1. Understand computers
limitations, capacities, tools, platforms
2. Understand people
psychological, social aspects, human error
INTERA
CTION
DESIGN
WHATI
SDESIG
N?
HCD
PROCE
SS
INTERAC
TIONDES
IGNPRO
CESS
PERSO
NA
SCENA
RIO
Interaction DesignInteraksi Manusia & Komputer
Lutfi Fanani
human nature = mistake
INTERA
CTION
DESIGN
WHATI
SDESIG
N?
HCD
PROCE
SS
INTERAC
TIONDES
IGNPRO
CESS
PERSO
NA
SCENA
RIO
Interaction DesignInteraksi Manusia & Komputer
Lutfi Fanani
Think
user
INTERA
CTION
DESIGN
WHATI
SDESIG
N?
HCD
PROCE
SS
INTERAC
TIONDES
IGNPRO
CESS
PERSO
NA
SCENA
RIO
Interaction DesignInteraksi Manusia & Komputer
Lutfi Fanani
DCH
HUMANCENTEREDDESIGN
INTERA
CTION
DESIGN
WHATI
SDESIG
N?
HCD
PROCE
SS
INTERAC
TIONDES
IGNPRO
CESS
PERSO
NA
SCENA
RIO
Interaction DesignInteraksi Manusia & Komputer
Lutfi Fanani
INTERA
CTION
DESIGN
WHATI
SDESIG
N?
HCD
PROCE
SS
INTERAC
TIONDES
IGNPRO
CESS
PERSO
NA
SCENA
RIO
DCH Hear Create Deliver
Interaction Design ProcessInteraksi Manusia & Komputer
Lutfi Fanani
INTERA
CTION
DESIGN
WHATI
SDESIG
N?
HCD
PROCE
SS
INTERAC
TIONDES
IGNPRO
CESS
PERSO
NA
SCENA
RIO
Interaction Design ProcessInteraksi Manusia & Komputer
Lutfi Fanani
INTERA
CTION
DESIGN
WHATI
SDESIG
N?
HCD
PROCE
SS
INTERAC
TIONDES
IGNPRO
CESS
PERSO
NA
SCENA
RIO
H HEAR
Identifikasi TantanganInteraksi Manusia & Komputer
Lutfi Fanani
Menciptakan sebuah sistem interaktif yg dapat membantu
pengguna angkutan umum di Kota Malang.INTERA
CTION
DESIGN
WHATI
SDESIG
N?
HCD
PROCE
SS
INTERAC
TIONDES
IGNPRO
CESS
PERSO
NA
SCENA
RIO
Menggali pengetahuanInteraksi Manusia & Komputer
Lutfi Fanani
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
INTERA
CTION
DESIGN
WHATI
SDESIG
N?
HCD
PROCE
SS
INTERAC
TIONDES
IGNPRO
CESS
PERSO
NA
SCENA
RIO
Menggali pengetahuanInteraksi Manusia & Komputer
Lutfi Fanani
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
INTERA
CTION
DESIGN
WHATI
SDESIG
N?
HCD
PROCE
SS
INTERAC
TIONDES
IGNPRO
CESS
PERSO
NA
SCENA
RIO
Menentukan NarasumberInteraksi Manusia & Komputer
Lutfi Fanani
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
INTERA
CTION
DESIGN
WHATI
SDESIG
N?
HCD
PROCE
SS
INTERAC
TIONDES
IGNPRO
CESS
PERSO
NA
SCENA
RIO
Menentukan NarasumberInteraksi Manusia & Komputer
Lutfi Fanani
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
INTERA
CTION
DESIGN
WHATI
SDESIG
N?
HCD
PROCE
SS
INTERAC
TIONDES
IGNPRO
CESS
PERSO
NA
SCENA
RIO
Menentukan Metode RisetInteraksi Manusia & Komputer
Lutfi Fanani
Berbagai metode riset kualitatif:
Individual Interview
Group Interview
In Context Immersion
Self-Documentation
Community-Driven Discovery
Expert Interviews
Seeking Inspiration in New Places
INTERA
CTION
DESIGN
WHATI
SDESIG
N?
HCD
PROCE
SS
INTERAC
TIONDES
IGNPRO
CESS
PERSO
NA
SCENA
RIO
Panduan Wawancara/ ObservasiInteraksi Manusia & Komputer
Lutfi Fanani
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
INTERA
CTION
DESIGN
WHATI
SDESIG
N?
HCD
PROCE
SS
INTERAC
TIONDES
IGNPRO
CESS
PERSO
NA
SCENA
RIO
AnalisisInteraksi Manusia & Komputer
Lutfi Fanani
Analisis:
Persona & Skenario
INTERA
CTION
DESIGN
WHATI
SDESIG
N?
HCD
PROCE
SS
INTERAC
TIONDES
IGNPRO
CESS
PERSO
NA
SCENA
RIO
PersonaInteraksi Manusia & Komputer
Lutfi Fanani
Persona:
sebuah gambaran deskriptif tentang seseorang yg
merepresentasikan
kelompok user.
INTERA
CTION
DESIGN
WHATI
SDESIG
N?
HCD
PROCE
SS
INTERAC
TIONDES
IGNPRO
CESS
PERSO
NA
SCENA
RIO
Why Persona?Interaksi Manusia & Komputer
Lutfi Fanani
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)
INTERA
CTION
DESIGN
WHATI
SDESIG
N?
HCD
PROCE
SS
INTERAC
TIONDES
IGNPRO
CESS
PERSO
NA
SCENA
RIO
Contoh: Persona 1Interaksi Manusia & Komputer
Lutfi Fanani
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 selalu berangkat ke sekolah
lebih pagi.
INTERA
CTION
DESIGN
WHATI
SDESIG
N?
HCD
PROCE
SS
INTERAC
TIONDES
IGNPRO
CESS
PERSO
NA
SCENA
RIO
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.
Contoh: Persona 2Interaksi Manusia & Komputer
Lutfi Fanani
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.
INTERA
CTION
DESIGN
WHATI
SDESIG
N?
HCD
PROCE
SS
INTERAC
TIONDES
IGNPRO
CESS
PERSO
NA
SCENA
RIO
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.
Contoh: Persona 3Interaksi Manusia & Komputer
Lutfi Fanani
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
INTERA
CTION
DESIGN
WHATI
SDESIG
N?
HCD
PROCE
SS
INTERAC
TIONDES
IGNPRO
CESS
PERSO
NA
SCENA
RIO
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 campus-work.
Contoh: Persona 4Interaksi Manusia & Komputer
Lutfi Fanani
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.
INTERA
CTION
DESIGN
WHATI
SDESIG
N?
HCD
PROCE
SS
INTERAC
TIONDES
IGNPRO
CESS
PERSO
NA
SCENA
RIO
Temuan Penting!Interaksi Manusia & Komputer
Lutfi Fanani
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.
INTERA
CTION
DESIGN
WHATI
SDESIG
N?
HCD
PROCE
SS
INTERAC
TIONDES
IGNPRO
CESS
PERSO
NA
SCENA
RIO
Temuan Penting!Interaksi Manusia & Komputer
Lutfi Fanani
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.
INTERA
CTION
DESIGN
WHATI
SDESIG
N?
HCD
PROCE
SS
INTERAC
TIONDES
IGNPRO
CESS
PERSO
NA
SCENA
RIO
Interaction Design ProcessInteraksi Manusia & Komputer
Lutfi Fanani
INTERA
CTION
DESIGN
WHATI
SDESIG
N?
HCD
PROCE
SS
INTERAC
TIONDES
IGNPRO
CESS
PERSO
NA
SCENA
RIO
C CREATE
Identifikasi TantanganInteraksi Manusia & Komputer
Lutfi Fanani
Menciptakan sebuah sistem interaktif yang dapat:
membantu pengguna angkutan umum di Kota Malang
menemukan informasi jalur angkot
merubah perilaku penumpang/sopir angkot agar naik-
turun penumpang di tempat pemberhentian/halte.
INTERA
CTION
DESIGN
WHATI
SDESIG
N?
HCD
PROCE
SS
INTERAC
TIONDES
IGNPRO
CESS
PERSO
NA
SCENA
RIO
Interaksi Manusia & Komputer
Lutfi Fanani
INTERA
CTION
DESIGN
WHATI
SDESIG
N?
HCD
PROCE
SS
INTERAC
TIONDES
IGNPRO
CESS
PERSO
NA
SCENA
RIO
Ideas Generation
SkenarioInteraksi Manusia & Komputer
Lutfi Fanani
Skenario:
Cerita yg merepresentasikan interaksi antara user dgn
sistem.
INTERA
CTION
DESIGN
WHATI
SDESIG
N?
HCD
PROCE
SS
INTERAC
TIONDES
IGNPRO
CESS
PERSO
NA
SCENA
RIO
Why Skenario?Interaksi Manusia & Komputer
Lutfi Fanani
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)
INTERA
CTION
DESIGN
WHATI
SDESIG
N?
HCD
PROCE
SS
INTERAC
TIONDES
IGNPRO
CESS
PERSO
NA
SCENA
RIO
Interaksi Manusia & Komputer
Lutfi Fanani
INTERA
CTION
DESIGN
WHATI
SDESIG
N?
HCD
PROCE
SS
INTERAC
TIONDES
IGNPRO
CESS
PERSO
NA
SCENA
RIO
Ideas Generation
Interaksi Manusia & Komputer
Lutfi Fanani
INTERA
CTION
DESIGN
WHATI
SDESIG
N?
HCD
PROCE
SS
INTERAC
TIONDES
IGNPRO
CESS
PERSO
NA
SCENA
RIO
Halte Interaktif
Interaksi Manusia & Komputer
Lutfi Fanani
INTERA
CTION
DESIGN
WHATI
SDESIG
N?
HCD
PROCE
SS
INTERAC
TIONDES
IGNPRO
CESS
PERSO
NA
SCENA
RIO
Interactive Display
Interaksi Manusia & Komputer
Lutfi Fanani
INTERA
CTION
DESIGN
WHATI
SDESIG
N?
HCD
PROCE
SS
INTERAC
TIONDES
IGNPRO
CESS
PERSO
NA
SCENA
RIO
Mobile App
Contoh: Skenario 1Interaksi Manusia & Komputer
Lutfi Fanani
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.
INTERA
CTION
DESIGN
WHATI
SDESIG
N?
HCD
PROCE
SS
INTERAC
TIONDES
IGNPRO
CESS 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.
PERSO
NA
SCENA
RIO
Contoh: Skenario 2Interaksi Manusia & Komputer
Lutfi Fanani
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.
INTERA
CTION
DESIGN
WHATI
SDESIG
N?
HCD
PROCE
SS
INTERAC
TIONDES
IGNPRO
CESS 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.
PERSO
NA
SCENA
RIO
Tugas 3Interaksi Manusia & Komputer
Lutfi Fanani
Lakukan analisis data:
1. Membuat persona
2. Tuliskan temuan-temuan penting
3. Diskusikan dan tuliskan semua solusi yg mungkin
(ideas generation)
4. Pilihlah satu solusi yg paling tepat
5. Membuat skenario untuk setiap kemungkinan
INTERA
CTION
DESIGN
WHATI
SDESIG
N?
HCD
PROCE
SS
INTERAC
TIONDES
IGNPRO
CESS
PERSO
NA
SCENA
RIO
Tugas 3Interaksi Manusia & Komputer
Lutfi Fanani
Subject dan nama file/ dokumen:
IMK-[Kelas]-[Kelompok]-[Tugas ke-]
Contoh: IMK-A-Kelompok3-T3
Pada body email tulis nama & NIM seluruh anggota
kelompok.
Kirim via email: [email protected]
Deadline: Minggu, 22 November 2015. Pkl 23.59
INTERA
CTION
DESIGN
WHATI
SDESIG
N?
HCD
PROCE
SS
INTERAC
TIONDES
IGNPRO
CESS
PERSO
NA
SCENA
RIO
TERIMA KASIH
Interaksi Manusia & Komputer
Lutfi Fanani
INTERA
CTION
DESIGN
WHATI
SDESIG
N?
HCD
PROCE
SS
INTERAC
TIONDES
IGNPRO
CESS
PERSO
NA
SCENA
RIO