dasar desain interaksi

Dasar Desain Dasar Desain InteraksiInteraksi

Dasar Desain InteraksiDasar Desain Interaksi Desain:Desain:

apa itu, intervensi, tujuan, kendalaapa itu, intervensi, tujuan, kendala Proses DesainProses Desain

apa yang terjadi ketikaapa yang terjadi ketika PenggunaPengguna

siapa mereka, apa yang mereka menyukai ...siapa mereka, apa yang mereka menyukai ... SkenarioSkenario

kaya cerita desainkaya cerita desain NavigasiNavigasi

menemukan jalan sekitar Anda sistemmenemukan jalan sekitar Anda sistem Iterasi dan PrototipeIterasi dan Prototipe

tidak pernah benar pertama kalinya! tidak pernah benar pertama kalinya!

Apa Itu Desain ?Apa Itu Desain ?mencapai tujuan dalam keterbatasanmencapai tujuan dalam keterbatasan

Tujuan – MaksudTujuan – Maksud Untuk siapa?, mengapa mereka Untuk siapa?, mengapa mereka

menginginkannyamenginginkannya KendalaKendala

bahan, platformbahan, platform Hasil bernilai jualHasil bernilai jual

Aturan DesainAturan Desain Umumnya :Umumnya :

Pahami material yang adaPahami material yang ada

Pada IMK :Pada IMK : Pahami komputernya :Pahami komputernya :

Kemampuan, tools, kapasitas, platformsKemampuan, tools, kapasitas, platforms Pahami pengguna :Pahami pengguna :

Psikologi, sosial, kesalahan manusia pada Psikologi, sosial, kesalahan manusia pada sistemsistem

Dan dari interaksi user terhadap sistemDan dari interaksi user terhadap sistem

Kesalahan ManusiaKesalahan Manusia laporan kecelakaan ..laporan kecelakaan ..

aircrash, kecelakaan industri, kesalahan rumah sakitaircrash, kecelakaan industri, kesalahan rumah sakit Pertanyaannya, mau menyalahkan manusia?Pertanyaannya, mau menyalahkan manusia?

tetapi …tetapi … tiang beton retak karena terlalu banyak beban berattiang beton retak karena terlalu banyak beban berat menyalahkan tiangnya? Tidak…tetapi…. kesalahan desainmenyalahkan tiangnya? Tidak…tetapi…. kesalahan desain kita tahu bagaimana berperilaku beton di bawah tekanankita tahu bagaimana berperilaku beton di bawah tekanan

manusia salah adalah normalmanusia salah adalah normal kita tahu bagaimana pengguna berperilaku di bawah kita tahu bagaimana pengguna berperilaku di bawah

tekanantekanan sehingga desain untuk itu!sehingga desain untuk itu!

memperlakukan pengguna setidaknya dari bentuk memperlakukan pengguna setidaknya dari bentuk fisik! fisik!

Fokus Dari SistemFokus Dari Sistem

the userthe user

Siklus Hidup Software Siklus Hidup Software Dengan Model Air TerjunDengan Model Air Terjun

Waterfall ModelWaterfall Model

Kekurangan Dari Model Ini Kekurangan Dari Model Ini AdalahAdalah

Adanya kesulitan dalam Adanya kesulitan dalam mengakomodasi perubahan setelah mengakomodasi perubahan setelah proses dijalani.proses dijalani.

Fase sebelumnya harus sudah Fase sebelumnya harus sudah lengkap dan selesai dikerjakan lengkap dan selesai dikerjakan sebelum ke fase berikutnya.sebelum ke fase berikutnya.

Masalah Dalam WaterfallMasalah Dalam Waterfall Perubahan sulit dilakukan karena Perubahan sulit dilakukan karena

sifatnya kaku :sifatnya kaku : Cocok untuk kebutuhan yang Cocok untuk kebutuhan yang

dikumpulkan secara lengkap.dikumpulkan secara lengkap. Perubahan ditekan sekecil mungkin.Perubahan ditekan sekecil mungkin. Umumnya digunakan untuk rekayasa Umumnya digunakan untuk rekayasa

sistem yang besar dimana proyek di sistem yang besar dimana proyek di kerjakan di beberapa tempat.kerjakan di beberapa tempat.

Proses DesainProses Desain

what iswanted

analysis

designimplementand deploy

prototype

interviewsethnography

what is therevs.

what is wanted

guidelinesprinciples

dialoguenotations

precisespecification

architecturesdocumentation

help

evaluationheuristics

scenariostask analysis

Langkah-langkah Langkah-langkah KebutuhanKebutuhan

apa yang ada dan apa yang diinginkan ...apa yang ada dan apa yang diinginkan ... AnalisaAnalisa

pemesanan dan pemahamanpemesanan dan pemahaman DesainDesain

apa yang harus dilakukan dan bagaimana untuk apa yang harus dilakukan dan bagaimana untuk memutuskanmemutuskan

Iterasi dan prototypingIterasi dan prototyping mendapatkan sesuatu dengan benar ... dan mendapatkan sesuatu dengan benar ... dan

menemukan apa yang benar-benar dibutuhkan!menemukan apa yang benar-benar dibutuhkan! Implementasi dan penyebaranImplementasi dan penyebaran

membuat dan mendapatkan hal itu di luar sana membuat dan mendapatkan hal itu di luar sana

… … bagaimana bisa bagaimana bisa dilakukan semuanya ! !dilakukan semuanya ! !

Terbatasnya waktu Terbatasnya waktu design trade-off design trade-off

Kegunaan?Kegunaan? Menemukan masalah dan memperbaikinya?Menemukan masalah dan memperbaikinya? Memutuskan apa yang harus diperbaiki?Memutuskan apa yang harus diperbaiki?

System yang sempurna yang di desain burukSystem yang sempurna yang di desain buruk Terlalu baik Terlalu baik terlalu banyak upaya dalam desain terlalu banyak upaya dalam desain

Fokus ke UserFokus ke User

Ketahui siapa pemakainyaKetahui siapa pemakainya Persona (karakter)Persona (karakter)

Cari tahu kebiasaan/budayanyaCari tahu kebiasaan/budayanya

Ketahui Siapa Ketahui Siapa PemakainyaPemakainya

siapa mereka?siapa mereka? mungkin dia tidak seperti mungkin dia tidak seperti

Anda!Anda! berbicara dengan merekaberbicara dengan mereka mengawasi merekamengawasi mereka menggunakan imajinasi menggunakan imajinasi

Anda Anda

PersonaPersona Menjelaskan contoh userMenjelaskan contoh user

Tidak diperlukan user yang nyataTidak diperlukan user yang nyata Digunakan sebagai pengganti userDigunakan sebagai pengganti user

Apa yang dipikirkan JoniApa yang dipikirkan Joni Rincian masalahRincian masalah

Dibuat se-nyata mungkin Dibuat se-nyata mungkin

Cari tahu Cari tahu Kebiasaan/BudayanyaKebiasaan/Budayanya

pengamatan langsungpengamatan langsung di rumahdi rumah psikiatri pasienpsikiatri pasien

paket probepaket probe item ke prompt tanggapanitem ke prompt tanggapan

umpamanya kaca untuk mendengarkan pada dinding, kamera, umpamanya kaca untuk mendengarkan pada dinding, kamera, kartu poskartu pos

diberikan kepada orang-orang untuk terbuka di lingkungan diberikan kepada orang-orang untuk terbuka di lingkungan mereka sendiri, mereka merekam apa yang bermakna bagi mereka sendiri, mereka merekam apa yang bermakna bagi merekamereka

digunakan untukdigunakan untuk menginformasikan wawancara, ide-ide prompt, desainer menginformasikan wawancara, ide-ide prompt, desainer

enculture enculture

navigation navigation designdesignstruktur lokal - layar tunggalstruktur lokal - layar tunggal

struktur global - keseluruhan struktur global - keseluruhan situs situs

start

the systems

info and help management messages

add user remove user

mainscreen

removeuser confirm

add user

levelslevels widget choicewidget choice

menus, buttons etc.menus, buttons etc. screen designscreen design application navigation designapplication navigation design environment environment

other apps, O/S other apps, O/S

the web …the web …

widget choicewidget choice

screen designscreen design navigation navigation

designdesign environment environment

elements and elements and tagstags <a href=“...”><a href=“...”>

page designpage design site structuresite structure the web, the web,

browser,browser,external links external links

physical devicesphysical devices

widget choicewidget choice

screen designscreen design navigation navigation

designdesign environment environment

controlscontrols buttons, knobs, buttons, knobs, dialsdials

physical layoutphysical layout modes of devicemodes of device the real world the real world

think about structurethink about structure within a screenwithin a screen

later ...later ... locallocal

looking from this screen outlooking from this screen out globalglobal

structure of site, movement between structure of site, movement between screensscreens

wider stillwider still relationship with other applicationsrelationship with other applications

locallocalfrom one screen looking outfrom one screen looking out

goal seekinggoal seeking

goalstart


startgoal

progress with local knowledge only ...


goalstart

… but can get to the goal


… try to avoid these bits!

goalstart

four golden rulesfour golden rules knowing where you areknowing where you are knowing what you can doknowing what you can do knowing where you are goingknowing where you are going

or what will happenor what will happen knowing where you’ve beenknowing where you’ve been

or what you’ve doneor what you’ve done

where you are – where you are – breadcrumbsbreadcrumbs

shows path through web site hierarchyshows path through web site hierarchy

web sitetop level category sub-category

this page

live linksto higher

levels

beware the big button beware the big button traptrap

where do they go?where do they go? lots of room for extra text!lots of room for extra text!

things

the thing fromouter spacemore things

other things

modesmodes lock to prevent accidental use …lock to prevent accidental use …

remove lock - ‘c’ + ‘yes’ to confirmremove lock - ‘c’ + ‘yes’ to confirm frequent practiced actionfrequent practiced action

if lock forgottenif lock forgotten in pocket ‘yes’ gets pressedin pocket ‘yes’ gets pressed goes to phone bookgoes to phone book in phone book …in phone book …

‘c’ – delete entry ‘c’ – delete entry ‘yes’ – confirm ‘yes’ – confirm… oops !… oops !

globalglobalbetween screensbetween screens

within the applicationwithin the application

hierarchical diagrams hierarchical diagrams

the system



hierarchical diagrams hierarchical diagrams ctd.ctd.

parts of applicationparts of application screens or groups of screensscreens or groups of screens

typically functional separationtypically functional separationthe systems



navigating hierarchiesnavigating hierarchies deep is difficult!deep is difficult!

misuse of Miller’s 7 ± 2misuse of Miller’s 7 ± 2 short term memory, not menu sizeshort term memory, not menu size

optimal?optimal? many items on each screenmany items on each screen but structured within screenbut structured within screen

see /e3/online/menu-breadth/

think about dialoguethink about dialoguewhat does it mean in UI design?what does it mean in UI design?

Minister: do you Minister: do you namename take this woman … take this woman …Man: I doMan: I doMinister: do you Minister: do you namename take this man … take this man …Woman: I doWoman: I doMinister: I now pronounce you man and wifeMinister: I now pronounce you man and wife

think about dialoguethink about dialoguewhat does it mean in UI design?what does it mean in UI design?

• marriage servicemarriage service general flow, generic – blanks for namesgeneral flow, generic – blanks for names pattern of interaction between peoplepattern of interaction between people

• computer dialoguecomputer dialogue pattern of interaction between users and systempattern of interaction between users and system but details differ each timebut details differ each time

Minister: do you Minister: do you namename take this woman … take this woman …

network diagramsnetwork diagrams

show different paths through systemshow different paths through system

mainscreen

removeuser confirm

add user

network diagrams ctd.network diagrams ctd. what leads to whatwhat leads to what what happens whenwhat happens when including branchesincluding branches more task oriented then hierarchymore task oriented then hierarchy

mainscreen

removeuser confirm

add user

wider stillwider stillbetween applicationsbetween applications

and beyond ...and beyond ...

wider still …wider still … style issues:style issues:

platform standards, consistencyplatform standards, consistency functional issuesfunctional issues

cut and pastecut and paste navigation issuesnavigation issues

embedded applicationsembedded applications links to other apps … the weblinks to other apps … the web

screen design and layout

basic principlesgrouping, structure, order

alignmentuse of white space

ABCDEFHIJKLMNOPQRSTUVWXYZ

Dix , AlanFinlay, JanetAbowd, GregoryBeale, Russell

basic princbasic principlesiples askask

what is the user doing?what is the user doing? thinkthink

what information, comparisons, what information, comparisons, orderorder

designdesign form follows functionform follows function

available toolsavailable tools grouping of itemsgrouping of items order of items order of items decoration - fonts, boxes etc.decoration - fonts, boxes etc. alignment of itemsalignment of items white space between itemswhite space between items

grouping and structuregrouping and structurelogically together logically together physically together physically together

Billing details: Name Address: … Credit card no

Delivery details: Name Address: … Delivery time

Order details: item quantity cost/item cost size 10 screws (boxes) 7 3.71 25.97 …… … … …

order of groups and order of groups and itemsitems

think! - what is natural orderthink! - what is natural order

should match screen order!should match screen order! use boxes, space etc.use boxes, space etc. set up tabbing right!set up tabbing right!

instructionsinstructions beware the cake recipie syndrome!beware the cake recipie syndrome!

… … mix milk and flour, add the fruitmix milk and flour, add the fruit after beating them after beating them

decorationdecoration use boxes to group logical itemsuse boxes to group logical items use fonts for emphasis, headingsuse fonts for emphasis, headings but not too many!!but not too many!!

ABCDEFHIJKLMNOPQRSTUVWXYZ

alignment - textalignment - text you read from left to right you read from left to right (English and (English and

European)European) align left hand sidealign left hand side

Willy Wonka and the Chocolate FactoryWinston Churchill - A BiographyWizard of OzXena - Warrior Princess

Willy Wonka and the Chocolate FactoryWinston Churchill - A Biography

Wizard of OzXena - Warrior Princessfine for special effects

but hard to scan

boring butreadable!

alignment - namesalignment - names Usually scanning for surnames Usually scanning for surnames

make it easy! make it easy!

Alan DixJanet FinlayGregory AbowdRussell Beale

Alan DixJanet FinlayGregory AbowdRussell Beale

Dix , AlanFinlay, JanetAbowd, GregoryBeale, Russell

alignment - numbersalignment - numbers

think purpose!think purpose!

which is biggest?which is biggest?

532.56179.3

256.31715

73.94810353.142

497.6256

alignment - numbersalignment - numbers

visually:visually: long number = big numberlong number = big number

align decimal pointsalign decimal pointsor right align integersor right align integers

627.8651.005763

382.5832502.56

432.9352.0175

652.8756.34

multiple columnsmultiple columns scanning across gaps hard:scanning across gaps hard:

(often hard to avoid with large data base (often hard to avoid with large data base fields)fields)

sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85

multiple columns - multiple columns - 22 use leaders use leaders


multiple columns - multiple columns - 33 or greying (vertical too)or greying (vertical too)


sherbert 75toffee 120

chocolate 35fruit gums 27

coconut dreams 85

multiple columns - multiple columns - 44 or even (with care!) ‘bad’ alignmentor even (with care!) ‘bad’ alignment

white space - the counterwhite space - the counter

WHAT YOU SEE

white space - the counterwhite space - the counter

WHAT YOU SEE

THE GAPS BETWEEN

space to separate space to separate (pemisahan)(pemisahan)

space to structurespace to structure

space to highlight space to highlight (menyorot)(menyorot)

physical controlsphysical controls

grouping of itemsgrouping of items defrost settingsdefrost settings type of foodtype of food time to cooktime to cook

type of foodtime to cook

defrost settings


grouping of itemsgrouping of items order of itemsorder of items

1)1) type of heatingtype of heating2)2) temperaturetemperature3)3) time to cooktime to cook4)4) startstart

4

4) start2

2) temperature

3

3) time to cook

11) type of heating

physical controlsphysical controls grouping of itemsgrouping of items order of itemsorder of items decorationdecoration

different coloursdifferent coloursfor different functionsfor different functions

lines around relatedlines around relatedbuttonsbuttons

different colours for different functionslines around related buttons (temp up/down)


grouping of itemsgrouping of items order of items order of items decorationdecoration alignmentalignment

centered text in buttonscentered text in buttons? easy to scan ?? easy to scan ?? easy to scan ?centred text in buttons

physical controlsphysical controls grouping of itemsgrouping of items order of items order of items decoration (hiasan)decoration (hiasan) alignmentalignment white spacewhite space

gaps to aid groupinggaps to aid groupinggaps to aid grouping

tindakan penggunatindakan penggunadan kontrol dan kontrol penggunapengguna

memasukkan informasimemasukkan informasitahu apa yang harus tahu apa yang harus

dilakukandilakukanaaffordances (kemampuan)ffordances (kemampuan)

memasukkan informasimemasukkan informasi forms, dialogue boxesforms, dialogue boxes

presentation + data inputpresentation + data input masalah tata letak yang samamasalah tata letak yang sama alignment - alignment - N.B. different label lengthsN.B. different label lengths

Layout yang LogisLayout yang Logis Menggunakan analisis tugasMenggunakan analisis tugas Pengelompokan Pengelompokan natural order for entering informationnatural order for entering information

top-bottom, left-right (depending on culture)top-bottom, left-right (depending on culture) set tab order for keyboard entryset tab order for keyboard entry

N.B. see extra slides for widget choice

Name:Address:

Alan DixLancaster

Name:Address:

Alan DixLancaster

Name:Address:

Alan DixLancaster

?

knowing what to doknowing what to do apa yang aktif apa pasifapa yang aktif apa pasif

mana Anda mengklikmana Anda mengklik mana Anda mengetikmana Anda mengetik

gaya konsisten membantugaya konsisten membantu umpamanya digarisbawahi web linkumpamanya digarisbawahi web link

label dan ikonlabel dan ikon tindakan standar untuk umumtindakan standar untuk umum bahasa - tebal = arus atau tindakan bahasa - tebal = arus atau tindakan

Kemampuan Kemampuan (affordances)(affordances)

psychological termpsychological term Untuk obyek fisikUntuk obyek fisik

shape and size suggest actionsshape and size suggest actions pick up, twist, throwpick up, twist, throw

also cultural – buttons ‘afford’ pushing also cultural – buttons ‘afford’ pushing Untuk obyek layarUntuk obyek layar

button–like object ‘affords’ mouse clickbutton–like object ‘affords’ mouse click physical-like objects suggest usephysical-like objects suggest use

culture of computer useculture of computer use icons ‘afford’ clickingicons ‘afford’ clicking or even double clicking … not like real buttons!or even double clicking … not like real buttons!

mug handle

‘affords’grasping

(genggaman)

sesuai tampilan sesuai tampilan presenting informationpresenting informationaesthetics and utilityaesthetics and utility

colour and 3Dcolour and 3Dlocalisation & localisation &

internationalisationinternationalisation

menyajikan informasi

• purpose matters– sort urutan (yang kolom, abjad numerik)– text vs. diagram– menyebarkan grafik vs. histogram

• prinsip-prinsip presentasi kertas digunakan!• but add interactivity

– softens design choices • e.g. re-ordering columns• ‘dancing histograms’ (chap 21)

chap1chap10chap11chap12chap13chap14 …

171251

2628322

…

sizename size

chap10chap5chap1chap14chap20chap8…

121617222732…

name size

estetika dan utilitas estetika dan utilitas desain estetikadesain estetika meningkatkan kepuasan pengguna dan meningkatkan meningkatkan kepuasan pengguna dan meningkatkan

produktivitasproduktivitas keindahan dan utilitas mungkin bertentangankeindahan dan utilitas mungkin bertentangan

gaya visual terlibat gaya visual terlibat mudah untuk membedakanmudah untuk membedakan desain yang bersihdesain yang bersih– sedikit perbedaan – sedikit perbedaan

membingungkanmembingungkan latar belakang di balik tekslatar belakang di balik teks

… … baik untuk melihat, tapi sulit untuk membacabaik untuk melihat, tapi sulit untuk membaca tetapi dapat bekerja samatetapi dapat bekerja sama

misalnya desain mejamisalnya desain meja dalam produk konsumendalam produk konsumen– – pembeda utama (misalnya pembeda utama (misalnya

iMac)iMac)

colour and 3Dcolour and 3D keduanya sering digunakan dengan sangat keduanya sering digunakan dengan sangat

buruk!buruk! WarnaWarna

monitor yang lebih tua terbatas paletmonitor yang lebih tua terbatas palet berhati-hatilah buta warna!berhati-hatilah buta warna! gunakan hemat untuk memperkuat informasi gunakan hemat untuk memperkuat informasi

lainnyalainnya Efek 3DEfek 3D

baik untuk informasi fisik dan beberapa grafikbaik untuk informasi fisik dan beberapa grafik

badbad useuse ofof ccolouolourr overover useuse - - withoutwithout veryvery goodgood reason (e.g. reason (e.g.

kids’ site)kids’ site) colour blindnesscolour blindness poor poor use ofuse of contrast contrast do adjust your set!do adjust your set!

adjust your monitor to greys onlyadjust your monitor to greys only can you still read your screen?can you still read your screen?

di seluruh negara dan di seluruh negara dan budaya budaya

lokalisasi & internasionalisasilokalisasi & internasionalisasi mengubah antarmuka untuk budaya tertentu / mengubah antarmuka untuk budaya tertentu /

bahasabahasa globalisasiglobalisasi

mencoba untuk memilih dll simbol-simbol yang mencoba untuk memilih dll simbol-simbol yang bekerja di mana-manabekerja di mana-mana

hanya mengubah bahasa?hanya mengubah bahasa? menggunakan sumber database bukan teks menggunakan sumber database bukan teks

literal…literal… tapi ukuran perubahan, urutan kiri-kanan dlltapi ukuran perubahan, urutan kiri-kanan dll

lebih dalam isu-isulebih dalam isu-isu asumsi dan nilai-nilai budayaasumsi dan nilai-nilai budaya makna simbolmakna simbol

prototypingprototyping

iteration and iteration and prototypingprototyping

getting better …getting better …… … and starting welland starting well

prototypingprototyping anda tidak pernah mendapatkan anda tidak pernah mendapatkan

benar pertama kalibenar pertama kali jika pada awalnya Anda tidak jika pada awalnya Anda tidak

berhasil ... berhasil ... prototype evaluatedesign

re-design

done!OK?

Perangkap prototyping

bergerak sedikit demi sedikit ... tapi ke mana?Malverns or the Matterhorn?

1. membutuhkan titik awal yang baik 2. perlu memahami apa yang salah

dasar desain interaksi

Documents