DanangWahyu Utomo [email protected] 085 725 158 …dinus.ac.id/repository/docs/ajar/Week_8_-_Prinsip_Dasar_Desain... · Design-Apa yang dilakukan dan bagaimana menentukannya

Danang Wahyu Utomo

[email protected]

085 725 158 327

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