Information Architecture and User Flow

INFORMATION ARCHITECTURE

  • This is obviously how the website is structured, and how the content is organised.

  • It influences the primary navigation - but may not influence all navigations and defines where content lives.

  • It has a massive impact on the users experience, but if its done well, as a user you’ll never notice the structure.

A lot of the content below has come from this article on Smashing Magazine

How to work out the correct structure

  • Follow conventions - you could for instance carry out a benchmarking process

  • Look at traffic data for a site if it exists already

  • Look at the search data for a site if it exists already

  • Define a hypothesis (define users needs and tasks they are trying to achieve) and first draft of the IA

  • Create a hierarchy with minimal sub-levels

  • Don’t use jargon

  • Carry out a card sort with real people (or scenario testing with a wireframe/prototype)

  • Keep refining it

Thinking about the design

  • Don’t solely rely on icons/images as a navigational tool

  • Use the design to create distinct visual differences between hierarchy levels

Why is good IA important?

  • Good IA should reduce the amount of information shown. If a user is given too much information/choice it causes cognitive deferral (make no decision)

  • A user will achieve their goals quicker and will keep them focused

  • By placing the information in context eg: a breadcrumb trail, the information is easier to analyse and understand

  • The user feel less frustrated, more in control – they won’t need to contact support

Advantage for Business

  • If you give your user a clear purpose, they remain engaged for longer – they stay on the website for longer – if they can’t see how to start their goal, they will leave within 10–20 seconds - and potentially go to a competitor

  • Chance of customer conversion is increased

  • Good IA means a reduction in duplication of information

  • Better ROI through efficient use of the platform

  • Cost of customer support is reduced

Search vs navigation

  • The stats are inconclusive about how much people use a search function. But it is used and you need to have both navigation and search on a site.
    Article here by nngroup.com

  • Make sure the search is well-defined and makes use of meta data

  • Consider using a mega-menu for a complex site with lots of categories and sub-categories, and a search function to locate specific information

_

USER FLOW

This is about how a person moves through the structure created. You need to consider that every user may have landed on the site at a different place, but each one of those pages needs to make sense to them – they need to know where they are, what they can do and what they can do next.

  • You can’t design for every single flow, pick the top 3-5 and design for that (Paradox of specificity: Design for a specific user/audience, and you will meet the requirements of the broader group)

  • It’s not about the number of screens, it’s about every single screen state - every single interaction

  • You need to understand the following before you design a screen:

    • Where it sits in the structure

    • What it’s sequence is in the main flows

    • Be conscious of the different screen states it will be in

Navigation

Good article here on Medium

–

Once you start looking at types of UX flows, it gets pretty confusing. There appears to be:

A flow chart (may also be called Users Goals?)

This is the sequence of steps & decisions that need to be taken to complete a workflow or process

It is at goal or story level

Tend to be mapped out using UML - Unified Modelling Language

Task flow

This is at action level. It is about performing a specific task, and is mapped in a linear fashion. All users will perform the task in the same way

Wire flow

This is component level. It charts pages designed as wire-frames (fidelity can vary greatly), in a simplified flow-like chart

User flow

A visual representation of the path a user can follow to achieve a goal, whilst using using app/website etc. There is free will involved, the user can take a variety of paths to achieve their goal (unlike a task flow)

Previous
Previous

Oh Wacom!

Next
Next

Taking notes