The importance of user-flow in web design
About the author: Jon Dainton is the Online Support Manager here at Fasthosts. Jon and his team are experts in understanding website navigation behaviour and user flow. Within this article Jon explains what user-flow is, why it is important, and how you can incorporate it into your design process.
Welcome to our Insights article series brought to you by the Fasthosts employees. We’ve experts in a wide range of areas such as team management, web design, networking, and much more. We believe that by tapping into the expertise within our organisation we can bring you informative and helpful advice, tips, news and views.
User flow is a key process in website design that is often undervalued or ignored completely. User flow is simply the interaction your website visitors have with each page. How they navigate the site to either find the content they are looking for or be guided towards a call-to-action (making a purchase, contacting you, watching a video etc.) is all part of the user flow.
Behavioural psychology plays an important role in user flow and fortunately with thousands of websites being launched every day and improvements to analytics we have a wealth of information on how people naturally interact with web pages, and how this is different between desktop, tablet and mobile devices.
“You know you’re in trouble when you need a pop-up to explain how to use the website.”
Part of my role here at Fasthosts is the development of the Customer Support Site both for desktop and mobile. The aim of this site is to ensure customers find the information they need as quickly and accurately as possible. User flow plays a large part in the effectiveness of this site but user flow is not limited to support sites. User flow is relevant to ecommerce sites, portfolio sites, blogs, forums, in fact pretty much all websites.
The first step I take is to create a visual map of the site. This starts at the homepage and shows all the pages linking from that, and the pages linking from those and so on.
Example of a website map:
With this I then create “User Persona’s”. Typically I will create four fictional users who will each have different needs from the site and behaviours. I will then go through the site with each user type.
- Precise User – This user knows exactly what they want. For example this person may come to the Support Site looking for the tutorial on Outlook mailbox settings for an exchange mailbox and they know the search term to use to find the info.
- Return User – Comes into the site looking for something they have seen previously on your site. For example this user may come to the Support Site for the second time in the last 12 months searching for the domain renewal guide that they needed last year.
- Unsure User – They have an idea of what they are looking for but don’t know where to start. This person will come to the Support Site knowing their email isn’t sending but doesn’t know any technical terms and where to start looking to find the info to get their email working.
- Incorrect User – They think they know what they need but actually require something else. This user will come to the Support Site adamant their website problem lies with DNS but the fault is actually something else which they hadn’t considered.
It’s positioning things where people expect to see them.
As I go through the site with these users I’ll make notes of possible problem points and try to make the whole process of them finding the information they need as streamlined as possible. I’ll take into consideration; search boxes, categories, navigation bars, page consistency, wish lists, recommended articles, popular guides, educational notice boxes and more.
This website map will help me to position and structure the content and also what format that content should be. Does the guide need to be a video? Article? Downloadable PDF? Infographic?
You need to get your content right.
I often look to the BBC website for user flow inspiration. The BBC have hundreds of thousands of pages all of which they need to make easy to find for their users. They are the masters of website behaviour and have carried out in-depth research into this topic so if in doubt then it is always worth looking them for best practise.
The problem you have as a designer is that you can get sucked in to prioritising something that looks pretty over something functional.
A popular phrase within web design circles at the moment is the “mobile-first approach”. This is a fantastic idea as it limits the designer to focus on only the most vital information for each page. With only a few inches of screen retail space you need to be very selective in the content and call-to-action(s) for that page. It also makes the creator think of how the user navigates through the site in its most simple form.
Once you have that in place you can then expand out to iPad and eventually desktop size screens and add the extra content that the screen space can now cater for.
The final aspect of user flow I take into account is in research and development. Through split testing, ALPHA and BETA pages, quality assurance, and internal testing we ensure the site and web pages are effective and achieve what we wanted them to.