SKR4307

Sem 1 – 2022/2023
Chapter 5b: UI/UX
“Even though it might seem overwhelming to start a
project from scratch with very little experience, it’ll
boost your creativity and challenge you to uncover
new solutions. Don’t stop, just keep moving.” —
Bojan Novakovic, Self-taught UI/UX designer
Reference: https://bootcamp.uxdesign.cc/basic-introduction-to-user-experience-and-user-interface-design-f0aae08a2b44
1. Mobile UX design

• Most important in designing a mobile app

– make sure it is useful and intuitive.
 App Not useful – it has no real value for user,
and no one has any reason to use it.
 App is useful – but requires a lot of time and
effort, people won’t bother learning how to
use it.
• Good UI design addresses:
 User-centric – user install the app because
need to solve problem.
 Clarity into UI – Shouldn’t be a room for
confusion in the UI
1.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.
• Simple rule of thumb – one primary action
per screen.
• 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.smashingmagazine.com/2018/02/
comprehensive-guide-to-mobile-app-design/
1.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:
 Must be coherent – proper signifier.
 Must be consistent for the app.
 Should communicate the current location.
1.3 Create a Seamless
Experience

• Shouldn’t think of a mobile design

in isolation.
 Creating a seamless experience
across mobile, desktop and tablet is
very important for the users. Apple Music
 E.g., In Apple Music, can set-up a
playlist on Mac and it will instantly
be available on the iPhone.
1.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.
• 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.
1.5 Text Content Should Be
Legible
• A temptation to squish everything down for
a mobile design in attempt to provide as
much information as possible.
 But should resist the temptation.
• 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.
1.6. Make Interface Elements
Clearly Visible
• Color and contrast to help users see and
interpret the content.
 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 its
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
1.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 – area that requires a
stretch; and
• Red – 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
1.8. Minimize Need for Typing

• Typing on a mobile is a slow and error-

prone process.
• Best to always try to minimize the amount
of typing required to use a mobile app:
 Keep forms as short and simple as possible –
removing any unnecessary fields.
 Auto-complete and personalized data – 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.
1.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.
• 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.
2. UI Patterns
For
Navigation
That Makes Good UX Sense
2.1 Customer/Client Journey Map (CJM)

• As entrepreneurs, designers, or developers, our job is to give our users

and customers a wholesome experience:
 Should help them get a smooth customer journey from start to finish.
• CJM – used to map the relationship between a customer and an
organization over time and across all channels on which they interact
with the business.
• Design teams use customer journey maps to see how customer
experiences meet customers’ expectations and find areas where they
need to improve designs.
 https://www.interaction-design.org/literature/topics/customer-journey-m
ap?ep=ug0
“Data often fails to communicate the
frustrations and experiences of
customers. A story can do that, and
one of the best storytelling tools in
business is the CJM.”

— Paul Boag, UX designer, service

design consultant & digital
transformation expert
2.2 CJM – Tell Customer Stories
• Research-based tools use by design team to reveal typical customer
experiences over time & visualize the many dimensions and factors
involved.
 Enable brands to learn more about target users.
• Team members examine tasks and questions (e.g., what-ifs) regarding
how a design meets or fails to meet customers’ needs over time when
they encounter a product or service.
 These maps should be detail-rich timelines that show the most important sub-
tasks and events.
 Over this timeline framework, add insights of what customers think and feel
when proceeding along the timeline.
2.3 CJM Components

i. A timescale – a defined journey period (e.g., 1 week) including

selected areas from awareness to conversion and beyond.
ii. Scenarios – the context and sequence of events in which a
user/customer must achieve a goal (e.g., a user wants to buy a ticket on
the phone), from first actions (recognition of a problem) to last actions
(e.g., subscription renewal).
iii. Touchpoints – what customers do while interacting and how they do it.
iv. Channels – where they perform actions (e.g., Facebook).
v. Thoughts and feelings – what the customer thinks and feels at each
touchpoint.
2.4 Goal of a CJM

1. To gain an understanding of how the customer experience develops

over time and show that in a deliverable which everyone in the
organization can appreciate.
2. It allows to discover possible problems and improve the design so
it’s more likely to exceed customers’ expectations at all
touchpoints.
2.5 Steps in Creating CJM
i. Define Map’s Business Goal – clarify who will use your map and what user
experience it will address.
ii. Conduct Research – use customer research to determine customer experiences at
all touchpoints. Get analytical/statistical data and anecdotal evidence through,
e.g., customer interviews, surveys, social media listening and competitive
intelligence.
iii. Review Touchpoints and Channels – list customer touchpoints (e.g., pay a bill)
and channels (e.g., online). Look for additional touchpoints or channels to include.
iv. Make an empathy map – pinpoint what the customer does, thinks, feels, says,
hears, etc. in a given situation. Then, determine his/her needs and how
he/she feels throughout the experience. Focus on barriers and sources of
annoyance.
… cont.

v. Sketch the Journey – piece together everything (touchpoints,

timescale, empathy map output, new ideas, etc.) however like(e.g., a
map). Want to show a customer’s course of motion through
touchpoints and channels across the timescale, including his/her
feelings at every touchpoint.
vi. Iterate and Refine – revise and transform sketch into the best-
looking version of the ideal customer journey.
vii. Share with Stakeholders – ensure all stakeholders have the map,
understand it and appreciate how its use will bring beneficial
changes to customers and across the organization.
2.6 CJM Tools

• THREE types of CJM tools that will give the required data:
i. Traditional website and behavior analytics tools
 Hotjar, Google Analytics, Heap

ii. Tools to visualize customer journey map

 Miro, UXPressia, Smaply, Gliffy

iii. Voice of the customer tools for user feedback

 Hotjar, Clarabridge, InMoment
 1. Can’t Unsee - https://cantunsee.space/
2. Color

Play Games 3. The Bezier Game

4. Kerntype

to Test & 5. Betterwebtype

6. Pixact.ly

Enhance 7. The Boolean Game

Your UI/UX
Skills
https://www.sprungstudios.com/2021/10/04/ui-ux-designer-skills-
games/