Menu

Layout Design

Layout is one of the three parts of interface design, alongside font selection and colour selection. It is the way the elements of a screen — headings, menus, buttons, icons and text — are arranged and spaced.

Consistency and grouping

A consistent layout means the same elements sit in the same places on every page, so once you have learned one page you can use every other page. Keep the navigation in the same spot on each page and use icons that clearly show what they do, such as a magnifying glass for search. Group related items together under headings with spacing between the groups, so links about a club's fixtures sit in one block instead of being scattered across the screen.

Prominent positions and whitespace

Put important elements in the positions users already expect: a logo in the top-left, search in the top-right, the main menu across the top. Important content and buttons go in prominent positions, such as the top of the page or the centre, rather than being buried further down. Users then find things quickly instead of hunting around.

Whitespace is the empty space between elements. Using it well stops a screen looking overloaded and stops items overlapping or being crammed together, which makes the content much easier to read.

Why it matters

A clear, consistent layout helps more people use a system without asking for help. For example, on a school homework portal, a pupil who is not confident online can still find the same submit work button in the same place on every page. That is why good layout improves accessibility as well as usability — it removes barriers for users who are less confident online or who are viewing a small screen.

Practise this