Interface Design Principles and Guidelines
Transcript of Interface Design Principles and Guidelines
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