Patterns and Perception – with relation to Email Design

Patterns and Perception – with relation to Email Design

This is a quick recap of a presentation that I recently gave to my design team at Newsweaver on how we can start integrating UX techniques and theories in email design..

 

Gestalt Theory – The whole is other than the sum of the parts

Law of Closure — The mind may experience elements it does not perceive through sensation, in order to complete a regular figure (that is, to increase regularity).

Law of Similarity — The mind groups similar elements into collective entities or totalities. This similarity might depend on relationships of form, color, size, or brightness.

Law of Proximity — Spatial or temporal proximity of elements may induce the mind to perceive a collective or totality.

Law of Symmetry – Symmetrical images are perceived collectively, even in spite of distance.

Law of Continuity – The mind continues visual, auditory, and kinetic patterns.

Law of Common Fate – Elements with the same moving direction are perceived as a collective or unit.

Law of Prägnanz –  This law suggests that in perceiving a visual field, some objects take a prominent role (the figures) while others recede into the background (the ground).

 

Law of proximity

When we work with a two or three column article component our mind automatically groups the articles together as they are in direct proximity with each other.
The same can be said for social media icons, useful links etc.

 

Law of Similarity

We group together objects that we perceive as similar be that through font size, colour, shape or brightness.
In this example our eye automatically groups the three green boxes on the right together.

 

Gutenberg Diagram

How this translates to email can be seen below.

  • Logo is in the primary optical area
  • Issue volume / date are win the strong fallow
  • Articles are in the weak fallow
  • TOC and side article are in the terminal

 

F Shaped Pattern

The F pattern’s implications for Web design are clear and show the importance of following the guidelines for writing for the Web instead of repurposing print content:

  • Users won’t read your text thoroughly in a word-by-word manner. Exhaustive reading is rare, especially when prospective customers are conducting their initial research to compile a shortlist of vendors. Yes, some people will read more, but most won’t.
  • The first two paragraphs must state the most important information. There’s some hope that users will actually read this material, though they’ll probably read more of the first paragraph than the second.

Start subheads, paragraphs, and bullet points with information-carrying words that users will notice when scanning down the left side of your content in the final stem of their F-behavior. They’ll read the third word on a line much less often than the first two words.

 

Things to note

These patterns are based largely on text with little to no hierarchy.

Having a well established typographic hierarchy and strong calls to action can all affect the outcomes.

 

Links

https://medium.com/user-experience-3/the-gutenberg-diagram-in-web-design-e5347c172627http://www.upsidelearning.com/blog/index.php/2010/11/17/digital-instructional-media-design-101-principles-of-gestalt-psychology/http://designmodo.com/use-gestalt-laws-to-improve-your-ux/http://www.creativebloq.com/netmag/why-people-focus-right-hand-side-design-3146267http://www.nngroup.com/articles/f-shaped-pattern-reading-web-content/http://www.vanseodesign.com/web-design/3-design-layouts/http://iampaddy.com/lifebelow600/http://www.webcredible.com/blog-reports/web-usability/online-behaviour.shtmlhttp://www.whatcounts.com/2012/01/gestalt-principles-of-email-design-similarity/http://graphicdesign.spokanefalls.edu/tutorials/process/gestaltprinciples/gestaltprinc.htmhttp://facweb.cs.depaul.edu/sgrais/gestalt_principles.htmhttp://uxmyths.com/post/654047943/myth-people-dont-scrollhttp://www.smashingmagazine.com/2014/03/28/design-principles-visual-perception-and-the-principles-of-gestalt/

No Comments

Sorry, the comment form is closed at this time.