During the design stage, the structure, navigation, flow and Information Architecture is defined.
Information Architecture
How a website is structured and content is organised and where it lives, improving features and functionality, ensuring the user can access what they want with ease. IA is the skeleton and site map for all websites. It influences the top and sub navigation, impacting user experience and flow.
User Flow
Determines how the user moves through the architecture, keeping it as friction free as possible. Defining the top five critical flows ensures the different scenarios of landing on a specific page are considered. Before design, screen state positioning needs to be established, making sure the main flow sequence meets goals and objectives.
Navigation
There are two types of navigation to consider:
- Global: allowing the user to travel to any section within the website
- Local: allowing the user to travel to any sub-section within that local area Both global and local can be displayed vertically or horizontally, determined by device and nav categories.
Flow Diagram
A flowchart visualises the steps a user takes to complete a task or achieve a goal. Identifying and reflecting on how users navigate through a website will help meet their needs more efficiently. Defining high-level flow, addressing issues and goals identified in customer journey maps.
Design patterns, principles, interactions and navigation
Design principles
Proven solutions ensuring the product’s purpose and function is clear and includes:
- Perceivability - less time figuring it out
- Predictability - time is important, tell me how long it’s going to take
- Affordances - make it obvious
- Conventions - don’t reinvent the wheel
- Constraints - keep the user on track
- Feedback and forgiveness - help or prompt the user to reduce errors
- All of these allow users to flow through the website more effectively.
Design patterns
Bringing design principles to life with:
- Chunking – ensuring data or forms are easier to read
- Alignment - bringing order to a page
- Label alignment - placement for field copy
- Visual hierarchy - prioritise what is more important
- Process indicators – where the user is within the process, making software more perceivable and predictable.
Mobile
What is being designed? Is it a responsive or mobile specific website or native app? Once determined, application type needs to be specified as either Utility, Process, Consumption or Commerce. This will guide what navigation is used and how to display content. Positioning and button sizes on mobile is crucial to a successful interface. KEY FACT: 49% of users use one hand and 75% use their thumb.
