Danang Wahyu Utomo

Danang Wahyu Utomo

[email protected] 085 725 158 327

 Santosa, Insap. Interaksi Manusia dan Komputer. Penerbit Andi. 2010

 Dix, Alan, et al. Human Computer Interaction 3th edition

Danang Wahyu Utomo

Danang Wahyu Utomo

Achieving Goals within Constraints  Goal – purpose - Untuk siapa, mengapa mereka menginginkannya?

 Constraints - material, platform

 Trade-offs

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

 User compatibility

 WYSIWYG

 Product compatibility

 Flexibility

 Task compatibility

 Responsiveness

 Work flow compatibility

 Invisible technology

 Consistency

 Robustness

 Familiarity

 Protection

 Simplicity

 Ease of learning

 Direct manipulation

 Ease of use

 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 is wanted interviews ethnography what is there vs. what is wanted

scenarios task analysis

guidelines principles

analysis

precise specification

design dialogue notations

evaluation heuristics

prototype

implement and deploy architectures documentation help 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 the systems

main screen

remove user

confirm info and help

add user

management

add user

messages

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

ABCDEFGHIJKLM NOPQRSTUVWXYZ 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 Janet Gregory Russell





Dix , Alan Finlay, Janet Abowd, Gregory Beale, Russell

Dix Finlay Abowd Beale

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 toffee chocolate fruit gums coconut dreams

75 120 35 27 85

Danang Wahyu Utomo

sherbet toffee chocolate fruit gums coconut dreams

75 120 35 27 85

Danang Wahyu Utomo

sherbet toffee chocolate fruit gums coconut dreams

75 120 35 27 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

1

3. Time to cook 4. start

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

Name:

Alan Dix

Address: Lancaster

Name:

 Forms, dialogue box - Presentasi + data input - Tata letak



Alan Dix

Address: Lancaster

?

Name: Alan Dix Address: Lancaster

- alignment

 Logical layout - User task analysis

- grouping

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

mug handle  Psychological term

‘affords’ grasping

 Physical object - Shape dan size rekomendasi aksi

 Screen object

 Culture of computer use - Icons ‘afford’ click - Even double click

Danang Wahyu Utomo

 You never get it right first time

 If at first you don’t succeed

OK?

design

prototype

evaluate

done!

re-design

Danang Wahyu Utomo

Danang Wahyu Utomo