Group or position related/similar elements close to each other

Group or position related/similar elements close to each other

  • “Chunk” related or similar elements together by using consistent styling or proximity
  • Provide enough space between chunks
  • Order information logically
  • Avoid too much borders and dividers

use clear and relevant imagery

If there is a lot of content all over the place, it is easy for users to get overwhelmed. To counter this, practice a concept called “Chunking”. From the field of cognitive psychology, “chunking” is the practice of grouping/positioning related content to make it easier for users to process, understand, and remember it.

These are the two common methods to chunk elements together:

 

  • SIMILARITY
    • Apply consistent styling (color, font families, alignment, background) or icons to help user recognize elements in a same group
    • Alternatively, one may use the opposite - dissimilarity – to make elements stand out (e.g. ‘Sign up’ or ‘Subscribe’ buttons)
  • PROXIMITY
    • Place elements close to each other so that they will be perceived as a group
  • NEGATIVE SPACE
    • For identical chunks of information, adding consistent alternative strips can help users scan specific information easily

Things to avoid:

  • Lack of white space between chunks
    • Provide sufficient and consistent white space so as not to overwhelm users
  • Unnecessary borders and dividers
    • Borders compete for attention with real content. pages with lots of boxes sometimes may tend to look noisy or misaligned. Sometimes it is helpful to throw in a line here and there, but do consider alternative ways of defining visual relationships that are less taxing to attention and your content will come through.
  • Too many zig-zagging eye patterns
    • Reduce the amount of back-and-forth eye motions. Keep all complementary data within close distances.