Scribd
Upload
51 views30 pages

Chapter 4b - User Interface (UI)

The document discusses user interface design principles for mobile applications. It covers topics like mobile UI design considerations, understanding users, common navigation patterns, content structure, information architecture, and typography guidelines. The document provides details on how to design intuitive and usable interfaces for mobile.

Uploaded by

manar ahmed
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
51 views30 pages

Chapter 4b - User Interface (UI)

The document discusses user interface design principles for mobile applications. It covers topics like mobile UI design considerations, understanding users, common navigation patterns, content structure, information architecture, and typography guidelines. The document provides details on how to design intuitive and usable interfaces for mobile.

Uploaded by

manar ahmed
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 30

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

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy