A-1

A-2

STRUCTURE

Interaction Design (IxD) and Information Architecture (IA) are the key components which define
the structure of the product being designed.

IxD strives to create meaningful relationships between people and the products by the following

1. It effectively communicates interactivity and functionality

2. It reveals simple and complex workflows

3. It informs users about state changes

4. When errors

5. functional requirements done right, it prevents define what the system does or must not
do, non-functional requirements specify how the system should do it.

IxD revolves around the following principles

1. Consistency helps people use what they know

2. Visibility of opportunities can invite interaction

3. Learning is easier when predictions are accurate

4. Feedback facilitates learning

IA helps organize, categorize and prioritize content. A good IA will help

1. Navigate efficiently and effectively

2. Discover new content on repeat usage

3. Persuade user to perform the intended action

The following are the different types of Information Architectures

1. Hierarchical Tree – Standard structure with an index page and a series of sub-pages

2. Hub & Spoke – Central Index (Hub) and user navigate out from here

3. Nested List – Linear path for the user to navigate to more detailed content

4. Bento Box (Dashboard) – Displays portions of related content on the main screen

5. Filtered View – Allows a user to create an alternate view from a specific information set
 Project Analysis

Support

SaaS

HR

Sales

Marketing

Project Analysis

A-3

INFORMATION DESIGN

Information design is the practice of presenting information in a way that fosters an efficient and
effective understanding of the information. The term has come to be used for a specific area of
graphic design related to displaying information effectively, rather than just attractively or for
artistic expression.

WHY?

Information design is targeted to specific audiences in specific situations to meet defined

objectives. In its most sophisticated forms, it helps users understand complex data by organizing
and simplifying data and information in ways they can quickly grasp

information design accomplishes the following objectives:

• It helps people navigate and understand the increasingly complex world of facts, figures,
directions, and demands.

• It helps users finish a task, solve a problem, or meet a need.

• It minimizes or eliminates frustrations.

• It begins and ends with understanding the people who will use the content and making
sure that the content and its presentation and delivery serve them.
A-4

Wireframing is a practice used by UX designers which allows them to define and plan the
information hierarchy of their design for a website, app, or product.

This process focuses on how the designer or client wants the user to process information on a site,
based on the user research already performed by the UX design team.

When designing for the screen you need to know where all the information is going to go in plain
black and white diagrams before building anything with code.

Wireframing is also a great way of getting to know how a user interacts with your interface,
through the positioning of buttons and menus on the diagrams.

Without the distractions of colors, typeface choices or text, wireframing lets you plan the layout
and interaction of your interface. Some people like to draw their wireframes by hand, others feel
more comfortable using software like Invision, or Balsamiq to create theirs. We’ll go through some
of the tools you can use to create wireframes shortly, but it’s important to emphasize that how
you make yours is up to you: some people feel more creative when sat at their computer, while
others prefer to have a pen and paper in hand.

A-5