Chapter 4b:

User Interface
SKR4307
Semester I 2022/2023
1. Mobile User Interface (UI) Design
• Design falls into the category of
craftsmanship.
• To pre-emptively complete the tasks,
mobile devices are:
 Portable enough to carry always,
 Connected to voice and data networks,
and
 Contextually aware by using sensors
and networks
• App exciting new features like:
 Motion
 Gestures: Zooming, Swiping, Tapping,
Turning, and Shaking
2. Understanding App Users
• The Gestalt principles – a considerable influence on design,
describing how the human mind perceives and organizes visual data.
• The Gestalt principles – theories of visual perception developed by
German psychologists in the 1920s.
• Key principles:
 Proximity,
 Closure,
 Continuity,
 Figure and ground, and
 Similarity.
3. Design Pattern – Navigation

• Good design – makes it clear how users can

move through and use application features.
• Annunciator Panel – gives information on
the state of a mobile device.
 3.1 Fixed Menu
• Remains fixed to the viewport as
users roam content – useful in
many situations:
 Users need immediate access to
frequently selected functionality on
multiple screens.
 Revealable menu is already used on
the same screen.
 When a lack of controls, conflict
with key interactions, or low
discovery makes a reveal able menu
a poor choice.
3.2 Expandable Menu

Function options for one page – Expanding menu can provide

cannot fit on the viewport selectively available options.

A gesture (e.g., swipe or double tap) – may prompt the reveal as well as
selecting an on-screen icon.

A close button – part of the

revealed menu list, or by
Users may exit a menu using a back
toggling with the same gesture or
button,
soft key that prompted the
reveal.
3.3 Scroll

• A revealable menu – giving

additional functionality
 There will often be more content on a
screen than can be seen in the device
viewport.
3.4 Notifications and Feedback
• If the user needs new information – app creators must use
notifications. -
• These prompts pause ongoing tasks and enable users to change
processes and behaviours according to the new information or
feedback.
3.5 Content and Controls

• Input mechanisms – the controls

users manipulate to enter or modify
data
 Can be enhanced during the design
process by keeping a few key concepts of
mobile usability.
3.6 Reveal Content

• Can display content either as a full

page or revealed in context.
• When use a full-page layout, the user
should not need to constantly bounce
back and forth between pages.
3.7 Intervening Screens

• Application branding with the

title of the application:
 Content is loading
 In between screens
4. Home and Splash screen
• First screen of an application – great
opportunity for branding.
• Minimize the use of long, over-
animated splash screens and slow-to-
access main features.
• Splash screen image (boot screen) – a
useful design method to disguise slow
launch times
… cont.
• Application background – users will perceive a quicker entry to
application features.
• Parallax scrolling – foreground and background content move at
different speeds.
• The home screen – important, frequently used features are highlighted.
 • An in-progress, “loading”
4.1 Loading Screen screen signals when new
data is loading.
• Include the estimated
position in progress.
• Place the progress indicator
over a screen shot of the last
screen.
• When there is enough delay
– can display advertising on
the Loading screen.
 • Project stakeholders need to pay
the bills, and advertising can
certainly help.
4.2 Advertising • Advertising styles and
guidelines will vary across
platforms, but advertisements
must generally:
 Be clearly differentiated from
application content.
 Remain unobtrusive (low-
profile) to application features.
 Be actionable and allow user
interaction.
 Be legible.
 Use consistent styles and
layout throughout application
screens.
5. Content Structure and Usage

• App users – consume, produce, and share content.

• Users need to quickly locate and effectively use information.
• Page layouts must reflect the mental models that users understand.
• These content titles should always be horizontal, and set apart with a
different background or surrounding box.
6. Information Architecture
• A strong foundation by organizing, labelling, and identifying all content
that users will perceive.
• A growing segment of interactive content is faceted (many features),
tagging chunks of content with attributes
• Classifying information by:
 Name
 Sequence
 Fixed relationship between values
 The distance between values
 Geographic location
 Proximity
 Goals
 Categorical subject matter
6.1 Typography

• Textual content.
• Vector shapes will be rasterized on devices as fonts are converted to comply
with device formats.
• Size, shape, contrast, color, and position all matter.
• Text layout and alignment should follow certain readability guidelines.
6.2 Plain Language
• Clear and understandable to the audience
• These tips are especially relevant to app
creators:
• Omit unnecessary words.
 Take the first draft and cut it in half, and then see
if can cut it in half again.
• Use the simplest form of a verb.
• Use short, simple words, avoid jargon and
abbreviations.
• Use pronouns – avoid repeating the same
nouns.
… cont.

• Mobile plain language best practices also include:

 Focus keywords to the beginning or top of any screen.
 Use the same voice, preferably active voice, throughout the interface. Try to
also use the same tense, when practical.
 If a product must be referenced, use a consistent product name.
 Correct unnecessarily mean or passive-aggressive error messages and task
prompts.
 Avoid redundant content.
7. UI types – Mobile users

• GUI
 Take user’s input information through keyboard (virtual, mini-QWERTY,
foldable) and/or pointing methods that react the screen.
 Display relevant information on the screen.

• Web-based UI
 Accept user-request, transmits to web server, receive response and display
information on the device.
 Using mobile web browser.
7.1 UI design – The considerations
• Design the app for fingers (not for a mouse)
 44 x 44 pixels for buttons
 6 buttons maximum per width of screen (smart phone)

• TEXT INPUT – People do not like to type, so keep typing at a

minimum – etc. auto fill, emoji, voice …

• TEXT OUTPUT – People generally do not like to read, so keep text

at a minimum unless your app is designed primarily to deliver
information in text format – etc. emoji.
7.2 Importance of UI design for mobile apps

• Best practices
 Keep app consistent with others, to take advantage of user experience.
 Stay focused on the users’ immediate task.
 Display only the information and menu actions that users need now.
 Minimize the number of steps required to complete a task.
 Allow users to change their minds and undo commands.
 Display information in a way that makes effective use of the small screen.
7.3 Screen Resolution
• UI for desktop easier than mobile
 Higher resolution (1024 x 768 pixels)
 Full size keyboard
 Use mouse as pointing devices
• Supported screen resolution in mobile device
 From 128x160 pixels to 480x800 pixels
• Web-based UI
 Develop one solution to provide recognition of web-browser and resolution of
the device
 Implement adaptation of information for purpose of appropriate visualization
8. Mobile Navigation Paradigm
… cont.

• Desktop – often use tabbed and menu navigation

 Suitable for high screen resolution, full sized keyboard and mouse

• Mobile – small screen, small keyboard, limited method of navigation

 Using numbered vertical list – corresponding number (0-9) from phone’s
keypad
 Must take the screen orientation into account – most in vertical mode
 Vertical mode – cannot display text in several column
• UI Patterns For Navigation That Makes Good UX Sense
… cont.
PART II: WORKFLOW CONTROLS
Things that allow the user to move through the application and perform
work