Creating consistent page layouts (BP)
Overview
Having a consistent interface through a space or key areas of your digital workplace helps users know where to look for information and navigate with ease. Users eyes get trained to look left or right, top or bottom to find specific information. By catering to these learned behaviors, you can provide an intuitive experience that helps users find what they're looking for faster. It is important to keep the same type of Widgets (e.g. Members, Search Box, Links widgets) in the same grid and layout when planning your Page structures and laying out key Page templates. Consistency for the win!
Recommendations
Here are some recommendations for creating consistent page layouts that enhance the user experience:
- Use the built-in, horizontal, secondary navigation for all spaces: This layout is already an expectation for users as it is seen consistently in many websites.
- Use clear, intuitive language: Avoid jargon or unconventional project names in navigation, buttons, or links. The user should know exactly where they are going once they click the link. E.g., "Make a request" vs. "Request a collateral update".
- Group types of functions (widgets) you expect to see consistently through the space: Use the same area on a page for each function. (e.g., all links are always in the very right column, giving an expectation of leaving the page. See example below.)
- CTAs: Follow a set convention for the style of CTAs you will be using for your pages (eg. solid color text button only, or color bar only); ensure they are always placed in the same spot on each page. Do not use CTAs as navigation, or use too many on a page. Imagery is very distracting to the user, it makes navigation/page scanning very difficult and often, completely ignored — this phenomenon is called banner blindness, to the degree where the page becomes too cluttered and the user becomes frustrated and skips information.
- Members Widget: When adding widgets to a page, ensure that Members widgets are always positioned on the left or right side of your page; pick one side and stick to it.
- Links/Navigation widgets: Typically appear in the left column on each page.
- About this Area: Include a short “About this Area” widget on landing pages or solution homepages to provide context to your employees.
- Include an area for users to go if they can't find the information they are looking for and put it in the same spot on every page. (e.g., "Ask a question" under the "about this page" section of a knowledge base gives a user an easy way to reach the space owners if they can't find what they need using the navigation.)
- Always include widget titles so users can scan areas of information.
- Always add visual indicators to buttons/links to show that it is a button (i.e. an arrow icon).
- Always use the same colors for links/buttons, use a different color for one or two focused items.
- 380 views
- 0 previews
- 3 versions
- 0 comments
- 1 follower
- Updated By:
- Jesse Langstaff
- July 22, 2020
- Posted By:
- Ashley Pergolas
- June 13, 2019
- Versions:
- v.3
0 Comments