Order, order! Use a story layout for improved UX

Let me tell you an annoying story about people

We’re so predictable! Damn! I wish I could be the exception but I can’t, we’re just programmed a certain way. One of those ancient genetic carry-ons is that we all love stories, it’s in our culture and they’re the best way to keep us engaged - hence Netflix exists.

People process information faster when it’s in a story form

Stories help us to do a few specific things really well:

  • They grab and hold attention

  • They help us to store information

  • We understand the format intuitively - there’s a beginning, middle and an end

  • They help us to makes leaps in assumptions


How to change a web application into a story

Don’t worry, the advice here isn’t to begin writing novels. We can take that knowledge and use it to adjust the layout of applications to fit a human preference that we can’t fight.

Examples of how this can help with web applications:

1. structuring page content with a beginning, middle and end will help people follow the page

2. using text with story style wording helps people follow the page flow

Step 01

Squish everything introductory to the top of the page

Look through your content and try find anything that resembles an introduction, background information or a first logical step and bring that to the top left of your page:

Examples of good headings

  • ‘Before you begin’

  • ‘Useful guides to help you get started’

  • ‘Step 1 - Search for a location’

  • ‘Introduction to buying a house’

This has a second benefit of interrupting a user’s fast/intuitive thinking process and brings it to a halt saying “you need to concentrate now”. This will shift the user into the slower, more focussed mindset and make sure that they start paying attention to what they’re about to have to focus on.


Step 02

Group the core content into the centre of the screen

Another key trait of humans is that we search for patterns and relationships with what we’re looking at. If we group items together we will believe that they are related and part of the same action. We also tend to focus our attention on what we see with our central vision, (things directly in front of us) and use peripheral vision to prevent surprise tiger attacks/get distracted by advertising (depending on your current situation).

Examples of good middle story content

  • ‘Please check the details here are correct’

  • ‘Use the map to locate the property of interest’

  • ‘Step 2 - Fill out this application form’

Step 03

Tie up the love story, don’t leave anyone hanging

Part of the story mentality is always needing to consume more, understand the next steps in the process or be told ‘The End’ otherwise we panic! Have you ever been to the cinema and the end credits appear before you feel like the movie ended - argh?!

Examples of how to end a web page romance

  • All save, cancel, send and submit final actions should be placed bottom right of the screen

  • Provide wording such as ‘And finally..’ to make it really clear the user is about to finish

  • Work out what the most useful (in the eyes of the user) next steps could be and supply them as clear buttons, for example ‘What to learn more?’, ‘Ready to book a test drive?‘ or ‘want to ask us a question?’

  • Provide a thank you page, or success popup/animation with visual excitement, for example “ ‘Congratulations, you submitted your CV!’ or ‘Well done, that’s all finished and submitted’

For example..


I want to know more!

If you're interested in understanding the concepts that drive this approach there are many, many other resources that build upon this. I recommend googling ‘Explicit instruction models’ or reading ‘Thinking fast and slow’ as they both end up creating webpages with a similar flow but back it up with different methods! Or simply get in touch and ask a question!