Grouping
description
Transcript of Grouping
![Page 1: Grouping](https://reader035.fdocuments.in/reader035/viewer/2022070500/568168a6550346895ddf41e6/html5/thumbnails/1.jpg)
GROUPING Organizing Information & Gestalt Principles of Perception
Mostly from Heim Chapter 6.6 and usability.gov
![Page 2: Grouping](https://reader035.fdocuments.in/reader035/viewer/2022070500/568168a6550346895ddf41e6/html5/thumbnails/2.jpg)
Learning Outcomes• When and where is grouping critical in UI design?
• What techniques can be used to sort things into groups?
• How can you visualize the groups?
• What visual clues can you use to indicate things belong together or apart?
2
![Page 3: Grouping](https://reader035.fdocuments.in/reader035/viewer/2022070500/568168a6550346895ddf41e6/html5/thumbnails/3.jpg)
Information Architecture• Recap from Conceptual design (Lecture 8)
• If you have lots and lots of things to organize into a structure how can you do it?
• Hierarchy
• Network
• Tree
3
![Page 4: Grouping](https://reader035.fdocuments.in/reader035/viewer/2022070500/568168a6550346895ddf41e6/html5/thumbnails/4.jpg)
Card sorting• Card sorting is one of the most
effective ways to group things.
• Although there are software tools moving physical things around is easier! (and probably more effective)
• http://www.usability.gov/methods/design_site/cardsort.html
4
![Page 5: Grouping](https://reader035.fdocuments.in/reader035/viewer/2022070500/568168a6550346895ddf41e6/html5/thumbnails/5.jpg)
Site Map• The sort translates into
• Menu structure • Site map
• http://www.usability.gov/methods/design_site/define.html
5
![Page 6: Grouping](https://reader035.fdocuments.in/reader035/viewer/2022070500/568168a6550346895ddf41e6/html5/thumbnails/6.jpg)
Grouping on a screen• Low-level principles - used to
make decisions about specific screen controls, menus and layouts
• Use visual cues to support the logical structure of the interface
6
![Page 7: Grouping](https://reader035.fdocuments.in/reader035/viewer/2022070500/568168a6550346895ddf41e6/html5/thumbnails/7.jpg)
Gestalt Principles of Perception• Gestalt psychology strives to
explain the factors involved in the way we group things
• At the heart of Gestalt psychology is the idea that we strive to find the simplest solutions to incomplete visual information (Prägnanz)
7
Figure-Ground: Basic premise
We perceive our environment by
differentiating between objects and
their backgrounds
![Page 8: Grouping](https://reader035.fdocuments.in/reader035/viewer/2022070500/568168a6550346895ddf41e6/html5/thumbnails/8.jpg)
Gestalt Principles of Perception• Proximity • Similarity • Common Fate• Closure• Good Continuity • Area• Symmetry• Surroundedness• Prägnanz
8
![Page 9: Grouping](https://reader035.fdocuments.in/reader035/viewer/2022070500/568168a6550346895ddf41e6/html5/thumbnails/9.jpg)
Gestalt Principles of Perception• Proximity Principle – Objects that are close to each
other will be seen as belonging together
9
Equidistant Horizontal Proximity Vertical Proximity
![Page 10: Grouping](https://reader035.fdocuments.in/reader035/viewer/2022070500/568168a6550346895ddf41e6/html5/thumbnails/10.jpg)
Gestalt Principles of Perception• Proximity - Adobe PhotoShop Preferences Dialog
10
![Page 11: Grouping](https://reader035.fdocuments.in/reader035/viewer/2022070500/568168a6550346895ddf41e6/html5/thumbnails/11.jpg)
1-11
Half time entertainment • http://www.nzherald.co.nz/business/news/article.cfm?c_id
=3&objectid=11189192
• Online news papers circa 1981
![Page 12: Grouping](https://reader035.fdocuments.in/reader035/viewer/2022070500/568168a6550346895ddf41e6/html5/thumbnails/12.jpg)
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
Rows of Similar Objects Columns of Similar Objects Grouped Columns
12
![Page 13: Grouping](https://reader035.fdocuments.in/reader035/viewer/2022070500/568168a6550346895ddf41e6/html5/thumbnails/13.jpg)
Gestalt Principles of Perception• Property Pane from Macromedia’s Dreamweaver
• Our eyes pick up all of the text boxes because of the strong blue squares and the white areas that they have in common
13
![Page 14: Grouping](https://reader035.fdocuments.in/reader035/viewer/2022070500/568168a6550346895ddf41e6/html5/thumbnails/14.jpg)
Gestalt Principles of Perception
• Common Fate Principle – Objects that move together are seen as related
Unaligned Drop-Down Menus Aligned Drop-Down Menus
14
![Page 15: Grouping](https://reader035.fdocuments.in/reader035/viewer/2022070500/568168a6550346895ddf41e6/html5/thumbnails/15.jpg)
Gestalt Principles of Perception• Closure Principle – We tend to see things as
complete objects even though there may be gaps in the shape of the objects
][ ][ ][
[ ] [ ] [ ] [
15
![Page 16: Grouping](https://reader035.fdocuments.in/reader035/viewer/2022070500/568168a6550346895ddf41e6/html5/thumbnails/16.jpg)
Gestalt Principles of Perception• Good Continuity Principle – We tend to see things
as smooth, continuous representations rather than abrupt changes
16
![Page 17: Grouping](https://reader035.fdocuments.in/reader035/viewer/2022070500/568168a6550346895ddf41e6/html5/thumbnails/17.jpg)
Gestalt Principles of Perception• The Area Principle – Objects with small area tend to
be seen as the figure, not the ground (also called the smallness principle)
17
![Page 18: Grouping](https://reader035.fdocuments.in/reader035/viewer/2022070500/568168a6550346895ddf41e6/html5/thumbnails/18.jpg)
Gestalt Principles of Perception• Symmetry Principle – Symmetrical areas tend to be
seen as complete figures that form around their middle
Translation Reflection Rotation
18
![Page 19: Grouping](https://reader035.fdocuments.in/reader035/viewer/2022070500/568168a6550346895ddf41e6/html5/thumbnails/19.jpg)
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
19
![Page 20: Grouping](https://reader035.fdocuments.in/reader035/viewer/2022070500/568168a6550346895ddf41e6/html5/thumbnails/20.jpg)
Gestalt Principles of Perception• Prägnanz Principle – We tend to perceive things
based on the simplest and most stable or complete interpretation (the literal translation from German is precise).
Visual Conflict with Common Fate Visual Conflict with Surroundedness
20
![Page 21: Grouping](https://reader035.fdocuments.in/reader035/viewer/2022070500/568168a6550346895ddf41e6/html5/thumbnails/21.jpg)
Lines and borders• Are immediate visual clues to grouping
• Lines, may be lines or changes in background colour
• White space also has the same effect
• More on this next lecture
21
![Page 22: Grouping](https://reader035.fdocuments.in/reader035/viewer/2022070500/568168a6550346895ddf41e6/html5/thumbnails/22.jpg)
Summary• When and where is grouping critical in UI design?
• Grouping happens at many levels and places• Menus• Sitemaps• Pages
• What techniques can be used to sort things into groups?• Card sorts
• How can you visualize the groups?• Trees and hierarchy charts
22
![Page 23: Grouping](https://reader035.fdocuments.in/reader035/viewer/2022070500/568168a6550346895ddf41e6/html5/thumbnails/23.jpg)
Summary• What visual clues can you use to indicate things belong together or
apart?• The Gestalt Principles of Perception:
• Proximity • Similarity • Common Fate• Closure• Good Continuity • Area• Symmetry• Surroundedness• Prägnanz
• Borders and Lines
• Apply this in your assignment
23