SlideShare uma empresa Scribd logo
1 de 59
Baixar para ler offline
Hacking UX
A young designer’s
illustrated primer
Austin Govella
@austingovella
www.austingovella.com
slideshare.net/austingovella/hacking-uxv1ag
HAckinG UX: An illUstrAted primer, by AUstin GovellA – @AUstinGovellA 2
there’s a dirty secret in the turf war between agile,
lean, and waterfall: they each use the same product
development process. What’s different isn’t their
process, but how they apply design activities in
different ways to eke out different design value.
so how can you alter the design process? even
better, how can you customize the process to
provide more value for the way your organization
works? How should you change the design process
from sprint to sprint to get the most value out of
your design activities?
How do you hack user experience?
HAckinG UX: An illUstrAted primer, by AUstin GovellA – @AUstinGovellA 3
Design is all about value. it transfers value from
one person to another. design insures you have an
experience: at the end, you’re different than when
you started. design makes this difference. specific
knobs and levers control how you can create value
with design.
in this presentation, we’ll learn how five levers —
models, fidelity, annotation, communication, and
audience — work together. We’ll see how agile, lean,
and waterfall teams apply these levers differently at
different times to create different value from design.
We’ll learn UX’s component parts, so we can start to
hack the user experience.
Three Teams (a story)
one sprint, three teams, lots of differences
HAckinG UX: An illUstrAted primer, by AUstin GovellA – @AUstinGovellA 5
2. tHree teAms
team one, daily scrums, and a two
week sprint.
We were adding functionality for
accessing auto-generated data quality
reports. because similar functionality
existed elsewhere in the app, the team
got together, discussed the scenarios
and agreed to use an existing design
pattern on the new screen.
We sketched a few screens on the
whiteboard. We essentially designed the
feature through conversation.
Team 1, quality conversations
We handled follow-up questions around
how users would access the new screen
with a couple of hallway conversations.
We pushed the change, and it was good
enough to get out the door.
HAckinG UX: An illUstrAted primer, by AUstin GovellA – @AUstinGovellA 6
2. tHree teAms
We were redesigning our user groups
interface: create and edit groups; add,
edit, and remove members; and adjust
group permissions. it was a key piece
of functionality.
i put together a full spec. 20-30 pages
of flows, wireframes, component details
and variations, and lots and lots of
annotation.
the specification described changes to
labels, changes to navigation, changes
to flows, a couple of new totally
screens, a couple of new components,
and a couple of screens with some
small changes.
to be honest, none of the changes were
complex enough to require a full spec.
And it wasn’t for QA. the tester was on
the scrum team, testing code as it was
written.
but... the product manager worked on
the West coast, and i was in Austin.
Team 2, group specifications
And, the changes had potential political
fallout and needed to be sold to the rest
of the organization.
the specification allowed the team to
have more concrete discussions with
the distant product manager, and it also
showed how the changes affected the
product’s overall, holistic experience.
However, the spec was probably most
likely created because i needed a
more visual, comprehensive way to
walk through the problems, see the
changes, and understand how they
affected the whole. I got down into the
weeds because it was the weeds that
mattered.
HAckinG UX: An illUstrAted primer, by AUstin GovellA – @AUstinGovellA 7
2. tHree teAms
For the third team, i had two explicit
duties:
1. i was not assigned to the team.
2. i was not designing an interface.
i was there for crazy checks and to
make sure the team didn’t engineer
themselves into a corner we couldn’t
design out of later.
We were delivering Facebook apps that
allowed our customers to embed our
application functionality into Facebook.
no one on the team had ever done a
Facebook app, and no one had even
touched pHp in ages.
i came in a few days after planning
to consult on best practices and the
broader information architecture. the
first deliverable was a set of wireframed
list components.
Team 3, three Facebook comps
We used these wireframes in a meeting
to telegraph the design requirements
that were going to emerge in the near
future, so the team could make sure the
new feature would be ready. this was
easy, and the engineering team was
already on top of it.
the second set of deliverables were
three high-fidelity visual designs of the
new components. We didn’t create the
comps just so we could show and sell
them to our customers. We wanted to
be sure we built what we sold.
HAckinG UX: An illUstrAted primer, by AUstin GovellA – @AUstinGovellA 8
2. tHree teAms
Have you worked on agile teams at
more than one organization?
For example, i worked on agile teams at
three separate companies: the World
bank, comcast interactive, and convio.
Have you worked on more than one
agile team at the same organization?
For example, i worked on two agile
teams at comcast interactive: one
building comcast.net and another
building xFinity.
If you’ve worked on more than one
agile team, did each team use the
same process? Or was the process
different?
Although i worked on each team at the
same time for the same company on
the same product, each of these three
teams highlight set of differences:
• A different process
• A different deliverable
• A different way to design
When i walked into each planning
meeting, how did we know to make the
process different? How did we know
what deliverables? How did we change
the way we designed?
How did i know what
the team would need
from me?
Four Models
A team has four concerns
HAckinG UX: An illUstrAted primer, by AUstin GovellA – @AUstinGovellA 10
3. WHAt every teAm needs
OFirst, we concern ourselves with the User.
some suggest all design should be user-centered, but they would be wrong.
HAckinG UX: An illUstrAted primer, by AUstin GovellA – @AUstinGovellA 11
3. WHAt every teAm needs
psecond, we concern ourselve with the Interface.
When some talk about big Upfront design, this is usually what they’re talking about. they would also be wrong.
HAckinG UX: An illUstrAted primer, by AUstin GovellA – @AUstinGovellA 12
3. WHAt every teAm needs
When we examine how a User uses an interface
through time, we are looking at an Interaction.
When some people say you should only test real code with real users, they’re talking about interactions. they’re also wrong.
HAckinG UX: An illUstrAted primer, by AUstin GovellA – @AUstinGovellA 13
3. WHAt every teAm needs
if we examine how interactions feed into, affect,
and relate to others, we are dealing with a System.
sadly, architects are almost the only people who care about systems.
HAckinG UX: An illUstrAted primer, by AUstin GovellA – @AUstinGovellA 14
3. WHAt every teAm needs
For every project, everyone on your
team already has an assumption about
the User, the interface, the interaction,
and the system.
your assumptions about these four
models form your mental model about
how the entire system works.
What happens if you have one mental
model about the interface, and your
teammate has another? How will you
build the same thing?
to make sure you build the same thing,
you have to talk to each other. you have
to share your models with one another.
As long as everyone on the team shares
the same understanding, as long as the
team sees the User, the interface, the
interaction, and the system in the same
way, then can you build something
together.
Give everyone the same context,
and they can make complimentary
decisions. Shared vision is what
enables more agile, more lean, and
more balanced teams.
Teams need to share the same vision
HAckinG UX: An illUstrAted primer, by AUstin GovellA – @AUstinGovellA 15
3. WHAt every teAm needs
We can take these four models — the
User, the interface, the interaction, and
the system — map them back to our
three teams, and explore how we shared
and discussed these models in each
team.
team User Interface interaction system
Quality conversations Assumed Sketches verbalized Assumed
Group specifications Assumed Wireframes verbalized Assumed
Facebook comps Assumed Comps verbalized Assumed
Although each team shared an
understanding of the Users, interfaces,
interactions, and systems, that
doesn’t mean each team documented
everything.
Having worked together for a while,
each team already possessed a shared
understanding of the Users and the
system. the teams didn;t need to share
and discuss them, so the Users and
systems were assumed.
similarly, while each team shared and
discussed the interface models, we
didn’t need to create explicit models of
the interactions. the teams verbalized
the interactions. We talked about them:
on this screen, when the user clicks
here, they go to this screen.
the real difference in how each team
created a shared understanding lays in
how we chose three different ways to
discuss the interface:
1. sketches
2. Wireframes
3. comps
each team chose a different method to
share the interface model.
HAckinG UX: An illUstrAted primer, by AUstin GovellA – @AUstinGovellA 16
3. WHAt every teAm needs
on every single one of your projects,
you’ve been asked to choose how to
communicate the interface.
How do you choose between sketches,
wireframes, and comps?
sketches are quick and lean, but comps
have more detail.
When is a comp better than a
wireframe?
For example, when do you need to
spend extra time hashing out the visual
design?
When is a sketch not enough?
How do you know if you need the extra
finesse you can show in a wireframe?
these three teams in the same
company, on the same product, in the
same sprint, with the same UX lead
chose three different ways to share the
interface:
• A sketch
• A wireframe
• A visual comp
How did each team know what
deliverable would be enough? Why did
some teams stay simple with a sketch
while others got more complex with
wireframes and comps?
How did we know how
complex our models
should be?
Wandering the desert of the real
HAckinG UX: An illUstrAted primer, by AUstin GovellA – @AUstinGovellA 18
1. Fidelity
Fidelity describes how close a model is
to the real thing.
When we discuss how much fidelity a
model has, we’re talking about how
similar it is to the real thing. How
possible is it for someone to confuse it
for the real thing?
When our three teams shared their
models of their interfaces in different
ways — as sketches or wireframes or
comps — we were showing models with
different fidelities.
What is fidelity?
HAckinG UX: An illUstrAted primer, by AUstin GovellA – @AUstinGovellA 19
1. Fidelity
sketch wireframe visual comp
As we move from sketches to
wireframes to visual comps, our model
of the interface moves from more
abstract to more concrete. each model
of the interface becomes more like the
real, live product.
lower fidelity higher fidelity
HAckinG UX: An illUstrAted primer, by AUstin GovellA – @AUstinGovellA 20
1. Fidelity
When our model looks more like the real
thing, it has visual Fidelity.
it turns out, there are four types of
fidelity we can consider:
1. visual fidelity
2. behavioral fidelity
3. content fidelity
4. contextual fidelity
Four types of fidelity
HAckinG UX: An illUstrAted primer, by AUstin GovellA – @AUstinGovellA 21
1. Fidelity
the most obvious difference between
the wireframe and the comp is that the
comp looks more like the real product
than the sketch or the wireframe.
lower visual fidelity uses broad strokes
to envision generalized silhouettes.
models with higher visual fidelity crave
more and more pixel-perfection until
you can’t distinguish them from the real
thing.
When developing prototypes and proofs
of concept, visual fidelity is one of the
questions you ask yourself: how much
fidelity does this prototype need?
wireframe visual comp
Visual fidelity
like all fidelity, the higher the visual
fidelity, the easier it is for someone to
understand. you can see this in action
in your career: some clients just don’t
“get it” when they see a wireframe. they
have to see a comp.
HAckinG UX: An illUstrAted primer, by AUstin GovellA – @AUstinGovellA 22
1. Fidelity
behavioral fidelity refers to how
accurate the behavior is. do all the links
work? or just some of them? do the
accordion panels really show/hide, or
are you faking it?
When working with prototypes and
proofs of concept, you often ask
yourself about the behavioral fidelity.
Are you trying to evaluate one specific
interaction? then none of the other
behavior needs to be accurate.
is the prototype your documentation?
then maybe all of the links and
transitions need to be pretty close.
like visual fidelity, the more behavioral
fidelity your model has, the easier it is
to understand the object’s behavior.
Behavioral fidelity
no visible behavior links, search forms, and a dropdown
if you’ve ever wildly gesticulated to
describe a transition to someone, you
understand how much easier that
transition is to communicate when you
can show someone an example.
HAckinG UX: An illUstrAted primer, by AUstin GovellA – @AUstinGovellA 23
1. Fidelity
most discussions of fidelity stop at
visual or behavioral fidelity. Usually, this
is because those types of fidelity have
the largest impact to how long it takes
to implement.
but content fidelity can be just as
important. content fidelity describes
how accurate the content is in your
model.
visual designers will often use “greeked
text”, like lorem ipsum, in visual
comps. Greeked text has less content
fidelity than real, sample content.
like visual and behavioral fidelity, the
choice here is usually driven by time. it
takes longer to create realistic content.
like visual and behavioral fidelity,
there’s a trade-off. visual designers who
use greeked text are only concerned
with visual form. Any letters will do.
information architects want to create
clear labels. How can you evaluate your
labels in a design if you use greeked
text?
greeked content
sample content
Content fidelity
HAckinG UX: An illUstrAted primer, by AUstin GovellA – @AUstinGovellA 24
1. Fidelity
Contextual fidelity
you won’t usually hear anyone complain
about contextual fidelity, but you’ve
seen it in action.
contextual fidelity refers to the accuracy
of the context when you share your
model.
When you print out the entire comp
for the review, instead of showing it in
a browser window, the comp has less
contextual fidelity.
When you push code to production to
see how users respond in real time, you
have more contextual fidelity than if you
recruited 5-7 users for a usability test
in a lab.
the entire comp
the comp in a browser window
HAckinG UX: An illUstrAted primer, by AUstin GovellA – @AUstinGovellA 25
1. Fidelity
measuring is an optimistic idea.
Although you can’t measure fidelity in
real units, you can quantify fidelity with
fuzzy units.
i like to use t-shirt sizes:
• small
• medium
• large
you can combine the four types of
fidelity with t-shirt sizes to describe how
much fidelity an object has.
Measuring fidelity
type of Fidelity s m l
visual
behavioral
content
contextual
HAckinG UX: An illUstrAted primer, by AUstin GovellA – @AUstinGovellA 26
1. Fidelity
often, when you talk about fidelity,
you end up thinking about visual
and behavioral fidelity, so it’s easy
to imagine fidelity only applying to
interface models.
With our three teams, the primary
difference between the sketches, the
wireframes, and the comps was the
visual and behavioral fidelity.
However, it’s important to consider the
fidelity of your User, interaction, and
system models. your team’s shared
vision will reflect the fidelity of these
models, and different levels of fidelity
provide different advantages and
disadvantages to the team when you’re
building something.
Fidelity applies to all four models
HAckinG UX: An illUstrAted primer, by AUstin GovellA – @AUstinGovellA 27
1. Fidelity
if you recall, none of our three teams
really discussed their users. We had a
shared understanding of who they were
born out of many months and years of
working on the product.
instead of sharing and discussing our
shared vision of who the User was, we
had an assumed understanding. our
User model was based on anecdotes,
ancient evidence, and feature requests.
Fidelity for User models
often, User fidelity becomes an issue
when creating personas. the user
experience community debates how
much and what kind of research you
need to craft “real” personas.
And at the other end, 37signals designs
products for people like themselves.
Here are a few examples of how fidelity
affects your User model.
type of Fidelity lower fidelity Higher fidelity
visual abstract, iconic user pic nice photograph
behavioral what you think they User does analytics
content random description demographic data
contextual testing in a lab testing at the user’s home
image continuum from scott mccloud: http://www.scottmccloud.com/4-inventions/triangle/04.html
HAckinG UX: An illUstrAted primer, by AUstin GovellA – @AUstinGovellA 28
1. Fidelity
type of Fidelity lower fidelity Higher fidelity
visual boxes and arrows storyboard
behavioral storyboard prototype
content boxes page archetypes
contextual prototype production
not sure you recall, but on the first
team where we were working on adding
data quality reports, we had some
questions come up about how Users
would navigate to the new feature:
where would they come from and where
would they go.
We handled this with conversation, a
really low-fidelity way to discuss the
interaction.
Fidelity for Interaction models
Whether you discuss the flow, sketch it
out, or craft a prototype, the fidelity of
your model affects how accurately you
can evaluate the interaction.
screen
name
description
screen
name
description
screen
name
description
screen
name
description
n
y
see Flow:
Flow name
shorthand for Ui flows from 37signals: http://37signals.com/svn/posts/1926-a-shorthand-for-designing-ui-flows
HAckinG UX: An illUstrAted primer, by AUstin GovellA – @AUstinGovellA 29
1. Fidelity
type of Fidelity lower fidelity Higher fidelity
visual words page archetypes
behavioral concept map site map
content screen archetypes specific screens
contextual site map production
in the user experience world, a site map
is one of the most common system
models you will encounter.
Fidelity for System models
site maps are actually a type of concept
model and occasionally enterprising
designers will crank out a concept map
to communicate or evaluate non-screen
aspects of a system.
shorthand for Ui flows from 37signals: http://37signals.com/svn/posts/1926-a-shorthand-for-designing-ui-flows
HAckinG UX: An illUstrAted primer, by AUstin GovellA – @AUstinGovellA 30
1. Fidelity
Just as everyone on the team will always
have an assumption about the User,
interface, interaction, and system
models, your vision of those models
always has a certain level of fidelity.
How do we choose between high or low
fidelity?
How do we know when we need the
extra detail?
How do we know when the models we
have don’t have enough fidelity?
After we’ve chosen between high and
low fidelity, how do we discover if we
were right or wrong?
each of the three teams chose interface
models with a different fidelity, from
sketches to wireframes to comps.
Adjusting fidelity is the easiest way to
adffect the required length of the design
process.
How do we know how
much fidelity we need?
Audience
Who you talkin’ to?
HAckinG UX: An illUstrAted primer, by AUstin GovellA – @AUstinGovellA 32
1. AUdience
do you remember the three teams?
team one was adding data quality
reports, team two was redesigning user
group management, and team three
was building Facebook apps.
With each of the teams, we assumed
the User and system models and
managed the interaction models via
conversation.
the result was three different interface
models. team one went with sketches.
team two used wireframes. team three
decided to do full comps.
but it wasn’t just the deliverables
that were different. each team had a
different audience.
HAckinG UX: An illUstrAted primer, by AUstin GovellA – @AUstinGovellA 33
1. AUdience
if we compare the audience for each
team’s interface model, it’s clear
that each team was working with a
drastically different audience.
team interface model Audience
Quality conversations sketches the team
Group specifications Wireframes product council
Facebook comps comps customers
HAckinG UX: An illUstrAted primer, by AUstin GovellA – @AUstinGovellA 34
1. AUdience
While your team needs to share a vision
to build something great, design is
always about your hypothesis. your
team’s vision is your shared hypothesis.
the team believes the User with
this interface will accomplish this
interaction within this system.
However, because design always
concerns itself with a User, our
hypotheses must always have an
audience.
Who will validate the hypothesis? Who
will evaluate whether or not the design
will work?
A hypothesis requires an audience
HAckinG UX: An illUstrAted primer, by AUstin GovellA – @AUstinGovellA 35
1. AUdience
the key question really is: Who will
evaluate whether the design will work?
there are four possible answers to that
question:
1. yourself
2. your team
3. your organization
4. your customers
the audience that will evaluate your
User, interface, interaction, and system
models determines the highest fidelity
you need and the lowest fidelity you can
get away with.
in general, the farther away your
audience is, the higher fidelity your
models should be.
Four audiences customersorganizationteamself
Fidelity is all about the distance to your audience.
HAckinG UX: An illUstrAted primer, by AUstin GovellA – @AUstinGovellA 36
1. AUdience
We can see distance at work with our
three teams.
team interface model Audience evaluation
Quality conversations sketches the team
needed enough detail
to build
Group specifications Wireframes product council
needed more detail
to sell internally
Facebook comps comps customers
needed to see the
real thing
your distance from your audience helps
describe how much shared vision you
have with the audience.
if i want to sketch a screen and then
evaluate it myself, i understand what i
was thinking.
if i want my teammate to look at my
sketch, i might need to enhance its
fidelity by explaining what this or that
squiggle is.
if i walk over to the ceo and show him
my sketch, i will likely have to explain a
greater amount of the sketch.
Audience and shared vision
the reason for this discrepancy is that i
share more vision with my teammates
than i do with the ceo.
Whatever vision you do not share with
the audience means they can’t interpret
what you mean. you have to explain it to
them. that means more fidelity.
HAckinG UX: An illUstrAted primer, by AUstin GovellA – @AUstinGovellA 37
1. AUdience
it’s not just distance that affects the
fidelity of your models. each audience
is also disposed towards answering
questions in different ways.
team interface model Audience Question
Quality conversations sketches the team can we build this?
Group specifications Wireframes product council
can we make this
change that impacts
the entire product?
Facebook comps comps customers Would buy this?
For example, let’s say we wanted to
know whether an interface was usable.
you could priobably sketch an interface
and show it to another user experience
practioner. With only the sketch, they
could offer you advice on how usable
the interface would be.
Alternately, if you wanted your
customers to evaluate how usable the
interface is, you couldn’t use a sketch.
to test usability, you at least need a
prototype with some degree of visual,
behavioral, and content fidelity.
Audience and hypothesis
similarly, if you want the ceo to sign
off on the redesign, they’ll probably
require high, visual fidelity comps. they
simply can’t tell whether or not the logo
is big enough from your sketch.
the hypothesis you are trying to test
has a lot to do with the fidelity your
audience will need.
HAckinG UX: An illUstrAted primer, by AUstin GovellA – @AUstinGovellA 38
1. AUdience
based on your audience and the
hypothesis you want to test, you will
need to share your models at higher or
lower fidelities.
Although your distance from the
audience — the amount of vision you
share — and the question you’re asking
drive fidelity, other aspects of the
audience also have an impact.
How does team location
impact fidelity?
Are we co-located, or do we have remote
team members?
How do time zones and schedules
change how we share models?
Just as each of our three teams
had a different audience, how we
communicated with the audience was
different, too.
our audiences context is just as
important as their distance and the
hypothesis we want to test.
How does how we
communicate affect
fidelity?
Communication
Who you talkin’ to?
HAckinG UX: An illUstrAted primer, by AUstin GovellA – @AUstinGovellA 40
1. commUnicAtion
it’s easy to understand how we
need different fidelity based on our
Audience’s distance and the type of
hypothesis we’re trying to test, but
we’re missing the obvious things about
our audience:
• time
• place
• reach
these three facets of our audience
can have as much impact on fidelity as
anything else.
HAckinG UX: An illUstrAted primer, by AUstin GovellA – @AUstinGovellA 41
1. commUnicAtion
When we communicate with our
audience can have an important impact
on fidelity.
Are we communicating in real time,
synchronously, like a back-and-forth
conversation?
or, are we communicating
asynchronously, like an email
correspondence?
or, is it a combination of both same
time and shifted time, like an im
conversation we share and then both
leave and come back to?
Time
our three teams demonstrate how a
time shift requires more fidelity.
the data quality team that used
sketches did all of its communication
synchronously.
in contrast, team 2 sent the new group
specifications to the product countil
and didn’t hear back for a couple of
days. that gap was enough to require
wireframes.
team interface model Audience time
Quality conversations sketches the team synchronous
Group specifications Wireframes product council asynchronous
Facebook comps comps customers asynchronous
HAckinG UX: An illUstrAted primer, by AUstin GovellA – @AUstinGovellA 42
1. commUnicAtion
When you speak synchronously, you
can share and discuss large volumnes
of information as part of the back-and-
forth of normal conversation.
Any gaps between your understanding
and your audience’s — any gaps in
the vision you share can be managed
through conversation.
but when communication is
asynchronous, the only way to manage
that gap is by writing things down,
drawing things, coding things.
Anything you can do to make the model
more real, to make something you can
give to someone else to check.
And it’s important to note that
asynchrous communication doesn’t just
happen when you’re talking with other
people, with outsiders.
one of the biggest uses of
documentation is so the team can
remember their decisions. three
months from now, you might not
remember whether that link went to a
new page or opened a lightbox.
the documented design allows you to
have a tinme-shifted conversation with
yourself.
HAckinG UX: An illUstrAted primer, by AUstin GovellA – @AUstinGovellA 43
1. commUnicAtion
Place
location has a similar impact on fidelity
as time does.
Are we communicating to someone who
is next to us? someone in the same
room?
or, are we communicating with
someone far away?
Are working with a variety team mates
who work from different locations?
if you remember, one of the reasons i
created user group wireframes for team
2 was that the product manager lived in
california while the rest of the team was
in Austin.
the additional fidelity in the wireframes
helped supplement the gesturing and
body language we couldnt share over a
conference call.
team interface model Audience place
Quality conversations sketches the team co-located
Group specifications Wireframes
product manager,
product council
co-located and
remote
Facebook comps comps customers remote
if you’re co-located, you can stick
sketches on a wall. if everyone is
remote, you have to snap and upload
them somewhere.
if you’re remote, quick questions have
to come through im or email. if you’re
co-located, you can pop your head over
the cube wall.
HAckinG UX: An illUstrAted primer, by AUstin GovellA – @AUstinGovellA 44
1. commUnicAtion
Reach
reach describes how far your audience
may share your model.
i like to call this the ceo effect. this
is what happens when your boss asks
for that whiteboard sketch from last
meeting. your boss sends it to their
boss who shows it to someone else,
who doesn’t understand or like what
they see, who sends the sketch and the
complaint to the ceo who promptly
emails you an edict vetoing the design.
reach is governed by the same logic
that surrounds time and place. if you
don’t know whether you will be around
to explain your model to whoever ends
up with it, then you need to put your
explanation into the model.
your model needs more fidelity.
For team two, we knew the wireframes
would be shared with the product
council, and who knows who they would
share them with. so, we made sure to
annotate the wireframes, so people who
saw them could deciper what was going
on.
similarly, the Facebook comps were
going out to the sales team to show
customers, so we made sure they had
as much visual fidelity as was possible..
team interface model Audience reach
Quality conversations sketches the team team
Group specifications Wireframes
product manager,
product council
organization
Facebook comps comps customers anyone
HAckinG UX: An illUstrAted primer, by AUstin GovellA – @AUstinGovellA 45
1. commUnicAtion
Just like we can measure fidelity, we can
use t-shirt sizes to measure how much
communication we need:
• small
• medium
• large
you can combine the four types of
fidelity with t-shirt sizes to describe how
much communication a model needs.
Measuring communication
type of
communication
s m l
time
place
reach
HAckinG UX: An illUstrAted primer, by AUstin GovellA – @AUstinGovellA 46
1. commUnicAtion
so far, we’ve discussed factors like the
audience, time, place, and reach that
are prime factors driving how much
fidelity we need.
We’ve also seen examples of high and
low fidelity for each of the types of
models — the User, the interface, the
interaction, and the system.
but we haven’t discussed how to adjust
our fidelity up or down.
How can we compensate for audience
distance?
How do we communicate clearly
with asynchronous and remote
teammembers?
We can’t just hack the user experience
process willy-nilly. We have to provide
our audience with the information they
need in order to help us evaluate our
hypothesis.
How do we control
fidelity in our models?
Information
What the audience needs to know
HAckinG UX: An illUstrAted primer, by AUstin GovellA – @AUstinGovellA 48
1. inFormAtion
once you understand you need to
change the fidelity of one of your
models, there are four types of
information you can adjust to raise or
lower the fidelity:
1. Tacit information
tacit information deals with what the
audience already knows about the
model.
2. Explicit information
sometimes, you include instructions on
a form. this is an example of explicit
information.
3. Implicit information
implicit information refers to what the
audience can intuit about the model.
For example, the affordance of a
skeuomorphic button provides implicit
infomation.
4. Annotation
When all else fails, if you adjusting tacit,
explicit, or implicit information isn’t
enough to adjust the fidelity, you can
always add annotation.
Just like fidelity and communication, we
can have a go at measuring information.
type of information s m l
tacit
explicit
implicit
Annotation
controlling the amount of information
in our models is the critical step in
controlling fidelity.
Four types of information
HAckinG UX: An illUstrAted primer, by AUstin GovellA – @AUstinGovellA 49
1. inFormAtion
tacit information is what allowed team
one to work off a few sketches we threw
together during the planning meeting.
everyone on the team shared a vision of
the User and the system. shared vision
is tacit understanding.
sometimes your interface will assume
the User will have certain tacit
understandings. For example, many
apps use red as a warning color. this
relies on Western culture’s association
of red with danger.
Tacit information
tacit information leverages the
audience’s culture. this could be
culture-at-large, or it could be team
culture. or organizational culture.
the magnifying glass icon used to
post a search is an example of tacit
information.
if you’re able to identify critical tacit
information about a model that your
audience doesn’t have, then you can try
and augment the model with explicit or
implicit information or add annotation.
HAckinG UX: An illUstrAted primer, by AUstin GovellA – @AUstinGovellA 50
1. inFormAtion
explicit information refers to what your
audience percieves in your model before
they begin to perceive the implicit
information.
instructions and calls-to-action like,
“view my profile page” are examples of
explicit information.
explicit and implicit information go
hand-in-hand with visual and content
fidelity. the higher your visual and
content fidelity, the more explicit
information you have in your model.
Explicit information
sometimes if your interface isn’t clear,
you can add explicit information. With
team one, we added a line of situational
text at the top of the screen that
explained the reports we listed on the
page.
HAckinG UX: An illUstrAted primer, by AUstin GovellA – @AUstinGovellA 51
1. inFormAtion
implicit information covers all the things
that are learnable about your model.
For example, Users learn twitter’s blue
post button. the first time you visit the
site, you don’t k ow what that button
does, if anything.
Fortunately, your implicit knowledge
tells you that contrasting colors
sometimes indicate interactive triggers,
so you know to click the button. And
posting a status is such a core activity
to the experience, you very quickly learn
how to post your status.
Implicit information
many usability and other
communication problems occur
because important information isn’t
learnable or discoverable. What you
hope will be implicit to the audience,
isn’t.
like explicit information, the higher your
visual and content fidelity, the more
implicit information is possible.
HAckinG UX: An illUstrAted primer, by AUstin GovellA – @AUstinGovellA 52
1. inFormAtion
you can’t really annotate production
code. i mean, you can. i suppose that’s
what happens when you open a new
app and they walk you through a feature
tour.
but that’s not really annotation.
Annotation is a special kind of
additional information you can add to
a model to fill in any gaps that aren’t
covered by tacit, explicit, or implicit
information.
Annotation is the special tool you use
to bridge the gaps created by different
audiences in different contexts.
Annotation
HAckinG UX: An illUstrAted primer, by AUstin GovellA – @AUstinGovellA 53
1. inFormAtion
Putting it all together
HAckinG UX: An illUstrAted primer, by AUstin GovellA – @AUstinGovellA 55
1. inFormAtion
Model:
What type of model do we want to evaluate? User, interface,
interaction, or system?
Audience:
Who do we want to evaluate our model with? yourself, team,
organization, or customers?
Fidelity
How realistic must our models be in
order to be validated?
Information
What does our audience need to know
to validate our models?
Communication
How will we communicate the models?
Content
How accurate is the model’s content?
Visual
How visually accurate is the model?
Behavior
How accurate is the model’s behavior?
Context
How accurate is the model’s context?
Tacit
What does the audience already know
about the model? (culture)
Explicit
What can the audience learn from the
model? (instructions)
Implicit
What can the audience intuit about the
model? (affordances)
Annotation
What needs to be annotated to
understand the model?
Time
Are you communicating in real time or
asynchronously?
Place
is the audience remote or co-located
with you?
Reach
Will your audience share the model or
keep it private?
s s s
content
visUAl
beHAvior
conteXt
tAcit
eXplicit
implicit
AnnotAtion
time
plAce
reAcH
m m m
l l l
s s s
m m m
l l l
s s s
m m m
l l l
s s
m m
l l
Title
HAckinG UX: An illUstrAted primer, by AUstin GovellA – @AUstinGovellA 56
1. inFormAtion
Model:
What type of model do we want to evaluate? User, interface,
interaction, or system?
Audience:
Who do we want to evaluate our model with? yourself, team,
organization, or customers?
Fidelity
How realistic must our models be in
order to be validated?
Information
What does our audience need to know
to validate our models?
Communication
How will we communicate the models?
Content
How accurate is the model’s content?
Visual
How visually accurate is the model?
Behavior
How accurate is the model’s behavior?
Context
How accurate is the model’s context?
Tacit
What does the audience already know
about the model? (culture)
Explicit
What can the audience learn from the
model? (instructions)
Implicit
What can the audience intuit about the
model? (affordances)
Annotation
What needs to be annotated to
understand the model?
Time
Are you communicating in real time or
asynchronously?
Place
is the audience remote or co-located
with you?
Reach
Will your audience share the model or
keep it private?
s s s
content
visUAl
beHAvior
conteXt
tAcit
eXplicit
implicit
AnnotAtion
time
plAce
reAcH
m m m
l l l
s s s
m m m
l l l
s s s
m m m
l l l
s s
m m
l l
Title
Data conversations
Interface - sketches Team
X X X X X X X X X
HAckinG UX: An illUstrAted primer, by AUstin GovellA – @AUstinGovellA 57
1. inFormAtion
Model:
What type of model do we want to evaluate? User, interface,
interaction, or system?
Audience:
Who do we want to evaluate our model with? yourself, team,
organization, or customers?
Fidelity
How realistic must our models be in
order to be validated?
Information
What does our audience need to know
to validate our models?
Communication
How will we communicate the models?
Content
How accurate is the model’s content?
Visual
How visually accurate is the model?
Behavior
How accurate is the model’s behavior?
Context
How accurate is the model’s context?
Tacit
What does the audience already know
about the model? (culture)
Explicit
What can the audience learn from the
model? (instructions)
Implicit
What can the audience intuit about the
model? (affordances)
Annotation
What needs to be annotated to
understand the model?
Time
Are you communicating in real time or
asynchronously?
Place
is the audience remote or co-located
with you?
Reach
Will your audience share the model or
keep it private?
s s s
content
visUAl
beHAvior
conteXt
tAcit
eXplicit
implicit
AnnotAtion
time
plAce
reAcH
m m m
l l l
s s s
m m m
l l l
s s s
m m m
l l l
s s
m m
l l
Title
Interface - wireframes product mgr/council
X X X X X X X X X
X X X X
X X
X XX X
X
X X X
X X X
HAckinG UX: An illUstrAted primer, by AUstin GovellA – @AUstinGovellA 58
1. inFormAtion
Model:
What type of model do we want to evaluate? User, interface,
interaction, or system?
Audience:
Who do we want to evaluate our model with? yourself, team,
organization, or customers?
Fidelity
How realistic must our models be in
order to be validated?
Information
What does our audience need to know
to validate our models?
Communication
How will we communicate the models?
Content
How accurate is the model’s content?
Visual
How visually accurate is the model?
Behavior
How accurate is the model’s behavior?
Context
How accurate is the model’s context?
Tacit
What does the audience already know
about the model? (culture)
Explicit
What can the audience learn from the
model? (instructions)
Implicit
What can the audience intuit about the
model? (affordances)
Annotation
What needs to be annotated to
understand the model?
Time
Are you communicating in real time or
asynchronously?
Place
is the audience remote or co-located
with you?
Reach
Will your audience share the model or
keep it private?
s s s
content
visUAl
beHAvior
conteXt
tAcit
eXplicit
implicit
AnnotAtion
time
plAce
reAcH
m m m
l l l
s s s
m m m
l l l
s s s
m m m
l l l
s s
m m
l l
Title
facebook comps
Interface - comps product mgr/council
X X X X X X X X X
X X X X
X
X XX X X X
X X XX X X X X
HAckinG UX: An illUstrAted primer, by AUstin GovellA – @AUstinGovellA 59
1. inFormAtion
Thank You

Mais conteúdo relacionado

Mais procurados

Real World Lessons Using Lean UX (Workshop)
Real World Lessons Using Lean UX (Workshop)Real World Lessons Using Lean UX (Workshop)
Real World Lessons Using Lean UX (Workshop)Bill Scott
 
Interaction Design & Rapid Prototyping
Interaction Design & Rapid PrototypingInteraction Design & Rapid Prototyping
Interaction Design & Rapid PrototypingCarolyn Jao
 
Agile Prototyping Best Practices
Agile Prototyping Best PracticesAgile Prototyping Best Practices
Agile Prototyping Best Practicesuxpin
 
User Story Mapping for Minimum Lovable Products
User Story Mapping for Minimum Lovable ProductsUser Story Mapping for Minimum Lovable Products
User Story Mapping for Minimum Lovable Productsuxpin
 
Ux portfolio slideshare
Ux portfolio slideshareUx portfolio slideshare
Ux portfolio slideshareSean Culley
 
Design Spikes for the Dual-Track Agile Process
Design Spikes for the Dual-Track Agile ProcessDesign Spikes for the Dual-Track Agile Process
Design Spikes for the Dual-Track Agile Processuxpin
 
UX Bootcamp @ General Assembly Atlanta
UX Bootcamp @ General Assembly AtlantaUX Bootcamp @ General Assembly Atlanta
UX Bootcamp @ General Assembly AtlantaJacklyn Burgan
 
Lean ux-presentation
Lean ux-presentationLean ux-presentation
Lean ux-presentationDk Guerrero
 
Wireframe and prototyping google Campus talk by Zoe Guiraudon
Wireframe and prototyping google Campus talk by Zoe GuiraudonWireframe and prototyping google Campus talk by Zoe Guiraudon
Wireframe and prototyping google Campus talk by Zoe GuiraudonZoé Guiraudon
 
Better Product Definition with Lean UX and Design Thinking
Better Product Definition with Lean UX and Design ThinkingBetter Product Definition with Lean UX and Design Thinking
Better Product Definition with Lean UX and Design ThinkingJeff Gothelf
 
Peter Mylonas UX Design Portfolio
Peter Mylonas UX Design PortfolioPeter Mylonas UX Design Portfolio
Peter Mylonas UX Design PortfolioPeter E. Mylonas
 
Boas e Más Práticas para Agile UX
Boas e Más Práticas para Agile UXBoas e Más Práticas para Agile UX
Boas e Más Práticas para Agile UXTiago Silva da Silva
 
Kazumi Terada UX Portfolio 2016
Kazumi Terada UX Portfolio 2016Kazumi Terada UX Portfolio 2016
Kazumi Terada UX Portfolio 2016Kazumi Terada
 
SHORT VERSION - Adventures in Agility: How One Online Publisher Changed Their...
SHORT VERSION - Adventures in Agility: How One Online Publisher Changed Their...SHORT VERSION - Adventures in Agility: How One Online Publisher Changed Their...
SHORT VERSION - Adventures in Agility: How One Online Publisher Changed Their...Larry Belmont
 
Adventures in Agility: How One Online Publisher Changed Their Approach to Onl...
Adventures in Agility: How One Online Publisher Changed Their Approach to Onl...Adventures in Agility: How One Online Publisher Changed Their Approach to Onl...
Adventures in Agility: How One Online Publisher Changed Their Approach to Onl...scitationstaff
 

Mais procurados (20)

Real World Lessons Using Lean UX (Workshop)
Real World Lessons Using Lean UX (Workshop)Real World Lessons Using Lean UX (Workshop)
Real World Lessons Using Lean UX (Workshop)
 
Interaction Design & Rapid Prototyping
Interaction Design & Rapid PrototypingInteraction Design & Rapid Prototyping
Interaction Design & Rapid Prototyping
 
Agile Prototyping Best Practices
Agile Prototyping Best PracticesAgile Prototyping Best Practices
Agile Prototyping Best Practices
 
Lean UX
Lean UXLean UX
Lean UX
 
User Story Mapping for Minimum Lovable Products
User Story Mapping for Minimum Lovable ProductsUser Story Mapping for Minimum Lovable Products
User Story Mapping for Minimum Lovable Products
 
Ux portfolio slideshare
Ux portfolio slideshareUx portfolio slideshare
Ux portfolio slideshare
 
Design Spikes for the Dual-Track Agile Process
Design Spikes for the Dual-Track Agile ProcessDesign Spikes for the Dual-Track Agile Process
Design Spikes for the Dual-Track Agile Process
 
UX Bootcamp @ General Assembly Atlanta
UX Bootcamp @ General Assembly AtlantaUX Bootcamp @ General Assembly Atlanta
UX Bootcamp @ General Assembly Atlanta
 
Responsive Design and Joomla!
Responsive Design and Joomla!Responsive Design and Joomla!
Responsive Design and Joomla!
 
UX. How to start?
UX. How to start?UX. How to start?
UX. How to start?
 
Lean ux-presentation
Lean ux-presentationLean ux-presentation
Lean ux-presentation
 
Agile UX
Agile UXAgile UX
Agile UX
 
Wireframe and prototyping google Campus talk by Zoe Guiraudon
Wireframe and prototyping google Campus talk by Zoe GuiraudonWireframe and prototyping google Campus talk by Zoe Guiraudon
Wireframe and prototyping google Campus talk by Zoe Guiraudon
 
Better Product Definition with Lean UX and Design Thinking
Better Product Definition with Lean UX and Design ThinkingBetter Product Definition with Lean UX and Design Thinking
Better Product Definition with Lean UX and Design Thinking
 
Peter Mylonas UX Design Portfolio
Peter Mylonas UX Design PortfolioPeter Mylonas UX Design Portfolio
Peter Mylonas UX Design Portfolio
 
Boas e Más Práticas para Agile UX
Boas e Más Práticas para Agile UXBoas e Más Práticas para Agile UX
Boas e Más Práticas para Agile UX
 
Kazumi Terada UX Portfolio 2016
Kazumi Terada UX Portfolio 2016Kazumi Terada UX Portfolio 2016
Kazumi Terada UX Portfolio 2016
 
Agile UX
Agile UXAgile UX
Agile UX
 
SHORT VERSION - Adventures in Agility: How One Online Publisher Changed Their...
SHORT VERSION - Adventures in Agility: How One Online Publisher Changed Their...SHORT VERSION - Adventures in Agility: How One Online Publisher Changed Their...
SHORT VERSION - Adventures in Agility: How One Online Publisher Changed Their...
 
Adventures in Agility: How One Online Publisher Changed Their Approach to Onl...
Adventures in Agility: How One Online Publisher Changed Their Approach to Onl...Adventures in Agility: How One Online Publisher Changed Their Approach to Onl...
Adventures in Agility: How One Online Publisher Changed Their Approach to Onl...
 

Destaque

Designing Humanity into Your Products
Designing Humanity into Your ProductsDesigning Humanity into Your Products
Designing Humanity into Your ProductsBill DeRouchey
 
Change checklist
Change checklistChange checklist
Change checklistDave Gray
 
Getting Good Designs Built
Getting Good Designs BuiltGetting Good Designs Built
Getting Good Designs BuiltVictor Lombardi
 
Busting Brain Myths for Better Design
Busting Brain Myths for Better DesignBusting Brain Myths for Better Design
Busting Brain Myths for Better DesignChelsea Maxwell
 
Maximum Value IA: creating a larger impact on the business
Maximum Value IA: creating a larger impact on the businessMaximum Value IA: creating a larger impact on the business
Maximum Value IA: creating a larger impact on the businessAustin Govella
 
Undiscovered Public Knowledge and IA
Undiscovered Public Knowledge and IAUndiscovered Public Knowledge and IA
Undiscovered Public Knowledge and IAJim Kalbach
 
Persona scenario design
Persona scenario designPersona scenario design
Persona scenario designBilly Choi
 
UX in Agile: How one team is making it work
UX in Agile: How one team is making it workUX in Agile: How one team is making it work
UX in Agile: How one team is making it workWill Sansbury
 
Taller de experiencia de usuario en el Congreso de Periodismo Digital de FOPE...
Taller de experiencia de usuario en el Congreso de Periodismo Digital de FOPE...Taller de experiencia de usuario en el Congreso de Periodismo Digital de FOPE...
Taller de experiencia de usuario en el Congreso de Periodismo Digital de FOPE...Emiliano Cosenza
 
So…What Do I Make? (Dan Mall)
So…What Do I Make? (Dan Mall)So…What Do I Make? (Dan Mall)
So…What Do I Make? (Dan Mall)Future Insights
 
Ushahidi Toolbox - Assessment
Ushahidi Toolbox - AssessmentUshahidi Toolbox - Assessment
Ushahidi Toolbox - AssessmentUshahidi
 
Diseño de la experiencia de usuario para emprendedores tecnológicos - Proyec...
Diseño de la experiencia de usuario para emprendedores tecnológicos - Proyec...Diseño de la experiencia de usuario para emprendedores tecnológicos - Proyec...
Diseño de la experiencia de usuario para emprendedores tecnológicos - Proyec...Emiliano Cosenza
 
The Experience Gap (UX Camp Edmonton)
The Experience Gap (UX Camp Edmonton)The Experience Gap (UX Camp Edmonton)
The Experience Gap (UX Camp Edmonton)nForm User Experience
 
Style Frameworks - w/o Notes
Style Frameworks - w/o NotesStyle Frameworks - w/o Notes
Style Frameworks - w/o NotesMarti Gold
 
Conversation, Cadence & Culture
Conversation, Cadence & CultureConversation, Cadence & Culture
Conversation, Cadence & CultureLane Goldstone
 
The elements of product success for business leaders
The elements of product success for business leadersThe elements of product success for business leaders
The elements of product success for business leadersNick Myers
 
Como tomar decisões em equipe
Como tomar decisões em equipeComo tomar decisões em equipe
Como tomar decisões em equipeWebgoal
 

Destaque (20)

Designing Humanity into Your Products
Designing Humanity into Your ProductsDesigning Humanity into Your Products
Designing Humanity into Your Products
 
Growth by design
Growth by designGrowth by design
Growth by design
 
Change checklist
Change checklistChange checklist
Change checklist
 
Getting Good Designs Built
Getting Good Designs BuiltGetting Good Designs Built
Getting Good Designs Built
 
Busting Brain Myths for Better Design
Busting Brain Myths for Better DesignBusting Brain Myths for Better Design
Busting Brain Myths for Better Design
 
Product Design Ideas
Product Design IdeasProduct Design Ideas
Product Design Ideas
 
Maximum Value IA: creating a larger impact on the business
Maximum Value IA: creating a larger impact on the businessMaximum Value IA: creating a larger impact on the business
Maximum Value IA: creating a larger impact on the business
 
Undiscovered Public Knowledge and IA
Undiscovered Public Knowledge and IAUndiscovered Public Knowledge and IA
Undiscovered Public Knowledge and IA
 
Persona scenario design
Persona scenario designPersona scenario design
Persona scenario design
 
UX in Agile: How one team is making it work
UX in Agile: How one team is making it workUX in Agile: How one team is making it work
UX in Agile: How one team is making it work
 
Taller de experiencia de usuario en el Congreso de Periodismo Digital de FOPE...
Taller de experiencia de usuario en el Congreso de Periodismo Digital de FOPE...Taller de experiencia de usuario en el Congreso de Periodismo Digital de FOPE...
Taller de experiencia de usuario en el Congreso de Periodismo Digital de FOPE...
 
So…What Do I Make? (Dan Mall)
So…What Do I Make? (Dan Mall)So…What Do I Make? (Dan Mall)
So…What Do I Make? (Dan Mall)
 
Ushahidi Toolbox - Assessment
Ushahidi Toolbox - AssessmentUshahidi Toolbox - Assessment
Ushahidi Toolbox - Assessment
 
Diseño de la experiencia de usuario para emprendedores tecnológicos - Proyec...
Diseño de la experiencia de usuario para emprendedores tecnológicos - Proyec...Diseño de la experiencia de usuario para emprendedores tecnológicos - Proyec...
Diseño de la experiencia de usuario para emprendedores tecnológicos - Proyec...
 
The Experience Gap (UX Camp Edmonton)
The Experience Gap (UX Camp Edmonton)The Experience Gap (UX Camp Edmonton)
The Experience Gap (UX Camp Edmonton)
 
Style Frameworks - w/o Notes
Style Frameworks - w/o NotesStyle Frameworks - w/o Notes
Style Frameworks - w/o Notes
 
Conversation, Cadence & Culture
Conversation, Cadence & CultureConversation, Cadence & Culture
Conversation, Cadence & Culture
 
The elements of product success for business leaders
The elements of product success for business leadersThe elements of product success for business leaders
The elements of product success for business leaders
 
Como tomar decisões em equipe
Como tomar decisões em equipeComo tomar decisões em equipe
Como tomar decisões em equipe
 
Leaving Your Mark
Leaving Your MarkLeaving Your Mark
Leaving Your Mark
 

Semelhante a Hacking UX

Recent UX Success
Recent UX SuccessRecent UX Success
Recent UX SuccessLou Susi
 
Remote First Team Collaboration Tool
Remote First Team Collaboration ToolRemote First Team Collaboration Tool
Remote First Team Collaboration ToolJessica Arevalo
 
Prototyping for tiny fingers
Prototyping for tiny fingersPrototyping for tiny fingers
Prototyping for tiny fingersJulio Pari
 
HoytUX Design Process 2016
HoytUX Design Process 2016HoytUX Design Process 2016
HoytUX Design Process 2016Rob Hoyt
 
World Usability Day 2014 - UX Toolbelt for Developers
World Usability Day 2014 - UX Toolbelt for DevelopersWorld Usability Day 2014 - UX Toolbelt for Developers
World Usability Day 2014 - UX Toolbelt for DevelopersSarah Dutkiewicz
 
1User Interface Development User Interface Dev.docx
1User Interface Development User Interface Dev.docx1User Interface Development User Interface Dev.docx
1User Interface Development User Interface Dev.docxfelicidaddinwoodie
 
UXBASIS – Getting UX integrated
UXBASIS – Getting UX integratedUXBASIS – Getting UX integrated
UXBASIS – Getting UX integratedJames Kelway
 
How to Use Engineers in a UX Department
How to Use Engineers in a UX DepartmentHow to Use Engineers in a UX Department
How to Use Engineers in a UX DepartmentStephen James
 
Agile Protoyping in Academia
Agile Protoyping in AcademiaAgile Protoyping in Academia
Agile Protoyping in AcademiaDavid F. Flanders
 
The process of design
The process of designThe process of design
The process of designimran iqbal
 
Mobile ui design patterns
Mobile ui design patternsMobile ui design patterns
Mobile ui design patternsKevinHao14
 
Uxpin mobile ui_design_patterns_2014
Uxpin mobile ui_design_patterns_2014Uxpin mobile ui_design_patterns_2014
Uxpin mobile ui_design_patterns_2014Akhil Kumar
 
Mobile UI Design Patterns 2014
Mobile UI Design Patterns 2014Mobile UI Design Patterns 2014
Mobile UI Design Patterns 2014Lewis Lin 🦊
 
LIB 251 Final Project- Caroline Helms
LIB 251 Final Project- Caroline HelmsLIB 251 Final Project- Caroline Helms
LIB 251 Final Project- Caroline HelmsCaroline Helms
 
Role of UX Design in Building Products: How I Stopped Designing and Started t...
Role of UX Design in Building Products: How I Stopped Designing and Started t...Role of UX Design in Building Products: How I Stopped Designing and Started t...
Role of UX Design in Building Products: How I Stopped Designing and Started t...Praneet Koppula
 
The UX Toolbelt for Developers
The UX Toolbelt for DevelopersThe UX Toolbelt for Developers
The UX Toolbelt for DevelopersSarah Dutkiewicz
 
Uxpin Why Build a Design System
Uxpin Why Build a Design SystemUxpin Why Build a Design System
Uxpin Why Build a Design SystemLewis Lin 🦊
 
UX and UI Workshops - User Journey
UX and UI Workshops - User JourneyUX and UI Workshops - User Journey
UX and UI Workshops - User JourneyInwedo
 

Semelhante a Hacking UX (20)

Recent UX Success
Recent UX SuccessRecent UX Success
Recent UX Success
 
Remote First Team Collaboration Tool
Remote First Team Collaboration ToolRemote First Team Collaboration Tool
Remote First Team Collaboration Tool
 
Prototyping for tiny fingers
Prototyping for tiny fingersPrototyping for tiny fingers
Prototyping for tiny fingers
 
HoytUX Design Process 2016
HoytUX Design Process 2016HoytUX Design Process 2016
HoytUX Design Process 2016
 
World Usability Day 2014 - UX Toolbelt for Developers
World Usability Day 2014 - UX Toolbelt for DevelopersWorld Usability Day 2014 - UX Toolbelt for Developers
World Usability Day 2014 - UX Toolbelt for Developers
 
1User Interface Development User Interface Dev.docx
1User Interface Development User Interface Dev.docx1User Interface Development User Interface Dev.docx
1User Interface Development User Interface Dev.docx
 
UXBASIS – Getting UX integrated
UXBASIS – Getting UX integratedUXBASIS – Getting UX integrated
UXBASIS – Getting UX integrated
 
Hci 3
Hci 3Hci 3
Hci 3
 
How to Use Engineers in a UX Department
How to Use Engineers in a UX DepartmentHow to Use Engineers in a UX Department
How to Use Engineers in a UX Department
 
Agile Protoyping in Academia
Agile Protoyping in AcademiaAgile Protoyping in Academia
Agile Protoyping in Academia
 
The process of design
The process of designThe process of design
The process of design
 
Mobile ui design patterns
Mobile ui design patternsMobile ui design patterns
Mobile ui design patterns
 
Uxpin mobile ui_design_patterns_2014
Uxpin mobile ui_design_patterns_2014Uxpin mobile ui_design_patterns_2014
Uxpin mobile ui_design_patterns_2014
 
Mobile UI Design Patterns 2014
Mobile UI Design Patterns 2014Mobile UI Design Patterns 2014
Mobile UI Design Patterns 2014
 
Collaborating with UX
Collaborating with UXCollaborating with UX
Collaborating with UX
 
LIB 251 Final Project- Caroline Helms
LIB 251 Final Project- Caroline HelmsLIB 251 Final Project- Caroline Helms
LIB 251 Final Project- Caroline Helms
 
Role of UX Design in Building Products: How I Stopped Designing and Started t...
Role of UX Design in Building Products: How I Stopped Designing and Started t...Role of UX Design in Building Products: How I Stopped Designing and Started t...
Role of UX Design in Building Products: How I Stopped Designing and Started t...
 
The UX Toolbelt for Developers
The UX Toolbelt for DevelopersThe UX Toolbelt for Developers
The UX Toolbelt for Developers
 
Uxpin Why Build a Design System
Uxpin Why Build a Design SystemUxpin Why Build a Design System
Uxpin Why Build a Design System
 
UX and UI Workshops - User Journey
UX and UI Workshops - User JourneyUX and UI Workshops - User Journey
UX and UI Workshops - User Journey
 

Mais de Austin Govella

Architect Taxonomy Systems to Support Organizational Change
Architect Taxonomy Systems to Support Organizational ChangeArchitect Taxonomy Systems to Support Organizational Change
Architect Taxonomy Systems to Support Organizational ChangeAustin Govella
 
Personalizing the User Experience
Personalizing the User ExperiencePersonalizing the User Experience
Personalizing the User ExperienceAustin Govella
 
User Experience Architecture in a Cross-Channel World
User Experience Architecture in a Cross-Channel WorldUser Experience Architecture in a Cross-Channel World
User Experience Architecture in a Cross-Channel WorldAustin Govella
 
Lessons Learned: Global Websites and Applications
Lessons Learned: Global Websites and ApplicationsLessons Learned: Global Websites and Applications
Lessons Learned: Global Websites and ApplicationsAustin Govella
 
UX Critiques (the Houston Startup Design Workshop) - revised
UX Critiques (the Houston Startup Design Workshop) - revisedUX Critiques (the Houston Startup Design Workshop) - revised
UX Critiques (the Houston Startup Design Workshop) - revisedAustin Govella
 
UX: The Power of Getting Things Designed
UX: The Power of Getting Things DesignedUX: The Power of Getting Things Designed
UX: The Power of Getting Things DesignedAustin Govella
 
A Guide to Farming Miracles (for UX teams in tough environments)
A Guide to Farming Miracles (for UX teams in tough environments)A Guide to Farming Miracles (for UX teams in tough environments)
A Guide to Farming Miracles (for UX teams in tough environments)Austin Govella
 

Mais de Austin Govella (9)

Winning UX Workshops
Winning UX WorkshopsWinning UX Workshops
Winning UX Workshops
 
Architect Taxonomy Systems to Support Organizational Change
Architect Taxonomy Systems to Support Organizational ChangeArchitect Taxonomy Systems to Support Organizational Change
Architect Taxonomy Systems to Support Organizational Change
 
Personalizing the User Experience
Personalizing the User ExperiencePersonalizing the User Experience
Personalizing the User Experience
 
User Experience Architecture in a Cross-Channel World
User Experience Architecture in a Cross-Channel WorldUser Experience Architecture in a Cross-Channel World
User Experience Architecture in a Cross-Channel World
 
Lessons Learned: Global Websites and Applications
Lessons Learned: Global Websites and ApplicationsLessons Learned: Global Websites and Applications
Lessons Learned: Global Websites and Applications
 
Abandon agile
Abandon agileAbandon agile
Abandon agile
 
UX Critiques (the Houston Startup Design Workshop) - revised
UX Critiques (the Houston Startup Design Workshop) - revisedUX Critiques (the Houston Startup Design Workshop) - revised
UX Critiques (the Houston Startup Design Workshop) - revised
 
UX: The Power of Getting Things Designed
UX: The Power of Getting Things DesignedUX: The Power of Getting Things Designed
UX: The Power of Getting Things Designed
 
A Guide to Farming Miracles (for UX teams in tough environments)
A Guide to Farming Miracles (for UX teams in tough environments)A Guide to Farming Miracles (for UX teams in tough environments)
A Guide to Farming Miracles (for UX teams in tough environments)
 

Último

Varsha Sewlal- Cyber Attacks on Critical Critical Infrastructure
Varsha Sewlal- Cyber Attacks on Critical Critical InfrastructureVarsha Sewlal- Cyber Attacks on Critical Critical Infrastructure
Varsha Sewlal- Cyber Attacks on Critical Critical Infrastructureitnewsafrica
 
Data governance with Unity Catalog Presentation
Data governance with Unity Catalog PresentationData governance with Unity Catalog Presentation
Data governance with Unity Catalog PresentationKnoldus Inc.
 
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024BookNet Canada
 
Abdul Kader Baba- Managing Cybersecurity Risks and Compliance Requirements i...
Abdul Kader Baba- Managing Cybersecurity Risks  and Compliance Requirements i...Abdul Kader Baba- Managing Cybersecurity Risks  and Compliance Requirements i...
Abdul Kader Baba- Managing Cybersecurity Risks and Compliance Requirements i...itnewsafrica
 
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc
 
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...Nikki Chapple
 
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptxUse of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptxLoriGlavin3
 
Moving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdfMoving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdfLoriGlavin3
 
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxA Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxLoriGlavin3
 
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxThe Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxLoriGlavin3
 
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotesMuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotesManik S Magar
 
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...Wes McKinney
 
Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Farhan Tariq
 
2024 April Patch Tuesday
2024 April Patch Tuesday2024 April Patch Tuesday
2024 April Patch TuesdayIvanti
 
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptxThe Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptxLoriGlavin3
 
Time Series Foundation Models - current state and future directions
Time Series Foundation Models - current state and future directionsTime Series Foundation Models - current state and future directions
Time Series Foundation Models - current state and future directionsNathaniel Shimoni
 
How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.Curtis Poe
 
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24Mark Goldstein
 
How to write a Business Continuity Plan
How to write a Business Continuity PlanHow to write a Business Continuity Plan
How to write a Business Continuity PlanDatabarracks
 
Emixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native developmentEmixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native developmentPim van der Noll
 

Último (20)

Varsha Sewlal- Cyber Attacks on Critical Critical Infrastructure
Varsha Sewlal- Cyber Attacks on Critical Critical InfrastructureVarsha Sewlal- Cyber Attacks on Critical Critical Infrastructure
Varsha Sewlal- Cyber Attacks on Critical Critical Infrastructure
 
Data governance with Unity Catalog Presentation
Data governance with Unity Catalog PresentationData governance with Unity Catalog Presentation
Data governance with Unity Catalog Presentation
 
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
 
Abdul Kader Baba- Managing Cybersecurity Risks and Compliance Requirements i...
Abdul Kader Baba- Managing Cybersecurity Risks  and Compliance Requirements i...Abdul Kader Baba- Managing Cybersecurity Risks  and Compliance Requirements i...
Abdul Kader Baba- Managing Cybersecurity Risks and Compliance Requirements i...
 
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
 
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
 
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptxUse of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
 
Moving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdfMoving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdf
 
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxA Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
 
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxThe Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
 
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotesMuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
 
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
 
Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...
 
2024 April Patch Tuesday
2024 April Patch Tuesday2024 April Patch Tuesday
2024 April Patch Tuesday
 
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptxThe Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
 
Time Series Foundation Models - current state and future directions
Time Series Foundation Models - current state and future directionsTime Series Foundation Models - current state and future directions
Time Series Foundation Models - current state and future directions
 
How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.
 
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
 
How to write a Business Continuity Plan
How to write a Business Continuity PlanHow to write a Business Continuity Plan
How to write a Business Continuity Plan
 
Emixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native developmentEmixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native development
 

Hacking UX

  • 1. Hacking UX A young designer’s illustrated primer Austin Govella @austingovella www.austingovella.com slideshare.net/austingovella/hacking-uxv1ag
  • 2. HAckinG UX: An illUstrAted primer, by AUstin GovellA – @AUstinGovellA 2 there’s a dirty secret in the turf war between agile, lean, and waterfall: they each use the same product development process. What’s different isn’t their process, but how they apply design activities in different ways to eke out different design value. so how can you alter the design process? even better, how can you customize the process to provide more value for the way your organization works? How should you change the design process from sprint to sprint to get the most value out of your design activities? How do you hack user experience?
  • 3. HAckinG UX: An illUstrAted primer, by AUstin GovellA – @AUstinGovellA 3 Design is all about value. it transfers value from one person to another. design insures you have an experience: at the end, you’re different than when you started. design makes this difference. specific knobs and levers control how you can create value with design. in this presentation, we’ll learn how five levers — models, fidelity, annotation, communication, and audience — work together. We’ll see how agile, lean, and waterfall teams apply these levers differently at different times to create different value from design. We’ll learn UX’s component parts, so we can start to hack the user experience.
  • 4. Three Teams (a story) one sprint, three teams, lots of differences
  • 5. HAckinG UX: An illUstrAted primer, by AUstin GovellA – @AUstinGovellA 5 2. tHree teAms team one, daily scrums, and a two week sprint. We were adding functionality for accessing auto-generated data quality reports. because similar functionality existed elsewhere in the app, the team got together, discussed the scenarios and agreed to use an existing design pattern on the new screen. We sketched a few screens on the whiteboard. We essentially designed the feature through conversation. Team 1, quality conversations We handled follow-up questions around how users would access the new screen with a couple of hallway conversations. We pushed the change, and it was good enough to get out the door.
  • 6. HAckinG UX: An illUstrAted primer, by AUstin GovellA – @AUstinGovellA 6 2. tHree teAms We were redesigning our user groups interface: create and edit groups; add, edit, and remove members; and adjust group permissions. it was a key piece of functionality. i put together a full spec. 20-30 pages of flows, wireframes, component details and variations, and lots and lots of annotation. the specification described changes to labels, changes to navigation, changes to flows, a couple of new totally screens, a couple of new components, and a couple of screens with some small changes. to be honest, none of the changes were complex enough to require a full spec. And it wasn’t for QA. the tester was on the scrum team, testing code as it was written. but... the product manager worked on the West coast, and i was in Austin. Team 2, group specifications And, the changes had potential political fallout and needed to be sold to the rest of the organization. the specification allowed the team to have more concrete discussions with the distant product manager, and it also showed how the changes affected the product’s overall, holistic experience. However, the spec was probably most likely created because i needed a more visual, comprehensive way to walk through the problems, see the changes, and understand how they affected the whole. I got down into the weeds because it was the weeds that mattered.
  • 7. HAckinG UX: An illUstrAted primer, by AUstin GovellA – @AUstinGovellA 7 2. tHree teAms For the third team, i had two explicit duties: 1. i was not assigned to the team. 2. i was not designing an interface. i was there for crazy checks and to make sure the team didn’t engineer themselves into a corner we couldn’t design out of later. We were delivering Facebook apps that allowed our customers to embed our application functionality into Facebook. no one on the team had ever done a Facebook app, and no one had even touched pHp in ages. i came in a few days after planning to consult on best practices and the broader information architecture. the first deliverable was a set of wireframed list components. Team 3, three Facebook comps We used these wireframes in a meeting to telegraph the design requirements that were going to emerge in the near future, so the team could make sure the new feature would be ready. this was easy, and the engineering team was already on top of it. the second set of deliverables were three high-fidelity visual designs of the new components. We didn’t create the comps just so we could show and sell them to our customers. We wanted to be sure we built what we sold.
  • 8. HAckinG UX: An illUstrAted primer, by AUstin GovellA – @AUstinGovellA 8 2. tHree teAms Have you worked on agile teams at more than one organization? For example, i worked on agile teams at three separate companies: the World bank, comcast interactive, and convio. Have you worked on more than one agile team at the same organization? For example, i worked on two agile teams at comcast interactive: one building comcast.net and another building xFinity. If you’ve worked on more than one agile team, did each team use the same process? Or was the process different? Although i worked on each team at the same time for the same company on the same product, each of these three teams highlight set of differences: • A different process • A different deliverable • A different way to design When i walked into each planning meeting, how did we know to make the process different? How did we know what deliverables? How did we change the way we designed? How did i know what the team would need from me?
  • 9. Four Models A team has four concerns
  • 10. HAckinG UX: An illUstrAted primer, by AUstin GovellA – @AUstinGovellA 10 3. WHAt every teAm needs OFirst, we concern ourselves with the User. some suggest all design should be user-centered, but they would be wrong.
  • 11. HAckinG UX: An illUstrAted primer, by AUstin GovellA – @AUstinGovellA 11 3. WHAt every teAm needs psecond, we concern ourselve with the Interface. When some talk about big Upfront design, this is usually what they’re talking about. they would also be wrong.
  • 12. HAckinG UX: An illUstrAted primer, by AUstin GovellA – @AUstinGovellA 12 3. WHAt every teAm needs When we examine how a User uses an interface through time, we are looking at an Interaction. When some people say you should only test real code with real users, they’re talking about interactions. they’re also wrong.
  • 13. HAckinG UX: An illUstrAted primer, by AUstin GovellA – @AUstinGovellA 13 3. WHAt every teAm needs if we examine how interactions feed into, affect, and relate to others, we are dealing with a System. sadly, architects are almost the only people who care about systems.
  • 14. HAckinG UX: An illUstrAted primer, by AUstin GovellA – @AUstinGovellA 14 3. WHAt every teAm needs For every project, everyone on your team already has an assumption about the User, the interface, the interaction, and the system. your assumptions about these four models form your mental model about how the entire system works. What happens if you have one mental model about the interface, and your teammate has another? How will you build the same thing? to make sure you build the same thing, you have to talk to each other. you have to share your models with one another. As long as everyone on the team shares the same understanding, as long as the team sees the User, the interface, the interaction, and the system in the same way, then can you build something together. Give everyone the same context, and they can make complimentary decisions. Shared vision is what enables more agile, more lean, and more balanced teams. Teams need to share the same vision
  • 15. HAckinG UX: An illUstrAted primer, by AUstin GovellA – @AUstinGovellA 15 3. WHAt every teAm needs We can take these four models — the User, the interface, the interaction, and the system — map them back to our three teams, and explore how we shared and discussed these models in each team. team User Interface interaction system Quality conversations Assumed Sketches verbalized Assumed Group specifications Assumed Wireframes verbalized Assumed Facebook comps Assumed Comps verbalized Assumed Although each team shared an understanding of the Users, interfaces, interactions, and systems, that doesn’t mean each team documented everything. Having worked together for a while, each team already possessed a shared understanding of the Users and the system. the teams didn;t need to share and discuss them, so the Users and systems were assumed. similarly, while each team shared and discussed the interface models, we didn’t need to create explicit models of the interactions. the teams verbalized the interactions. We talked about them: on this screen, when the user clicks here, they go to this screen. the real difference in how each team created a shared understanding lays in how we chose three different ways to discuss the interface: 1. sketches 2. Wireframes 3. comps each team chose a different method to share the interface model.
  • 16. HAckinG UX: An illUstrAted primer, by AUstin GovellA – @AUstinGovellA 16 3. WHAt every teAm needs on every single one of your projects, you’ve been asked to choose how to communicate the interface. How do you choose between sketches, wireframes, and comps? sketches are quick and lean, but comps have more detail. When is a comp better than a wireframe? For example, when do you need to spend extra time hashing out the visual design? When is a sketch not enough? How do you know if you need the extra finesse you can show in a wireframe? these three teams in the same company, on the same product, in the same sprint, with the same UX lead chose three different ways to share the interface: • A sketch • A wireframe • A visual comp How did each team know what deliverable would be enough? Why did some teams stay simple with a sketch while others got more complex with wireframes and comps? How did we know how complex our models should be?
  • 17. Wandering the desert of the real
  • 18. HAckinG UX: An illUstrAted primer, by AUstin GovellA – @AUstinGovellA 18 1. Fidelity Fidelity describes how close a model is to the real thing. When we discuss how much fidelity a model has, we’re talking about how similar it is to the real thing. How possible is it for someone to confuse it for the real thing? When our three teams shared their models of their interfaces in different ways — as sketches or wireframes or comps — we were showing models with different fidelities. What is fidelity?
  • 19. HAckinG UX: An illUstrAted primer, by AUstin GovellA – @AUstinGovellA 19 1. Fidelity sketch wireframe visual comp As we move from sketches to wireframes to visual comps, our model of the interface moves from more abstract to more concrete. each model of the interface becomes more like the real, live product. lower fidelity higher fidelity
  • 20. HAckinG UX: An illUstrAted primer, by AUstin GovellA – @AUstinGovellA 20 1. Fidelity When our model looks more like the real thing, it has visual Fidelity. it turns out, there are four types of fidelity we can consider: 1. visual fidelity 2. behavioral fidelity 3. content fidelity 4. contextual fidelity Four types of fidelity
  • 21. HAckinG UX: An illUstrAted primer, by AUstin GovellA – @AUstinGovellA 21 1. Fidelity the most obvious difference between the wireframe and the comp is that the comp looks more like the real product than the sketch or the wireframe. lower visual fidelity uses broad strokes to envision generalized silhouettes. models with higher visual fidelity crave more and more pixel-perfection until you can’t distinguish them from the real thing. When developing prototypes and proofs of concept, visual fidelity is one of the questions you ask yourself: how much fidelity does this prototype need? wireframe visual comp Visual fidelity like all fidelity, the higher the visual fidelity, the easier it is for someone to understand. you can see this in action in your career: some clients just don’t “get it” when they see a wireframe. they have to see a comp.
  • 22. HAckinG UX: An illUstrAted primer, by AUstin GovellA – @AUstinGovellA 22 1. Fidelity behavioral fidelity refers to how accurate the behavior is. do all the links work? or just some of them? do the accordion panels really show/hide, or are you faking it? When working with prototypes and proofs of concept, you often ask yourself about the behavioral fidelity. Are you trying to evaluate one specific interaction? then none of the other behavior needs to be accurate. is the prototype your documentation? then maybe all of the links and transitions need to be pretty close. like visual fidelity, the more behavioral fidelity your model has, the easier it is to understand the object’s behavior. Behavioral fidelity no visible behavior links, search forms, and a dropdown if you’ve ever wildly gesticulated to describe a transition to someone, you understand how much easier that transition is to communicate when you can show someone an example.
  • 23. HAckinG UX: An illUstrAted primer, by AUstin GovellA – @AUstinGovellA 23 1. Fidelity most discussions of fidelity stop at visual or behavioral fidelity. Usually, this is because those types of fidelity have the largest impact to how long it takes to implement. but content fidelity can be just as important. content fidelity describes how accurate the content is in your model. visual designers will often use “greeked text”, like lorem ipsum, in visual comps. Greeked text has less content fidelity than real, sample content. like visual and behavioral fidelity, the choice here is usually driven by time. it takes longer to create realistic content. like visual and behavioral fidelity, there’s a trade-off. visual designers who use greeked text are only concerned with visual form. Any letters will do. information architects want to create clear labels. How can you evaluate your labels in a design if you use greeked text? greeked content sample content Content fidelity
  • 24. HAckinG UX: An illUstrAted primer, by AUstin GovellA – @AUstinGovellA 24 1. Fidelity Contextual fidelity you won’t usually hear anyone complain about contextual fidelity, but you’ve seen it in action. contextual fidelity refers to the accuracy of the context when you share your model. When you print out the entire comp for the review, instead of showing it in a browser window, the comp has less contextual fidelity. When you push code to production to see how users respond in real time, you have more contextual fidelity than if you recruited 5-7 users for a usability test in a lab. the entire comp the comp in a browser window
  • 25. HAckinG UX: An illUstrAted primer, by AUstin GovellA – @AUstinGovellA 25 1. Fidelity measuring is an optimistic idea. Although you can’t measure fidelity in real units, you can quantify fidelity with fuzzy units. i like to use t-shirt sizes: • small • medium • large you can combine the four types of fidelity with t-shirt sizes to describe how much fidelity an object has. Measuring fidelity type of Fidelity s m l visual behavioral content contextual
  • 26. HAckinG UX: An illUstrAted primer, by AUstin GovellA – @AUstinGovellA 26 1. Fidelity often, when you talk about fidelity, you end up thinking about visual and behavioral fidelity, so it’s easy to imagine fidelity only applying to interface models. With our three teams, the primary difference between the sketches, the wireframes, and the comps was the visual and behavioral fidelity. However, it’s important to consider the fidelity of your User, interaction, and system models. your team’s shared vision will reflect the fidelity of these models, and different levels of fidelity provide different advantages and disadvantages to the team when you’re building something. Fidelity applies to all four models
  • 27. HAckinG UX: An illUstrAted primer, by AUstin GovellA – @AUstinGovellA 27 1. Fidelity if you recall, none of our three teams really discussed their users. We had a shared understanding of who they were born out of many months and years of working on the product. instead of sharing and discussing our shared vision of who the User was, we had an assumed understanding. our User model was based on anecdotes, ancient evidence, and feature requests. Fidelity for User models often, User fidelity becomes an issue when creating personas. the user experience community debates how much and what kind of research you need to craft “real” personas. And at the other end, 37signals designs products for people like themselves. Here are a few examples of how fidelity affects your User model. type of Fidelity lower fidelity Higher fidelity visual abstract, iconic user pic nice photograph behavioral what you think they User does analytics content random description demographic data contextual testing in a lab testing at the user’s home image continuum from scott mccloud: http://www.scottmccloud.com/4-inventions/triangle/04.html
  • 28. HAckinG UX: An illUstrAted primer, by AUstin GovellA – @AUstinGovellA 28 1. Fidelity type of Fidelity lower fidelity Higher fidelity visual boxes and arrows storyboard behavioral storyboard prototype content boxes page archetypes contextual prototype production not sure you recall, but on the first team where we were working on adding data quality reports, we had some questions come up about how Users would navigate to the new feature: where would they come from and where would they go. We handled this with conversation, a really low-fidelity way to discuss the interaction. Fidelity for Interaction models Whether you discuss the flow, sketch it out, or craft a prototype, the fidelity of your model affects how accurately you can evaluate the interaction. screen name description screen name description screen name description screen name description n y see Flow: Flow name shorthand for Ui flows from 37signals: http://37signals.com/svn/posts/1926-a-shorthand-for-designing-ui-flows
  • 29. HAckinG UX: An illUstrAted primer, by AUstin GovellA – @AUstinGovellA 29 1. Fidelity type of Fidelity lower fidelity Higher fidelity visual words page archetypes behavioral concept map site map content screen archetypes specific screens contextual site map production in the user experience world, a site map is one of the most common system models you will encounter. Fidelity for System models site maps are actually a type of concept model and occasionally enterprising designers will crank out a concept map to communicate or evaluate non-screen aspects of a system. shorthand for Ui flows from 37signals: http://37signals.com/svn/posts/1926-a-shorthand-for-designing-ui-flows
  • 30. HAckinG UX: An illUstrAted primer, by AUstin GovellA – @AUstinGovellA 30 1. Fidelity Just as everyone on the team will always have an assumption about the User, interface, interaction, and system models, your vision of those models always has a certain level of fidelity. How do we choose between high or low fidelity? How do we know when we need the extra detail? How do we know when the models we have don’t have enough fidelity? After we’ve chosen between high and low fidelity, how do we discover if we were right or wrong? each of the three teams chose interface models with a different fidelity, from sketches to wireframes to comps. Adjusting fidelity is the easiest way to adffect the required length of the design process. How do we know how much fidelity we need?
  • 32. HAckinG UX: An illUstrAted primer, by AUstin GovellA – @AUstinGovellA 32 1. AUdience do you remember the three teams? team one was adding data quality reports, team two was redesigning user group management, and team three was building Facebook apps. With each of the teams, we assumed the User and system models and managed the interaction models via conversation. the result was three different interface models. team one went with sketches. team two used wireframes. team three decided to do full comps. but it wasn’t just the deliverables that were different. each team had a different audience.
  • 33. HAckinG UX: An illUstrAted primer, by AUstin GovellA – @AUstinGovellA 33 1. AUdience if we compare the audience for each team’s interface model, it’s clear that each team was working with a drastically different audience. team interface model Audience Quality conversations sketches the team Group specifications Wireframes product council Facebook comps comps customers
  • 34. HAckinG UX: An illUstrAted primer, by AUstin GovellA – @AUstinGovellA 34 1. AUdience While your team needs to share a vision to build something great, design is always about your hypothesis. your team’s vision is your shared hypothesis. the team believes the User with this interface will accomplish this interaction within this system. However, because design always concerns itself with a User, our hypotheses must always have an audience. Who will validate the hypothesis? Who will evaluate whether or not the design will work? A hypothesis requires an audience
  • 35. HAckinG UX: An illUstrAted primer, by AUstin GovellA – @AUstinGovellA 35 1. AUdience the key question really is: Who will evaluate whether the design will work? there are four possible answers to that question: 1. yourself 2. your team 3. your organization 4. your customers the audience that will evaluate your User, interface, interaction, and system models determines the highest fidelity you need and the lowest fidelity you can get away with. in general, the farther away your audience is, the higher fidelity your models should be. Four audiences customersorganizationteamself Fidelity is all about the distance to your audience.
  • 36. HAckinG UX: An illUstrAted primer, by AUstin GovellA – @AUstinGovellA 36 1. AUdience We can see distance at work with our three teams. team interface model Audience evaluation Quality conversations sketches the team needed enough detail to build Group specifications Wireframes product council needed more detail to sell internally Facebook comps comps customers needed to see the real thing your distance from your audience helps describe how much shared vision you have with the audience. if i want to sketch a screen and then evaluate it myself, i understand what i was thinking. if i want my teammate to look at my sketch, i might need to enhance its fidelity by explaining what this or that squiggle is. if i walk over to the ceo and show him my sketch, i will likely have to explain a greater amount of the sketch. Audience and shared vision the reason for this discrepancy is that i share more vision with my teammates than i do with the ceo. Whatever vision you do not share with the audience means they can’t interpret what you mean. you have to explain it to them. that means more fidelity.
  • 37. HAckinG UX: An illUstrAted primer, by AUstin GovellA – @AUstinGovellA 37 1. AUdience it’s not just distance that affects the fidelity of your models. each audience is also disposed towards answering questions in different ways. team interface model Audience Question Quality conversations sketches the team can we build this? Group specifications Wireframes product council can we make this change that impacts the entire product? Facebook comps comps customers Would buy this? For example, let’s say we wanted to know whether an interface was usable. you could priobably sketch an interface and show it to another user experience practioner. With only the sketch, they could offer you advice on how usable the interface would be. Alternately, if you wanted your customers to evaluate how usable the interface is, you couldn’t use a sketch. to test usability, you at least need a prototype with some degree of visual, behavioral, and content fidelity. Audience and hypothesis similarly, if you want the ceo to sign off on the redesign, they’ll probably require high, visual fidelity comps. they simply can’t tell whether or not the logo is big enough from your sketch. the hypothesis you are trying to test has a lot to do with the fidelity your audience will need.
  • 38. HAckinG UX: An illUstrAted primer, by AUstin GovellA – @AUstinGovellA 38 1. AUdience based on your audience and the hypothesis you want to test, you will need to share your models at higher or lower fidelities. Although your distance from the audience — the amount of vision you share — and the question you’re asking drive fidelity, other aspects of the audience also have an impact. How does team location impact fidelity? Are we co-located, or do we have remote team members? How do time zones and schedules change how we share models? Just as each of our three teams had a different audience, how we communicated with the audience was different, too. our audiences context is just as important as their distance and the hypothesis we want to test. How does how we communicate affect fidelity?
  • 40. HAckinG UX: An illUstrAted primer, by AUstin GovellA – @AUstinGovellA 40 1. commUnicAtion it’s easy to understand how we need different fidelity based on our Audience’s distance and the type of hypothesis we’re trying to test, but we’re missing the obvious things about our audience: • time • place • reach these three facets of our audience can have as much impact on fidelity as anything else.
  • 41. HAckinG UX: An illUstrAted primer, by AUstin GovellA – @AUstinGovellA 41 1. commUnicAtion When we communicate with our audience can have an important impact on fidelity. Are we communicating in real time, synchronously, like a back-and-forth conversation? or, are we communicating asynchronously, like an email correspondence? or, is it a combination of both same time and shifted time, like an im conversation we share and then both leave and come back to? Time our three teams demonstrate how a time shift requires more fidelity. the data quality team that used sketches did all of its communication synchronously. in contrast, team 2 sent the new group specifications to the product countil and didn’t hear back for a couple of days. that gap was enough to require wireframes. team interface model Audience time Quality conversations sketches the team synchronous Group specifications Wireframes product council asynchronous Facebook comps comps customers asynchronous
  • 42. HAckinG UX: An illUstrAted primer, by AUstin GovellA – @AUstinGovellA 42 1. commUnicAtion When you speak synchronously, you can share and discuss large volumnes of information as part of the back-and- forth of normal conversation. Any gaps between your understanding and your audience’s — any gaps in the vision you share can be managed through conversation. but when communication is asynchronous, the only way to manage that gap is by writing things down, drawing things, coding things. Anything you can do to make the model more real, to make something you can give to someone else to check. And it’s important to note that asynchrous communication doesn’t just happen when you’re talking with other people, with outsiders. one of the biggest uses of documentation is so the team can remember their decisions. three months from now, you might not remember whether that link went to a new page or opened a lightbox. the documented design allows you to have a tinme-shifted conversation with yourself.
  • 43. HAckinG UX: An illUstrAted primer, by AUstin GovellA – @AUstinGovellA 43 1. commUnicAtion Place location has a similar impact on fidelity as time does. Are we communicating to someone who is next to us? someone in the same room? or, are we communicating with someone far away? Are working with a variety team mates who work from different locations? if you remember, one of the reasons i created user group wireframes for team 2 was that the product manager lived in california while the rest of the team was in Austin. the additional fidelity in the wireframes helped supplement the gesturing and body language we couldnt share over a conference call. team interface model Audience place Quality conversations sketches the team co-located Group specifications Wireframes product manager, product council co-located and remote Facebook comps comps customers remote if you’re co-located, you can stick sketches on a wall. if everyone is remote, you have to snap and upload them somewhere. if you’re remote, quick questions have to come through im or email. if you’re co-located, you can pop your head over the cube wall.
  • 44. HAckinG UX: An illUstrAted primer, by AUstin GovellA – @AUstinGovellA 44 1. commUnicAtion Reach reach describes how far your audience may share your model. i like to call this the ceo effect. this is what happens when your boss asks for that whiteboard sketch from last meeting. your boss sends it to their boss who shows it to someone else, who doesn’t understand or like what they see, who sends the sketch and the complaint to the ceo who promptly emails you an edict vetoing the design. reach is governed by the same logic that surrounds time and place. if you don’t know whether you will be around to explain your model to whoever ends up with it, then you need to put your explanation into the model. your model needs more fidelity. For team two, we knew the wireframes would be shared with the product council, and who knows who they would share them with. so, we made sure to annotate the wireframes, so people who saw them could deciper what was going on. similarly, the Facebook comps were going out to the sales team to show customers, so we made sure they had as much visual fidelity as was possible.. team interface model Audience reach Quality conversations sketches the team team Group specifications Wireframes product manager, product council organization Facebook comps comps customers anyone
  • 45. HAckinG UX: An illUstrAted primer, by AUstin GovellA – @AUstinGovellA 45 1. commUnicAtion Just like we can measure fidelity, we can use t-shirt sizes to measure how much communication we need: • small • medium • large you can combine the four types of fidelity with t-shirt sizes to describe how much communication a model needs. Measuring communication type of communication s m l time place reach
  • 46. HAckinG UX: An illUstrAted primer, by AUstin GovellA – @AUstinGovellA 46 1. commUnicAtion so far, we’ve discussed factors like the audience, time, place, and reach that are prime factors driving how much fidelity we need. We’ve also seen examples of high and low fidelity for each of the types of models — the User, the interface, the interaction, and the system. but we haven’t discussed how to adjust our fidelity up or down. How can we compensate for audience distance? How do we communicate clearly with asynchronous and remote teammembers? We can’t just hack the user experience process willy-nilly. We have to provide our audience with the information they need in order to help us evaluate our hypothesis. How do we control fidelity in our models?
  • 48. HAckinG UX: An illUstrAted primer, by AUstin GovellA – @AUstinGovellA 48 1. inFormAtion once you understand you need to change the fidelity of one of your models, there are four types of information you can adjust to raise or lower the fidelity: 1. Tacit information tacit information deals with what the audience already knows about the model. 2. Explicit information sometimes, you include instructions on a form. this is an example of explicit information. 3. Implicit information implicit information refers to what the audience can intuit about the model. For example, the affordance of a skeuomorphic button provides implicit infomation. 4. Annotation When all else fails, if you adjusting tacit, explicit, or implicit information isn’t enough to adjust the fidelity, you can always add annotation. Just like fidelity and communication, we can have a go at measuring information. type of information s m l tacit explicit implicit Annotation controlling the amount of information in our models is the critical step in controlling fidelity. Four types of information
  • 49. HAckinG UX: An illUstrAted primer, by AUstin GovellA – @AUstinGovellA 49 1. inFormAtion tacit information is what allowed team one to work off a few sketches we threw together during the planning meeting. everyone on the team shared a vision of the User and the system. shared vision is tacit understanding. sometimes your interface will assume the User will have certain tacit understandings. For example, many apps use red as a warning color. this relies on Western culture’s association of red with danger. Tacit information tacit information leverages the audience’s culture. this could be culture-at-large, or it could be team culture. or organizational culture. the magnifying glass icon used to post a search is an example of tacit information. if you’re able to identify critical tacit information about a model that your audience doesn’t have, then you can try and augment the model with explicit or implicit information or add annotation.
  • 50. HAckinG UX: An illUstrAted primer, by AUstin GovellA – @AUstinGovellA 50 1. inFormAtion explicit information refers to what your audience percieves in your model before they begin to perceive the implicit information. instructions and calls-to-action like, “view my profile page” are examples of explicit information. explicit and implicit information go hand-in-hand with visual and content fidelity. the higher your visual and content fidelity, the more explicit information you have in your model. Explicit information sometimes if your interface isn’t clear, you can add explicit information. With team one, we added a line of situational text at the top of the screen that explained the reports we listed on the page.
  • 51. HAckinG UX: An illUstrAted primer, by AUstin GovellA – @AUstinGovellA 51 1. inFormAtion implicit information covers all the things that are learnable about your model. For example, Users learn twitter’s blue post button. the first time you visit the site, you don’t k ow what that button does, if anything. Fortunately, your implicit knowledge tells you that contrasting colors sometimes indicate interactive triggers, so you know to click the button. And posting a status is such a core activity to the experience, you very quickly learn how to post your status. Implicit information many usability and other communication problems occur because important information isn’t learnable or discoverable. What you hope will be implicit to the audience, isn’t. like explicit information, the higher your visual and content fidelity, the more implicit information is possible.
  • 52. HAckinG UX: An illUstrAted primer, by AUstin GovellA – @AUstinGovellA 52 1. inFormAtion you can’t really annotate production code. i mean, you can. i suppose that’s what happens when you open a new app and they walk you through a feature tour. but that’s not really annotation. Annotation is a special kind of additional information you can add to a model to fill in any gaps that aren’t covered by tacit, explicit, or implicit information. Annotation is the special tool you use to bridge the gaps created by different audiences in different contexts. Annotation
  • 53. HAckinG UX: An illUstrAted primer, by AUstin GovellA – @AUstinGovellA 53 1. inFormAtion
  • 54. Putting it all together
  • 55. HAckinG UX: An illUstrAted primer, by AUstin GovellA – @AUstinGovellA 55 1. inFormAtion Model: What type of model do we want to evaluate? User, interface, interaction, or system? Audience: Who do we want to evaluate our model with? yourself, team, organization, or customers? Fidelity How realistic must our models be in order to be validated? Information What does our audience need to know to validate our models? Communication How will we communicate the models? Content How accurate is the model’s content? Visual How visually accurate is the model? Behavior How accurate is the model’s behavior? Context How accurate is the model’s context? Tacit What does the audience already know about the model? (culture) Explicit What can the audience learn from the model? (instructions) Implicit What can the audience intuit about the model? (affordances) Annotation What needs to be annotated to understand the model? Time Are you communicating in real time or asynchronously? Place is the audience remote or co-located with you? Reach Will your audience share the model or keep it private? s s s content visUAl beHAvior conteXt tAcit eXplicit implicit AnnotAtion time plAce reAcH m m m l l l s s s m m m l l l s s s m m m l l l s s m m l l Title
  • 56. HAckinG UX: An illUstrAted primer, by AUstin GovellA – @AUstinGovellA 56 1. inFormAtion Model: What type of model do we want to evaluate? User, interface, interaction, or system? Audience: Who do we want to evaluate our model with? yourself, team, organization, or customers? Fidelity How realistic must our models be in order to be validated? Information What does our audience need to know to validate our models? Communication How will we communicate the models? Content How accurate is the model’s content? Visual How visually accurate is the model? Behavior How accurate is the model’s behavior? Context How accurate is the model’s context? Tacit What does the audience already know about the model? (culture) Explicit What can the audience learn from the model? (instructions) Implicit What can the audience intuit about the model? (affordances) Annotation What needs to be annotated to understand the model? Time Are you communicating in real time or asynchronously? Place is the audience remote or co-located with you? Reach Will your audience share the model or keep it private? s s s content visUAl beHAvior conteXt tAcit eXplicit implicit AnnotAtion time plAce reAcH m m m l l l s s s m m m l l l s s s m m m l l l s s m m l l Title Data conversations Interface - sketches Team X X X X X X X X X
  • 57. HAckinG UX: An illUstrAted primer, by AUstin GovellA – @AUstinGovellA 57 1. inFormAtion Model: What type of model do we want to evaluate? User, interface, interaction, or system? Audience: Who do we want to evaluate our model with? yourself, team, organization, or customers? Fidelity How realistic must our models be in order to be validated? Information What does our audience need to know to validate our models? Communication How will we communicate the models? Content How accurate is the model’s content? Visual How visually accurate is the model? Behavior How accurate is the model’s behavior? Context How accurate is the model’s context? Tacit What does the audience already know about the model? (culture) Explicit What can the audience learn from the model? (instructions) Implicit What can the audience intuit about the model? (affordances) Annotation What needs to be annotated to understand the model? Time Are you communicating in real time or asynchronously? Place is the audience remote or co-located with you? Reach Will your audience share the model or keep it private? s s s content visUAl beHAvior conteXt tAcit eXplicit implicit AnnotAtion time plAce reAcH m m m l l l s s s m m m l l l s s s m m m l l l s s m m l l Title Interface - wireframes product mgr/council X X X X X X X X X X X X X X X X XX X X X X X X X X
  • 58. HAckinG UX: An illUstrAted primer, by AUstin GovellA – @AUstinGovellA 58 1. inFormAtion Model: What type of model do we want to evaluate? User, interface, interaction, or system? Audience: Who do we want to evaluate our model with? yourself, team, organization, or customers? Fidelity How realistic must our models be in order to be validated? Information What does our audience need to know to validate our models? Communication How will we communicate the models? Content How accurate is the model’s content? Visual How visually accurate is the model? Behavior How accurate is the model’s behavior? Context How accurate is the model’s context? Tacit What does the audience already know about the model? (culture) Explicit What can the audience learn from the model? (instructions) Implicit What can the audience intuit about the model? (affordances) Annotation What needs to be annotated to understand the model? Time Are you communicating in real time or asynchronously? Place is the audience remote or co-located with you? Reach Will your audience share the model or keep it private? s s s content visUAl beHAvior conteXt tAcit eXplicit implicit AnnotAtion time plAce reAcH m m m l l l s s s m m m l l l s s s m m m l l l s s m m l l Title facebook comps Interface - comps product mgr/council X X X X X X X X X X X X X X X XX X X X X X XX X X X X
  • 59. HAckinG UX: An illUstrAted primer, by AUstin GovellA – @AUstinGovellA 59 1. inFormAtion Thank You