Material preparado por: Dr. Jorge Adolfo Ramírez Uresti

Cs5034

Interface Design – Principles and

Guidelines

Metaphores

2

Based on the real-world.

Easy to understand.

Take advantage of users’ previous knowledge.

Allow the user to perform actions in an interface.

Revisión 200811

3 Revisión 200811

4 Revisión 200811

Direct Manipulation

5

Users want the control of all computer actions.

People expect that their physical actions provide a

physical result or outcome.

Revisión 200811

6 Revisión 200811

Seeing and pointing

7

Recall not memorize. See, recall and point.

No typing.

Select one of the actions available on screen.

User is not a programmer. May not know the command-line.

Revisión 200811

8 Revisión 200811

9 Revisión 200811

10 Revisión 200811

Consistency

11

Internal and External Consistency

Same type of icons.

Same form for representing actions.

Allows the transference of users’ skills between several

programs.

Revisión 200811

12 Revisión 200811

What you see is what you get (WYSIWYG)

13

Whatever is displayed on screen is printed out.

Immediate feedback.

No need for using or memorizing commands.

Revisión 200811

14 Revisión 200811

User’s Control

15

The users starts and controls all actions.

Action (user) -> reaction (computer)

Risk cases:

Computer asks the user what to do.

Users are responsible for decisions.

Revisión 200811

16 Revisión 200811

Feedback and Dialog

17

User must be informed of the system’s status.

Immediate feedback. Visual effects.

Sound.

Brief and direct messages.

Non-technical language.

Reduce complex activities. Simple steps.

Small steps.

Revisión 200811

18 Revisión 200811

Excuse Errors

19

User learns through exploration.

Errors while exploring = excused

Forgiveness

Undo actions.

Inform before performing an action that cannot be undone.

Revisión 200811

20 Revisión 200811

Noticeable stability

21

Users comfortable in a non-changing environment.

Consistent graphic elements.

Visual marks.

Unabled elements do not disappear without notice.

Revisión 200811

22 Revisión 200811

23 Revisión 200811

Aesthetics

24

Screens: Atractive.

Clear.

Simple.

Consistent.

Different objects -> different appearance.

Visually rich situation -> graphic designer.

Revisión 200811

25 Revisión 200811

General Design Guidelines

26

Text

Avoid large paragraphs.

Small and Concise regions.

Graphs

Communicate not impress -> simple graphs.

Must be situated in a context.

Use them from the beginning of design.

Revisión 200811

27

Exercises (Teams of 3):

1. Select a WYSIWYG program and one that does not

met this criteria.

Discuss 3 advantages and 3 disadvantages of each program.

2. Select a program that allows “seeing and pointing”

and one that does not.

What advantages and disadvantages have each one?

3. Design a screen using metaphores for selling books

and stationary. It should include an agent that helps in

the process.

Revisión 200811

Erroneous Metaphores

28

Programs whose metaphores does not match its intended use.

Disorient the user.

Make the user believe an action can be done when it cannot.

Revisión 200811

29 Revisión 200811

30 Revisión 200811

31 Revisión 200811

32 Revisión 200811