Information Architecture

Goals of this post

  1. To define what Information Architecture (IA) is. 
  2. To define what tasks the Research Team can do in the context of IA. 
  3. To define the deliverables. 
  4. To create visibility of IA activities within UX team and beyond.

What is IA

Information architecture (IA) focuses on organizing, structuring, and labeling content in an effective and sustainable way. IA helps to understand how the pieces fit together to create the larger picture, how items relate to each other within the system.

The purpose of IA is to help users understand where they are, what they’ve found, what’s around, and what to expect. In other words, IA is an architecture of understanding. IA informs the content strategy through identifying word choice. IA informs UI and interaction design through taking parts in wireframing and prototyping.

The information architecture phase of any project is a transitional period that marks the end of the initial research phase.

Main components of IA:
  • Organization structures
  • Labeling system
  • Navigation system (main navigation, tabs, etc.)
  • Search system (example - search by name or tag, Smart Groups, and filters in HNConnect)
  • Content Strategy

How IA helps to improve user experience:

  • organizes content in findable and easily discoverable way,
  • allows users to complete tasks and reach goals in more efficient way,
  • reduces cognitive load (distractions, and # of options) for more focused and faster experience

Deliverables:

  • Pre-wireframe sketches
  • User Flows (diagrams of routes the users take to achieve a goal)
  • Sitemaps (tree diagrams of pages, screens, and functionality)
  • Navigation (logical ways users move through app or site)
  • Content Structure and Metadata (taxonomies, categorization, tags, controlled dictionary)

As you can see IA is a container for different practices and deliverables.

Let’s go through IA deliverables

Pre-wireframe sketches

UI sketching comes right after you’ve had that great app or website idea, and before building screen mockups in a wireframing tool. They are quick and dirty. There are no specifics of design or functionality in a UI sketch.

Tools: marker, pencil



User Flows (diagrams of routes the users take to achieve a goal)


User flow, or UX flow, is the path taken by a user to complete a task. The user flow takes them from their entry point through a set of steps towards a successful outcome and final action, such as purchasing a product. User flows are similar to a traditional flow chart, but they include visual interfaces or gestures.

Tools: Overflow, Sketch

Sitemaps (tree diagrams of pages, screens, and functionality)

Sitemaps are a hierarchical diagram showing the structure of a website or application. They are used by UX Designers and Information Architects to define the taxonomy through grouping of related content. They can be used as a reference point for functional specifications and wireframes.

Tools: Card Sorting (UserZoom), Overflow

Navigation (logical ways users move through app or site)

Navigation plays an integral role in how users interact with and use your products. It is how your user can get from point A to point B and even point C in the least frustrating way possible.

Good navigation will:
  • Enhance a user’s understanding
  • Give them confidence using your product
  • Provide credibility to a product
Common patterns: hamburger menu, tabs, vertical navigation, CTA button, breadcrumbs

Content Structure and Metadata (taxonomies, categorization, tags, controlled dictionary)

Taxonomy is the hierarchical structure of the content (tree-like). It’s a system to classify and organize. Metadata describes set of attributes that can be used to further classify or consume content. For example: content’s status, location, physical attributes.

A “controlled vocabulary” is a restricted list of words or terms used for indexing or categorizing (used in input filters).

Tags are assigned to content to help identify that content. They are considered an “uncontrolled” vocabulary in that it doesn’t restrict what can be entered.

The metadata word we use to describe all of it. And the entire array of available metadata fields is considered the system’s metadata schema.

Research experiments and practices

  • Brainstorming with sketching
  • Card sorting (open and closed) (result: labels and menu groups, contributing into Navigation, Sitemap, and Content Structure)
  • Tree testing (result: improved Navigation)
  • UX Expert Reviews (result: improved Task Flows and User Flows)

What these experiments mean?

Brainstormin and Sketching

Brainstorming is a method for generating ideas to solve a design problem. As an outcome of brainstorming we want to have a rough design of what we are thinking to build. Sketches visually represent such early design ideas.
They may already include beginning principles of navigation and organization of the future product or feature.

Card Sorting

Card sorting is a UX research technique in which study participants group individual labels written on notecards according to criteria that make sense to them.

In an open card sort, users are free to assign whatever names they want to the groups.

In closed card sorting users are given a predetermined set of category names.

Closed card sorting does not reflect how users naturally browse content, which is to first scan categories and make a selection based on information scent. NNG recommends to do tree testing instead.

Tree Testing

A tree test evaluates a hierarchical category structure, or tree, by having users find the locations in the tree where specific tasks can be completed.

Tree testing is incredibly useful as a follow-up to card sorting because it:
  • Evaluates a hierarchy according to how it performs in a real-world scenario, using tasks similar to a usability test; and
  • Can be conducted well in advance of designing page layouts or navigation menus, allowing inexpensive exploration and refinement of the menu categories and labels.
To conduct a Tree test we need only two things: the tree, or hierarchical menu, and the tasks, or instructions which explain to study participants what they should attempt to find.

UX Expert Reviews

Expert review is the analysis of a design by a UX expert with the goal of identifying usability problems and strengths. UX expert review should be repeated for major redesign iteration.

In our organization it involves:
  • Determine a common task flow, and reconstruct a User Flow diagram
  • Identify and rate the pain points along the User Flow
  • Provide UX recommendations
  • Document all the above in Confluence
  • Present to stakeholders, listen to a feedback, and make corrections
  • Update documentation and file bugs and issues in TFS.

Sources:

IA

https://www.usability.gov/what-and-why/information-architecture.html
https://www.youtube.com/watch?v=7cfHLsnRDvc
https://prezi.com/aafmvya6bk7t/understanding-information-architecture/
https://www.bloc.io/checkpoints/2671?section_id=318

Tree Testing

https://www.nngroup.com/articles/tree-testing/
https://www.userzoom.com/blog/what-is-tree-testing-and-why-is-it-important-for-your-sites-ux/

Card Sorting

https://www.nngroup.com/articles/card-sorting-definition/
https://www.userzoom.com/blog/what-is-card-sorting-and-why-is-it-important-to-your-sites-ux/

UX Expert Reviews

https://www.nngroup.com/articles/ux-expert-reviews/

UI sketches

https://www.justinmind.com/blog/from-a-mere-wireframe-to-a-final-website-design/

User Flows

https://www.invisionapp.com/design-defined/user-flow/
https://flowmapp.com/user-flow-in-ux-research/

Sitemaps

https://theuxreview.co.uk/sitemaps-the-beginners-guide/

Navigation

https://www.justinmind.com/blog/navigation-design-almost-everything-you-need-to-know/

Content Structure

https://picturepark.com/content-management-blog/best-practices-for-dam/taxonomy-metadata-tags-and-controlled-vocabularies/
https://www.uxbooth.com/articles/introduction-to-taxonomies/

Comments

Popular posts from this blog

Data visualization for Roadmap Microsite (Angular and D3.js)

Four tools for prototyping: Sketch, Figma, Principle, and FramerX

Axure RP: Image over button - Where do I put the interaction?