WIA2007

MOBILE APPLICATION DEVELOPMENT

USER INTERFACE
Created and Updated by S. Ong
Adapted by Chiew TK
Semester 1, 2024/2025

simying.ong@um.edu.my
QUICK QUESTION 1
How many states are there in Fragment Lifecycle and what are the states?
How many states are there in Fragment View Lifecycle and what are the states?

2
simying.ong@um.edu.my
 3

OUTLINE
• Accessibility Design
• What is Accessibility and Why understand it?
• 3 Accessibility Design Principles
• Accessible Design Guidelines
• Assistive Technology
• Layout and Typography
• Writing
• Colour and Contrast
• Others: Sound and Motion
• Designing and Implementing Accessible UX
• Structure → Flow → Elements

simying.ong@um.edu.my
 4

ACCESSIBILITY DESIGN
Material 3
 5

ACCESSIBILITY
• User should be able to navigate, understand and use
(enjoy) the app for its intended purposes.
• IDEAL: Improving accessibility enhances the usability for
all users, including those with low vision, blindness,
hearing impairments, motor impairments, cognitive
impartments or situational disabilities (such as broken
arms).

But is it possible?

simying.ong@um.edu.my
 6

WHY UNDERSTAND
ACCESSIBILITY DESIGN?
• Prepare the designer/developer in understanding and
anticipate various human experiences and disabilities.
• Also, for future us (when we got older), and for those who
have situational disabilities.
• Design or develop a mobile app that is suitable and
enjoyable for the user.
• Can serve a wide variety of users.
• From a product management perspective – the after-
cost including the cost to update, or cost to maintain is
lower.
• Prevent costly redesigns, reduce tech and design debt,
and conserve resources upfront.

simying.ong@um.edu.my
 7

ACCESSIBILITY PRINCIPLES
MATERIAL 2 – PAST VERSION
1. Clear: help users navigate your app by designing
clear layouts with distinct calls to action.
2. Robust: design to accommodate a variety of users.
3. Specific: support assistive technologies specific to
your platform (touch, keyboard, mouse)

simying.ong@um.edu.my
 8

ACCESSIBILITY PRINCIPLES
MATERIAL 3

• The updated version of accessibility principles

• More emphasis on users, and the actual implementation
• Clearer
• Help anticipate, include, and respond to the needs of
individuals.
• Considerations for design, development, collaboration,
and co-creation that encourage inclusive and
equitable outcomes.
• The Material 3 Accessibility Principles:
1. Honors Individual
2. Learn before, not after
3. Requirements as Starting Point

simying.ong@um.edu.my
 9

ACCESSIBILITY PRINCIPLES
1. HONORS INDIVIDUAL

• Universal default experiences (the design for user

experience) rarely meet everyone’s needs.
• Trying to please everyone and find a balance within
them – will only make it very general and hardly satisfy
anyone.
• Two keys here to introduce customized features in
default experiences:
✓ To allow individual experience and personalization.
✓ To flexibly grow and adapt to users’ new experiences
from time to time.

simying.ong@um.edu.my
 10

ACCESSIBILITY PRINCIPLES
2. LEARN BEFORE, NOT AFTER

• Invest time to understand the users’ needs with a wide

range of abilities and life experiences
• This is what you are doing now!
• Start before defining the solution.
• Can be done in a formal or informal way – explore and
experience to be open, reduce biases, and discover
new ways to accessibility.
• When needed (design problem arises), all these can be
used as a foundation to design the solution.

simying.ong@um.edu.my
 11

ACCESSIBILITY PRINCIPLES
3. REQUIREMENT AS A STARTING POINT

• WCAG sets the minimum requirement of accessibility to

support specific human needs.
• Dark mode, text-to-speech, speech-to-text
• Complying or designing along these requirements can
lead to better user experience and improve the human
relationship with technology.
• Hence, see these requirements as an opportunity, not a
constraint, that ultimately leads to a solution that can
serve many.

• WCAG (Web Content Accessibility Guideline)

• https://www.w3.org/WAI/standards-guidelines/wcag/

simying.ong@um.edu.my
 12

ACCESSIBILITY BASICS
1. Assistive technology
2. Layout and typography
3. Writing

simying.ong@um.edu.my
 13

ACCESSIBILITY BASICS
1. ASSISTIVE TECHNOLOGY
• Help increase, maintain, or improve the functional
capabilities of individuals.
• Live more independently by engaging with technology
through devices such as:
• Keyboards
• Screen readers
• Braille displays
• Tracking input
• Magnifiers
• Voice input

simying.ong@um.edu.my
 14

COMMON FORMS OF ASSISTIVE

TECHNOLOGIES
• Keyboard
• Hardware or software directional controllers such as
keyboards, a D-pad, or trackball allow users to jump from
selection to selection in a linear fashion.
• Screen readers
• A software program that uses either a braille display or
reads text aloud, such as Google’s screen reader,
TalkBack.
• For people with vision impairments.
• Identify paragraph, button text, hidden content like
alternative text for icons and headings.
• Content can be labeled to optimize the screen reader
users’ experience - experience a text-only version UI.

simying.ong@um.edu.my
 15

COMMON FORMS OF ASSISTIVE

TECHNOLOGIES
• Switch input
• Scan the items on your screen, highlighting each item in
turn, until you make a selection.
• Switch Access lets you interact with your Android device
using one or more switches instead of the touchscreen.

simying.ong@um.edu.my
 16

HIERARCHY
• Giving users confidence in knowing where they are in
your app and what is important.
• Using multiple visual cues, and textual cues such as color,
text, or motion.
• Feedback:
• Give users feedback and a sense of where they are in
the app.
• Visual feedback (such as labels, colors, and icons) and
touch feedback show users what is available in the UI.
• Navigation:
• Clear task flows with minimal steps, easy-to-locate
navigation controls, frequently used tasks, and clear
labeling.

simying.ong@um.edu.my
 17

HIERARCHY
• Less is more:
• Every additional item increases the complexity of the design.
• Should simplify UI by using:
• Clear visible elements
• Sufficient contrast and size
• A clear hierarchy of importance
• Important actions at the top or bottom of the screen (reachable
with shortcuts)
• Place related items of a similar hierarchy next to each other
• Key information that is discernable at a glance
• To convey an item’s relative level of importance:
• Place important actions at the top or bottom of the screen
(reachable with shortcuts)
• Place related items of a similar hierarchy next to each other

simying.ong@um.edu.my
 18

VISUAL HIERARCHY
• To enable the screen reader to read out content in the
intended order, it’s important for designers to
collaborate with developers – both for writing out the
HTML in the correct order, and understanding how
screen readers will interpret designs.
• Screen readers rely on the top-down structure of HTML
on any platform (mobile or web).
• This structure creates a map for the screen reader to
follow when reading the content.

simying.ong@um.edu.my
 19

VISUAL HIERARCHY

simying.ong@um.edu.my
 20

FOCUS ORDER
• The black circles indicate the order in which onscreen
elements could receive focus.

simying.ong@um.edu.my
 21

COMPARE AND DISCUSS

 22

ACCESSIBILITY BASICS
2. LAYOUT AND TYPOGRAPHY
• Enable users who aren’t able to see the screen, or who
have difficulty with small touch targets, to tap elements
in your apps.
• Touch targets: icon + padding should be at least 48 x 48
dp (translate to physical size about 9mm – within the
recommended 7-10mm).

Icons: 24dp
Star icon: 40dp
Touch target on both: 48dp

simying.ong@um.edu.my
 23

ACCESSIBILITY BASICS
2. LAYOUT AND TYPOGRAPHY
• Pointer target (mouse/stylus): at least 44 x 44 dp.

https://uxdesign.cc/10-rules-of-thumb-in-ui-design-aa5f91885444 - what is dp / dip?

https://material.io/design/layout/spacing-methods.html#baseline-grid – more spacing method

simying.ong@um.edu.my
 24

ACCESSIBILITY BASICS
2. LAYOUT AND TYPOGRAPHY

• Touch target spacing: separated by 8dp of space or

more.

simying.ong@um.edu.my
 25

ACCESSIBILITY BASICS
2. LAYOUT AND TYPOGRAPHY
• Responsive layout: content shouldn’t be truncated as
result of device type or resolution.
• Font: features to allow users to adjust font size.
• Focus order: Input focus should follow the order of visual
layout (from top to bottom of screen)
• Grouping: similar items under heading that communicate
what the groupings are.
• Transitions: focus traversal between screens and tasks
should be as continuous as possible.
• allowing for a return to a previously focused element if a
task is interrupted and then resumed.

simying.ong@um.edu.my
 26

WHY DP, NOT PIXEL?

• Defining dimensions with pixels is a problem because different
screens have different pixel densities, so the same number of
pixels may correspond to different physical sizes on different
devices.
• When defining text sizes, however, you should instead use scalable
pixels (sp) as your units (but never use sp for layout sizes). The sp
unit is the same size as dp, by default, but it resizes based on the
user's preferred text size.

simying.ong@um.edu.my
 27

ACCESSIBILITY BASICS
3. WRITING
• Accessibility text:
• Text that is used by screen reader accessibility software,
such as Google’s TalkBack on Android
• Screen readers read aloud the on-screen text and
elements (such as buttons), including the visible and
nonvisible alternative text.

simying.ong@um.edu.my
 28

ACCESSIBILITY BASICS
3. WRITING
• Alternative text:
• Translate a visual UI
into a text-based UI.
• A short label (up to 125
characters) that
describes an image for
users who are unable
to see them.
• Useful for those who
needed/not needed
screen reader
• valuable for sighted
users, as well,
because alt text
appears if an image
fails to load.

simying.ong@um.edu.my
 29

ACCESSIBILITY BASICS
3. WRITING
• Captions, adjacent text, and
embedded text
• The text in and around
images should consider
accessibility because it
presents key information
about the images.
• Caption: text that appears
below an asset.
• Embedded text: Screen
readers are unable to read
text that is embedded in
imagery - include the
essential information in the
alt text.

simying.ong@um.edu.my
 30

ACCESSIBILITY GUIDELINES
3. WRITING
• Essential and Non-
Essential Elements:
• Essential information
should have 3:1
colour contrast ratio
for large text and
4.5:1 for small text.

simying.ong@um.edu.my
 31

ACCESSIBILITY BASICS
3. WRITING
• Be succinct:
• Keep content and accessibility text short and to the point
(especially for screen reader users).
• Avoid stating control type or state:
• E.g., use search instead of search field.
• Indicate what an element does:
• Use action verb to indicate what an element or link does,
not based on what element looks like.

simying.ong@um.edu.my
 32

ACCESSIBILITY BASICS
3. WRITING

simying.ong@um.edu.my
 33

ACCESSIBILITY GUIDELINES
COLOURS AND CONTRAST
• Help users see and interpret your app’s content,
interact with right elements and understanding actions.
• Accessible colour:
• use colour so that all users can understand the content,
as colour helps communicate mood, tone and critical
information.
• Choose primary, secondary and accent colours to
support usability.
• Ensure sufficient colour contrast for low vision users.
• https://material.io/design/color/the-color-
system.html#color-theme-creation

simying.ong@um.edu.my
 34

ACCESSIBILITY GUIDELINES
COLOURS AND CONTRAST
• Contrast ratio (how different
one colour is from another
colour):
• Important for users to
distinguish various text and
non-text elements
• Higher contrast makes the
imagery easier to see, while
• Low-contrast images may be
difficult for some users to
differentiate in bright or low-
light conditions, such as on a
very sunny day or at night.

simying.ong@um.edu.my
 35

ACCESSIBILITY GUIDELINES
COLOURS AND CONTRAST

• Contrast ratio (how different one colour is from another

colour):
• The contrast ratio between a color and its background
ranges from 1-21 based on its luminance (the intensity of
light emitted) (from W3C).
• https://contrast-ratio.com/

simying.ong@um.edu.my
 36

ACCESSIBILITY GUIDELINES
COLOURS AND CONTRAST
• Contrast ratio (how different one colour is from another
colour):
• Small text should have contrast ratio of at least 4.5:1
against its background.
• Or 7:1 for greater accessibility.

simying.ong@um.edu.my
 37

ACCESSIBILITY GUIDELINES
COLOURS AND CONTRAST
• Contrast ratio (how different one colour is from another
colour):
• Large text (14 pt bold / 18 pt regular and above) should
have contrast ratio of at least 3:1 against its background
• Or 4.5:1 for greater accessibility.

simying.ong@um.edu.my
 38

ACCESSIBILITY GUIDELINES
COLOURS AND CONTRAST
• Clustering Elements
• Some non-text elements,
such as button containers,
should meet a contrast ratio
of 3:1 between their
container color and the color
of their background.
• Group of buttons that
clustered together with other
elements, require the user to
distinguish them from the
group.
• Should have 3:1 contrast
between themselves and the
background.

simying.ong@um.edu.my
 39

ACCESSIBILITY GUIDELINES
COLOURS AND CONTRAST
• Logo and decorative elements:
• Should be distinguishable if they possess important
functionality (do not have to follow contrast ratio).
• Other visual cues:
• Ensure to include design elements in addition to colour so
that colour blind users receive same amount of
information (e.g., stroke, indicators, patterns, texture or
text).

simying.ong@um.edu.my
 40

ACCESSIBILITY GUIDELINES
OTHERS: SOUNDS AND MOTION

• Sound: give visual alternatives to sound and vice versa.

• Allow users to navigate your app using sound by adding
descriptive labels to UI elements.
• Unnecessary sounds that play over a screen reader
should be avoided (background sound should be able to
pause or stop easily).

simying.ong@um.edu.my
 41

ACCESSIBILITY GUIDELINES
OTHERS: SOUNDS AND MOTION
• Motion: guide focus between views.
• Enable content that moves / scrolls / blinks automatically
to be paused if it lasts more than 5 seconds.
• Limit flashing content to three times in a one second
period.
• Avoid flashing large central region of the screen

simying.ong@um.edu.my
 42

DESIGNING AND IMPLEMENTING

ACCESSIBLE UX
• Designing, communicating, and implementing
accessibility decisions across disciplines involves a
range of considerations to arrive at more accessible
product experiences.
• THREE stages in Material Framework (gathering
information from the WCAG standard and industry
experiences) to help anyone anticipate, plan,
document, and implement accessible experiences.
• help translate a visual UI into a text-based, linear, user
experience that maps to code.

Structure Flow Elements

simying.ong@um.edu.my
 43

DESIGNING AND IMPLEMENTING

ACCESSIBLE UX
STRUCTURE - OVERVIEW
• The landmark and headings.
• Assistive technologies (AT) rely on clear, delineated
structures to process page information, navigating
primarily through the use of headings and landmarks.
• Thinking ahead of this helps to design an accessible UX.
• Two steps:
1. Define landmarks and labels
2. Define headings

simying.ong@um.edu.my
 44

DESIGNING AND IMPLEMENTING

ACCESSIBLE UX
STRUCTURE – DEFINE LANDMARK
• Large blocks of content establish the high-level
structure of your layout
• Provide easy access to, and important meaning for,
common content areas.
• Eight landmark roles in W3C ARIA (Web Accessibility
Initiative - Accessible Rich Internet Applications)
guidelines:
• navigation, search, main, banner, complementary,
content info, region, and form.

simying.ong@um.edu.my
 45

DESIGNING AND IMPLEMENTING

ACCESSIBLE UX
STRUCTURE – DEFINE LANDMARK
1. Navigation: Contains lists of navigation links (there
can be multiple, in which case you should
differentiate using the label).

simying.ong@um.edu.my
 46

DESIGNING AND IMPLEMENTING

ACCESSIBLE UX
STRUCTURE – DEFINE LANDMARK
2. Search: A search field
3. Main: The main content area as defined by UX. There
should be only one.
4. Banner: Typically the header; content repeated from
page to page, often contains navigation and
toolbars. There should be only one.

simying.ong@um.edu.my
 47

DESIGNING AND IMPLEMENTING

ACCESSIBLE UX
STRUCTURE – DEFINE LANDMARK
5. Complementary: A sidebar or aside to main content
that can stand alone without the main content.
6. Content info: Typically the footer; contains
information describing the site and its content (for
example, copyright). There should be only one.
7. Region: Content regions are important content
blocks. They can be nested inside the “main”
landmark. Regions should be labeled with names that
make the purpose of that region clear.
8. Form: Takes and stores user info

simying.ong@um.edu.my
 48

DESIGNING AND IMPLEMENTING

ACCESSIBLE UX
STRUCTURE – DEFINE HEADING
• Clear hierarchy to help users navigate and take action.

simying.ong@um.edu.my
 49

DESIGNING AND IMPLEMENTING

ACCESSIBLE UX
STRUCTURE – DEFINE HEADING
• Map content on your pages to headings (H1–H6) in
sequential order based on the hierarchy of your
content:
✓ A single H1 for the page title is recommended.
✓ Identify headings based on content hierarchy, NOT visual
styling
• Heading levels are informed by the layout's information
architecture—the structural hierarchy that’s applied to a
set of items.
✓ Headings should not skip a level
• E.g., Don't go from H2 to H4 without using an H3
✓ Ensure that headings correspond with meaningful titles.

simying.ong@um.edu.my
 50

DESIGNING AND IMPLEMENTING

ACCESSIBLE UX
FLOW - OVERVIEW
• Define & optimize the linear user experience.
• Simplify your flows by strategically ordering tab (focus)
stops and reducing overall page complexity.
• Avoid adding more work for yourself by
using predefined tab ordering (unless needs special
tailoring).
• The default order follows the order of content as it's
written in the source code.
• Generally, flows from left to right; top to bottom
• Other consideration:
• Consider also the screen reader, keyboard, and other
assistive-technology users may navigate and interact
with your app.

simying.ong@um.edu.my
 51

DESIGNING AND IMPLEMENTING

ACCESSIBLE UX
FLOW - OVERVIEW
• Three steps:
1. Group product use case
2. Define initial focus and component-level focus
3. Define any atypical key traversal through the page
and components

simying.ong@um.edu.my
 52

DESIGNING AND IMPLEMENTING

ACCESSIBLE UX
FLOW – GROUP PRODUCT USE CASE
• Group the product use case into:
• Primary user journey
• Secondary user journey
• The priority of your use cases should influence the
decisions you make about the priority of user flows.

simying.ong@um.edu.my
 DESIGNING AND IMPLEMENTING 53

ACCESSIBLE UX
FLOW – DEFINE INITIAL FOCUS AND
COMPONENT-LEVEL FOCUS
• Focus: the current active target of
user interactions in the mobile
app.
• Define the initial focus when a
user loads a screen or for a
component with multiple
interactive elements, like a
complex card or a dialog.
• Also define the changed focus an
element is triggered by user’s
action.

simying.ong@um.edu.my
 DESIGNING AND IMPLEMENTING 54

ACCESSIBLE UX
FLOW – DEFINE INITIAL FOCUS AND
COMPONENT-LEVEL FOCUS
• For example, when a dialog is
triggered, check for the following:
• Focus is set to the dialog
component, likely to a specific
interactive element (refer to (1) in
the figure)
• When the user closes or cancels
the dialog, the focus returns to
the previous interactive element
that initiated the action.

simying.ong@um.edu.my
 DESIGNING AND IMPLEMENTING 55

ACCESSIBLE UX
FLOW – DEFINE ANY ATYPICAL KEY TRAVERSAL
THROUGH THE PAGE AND COMPONENTS
• Enable users to complete the
primary and secondary user
journeys using tab, arrow
keys, and other keyboard
shortcuts.
• Very useful even for sighted
users especially when the
primary method – touch
screen has a problem.

simying.ong@um.edu.my
 56

DESIGNING AND IMPLEMENTING

ACCESSIBLE UX
ELEMENTS - OVERVIEW
• Add accessibility labels, define roles, and indicate
decorative elements.
• Visual elements that need labels:
• Interactive icons or buttons with no visible text or not
enough context in the text (for example, an edit button
with a pencil icon)
• Interactive images
• Visual cues (including progress bars and error handling)
• Meaningful icons such as(e.g., status icons)
• Meaningful images, for example,(e.g., diagrams,
substantive photos and& illustrations)

simying.ong@um.edu.my
 57

DESIGNING AND IMPLEMENTING

ACCESSIBLE UX
ELEMENTS - OVERVIEW
• Text elements need labels to add additional context
• Generic links such as(e.g. "Learn more")
• Buttons with generic text, for example, (e.g. "Save" when
there are multiple such buttons on a page)
• Elements that do not need labels
• Non-interactive UI text, as this will be automatically read
by the screen reader
• Buttons with sufficient text, for example, (e.g.,
"Download image")
• Do not include the element name in labels
• Do not use an element role (button, menu, etc.) in your
label.

simying.ong@um.edu.my
 58

DESIGNING AND IMPLEMENTING

ACCESSIBLE UX
ELEMENTS - OVERVIEW
• Three steps:
1. Label elements
2. Add labels for meaningful images and interactive
elements
3. Assign a role to interactive elements

simying.ong@um.edu.my
 59

DESIGNING AND IMPLEMENTING

ACCESSIBLE UX
ELEMENTS – LABEL ELEMENTS
• Assist users who cannot rely
on a product's visual
interface.
• Thoughtful labels help make
the text-based experience as
usable as the visual
experience.
• Labels should concisely
describe an element's
content, purpose, and
behaviour.

simying.ong@um.edu.my
DESIGNING AND IMPLEMENTING 60

ACCESSIBLE UX
ELEMENTS – ADD LABELS FOR MEANINGFUL
IMAGES AND INTERACTIVE ELEMENTS
• Add labels to visuals that convey
meaning or enhance content.
• Labels should be concise,
descriptive, and convey the
content and context of the
element.
• Also applicable to infographics
and other instructive images
found in support docs.

simying.ong@um.edu.my
 DESIGNING AND IMPLEMENTING 61

ACCESSIBLE UX
ELEMENTS – ASSIGN A ROLE TO INTERACTIVE
ELEMENTS
• Assign roles based on your design
system components (button, slider,
menu, etc.
• To communicate desired interaction
patterns into engineering action.
• Defining an interactive element's
category by assigning it a role helps
users of assistive technology
establish expectations for how to
interact with that element and
anticipate what is likely to happen
upon interaction.

simying.ong@um.edu.my
 62

QUICK
QUESTION 2
• What are the
THREE (3)
Accessibility
Design Principles
in Material 3?

simying.ong@um.edu.my
 63

REFERENCES
• Accessibility Design:
• https://m3.material.io/
• Accessibility in Android (sample Android App for
Accessibility):
• https://developer.android.com/guide/topics/ui/accessib
ility
• Test the app’s accessibility:
• https://developer.android.com/guide/topics/ui/accessib
ility/testing

simying.ong@um.edu.my