1 / 29

Gestalt theory and website design

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?.

fairly
Download Presentation

Gestalt theory and website design

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Gestalt theory and website design

  2. 1. The Gestalt laws • 1. Similarity • 2. Proximity • 3. Symmetry • 4. Good continuation • 5. Common Fate • 6. Closure

  3. 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

  4. 2. Why use Gestalt for web design? • Usability: using white space to effectively distinguish between elements. • Easily scanned designs. • Accessibility: easier for those who are visually impaired to understand a page.

  5. 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.

  6. 3. Grouping An example of a website using various Gestalt laws…

  7. 3. Grouping Similarity/Proximity/Symmetry

  8. 3. Grouping Proximity/Similarity/ Good Continuation

  9. 3. Grouping Proximity/Good Continuation

  10. 3. Grouping: stating the obvious

  11. 3. Grouping: stating the obvious Immediately obvious to see which word applies to each radio button.

  12. 3. Grouping: stating the obvious Takes a second of thought to do the same with this un-Gestalt layout.

  13. 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)

  14. 4. The blur test Easy to differentiate different elements into groups without seeing detailed content

  15. 4. The blur test Easy to differentiate different elements into groups without seeing detailed content

  16. 4. The blur test Another example with a website you probably haven't seen before (unlike Amazon).

  17. 4. The blur test Another example with a website you probably haven't seen before (unlike Amazon).

  18. 4. The blur test In contrast, this page has almost no low frequency information

  19. 4. The blur test In contrast, this page has almost no low frequency information

  20. 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.

  21. 5. Webpagesthatsuck.com 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…

  22. 5. Webpagesthatsuck.com - Example 1 http://www.legalinfosysinc.com

  23. 5. Webpagesthatsuck.com - Example 1 http://www.legalinfosysinc.com Not that much clearer what is going on!

  24. 5. Webpagesthatsuck.com - Example 2 http://www.squareneck.com

  25. 5. Webpagesthatsuck.com - Example 2 http://www.squareneck.com

  26. 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

  27. 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…

  28. 6. Designing with Gestalt ... however it might be worth bearing the Gestalt principles in mind!

  29. 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

More Related