Documente Academic
Documente Profesional
Documente Cultură
Playbook
Table of Contents
Introduction 0
UX Playbook 1
Principles 1.1
Psychology 1.2
Usability 1.3
Research 2
Qualitative Research Toolbox 2.1
User interview 2.1.1
User testing 2.1.2
Ninja user testing 2.1.2.1
Card sorting 2.1.3
Ethnography research 2.1.4
Qantitative Research Toolbox 2.2
A/B testing 2.2.1
Survey 2.2.2
Analytics 2.2.3
Eye tracking 2.2.4
Persona 2.2.5
Expert review 2.2.6
Journey mapping 2.2.7
Design 3
Information Architecture 3.1
Wireframing 3.2
Prototyping 3.3
Content 3.4
Interaction design 3.5
Visual design 3.6
Typography 3.7
Measure and Iterate 4
Lean design 4.1
2
UX Playbook
Iteration 4.2
3
UX Playbook
Introduction
Please note: this book is under development and might contain unfinished sentences.
The aim of this book is to provide a practical guide for UX design. It's not entirely for
beginners; it's always handy to have some deeper understanding of one of the related fields.
This can be design, programming or product management. Since UX is connected to these
fields, it's useful to have a general understanding of how these things work.
It's the UX designers role is to build the connections between the users, business and tech.
In order to achive this, you need to constantly talk to all 3 groups. Once you manage to do
this in a reasonably short time-loop, you have managed to do a very lean design process
which is deeply discussed in Lean UX book by TODO: author.
The UX playbook will show you the different "parts" of the UX design process. The terms
you can see in the sidebar are not distinct things you need to do. These methods and roles
are blurry and there is no distinct border between them.
A secondary goal of the UX Playbook is to educate Hanno shipmates and increase the
general knowledge and understanding of UX. This allows us to build and use a common
language we all share—which will result in smoother and better design sprints, and
ultimately better products.
Introduction 4
UX Playbook
UX Playbook
Zsolt recommends that you gradually work your way through the whole playbook to get a
feel for the overall approach, before returning to look at specific techniques and skills when
you need to use those on sprints. The more of the recommended deeper reading you can
handle, the better informed you will be!
To kick-off the reading, let's start with some basic UX principles and different UX processes.
Contributing
All shipmates are encouraged to contribute to areas of this Playbook where they feel the
detail is weak. Just keep in mind a couple of guidelines:
We're not trying to write the most comprehensive guide to UX ever. Where others have
explained things better, link to their resources or reading, and offer a summary.
Try to be as lean and practical as possible in your suggestions. There are lots of big,
heavy UX guides--the UX Playbook should be a lot more practical than these.
UX Playbook 5
UX Playbook
Principles
There are 2 key processes to know about when considering UX. These are:
User-centered design
Goal directed design
They have a lot of overlap, and differ mainly in how they suggest approaching the problem at
hand. It's good to know about both of them, as they will allow you to choose a UX design
approach which is best for the task at hand.
TODO: Explain a bit more about when you should choose each process. Even some
basic hints or guidance would help, as right now, they seem so similar that it's almost
pointless creating a distinction between the two.
TODO: Re-create image, find one which we can use. Explain what this image is
communicating.
Principles
Understand your users, and design for their needs
Avoid jargon: use natural language that the user can understand
Principles 6
UX Playbook
Goal-directed design
This is a fairly similar process to UCD, but the main aim is to go deeper in building out
understanding of your users. When carrying it out, you'll need to uncover the user's needs,
and provide a design which helps them to reach their goals.
Highlights
Based on your user research, create a persona which highlights the user's goals
Use this persona extensively
Advocate pair design
Take responsibility over your user's satisfaction
Principles 7
UX Playbook
Psychology
Lots of people coming from pshychology background to UX design. This isn't a surprise tho:
there are plenty of common intersections. There are plenty of psychology research related to
UX design and UX designers like to relate to them.
Cognitive dissonence
Coglode
http://coglode.com/
http://www.methodsandtools.com/archive/archive.php?id=126
http://en.wikipedia.org/wiki/Asch_conformity_experiments https://www.youtube.com/watch?
v=NyDDyT1lDhA&feature=youtu.be http://thehipperelement.com/post/74607165637/daily-
ux-crash-course-26-of-31
Psychology 8
UX Playbook
Research
User Experience design without research does not exists.
To design for user needs, we'll need to understand their behaviours, goals, motivations and
needs clearly. Through research methods such as interviewing, observation and evaluation,
we can reduce the guess-work involved into the design process.
Of course, user research is not just a single stage in the product development circle that you
can tick off and complete: you have to be talking and observing users constantly, and you'll
need to repeatedly return to this stage.
In this section of the Playbook, we've gathered together lots of different tools and techniques
that you can use to conduct better research. Check out the sidebar to view them all!
Different techniques are designed for different purposes. It can be helpful to group them
together according to distinct ways of thinking. The aim is to ensure that our research is
adequately broad, and as 'true' as possible. Thinking about these groupings will help you to
make sure your research is stronger and more likely to be accurate.
Research 9
UX Playbook
They involve active 2-way communication with the user (such as interviewing).
They help us better understand users' goals and motivations
We mainly use these in the earlier stages of the product development cycle
Behavioural methods ask "what does the user do".
They involve observation and gathering pure data, without being distracted by the
user's personal opinion.
They are particularly useful for validating our designs and assumptions and seeing
how people really act.
These are great for ongoing product development, and later in the product
development cycle.
Further reading
When to Use Which User-Experience Research Methods by the Nielsen Norman
Group. This is a great overview and covers this topic in more detail.
User Research Methods from usability.gov. This is a great collections of resources for
running better research. Well worth working through, and it explains a lot of techniques
in more detail.
Research 10
UX Playbook
User interview
User interviews are focused on understanding a user's motivations and needs. By
understanding their mind better, we can improve the product's UX.
Structure
Gather your interview subjects in advance. Check out the tips below for finding users,
and also our Lean Validation Playbook for fast recruitment.
A user interview will probably be about 30 minutes long.
It's best to have an interviewer and an observer for the session. The interviewer
communicates to the user while the observer take notes.
User interview 12
UX Playbook
modification is, and what problem it would solve. This allows you to understand your
user’s motivation and thought process more deeply and to figure out the best design for
their needs.
Avoid leading questions. All of us have hypotheses and assumptions. These should
be left far behind. You need to make sure you are not suggestive with your questions.
This would result in false results, which are really harmful. Try to ask open-ended
questions so you can avoid accidentally suggesting an answer. Instead of asking “How
difficult do you find it to use feature X?”, ask “What’s your impression of using feature
X?”
Don’t go too much into details. User interviews should be about the user and
their goals. Going into details might sound like a good idea at first, but it will typically
just lead to endless conversation. It is also the perfect way to turn the user into a
designer and get them to avoid storytelling–which is exactly the opposite of what you
want! Just make sure you take one step back, whenever you find yourself getting too
deep into the details.
Pay attention to body language. Some people might find it hard to express
themselves, so paying attention to their body language is a great idea to get more
insight into how they feel. If you can recognise discomfort or tension on your user’s
face, or in their body language, you can ask better questions. If you are unfamiliar with
body language, I’d recommend reading The Definitive Book for Body Language, which
is a great start.
Make sure you're getting unbiased, uninfluenced feedback. There is a risk when using
personal connections, that they won't be totally reliable subjects, because they know
you personally.
Try not to ask the same subjects repeatedly, even just because you'll annoy them if you
do so.
Remember: fellow UX professionals are not necessarily the typical user you need to be
interviewing. They think differently!
User interview 13
UX Playbook
This is the only company we currently know of which provides users for remote Skype user
testing:
You can select the desired days and time slots for the interview. They will line up a user, plus
a backup option, for a Skype interview in 48 hours. It costs 40 EUR per user, with an option
to screen and filter further.
Age
Gender
Language (en/de)
Device (computer, smartphone, tablet)
Custom
Further Reading
Steve Portigal's Interviewing Users: How to Uncover Compelling Insights is a great read
and has a lot of information. Contact a Shipmate if you need a copy!
Jakob Nielsen has a good overview and some tips in his article on Interviewing Users.
User interview 14
UX Playbook
User testing
Our goal is to gather any relevant feedback and information. We can carry out user testing
throughout the product development cycle. Paper prototypes, higher fidelity prototypes,
MVPs or a well-developed product can all be used for user testing:
Basic rules
We are testing the application, not the user. Make sure the user is made aware of this.
Communicate the state of mind and the context required, in order to adequately prepare
the user for the test.
Tell the user to 'think aloud' while working through the test tasks. This will help you to
understand their thought process as they do things.
It's worth pre-testing your tasks with a teammate or friend (test subject #0) to make sure
your instructions are clear.
You need to test with 5 users to uncover most of the usability issues.
Don't be afraid to use your main competitor's website as the subject for the test. This
can often give you valuable learning.
It's a good idea to have 3 people on the call: 1 moderator, 1 tester, and 1 observer. The
moderator talks to the user and guides him if needed, while the observer takes notes.
User testing 15
UX Playbook
Simply schedule a call, then ask the user to share their screen while you run through the
test. To recruit users:
Either mine our own network. Try not to hassle the same users every time!
Or use TestingTime. Current pricing is €200 for 5 testers. See [[User interviews]] for
more info.
UserTesting: our usual pick. View pricing. The typical cost of 1 testing session is around
$49 on UserTesting. If you're going to run lots of tests, you might want to consider using
their subscription plan (upon application only).
Netizen: Malaysian company--useful if you are testing in South-East Asia
User testing 16
UX Playbook
But don't forget that while ninja testing can be a great way to do lean UX, it's not a substitute
for conducting deeper tests. Be careful not to depend on ninja testing and end up with
misleading feedback!
User testing 17
UX Playbook
and be surprised!
It can help to offer rewards (candy, chocolate, drinks, etc), it will delight people and
mean they'll be happy to help you out next time, too.
Try sitting in a public area and putting up a sign: "Want a free coffee? Come give me
your opinion and 10 minutes of your time, and I'll get you one!”
Further reading
A great UX Booth article on guerilla testing, with some solid tips
User testing 18
UX Playbook
Card sorting
Card sorting is a way to research your users' mental model: how they group different items
based on their perception of them. It's a common technique when we're trying to figure out
information architecture, navigation and taxonomies on a more complex product or website.
General structure
A basic test:
Going deeper:
This exercise can also be performed with pre-defined category names (buckets): we just
ask the user to put the cards into the right bucket.
Optionally you can also ask users to set a priority between different cards or categories.
A typical example
Card sorting 19
UX Playbook
For an e-commerce site, write down each navigation item onto a card, and ask the user to
group them. Card sorting will show you how the users want to see the different product
categories grouped.
How will this effect the website performance? You'll hopefully end up with a more logical IA,
which will help people to find items easier and result in better conversion rates.
Tools to use
Remotely: Optimal Sort is our recommended remote card sorting tool.
Fully manual: Card sorting can be done without any technical tools. Simply write the
terms on index cards and ask the user to organise them. You can also use OptimalSort
to print out and organise a moderated card sorting session, which may save you some
time.
Further reading
Card sorting by NNG
Card sorting 20
UX Playbook
Ethnography research
This is about observing people in their natural working or living environment. Some people
describe ethnography research as "discovering the unknown".
Ethnography: "The scientific discovery of peoples and cultures with their customs,
habits, and mutual differences." (Oxford Dictionary of English)
The key here is to spot and capture the "aha!" moments while discovering user motivations.
These "aha!" moments are usually surprising and they can be the source of great innovation.
Ethnography research is valuable because it gives lots of insight in context, which can be
hard to get from other, more formal testing techniques. Learning more about this context
helps us to understand how it affects the UX, outside of lab conditions.
Tips
Pair up with a designer for the research who can take notes and spot issues from a
further perspective
Ask your participant to 'think aloud' while working through the exercise
Ask questions, but don't interrupt
Take as many research notes as possible
Ethnography research 21
UX Playbook
Pay attention to asking the right questions and in the right time. Make sure you don't
interrupt conversations and activities, and turn the situation into a more formal user
interview process, which might affect the user's behaviour.
Debrief the user right after you have finished and capture important observations,
especially the "aha!" moments.
So, after downloading the app onto our phones, Jon and Matt said “so long” to the
London public transport system, and started riding with Uber, to and from their co-
working space and meetings. Uber's offerings in London at that time were divided into
two camps—UberX (a direct competitor with London's taxi drivers) and Uber LUX (the
luxury option, rivalling private car hire services).
So we split our time equally between the two, asking questions to home in on the
benefits of the app. We decided to keep a log of each journey and record the answers
we got.
Further reading
http://uxmag.com/articles/making-the-most-of-ethnographic-research
http://www.uxmatters.com/mt/archives/2010/06/ethnography-in-ux.php
http://www.cxpartners.co.uk/cxblog/using_ethnography_to_improve_user_experience/
http://blog.usabilla.com/top-ethnographic-research-videos/
Ethnography research 22
UX Playbook
A/B testing
If you want to answer either of the following questions, you'll need some A/B testing:
It's a popular quantitative and behavioural research tool which can help us decide between
two competing alternatives. Conducting A/B test is cheap, protective and quick way to
decide if a design is an improvement or not.
The structure
1. Construct your starting point: a question that you want to answer. For example, "Why is
my conversion rate so low?"
2. Do your research: use an analytics software to uncover user behaviour, interview users,
send out surveys
3. Make sure you have enough traffic that your test will have statistical significance (see
below)
4. Design different variants
5. Start the experiment using Google Analytics or Optimizely
6. Evaluate the results
7. Implement the winning version and look for improvement
Statistical significance
To get accurate and statistically significant results you need to test your designs with
hundreds or even thousands of participants. You also need to be careful about running
more than one test at once: you need to be sure that the results you are recording can be
attributed to the change you're testing.
Since A/B testing is usually automatised with some software such as Google Analytics or
Optimizely, you should follow their suggestions and leave the test running till it says it has
enough results. This will give you the confidence in the better performing version.
If you don't have the traffic, or the situation which would allow you to gain definite statistical
significance, then you should take a step back and look at qualitative user research
techniques instead.
You can read more about statistical significance on the following pages:
A/B testing 25
UX Playbook
A/B testing 26
UX Playbook
Survey
Surveys are a good tool to quickly reach out and get feedback from your target audience.
Be careful! Survey are one of the most comfortable, yet dangerous research tools.
Since this is a quantitative research tool, make sure your questions reflect that, asking
qualitative questions in surveys can result in a lot of misinterpretation.
For example asking people to tell more about something in a survey is considered to be
a bad approach: you should interview users and have a conversation. Collect their e-
mail address at the end of the survey instead and line up an interview.
Survey doesn't map the information you need. TODO: Add explanation for this one.
Mandatory questions. It might be tempting to make the most important questions
Survey 27
UX Playbook
required, but at the end people might just leave the survey. You should leave all your
field optional. If they will skip answering a few questions you will know that there were
some problem.
Two-in-one questions. You should avoid this type of questions because the user may
have 2 different answers. To resolve this, simply turn it into 2 separate questions.
"Was the message clear and compelling?"
"Is your manager honest and trustworthy?"
"Did you know that Mozilla is a mission-driven organisation to make the Internet a
better place?".
Complex questions. Complex questions might scare users off, not to mention it's easy
to misunderstood.
Leading questions. "How would you rate the career of legendary outfielder Joe
Dimaggio?" To get unbiased information, don't include your personal opinion within
them.
Direct questions. Asking directly can be harmful. There is a big difference between
what people say and what people do. For example asking about if they would buy your
product, more people tend to give positive response than people willing to put down
money for your product.
Existing users: collect and reach out active users; send them a friendly mass-email
directing them to a Google Form which they can fill. You can increase the engagement
with gifts or coupon.
Target demographic: using a 3rd party survey tools, like Google Consumer Survey
allows you to set demographic settings based on your needs.
General public: using a Google Consumer Survey or distributing your survey through
Facebook/Twitter. This might happen early phases in the product development process.
Be careful, it's very rare that you want feedback from general public, you should be able
to define your target audience quite early.
Tools to use
Google Form
Google Drive allows you to create Google Form documents which you can use to send out
for your friends. You can easily set up the survey and share the link with your users.
Survey 28
UX Playbook
Different Use cases give you an idea about how to get out the maximum of Google
Consumer Surveys.
Countries:
United States
Canada
United Kingdom
Germany
Italy (Android only)
Japan (Android only)
Netherlands (Android only)
You can set various screening and demography options which makes this a great and
affordable tool to use.
Survey 29
UX Playbook
Analytics
Using an analytics tool is probably the most popular quantitative method for gathering
information about behaviour. We can collect, measure and analyse several metrics in order
to understand user behaviour and optimise the product performance and usability.
The most common metrics we measure it the conversion rate, which allows us to see how
our visitors converts in a commercial context.
To set KPIs, We'd recommend setting goals first. Goals are broader targets that you want to
hit. You will set our KPIs to align with these goals. Here’s an example:
Analytics 30
UX Playbook
Make sure you have both engagement (time on site, session duration) and commercial
(conversion rate, return rate) KPIs--both help you push towards your goal.
Keep in mind that the most important thing with KPIs is to easily benchmark the performance
of your product. You should design and work around the goals to hit them.
Tools
Google Analytics
Google Analytics is the most wide-spread solution for web analytics. It is easy to implement
and use and you can track the most important metrics easily:
Pages/visit
Bounce rate
Average time on page
Average visit duration
Analytics 31
UX Playbook
Eye tracking
Eye tracking is a more expensive quantitative method than other research method. You
cannot do it with remote users, as you need to have a physical space and environment set
up. You also need special software and hardware to be able to record the eye movement
and map it to your product or website.
Eye tracking 32
UX Playbook
People scan the website content instead of reading it. There are fixation points on the
website as they are trying to find the relevant information. They are looking for keywords and
highlighted elements on a website and trying to process the information to make decisions.
You can read more in this Norman Nielsen Group post.
F-shaped pattern
Eye tracking studies revealed that users tend to parse the website in a F shaped pattern.
The main learnings are that:
Read more
Banner blindness
Eye tracking studies have showed that people tend to abandon banners and focus on the
content reading or scanning. Read more.
Eye tracking 33
UX Playbook
Images
Information-carrying images gets users attention and it is considered good, while purely
decorative images tend to get ignored.
Eye tracking 34
UX Playbook
Persona
You need to conduct user research and in particular user interviews to gather information
about your users. Once you have enough data from your research you can proceed to
persona creation process.
Benefits of a persona
Using personas is a powerful tool to get settlement around your user archetype. It is about
staying focused and satisfying real user needs. Personas are used during the product
development process to make sure you understand their motivation and you are satisfying
your user's needs. It helps you to communicate your design with stakeholders and justify
your design decisions. Once your persona is developed it's a cheap and powerful tool for
designers.
Persona 35
UX Playbook
Persona example
Persona 36
UX Playbook
Persona 37
UX Playbook
Further reading
http://www.usability.gov/how-to-and-tools/methods/personas.html
Persona 38
UX Playbook
Expert review
Expert reviews evaluate products from a distinct perspective, and offer a view of an UX
expert. This approach judges the product in terms of trustworthiness, credibility,
competency, reliability, design and style.
This is a heuristic and self-exploring approach to understanding the product and provide
an analysis about its strengts and weaknesses. It is indeed opinionated. Since heuristic
review cannot be quantified, it has to be applied carefully.
You need to evaluate the product from A to Z, including onboarding, usability issues (by
spotting missing common design pattern which most like produce usability issues).
In order to make the review more accurate, you should pair it with other research,
particularly quantitative research.
Further reading
TODO: Read and implement the following resources
http://www.smashingmagazine.com/2011/12/16/a-guide-to-heuristic-website-reviews/
http://www.uxmatters.com/mt/archives/2014/06/an-overview-of-expert-heuristic-
evaluations.php
Expert review 39
UX Playbook
Journey mapping
We use this technique to discover different steps in the user's interaction with our product.
The goal of the journey mapping is to put together a visual overview of all the different
decisions our users need to take in order to use the product.
Journey mapping 40
UX Playbook
Tools
Murally
Journey mapping 41
UX Playbook
Design
Design 42
UX Playbook
Information Architecture
Information architecture is about to figure out the best way to organise your design. It is
about organising the element into hierarchies of information.
To do great IA work you have to do a research (see User Research section of this wiki). Most
of the time the Information Architecture's role will become a joint role with other design
and/or content related roles.
Understanding the hierarchy between different types of content is essential for creating great
wireframes (and later prototypes and products).
And
Sitemap
Sitemaps are good for websites to overview how the page hierarchy looks like. The more
complex your site is the more harder to provide a straightforward sitemap. Sitemap is mostly
good for designers to see how they laid out the content and to see if it makes sense. In order
to provide a logical and straightforward sitemap you need to understand and overview all the
different content types on your website.
Card sorting
This is a research technique which is great to support Information Architecture decisions,
because it allows us to understand how users group information. Based on this we can
present elements which belongs to each other.
Information Architecture 43
UX Playbook
READ: http://www.uxmatters.com/mt/archives/2010/02/hierarchical-task-analysis.php
Information Architecture 44
UX Playbook
Wireframing
This is the process of quickly sketching and playing with different ideas and layouts. The
goal of wireframing is to brainstorm over the different “designs” (even if they are still just
black and white sketches) and try to evaluate different ideas. Since we have great tools for
rapid prototyping, wireframing become less important. We are only trying to experiment with
the loose outline of the design and definitely don’t go into details or high-fidelity wireframes.
Sometimes on more complex projects it might be still worthwhile to go into high fidelity
wireframing. This really depends on the complexity of the interface. You can also go back to
wireframing at any stage of the projects and you should actually do that.
We prefer to keep the prototype low fidelity: make it ugly, and people will overlook the
aesthetic design and they will focus on the concept. That's our point at this stage of the
project.
If you have a set of different wireframes of several screens, the prototype will be the
aggregation of these wireframes tied together which you can click through with your
mouse/phone—and understand the connections between different screens (wireframes).
Google Docs
Wireframing 45
UX Playbook
This is a surprisingly powerful way to wireframe. We'll add a proper explanation soon. but in
the meantime, you might find this guide on how to do the same with Google Slides, to be
useful.
Balsamiq Mockups
Wireframing 46
UX Playbook
Balsamiq is one of the oldest wireframing tool. Its philosophy is to use almost like hand-
drawn elements to allow you to focus only on the layout and elements, instead of the visual
appearance.
Mural.ly
Although Murally is not a dedicated prototyping tool, the selection of its tools allows you to
collaboratively sketch wireframes and quickly iterate over it. We like to use it.
Sketch/Illustrator
Wireframing 47
UX Playbook
These tools are more sophisticated and allows you to produce final-like wireframes—we can
even call them mockups. We'd rather use them to produce low-fidelity wireframes. There are
very few projects which justifies creating high-fidelity wireframes, almost like a real product.
Simply because this is not the right place to experiment about visuals.
If you are working with others, Google Docs or Murally can be extremely effective.
If you are working alone find the one you can move the fastest.
If you need high fidelity wireframes, use Sketch, Illustrator or even Photoshop. Need to
collaborate? No problem, use Screenhero and work collaboratively.
Wireframing 48
UX Playbook
Prototyping
Prototypes are interactive wireframes. We build prototypes to put it in front of the users, get
feedback and improve your prototype. This is an iterative process which allows us to build
great products.
Prototyping is about building, experimenting and learning during and iterative process. Good
design process involves the user and it’s shortening the feedback loop. Usually the
prototyping is started with a wireframing so we are mostly aware of the position of the
different elements.
Based on the detail you want to achieve we can talk about low, medium and high fidelity
prototyping. Usually the higher the fidelity is, the more work is required.
Benefits of prototyping
It’s an efficient use of resources
Rapid prototyping enables you to learn quickly what does and doesn’t work in weeks,
instead of months. Instead of wasting time, money and team power making highly functional
polished products to eventually test on your users.
Prototyping 49
UX Playbook
Less time is spent making long drawn out plans and discussing what it best for your users.
Instead more time is spent validating the assumptions that are made in making the
prototype. Building on fact rather than fiction.
Paper prototypes
TODO: Credits/replace
Prototyping 50
UX Playbook
For web application prototyping you can use Bootstrap or Foundation. To increase the
fidelity and interactivity we use tools like Bootstrap, Middleman, Sass etc.
Framer.js
http://framerjs.com/examples/preview/#medium-app.framer
MarvelApp
Prototyping 51
UX Playbook
Content
In User Experience design, content plays a major role. Ultimately it is what the user
consumes, and we can design it in order to improve the way it's consumed.
Microcopy Writing
The goal is to write small piece of text which are straight-forward and easy to understand,
and help further your user experience.
Good Resources:
Voice should be consistent. It's a great idea to define voice and tone guidelines so that
anyone writing content can stick with the same brand tone. Mailchimp do this very well.
Five ways to prevent bad microcopy
Skillshare - Mastering Microcopy: Writing Tiny Words for Huge UX Impact: a 90 minute
class to help you write better microcopy.
Microcopy that Strengthens Your Design’s Experience: this paid course from the COO
of Intercom will also walk you through some of the basics.
Content 52
UX Playbook
Interaction design
Interaction design is about how you users interact with your product. Its goal is to make this
interaction smooth and intuitive.
Animations
Animations can make specific interactions easier to understood.
Interaction became a big thing when smart phones came into the picture. There are a huge
variety of interactions you can apply to your design: double tap, pinch, swipe, 3-finger swipe,
3D touch and so on. This opened a new horizon in interaction design.
By now, we have well established interaction design patterns: when you pull down your e-
mail client on your phone to update. This “pull down to refresh” became quite well-spread
and most of the people become familiar with them.
Interaction design 53
UX Playbook
Visual design
Typically UX designers don't do visual designs, although the visual side of your product
takes a huge part in the user experience. This sounds a bit contraversial so it's always good
to have a good general feel of aesthetics.
A product can have really bad UX with amazing visual design: non-intuitive interface
with plenty of usability issues.
A product can have really good UX with poorer visual design: really slick and intuitive
interface.
A really bad product consist of poor UX and visual design as well.
An amazing product has really great UX and visual design.
This doesn't mean that UX designers must have amazing visual design skills as most of the
team design is a team effort: you'd need a great UI (visual) designer who can lead the visual
design.
Gestalt principles
Visual design 54
UX Playbook
Typography
Typography takes a huge part in great UX design. The fonts you are using in your
application has the power to manipulate the mood of the user and communicate important
things.
Sans serif, serif fonts Headers, paragraphs Optimal paragraph lengths Optimal font sizes
Readability
Typography 55
UX Playbook
Lean design
Lean design 57
UX Playbook
Iteration
Iteration 58