Mobile Best Practices for UX

1. USER EXPERIENCE &
MOBILE BEST PRACTICES

2. Intro to UX
20 mins
Process & Tools
20 mins
Hands-on session
15 mins
Mobile App Best Practice
20 mins

3. WHAT IS UX?
Intro to UX

4. User experience (UX) refers to
a person's entire experience
using a particular product,
system or service
Wikipedia

5. User Experience is about feelings
User Experience is about behavior
User Experience is about people
Roles within UX

6. User
goals
Business
goals
Good User Experiences
What is UX?
The goal

7. What is UX?
Bad UX

8. What is UX?
Establishing
a common
understanding
is key

9. COMMON TERMS
Intro to UX

10. Usability Studies: Watching users perform tasks to measure the
product's ease-of-use, task time, and the user's perception of the
experience
Hypothesis: A proposed explanation that can be tested with the
scientific method
Qualitative: Primarily exploratory research. It is used to gain an
understanding of underlying reasons, opinions, and motivations
Quantitative: Used to quantify the problem by way of generating
numerical data or data that can be transformed into useable
statistics
Ethnographic: Research that focuses on identifying and describing
groups of people. Ethnography is not a specific method. It’s a
collection of methods.
Common terms

11. User interface design (UI): Design of interface elements to
facilitate user and computer system interaction.
eg: Elements on a screen
User Experience (UX): The overall experience of a person using a
product such as a website or computer application, especially in
terms of how easy or pleasing it is to use.
Information design: Designing the presentation of information to
facilitate understanding (layout of content elements in relation to
each other)
Interaction design: Development of flows to facilitate user tasks
and defining how the user interacts with the site functionality
Information architecture (IA): Structural design of shared
information to allow easy access to content. eg: Navigation, content
organization.
Common terms

12. WHAT’S THE DIFFERENCE
BETWEEN UI & UX?
Intro to UX

13. Difference between UI & UX
User Interface
User Experience

14. Difference between UI & UX
User Interface
User Experience

15. Design
Interaction
Visual
Motion
Research
UX
PrototyperPrototyping
Difference between UI & UX

16. ROLES WITHIN
USER EXPERIENCE
Intro to UX

17. ● UX Designer
● Interaction Designer
● Visual Designer
● Graphic Designer
● Motion Designer
Design Research
● UX Researcher
Build/
execute
● UX Engineer
● UI Prototyper
● UX writer
● Tech writer
Roles within UX

18. They strike a balance
of what’s usable and
what feels nice,
making the overall
experience more
enjoyable for all who
use it
Designers create
experiences that
people of all ages,
abilities and
cultures can use
Using a combination of
visuals and motion,
they create delightful
experiences which
leave a positive
impression with all
who use it
Design
Designers bring ideas to life, crafting experiences that users can easily navigate and enjoy
while fitting into any environmental or technological constraints
___
MAKE IT USABLE
___
MAKE IT FEEL NICE
___
MAKE IT LOOK NICE
Roles within UX

19. Is what we’ve made
usable; Where are
user pain points;
Where are our blind
spots; Uncovering
where things are
working / not working
Examples: In-lab
usability, intercepts
Who are our users;
What do they
want/need; What
opportunities do we
have to improve the
user experience
Was it a success; What
was successful / What
needs improvement; How
to evolve toward v2
Examples: Surveys,
exit interviews, diary
studies, logs research
Research
Researchers apply various techniques to add context and insight into the design and
development process. Research helps reach new conclusions, establish facts, and find problems
through understanding users' attitudes, behaviors, context, goals, and needs.
TYPES OF
RESEARCH ___
FOUNDATIONAL
What to build
___
ITERATIVE
How to build
___
EVALUATIVE
Did it succeed
Roles within UX

20. Build/execute
These roles help bring ideas closer to reality. They allow us to create prototypes to test
and to bring the scope of work back to what is actually achievable.
___
RAPID PROTOTYPING
___
TECHNICAL
INVESTIGATION
___
MAKE IT POSSIBLE
Roles within UX
Some concepts have a
high technical
complexity,
investigations allow
us to explore and
test to see what’s
actually possible
Rapid prototyping
allows us to test
many ideas quickly,
allowing us to come
to a good solution
sooner
UX & Tech writers
allow what has been
designed to be
understood by all,
internally and
externally

21. QUESTIONS?
Intro to UX

22. PROCESS
Process & Tools

23. If I had an hour to solve a
problem I’d spend 55 minutes
thinking about the problem and
5 minutes thinking about
solutions.
Albert Einstein

24. Process
What is a
design sprint?
A design sprint is a framework that
helps answer critical business questions
through rapid prototyping and user
testing.
Sprints let your team reach clearly
defined goals and deliverables and gain
key learnings, quickly.
The process helps spark innovation,
encourage user-centered thinking, align
your team under a shared vision, and get
you to product launch faster.

25. DecideDivergeDefineUnderstand
Process
UX Sprint
___
WHAT ARE THE USER
NEEDS, BUSINESS
NEED AND TECHNOLOGY
CAPACITIES?
___
WHAT IS THE KEY
STRATEGY AND FOCUS?
___
HOW MIGHT WE EXPLORE AS
MANY IDEAS AS POSSIBLE?
___
SELECT THE BEST
IDEAS SO FAR

26. UnderstandValidatePrototype
Process
UX Sprint
___
CREATE AN ARTIFACT THAT
ALLOWS TO TEST THE
IDEAS WITH USERS.
___
TEST THE IDEAS WITH
USERS, BUSINESS
STAKEHOLDERS AND
TECHNICAL EXPERTS.

27. Understand
During the Understand phase, your team comes
together to explore the business problem from all
angles. You’ll create shared knowledge and
essentially unite under a shared brain.
Process

28. Define
In this phase, the team starts developing their
focus and strategy. This happens by defining the
central journey they want to create for their
users.
Process

29. Diverge
Often, teams choose the first ready idea to
pursue. The diverge phase encourages the team to
do the opposite: to first generate as many ideas
as possible before they commit to the best
option. In this stage, everyone is encouraged to
work individually to sketch ideas.
Process

30. Decide
After each person presents their solution
sketch, a vote is held. First, you Present &
Vote. If you’re lucky this will result in
obvious winners, but more often than not there
will be some hiccups. For example, there may not
be a clear consensus or people may feel
pressured to vote how the team leader is voting.
Don’t fret. There are a variety of methods that
can help foster consensus.
Process

31. Prototype
You are building just the barest elements of
what you need to make the prototype real
enough to get an authentic response from a
potential user in the Validate phase.
You can think of your prototype as an
experiment in order to test out a hypothesis.
This means you have to think critically about
what you will build in order to get the
feedback you need to validate or invalidate
your hypothesis.
Process

32. Validate
Watching your users try out the prototype is the
best way to discover major issues with your
design, which in turn lets you start iterating
immediately.
This is also a good time to get feedback from
Technical Experts or Leadership Stakeholders.
Process

33. TOOLS
Process & Tools

34. Prototyping tools
Prototypes vary in size and complexity depending on what
exactly needs to be tested.
Some people might still prefer to use post-it-note prototypes,
paper cut-outs, motion videos, pixate, flow, html and more to
make their tests.
The post popular prototyping tools include:
● Invision
● Framer.js
● HTML
● Flinto
● Principle
Tools

35. UserTesting.com
For a per-test fee, UserTesting can relieve most of the stress
and hassle of user research and prototype testing. These
testing experts recruit your target users, administer the tests
remotely, and deliver the results within an hour. Each test
comes with a video of the user, so you can gauge facial
expressions and general emotional responses.
The service works for sites and apps, prototypes and finished
products. You can even opt for UserTesting’s in-house team to
design your test, or take advantage of one of their project
managers to keep your project on track.
The users who are on Usertesting.com are pretty tech savvy, so
be mindful of this when using them.
Tools

36. Sketch
Sketch was created specifically for designing interfaces,
websites, icons… whatever is in your head. It allows you to
easily visualise an idea, no matter how simple or complex.
This is the design tool of choice for most of experienced
designers, and many others in the industry.
It’s simple interface makes learning really easy.
Tools

37. Slack
With the slogan “team communication for the 21st century,”
Slack gathers all the standard communication tools like Google
Drive, Dropbox, or Twitter in one place, so the entire team is
kept up-to-date. You can organize conversations into channels
and upload files directly. So much of UX is collaborative (or
should be), so any tool that improves communication will
improve UX.
Tools

38. Drive
Shared assets are vital for creating consistent elements for
your project, Drive allows you easily create, share and stay
updated on any changes made.
Tools

39. MindNode
MindNode helps you visualize your ideas. Start with a central
thought and then brainstorm, organize and share your mind maps.
Tools

40. Gallery
Gallery is a shared home for your team's design work, so you
can easily find, present, and get feedback on the work that
matters.
Tools

41. MOBILE APP
BEST PRACTICE
UX & Mobile Best Practices

42. Bold, graphic, intentional
The foundational elements of print-based design – typography,
grids, space, scale, color, and use of imagery – guide visual
treatments. These elements do far more than please the eye.
They create hierarchy, meaning, and focus. Deliberate color
choices, edge-to-edge imagery, large-scale typography, and
intentional white space create a bold and graphic interface
that immerse the user in the experience.
An emphasis on user actions makes core functionality
immediately apparent and provides waypoints for the user.
Best Practices

43. Motion provides meaning
Motion respects and reinforces the user as the prime mover.
Primary user actions are inflection points that initiate
motion, transforming the whole design.
All action takes place in a single environment. Objects are
presented to the user without breaking the continuity of
experience even as they transform and reorganize.
Motion is meaningful and appropriate, serving to focus
attention and maintain continuity. Feedback is subtle yet
clear. Transitions are efficient yet coherent.
Best Practices

44. Make it effortless
Reduce the time and mental effort users have to
put in to get what they want out of your
product.
Figure out what are the core needs of your
users, turn them into Critical User Journeys
and make sure to solve for those cases.
This makes it easier to learn, easier to use,
and easier to add to or build on when
necessary.
Best Practices

45. Consider poor
connectivity
Not every user has access to consistent, fast
internet. Do what you can to make the experience
work for those who don’t.
Think about offline cases, what does your product
look like if you’re not connected? Or have a flaky
connection that drops in and out constantly?
Make sure to design for those cases so users don’t
hit a dead end.
Best Practices

46. Delight the users
Delight is something that you can add to your
app to leave a positive impression.
Creating this positivity in their experience
makes them more likely to come back, share the
app with friends, and to have a greater opinion
of your brand.
You can achieve delight through things like
animation, quirky text, and unexpected features.
Best Practices

47. Obvious
hierarchy
On any screen of your app there should
be an obvious hierarchy of what to do,
it’s our job to guide the users and help
them achieve their goals.
Size, colour, contrast and motion can
help create this hierarchy.
Best Practices

48. Make it work on
low-end devices
Some users may be on older, smaller phones. Making sure your
product works for these devices will help make it accessible
for everyone.
There are many components and animations that may look
beautiful on newer, faster, larger phones, but simply don’t
work on these smaller devices.
Best Practices

49. Make it easy
to navigate
Make it easy for users to get where they
want to go, and return.
Creating a simple navigation model will help
users make sense of where they are within
the app.
Try to reduce the amount of steps or levels
users have to go down to get into specific
content. They should be able to get to
anywhere and back again within as little
taps as possible.
Best Practices

50. Speed it up
When people use a mobile app their attention
span is very short, you want to make it seem
that something is happening instead of pausing
and waiting for content to load. Even better
would be to make it appear as though something
has loaded through animation and graphics.
You can also use clever animations to make
transitions between screens seem quick, giving
a perception that the app is fast.
Best Practices

51. Make it possible with
one hand
Think about the ‘thumb zone’ when designing your
screens, you want important content to be easily
tapped on.
This is a mobile-first approach which is taking a
while for the industry to catch up with.
Best Practices

52. QUESTIONS?
Process & Tools