INTERAKSI MANUSIA & KOMPUTERSemester Ganjil 2015/2016

lutfi.class@gmail.com

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: lutfi.class@gmail.com

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