Information Architecture - What is it?

Based on the UX team presentation @ Herbalife Nutrition

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

Post a Comment

Popular posts from this blog

Conceptual design

Image
Consider this post is about visual design. A duct taped banana. This piece of art was sold for $150,000 in December 2019 at Miami's Art Basel . Actually $120K x 4 + $150K = $630,000. Not bad for 10 cents banana and few inches of duct tape. This became a sensation of 2019-2020. Why and how it happened brings up some questions about modern society and economy. How artists (or art dealers, or anyone else) create value from nothing? And emphasize the importance of the idea. In this particular case it's nothing more than an idea. Is this the art we'd like to see? Probably not. But perhaps it's the art we deserve.
Read more

Using Trello and Confluence to manage UX design project. Part 1

Image
This is part One. Part Two is here . Introduction. “ Describe your design process ”. It’s a typical interview question for UX designer position. User-centered design process indeed has defined set of steps. In theory. On the practice though, the adherence to these steps depends on many factors, such as communication and execution skills, practical experience, ability to influence people, being leader and influencer, and at what level your organization is a design driven org. So many businesses are not ready to adopt the design practice, and to place the design before the development. Or simply there is not time or budget to go through all steps. Here in Herbalife the UX Design team accepted Norman Nielsen group philosophy:   Empathize – Define –Ideate – Prototype – Test – Implement .  However the   interpretation of the practical tasks can differ dramatically in different organizations. Here what we currently do: Design Thinking and Agile Any project, which goes t
Read more

How do I use InVision

Image
Team lead asked me to write what InVision products do I use, how I use them, what are pros and cons. I wrote it today, and really think it will be helpful to share my thoughts with wider audience. So, below is the adaptation of what I provided to the engineering management in one fintech company.  I use InVision to share my hi-fi designs and specs, which I create in Sketch desktop application. This is my primary and every day usage of InVision, and about 90% of all usecases of all InVision products combined.  I sync designs via the plugin in Sketch made by Invision, called Craft .  When they are in InVision, we call those designs prototypes .  It works, but I often experience slowness. Sometimes sync process is failing, and I have to try it again. In Sketch I select one or more artboards, then initiate sync, which sends the artboard to InVision cloud. I have to be logged in Craft plugin with my InVision credentials. Almost every day, especially when I design intensely and re-publish
Read more