Design

Information Architecture

Towards An Effective Information Architecture Design

January 20, 2016 Design

Imagine a scenario, in which you had a meeting at this elegant downtown office building and you were desperately seeking the washroom before the meeting started. You scampered looking for washroom signs but couldn’t find it. Finally, you gave up and humbly approached the reception for directions, and felt like a jerk! Because the washroom was right next to an area you passed moments ago. So what went wrong then and why couldn’t you find the washroom if it was that easy? The answer is the architecture design didn’t reveal itself completely and left you confused. The sign for the men’s loo was visible but you missed it in your focused approach towards reaching your goal, that is quite common. You were very confident in reaching your goal but your search ended miserably and you felt embarrassed. The task of finding information online can look even more daunting without a soul to ask for ‘directions’ and customers surrender to their frustration turning away from that “annoying” website forever.

Content is often ignored at the cost of graphics, and while effective presentation techniques are imperative in today’s digitized world leading websites skillfully engineer information through a maze of pictures and graphics to bring the user to their logical destination. In the noise around designing successful UX, we sometimes overlook the importance of content. And the success of a successful content strategy, be it a website or Intranet, depends strongly on the robustness of its information architecture (IA). The goal for content strategists is not just to create meaningful content but to also lead the users to it. If you’re designing for online applications, you live by the mantra ‘if it’s not seen, it doesn’t exist’!

The Definition of Information Architecture
User-interfaces have the obligation to lead users to their goals and make that (sometimes arduous) task worthwhile. One of the design criterions for outstanding UIs is not how flashy it appears or if the microinteractions have been duly exercised, but how the relevant ‘hooks’ and labels have been drawn to prevent distracting the users from achieving their goals. When you reach a milestone in your journey for finding information (hopefully without bumps), the information architecture design registers a big win! To put matters into perspective, the purpose of an information architecture is to inform and lead users towards their goal, give clues about their location on the site, give indications about the site’s content and what they should expect, and empower users to navigate and commit actions without fear of losing track of their goals. The implementation of UI trends or techniques is beyond the purview of this article.

The Components of Information Architecture
For a rewarding experience, it’s critical to understand the user group needs while associating their objectives to create a meaningful content strategy. In their book Information Architecture for the World Wide Web, Lou Rosenfeld and Peter Morville categorize information architecture into 4 major components:

  • Organization systems – presenting the site’s information in a variety of ways, such as content categories, etc.
  • Navigation systems – Helping users to move through the information maze.
  • Search systems – Allowing users to search the content of the website. This is especially useful when the user is lost.
  • Labelling systems – Describing the categories, options, and links in a language that is meaningful to the users and helps them in decision making.

Let’s look at the organization of content on the Government of Canada site. For our discussion, I have marked some areas yellow for better representation.

Government of Canada website

The ‘Persistent Top Navbar’ has demarcated categories of content areas appropriately labelled to give readers a sense of the imminent content (provide ‘information scent’). It also depicts the nature of the business to the newcomer who may have wandered unknowingly. The ‘Search Function’ helps the users connect logically with information when they are lost on the site. The logo or branding component acts as an exit to the home page when the interaction has failed to address users needs and the user wants to restart his/her search afresh.

Due to its inherent value for the website and indeed the users, the logo, the ‘Persistent Top Navbar’ and the ‘Search Function’ remain static on all the pages and are always placed on the top. The ‘Breadcrumb’ navigation provides an indication of the user’s location (and the current page too) in relation to the site hierarchy. The descriptive ‘Page Title’ is a confirmation of the visible information or the ‘primary content’ on the page even before the user dives deeper into the detail. The primary content is further categorized into smaller bits in the ‘Persistent Left Navbar’. Beyond this, as we continue to scroll downwards the criticality of the content in context with user needs begins to diminish. The footer (not seen in the pic) typically contains information that is more likely discounted by the user in favour of achieving the immediate goals. The most important portions of the content are thus organized at the top, or the first fold of the page template.

The organization of the Government of Canada website content with the information architecture serves as a direct response to questions related to cognitive load, such as, where am I? (location), how do I navigate to other links? (interaction), what’s happening here? (content, information), etc. The information architecture, in this case, has helped in reducing cognitive load thus making the website ‘ user-friendly’.

Content which is categorized on a page also makes it meaningful. The BBC’s ‘On This Day’ website is beautifully divided into main content and sub-content areas. In my review of the page which speaks about the launch of the Soviet space station ‘Mir’, I categorized the page content into 4 parts. This is also how I perceived my own eye movement on the page while foraging for content.

bbc-on-this-day-PNG

  1. The primary content area speaks about the happenings of February 20. This article, in particular, happens to be on the launch of the Soviet space station ‘Mir’ on February 20, 1986. A hook had already been provided on the home page for me to visit this area.
  2. Secondary content – still on the topic of ‘Mir’, how about giving out details on what else happened with it later. What happened after the dissolution of the Soviet Union in the 90s? What was the role of the US? This is mainly to create enough interest for the reader to stay on the page. Notice the hooks.
  3. Tertiary content – content that’s associated with the secondary content and creates interest about the post-90s era prominence for ‘Mir’. The ‘hooks’ in this case are in the form of synopsis on ‘Mir’. Since enough curiosity has been generated in the previous 2 stages the reader will be inclined to move to other parts of the website.
  4. Related links – subsequently on the topic of February 20, how about providing the user more relevant ‘hooks’ on February 20 during that era. Wouldn’t you want to know what happened on this day in 1993? The interesting bits and pieces of information from the previous stages and the synopsis are enough for the reader to take this virtual ‘bait’.

Bottomline, it’s not merely about creating meaningful content but organizing it as well. In fact, it’s the organization which brings purpose to the content and makes it meaningful for its readers.

The Constituents of Information Architecture

Users, context and content are the 3 major constituents of an information architecture design and the correlation between them can be seen in the Venn diagram here:

IA_comps

Having a deeper sense of the business context of the application (website or Intranet) to be designed, and co-relate with the content which either exists or needs to be generated. Subsequently, it’s highly conducive for studying the demographics by working alongside the users to draw mental models which help in designing a content strategy for your application or site. A ‘mental model’ is how users individually perceive the world around them.

  • Users – There are marked differences in customer preferences and behaviours when moving from the physical world to digital (mental model). Hence when users are willing to spend time (visits) or money (purchase), knowing about their preferences becomes crucial in structuring the content according to their needs and desires. On the BBC website, the user (or reader) would be a knowledge seeker and the interaction confirms that belief. The preferable ‘need’ was to get answers about February 20 but in the journey, the ‘desired’ outcome was more than what the readers had bargained for.
  • Content – “Content” is broadly defined as documents, applications, services, schema, and metadata that people need to use or find on your site. I consider “content” as only textual information, since text drives the meaning for the rest of the online communication, through graphics, visuals, or other media elements. Each site or application throws a blend of content, that which is unique to the organization and defines the nature of its relationship with its audience.
  • Context – Each individual application – be it a website or an Intranet, reflects the culture of the organization and exists within the organizational context of a particular business. Information Architects need to capture the unique qualities of the institutions to design a unique design language. The context makes the application stand apart from the competition. The context is an important facet of information architecture in defining the size and organization (structure) of the content as well.

Conclusion
An effective information architecture design shouldn’t be considered as an alternative. The costs of not having a desirable experience for the user could be devastating for the business in current times. Invariably information architecture should not be misconstrued as just structuring of the content. It’s about designing spaces that connect the audience with the philosophy of the business, rather it’s also about the individuality of that space itself. Data should be structured and designed cohesively by gaining insights into user preferences, connecting it with the context of the business, and driving a wholesome experience to retain the interest of the audience.

Further Reading & Acknowledgements:

  • Featured Image – courtesy of Gary Barber (Flickr/Some Rights Reserved) Link: Flickr Photo Page
  • Information Architecture Basics – Usability.gov. Link to Information Architecture Basics
  • Information Architecture for the World Wide Web, 3rd Edition: Designing Large-Scale Web Sites by Peter Morville, Louis Rosenfeld. Link: Shop O’Reilly Media

Design Case Against Gmail Tabs

November 21, 2015 Design Technology

Gmail Tabs was meant to handle email clutter in the primary inbox and optimize the email experience. Surely enough it was an exciting news for Gmail fans, and before I knew I had activated the feature on my account. So now I had five tabs (or inboxes) in Gmail where emails from different sources were automatically redirected into Primary, Social, Promotions, Updates or Forums tabs. You could also drag an email to any of the tabs, so that Gmail could recognize and deliver future emails to its respective inbox tab. And I was happy with this arrangement until I realized it had started to cause me inconvenience in managing different tabs or inboxes at the same. Using the Gmail app on iOS correspondingly was even more annoying because it increased my time (tap ratio) to reach specific emails and take action. As time went by I cared less about prioritizing my emails and more about organizing my emails. In fact I lost complete control over my emails and conversations and decided to do something about it.

There are email updates such as newsletters and account details, new sign ups, login notifications, verify email address, et al., and social media messages such as Twitter and Facebook notifications and then Spam, they all could be deleted or preserved (labeled appropriately and/or Archived) depending upon the value of the information.

In that sense Gmail Tabs brought a behavioural change in email interaction. There was a logical movement of the eye (scanning) in the traditional email list navigation model following a Receive > Read > Act > Delete/Preserve task flow. In other words conversations were easily identifiable through a comprehensive visible list of messages.

Traditional Inbox

Traditional Inbox with Email Listing (in red)

When Gmail Tabs introduced several inboxes within a large mailbox scanning became a matter of choice. And since each tab represented an inbox with emails delivered in volume at the same time, the focus shifted to reading emails in the Primary inbox (since they tended to represent real email senders), while taking it easy on the rest of the tabs. So when tabs presented multiple choices to the user it inhibited the person to make a decision.

Priority Inbox Feature

Gmail’s inbox feature with tabs (& unread emails)

Here’s why I believe Gmail Tabs was a design failure over the traditional Inbox design. This feature by its inherent network of tabs hid information and persuaded users to ignore emails and not motivate them for further action. For example receiving email in any of the tabs other than the Primary mailbox would either be read or ignored but never deleted. And storing all those trivial emails not only bloated my Gmail account it also overshadowed important conversations and added to the clutter.

For me nothing works like the original inbox mail listing feature now that I’m using it again. I can now control whether emails stay or go to the Bin the minute I receive them. The list design pattern provides early clues on information and doesn’t afford for conversations to hide behind tabs. Now that the original Inbox listing is back for me I noticed a ton of unread emails. So excuse me, while I clear this email mess!

Usability vs UI vs UX

Usability vs UX – Deciphering The Terms

November 20, 2015 Design

The web abounds with discussions on Usability or UX (user experience) design mostly revolving around the concepts of ‘delight’. Let us look at the definition of ‘user experience’ which I found on Google:

The overall experience of a person using a product such as a website or computer application, especially in terms of how easy or pleasing it is to use.

The simplest interpretation of the word pleasing would be creating delight while using the system (or any other product). Some would define UX as the emotional aspect of a product while Usability tends to deal with the physical facets of software — the Look versus Feel scenario. Here’s how usability is defined on Wikipedia:

Usability is the ease of use and learnability of a human-made object. The object of use can be a software application, website, book, tool, machine, process, or anything a human interacts with.

The ease of use and learnability aspects are striking in the context of UX because both are emotional connotations for delight. So what exactly separates UX from usability? While much has been written about UX the more you indulge in its multifarious definitions, the more confusing the interpretation becomes in the context of general design. Thus I have come to conclude that applying the principles of usability in product development consistently derives long-term benefits in user-experience design.

Usability Engineering in context with software design is defined as Human-Computer Interaction or HCI although its principles have been employed in several key areas such as the aviation industry much before the first computer screens flickered on the horizon. Usability is broadly a set of principles specifically laid out through continuous user research that aims to bring the human viewpoints of psychology and physiology into consideration while designing a user-friendly product. The principles of Usability as defined by ISO cover learnability, efficiency, memorability, error handling and satisfaction for software development. Satisfaction — isn’t satisfaction a subset of delight or user experience? So if a design process exploits these usability principles and creates a user-friendly environment for usage, the outcome should naturally provide for a good user-experience for its customers.

I believe that usability has an overarching effect on products — be it on an enterprise-level application or a mobility app, or even a ubiquitous product such a chair, the principles of usability are relevant and are bound to affect humans emotionally as they interact with the object frequently. So while summarizing how usability can provide delight or how UX is intrinsically linked with classical usability, let’s take the example of a coffee-maker in context with the usability principles we discussed earlier:

Learnability: The product that is designed must be easily comprehensible (affordance) so as to reduce the learning curve and meet the set expectations or user goals. For instance, a coffee-machine which can make a cup of coffee for the consumer quickly and with fewer button clicks, and without having to read the manual (actually why would anyone need a user manual for using a good product?).

Efficiency: If the product is learned easily and quickly on repeated use it naturally affects the efficiency of its users in a good way. Making that first cup of coffee on a new machine took some time then let’s say, preparing the tenth cup.

Memorability: Once a user has been educated it raises his/her awareness about using the product features and increases the level of memorability (designing for recognition over recall). This makes the user confident, bestowing a higher amount of self-esteem from each product interaction which eventually raises the product brand value as well. So now you are so confident in making coffee on the new coffee-maker that you no longer required to focus your mind and energy on the buttons or the flashy lights. It just works magically! (or so your brain starts to believe!)

Error Handling: Once a product has reached a high state of awareness within its user base and the brand worth has been attained, the effective rate of error recovery would normally be reduced. Or discovering newer ways for product upgrade through user testing and feedback, and design iteration during product development lifecycle. If the coffee-maker beeped previously to signify an error consistently, what can be done to reduce that occurrence by bringing a change in product ergonomics?

Satisfaction: having met the expectations of the user, and an increased brand worthiness through design rationale, the overall experience is thus deemed pleasurable for the user. In other words, the goal for good user-experience design has been achieved so far.

While we know that usability for software is quantifiable through an expert review or usability lab testing. At this point, I have mostly found testing metrics for user-experience design referring back to the usability engineering testing tools and methodology which is rather disheartening. So while we continue to build products focussed on UX I would also be keen on applying my knowledge and skills substantially to usability engineering studies and research papers. After all, a product which addresses the mental model of the audience succeeds in providing a delightful experience as well.

Further Reading: The Resource Centre contains a collection of thought-leadership articles on Usability and UX from the Internet.