These days, the number of things that humans accomplish through computer interfaces is growing exponentially. We need barely to think, ‘What’s the quickest way to get home? What song is playing right now? What’s the score?’ and we can retrieve the answer in an instant, at our fingertips. With access to a truly infinite amount of information on the web, and many options in which to process it, users are naturally drawn to sites that make data easily digestible. We rely on search engines, information visualizations, and filter functions to sift through the mess and locate specific points of data. In the past, websites were used as dumping grounds for information with little consideration of user needs. Today, though, we expect websites to deliver the fastest and simplest experience possible. As a result, it’s crucial for a website to be strategically and clearly organized to deliver an exceptional customer experience.
[Short on time? Scroll for the TL;DR.]
We were tasked with documenting the architecture of an existing insurance provider online portal. The portal is used by independent insurance agents to conduct their day to day business – generating quotes, editing policies, etc. However, as independent agents, the users are not limited to selling our client’s policies – they are free to choose which insurance providers to sell policies on behalf of, so long as it fits their customers (the policyholder’s) needs. Therefore, it is beneficial for our client to make the portal as easy to use as possible. The more intuitive the portal is, the more inclined an agent will be to sell a policy from our client vs another provider. Using our information architecture (IA) map, we identified agent pain points and provided recommendations for designing a positive portal experience.
To complete the map, we documented 3 main elements: navigation, action and content. We spent just over a week documenting every page, every link, and every PDF that agents can access on the portal. Every. Single. One. The final product weighed in at a hefty 48 pages.
Naturally, having spent so much time in the portal, we noticed a thing or two about the way it was built:
- Redundancy – we often found the exact same content in multiple subsections of the site. This made it difficult to determine the distinct purpose and functionality of each page (if it even existed). Not only that, redundancy also hinders a user from forming a mental map of the site, making it difficult to ‘re-find’ things and understand where each page truly belongs.
- Lack of hierarchy – rather than a systematic, hierarchical navigation scheme, most of the navigation throughout the portal was through individual text hyperlinks between pages. These links were scattered throughout each page, creating not only visual clutter, but also preventing users from forming a consistent navigation pattern. Instead of being trained to find data X through one consistent channel, the user was presented with 5 different options, none more logical than any of the others.
- Inconsistent taxonomy – navigation was often tricky when links with the same verbage led to different locations. A link that took us to X when we expected Y was confusing, and often resulted in multiple (and way too many) “Wait… where am I?” moments.
With these themes in mind, we emerged with three key takeaways for crafting information architecture.
- Do establish clear hierarchy – Ensure that the structure of the application is organized intuitively, that subpages are grouped under logical headers, and that it is easy for users to understand where they are on every page. Breadcrumbs are a helpful clue that show users both where they are and how to re-find their way should they want to revisit the page in the future.
- Do use consistent navigational patterns – teach your users how they should move throughout the site by keeping it as consistent as possible. Choose one scheme and stick to it- house navigation links on one section of the page (left bar, top bar, right box, etc.), and keep them there. This ensures that users will learn and trust that they can always look to that part of the page to navigate from. Use consistent fonts and sizes for headers and sub-headers to signal to users the relationship between pages. That which stays the same will fade away in the eye of the user but leave them with the confidence that they know where to look to find their way.
- Don’t clutter – simplicity is key. Balance the sometimes conflicting interests between giving users easy access to content, and maintaining a clear, consistent hierarchy. Quick links can be helpful, but too many can overwhelm a page, distract a user, and prevent him/her from learning how to utilize the full functionality of the application.
Pick conventions, stick to them, and go easy on the links…it’ll make it easier for your user to establish a navigation pattern, and prevent them from clicking around in circles. Ain’t nobody got time for that.