Human Computer Interaction

Pertemuan 5. Interaction Design Basic

 interaction design basics
 design:
 what it is, intervensi, tujuan, kendala
 the design process
 what happens when
 users
 who they are, what they are like …
 scenarios
 rich stories of design
 navigation
 Menemukan jalan di sekitar sistem
 iteration and prototypes
 never get it right first time!
interactions and interventions
design interactions not just interfaces
Bukan hanya interaksi langsung
e.g. stapler in office – technology changes interaction style
• manual: write, print, staple, write, print, staple, …
• electric: write, print, write, print, …, staple

designing interventions not just artefacts

not just the system, but also …
• documentation, manuals, tutorials
• what we say and do as well as what we make
what is design?
Mencapai tujuan dalam keterbatasan

• goals - purpose
• who is it for, mengapa mereka menginginkannya
• constraints
• materials, platforms
• trade-offs
golden rule of design

Understand your
materials
for Human–Computer Interaction
understand your materials

• understand computers
• limitations, capacities, tools, platforms
• understand people
• psychological, social aspects
• human error
• and their interaction …
 To err is human
• accident reports ..
• aircrash, industrial accident, hospital mistake
• permintaan … menyalahkan … ‘human error’
• but …
• concrete lintel rusak karena terlalu berat
• menyalahkan ‘lintel error’ ?
… no – design error
we know how concrete behaves under stress
• human ‘error’ is normal
• Kita mengerti bagaimana pengguna bekerja dibawah tekanan
• so design for it!
• treat the user at least as well as physical materials!
The process of design
scenarios
what is task analysis
wanted guidelines
principles
Interviews analysis precise
specification
what is there design
vs.
what is wanted dialogue implement
notations and deploy
evaluation prototype
heuristics architectures
documentation
help
 Steps …
• requirements
• what is there and what is wanted …
• analysis
• ordering and understanding
• design
• what to do and how to decide
• iteration and prototyping
• getting it right … and finding what is really needed!
• implementation and deployment
• making it and getting it out there
… but how can I do it all ! !
• limited time  design trade-off

• kegunaan
• Menemukan masalah dan memperbaikinya
• Memutuskan apa yang harus diperbaiki

• a perfect system is badly designed

• too good  too much effort in design
user focus
 know your user
 persona

 cultural probes
know your user
•Siapa mereka?
•Mungkin tidak seperti anda!
•Berbicara pada mereka
•Perhatikan mereka
•Gunakan imajinasi anda
persona
• Deskripsikan contoh/salah satu user
• Belum tentu user/pengguna tang nyata/asli
• Gunakan user pengganti
• Rincian materi
• Dibuat nyata
example persona
Betty 37 tahun, Ia telah menjadi Manajer Gudang selama lima tahun
dan bekerja untuk Simpkins Bersaudara Teknik selama dua belas
tahun . Dia tidak kuliah, namun setiap malam dia belajar untuk ijazah
bisnis (business diploma). Dia memiliki dua anak berusia 15 dan 7
tahun dan dia tidak ingin bekerja lembur. Dia bekerja sebagai
pengajar untuk kursus komputer ke rumah-rumah beberapa tahun
yang lalu, tapi hal tersebut terhenti ketika ia dipromosikan karena dia
tidak ada waktu lebih lagi untuk mengajar. Visinya yang sempurna,
tetapi gerakan kanan tangannya sedikit dibatasi menyusul kecelakaan
industri 3 tahun yang lalu. Dia sangat antusias tentang pekerjaannya
dan senang untuk mendelegasikan tanggung jawab dan mengambil
saran dari stafnya. Namun, dia tidak merasa terancam oleh
pengenalan lagi sistem komputer baru.
scenarios
 stories for design
 use and reuse
scenarios
• stories for design
• communicate with others
• validate other models
• understand dynamics
• linearity
• time is linear - our lives are linear
• but don’t show alternatives
scenarios …
• Apa yang akan digunakan pengguna?

• step-by-step walkthrough
• what can they see (sketches, screen shots)
• what do they do (keyboard, mouse etc.)
• what are they thinking?

• use and reuse throughout design

scenario – movie player
• Brian ingin melihat film baru "xXx" dan ingin mengundang Alison, tapi
dia tahu dia tidak suka film "action". Dia memutuskan untuk melihat
apakah dia akan menyukainya dan begitu terhubung ke salah satu
jaringan berbagi film. Dia menggunakan mesin karyanya karena
memiliki koneksi bandwidth yang lebih tinggi, tetapi merasa sedikit
bersalah. Dia tahu dia akan mendapatkan sebuah salinan ilegal film,
tetapi dia anggap itu adalah OK. Ia menekan tombol 'menu' dan pada
layar LCD kecil menggunakan tombol panah untuk tombol pilih
'bluetooth connect' dan menekannya. Pada komputer program
download film sekarang memiliki ikon yang menunjukkan bahwa
mereka telah diakui perangkat yang kompatibel. Pada layar LCD
mengatakan "download sekarang", persen menunjukkan indikator
dengan ikon berputar kecil.
 also play act …
• mock up device (tiruan)
• pretend you are doing it
• internet-connected swiss army knife …

but where is that thumb?

use toothpick as stylus

… explore the depths
• explore interaction (eksplorasi)
• what happens when

• explore cognition
• what are the users thinking

• explore architecture
• what is happening inside
use scenarios to ..
• communicate with others
• designers, clients, users

• validate other models

• ‘play’ it against other models

• express dynamics
• screenshots – penampilan
• skenario – prilaku
Linearity (linearitas)
Scenarios – Sistem melalui satu Jalur linear

Pro:
• Life and time as linear
• Mudah untuk dipahami (cerita dan narasi yang alami)
• concrete (kemungkinan terjadi kesalahan kecil)
Kontra:
• Tidak ada pilihan, tidak ada cabang, tidak ada kondisi khusus
• miss the unintended

• Jadi:
• use several scenarios
• use several methods
 navigation design
the systems

start info and help management messages

local structure – single screen add user remove user

global structure – whole site

main remove
confirm
screen user

add user
levels

• Pilihan widget
• menus, buttons etc.
• Desain layar
• Desain aplikasi navigasi
• Lingkungan
• Aplikasi lain, O/S
 Levels of interaction
PC Application Website Physical device

widget choice elements and tags Buttons, dials,

Lights, displays

screen design page design Physical layout

navigation design site structure Main modes of

device

environment the web, browser, The real World!

external links
 local
from one screen
looking out
 goal seeking

goal
start
goal seeking

goal
start

progress with local knowledge only ...

 goal seeking

goal
start

… but can get to the goal

 goal seeking

goal
start

… try to avoid these bits!

 four golden rules
• knowing where you are (mengetahui di mana anda
berada)
• knowing what you can do (mengetahui apa yang
dapat anda lakukan)
• knowing where you are going or what will happen
(mengetahui di mana anda atau apa yang akan
terjadi)
• knowing where you’ve been or what you’ve done
(mengetahui di mana atau apa yang telah anda
lakukan)
 where you are – breadcrumbs
shows path through web site hierarchy
top level category sub-category
web site this page

live links
to higher
levels
beware the big button trap
things other things

the thing from

more things
outer space

• where do they go?

• lots of room for extra text!
 modes
Kunci untuk mencegah tindakan yang tidak di
sengaja
tekan lock - ‘c’ + ‘yes’ untuk mengkonfirmasi
Tindakan sering dilakukan
Jika lupa mengunci
Di kantong ‘yes’ tertekan
Masuk ke phone book
Di dalam phone book
‘c’ – delete entry
‘yes’ – confirm
… oops !
Question ?