Gestalt theory and website design 1 The Gestalt
Gestalt theory and website design
1. The Gestalt laws 1. Similarity 2. Proximity 3. Symmetry 4. Good continuation 5. Common Fate 6. Closure
2. Why use Gestalt for web design? “Gestalt theory is simply a scientific foundation describing how the mind organizes visual data. The stronger the clarity of form, the better the design. ”- firstcoastcreative. net
2. Why use Gestalt for web design? 1. Usability: using white space to effectively distinguish between elements. 2. Easily scanned designs. 3. Accessibility: easier for those who are visually impaired to understand a page.
2. Why use Gestalt for web design? If you create a commercial site providing a service then you under a legal obligation to make your website accessible to those with disabilities (Disability Discrimination Act). Gestalt principles may have a role to play in ensuring greater accessibility.
3. Grouping An example of a website using various Gestalt laws…
3. Grouping Similarity/Proximity/Symmetry
3. Grouping Proximity/Similarity/ Good Continuation
3. Grouping Proximity/Good Continuation
3. Grouping: stating the obvious
3. Grouping: stating the obvious Immediately obvious to see which word applies to each radio button.
3. Grouping: stating the obvious Takes a second of thought to do the same with this un. Gestalt layout.
4. The blur test “One way to think about the function of Gestalt Principles is that they provide "low frequency" information that helps people to organize a web page even before the reader has processed the "high frequency" information of the actual text and details of the graphics on the web page. ” You can demonstrate this by blurring a screenshot of a web page. (From Jim Levin’s page at : http: //tepserver. ucsd. edu/~jlevin/gp/blurred/index. html)
4. The blur test Easy to differentiate different elements into groups without seeing detailed content
4. The blur test Easy to differentiate different elements into groups without seeing detailed content
4. The blur test Another example with a website you probably haven't seen before (unlike Amazon).
4. The blur test Another example with a website you probably haven't seen before (unlike Amazon).
4. The blur test In contrast, this page has almost no low frequency information
4. The blur test In contrast, this page has almost no low frequency information
4. The blur test Therefore, if a page is not easily decipherable when blurred (or when you squint your eyes) the implication is that it is probably not well designed.
5. Webpagesthatsuck. com - the title is pretty self explanatory! Almost all of the sites listed on Webpagesthatsuck. com as having bad navigation/confusing layout do not adhere to the Gestalt principles…
5. Webpagesthatsuck. com - Example 1 http: //www. legalinfosysinc. com
5. Webpagesthatsuck. com - Example 1 http: //www. legalinfosysinc. com Not that much clearer what is going on!
5. Webpagesthatsuck. com - Example 2 http: //www. squareneck. com
5. Webpagesthatsuck. com - Example 2 http: //www. squareneck. com
6. Designing with Gestalt “A visual presentation of information that does not take into account how readers process visuals and how readers perceptions and schemata interact can result in confusion and disunity” From Elements of Ethos in Web Design, V. Michele Damron, David Gillette, Dan Jones www. stc. org/confproceed/2000/PDFs/00035. PDF
6. Designing with Gestalt It is arguably not necessarily important to be conscious of the Gestalt laws when designing websites (or anything else) Quite often when designs look and feel‘right’ they naturally incorporate many of the elements of Gestalt theory…
6. Designing with Gestalt. . . however it might be worth bearing the Gestalt principles in mind!
7. References In case you are interested: http: //tepserver. ucsd. edu/~jlevin/gp/ www. webdesignfromscratch. com/grouping. cfm www. stc. org/confproceed/2000/PDFs/00035. PDF http: //www. firstcoastcreative. net/index. php? p=18 http: //www. digital-web. com/articles/principles_of_design http: //www. webpagesthatsuck. com
- Slides: 29
