r i t
play

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


  1. Presentation Design Principles Grouping Contrast Proportion R.I.T S. Ludi/R. Kuehl p. 1 R I T Software Engineering

  2. Usability Presentation Design Framework Properties – color, size, intensity, metaphor, shape, … Navigation Object Object Object Object Text … Icon, Menu Object Object Image, Video Text … Icon, Menu Image, Video Presentation Layout Presentation Layout Object Object Object Object Grouping Grouping R.I.T S. Ludi/R. Kuehl p. 2 R I T Software Engineering

  3. Presentation Simplicity  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 R.I.T S. Ludi/R. Kuehl p. 3 R I T Software Engineering

  4. R.I.T S. Ludi/R. Kuehl p. 4 R I T Software Engineering

  5. 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 Rubin The viewer looks for the simplest solutions Face/Vase even when visually information is incomplete 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 R.I.T S. Ludi/R. Kuehl p. 5 R I T Software Engineering

  6. Gödel Escher Bach: An Eternal Golden Braid R.I.T S. Ludi/R. Kuehl p. 6 R I T Software Engineering

  7. M. C. Escher (1898-1972) R.I.T S. Ludi/R. Kuehl p. 7 R I T Software Engineering

  8. Reversing Staircase Hering Illusion R.I.T S. Ludi/R. Kuehl p. 8 R I T Software Engineering

  9. 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. R.I.T S. Ludi/R. Kuehl p. 9 R I T Software Engineering

  10. Grouping  Gestalt perception principles are useful to guide the placement and organization of screen elements; e.g., icons, structure menu items   Proximity Area   Similarity Symmetry   Common Fate Surroundedness   Closure Prägnanz  Good Continuity R.I.T S. Ludi/R. Kuehl p. 10 R I T Software Engineering

  11. Gestalt Principles of Perception  Proximity Principle – Objects that are close to each other will be seen as belonging together Equidistant Horizontal Proximity Vertical Proximity R.I.T S. Ludi/R. Kuehl p. 11 R I T Software Engineering

  12. Gestalt Principles of Perception  Proximity - Adobe PhotoShop Preferences Dialog R.I.T S. Ludi/R. Kuehl p. 12 R I T Software Engineering

  13. Gestalt Principles of Perception  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 R.I.T S. Ludi/R. Kuehl p. 13 R I T Software Engineering

  14. 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 O O X XX O OXOOXOXXXOO X O OX O (Similarity) (Common fate) R.I.T S. Ludi/R. Kuehl p. 14 R I T Software Engineering

  15. Common Fate Metaphor R.I.T S. Ludi/R. Kuehl p. 15 R I T Software Engineering

  16. Gestalt Principles of Perception  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 R.I.T S. Ludi/R. Kuehl p. 16 R I T Software Engineering

  17. Gestalt Principles of Perception  The Area Principle – Objects with small area tend to be seen as the figure , not the (back)ground (also called the smallness principle) R.I.T S. Ludi/R. Kuehl p. 17 R I T Software Engineering

  18. Gestalt Principles of Perception  Surroundedness Principle – An area that is surrounded will be seen as the figure and the area that surrounds will be seen as the ground R.I.T S. Ludi/R. Kuehl p. 18 R I T Software Engineering

  19. Gestalt Principles of Perception  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 Similarity vs. common fate or surroundedness perception R.I.T S. Ludi/R. Kuehl p. 19 R I T Software Engineering

  20. Contrast  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 Bertin, Graphics and Graphics Information Processing, 1989 R.I.T S. Ludi/R. Kuehl p. 20 R I T Software Engineering

  21. Contrast  Find all letters on the left  Find all red letters  Find all K’s  Easiest, hardest? R.I.T S. Ludi/R. Kuehl p. 21 R I T Software Engineering

  22. Contrast in Design  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 R.I.T S. Ludi/R. Kuehl p. 22 R I T Software Engineering

  23. Proportion  Proportion – relative size  E.g. – heading element hierarchy (this slide!)  Golden ratio – found in nature, pleasing visual proportions  = 1.618 R.I.T S. Ludi/R. Kuehl p. 23 R I T Software Engineering

Download Presentation
Download Policy: The content available on the website is offered to you 'AS IS' for your personal information and use only. It cannot be commercialized, licensed, or distributed on other websites without prior consent from the author. To download a presentation, simply click this link. If you encounter any difficulties during the download process, it's possible that the publisher has removed the file from their server.

Recommend


More recommend