HCI REVIEWER

UNIT 1: PRINCIPLE OF HUMAN WHAT IS HCI?

COMPUTER INTERACTION ❖ concentrates on the study of
human factors
Lecture 1 ❖ study of human factors started
during the Second World War
HCI by the US army.
❖ a discipline concerned with the ❖ Usability was born because of
design, evaluation and badly designed arms that
implementation of interactive caused “friendly fire” during war.
systems for humans use and
with the study of major
phenomena surrounding them
(ACM SIGCHI, 1992, p. 6)
❖ study of interaction between
people (users) & computer
❖ Interaction between users &
computers occurs at the user
interface
HCI is Not About
Golden Principle in HCI - “people
❖ making the interface look pretty
should come first”.
❖ only about desktop computers
❖ something that would be nice to
do but usually there’s no time for
HCI consists of three parts: it
❖ Human: could be an individual
user or a group of users. HCI is About
❖ Computer: could be any ❖ understanding the users
technology ranging from the ❖ understanding users tasks
general desktop computer to a ❖ understanding the surrounding
large scale computer system. environment
❖ Interaction: any direct or ❖ GUI requirements gathering and
indirect communication analysis
between a human and computer ❖ design prototype
❖ evaluate the system
 Why is usability important?
The Goals of HCI A Good user-interface can:
❖ is to develop or improve the ❖ Earn a company billions.
safety, utility, effectiveness, ❖ Increase users loyalty.
efficiency and usability of ❖ Increase users trust.
systems that include computers. ❖ Makes users happy.
❖ to produce usable and safe
systems, as well as functional A Bad user-interface can:
systems. In order to fulfill that, ❖ Be annoying, embarrassing,
developers must attempt to: frustrating, and even deadly.
➢ Understand how people ❖ Increase mistakes in data entry
use technology and system operation.
➢ Achieve efficient, effective, ❖ Makes functions become
and safe interaction completely inaccessible.
➢ Put people first ❖ System failure because of user
■ People needs, rejection.
capabilities and
preferences should Why is HCI Important in the Context
come first of WWW?
■ People should not ❖ Competition is very close
have to change the ❖ Comparison is easily possible(ex:
way that they use a Online Shop)
system. Instead, the ❖ Users who can’t find the product
system should be in the shop can not buy it
designed to match ❖ Users who are not able to fill in
their requirements correctly the order form are not
going to buy
What is Usability?
A usable system is: It is not Simple to Make Good User
❖ easy to use Interfaces
❖ easy to learn Basic misconceptions:
❖ easy to remember how to use ❖ If I (the developer) can use it,
❖ effective to use everyone can use it
❖ efficient to use ❖ If our non-technical staff can use
❖ safe to use it, everyone can
❖ enjoyable to use ❖ Good user interfaces are applied
common sense
❖ A system is usable if all style
guidelines are met
Lecture 2 The Importance of HCI
❖ Can prevent accidents
Disciplines Contributing to ❖ Health and safety concerns
Human-Computer Interaction ❖ Can reduce the cost of customer
HCI (CALPSADEESC): training and support
❖ Cognitive Psychology ❖ Direct correlation between HCI
❖ Social & Organizational and sales
Psychology ❖ Can provide you a job
❖ Ergonomics & Human Factors
❖ Engineering Fact
❖ Design Fletcher Buckley “85% of Software
❖ Anthropology projects are either late or delivered
❖ Sociology without satisfying the specification.”
❖ Philosophy
❖ Linguistics Reasons for Failures
❖ Artificial Intelligence Projects in general fail for various
❖ Computer Science reasons:
❖ lack of senior management
Is HCI really Important? commitment
Real life example: ❖ lack of user involvement
A pilot shuts down the wrong engine ❖ lack of user requirements
and the plane crashes (as happened specifications
near Leicestershire, in England on the ❖ poor project planning and team
M1 motorway in 1989), this is obviously problems
more serious. 47 died.
Traditional approaches to system
Direct correlation between HCI and development
sales ❖ Concerned with producing
Examples: software, software specification,
NYNEX- a telecommunication company maintainability, and testing
in Italy ❖ Generally considers the interface
❖ Purpose was to increase the to be just another software
performance of helpdesk office component.
❖ Decided to improve the usability
of the helpdesk operator interface Example of traditional approach
❖ Reduced the process time 1 (RADITO):
second per call 1. Requirements specification
RESULT : $ 3,000,000 benefit / year 2. Analysis
3. Design
4. Implementation
 5. Testing
6. Operation and maintenance

Introduction to User Centered

Approach
This approach normally involves a
number of key activities throughout the
development of the software including:
❖ Involving users
User Centered Development
❖ Obtaining their feedback on the
design
1. Data Collection
❖ Providing prototypes for system
❖ Data recording
evaluation and re-design in light
➢ Using media
of user feedback and comments
❖ Interviews
➢ Stakeholder interviews
User Centered Approach
➢ Subject Matter Expert
❖ Real users involved at each
interviews
step of the process
➢ User and customer
❖ Find out about the users before
interviews
requirement specification
❖ Questionnaires
❖ Design and implementation
➢ Surveys, product reviews
❖ Review (usability test) with the
❖ Literature review
users
➢ Studying existing systems

The Life Cycle for Interactive

2. Data Analysis
Systems
❖ Requirement analysis
User needs:
➢ Formal specifications of
1. Requirements specification
the system
2. Analysis
❖ User analysis
3. Design
➢ Identifying and
4. Implementation
understanding the user
5. Testing
❖ Task analysis
6. Operation and maintenance
➢ Steps user take to
accomplish this task
❖ Lots of feedback
❖ Functional analysis
❖ Cannot assume a linear
➢ Functions that system
sequence of activities as in the
perform to help the users
waterfall model
carry out their task
3. Prototyping
Advantages of Prototyping:
❖ Users are actively involved in the
development
❖ It provides a better system to
users
❖ The users get a better
understanding of the system
being developed
❖ Errors can be detected much
earlier UNIT 2: INERACTION DESIGN BEST
❖ Quicker user feedback is PRACTICES
available leading to better
solutions Lecture 3

4. Design 5 Dimensions of Interaction Design

❖ Goals
➢ Achieving goals 1. Words
❖ Users and systems - Language is the core of
➢ Understanding the raw interaction and communication
materials: computer and - Appropriate wording must be
human observed.
❖ Limitations
2. Visuals
➢ Accepting limitations of
humans and of design - Are equally important to the copy,
since the experience suffers if the
5. Evaluation words and appearance do not
❖ Testing the usability, complement one another
functionality and acceptability - Must use appropriate visual tools
of an interactive system to convey the right message.
❖ Expert evaluation
➢ Evaluation by Subject 3. Objects/Space
Matter Experts
- Space creates the context for
interactions with the right look,
feel, and relationship between all
❖ User evaluation on-screen elements.
➢ Evaluation by user or
4. Time
customer
- Time is what users interact within.
 - Ex. Loading Screen time knows how to accomplish their
goals.
5. Behavior ● Interaction design makes you
- This is how users and the think beyond human-to-computer
interface act and react. interfaces and embrace
human-design.
NOTE:
The first three dimensions allow us to
interact with it. (Tangible)
The last two dimensions define the
interaction.

The Interactive Imperative

The What & Why of Interaction

Designs
● Interaction is the essence of all
user experiences.
● It is the conversation between
your product and your user The 5 Pillars of Interaction Design

5 concepts to be critical for even the

most basic interaction design

1. Goal-driven Design
● In every design discipline,
the artist must first
acknowledge their
constraints, and then
● In today’s world of devise a solution.
infinite-scrolling websites and ● The goals of interaction
touch-driven mobile apps, you design becomes very
must understand interaction people-centric.
design (IxD) in order to create ● 3 fundamental tactics for
user experiences that feel fluid designing for your target
and lifelike. user:
● UI is what the user actually sees. ❖ Personas
● IxD is concerned with how users ➢ Personas are fictional
engage with the UI, and how that characters created from
UI will respond so that users the behaviors and
 psychologies of your target 4. Learnability
users. ● a user would remember
➢ Personas come in handy every function after only a
as a reference when single use.
making crucial design ● the reality is that familiarity
decisions. and intuition must be
consciously designed into
The reason why the brain work like the interface.
this, has to do with cognitive biases;
5. Feedback & Response Time
specifically, What You See Is All
● Feedback is the heart of
There Is (WYSIATI).
interaction.
When combined, they form ● If user interaction is a
Characters. conversation between your
user and the product, then
❖ User Scenarios your product better
➢ user scenarios explain participate in a friendly,
how the personas act interesting, and helpful
when using the site. manner.
❖ Experience Maps
➢ chronicle all the different
conditions surrounding a
single interaction,
including emotions and
external circumstances.

2. Usability The Fundamentals of Language in

● the bare minimum of lxD
interaction design
3. Affordances & Signifiers - Words are the foundation of
● a function should speak for interaction design. Content is like
itself, and suggest its own water
use a) Greeting
● Signifiers are what hint at - It explains what the site is and
the affordance recommends a good first step
● One of the most common
signifiers is the blue
underline for link text.
b) Navigation Lecture 4
- It tells users where they are and
suggests new or lesser known Personas
options to deepen the user’s ● These are one of the most
experience. popular tools in user research,
and are a great way to create
shared understanding about
users.
● But they are useless unless
people know what they are and
how to utilize them.

Why a Workshop?
● In order for personas to be
c) Suggesting Actions
effective, there would need to be
- Words in menus, on buttons, and
shared understanding across the
within instructions are all
whole company (not limited to
necessary to the usability of your
product people) about what
product
personas are, how they are
created and how they can be
used.
● Workshops not only increased
empathy for users and
understanding about the
personas across the company,
but having a variety of
participants from across different
d) Providing Service
functions work together resulted
- Along the same lines as the
in some great product
actionable functions, wording
improvement ideas.
also plays a vital role in certain
services. Workshop Goals:
1. Empathize with the user
- The ability to recognize,
understand, and share the
thoughts and feelings of
another person, animal, or
fictional character.
2. Ideate ways to improve their
experience
 3. Discover how users differ from User Scenario vs User Stories
your expectations.
4. Inefficient and Efficient personas. ● User Scenario are:
➢ short narratives (they have
Brainstorm Ideas to Improve the a plot)
Persona’s Experience ➢ dive into motivations,
● Practice empathizing with the needs and barriers in the
user. context of how your users
● It is a good idea to create a How would use your design,
Might We statement based on the product, or feature.
point of view created in the last ➢ detail out what users
step. would likely experience as
they proceed toward using
Reinforcing the Importance of an ideal solution
Personas ● User stories:
➢ Are short
● This workshop is a great way for
➢ 1 sentence long
people unfamiliar with the user
➢ statements that describe a
research and personas to realize
user’s goal and follow a
the importance of having a
very specific format (As a ,
shared understanding about who
I want , so that .)
users are.
UNIT 3: USER SCENARIOS AND What do you need to create a User
STORYBOARDING Scenario?

Lecture 1

What is a user scenario?

How do you create a User Scenario?
● Are detailed descriptions of a
user – typically a persona – that 1. Book a meeting with
describe realistic situations participants who feel they
relevant to the design of a understand your users well.
solution. - This could be with others
● Teams can appreciate user at your company, or even
interactions in context, helping actual users.
them to understand the practical 2. Conduct a brainstorming
needs and behaviors of users. session
● note that user scenarios are not - broken up into 3 distinct
User Stories. parts
❖ Context and goal:
 ● Who is this person? documented and shared
● What skills do they with the rest of your
have or don’t have? company.
● What tools are they
familiar with? Example of a User Scenario
● Where are they
when this scenario
takes place?
● What are the
circumstances
leading up to this
point?
● What are their
goals? Why?
❖ Problem and current
process:
●
❖ New process:
● What are the steps
they go through
with this new
process? Or how
will they do things?
● How does this new Tips for great User Scenarios
process help them
achieve their goals ● Use these scenarios as context
or solve their for tasks in your usability tests,
problems? and at the end of each task, ask
3. Prioritize them your participant if the scenario
- prioritize which scenarios made sense to them or is
best represent your something they often go through.
product and business ● Focus on the user’s goal, not the
goals. task. This can help designers
4. Draw them out (Optional) open their mind and come up
- great way to help with unique and innovative ideas
communicate your user
The What, Why, & When of
scenarios to your team.
Storyboarding in UX Design
5. Document and share them
- Make sure your final, ● Storyboarding is a way to explore
prioritized scenarios are these scenarios
 ➢ Visually plot with the whole animation
➢ creating an experience for team.
the entire team ● Some filmmakers and directors
➢ a way to illustrate also use it to visualize movie
expectations shots.
● Through these storyboards teams
learn more about personas, Storyboards in product design
problems they are trying to solve,
● storyboards help filmmakers and
and highlight questions that
animators a lot
stakeholders might have earlier in
● The UX storyboard can help
the process
visually predict and explore the
What is a storyboard? user experience with a product. It
visualizes how people would
● A way of graphically organizing a interact with a service or app.
story that shows a sequence of ● A UX storyboard can also help
events presented visually. understand users current
● They are meant to tell a story and motivations and experiences
illustrate the process and connected to a certain problem.
experience of an event. ● The UX storyboard can help
● It’s a concept credited to Walt visually predict and explore the
Disney studios in the 1930s user experience with a product. It
which they used to visualize the visualizes how people would
sequence of a plot. interact with a service or app.
● Applied to UX, storyboarding ● A UX storyboard can also help
allows us to walk through the understand users current
user journey, similar to motivations and experiences
experience mapping where we connected to a certain problem.
uncover insights about the ● Depending on the purpose of the
different scenarios in which users storyboard and on its audience,
may find themselves interacting these images can be quick,
with our product/design. low-fidelity sketches or elaborate
drawings.
● The caption describes the user’s
actions, environment, emotional
state, device, and so on.
● Because the image is the primary
content in a storyboard, captions
● Storyboarding also easily are concise and don’t typically
communicates the basic shots, exceed two bullet points.”
scenes, camera movement and
Important aspects of storyboarding -After the first user
include: interviews or field
research, it can also
● Setting the scene and the summarize your
environment the character is findings superbly.
in. ➢ While building the product
➢ For example, Tracy in the - Model the user
classroom, morning time, interaction with a
with a few students in the product based on
space. data gathered from
● The user persona. user testing,
➢ Who are they and what interviews or
are some of their pain analytics. Here, we
points? Include emotions can speak of both
in the process. existing or
● Identify the goal. developing
➢ What is the problem they products.
are trying to solve and how - A UX storyboard
do they get there? shows their
● Narrative arch. embeddedness in
➢ A storyboard is a story — daily situations, as
make sure to include a well as the
beginning, middle, and scenarios where
end. people use them.
When to storyboard Important note: Drawing skills don’t
matter!
● There are two typical situations
tend to encourage creating a UX ● Before starting to craft a first UX
storyboard. storyboard, keep in mind it does
➢ During the discovery NOT require a super-skilled
phase of a new product illustrator nor drawing ability at
- In creating a all!
completely new ● So, what ARE we aiming for?
product or service, Telling the user story in detail.
storyboarding can ● For that, we don’t need anything
summarize and spectacular; some easily
explain existing understandable sketches will do
user stories and the job perfectly well
problems really
well.
UNIT 4: COLOR THEORY IN WEB UI ● Following Newton’s findings, the
DESIGN study of color advanced to cover
the properties of color in its two
Lecture 1 forms—i.e., print/paint and
screen/light—and in a variety of
“Color! What a deep and mysterious fields, from art to astronomy. A
language, the language of dreams.” color’s properties are:
Paul Gauguin, Famous ➢ Hue – How it appears
post-Impressionist painter (e.g., “is green”).
➢ Chroma – How pure it is:
What is Color Theory
i.e., if it has shades (black
● Collection of rules and guidelines added), tints (white added)
which designers use to or tones (gray added).
communicate with users. ➢ Lighting – How pale or
● Through appealing color saturated it appears
schemes in visual interfaces.
Use a Color Scheme and Color
● Designers use a color wheel and
Temperature for Design Harmony
refer to extensive collected
knowledge about human optical ● In screen design, designers use
ability, psychology, culture and the additive color model, where
more red, green and blue are the
primary colors.
Color is in the Beholders’ Eyes
● Just as you need to strategically
- Sir Isaac Newton established place images and other elements
color theory when he invented in visual design, your color
the color wheel in 1666. Newton choices likewise should optimize
understood colors as human your users’ experience in
perceptions—not absolute attractive interfaces that have
qualities—of wavelengths of light high usability
● When starting your design
process, you can consider using
any of these main color schemes:
❖ Monochromatic – Take
one hue and create other
elements from different
shades and tints of it.
❖ Analogous – Use three
colors located beside one
another on the color wheel
(e.g., orange,
 yellow-orange and yellow ❖ Square – A variant of
to show sunlight). A tetradic; you find four
variant is to mix white with colors evenly spaced on
these to form a “high-key” the color wheel (i.e., 90°
analogous color scheme apart). Unlike tetradic,
(e.g., flames). square schemes can work
❖ Complementary – Use well if you use all four
“opposite color” colors evenly.
pairs—e.g.,
blue/yellow—to maximize
contrast.
❖ Split-Complementary (or
Compound Harmony) –
Add colors from either side
of your complementary
color pair to soften
contrast.
❖ Triadic – Take three colors
which are equally distant
on the color wheel (i.e.,
120° apart: e.g.,
red/blue/yellow). These
colors may not be vibrant,
but the scheme can be as ● Colors must reflect your design’s
it maintains harmony and goal and brand’s personality.
high contrast. It’s easier to ● Apply color theory to optimize a
make visually appealing positive psychological impact on
designs with this than with users.
a complementary scheme. ● Carefully determine how the
❖ Tetradic – Take four colors color temperature (i.e., your use
that are two sets of of warm, neutral and cool colors)
complementary pairs (e.g., reflects your message.
orange/yellow/blue/violet)
Use Color Theory to Match What Your
and choose one dominant
Users Want to See
color. This allows rich,
interesting designs. ● The right contrast is vital to
However, watch the catching users’ attention in the
balance between warm first place.
and cool colors. ● The vibrancy you choose for
your design is likewise crucial to
 provoking desired emotional colors (black, white, gray).
responses from users. Warm colors are more
● How they react to color choices stimulating, while cool ones feel
depends on factors such as more calming.
gender, experience, age and
culture. Red
● In all cases, you should design
➢ The most stimulating color, red
for accessibility – e.g., regarding
is used to catch attention and
redgreen color blindness.
raise alarm.
● Through UX research, you can
➢ As an energizing color, and it be
fine-tune color choices to
used to symbolize power and
resonate best with specific users.
even youth, but this makes it
● That’s why you must also design
ill-advised for sites striving for a
to meet your market’s
relaxed feel.
expectations geographically.
● For example, blue—an industry Orange
standard for banking in the
West— also has positive ➢ Orange retains some of red’s
associations in other cultures. energizing properties, but to a
● However, some colors can evoke lesser degree, making a bit
contradictory feelings from calmer.
certain nationalities Overall, you ➢ It’s commonly used to show
should use usability testing to cheerfulness and playfulness
confirm your color choices.
Yellow
The Emotional Impact of Each Color
➢ The impact of yellow varies with
● As far back as the middle ages, its vibrancy (light or dark
researchers have been shades), but in general it is
documenting the impact of colors. usually warming and energetic.
● In the intervening centuries, they ➢ Bright yellow is extremely
devised the same useful best stimulating, middle shades are
practices that apply not only to more welcoming, and darker
web design, but also the worlds shades (such as gold) give an air
of art, architecture, advertising, of antiquity and timelessness
and almost every other visual
industry. Green
● Colors are divided into warm
➢ The bridge between warm and
colors (reds, oranges, and
dark colors, green is a pleasing
yellows), cool colors (blues
mix of energy and relaxation.
and purples), and neutral
 ➢ It typically signifies positive it can create feelings of power
growth, and in Western culture and sophistication
represents money and
environmental themes.

Light Blue

➢ The first of the cool colors, light White

blue is friendly and inviting, but
➢ As a primary color, white gives off
also safe.
an air of cleanliness, purity,
➢ Popular social sites like
and virtue.
Facebook and Twitter both take
➢ As a secondary color, it draws
advantage of this welcoming
attention to more stimulating
color.
elements, making it ideal for
Dark Blue supporting roles

➢ Dark blue is still calming, but it Gray

tends to be more somber and
➢ Just like its intermediary role
reliable than light blue – a more
between black and white, gray
down-to-earth color favored by
gives the impression of
companies known for
neutrality.
professionalism
➢ However, in an expert’s hands,
Purple changing its shade can give it
varying degrees of black’s
➢ The color of royalty, purple attention-drawing and white’s
conjures sensations of luxury, attention repellent qualities,
sometimes even decadence. making it a uniquely powerful tool
➢ Lighter shades exude romance, to the master designer
while darker ones can represent
more mysterious elements

Black

➢ Black is the strongest of all

colors, which is why it’s almost
always used for the font color of
text.
➢ While it will support the other
colors used around it, on it’s own
UNIT 5: WHAT DOES A UX DESIGNER General functions that a UX designer can
be expected to perform, including:
ACTUALLY DO?
● Conducting user research
UX design
● Creating user personas
● focuses on the interaction between
real human users and everyday ● Determining the information
products and services, such as architecture of a digital product
websites, apps, and even coffee
machines. ● Designing user flows and wireframes

● It’s an extremely varied discipline, ● Creating prototypes

combining aspects of
psychology,business, market ● Conducting user testing
research, design, and technology

● Donald Norman came up with the ➢ It is important to be aware that UX

term “user experience”. designers are not typically
responsible for the visual design of a
UX designer do product.
● Make products and technology ➢ Rather , they focus on the journey
usable, enjoyable, and accessible that the user takes and how the
for humans. product is structured to facilitate this
● Work as part of a wider product journey.
team, and will often find themselves Typical tasks and processes of a UX
bridging the gap between the user, designer
the development team, and key
business stakeholders. 1. Conducting user research
● Advocate for the end user or - Initial stage in the UX design
customer. process is where the research
(magic) happen
● As for the kinds of projects you’ll
work on, this will vary dramatically - Get a brief from the client or their
from company to company, as well manager asking them to do some
the size of your team, and your project research
priorities.
- Scope out the project, identifying
● Designing websites, mobile apps, exactly who you’re designing for and
and software, or even designing for what the users’ goals and
voice, AR and VR devices. challenges are in relation to the
product.
● Focus on service design rather than
tangible products (designing the 2. Personas and information
overall experience of using public architecture
transport or staying in a hotel) - Create user persona

- Where you delve deeper into what

tasks each persona wants to
perform and why
- Start thinking about the kind of 5. Visual Design
content needed and how it will be - While some UX designers will also
structured across the website or app specialize in visual design, it tends
to fall under user interface (UI)
- A good information architecture design
makes sure that the user can easily
find what they’re looking for and - The final imagery, color schemes,
intuitively navigate from one page to icons, and typography will usually be
the next without too much thought. taken care of by a UI designer.

3. User flows and wireframes - There will be refinements, small

- User flows (basic flowcharts) which changes, new releases, feedback to
visualize the complete path a user gather and analytics to discuss with
takes when using a product, from the team.
entry point right through to the final
interaction - The UX design process is highly
iterative, and a career in UX is as
➢ User flows- map out the much about collaboration and
entire user journey coordination as it is about design.

➢ Wireframes- provide a Skills does a UX designer need

two-dimensional outline if a
single screen/page ● Technical and design skills (WIP):
4. Prototyping and user testing ○ Wireframing
- Prototype is simply a scaled down
version of your product. ○ Prototyping

- Enables you to test your designs ○ Interpreting data and

feedback
before they get developed.
● Soft skills (PACET):
- Prototypes range from the simplest
of paper models to the more ○ Adaptability
realistic, high fidelity interactive
prototypes which closely mimic the ○ Communication
final product.
○ Empathy
- Testing your prototypes on real
○ Problem-solving
users helps to highlight any design
flaws before you create the final ○ Teamwork
product.

- Several rounds of testing could take

➢ As a UX designer, it’s important that
place before the design is
you can collaborate effectively with
completely right. those around you —from clients and
stakeholders to developers and
- Once it is, the new product is finally fellow designers, all the way through
ready to go into development. to the end user.
UNIT 6: WIREFRAMING Wireframing benefits

Wireframes - Connect clients, stakeholders, designers &

developers
● Simple diagrams that show
placement of elements within an ● Reach Consensus
interface
● Solicit Feedback
Creating wireframes
● Stay on Track
Things to keep in mind:
● Missing Content or Features
● Fight the urge to make them look
pretty

● Solicit feedback early and often Wireframes for designers

● Always keep the user in mind ● Developing the UI from a wireframe

● Make liberal use of notes and

annotations

● Don’t be afraid to experiment

A Basic Wireframe

● Keep it simple

● Use placeholders

○ Text
Wireframes for developers
○ Images
● Creating wireframes for technical
requirements
CONTENT WIREFRAMING FOR Few common wireframing methods
RESPONSIVE DESIGN described in the free Guide to
Wireframing:
Overview of Wireframing
● Sketching
● People often interchange terms like - Most basic method is to draw your
wireframes, sketches, and mockups ideas on paper
to refer to rough design work.
- Fast and intuitive
● Sketches- roughest

● Wireframes-bit more structured

● Mockups- mid- to low-fidelity

Wireframe

● Framework of simple, low-fidelity

designs that explore content
structure before “formal” wireframes.

● Helps us focus on a site’s structure

so we know what we’re going to
build.
● Presentation software
● By planning with wireframes, - Using Powerpoint or Keynote
designers can build a blueprint of the - Draw a few boxes on a blank slide
project without being distracted by
pixel perfection too early in the
process

Methods of wireframing

● Wireframes come in many forms,

some of which aren’t digital.

● We prefer sketching on paper and ● Wireframing tools

then wireframing digitally: we fail - Specialized software designed
quickly on paper, then improve ideas specifically for wireframing facilitates
as wireframes (which can be shared the entire process
and made interactive). - Downside is they typically cost
money.
● Should choose the method that’s
most suitable to your product,
accounting for your time and
resources
“Choosing the best method of building a traditional method of building one
wireframe always depends on how you product to completion
intend to use it. ”
- builds multiple, simpler minimum
Wireframing in the process viable products for quick testing for
smarter iteration
1. Traditional Process

- (Wireframe ▶Mockup ▶ Prototype)

- wireframe originates from processes

reminiscent of waterfall design
methods

- fidelity and functionality increase

linearly in phases.

● Wireframing makes rapid

prototyping more effective.

● Due to the nature of quickly

This process relies on the specialization building, testing and
of each phase: recycling prototypes, an
interactive wireframe (lo-fi
● The wireframing phase specializes prototype) works better in
in outlining and formalizing a big this role than prototypes of
picture. higher fidelity.
● The mockup phase specializes on 3. Early Coding
the visual details.
- (Wireframe ▶ Coded Prototype)
● The mockup phase specializes on
the visual details. - can go straight from a wireframe into
an early-stage coded prototype
If you’re stuck with the waterfall method,
you can still use paper, Photoshop, or a - This method works best for projects
wireframing tool. Just don’t spend too much with unique technical requirements
time, since change can occur when you that need to consider coding as soon
least predict it. as possible, but is also a preference
of designers who are confident in
2. Rapid Prototyping their coding ability and want to get
- (Wireframe ▶ Prototype) the ball rolling.

- result of the Agile design strategy,

rapid prototyping forgoes the
 Introducing the Content - Websites built around content, with
Wireframe no extra frills or distractions,
succeed because they deliver what
The content wireframe concept is people want with as little friction as
rather simple to understand: possible.
- This mentality called upon designers
Fall in love with the user. Don’t fall in to rethink their approach. But it really
love with the technology isn’t complicated. In fact, it involves
three steps:

1. Create a content inventory.

2. Create a visual hierarchy of the

survivors of that list.

3. Construct the content wireframe

based on the visual hierarchy.

- What it tends to do is to pull the

client’s attention away from what
“thing” goes where and focuses his
● Content wireframes do just or her attention on what is important:
that. the flow of information
● They block out general Creating a Content Inventory
content categories and force
you to design from the ● Wireframes are not what they used
content outwards. to be.
● It’s about divergent exploration,
● Screens today range from 3” creating a more structured sketch of
smartphones to 27” monitors concepts to bounce around with
and beyond. The landscape other product team members.
gets more diverse every ● The key word is structure, or giving
year. form to vague ideas. And the key to
that is content.
● To make the same website
work under unpredictable
circumstances, designers
needed a new mental model
about design.

● The technique was dubbed

responsive web design.

Responsive Web Design ● A content wireframe outlines the

material that people actually want
- Forces us to consider design from a when they visit your site.
content-first approach ● Even if the prose isn’t final or the
- People use their devices on the go. photos have yet to be shot, at least
They want information. They want it having an idea of what’s to come is
now. critical to keeping users engaged.
 Luckily developing a content ○ Will they browse until they
inventory isn’t hard, though it find something interesting, or
may take some initial effort. are they hunting for a
particular fact?
1. Luckily developing a content
inventory isn’t hard, though it ○ What does the business
may take some initial effort. need to convey?
2. Then decide which pieces of
information should go on the The answers vary per project, but the
same page, which may need process is universal:
new pages... and which
should be rewritten or 1. Determine what the users should get
deleted altogether. from reading or using the website.
3. Finally, assign someone to
be responsible for each page 2. Use the content inventory we just
or piece of information. created to frame “destinations.” or
points in the user experience at
Determining a Visual Hierarchy which people get what they want.

● A visual hierarchy is the aesthetics 3. Use design to solve the problem of

that give information a sense of how to get people from A to B.
order
● It leads users around a page, Conclusion
starting with an attention-grabbing
element – usually an image or a ● They are in a place in the workflow
heading – and suggests where they between the Content Inventory and
should look next. the LoFi wireframes
● We use this to organize the content
audit spreadsheet into a content ● This is because their purpose is to
wireframe. simply establish an information
● Remember that content wireframes hierarchy and, if the client is
establish an information hierarchy involved, to get him or her to think
and make people think more about more about the “concept” of content
the concept of information flow than and information flow than the actual
the content itself. content itself
● Having a content audit does more
than put us in the mindset of building
out wireframes – it gives us a rough
idea of the space we need to allow
for each piece of information.

● These things are a part of an

iterative process that can and should
change.
● more of a “How about...”
conversation than a “Here’s how...”
● We begin the process by setting conversation.
priorities.
○ What do people need to
know most? Least?