Pertemuan 13

Desain Interface

8-1
 Remember…

• 3 weeks to go to UAS
• 16x3+ 3 weeks to go to GRADUATION
Modeling Process

3. Data Model

2. Functional
Model
1. Behavioral
Model

Data Modeling Process is composed of the outer layer of the behavioral model, the functional model, then
the data model.
Modelling
 Desain Interface

1. Definisi
2. Hal yang perlu diperhatikan
3. Cara Pendekatan
4. Prinsip & Petunjuk
Definisi
 Desain Interface

1. Definisi
2. Hal yang perlu diperhatikan
3. Cara Pendekatan
4. Prinsip & Petunjuk
 Ten Principles
for user Interface Design
1. Visibility of system status
2. Match between system and real world
3. User control and freedom
4. Consistency and standards
5. Error prevention
6. Recognition rather than recall
7. Flexibility and efficiency of use
8. Aesthetic and minimalist design
9. Help users recognise, diagnose and recover from errors
10. Help and documentation
 1. Visibility of system status
• The system should always keep users informed about what is
going on, through appropriate feedback within reasonable
time.
 HCI Design: Nielsen’s heuristics.
1. Visible System Status

- For any activity expected to take over 3-5sec, give status feedback to user

MS Windows: search IE: download

No estimate of time Better feedback

- For each action, system should respond in some way; e.g. in a web form,
clicking a submit button  button changes color, or a clicking sound is made

[One way to do so is to use DHTML in forms instead of HTML]

2. Match between system and the real world (use
metaphor)
• The system should speak the users' language, with words,
phrases and concepts familiar to the user, rather than
system-oriented terms. Follow real-world conventions,
making information appear in a natural and logical order.
 HCI Design: Nielsen’s heuristics..

2. Messages must match real world, not program objects

Example:
ATM machine message when trying to withdraw some money:

Poor: Better:
User does not care what is X.25 Tells user what they can do;
What is the ‘Local limit’ ? Blocks out restricted actions
 3. User control and freedom
• Users often choose system functions by mistake and will
need a clearly marked "emergency exit" to leave the
unwanted state without having to go through an extended
dialogue. Support undo and redo.
 HCI Design: Nielsen’s heuristics…
3. User control and freedom

- For choice made by error, provide a ‘way back’ [e.g. undo, redo], or
a method to re-start [e.g. Home button on website]

undo, redo link to home where you are

 4. Consistency and standards
• Users should not have to wonder whether different words,
situations, or actions mean the same thing. Follow platform
conventions.
 Consistency and standards (cont.)
• Consistency in Microsoft word and excel sheet
Consistency and standards (cont.)
 HCI Design: Nielsen’s heuristics….

4. Use Consistent (or better, Standard) terminology and icons

- Do not use multiple words/names for same function in different places

- Consistent terminology in prompts, menus, and user-guides

- Use icons/images without ambiguous meanings

- Consistent color, layout, capitalization, and fonts throughout the application

MS Internet explorer: US road signs:

Search in page, or Print Preview? Which one is for “curvy road ahead?
 5. Error prevention
• Even better than good error messages is a careful design
which prevents a problem from occurring in the first place.
Either eliminate error-prone conditions or check for them
and present users with a confirmation option before they
commit to the action.
 HCI Design: Nielsen’s heuristics…..

5. Eliminate potential errors

Avoid possibility for user to make errors

No calendar !
 6. Recognition rather than recall
• Minimize the user's memory load by making objects, actions,
and options visible. The user should not have to remember
information from one part of the dialogue to another.
Instructions for use of the system should be visible or easily
retrievable whenever appropriate.
Recognition rather than recall (cont.)
 Recognition rather than recall (cont.)
• Where is the shutdown option?
 HCI Design: Nielsen’s heuristics……
6. Recognition is better than recall
- show the choices made by user at an earlier stage, instead of having
to remember earlier actions
Example: NikeID

Previous choices

What remains?
 7. Flexibility and efficiency of use
• Accelerators -- unseen by the novice user -- may often speed
up the interaction for the expert user such that the system
can cater to both inexperienced and experienced.,
 HCI Design: Nielsen’s heuristics…….

7. Flexibility and efficient use

For novice users, provide easy (though longer) interactions),

For advanced/frequent users, provide: short-cut, special keys, macros, …

Example: Special keys

Example: shortcut
ALT+e

ALT+e+t
 8. Help users recognize, diagnose, and recover
from errors
• Error messages should be expressed in plain language (no
codes), precisely indicate the problem, and constructively
suggest a solution.
Help users recognize, diagnose, and recover from
errors (cont.)
• It helps the user to diagnose something
Help users recognize, diagnose, and recover from
errors
• Oops! What is the error here?
• No recovery information
 HCI Design: Nielsen’s heuristics……..

8. Help the user to recognize, diagnose, and recover from error

Error messages should be expressed in plain language (no codes),

precisely indicate the problem, and constructively suggest a solution.

Poor design examples:

 9. Help and documentation
• Even though it is better if the system can be used without
documentation, it may be necessary to provide help and
documentation. Any such information should be easy to
search, focused on the user's task, list concrete steps to be
carried out, and not be too large.
 HCI Design: Nielsen’s heuristics………

9. Help and Documentation

- Must provide help/manual/user-guide

- Language and format of User-guide should use simple, standard terminology

MS Help: (Good design)

- standardized format; provides search; book-metaphor; use of links
 10. Aesthetic and minimalist design
• Dialogues should not contain information which is irrelevant
or rarely needed. Every extra unit of information in a
dialogue competes with the relevant units of information
and diminishes their relative visibility.
 HCI Design: Nielsen’s heuristics

10. Aesthetics and minimalist design

- Do not put too much, irrelevant information in Dialog boxes

- Use standard and commonly accepted controls (sliders, buttons etc.)

- Select fonts/sizes that are suited for screen display to maximize readability

Fonts designed for web use (readable on-screen in large/small font size):

This is an example of Verdana and smaller

This is an example of Georgia

Others: Arial, Comic Sans MS, Adobe Minion web (Internet Explorer default)

How to ensure your font is used on client? Cascading Style Sheets (XML)
 Golden rules and heuristics
• “Broad brush” design rules
• Useful check list for good design
• Better design using these than using nothing!
• Different collections e.g.
– Shneiderman’s 8 Golden Rules (last week)
– Nielsen’s 10 Heuristics
– Gerhardt-Powals Heuristics
– Norman’s 7 Principles
 Gerhardt-Powals Heuristics.

1. Automate unwanted workload

- Eliminate mental calculations, estimations, and unnecessary thinking

Example:
Travel agent website:

Destination selection: Selection list

Departure date:
- allows proper dates only;
- linked to a calendar tool

[image source: www.cxholidays.com]

 Gerhardt-Powals Heuristics..

2. Reduce uncertainty by clear and obvious display of data

Poor design: Better design:

 Gerhardt-Powals Heuristics…
3. Reduce cognitive load by combining lower-level data into
a higher-level summation

4. Group data in consistently meaningful ways to

decrease search time

Example: setting options in Powerpoint™

 Gerhardt-Powals Heuristics….

5. Use names that are conceptually related to function

- Terminology should be easy to recall/recognize

- Terminology should be context dependent

Example: Tool (or functions) provided by Adobe Photoshop

 Gerhardt-Powals Heuristics…..

6. Present data in a way to ease processing time

- do not require user to perform combinations, addition, subtraction etc.

- use colors*/graphical outputs for easy visualization

*Special caution: design to accommodate color-blind users

Colors of rainbow

Don’t use only color to present choices

Use combination of Color, Images (icons), Words

How the colors of rainbow appear to people

with different types of color-blindness
 Gerhardt-Powals Heuristics……

7. Include only the information a user needs at a given time

- Do not distract user with non-essential data

Bad design !!