SLIDE 1
- S. Ludi/R. Kuehl
- p. 1
R I T
Software Engineering
- S. Ludi/R. Kuehl
- p. 2
R I T
Software Engineering
R.I.T S. Ludi/R. Kuehl p. 1 R I T Software Engineering Usability - - PowerPoint PPT Presentation
R.I.T S. Ludi/R. Kuehl p. 1 R I T Software Engineering Usability - - PowerPoint PPT Presentation
Presentation Design Principles Grouping Contrast Proportion R.I.T S. Ludi/R. Kuehl p. 1 R I T Software Engineering Usability Presentation Design Framework Properties color, size, intensity, metaphor, shape, Navigation Object
SLIDE 2
SLIDE 3
- S. Ludi/R. Kuehl
- p. 3
R I T
Software Engineering
R.I.T
Simplicity guidelines in graphic design … Remove whatever isn’t essential Use a regular pattern for elements, limit variation – same font, color, size, … Combine element roles – e.g., label as a link Balance, symmetry, alignment White space
Provide white space margins around objects to avoid crowding Crowding impacts scanning Balance with need to use screen real estate
Presentation Simplicity
SLIDE 4
- S. Ludi/R. Kuehl
- p. 4
R I T
Software Engineering
R.I.T
SLIDE 5
- S. Ludi/R. Kuehl
- p. 5
R I T
Software Engineering
R.I.T
Grouping: Gestalt Principles of Perception
- Gestalt psychology strives to explain the
factors involved in the way we group things :-)
Perception of the environment as whole entities even without complete information
Distinguish foreground objects from background
The viewer looks for the simplest solutions even when visually information is incomplete
The Rubin Face/Vase Illusion
“Gestalt psychology tries to understand the laws of our ability to acquire and maintain meaningful perceptions in an apparently chaotic world. The central principle of gestalt psychology is that the mind forms a global whole with self-organizing tendencies.” Wikipedia
SLIDE 6
- S. Ludi/R. Kuehl
- p. 6
R I T
Software Engineering
R.I.T
Gödel Escher Bach: An Eternal Golden Braid
SLIDE 7
- S. Ludi/R. Kuehl
- p. 7
R I T
Software Engineering
R.I.T
- M. C. Escher (1898-1972)
SLIDE 8
- S. Ludi/R. Kuehl
- p. 8
R I T
Software Engineering
R.I.T
Reversing Staircase Hering Illusion
SLIDE 9
- S. Ludi/R. Kuehl
- p. 9
R I T
Software Engineering
R.I.T
Bongard Problems
What are the pattern rule differences between the left and right columns?
A Bongard problem is a kind of puzzle invented by the Russian computer scientist Mikhail Moiseevich Bongard, probably in the mid-1960s.
SLIDE 10
- S. Ludi/R. Kuehl
- p. 10
R I T
Software Engineering
R.I.T
Gestalt perception principles are useful to guide the placement and organization of screen elements; e.g., icons, structure menu items
Grouping
Proximity Similarity Common Fate Closure Good Continuity Area Symmetry Surroundedness Prägnanz
SLIDE 11
- S. Ludi/R. Kuehl
- p. 11
R I T
Software Engineering
R.I.T
Proximity Principle – Objects that are close to each other will be seen as belonging together
Gestalt Principles of Perception
Equidistant Horizontal Proximity Vertical Proximity
SLIDE 12
- S. Ludi/R. Kuehl
- p. 12
R I T
Software Engineering
R.I.T
Proximity - Adobe PhotoShop Preferences Dialog
Gestalt Principles of Perception
SLIDE 13
- S. Ludi/R. Kuehl
- p. 13
R I T
Software Engineering
R.I.T
Similarity Principle – Objects that have similar visual characteristics, such as size, shape or color will be seen as a group and therefore related
Columns of Similar Objects
Gestalt Principles of Perception
SLIDE 14
- S. Ludi/R. Kuehl
- p. 14
R I T
Software Engineering
R.I.T
Gestalt Principles of Perception
Common Fate Principle – Objects that move together (beginning, direction, end) are seen as related
Unaligned Drop-Down Menus Aligned Drop-Down Menus
OXOOXOXXXOO O O X XX O X O OX O
(Similarity) (Common fate)
SLIDE 15
- S. Ludi/R. Kuehl
- p. 15
R I T
Software Engineering
R.I.T
Common Fate Metaphor
SLIDE 16
- S. Ludi/R. Kuehl
- p. 16
R I T
Software Engineering
R.I.T
Closure Principle – We tend to see things as complete objects even though there may be gaps in their shape Good Continuity Principle – We tend to see things as smooth, continuous representations; e.g., tendency to perceive a line continuing its established direction
Gestalt Principles of Perception
SLIDE 17
- S. Ludi/R. Kuehl
- p. 17
R I T
Software Engineering
R.I.T
The Area Principle – Objects with small area tend to be seen as the figure, not the (back)ground (also called the smallness principle)
Gestalt Principles of Perception
SLIDE 18
- S. Ludi/R. Kuehl
- p. 18
R I T
Software Engineering
R.I.T
Surroundedness Principle – An area that is surrounded will be seen as the figure and the area that surrounds will be seen as the ground
Gestalt Principles of Perception
SLIDE 19
- S. Ludi/R. Kuehl
- p. 19
R I T
Software Engineering
R.I.T
Prägnanz Principle – we tend to order our experience in a manner that is regular, orderly, symmetric, and simple
An overarching principle evolved from the combination and interaction of the other principles Avoid conflicts of principles
Gestalt Principles of Perception
Similarity vs. common fate or surroundedness perception
SLIDE 20
- S. Ludi/R. Kuehl
- p. 20
R I T
Software Engineering
R.I.T
Visual stimulus via contrast – we perceive visual differences of an object before its meaning
1 3 5 7 2 4 6 8 7 5 3 1 4 6 6 2
Visual variables – visual dimensions of perception
Selective – single value of the variable can be distinguished in the visual field – locate at a glance
Contrast
Bertin, Graphics and Graphics Information Processing, 1989
SLIDE 21
- S. Ludi/R. Kuehl
- p. 21
R I T
Software Engineering
R.I.T
Find all letters on the left Find all red letters Find all K’s Easiest, hardest?
Contrast
SLIDE 22
- S. Ludi/R. Kuehl
- p. 22
R I T
Software Engineering
R.I.T
Choose appropriate visual variables Use as much range as possible (e.g., small to large) Variable values that make distinctions obvious Multiple variable reinforcement; e.g., bold and color Use the squint test
Contrast in Design
SLIDE 23
- S. Ludi/R. Kuehl
- p. 23
R I T
Software Engineering