Description

• • The aesthetic-usability effect
  • Visual Hierarchy
  • Gestalt Principles
  • Fitt's law
  • Lists
  • Writing & Readability
  • User scan content
  • F-shaped Scanning Pattern (& reverse F-pattern)
  • Designing for Long Waits in Applications
  • Border radiuses
  • Typography
  • Dark theme

The aesthetic-usability effect

Source:

• https://www.nngroup.com/articles/aesthetic-usability-effect/
• https://www.nngroup.com/articles/first-impressions-human-automaticity/

Idea:

• The aesthetic-usability effect refers to users’ tendency to perceive attractive products as more usable. People tend to believe that things that look better will work better — even if they aren’t actually more effective or efficient.
• According to research by Gitte Lindgaard and her colleagues, a decision on aesthetics is made as early as 50 milliseconds into visiting a site, and rarely changes if you give people more time.
• According to BJ Fogg’s prominence-interpretation theory, the more prominent an element is on a page, the higher its impact will be on the overall credibility of the site.

Visual Hierarchy

Sources

• https://www.nngroup.com/articles/visual-hierarchy-ux-definition/

Ideas:

• Squint or apply a slight blur to the design to get an idea of the conveyed groupings and hierarchy. This technique highlights what is emphasized in the design and uncovers the underlying hierarchy.
• If varying whitespace alone is not enough of a visual cue to create hierarchy, add extra elements like borders or backgrounds. These additional elements can create visual clutter, so use them sparingly.

Gestalt Principles

Fitt's law

Source:

• https://www.nngroup.com/articles/fitts-law/

Ideas:

• The bigger the distance to the target, the longer it will take for the pointer to move to it. In other words, closer targets are faster to acquire.
• The larger the target, the shorter the movement time to it. In other words, bigger targets are better.
• Don’t place targets too close to each other (people will accidentally overshoot)
• Invisible padding in not enough (people will think there is not padding and just move the mouse more)

Lists

Source:

• https://www.nngroup.com/articles/presenting-bulleted-lists/

Ideas:

•  Bulleted lists better than inline listing
  • people don’t mind vertical scrolling because they can scan content easily
•  Items in a bullet list should ideally have the same length
•  Use numbered lists only when the order is needed
  • users can be confused the items for steps
•  Use same phrasing/same sentence structure in list items
•  Avoid using the same word at the beginning of list items
•  The introduction in the list has to have clear meaning

Writing & Readability

Sources:

• https://www.nngroup.com/articles/how-users-read-on-the-web/
• https://www.nngroup.com/articles/chunking/
• https://www.nngroup.com/articles/why-does-design-look-good/

Ideas:

•  There should be only 1 idea per paragraph.
•  Always start with the conclusion of the paragraph
• If you want users to remember as much as they can, separate info in meaningful chunks
• Short lines of text (around 50–75 characters) work best for readability
• Headings and subheadings should have clear contrast with the rest of the text (bolder, larger, etc.)
• Use bold, italic or underline for important words or text parts.

• Extra roomy leading makes the design feel airy and easy (2-6 px greater than the font size)

User scan content

Sources:

• https://www.nngroup.com/articles/how-little-do-users-read/
• https://www.nngroup.com/articles/layer-cake-pattern-scanning/
•  

Ideas:

• Users spend 4.4 seconds more for each additional 100 words
  • Having this in mind, you can assume users read only 18% of a page
  • Users read half the information only on those pages with 111 words or less.
• People scan headings and subheadings and skip the normal text below if they don't find it relevant.

F-shaped Scanning Pattern (& reverse F-pattern)

Sources:

https://www.nngroup.com/articles/f-shaped-pattern-reading-web-content/

https://www.nngroup.com/articles/website-reading/

Ideas:

• First lines of text on a page receive more gazes than subsequent lines of text on the same page.

• First few words on the left of each line of text receive more fixations than subsequent words on the same line.

• Antidotes to the F-Shaped Pattern

  •  

  Include the most important points in the first two paragraphs on the page.

  •  

  Special headings/subheadings

  •  

  Start headings and subheadings with the works carrying most info

• Thus, left alignment supports easy scanning

Designing for Long Waits in Applications

Sources:

• https://www.nngroup.com/videos/long-waits-in-applications-guidelines/

Ideas:

• Indicate progress completed and time or steps remaining
• Contextualize success dialog messages with additional details

Border radiuses

Sources:

• https://www.researchgate.net/publication/316666859_Corner_salience_varies_linearly_with_corner_angle_during_flicker-augmented_contrast_a_general_principle_of_corner_perception_based_on_Vasarely's_artworks
• https://www.30secondsofcode.org/css/s/nested-border-radius/

Ideas:

• A bigger border-radius makes the design feel friendlier. See the next two bullet items related to this.
  • It's scientifically proved that the perceived brightness of corners is linearly related to the sharpness of corner angle, so basically the sharper an angle is, the brighter it appears to the human eye.
  • The smaller the corner angle of an object (the shaper, more pointy), the more neural spikes it elicits in the neurons of the visual system. Hence, rounder shapes are more comfortable for the brain and consume less energy to grasp.
  • People may choose sharp corners in an attempt to make certain elements feel more obvious/ more important. Thing is, when everything has sharp corners, this effect is lost.
• The border radius of the outer element should be equal to the sum of the border radius of the inner element and the distance between the two elements. This can be mathematically expressed as innerRadius + distance = outerRadius or more tersely R1 + D = R2 .

Typography

Ideas:

Dark theme

Sources: https://www.marcandrew.me/ui-ux-micro-tips-volume-eleven/

Ideas:

• Lower the text contrast when working with Dark themes.
• The closer an element is to you (and in the real world, closer to a light source), the lighter that element should be against the background to communicate depth well.