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
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.
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’
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’
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!