Mobile UX

Tiwonge Manda
What this Session Covers
• This session covers the following:
1. Defining UX
2. User-centric design
3. Mobile Design
4. Android Design?
Design Challenge!!
• Imagine you have been asked to develop an electronic voting
system.
• What would you do?
• How would you start?

Work in same groups as those for the course project

You have 10 minutes.
Each group must choose one person, to present their ideas
What is UX?
• What is your favorite app?
• Why?
• What is your least favorite app?
• Why?

Videos on users experience

Building a successful product
For a product to be successful, it must be:
• Useful –accomplish what is required
• Usable – do it easily and naturally
• Used – make people want to use it, be attractive, engaging, fun, etc.
What to design
• Need to take into account:
• Who the users are
• What activities are being carried out
• Where the interaction is taking place

• Need to optimize the interactions users have with a product:

• So that they match the users’ activities and needs
Understanding users’ needs
• Take into account what people are good and bad at
• Consider what might help people in the way they currently do
things
• Think through what might provide quality user experiences
• Listen to what people want and get them involved
• Use tried and tested user-centered methods
What is UX?
• How a product behaves and is used by people in the real world
• the way people feel about it and their pleasure and satisfaction when using it,
looking at it, holding it, and opening or closing it
• “all aspects of the end-user's interaction with the company, its services, and its
products. (Nielsen and Norman, 2014)
• “every product that is used by someone has a user experience: newspapers,
ketchup bottles, reclining armchairs, cardigan sweaters.” (Garrett, 2010)

Cannot design a user experience, only design for a user experience

• UX != User Interface (UI)!!

• UX goes beyond the visual elements of an app, as your non-visual code/app
components work together with the visual elements to deliver UX
What is involved in the process of
Designing systems
• Establishing requirements

• Developing alternatives

• Prototyping

• Evaluating
Makings of a Good Design Process
• Users should be involved through the development of the project
• Specific usability and user experience goals need to be identified,
clearly documented and agreed at the beginning of the project
• Iteration is needed through the core activities
Usability Goals
• Effective to use

• Efficient to use

• Safe to use

• Have good utility

• Easy to learn

• Easy to remember how to use

User experience goals
Desirable aspects
satisfying helpful fun
enjoyable motivating provocative
engaging challenging surprising
pleasurable enhancing sociability rewarding
exciting supporting creativity emotionally fulfilling
entertaining cognitively stimulating

Undesirable aspects
boring unpleasant
frustrating patronizing
making one feel guilty making one feel stupid
annoying childish
Makings of Good UX
• There is need to get the following right:
• User Interface (UI)
• The Engineering of software –
• Accuracy of information & gaining user trust
• Relevance of application
• Interaction Design:

• UX starts at the proposal phase!!

Understanding and
Conceptualizing Design
Before you get into specifics of design
• Articulate the nature of the problem space before jumping into concrete
design
• What is the current user experience/product?
• What is problematic with the current user experience/product?
• Why do you think there are problems?
• How will the current user experience/product be improved?
• Identify usability and user experience goals
• How will your proposed design change or extend on things?
• Make explicit underlying assumptions and claims
• Helps with reformulation of poorly constructed ideas
• Articulating the nature of the problem space usually necessitates
working in teams
• Get multiple perspective
Systems development request
• Imagine you have been asked to develop an electronic voting
system.
• What you do differently from your initial approach?

Work within your project groups, for the next five minutes.
Each group must choose one person, to present their ideas
Benefits of conceptualizing design space
• Orientation
• enables design teams to ask specific questions about how the conceptual
model will be understood
• Open-minded
• prevents design teams from becoming narrowly focused early on
• Common ground
• allows design teams to establish a set of commonly agreed terms
From problem space to design space
• Having a good understanding of the problem space can help
inform the design space
• e.g. what kind of interface, behavior, functionality to provide

• Before deciding upon these it is important to develop a conceptual

model
Conceptual Model
• A conceptual model is:
• “…a high-level description of how a system is organized and operates”
(Johnson and Henderson, 2002, p26)
• an abstraction outlining what people can do with a product and what
concepts are needed to understand how to interact with it
• provides a working strategy and a framework of general concepts and
their interrelations

• Enables
• “…designers to straighten out their thinking before they start laying out
their widgets” (Johnson and Henderson, 2002, p28)
Conceptualizing: an Example
• Consider the shopping experience the shopping experience of
shopping in person at a departmental store (e.g Game stores) and
online shopping (e.g amazon, etc.)
• How are these two similar/different?
• What objects are useful in you accomplishing your task – purchasing
something?
• What steps would you need to go through?
• Can your knowledge of classic-style-shopping be transferred to the use of
an online platform?
• What objects/icons would you incorporate in the GUI design of an online
system, to enhance learning and use for novices?
Components of a Conceptual Model
• Metaphors and analogies
• intended to provide familiar entities that enable people to readily understand the underlying
conceptual model and know what to do at an interface (desktop, shopping basket, search
engines, etc.)
• understand what a product is for and how to use it for an activity

• Concepts that people are exposed to through the product

• task–domain objects, their attributes, and operations (e.g. saving, revisiting, organizing)

• Relationship and mappings between these concepts

• whether one object contains another, the relative importance of actions to others

• Mappings between the concepts and the user experience the product is designed to
support or invoke
Formulating a Conceptual Model
• What will the users be doing when carrying out their tasks?
• How will the system support these?
• What kind of interface metaphor, if any, will be appropriate?
• What kinds of interaction modes and styles to use?
- always keep in mind when making design decisions how the user will
understand the underlying conceptual model
Formulating a Conceptual Model
• How metaphors, concepts, and their relationships are organized
determines the user experience
• The best conceptual models are those that appear obvious; the
operations they support being intuitive to use
Problems with interface metaphors
• Break conventional and cultural rules
• e.g. recycle bin placed on desktop

• Can constrain designers in the way they conceptualize a problem space

• Conflict with design principles

• Forces users to only understand the system in terms of the metaphor

• Designers can inadvertently use bad existing designs and transfer the bad parts over

• Limits designers’ imagination in coming up with new conceptual models

Interaction types
• Instructing
• issuing commands and selecting options

• Conversing
• interacting with a system as if having a conversation

• Manipulating
• interacting with objects in a virtual or physical space by manipulating them

• Exploring
• moving through a virtual environment or a physical space
Interaction types: Instructing
• Where users instruct a system and tell it what to do
• e.g. tell the time, print a file, save a file

• Very common conceptual model, underlying a diversity of devices

and systems
• e.g. word processors, vending machines

• Main benefit is that instructing supports quick and efficient

interaction
• good for repetitive kinds of actions performed on multiple objects
Interaction types: Conversing
• Underlying model of having a conversation with another human

• Range from simple voice recognition menu-driven systems to

more complex ‘natural language’ dialogs

• Examples: search engines, advice-giving systems, help systems,

USSD apps
• Also virtual agents, toys and pet robots designed to converse with you
Interaction types: Pros and cons of
conversational model
• Allows users, especially novices and technophobes, to interact with the
system in a way that is familiar

• makes them feel comfortable, at ease and less scared

• Misunderstandings can arise when the system does not know how to parse
what the user says
Interaction types: Manipulating
• Involves dragging, selecting, opening, closing and zooming actions
on virtual objects

• Exploit’s users’ knowledge of how they move and manipulate in

the physical world

• Can involve actions using physical controllers (e.g. Wii) or air

gestures
• Tagged physical objects that are manipulated in a physical world
result in physical/digital events (e.g. animation)
Interaction types: Manipulating: Direct
Manipulation
• influential in informing the design of GUI applications
• digital objects are designed to permit interaction in ways
analogous to manipulation of physical objects in the physical
world
• Make users feel as though they are directly controlling digital
objects
Interaction types: Manipulating: Direct
Manipulation
Core principles:
• Continuous representation of objects and actions of interest

• Physical actions and button pressing instead of issuing commands with

complex syntax

• Rapid reversible actions with immediate feedback on object of interest

Interaction types: Manipulating: Direct
Manipulation
Advantages of Direct Manipulation:
• Novices can learn the basic functionality quickly

• Intermittent users can retain operational concepts over time

• Error messages rarely needed

• Users can immediately see if their actions are furthering their goals and if
not do something else

• Users experience less anxiety

• Users gain confidence and mastery and feel in control

Interaction types: Manipulating: Direct
Manipulation
• Disadvantages of Direct Manipulation

This is for you to find out! Make sure to find relevant examples
for the disadvantages
Interaction types: Exploring
• Involves users moving through virtual or physical environments

• Physical environments with embedded sensor technologies

Interaction types: Deciding on Suitable
Interaction Type

How do you decide on a suitable interaction type? Give

appropriate Examples
Conceptual models: interaction and
interface
• Interaction type:
• what the user is doing when interacting with a system, e.g. instructing,
talking, etc.

• Interface type:
• the kind of interface used to support the mode, e.g. speech, menu-based,
gesture
Interface types: Classification
• May be based on:
• Function (e.g. to be intelligent, to be adaptive, to be ambient, to be smart),
• Interaction style used (e.g. command, graphical, multimedia)
• The input/output device used (e.g. pen-based, speech-based, gesture-
based)
• Platform being designed for (e.g. tablet, mobile, PC, wearable)
Principles of Mobile App
Design
Show the value of your app upfront
• Engage users by addressing
their tasks clearly
• place calls to action up front
and center
• Highlight your app’s key and
new features
Organize and label menu categories to
be user-friendly
• Menu categories
should be clear with
no overlap
Just In Time Actions
• reveal relevant features
only when they are
needed.
Allow users to “go back” easily in one
step
• Apps should leverage back
functionality so that users don’t
feel forced to have to start over
from the home screen
Create frictionless transitions between
mobile apps and the mobile web
• Maintain same look and feel
• The switch should be fast
Prominently display the search field
• Apps that do not have a
prominently placed search box
can cause user frustration and
slow the user down.
Use effective search indexing
• Ensure that search results are useful
• Helpful functions include: spelling
auto-corrections, recognition of root
words, predictive text, and suggestions
while the user enters text
• These tools can reduce the likelihood of
user errors.
Provide filter and sort options
• Users become
overwhelmed when their
search terms result in
seemingly irrelevant
and/or too many results
Provide clear utility before asking users
to register
• Users will abandon an app
that asks them to provide
personal information upfront
unless there’s some form of
immediate payoff
Differentiate “sign in” from “sign up.”
• Design a “sign in” and a “sign
up” that are easily
distinguishable from each other
so users can get to where they
want to go quickly
Make password authentication a
frictionless experience
• consider a gradual engagement
approach
• Minimize the number of steps
required
• Use different authentication
methods such as a third-party
login
Build user-friendly forms
• Forms should be compatible with
how users enter information
• Ensure that form fields are not
obstructed from view by interface
elements such as the keyboard
Communicate form errors in real time
• Users dislike when they go through
the process of filling out a form only
to find out at submission, that
they’ve made an error
• Provide real-time error information
to alleviate this pain
• Point and continuously clarify to the
user when an area of a form is
successfully completed or validated.
Match the keyboard with the required
text inputs
• App users appreciate apps
that provide an appropriate
keyboard for text entry
Speak the same language as your users
• Unknown terms or
phrases will increase
cognitive load for the user
Provide text labels and visual keys to
clarify visual information
• Visuals and iconography need text
labels for consistent and proper
interpretation
Be responsive with visual feedback after
significant actions
• provide a visual animation
or another type of visual to
eliminate guesswork for the
user.
Let the user control the level of zoom
• Users want to be able to
control the level of zoom
when they view an image
• users in control by allowing
them to zoom in as they prefer
Optimize for use with one thumb
• People use their smartphones
anywhere and everywhere they
can
• distracted situations
• May require one-handed use
Pay attention to thumb zones
Pay attention to thumb zones
Echoing Core Interactions
• Present people with predictable
and familiar interactions by
echoing your primary interaction
design throughout a product
Perform Actions Optimistically
• perception is not reality, so you may
give people a richer experience by
creating a positive feel, e.g. that an app
is faster

• Use animations to make the interface

appear more responsive when results
are being loaded
Make Each Release Unique
• Attract people to update their app, e.g.
consider WhatsApp updates
Just In Time Education
• Without clear affordances, touch-based
interactions are invisible to the human
eye
• Provide brief introductory tours
• Overlay the tour on top of the actual
interface design
Make it easy to manually change
location
• Besides supporting
auto-detection of
location, make manual
entry of location easy
and straightforward
Provide previous search and purchase
information
• Save the user time and effort
by making previous searches
and recent purchases readily
available
Allow user reviews to be viewed and
filtered
• reviews gives prospective buyers
more confidence
• Aggregate rating distributions
• allow users to sort and filter so
they can get the “real story” about
an item
Enable comparison shopping features
• When users shop, they
want an easy way to
compare items of interest
Provide multiple third-party payment
options
• Users expect to see
third-party payment
systems as options
Make it easy to add and manage
payment methods
• Provide payment storage
and reduce the number of
steps involved
• include the ability to add
• multiple payment options
and a function to toggle
between them
Make it easy to add and manage
payment methods
• Provide payment storage
and reduce the number of
steps involved
• include the ability to add
• multiple payment options
and a function to toggle
between them
Provide helpful information in context
in forms
• Have relevant, in-context
information ready to assist users
Be responsive with visual feedback after
significant actions
• Provide a sense of closure to user
actions
Be responsive with visual feedback after
significant actions
• Provide a sense of closure to user
actions
Ask for permissions in-context
• Users can get stuck in a task when they deny permissions integral
to the app’s proper functioning
• Apps should ask for permissions in context and communicate the
value the access will provide
• Users are more likely to grant permission if asked during a
relevant task
Ask for permissions in-context
References
• Wroblewski, L. (). Mobile & Multi-Device Design: Lessons Learned
Building Polar.
• Grove, J. (2015). Principles of Mobile App Design: Engage Users
and Drive Conversions. Google - thinkwithgoogle.com