Layout

Overview

Layout is the strategic placement and combination of content and UI patterns to achieve one specific goal (e.g to persuade or to inform). This section contains tips and things to consider (such as accessibility and navigation) when creating layouts.

Guidelines

Avoid gaps between elements that give the illusion that the page has ended when it really hasn’t

False bottoms are when your page gives the illusion that the page has come to an end somewhere in between sections where it really hasn't. This is usually caused by big horizontal empty spaces or horizontal lines.

sample of a false bottom

Design empty states for first-time users

When first time users try to start their tasks and all they are shown is a blank slate, questions might arise. Guide users through creating some content or display helpful and unobtrusive tips. Empty state are perfect opportunities for showing users what the next steps are.

sample of good empty state

Ensure the website header, footer, and navigation consistently comply with branding guidelines when appropriate

Header comprise of the SMU logo flushed to the left, optional secondary logo, navigation menu, social media icons along top right and a site search function.

sample of typical smu layout

Find opportunities to reduce the workload for the user

For example:

  • loading previously inputted information for address
  • automatic spell-checker, or
  • search suggestions

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

Make every click or tap bring the user closer to task completion

Every click should bring the user closer to completing the task, or to the content sought. Ensure that the path for any task is at reasonable length (not more than 3 to 5 clicks) by:

  • Exposing frequently used controls or actions
  • Consider direct manipulation on items (e.g. click text to edit, right-click to delete, etc.)

Make important clickable areas large and close by

Increase hit areas but remember to provide sufficient space between clickable elements to avoid hitting multiple or incorrect targets.

fitts law

Present visual hierarchy clearly

Use a combination of contrasts in weight, size, color, spacing, and alignment to create a visual hierarchy that guides the user to the most important elements.

sample of visual hierarchy

Put your most important information upfront

Let your content dictate your layout. What’s the important information in the page? What’s the most logical way to present this without overwhelming users?