Page layout is a tricky number in the days of multiple devices and responsive design. You have to make a lot of decisions about where you place text, how you style it and how integrate visual content into the flow of your design. It’s not just a question of visual impact but also the effect your layout has on UX and the journey a user takes along the page and website as a whole.
Users are more impatient than ever which means you have to work harder to direct visitors where you want and inspire the actions your client depends on. It starts with the very basics of layout design and reapplying them to user experience for the web – so we’re going to start with an introduction to the elements of page layout and how they impact UX. And we’ll be back in about a week’s time to look at specific elements on the page and how to maximize UX with layout design.
Browse, Search or Discover?
When a user lands on your page they will have some sort of goal in mind and the most basic three are browse, search and discover. Browsing is when a user simply looks at what products or services are on offer – just to see what’s available or get ideas. Searchers on the other hand have a specific product in mind, while discovery is when a user stumbles across something else of interest (which they weren’t originally looking for).
Each of these users has different needs from your layout designs. A browser is quite happy to skip over bits of the page as they casually look about, so it’s important you make things easy to scan, avoid overcrowding the page and use eye-catching visuals to make sure they stop at the right places.
Searchers have a very different tracking behavior from browsers; they know what they’re looking for and they’re more willing to search for it. This doesn’t mean you can neglect them and assume they’ll put in the work to find content though. Instead you need to create a highly structured layout with lots of visual repetition. Searchers will often skip images so your visual breakpoints are normally headings, descriptions or features.
Discovery happens in different ways, depending on the type of website you are designing. An eCommerce site should probably suggest similar or related products to people as they browse or search. While content sites like YouTube and Reddit do a very similar thing by suggesting trending or related content.
Reading Patterns & Visual Hierarchy
No mater how much sweat and tears you put into your design and all its content, users in the real world only scan the page and try to pick out the important bits. Which is why you need to make at as easy as possible to differentiate the vital parts of any page with visual hierarchy.
There are two basic reading (or scanning) patterns when it comes to the web. The typical Z-pattern is most people’s way of scanning large chunks of text and columns – especially without any headings, images or break points.
Needless to say, most of this content is missed in the diagonal and users quickly find themselves at the bottom of a section or page, looking for somewhere else to go. We can improve this by adding headlines, a single column with smaller sections and subheadings. Not only does this give your content more visual impact at a glance, it gives users breakpoints which they will naturally follow to scan the page – this time following the F-pattern:
More content is absorbed this way because users stop at each heading to get a taste of what’s coming and decide whether to read more before they move on. This use of typography and other visual breakpoints creates a visual hierarchy, which makes the page easier to scan and digest – but also allows you grab user attention for important elements.
Putting It On The Page
Before you start designing individual pages it’s a good idea to get your framework sorted first. Start with elements that feature on every page – namely the header and footer – and then move on to any elements that appear on most or many pages – a sidebar that fits on every page except the homepage, for example.
With your framework sorted you can start thinking about individual pages and your key elements are the fold, headlines and images. The fold has undergone a transformation in the age of mobile devices and users now expect to scroll – which means you don’t have to cram content above the fold, as long as you give them a compelling reason to move down the page.
Images play a functional role in page layout as they break up chunks of text and lead the user’s eye across the flow of a page. But they also come with a number of psychological factors which you can use to direct users in the right direction. Images featuring people are the most effective way to establish an emotional connection and the human eyes are a powerful thing. Subjects in an image can direct users to parts of the page by simply looking in that direction, while making eye contact with a user can have a very different effect for charity sites or other campaigns.
The next big player in visual impact is the headings you use to break up sections of a page. Aside from breaking up the visual layout, large text with plenty of contrast tells people where to stop and scan the start of a new section or chunk of information. If you have a lot of content to work with then you need to take your visual hierarchy a step further by creating sections with structured, visual repetition and use subheadings to offer more breakpoints.
The Axis Of Interaction
The Axis of Interaction is the imaginary line your eyes follow as they scan a page. Not only does your design look sloppy if your elements don’t line up perfectly, but the Axis of Interaction can also determine how easy it is to find important elements on the page.
As a general rule you want important elements like buttons as close to the Axis of Interaction as possible. Which makes sense because more people will see important elements if you place them in their natural path of vision. Following this principle, buttons are generally more effective if you place them at the bottom left of another element. However you can deviate from this principle by using color to give your buttons a visual impact away from the Axis of Interaction.
Next up
We’ll be back with a deeper look at layout from a UX perspective next week with a focus on buttons, calls to action, contact forms and other essential elements of the conversion process.
