INTERAKSI MANUSIA & KOMPUTER Semester Genap 2016/2017
lutfi.class@gmail.com LUTFI FANANI
Interaction Design
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 SCENARIO
Interaction Design
What is
Design
?
INTERA CTION DESIGN WHATI SDESIG N? HCD PROCE SS INTERAC TIONDES IGNPRO CESS PERSO NA SCENARIOInteraction Design
INTERA CTION DESIGN WHATI SDESIG N? HCD PROCE SS INTERAC TIONDES IGNPRO CESS PERSO NA SCENARIOWhat is Design?
“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 SCENARIO
Golden Rule of Design
1. Understand computerslimitations, 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 SCENARIO
Interaction Design
human nature =
mistake
INTERA CTION DESIGN WHATI SDESIG N? HCD PROCE SS INTERAC TIONDES IGNPRO CESS PERSO NA SCENARIO
Interaction Design
Think
user
INTERA CTION DESIGN WHATI SDESIG N? HCD PROCE SS INTERAC TIONDES IGNPRO CESS PERSO NA SCENARIOInteraction Design
D
C
H
HUMAN
CENTERED
DESIGN
INTERA CTION DESIGN WHATI SDESIG N? HCD PROCE SS INTERAC TIONDES IGNPRO CESS PERSO NA SCENARIOInteraction Design
INTERA CTION DESIGN WHATI SDESIG N? HCD PROCE SS INTERAC TIONDES IGNPRO CESS PERSO NA SCENARIOD
C
Interaction Design Process
INTERA CTION DESIGN WHATI SDESIG N? HCD PROCE SS INTERAC TIONDES IGNPRO CESS PERSO NA SCENARIOInteraction Design Process
INTERA CTION DESIGN WHATI SDESIG N? HCD PROCE SS INTERAC TIONDES IGNPRO CESS PERSO NA SCENARIOH
HEAR
Identifikasi Tantangan
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 SCENARIO
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
INTERA CTION DESIGN WHATI SDESIG N? HCD PROCE SS INTERAC TIONDES IGNPRO CESS PERSO NA SCENARIO
Menggali pengetahuan
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 SCENARIO
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 INTERA CTION DESIGN WHATI SDESIG N? HCD PROCE SS INTERAC TIONDES IGNPRO CESS PERSO NA SCENARIO
Menentukan Narasumber
1. Narasumber positif Pelajar SMP/SMA yg sehari-hari menggunakan angkot dan memiliki smartphone
2. Narasumber rata-rata: Wisatawan backpacker
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 SCENARIO
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 INTERA CTION DESIGN WHATI SDESIG N? HCD PROCE SS INTERAC TIONDES IGNPRO CESS PERSO NA SCENARIO
Panduan Wawancara/ Observasi
Latar belakang narasumber1. 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 SCENARIO
Analisis
Analisis:
Persona & Skenario
INTERA CTION DESIGN WHATI SDESIG N? HCD PROCE SS INTERAC TIONDES IGNPRO CESS PERSO NA SCENARIOPersona
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 SCENARIO
Why Persona?
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 SCENARIO
Contoh: Persona 1
Nabilah adalah pelajar SMA berusia 18 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 SCENARIO
Nabilah sudah mandiri naik angkot sejak SMP (hampir 6 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 2
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 SCENARIO
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 3
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 SCENARIO
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 4
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 SCENARIO
Temuan Penting!
Latar belakang narasumber1. 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 SCENARIO
Temuan Penting!
Tentang gadget1. 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 SCENARIO
Interaction Design Process
INTERA CTION DESIGN WHATI SDESIG N? HCD PROCE SS INTERAC TIONDES IGNPRO CESS PERSO NA SCENARIOC
CREATE
Identifikasi Tantangan
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 SCENARIO
INTERA CTION DESIGN WHATI SDESIG N? HCD PROCE SS INTERAC TIONDES IGNPRO CESS PERSO NA SCENARIO
Ideas Generation
Skenario
Skenario:
Cerita yg merepresentasikan interaksi antara user dgn sistem. INTERA CTION DESIGN WHATI SDESIG N? HCD PROCE SS INTERAC TIONDES IGNPRO CESS PERSO NA SCENARIO
Why Skenario?
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 SCENARIO
INTERA CTION DESIGN WHATI SDESIG N? HCD PROCE SS INTERAC TIONDES IGNPRO CESS PERSO NA SCENARIO
Ideas Generation
INTERA CTION DESIGN WHATI SDESIG N? HCD PROCE SS INTERAC TIONDES IGNPRO CESS PERSO NA SCENARIO
Halte Interaktif
INTERA CTION DESIGN WHATI SDESIG N? HCD PROCE SS INTERAC TIONDES IGNPRO CESS PERSO NA SCENARIO
Interactive Display
INTERA CTION DESIGN WHATI SDESIG N? HCD PROCE SS INTERAC TIONDES IGNPRO CESS PERSO NA SCENARIO
Mobile App
Contoh: Skenario 1
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
Contoh: Skenario 2
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
Tugas 3
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 SCENARIO
Tugas 4
Subject dan nama file/ dokumen: IMK-[Kelas]-[Kelompok]-[Tugas ke-] Contoh: IMK-A-Kelompok3-T4
Pada body email tulis nama & NIM seluruh anggota kelompok.
Kirim via email:
Deadline: H-1 kuliah, 23.59 INTERA CTION DESIGN WHATI SDESIG N? HCD PROCE SS INTERAC TIONDES IGNPRO CESS PERSO NA SCENARIO