Chapter 3a: Mobile App

development design
SKR4307
Semester II 2019/2020
 1. Mobile development tools
2. User-centered design principle
Contents 3. Interaction design principle
4. UX design
5. Usability testing
1. Mobile development tools

• Software designed to assist in the creation of mobile

applications.
– Native mobile development tools
• Android: webmastershall.com
/developers-pick-7-best-android-app-development-tools-in-2018/
• IOS: https://www.articlization.com/top-ios-app-development-tools
– Cross-platform mobile development tools.
• Important to choose the right platform for building a
mobile app.
Cross-platform

https://www.sparxitsolutions.com/blog/cross-platform-mobile-app-development-tools/
1.2 Native vs. Cross-platform vs. Hybrid

1. Native – help create specialized apps that operate

with ease and high quality, and can take advantage
of all features on their designated platform.

2. Cross-platform – make it possible to create a

generic app for multiple platforms simultaneously,
greatly cutting the costs and time needed to create
an app, but this comes with a trade-off.

Native vs. Cross-Platform Apps – You’ll Be the Winner

Ref: zeolearn.com/magazine/native-vs-cross-platform-apps-youll-be-the-winner
1.2 Native vs. Cross-platform vs. Hybrid

3. Hybrid – cheaper alternative, requires less time for

development and allows for code sharing. Drawback:
sluggish performance and suboptimal user experience.

It is important to remember that hybrid and cross-platform apps are not the
same. The one common feature between them is code shareability.

https://railsware.com/blog/native-vs-hybrid-vs-cross-platform/
• iOS (Objective-C or Swift)
• Android (Java or Kotlin)
• Windows Phone (C#)
1.3 Mobile apps – Preference Guidelines
1.4 Mobile app – The context

• Drive decision for choosing the best configuration

• If app mainly used to display and interact with online
content or services - better to avoid the native
choice.
• If app mainly used offline, a native app will offer a
better user experience.
1.5 New mobile app stack
Your Further Reading

• By Ian Blair
• https://buildfire.com
/tools-for-mobile-app-
designers/
2. User Centered Design (UCD)

• Also called human-centered design (HCD) process.

• Approach to interactive system development
• Focuses specifically on making systems usable.
• A multi-disciplinary activity.
… cont.

• The goal – to make products/applications which have

very high usability.
• The general phases of User-Centered Design process:
i. Specify context of use:  the users
ii. Specify Requirements:  granular requirement
iii. Create Design solutions and development:  iterative
(supports tools)
iv. Evaluate Product:
• More details:https
://www.interaction-design.org/literature/topics/user-c
entered-design
2.1 What is Heuristic evaluation?

• Usability inspection technique.

• First developed by Jakob Nielsen and colleagues
• Experts are guided by a set of usability principles
known as heuristics
• Experts evaluate whether user-interface elements
(dialog boxes, menus, etc.) conform to the principles
2.2 App development … more than coding
2.3 Inspiration for design

• Learning from “people”

• In-situ observations of related practices
• Grounding new designs in real-world behavior
2.4 Coherent Design

• Design is a process from the beginning.

– Ensure interaction flows for a user.
– Especially important on a small-screen mobile device!.
2.5 Conceptual Design, Prototypes, and
Evaluation
• Sketch out a high-level product design.
• Rapidly create visual representations (mockups) or interactive
representations (prototypes) of the product.
– (Will discuss more in Chapter 4)
• Evaluate the usability through:
– Heuristic evaluation
– Focus groups
– Usability testing
• Iterate design with evaluation results
2.6 Usability metrics

• Objective and Subjective

i. Task Completion  Overall Satisfaction
ii. Task Time  Clicks
iii. Task Satisfaction  Conversion Rate Errors
iv. Perceived Difficulty  UI problems (severity,
frequency)
v. Expected Difficulty Errors
2.7 Build and Testing – Iterative

• Increasing fidelity with quick test along the way

• From paper to working in the world
• Catch mistakes early when its easy to change
2.8 Launch and Maintenance

• Document everything
• Continue to collect feedback from users/customers
to improve the product in future releases
i. Surveys
ii. Focus Groups
3. Interaction Design Principles

1. Learnability
2. Efficiency
3. Memorability
4. Error Recovery
5. Simplicity
6. Mapping
7. Visibility
8. Feedback
9. Consistency
10. Satisfaction
3.1 Learnability

• An interface should be easy to use from the first time

the user interacts with it.
– Size, UI components
• Amount of functionality presented to the user should
be limited to exactly what the user requires to get to
their goal.
 • Number of
steps it takes for
a user to
complete a task.
• Key tasks should
be made as
efficient as
possible.

3.2 Efficiency
 • Interface should
be easier to use
each time the
user interacts
with it.
• Frequency of
use is the key
factor in
memorability.
3.3 Memorability –
Microinteractions
3.4 Error Recovery

• In a perfect user
interface, users
should never be
allowed to make
a mistake.
 3.5
Simplicity

• Usual tasks should

be easy and less
common tasks
should be possible.
• Avoid unnecessary
functionality and
keep the visual
design and layout
uncluttered.
3.6 Others …

• Mapping
– What the user expects to happen when they interact with
the interface is exactly what should happen.
• Visibility
– Important information should be the most visible and less
important information should be less visible.
– Understanding the user's goals is critical.
• Feedback
– User should always be in control of the interface and not
the other way around.
… cont.

• Consistency
– Like-items should always be displayed and act the same
way across the entire application (and even between
applications).
– UI standards.
• Satisfaction
– How much the user enjoys or dislikes using the software
4. Mobile UX design

• Most important in designing a mobile app is – make

sure it is useful and intuitive.
– If not useful – it has no real value for user, and no one has
any reason to use it.
– If app is useful – but requires a lot of time and effort, people
won’t bother learning how to use it.
• Good UI design addresses:
1. User-centric – user install the app because need to solve
problem.
2. Clarity into UI – Shouldn’t be a room for confusion in the
UI
4.1 Cut Out The Clutter

• User attention – precious resource and should be

allocated accordingly.
• Cluttering the interface overloads the user with too
much information.
• Important to get rid of anything on a mobile design
that isn’t necessary, because reducing the clutter will
improve comprehension.
• A simple rule of thumb – one primary action per
screen.
• One of the basic rules of good
UX – reduce the effort users
must put in to get what the
want.

• A Comprehensive Guide To
Mobile App Design -
https://www.smashingmagazi
ne.com/2018/02/comprehens
ive-guide-to-mobile-app-desig
n/
4.2 Make Navigation Self-Evident

• Helping users navigate should be a high priority for

every app.
• Good navigation should feel like an invisible hand
that guides the user along their journey
• Principles of good mobile navigation:
1. Mobile navigation must be coherent – proper signifier.
2. Mobile navigation must be consistent for the app
3. Mobile navigation should communicate the current
location
4.3 Create a Seamless Experience

• You shouldn’t think of a mobile design in isolation.

• Creating a seamless experience across mobile,
desktop and tablet is very important for the users.
• E.g., In Apple Music, we can set-up a playlist on Mac
and it will instantly be available on the iPhone.

Apple Music
4.4 Design Finger-friendly Tap-targets

• Smaller touch targets – harder for users to hit than

larger ones.
• Designing mobile interfaces – it’s best to make the
targets big enough so that they’re easy for users to
tap.
• E.g., create controls that measure have a size 7–10
mm so they can be accurately tapped with a finger.
– Such target allows the user’s finger to fit snugly inside the
target.
– The edges of the target are visible when the user taps it.
4.5 Text Content Should Be Legible

• Might have a temptation to squish everything down for a

mobile design in attempt to provide as much information
as possible.
– But should resist the temptation.
• A rule of thumb for mobile:
– Text should be at least 11 points so it’s legible at a typical
viewing distance without zooming.
• Improve legibility by increasing line height or letter
spacing.
– Good, generous whitespace can make some of the messiest
interfaces look inviting and simply.
4.6. Make Interface Elements Clearly Visible

• Use color and contrast to help users see and

interpret your content.
– To support usability – choose primary, secondary, and
accent colors for you.
– Ensure enough color contrast between elements so that
users with low vision can see and use your app.

• Ample contrast between the font color and the

background so text are legible.
Text that don’t meet the color contrast ratio
recommendations is difficult to read against it’s background.
Image credit: Apple
… cont.

• It’s extremely important to have enough contrast on

mobile:
– Users might be outdoors with low contrast on the
screen because of lighting.

The neutral grey of this page is pleasant

to look indoors, but outdoors it looks not
so good. Image credit: usertesting
4.7. Design Controls Based on Hand
Position
• Steven Hoober – 49% of people rely on a one thumb
to get things done on their phones
• Hand positions and grip should influence the
placement of controls on a mobile design:
… cont.

• Green indicates the area a user can reach easily;

• Yellow, an area that requires a stretch; and
• Red, an area that requires users to shift the way in
which they’re holding a device.

Comfort zones for a person’s one-

handed reach on a smartphone. Image
Source: uxmatters
4.8. Minimize Need For Typing

• Typing on a mobile is a slow and error-prone process.

• It’s therefore best to always try to minimize the
amount of typing required to use a mobile app:

1. Keep forms as short and simple as possible by removing

any unnecessary fields.
2. Use auto-complete and personalized data where
appropriate so that users only must enter the bare
minimum of information.
No one likes filling in forms. And the longer or more complicated a form
seems, the less likely users going to jump in and start filling in the blanks.
Image credit: Lukew
Auto-complete field for country
4.9 Test Your Design

• Too often a mobile design looks great when viewed on

a large desktop screen
– Doesn’t work nearly half as well when taken for a test on an
actual mobile.
• It is so important to test the app with real users on a
variety of mobile devices.
– Should ask real users to proceed regular tasks only after that
you’ll see how well the design really performs.
– Treat the app as a continuously evolving entity, using data
from analytics and user feedback to constantly improve the
experience.
5. Usability Evaluation

• Conduct usability evaluation on the final design.

• Work with the design and development team to improve
the product based on evaluation results.
• Repeat this process (production iteration) until the
organizational/business goals are met.
• Methods:
i. Heuristics evaluation
ii. Cognitive walkthrough
iii. Pluralistic Walkthrough / Design review
Cognitive walkthrough
5.1 CW – Example
• Step1: Identify task
• Step 2: Identify action sequence for task
– User action: Press the ‘timed record’ button
– System display: Display moves to timer mode. Flashing cursor appears
after ‘start’.
• Step 3: Perform walkthrough
– For each action – answer the following questions
i. Is the effect of the action the same as the user’s goal at that
point?
ii. Will users see that the action is available?
iii. Once users have found the correct action, will they know it is the
one they need?
iv. After the action is taken, will users understand the feedback they
get?
– Might find a potential usability problem relating to icon on ‘timed
record’ button.
5.2 Pluralistic walkthrough

• Variation on the cognitive walkthrough theme.

• Performed by a carefully managed team.
• The panel of experts begins by working separately.
• Then there is managed discussion that leads to
agreed decisions.
• The approach lends itself well to participatory design.

• https://www.quiddity.ph/services/usability-inspection-6/
5.3 Formative and Summative – The
evaluation
1. Formative
– Problem-finding during development.
2. Summative
– Measure against specific goals when development is
complete.
• In practice there isn’t always a clear distinction, and
you should use quantitative metrics in both types.