Course Presentation

1. WORKFLOW DIAGRAMMING +
INFORMATION ARCHITECTURE
IND 479 INTERFACE

2. The UX (interaction) design of a screen-based digital product or service is made up
of three, parallel creative problem solving activities: interaction design, information
architecture, and visual interface design.
Before designing the interface (which consists of visual layout, styling, micro-
interactions and animations, and navigation), we must first figure out
1. The flow of activities > diagramming workflow processes
2. The structure of information > developing the information architecture

3. UX Designers sketch in terms of Design Frameworks.
We make many maps and diagrams to iteratively sketch and communicate our ideas.

4. To design an application so that many different people can use it and software
developers can code it, we have to start with the big picture: what are the main tasks
that users want to be able to do easily (goal-directed task). These main tasks are
called primary use cases. Additional tasks are called secondary use cases and
rarely performed, but important tasks are called edge cases.
Computer programmers must code in terms of inputs (user or system actions) and
outputs (responses from the system), so we must consider and communicate to
them what people will do and how the system will respond.
The Interaction Design Step: Workflow Diagramming

5. THINK ABOUT LEVELS OF FOCUS FOR COMPLEX INTERACTIONS
3. Microinteractions
It is faster and easier to track and build out your interface when
you have workflow and IA diagrams to use as your roadmap.
Because development teams work iteratively, we use these maps
with programmers to collaborate on adjustments to the design.
1. Macro interaction
You created a Contextual Scenario last week to sketch the story
of the user’s intention and how your digital product will help
them achieve it through a series of goal-directed tasks.
2. Tasks = workflows
Look at your scenario. Identify each discrete task the user must
do in order to achieve their goal. Before you start to wireframe
your interface, create a workflow diagram for each task (be sure
to title the task with a verb phrase at the top of each workflow!)
You will also create an IA (Information Architecture) diagram to
structure your content. More on this later in the deck.
Wireframes show content and interaction. We
don’t spend time on high-fidelity graphic style in
the first iteration of digital product because we
know there will be changes to make after testing
its usability.

6. Look at examples of Workflows here on Pinterest.
These simple flows describe a
use case: how a user might
approach a goal-directed
activity.
Notice that the verb is inside
the shape.
This is good for basic
communication in a business
slide deck, but doesn’t work
as well when the diagram is
more detailed.

7. These flows are more
detailed.
Notice the title of the primary
use case at the top: it has a
heading and is phrased as an
action (starts with a verb).
There are verbs inside the
shapes, but these shapes
denote a SCREEN or
FUNCTION on a screen that
has many functions. Each is
labeled with the action the
user will take by using that
widget or page.
The diamond shape indicates
a decision point. It should
always ask a question that
can be answered yes or no.
These types of flow diagrams
are easiest to read when you
label the ARROWS with
actions (verbs)—either the
user’s action or the system’s
action.

8. Instead of indicating the
action in each widget or
screen-view in words only,
like this:
…some designers will
hand-sketch or use a
wireframing feature in a tool
like Axure, Visio, or Miro to
show the presence of
necessary elements or
components (sometimes
called widgets) on the
screen.
This is a great
way to start thinking about
the design of the screen
views. In this example, there
is a problem: the
reader doesn’t know
what the user is trying to
do in this flow. The flow
should be labeled with goal-
directed task labeled at top.

9. Flows can show exchanges between individuals, devices,
or organizations during the work flow. Divide using swim lanes.

10. Flow of in-person interactions using swim lanes at a macro-interaction level:

11. This is an annotated
wireframe that shows
successive views
on-click (follow the arrows).
A better option is to build an
interactive wireframe (“click-
thru”) instead. This will be your
next step.
Wireframing programs let
you add notes to click-thru
prototypes so programmers
can see the intended
components and their
behaviors to figure out how to
code how them.

13. Jesse James Garrett’s
Documentation

15. The Information Architecture Step (IA)
IAs are the maps that show classifications of data or the structure of information that
allows others to find their own paths to knowledge to or to complete a task.
“IA” can also refer to the person who does the work, the Information Architect.
Depending on the company you work for, the role of Information Architect may be
part of a “Content Strategy” team, the group that structures the text, graphic, audio,
and video information for a digital product or service.
When we design an application, we must be able to explain how information should
be organized so that it (1) resembles the mental models of the people using our
system and (2) supports business/marketing objectives. Our goal is to make
comprehension and decision-making clear to others.

16. VIDEOS
Genre
Drama
Comedy
Horror
Documentary
Actor
Gender
Decade
Country
Awards
PHOTOS
Event
Holidays
Work
Vacation
Family
Friends
People
Family
Friends
Strangers
Celebrities
Content Classifications

17. Information Architecture for finding a cookie recipe:
Cookies — Chocolate —
Nuts
Citrus
Spice
Chocolate Chip —
Checkerboard
Double Chocolate
Snowcaps
Recipe —
Title
Ingredients
Method
Yield
This type of IA is also called a content hierarchy.

18. Things to consider and document
User-facing
Name, Title
Content
Description
Content
Classification
Know what you are working with: define your content and IA before
designing navigation!
“Super Guru”
Support managers
who can solve
escalated
problems
“Super Helper”
Support staff in
the store and on
the phone with in-
depth product
knowledge.
“Guest”
In-store or online
Customers
Public Employee Employee

19. WHO WHAT WHEN WHERE WHY HOW
Roles Data Event type Geo-location Goal lists Instructions
Orgs or
groups
Entities,
objects,
concept type
Event details
Location
diagrams
Goal
relationships
Process, task
lists
(Role)
relationships
Materials
Event
structures
Location
details
Rules format
Process
detail
Role or
Group details
Specifications
Event
durations
Distances Rules details
Relationships
to tools
Examples of content to classify:

20. Example IA:

21. Example IA:

22. Example IA structure before adding content:

23. Example IA:
This is part of a specification from a UX designer to a programming team
showing “classes” for different areas of a website.
In database design:
ENTITY = a distinguishable real-world
object, tangible or intangible, that exists.
ATTRIBUTE = describes the elementary
feature, quality, characteristic of an entity.
Entity = Customer
Attributes = Name, Gender, Phone, Email
Entity = Car Model
Attributes = Year, Trim Package, Interior
Color, Exterior Color