Post on 31-Dec-2016
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
goal seekinggoal seeking
startgoal
progress with local knowledge only ...
goal seekinggoal seeking
goalstart
… but can get to the goal
goal seekinggoal seeking
… 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
info and help management messages
add user remove user
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
info and help management messages
add user remove user
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
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
multiple columns - multiple columns - 33 or greying (vertical too)or greying (vertical too)
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
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
physical controlsphysical controls
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)
physical controlsphysical controls
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