Cross-platform mobile app development

INTERFACE DESIGN PRINCIPLE

LECTURERS
NGUYEN THANH TUAN – VKU
NGUYEN VAN VUONG
– NASHTECH
 Table of contents

• Relationship between UI and UX

• A guide to mobile interface
design
• Interface building process
• Building User Interfaces in
Flutter
• Building UI in ReactNative
 Relationship between UI and
UX
• User Interface -UI (User Interface) all inclusive
what the user can see on the device screen, such as layout, colors, fonts,
images, ...
• UI design is an important element to help convey the message from the
designer design, supplier of products and services to users.
• User Experience -UX (User Experience) refers to
the overall user experience, i.e. including many other factors besides the
interface such as experience, emotions, values received when interacting with
products or services.

4
 Relationship between UI and
UX(2)
Relationship between UI and
UX

UI UX Experiences
The content
(User Interface) Interaction (User “ahead”
displayed on
Experience) screen
screen
device

System / User
Device
5
 Relationship between UI and
UX(3)

▪ UI design refers to how content is presented

visually Visual design elements include:
▪
▪ Layout (layout)
▪ Color and Contrast
▪ Images and Icons
▪ Typography
▪ Vocabulary and
terms
▪ …
▪

6
 Relationship between UI and UX
(4)

• Interaction Design (IxD) set the focus for designers extends

beyond the product being developed, including how users will
interact with the product.
• User-centric design:
• Careful consideration of the user's needs, limitations and
contexts etc. allows to customize the output to match the
exact needs.
• IxD involves five dimensions: words (1D), image representation
(2D), physical/spatial objects (3D), time (4D) and behavior (5D).

7
 Relationship between UI and
UX(5)
Mobile app interaction design elements:
• User gestures (Gestures)
• Data entry operations (Data Entry)
• Navigate between app screens
(Navigation)
Relationship between UI and
UX(6)
▪ User Gestures (Gestures)
• The touchscreen covers almost the entire front of the
mobile device, leaving no space for physical buttons.
• Touch-screen devices rely heavily on gesture control, which
uses human hands to interact with on-screen content.
• Standard touch screen gestures:
 Relationship between UI and
UX(7)
• Data Entry
• Data entry is an essential form of interaction.
• The validity of entered data can be ensured by
reducing incorrect inputs.
• On devices with touch screens, enter data via the
virtual keyboard, the size of which depends on the
screen.
• Input methods that require a virtual keyboard should
be
kept to a minimum, alternative input methods may be
used
• (e.g. date pickers, drop-down fields, radio button
groups, default values, etc.)
te
n
 Relationship between UI and
UX(8)
Navigating between screens (Navigation)
• Display a lot of information in screens that are often
organized hierarchically throughout the application
• Users must navigate through different screens
• Important information and key functions should be placed higher
in the navigation hierarchy, allowing users to reach it faster.
• Ability to go back to the previous screen (swipe gesture / back
button in the app)
Relationship between UI and
UX(9)
▪ User-centric design
• Incorporate user concerns and needs at the outset of the
design process. User needs must be considered in all
design decisions.
• Focus on usability goals, user characteristics,
environments, tasks, and workflows in interface design.
• The user-centered design process is an iterative one.

t
w
 Mobile interface challenges

• Small screen size

• Interaction via touch screen
• Device always on (always on) &
always connected
(always connected)
• Personalize the user experience
• Diverse hardware with a variety
of sensors
…
Mobile interface design

Mobile-first design
• Daily activities such as jogging, exercising traveling on public
transport such as bus or going to supermarket shopping, etc.,
all use mobile phones for work and leisure.
• Designers have a shift in priorities when building layouts first
for mobile screens.
• Optimizing all the content, features and especially enhancing
the experience are the main concerns.
• Responsiveness
• Keep it simple
• Finger-Friendly design
• Feedback
• …
Mobile interface design (2)

Responsive
• Screen sizes vary widely, and it's important to group different
types of devices based on their similar screen sizes to manage.
• The device can be used in landscape and portrait mode.
• → difficult to build a user interface capable of responsiveness
for all screen sizes.
• The goal of responsive design is to make the display of an
app or website appear as if it were tailored for each device
and screen size.
Mobile interface design (3)

Responsive layouts:
• Automatically adjusts your layout to fit your device's size and orientation.

Responsive widgets
• Mobile UI design is often represented by physical size unit.
• Minimum recommendations for size, Touch target size varies between
7mm and 10 mm2, the minimum distance between the targets should be
about 1-2 mm

Responsive content
▪ Text content can be minimized by selectively displaying the
most important content.
Images can also be scaled responsively for devices large and
small.
Mobile interface design (4)

▪ For example, compare desktop and mobile

display differences

1
8
 Mobile interface design
(5)
Keep it simple
• Simplicity is the key to a better user experience.
• Check out the graphics and images for better fit and
more efficient user interface.
• Reliability Users can perform their actions with as few
steps as possible and keep their attention on
the app longer.
• Eliminate UI clu-tter
• Limited space, prioritize important information
• Minimize fixed bars for header,
footer and navigation

1
9
Mobile interface design Apple: the 44
pixel target
(6)
▪ Finger-Friendly
design
▪ Touch screen interaction with fingers: smaller touch
targets
→ difficult to use and more likely an error occurred
→ Designed to be optimized for touch

25px =
touchable 40px
= optimal
Test touch input
on real device
Mobile interface design
(7)
▪ Finger-Friendly design: Touch Ergonomics
• Most gestures are designed for one-handed use.
• The main navigation is designed to use the thumb to complete
the interaction with the phone in hand.
• Consider the 'thumb zone'
Mobile interface design
(8)
▪ Finger-Friendly design: Touch
Ergonomics
▪ Holding the device in different
ways

2
2
Mobile interface design
(9)
Feedback
• App feedback is very important during user
interaction.
• Give user feedback not only when content loads but
after each completion of a specific task.
• Combine different types of feedback such as
flash, vibration, or sound.
 Mobile interface design
(10)
User behavior analysis
• Behavior-based design is a set of techniques used for persuasion.
• The idea is to use behavior patterns to benefit a certain design, so
that it allows the user freedom of choice and autonomy in
operation. It leverages learned behaviors, to steer the user in the
right way.
• Make the user feel calm and in control and trusted.
• With a reliable design that allows users to build habits within a
design framework that will drive user engagement and retention.
 Mobile interface design
(11)
Context-aware:
• The environment is always changing because of the fact that users
are mobile use their mobile device anytime and anywhere.
• Different social context causes users to divide their attention
between the mobile world and the real world.
• Advanced technologies such as accelerometers, sensors or location
awareness embedded in devices increase the possibilities
of innovative interaction design.
• The solution when designing for mobile is to keep it simple and try
to focus on the best important functions.
 Instructions (Guidelines)

• User interface guidelines is a document that describes all the rules

and elements to design an interface.
• They are intended to help GUI designers create interfaces that are
efficient and consistent with the general ergonomics of
communication.
• Target of companies recommending the guide (Google and Apple) is
to encourage developers to create better quality apps.
 Guidelines
(2)

• Material Design: is a set language Design

was developed in 2014 by Google.
• Material Design offers more freedom of style
with grid layouts, animation responses,
stretching, and depth effects such as light
and shadow.
 Guidelines
Example(3)
Material Design principles structured around design fundamentals:
• Layout: Material Design layouts encourage consistency across
platforms, environments, and screen sizes by using uniform elements
and spacing. The Android UI uses an intuitive and predictable
layout, with the most grids, keylines, and padding.
• Style: The Material Design color system can be used to create color
themes that reflect a brand or style.
• Animation: Motion helps create an expressive and easy-to-use user
interface.
• Components: utilities in the application's user interface.
• Usability: Accessible design allows users of all abilities to successfully
navigate, understand, and use a clean, user-friendly interface with
distinct calls to action.
Guidelines
(4)
Ex▪ample interface components according to Material Design
guidelines
- 1. Action button :
• 1. Primary, positive action
• 2. Add, favorite, create etc.
• 3. Never destructive
• 4. Never
multiple
• Provides visual feedback
- 2. Ripples:

2
9
Guidelines
(5)
▪ The Human Interface Guidelines -HIG , is a set of user
interface resources as well as implementation
documentation that describes exactly how to integrate with
Apple's
▪ Appleplatforms.
guidelines user interface is made for use on
Their wide range of hardware products include: Mac OS, iOS
iPadOS, watchOS, tvOs
and
▪ iOS apps are developed rigorously around three core
Apple themes.
▪ Based on these, there are high expectations for both functionality
and quality of design required before any app is included in the
Apple App Store.
Guidelines
(6)
▪ Rule Human Interface Guidelines -HIG , include:
• Metaphors
• Reflect the User's Mental Model
• Explicit and Implied Actions
• Direct Manipulation
• User Control
• Feedback and Communication
• Consistency
• WYSIWYG (What You See Is
WhatYou Get)
• Forgiveness
• Perceived Stability
• Aesthetic Integrity
• Modelessness
th
irt
 Navigational
models
▪ Mobile apps are limited by the size of the display screen,
so most apps will use multiple screens. The concept of
▪ switching between those screens is called navigation.

▪
There are two main types of navigation structures used in
mobile applications
• Flat navigation structure: Content is logically grouped into
categories, where each category has its own top-level views.
• Deep navigation structure: A selection per screen must be made
to navigate to the next deeper hierarchy, until a certain
endpoint (the leaves in the tree) is reached.

3
2
 Navigational models(2)

There are two main types of navigation structures used

in mobile applications

3
3
Navigational
models(3)
Effective navigation guidelines:
• Implement navigation in a way that helps users easily reach
the desired content or functionality
• Avoid letting the navigation structure become too deep
• Always indicate the user's current location inside the app
• Always equip sub-level views with a “Back” / “Up”
button to indicate the possibility of returning to the main level
view

Application navigation can be one of several group

• Null Navigation
• Stack Navigation
• Horizontal Navigation
• Composite Navigation

3
4
 Navigational
models(4)

▪ Null
Navigation
▪ In both Android and iOS, there are
There can be multiple Views
associated with a Controller. The
controller is responsible for passing
the various Views to the top,
displaying the
underlying data, and handling the
▪ events for each View.
Null Navigation model: a Controller
is associated with many Views and
will clearly define which one to
display.
3
5
 Navigational models(5)
Stack Navigation
• Concept of "stacked" screens
• The application will act as a controller that
performs navigation by pushing screens into
a stack as the user navigates deeper into the
application.
• This creates a hierarchical design that allows for
reverse navigation, by popping the top screen
from the stack.
• The model helps to separate screens into
functional entities one reasonable way.
Navigational models(6)

Horizontal Navigation
• Horizontal navigation is done
through the use of tab bars.
• Each screen is displayed at the same
level as the others without reference
to the display order.
• Different screens can be displayed
at any time based on tab
selection.
• Without the ability to go back, each
screen can be considered active,
continuously displaying its
information.
Navigational models(7)

▪ Composite
Mixed Navigation
▪Navigation that combines
Horizontal Navigation and Stack
Navigation by stacking on top of
tabs or by nesting
▪ Horizontal view on top of
Stacks. By combining the two
▪ types of Navigation, developers
can create apps that run
natively, with users being able
to navigate into multiple
hierarchical screens.

3
8
 Navigational models(8)

• Side drawer example: one of the most popular

navigation patterns for mobile apps
• Advantage:
• Can hold a fairly large number of options in a
small space Neat interface keeps
users focused on the main content
• Limit
• When navigation is hidden, users are less
likely to
 Navigational models(9)
Example Tab Bar: : do not hide navigation, allow direct
access
• Advantage
• Intuitive (using icons, labels and colors) allows
for quick interaction
• Navigation bar is always in view even though
users can switch pages
• Usually placed below, within thumb range
• Limit
• Number of navigation options limited due to
having to keep the optimal touch target size.
 Navigational models(10)
Example Floating Action Button: a floating round
button on the UI, typical of Android
Advantage
• Takes up less screen space: the
button is prioritized for the
most important action
• Enhance user experience.
• Can use it more efficiently
than traditional action button
Limit

• May distract the user from the

content
• Can hide the content below
 Navigational models(11)

▪ Example Gesture-Based Navigation: : based on gesture to

suitable direction
Advantage
• Eliminate UI clutter
• More Natural User Interface
• Gestures can be a defining
feature of a product, e.g.
Tinder
Limit
• Navigation is invisible →
requires user learning.
• Most gestures are not natural
and are not easy to
learn or remember.
User Gestures

▪ Popular
gesture
patterns
on iOS
and
Android
platforms

4
3
 User gestures(gestures)
(2)
Difference between Android and iOS standard
gestures
 User gestures(gestures)
(3)gestures:
Kinesthetic
• Kinesthetic is the ability to detect body movement
Involves mobile devices using sensors to detects
and reacts to touch, action, and orientation
allowing the display to respond to the speed,
movement, and orientation of the mobile device.
For example, shake the device to perform
undo / redo or switch songs in the music player.

4
5
 User gestures(gestures)
(4)

Gesture guidelines
• Avoid in interaction design:
using overly complicated gestures, rely on
standard gestures
• Avoid using standard gestures for non-standard actions
• Provides discoverable keyboard shortcuts for
additional gestures
• Make the gesture reversible

fo
rt
Interface building process

▪ ISO 9241 -210 . iterative design

process

4
8
 Types of Interface
• Patterns
Prototyping plays an important role in every design process.
• A user interface prototype is a hypothesis-a candidate design solution
being considered for a particular design problem.
• There are many types of prototypes, examples are as follows:
• The single page prototype consists of a single page and represents a part
of the user interface design. A multi-page prototype represents a template
with enough menus, screens, and click targets to allow the user to
complete a task.
• Realistic and detailed prototypes compared to hand sketched prototypes on
paper.
• Interactive prototype vs static prototype.

4
9
Types of Interface Patterns
(2)
Low-Fidelity Prototypes
• Low fidelity prototypes are simple, easy to build and use.
• These are sketches or prints of a certain design.
• The low fidelity prototype does not allow the user to interact
with the product. Sketches, Storyboards, and Wireframes are
good examples of low-fidelity prototyping techniques.
 Types of Interface Patterns
(3) prototypes
High-fidelity
• High-fidelity prototypes allow for full functionality and independent interaction.
• Tool for testing usability and fine-tuning details, but time consuming to create
and adjust.
• More suitable for usability tests in the late stages of development.

5
1