danangwahyu utomo [email protected] 085 725 158...
TRANSCRIPT
Danang Wahyu Utomo
Santosa, Insap. Interaksi Manusia dan Komputer. Penerbit Andi. 2010
Dix, Alan, et al. Human Computer Interaction 3th edition
Danang Wahyu Utomo
Danang Wahyu Utomo
Goal – purpose
- Untuk siapa, mengapa mereka menginginkannya?
Constraints
- material, platform
Trade-offs
Achieving Goals within Constraints
Danang Wahyu Utomo
Penilaian terhadap sebuah aplikasi berbeda antar user
User yang awam menggunakan aplikasi tentunya memberikan penilaian sulit
terhadap aplikasi tersebut
Berbeda jauh dengan user yang familiar tentang aplikasi tersebut
Contoh : Ms. Word : Pengalaman, Kebiasan, Lama belajar, kemudahan panduan
Danang Wahyu Utomo
Prinsip desain merupakan serangkaian panduan untuk membantu desainer
mengambil keputusan perancangan selama proses tersebut berjalan
Prinsip desain juga sebagai petunjuk secara umum yang dihasilkan dari para
pakar desain
Danang Wahyu Utomo
Design : what it is, interventions, goals, constraints
The Design Process : what happens when
Users :who they are, what they are like
Scenarios : rich stories of design
Navigation : finding your way around a system
Iteration and prototypes : never get it right first time
Danang Wahyu Utomo
Ben Shneiderman’s dengan “Eight Golden Rules of Dialog Design”
Deborah J. Mayhew’s dengan “General Principles of User Interface Design”
IBM’s dengan “Design Principles for Tomorrow”
Danang Wahyu Utomo
Upayakan untuk tetap konsisten
Gunakan short cut pada bagian yang sering digunakan
Sediakan feedback yang informative
Dialog memiliki lingkup tertentu
Sediakan penanganan kesalahan sederhana
Perbolehkan user melakukan aksi mundur atau pembatalan
Berikan control internal
Kurangi aktifitas mengingat
Danang Wahyu Utomo
WYSIWYG
Flexibility
Responsiveness
Invisible technology
Robustness
Protection
Ease of learning
Ease of use
User compatibility
Product compatibility
Task compatibility
Work flow compatibility
Consistency
Familiarity
Simplicity
Direct manipulation
control
Danang Wahyu Utomo
Kesederhanaan ; tidak mengabaikan usability demi fungsionalitas
Support ; pengguna tetap terkendali melalui panduan proaktif
Familiarity ; pemahaman pengguna
Obviousness ; fungsi dari objek dapat terlihat dan intuitif
Encouragement ; aksi dapat diperkirakan hasilnya dan dapat dibatalkan
Satisfaction ; berikan pencapaian progress
Danang Wahyu Utomo
Accessibility ; semua object dapat diakses setiap saat
Safety ; bebas dari masalah
Versatility ; berikan alternative teknik interaksi
Personalization ; kesempatan pengguna untuk customize
Affinity ; sesuaikan objek dengan kehidupan nyata melalui design visual
Danang Wahyu Utomo
what iswanted
analysis
design
implementand deploy
prototype
interviewsethnography
what is therevs.
what is wanted
guidelinesprinciples
dialoguenotations
precisespecification
architecturesdocumentation
help
evaluationheuristics
scenariostask analysis
Danang Wahyu Utomo
Requirement
- Apa yang ada disana dan yang dinginkan
Analysis
- Penawaran dan pemahaman
Design
- Apa yang dilakukan dan bagaimana menentukannya
Iteration and prototyping
- Apa yang bener – benar sistem butuhkan
Implementation and deployment
- Implementasi
Danang Wahyu Utomo
Ketahui siapa pemakainya
Persona (karakter)
Cari tahu kebiasaan / budayanya
Danang Wahyu Utomo
Siapa mereka ?
Mungkin dia tidak seperti anda?
Berbicara dengan mereka
Mengawasi mereka
Menggunakan imajinasi anda
Danang Wahyu Utomo
Menjelaskan contoh user
- Tidak diperlukan user yang nyata
Digunakan sebagai pengganti user
- Apa yang dipikirkan dia ?
Rincian masalah
- Dibuat senyata mungkin
Danang Wahyu Utomo
Betty is 37 years old, She has been Warehouse Manager for five years and worked for
Simpkins Brothers Engineering for twelve years. She didn’t go to university, but has
studied in her evenings for a business diploma. She has two children aged 15 and 7
and does not like to work late. She did part of an introductory in-house computer
course some years ago, but it was interrupted when she was promoted and could no
longer afford to take the time. Her vision is perfect, but her right-hand movement is
slightly restricted following an industrial accident 3 years ago. She is enthusiastic about
her work and is happy to delegate responsibility and take suggestions from her staff.
However, she does feel threatened by the introduction of yet another new computer
system (the third in her time at SBE).
Danang Wahyu Utomo
Mencari tahu kebiasaan user bisa dengan melakukan pengamatan langsung
Perhatikan tingkat usia dalam melakukan pengamatan kebiasaan user
Usia mempengaruhi user dalam berinteraksi dengan komputer
Danang Wahyu Utomo
Story untuk desain
- Komunikasi dengan yang lain
- Validasi model lain
- Pemahaman dinamis
Linearitas
- Waktu adalah linear
Danang Wahyu Utomo
Apa yang user ingin lakukan ?
Tahapan :
- Apa yang mereka lihat (sketsa, screenshot)
- Apa yang mereka lakukan (keyboard, mouse)
- Apa yang mereka pikirkan
Danang Wahyu Utomo
Local structure – single screen
Global structure – whole site
mainscreen
removeuser
confirm
add user
the systems
info and help management messages
add user remove user
Danang Wahyu Utomo
Pemilihan widget
- menu, button
Screen design
Application navigation design
Environment
- Other apps, OS
Danang Wahyu Utomo
Prinsip dasar
Grouping, structure, order
Alignment
Use of white space
Danang Wahyu Utomo
Ask
- What is the user doing ?
Think
- What informations, comparisons, orders
Design
- Form follow function
Danang Wahyu Utomo
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
…… … … …
Danang Wahyu Utomo
Gunakan box untuk mengelompokkan item logical
Gunakan font untuk emphasis (penekanan) dan heading
Jangan terlalu banyak
ABCDEFGHIJKLMNOPQRSTUVWXYZ
Danang Wahyu Utomo
Dibaca dari kiri ke kanan (English and European)
Contoh :
Willy Wonka and the Chocolate Factory
Winston Churchill - A Biography
Wizard of Oz
Xena - Warrior Princess
Willy Wonka and the Chocolate Factory
Winston Churchill - A Biography
Wizard of Oz
Xena - Warrior Princess
Danang Wahyu Utomo
Biasa digunakan untuk scanning surname
Alan Dix
Janet Finlay
Gregory Abowd
Russell Beale
Alan Dix
Janet Finlay
Gregory Abowd
Russell Beale
Dix , Alan
Finlay, Janet
Abowd, Gregory
Beale, Russell
Danang Wahyu Utomo
Think purpose
Mana yang terbesar
532.56
179.3
256.317
15
73.948
1035
3.142
497.6256
Danang Wahyu Utomo
Visually :
Long number = big number
Align decimal points or right align integers
627.865
1.005763
382.583
2502.56
432.935
2.0175
652.87
56.34
Danang Wahyu Utomo
sherbet 75
toffee 120
chocolate 35
fruit gums 27
coconut dreams 85
Danang Wahyu Utomo
sherbet 75
toffee 120
chocolate 35
fruit gums 27
coconut dreams 85
Danang Wahyu Utomo
sherbet 75
toffee 120
chocolate 35
fruit gums 27
coconut dreams 85
Danang Wahyu Utomo
Space to separate
Space to structure
Space to highlight
Danang Wahyu Utomo
Danang Wahyu Utomo
Danang Wahyu Utomo
Danang Wahyu Utomo
Gouping of items
- Defrost settings
- Type of food
- Time to cook
Danang Wahyu Utomo
Gouping of items
Order of items
1. Type of heating
2. Temperature
3. Time to cook
4. start
1
2
3
4
Danang Wahyu Utomo
Gouping of items
Order of items
Decoration
perbedaan warna pada masing – masing
fungsi
garis disekitar tombol terkait
Danang Wahyu Utomo
Gouping of items
Order of items
Decoration
Alignment
centered text pada tombol ?
easy to scan ?
Danang Wahyu Utomo
Gouping of items
Order of items
Decoration
Alignment
White space
gaps to aid grouping
Danang Wahyu Utomo
Memasukkan Informasi
Mengetahui apa yang dilakukan
Kelayakan
Danang Wahyu Utomo
Forms, dialogue box
- Presentasi + data input
- Tata letak
- alignment
Logical layout
- User task analysis
- grouping
Name:
Address:
Alan Dix
Lancaster
Name:
Address:
Alan Dix
Lancaster
Name:
Address:
Alan Dix
Lancaster
?
Danang Wahyu Utomo
Apa yang aktif, apa yang pasif
- Where do you click
- Where do you type
Konsisten – style help
- Web Underline links
Label dan icon
- Standar untuk aksi yang umum
- Bahasa – bold = current state atau aksi
Danang Wahyu Utomo
Psychological term
Physical object
- Shape dan size rekomendasi aksi
Screen object
Culture of computer use
- Icons ‘afford’ click
- Even double click
mug handle
‘affords’grasping
Danang Wahyu Utomo
You never get it right first time
If at first you don’t succeed
prototype evaluatedesign
re-design
done!OK?
Danang Wahyu Utomo