Information Architecture

Information Architecture is the combination of organization, labeling and navigation schemes. In other words,
Information architecture (IA) is a science of organizing and structuring content of the websites, web and mobile
applications, and social media software.A good IA helps users to easily find products, information, and functions.

Importance of information architecture

If customers cannot find what they want, they will leave (loss of sales)

If employees can not find what they need, time will be lost. (loss of productivity). In Content site- “Search” should be
provided.

IA- Designing Content

The content structure depends on various factors. First of all, IA experts consider the specifics of the target audience
needs because IA puts user satisfaction as a priority.

. Unorganized content makes navigation difficult and inexplicit, so the users can easily get lost and feel annoyed. If
the users face first bad interaction, they may not give the second chance to your product.

How do you organize your design?

1. By Topic

2. By User

3. By product or service

4. By Task

5. By store or Department

Hybrid schemes can be confusing

Most large sites are hybrids which allow different ways of entering the site.Intermixing multiple schemes makes it
difficult for the user to form a consistent mental model. It creates a memory load for the user.

Hybrid schemes can be clear

• Group each scheme and limit the number

• Different schemes on a single screen

Organization systems/ structures

These are the groups or the categories in which the information is divided. Such system helps users to predict where
they can find certain information easily. There are three main organizational structures: Hierarchical, Sequential, and
Matrix.

Hierarchical - its main goal is to present content on the carrier, be it a book page or poster, web page or mobile
screen, in such a way that users can understand the level of importance for each element. It activates the ability of
the brain to distinguish objects on the basis of their physical differences, such as size, color, contrast, alignment etc.

Sequential - This structure creates some kind of a path for the users. They go step-by-step through content to
accomplish the task they needed. This type is often used for the retail websites or apps, where people have to go
from one task to another to make the purchase.

Matrix - This type is a bit more complicated for the users since they choose the way of navigation on their own.
Users are given choices of content organization. For example, they can navigate through content which is ordered
according to date, or some may prefer navigation along the topic.

OTHER organization schemes

They are meant to categorize content the product. Here are some of the popular schemes:

1. Alphabetical schemes. Content is organized in alphabetical order. Also, they can serve as a navigation tool for the
users.

2. Chronological schemes. This type organizes content by date.

3. Topic schemes. Content is organized according to the specific subject.

4. Audience schemes. The type of content organization for separate groups of users.

Creating Sustainable Structures

• Allow room for growth.

• Avoid structures that are too shallow or too deep

Shallow vs. Deep structure

1. Shallower

Easy to access

Faster, more efficient

For power users (experts)

2.Deeper

Easy to learn

Accurate

For Novice users

Labeling systems

This system involves the ways of data representation. Design of the product requires simplicity, so a great amount of
information can confuse users. That’s why designers create the labels which represent loads of data in few words.

Important Points for Good labeling system

1. Users must be able to discriminate among choices. EX: Menu should not have two labels “Medicine Cabinet &
Pharmacy” which confuses the user when ordering medicines.
2. Good Labeling systems, Mimic user’s vocabulary and map those terms to expect meanings. EX: Starbucks has
coffee cup size labels as “Tall, Grande, Venti & Trenta”. The user will be confused if wanted a small cup of coffee.
3. Be consistent with web practices. EX: website menu should always follow standard menu labels like: Home |
Contact Us | About <your company>

Card sorting

Card sorting is a method used to help design or evaluate information architecture. In a typical card sorting session,
participants organize topics into categories that make sense to them and group them accordingly. To conduct a card
sort, you can use actual cards, pieces of paper, or one of several online card-sorting software tools.

Different types of techniques used for card sorting:

Open — In open card sorting, each participant is given a stack of cards.The participants are then asked to group
those cards together in any way they want. Then they create labels for the groups that they chose. This method is
commonly used for new/existing information architectures (IA) or organizing products on a site.
Closed — In a closed card sorting, the researchers create the labels for their respective groups. Participants are given
a stack of cards and are asked to put each card into a group. This method is normally used when adding new content
to an existing site or gaining a second round of insights after an open card sort.

Benefits of card sorting

Easy & Cheap , Quick to execute , Established , Involves users , Provides a good foundation , Provides a good insight

Elements of UCD

Active involvement of users

Clear understanding of user requirements, tasks, and environments

Allocation of function between users and technology

Iteration of design solutions

Validation testing with users

Four Approaches to Interaction Design

1. In user-centered design, the user knows best and is the only guide to the designer; the designer's role is to
translate the users’ needs and goals into a design solution.

2. Activity-centered design focuses on the behavior surrounding particular tasks. Users still play a significant role but
it is their behavior rather than their goals and needs that are important.

3. Systems design is a structured, rigorous, and holistic design approach that focuses on context and is particularly
appropriate for complex problems. In systems design it is the system that are the center of attention while the
users’ role is to set the goals of the system.

4. genius design is different from the other three approaches because it relies solely on the experience and creative
flair of a designer. ’ In this approach the users’ role is to validate ideas generated by the designer, and users are not
involved during the design process itself.

Navigation systems

1. Navigation design is the discipline of creating, analyzing and implementing ways for users to navigate through a
website or app.

2. 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.

3. To make these delightful interactions, designers employ a combination of design patterns including links, labels
and other UI elements. These patterns provide relevant information and make interacting with products easier.

Primary Navigation systems

1. Hierarchical Drill-down - The drilldown pattern allows users to select an item from a grid to see more details in
place of the grid.

 Hierarchical Drill-Down navigation is appropriate when individual tasks must be completed or terminated
before others can begin.
 Used to reduce large number of high-level menu choices, removing visual and cognitive clutter.
 Provides "down and back" modal access; appropriate when users do not need to jump between tasks (or
categories).
 Navigation menu is transient (disappears after selection).
 Can be single-level or multi-level.
2. Persistent - Web site navigation that remains persistent in location, and, for the most part, consistently displays

the same links. Persistent navigation is always available at a given navigational level. Top Navigation , List Menu ,
hamburger menu.

Persistent navigation is appropriate when:

• Users tend to jump between related tasks or content.

• There are a manageable number of choices or menu items.

• Provides random, non-modal access to content or tasks.

• Supports surfing, browsing, and associative learning.

• Visually highlighting current page reinforces location.

3. Sequential Navigation - Sequential navigation- provides structure to procedural or step- by- step tasks. Types:Non-
modal tasks, Wizards, parallax.

4. Searching systems - to help users search for the data within the digital product like a website or an app. The
searching system is effective only for the products with loads of information when the users risk getting lost there.
Simple Search, Advanced Search,Faceted Search.

Supplementary Navigation Systems

Index pages, Breadcrumbs, Quick links, Secondary windows, Utility links, Footer links.

Gestalt principles

an important set of ideas for any designer to learn and their implementation can greatly improve the aesthetics of a
design as well as its functionality and user-friendliness.

similarity, Proximity, Common area, connectedness.

Layout Design- Visual Hierarchy

Visual hierarchy is the principle of arranging elements to show their order of importance. Designers structure visual
characteristics—e.g., menu icons—so users can understand information easily.

Layout Design- Grid Systems

Grid systems serve as the organizational containers for overall design.

Grid layouts serve as the basis for design templates and standards.

Icons

Icon familiarity reduces ambiguity and learning time.

Maintain consistency across sizes, applications and variations of theme.

Research suggests that visually distinct icons help users scan faster

Tips for effective icon design

The icon should be simple and recognizable at a glance

Always understand the context of icon usage

Always label the icon

Avoid words inside the icon

Avoid 3D perspectives and heave drop shadows on small icons

Font

Font size, style(serif, Sans-serif), spacing( proportional, monospaced), treatments(italics, underline, Caps, etc), font
families, legibility(text on images), text alignment( left, center, right), line length(reading efficiency).

Components of Interaction Design

Interaction is the point where a visual design is processed (cognition) and human action(motor response) is initiated.

Cognition – Motor response – Interaction ( I think I should click this button)

Factors Impact Interaction

Input Devices

Mouse, Keyboard, Touch Screen, Camera, Microphone

Interface

Screen flow and sequencing, UI controls, Error and feedback messaging, Response times.

UI controls for screen Interaction

Consider the user and task.

Data entry- single line, multi-line, formatted and masked text box, text box labels, alignment of labels on forms,
auto-tab, auto complete

Selection- drag and drop, radio buttons, check boxes, slider, toolbar, palette window, dropdown list

Launch an action- command buttons

Navigation- Links

Multifunction- spin control, date picker, combo box, deferred create

Introduction to Screen elements & Wireframes

1. Screen elements refer to subsets or portions of a template that support specific user tasks.

2. Common screen elements and templates ensure consistency across your designs.

3. Consistent screen elements Saves design and development time

What is the difference between fixed, fluid, adaptive and responsive layouts?

Fixed

It does not appear that many new websites really use this layout anymore.

Fixed (aka static) layout has a fixed width in pixels. The ‘container’ of the website is programmed to not move (that’s
where the name ‘static’ comes from). This width stays the same independently of which screen size or resolution the
viewer has. It appears that the width of 960px is the most widely used size for fixed-layout websites.

The drawback is that when viewing such layout on smaller screens you get the hideous horizontal scroll, which ruins
the overview, experience an usability.

Fluid

With fluid layout you specify sizes not in pixels, but in percentages. Meaning, if the screen size changes, the
proportion of elements will stay the same. Neat!

The drawback is that on smaller screens the columns can get really narrow. Now imagine how a block of text in a
narrow and very tall cell looks like. Or, adding some elements like images and video which should stay of a fixed size.
This combination is asking for trouble.
Adaptive

Adaptive layout means that there are several versions of the layout which are displayed based on the screen size of
the viewer. Think of it as several fixed layout designs, layout A is displayed when the screen size is within size range
N — NN.

The benefit is obviously that the designer has more certainty that the user will have an optimal experience. Another
plus point is that the website with such layout should load pretty fast, because there is not much adjustments of the
size and position of elements going on when loading it — the server sends exactly what has to be loaded.

The drawback is that every layout should be designed with care, and that takes time and effort.

Responsive

Responsive design takes the best of the two worlds of fluid and adaptive design. There are several so-called
breakpoints, which divide all possible screen sizes in ranges. The interface has slightly (or completely different)
layout depending on the screen size it’s viewed on. Also, depending on the screen size, elements will stretch or
shrink accordingly. Responsive layout provides a custom experience for whichever screen size it’s viewed on.

Interface elements include but are not limited to:

• Input Controls: checkboxes, radio buttons, dropdown lists, list boxes, buttons, toggles, text fields, date field

• Navigational Components: breadcrumb, slider, search field, pagination, slider, tags, icons

• Multifunction- spin control, date picker, combo box, deferred create

• Informational Components: tooltips, icons, progress bar, notifications, message boxes, modal windows

• Containers: accordion

input controls

Checkboxes - allow the user to select one or more options from a set.

Radio buttons - Radio buttons are used to allow users to select one item at a time

Dropdown lists- Dropdown lists allow users to select one item at a time, similarly to radio buttons, but are more
compact allowing you to save space.

List boxes - List boxes, like checkboxes, allow users to select a multiple items at a time,but are more compact and can
support a longer list of options if needed.

Buttons - A button indicates an action upon touch and is typically labeled using text, an icon, or both.

Dropdown Button - The dropdown button consists of a button that when clicked displays a drop-down list of
mutually exclusive items.

Navigational Components

Search Field - A search box allows users to enter a keyword or phrase (query) and submit it to search the index with
the intention of getting back the most relevant results.

Breadcrumb - Breadcrumbs allow users to identify their current location within the system by providing a clickable
trail of proceeding pages to navigate by.

Pagination - Pagination divides content up between pages, and allows users to skip between pages or go in
order through the content.

Tags - Tags allow users to find content in the same category.

Icons - An icon is a simplified image serving as an intuitive symbol that is used to help users to navigate the system.

Information Components
Notifications - A notification is an update message that announces something new for the user to see. Notifications
are typically used to indicate items such as, the successful completion of a task, or an error or warning message.

Progress Bars - A progress bar indicates where a user is as they advance through a series of steps in a process.
Typically, progress bars are not clickable.

Tool Tips - A tooltip allows a user to see hints when they hover over an item indicating the name or purpose of the
item.

Message Boxes - A message box is a small window that provides information to users and requires them to take an
action before they can move forward.

Modal Window (pop-up) - A modal window requires users to interact with it in some way before they can return to
the system.

Screen size and resolution

Its important to determine the resolution and screen sizes for which you will be designing.

1. Target resolution

• Optimize your design for these resolutions

• It should work at larger or smaller resolutions, but the target is where it will work best.

2. Size and aspect ratio

• Users using modern machines are likely using wide-screen

3. Special considerations

• Multiple monitors?

• Landscape or portrait?

• Frequently used with projectors?

4. Is your design the primary app or is it used in less than maximized state?

Supplementary Navigation Systems

Index pages

Breadcrumbs

Quick links

Secondary windows

Utility links

Footer links

Hamburger Menus

When there is insufficient space to support tabs you can use a "hamburger" menu:-

The user needs random access to a large number of options.- The user needs persistent access to multiple levels of
navigation.-

Use the word MENU or add MENU underneath the icon.•

Try to use in combination with other options such as tabs, tabs more, scrollable navigation.

Usually have dropdown or left-hand side drawer open to reveal menu options.

Covers underlying content: sometimes completely, sometimes partially.

Note: Because of low discoverability they hurt UX metrics.

According to Jakob Nielsen, discoverability is cut almost in half by hiding main navigation. Out of site, out of mind.
Obvious always wins. Offers no "information scent."

Cascading Menus

Cascading Menus can be presented either horizontally or vertically.

- Referred to as "mega menus" when options are grouped into related categories and shown in one large panel.

- Mega menus can also show content in the menu panel.

What Is a Prototype?
A prototype is one manifestation of a design that allows stakeholders to interact with it and to explore its
suitability; A prototype can be anything from a paper-based storyboard through to a complex piece of
software, and from a cardboard mockup to a molded or pressed piece of metal. These included screen
sketches, paper and cardboard mockups, wireframes, and many post-its.
Uses of Prototype
• Prototypes are useful when discussing or evaluating ideas with stakeholders; they are a
communication device among team members, and an effective way for designers to explore design
ideas. The activity of building prototypes encourages reflection in design, as described by Schön
(1983) and is recognized by designers from many disciplines as an important aspect of design.
• Prototypes answer questions and support designers in choosing between alternatives. Hence, they
serve a variety of purposes: for example, to test out the technical feasibility of an idea, to clarify
some vague requirements, to do some user testing and evaluation, or to check that a certain design
direction is compatible with the rest of product development.
Low-Fidelity Prototyping
A low-fidelity prototype does not look very much like the final product and does not provide the same
functionality. For example, it may use very different materials, such as paper and cardboard rather than
electronic screens and metal, it may perform only a limited set of functions, or it may only represent the
functions and not perform any of them.
Low-fidelity prototypes are useful because they tend to be simple, cheap, and quick to produce.
They are simple, cheap, and quick to modify so they support the exploration of alternative designs and
ideas.
Low-fidelity prototypes are not meant to be kept and integrated into the final product. They are for
exploration only.
High-Fidelity Prototyping
A high-fidelity prototype looks like the final product and/or provides more functionality than a low-fidelity
prototype.
High-fidelity prototyping is useful for selling ideas to people and for testing out technical issues.
High-fidelity prototypes can be developed by modifying and integrating existing components – both
hardware and software.
Focus on basic page design, task flow, and usability issues.
Strengths:Greater depth of design feedback
Presentation close to the real thing
Allows for greater interaction
Limitations:Development investment
Ability to make changes easily
User openness to be critical
Consistent screen elements
• Reduce Learning : Consistency limits the number of ways actions and operations are represented,
ensuring that users do not have to learn new representations for each task. Further, establishing
design norms like following platform conventions allow users to complete new tasks without having
to learn a whole new toolset.
• Eliminate Confusion: Users tend to apply rules they’ve experienced outside of your website or
product, bringing in a set of their own expectations. Knowing that, we should be mindful of
whether or not we’re causing confusion and alienation when we deviate from design standards and
conventions. Further, users should not have to spend time wondering whether different words,
interactions, or actions actually mean the same thing within the context of your product.
Designing login panels
When designing standard login panels:
• Ensure the field tab order is sequenced.
• Reduce memory loads by providing auto-fill options (remember me on this computer)
• Incorrect login fields should return blank with simple error message explaining the error.
Tables
Tables are common, so define standard table presentation and interaction.
Column alignment:
- Left align in most cases.
- Align column headers to match the data below them.
- Right align numeric fields with values that the user is comparing.
- If the data are fixed length and column header is long, center the column header.
Row appearance:
- Use alternate row background shading colors to allow for easy scanning of data.
- For large lists, consider alternating the row backgrounds in groups (3 - 5 lines)
Scrolling allows you to browse through the content in its entirety from just one single webpage. Once the
scroll bar reaches the bottom of the page, new content loads automatically, allowing for endless scrolling.
Long scrolling can be used when the users expect one continuous flow. This is especially important for
users who use mobile devices, where scrolling is more intuitive. A pagination number bar is simply too
small to properly click on mobile.

Pagination is a technique where online content is divided across several webpages instead of being
lumped together in one giant brick of content.
Pagination can be used when there are natural breaks in the information or in forms when you need to
gather additional information based on what the user has entered.
A great example of pagination is a search engine results page.
Designing Content pages
Content page elements are the design spaces within which relevant information is organized and
presented to users.

Product detail pages provide:

• Details that cannot be seen in product lists.
• Multiple product image views.
 • Price and availability information.
• Bargain and discount information
• Product feature comparisons
• Related product and accessory recommendations.
• Provide 4-5 reviews on the product detail page and a link to additional reviews.
Customer ratings and reviews are often critical for a user to making a buying decision.
• Provide 4-5 reviews on the product detail page and a link to additional reviews.
• Provide clear explanation of ratings (eg., by general users, members, independent 3 rd party).
• Give raters topics to rate on, rather than just dense text for the user to consume.
Dashboards ;;Dashboards provide quick summaries and direct access to content that requires action
Dashboards are good solutions for:
• Account Pages
• Applications for managers
Dashboards: Best Practices
Interface must provide actionable and relevant information from one or more sources that need to be
monitored.
• Consider how often and why a user would visit the dashboard
• Provide the most critical information upfront in a prominent position
• Alert the user if there is anything that requires immediate attention
• Place data that are related or need to be compared side by side
• Align visual hierarchy of user’s workflow
• Consider appropriate visualization of data-pie, line or bar charts
• Allow users to drilldown into the details.
Templates
They are made up of common user interface elements such as buttons and navigation. They typically
include core elements like icons, typography, colors, and sometimes complex UI patterns like grids, cards,
and navigation. They are used to create mockups or prototypes of product solutions.
process to Design Templates
• Once you identify standardized design elements, keep them as templates.
• Create templates for those designs that cover 80% 0f screens or pages.
• If a design is a one-off, it does not need to be a template(just a good design)
• How to come up with templates
What should be included in the template
• Description of what the template is and the problem it is addressing.
• Outline of the solution and descriptions of the individual elements.
 • Example images
• Any reusable code associated with the template.
• Consider, if variations can go within the template or should be their own templates
Note: When creating standards, consider if they are generic templates (e.g., "Lorem Ipsum”) or real
examples
Advantages of templates
1. Accelerate the design process
2. Build consistency across designs
3. Serve as the foundation of design standards and guidelines.
Usability Testing
Evaluation or testing is integral to the design process. Testers collect information about users’ or potential
users’ experiences when interacting with a prototype, an app, a computer system, a component of a
computer system, an application, or a design artifact such as a screen sketch.
They do this in order to improve its design. Evaluation focuses on both the usability of the system (e.g. how
easy it is to learn and to use) and on the users’ experience when interacting with it (e.g. how satisfying,
enjoyable, or motivating the interaction is).
The purpose of UT is Feedback
1. Feedback tells us if the design works or not
2. Goal-directed behavior depends on feedback
3. Dynamic systems use feedback to adapt
4. Feedback helps diagnose problems and design improvements or corrections
Objectives/purposes of UT
1. Diagnosing what is working and what is not in the design
2. Measuring how well the design works
3. Diagnosing problems
4. Comparing alternatives
5. Verifying that the design goals are met
6. Look for opportunities to improve the design
7. Look for insights into the UX
benefits
1. Direct benefits
• Gets feedback directly from the user – not intermediaries
• Provides data for design decisions- not opinions
• Saves development time by avoiding extensive rework late in development process
• Creates a positive return on investment(ROI)
2. Ancillary benefits
 • Builds a work team that values the user-centered process
• Helps with “change management” when introducing new systems
Early prototype type testing
This is a test of foundation of user interface. It often uses paper prototypes or low fidelity
wireframes(prototypes)
Uses of these tests are as following:
• Self-evidence of the mental model
• Usability & efficiency of content organization, navigation design
• Build a strong foundation for detail design
• Help in visual presentation & branding…
Usability tests of advanced prototypes:
• Validate the mental model and navigation
• Evaluate page flow and interaction
• Evaluate detail design issues
• Uncover technology issues
• Test new pages that were not included in the earlier prototype
• Test page level details like content, page flow, consistency issues, graphics, page level control and
interaction.

Two main types of UT

Formative Usability Testing
The formative method identifies the issues with user interface (UI) design and provides solutions to solve
those issues during the primary stages of the development process. /Used during the early stages of the
design and development process../Used to determine if a specific design objective is met, to look for
design bugs, and to validate a design decision.
Summative Usability Testing
Summative user testing provides an indirect assessment of the usability of the design. The group of testers
in this situation are given a task and based on their performance, the usability quotient of the design
elements are measured. /Summative user testing are done after the product has been launched in the
market. Used to validate that a product has accomplished intended goals.
Heuristic Evaluation
Heuristic evaluation is a process where experts use rules of thumb to measure the usability of user
interfaces in independent walkthroughs and report issues. Evaluators use established heuristics (e.g.,
Nielsen-Molich’s) and reveal insights that can help design teams enhance product usability from early in
development.
A heuristic evaluation should not replace usability testing. Although the heuristics relate to criteria that
affect your site’s usability, the issues identified in a heuristic evaluation are different than those found in a
usability test
Nielsen’s Heuristics include:
• Visibility of system status
• Match between system and the real world
• User control and freedom
• Consistency and standards
• Error prevention
• Recognition rather than recall
• Flexibility and efficiency of use
• Aesthetic and minimalist design
• Help users recognize, diagnose, and recover from errors
• Help and documentation
USABILITY TESTING APPROACHES
Small Scale Qualitative Large Scale Quantitative

• Provides many opportunities for • Focus is on qualitative measures.

observation.
• Based on expertise and judgement.
• The specialist observes, interprets, and
decides.
• Can use small sample sizes.
• Results can be generalized to a larger
population.
• Requires large sample sizes.

Steps to Design an UT

1. Identify optimal number of participants in an UT

2. Describe techniques to recruit participants

3. State what a screener is & what is it used for?

4. Setup a schedule for test sessions

5. Identify usability issues to be tested, write effective usability test tasks & scenarios.

6. Plan for data to be recorded during a session

7. Describe a test protocol and it’s major parts

8. Perform a pilot test

Pilot test

Once all the preparation is done, do a dry run of the complete usability test.

Include all materials.

Run at least one pilot session. Use a “real participant if possible

Schedule the pilot session a few days before the real test as you may need time to make changes to protocol or to
pilot-test again.

Analysis and reporting

Six steps for UT analysis & reporting:

• Tabulate data

• Analyze data & list findings

• Prioritize findings

• Create redesign recommendations

• Create a management presentation or report

• Follow up

Remote testing

Remote tests are UTs conducted with the facilitator, participant & observers in different locations or with participant
working independently.

Remote test can be :

• Moderated( Realtime facilitation via teleconference & web conference)

• Unmoderated( like a web survey)

A-B Testing

A method of market research where comparative test of two or more entirely different full page design concepts,
layouts or looks is done.

In this, each group is shown a different version of a page.

Objectives:

To study the impact of changes to a site

To determine which full page design or design elements are the “best” overall.

Web page layout

Navigation/header/banner
(logo) Login/sign-in

Primary detailed content Ads video

Secondary content
List menu
Supporting content
(categories)

Footer(contact us, copyright ,privacy policy)