MOBILE DESIGN PRINCIPLES

TOPIC 3a
3. Mobile UI and Design Patterns

2
UI Design Patterns
 UI patterns provide a good starting point for specific parts
of an application
 However, the objective of this sub-topic is to illustrate the
most common UI pattern and to differentiate how
mobile design is different from Web or Desktop
application.

3
UI Design Patterns
 A design pattern documents known good
solutions to frequently occurring design problems.
 In most cases, the patterns themselves become
encoded as user expectations.
 An application that VIOLATES common design
patterns could jar and negatively impacts user
expectation

4
Desktop vs. mobile app design:
the big differences
 Screen Size
 Desktop = large
 lot more than the opportunity to add more stuff.
 Screen size affects all aspects of design,
especially navigation.
 Desktop apps can support fixed navigation bars

 Mobile = small
 Mobile apps must conserve screen space
everywhere they can, so you must be aware of
which elements are important enough to show.
 mobile are generally limited to pull-out menus

5
Desktop vs. mobile app design:
the big differences
 Interaction
 Desktop = cursors
 Desktop apps can make full use of cursor interactivity: things like
hover text or cursor-triggered animations.
 This allows desktop apps to feature entire screens full of pictures,
with descriptive text only appearing on hover.

 Mobile = gestures
 can’t hover or rollover on mobile apps
 infinite slate of gestures literally at your fingertips
 Can you imagine how boring Tinder would be if you had to click?

6
Desktop vs. mobile app design:
the big differences
 Organizing content
 Desktop = columns
 Any content on desktop can appear in a traditional multi-column
format—just like print content in newspapers and magazines.
 Mobile = scrolling
 Once content reaches a certain length, mobile apps need to use long
scrolling.
 Mobile users actually prefer continuous scrolling, and this technique
conserves screen space while making interaction more fun with gestures.
 Mobile = portrait and landscape
 Unlike desktop screens, mobile apps can switch between portrait and
landscape views at will.

7
Desktop vs. mobile app design:
the big differences
 Functionality
 Desktop = big tasks
 user prefer desktop apps for longer, more involved tasks.

 When longer tasks come up, users would rather find a seat and settle in to
desktop apps with more functions, more content, and more special features.

 Mobile = experimental
 Mobile works for short spurts and quick tasks that come up in the moment
 What mobile lacks in functionality, it makes up for with ingenuity. Right now,
mobile design is at the forefront of technology and offers tons of exclusive
features that desktop just can’t do.

8
Mobile UI Design principles
 In order to be useful, mobile apps should be user-centric.
 To be effective using an interface you’ve designed, people
must be able to recognize what it’s for and how to use it.
There is simply no room for confusion.

9
Mobile UI Design principles
 one primary action per screen.
 One hundred clear screens is
preferable to a single cluttered one.
 Example: Uber - Uber knows that
the goal of the user who uses the
app is to take a cab. The app does
not overwhelm the user with other
information: it automatically
detects users location based on GEO
data and the only thing users have
to do is to select a pickup location

10
Make Navigation Self-Evident
 Mobile navigation must
be coherent.
 Mobile navigation must
be consistent for the app.
 Mobile navigation
should communicate the
current location.

11
Design Finger-friendly Tap-targets
 When you’re designing mobile interfaces, it’s best to make
your targets big enough so that they’re easy for users to
tap.
 The edges of the target are visible when the user taps it. This
provides them with clear visual feedback that they’re hitting
the target accurately.

12
Text Content Should Be Legible
 When compared with desktops, smartphones have relatively
small screens,
 one of the challenges of mobile design is to fit a lot of information on a
small UI.
 A rule of thumb for mobile: text should be at least 11 points so
it’s legible at a typical viewing distance without zooming.

13
Make Interface Elements Clearly Visible
 You should use color and contrast to help users see and
interpret your content.
 Choose primary, secondary, and accent colors for your app that
support usability. Ensure sufficient color contrast between elements
so that users with low vision can see and use your app.
 Make sure there is ample contrast between the font color and
the background so text are legible

14
Minimize Need For Typing
 Typing on a mobile is a slow and error-prone process. It’s
therefore best to always try to minimize the amount of
typing required to use a mobile app.
 Keep forms as short and simple as possible by removing any
unnecessary fields.

15
Examples of UI Design Patterns Gallery
 Android UI Pattern document for designing Notifications

https://developer.android.com/design/patterns/notificatio
ns.html

Other Mobile UI Design Pattern galleries

16
Elements of Mobile UI Design
 Screen Design
 List-based Layout
 Grid-Based Layout

 Application Navigation
 Tab Navigation
 ViewPager Navigation
 Navigation Drawer
 Dropdown Navigation

17
Screen Design: List-based Layout
 List-based Layout is the most common
screen in any mobile application
designed to display a lot of data
 Rationale for using List-based Layout:
 Most mobile phones are oriented
vertically, with screens taller than they
are wide
 Horizontal layout mechanisms as used on
Desktop are not efficient when used in
mobile device
 List is more natural to use by users as
they can scroll down to search for data
more efficiently, and can view data at a
glance without much efforts

18
Screen Design: Grid based Layout
 Grid based layout is and alternative to
standard list-views.
 Suited for showing data sets that
represent themselves through images
or icons.
 Unlike Lists Grid list may scroll either
vertically or horizontally
 Rationale for using Grid-based Layout:
 Images/Icon can caught user attention
more effectively
 In some situation, GridList can convey
more meaning in images
19
Application Navigation: Tab
 Tab makes it easy for users to explore and switch between
views or functional aspect of application
 Tab is also used to browse categorized data sets
 Tab can either be scrollable or fixed
 Tab is often used to enable user to quickly navigate between
different part of your application without going “deeper” into
navigational structure

20
View Pager Navigation
 Similar to tab, except usually View Pager navigation
do not have labeled tab, instead it relies on navigation indicator
(represented in circles or dots)
 View Pager makes it easy for users to explore and switch
between views or functional aspect of application with a finger swipe
 Usually represents information in a full screen view
 Some applications use it in “Walkthrough” page or “Tutorial” start up screen

21
Application Navigation: Navigation Drawer
 Navigation drawer is a panel that
displays the app main navigation
options on the left edge of the
screen
 It is hidden most of the time, but is
revealed when the user swipes the
finger from the left edge of the
screen.
 Navigational drawer does not
consume spaces
 It provides a quick way for user to
navigate from one view to another
view without having to press the
“Back” button

22
Application Navigation: Drop Down
 Dropdown Navigation (also known as
spinner) is
useful when changing the content is
important but
not necessarily frequent occurrence.
 Dropdown Navigation is more preferred
where switching the content is more
frequent
 Dropdown navigation do not changes with
the rest of screen, thus providing user with
an anchor point to switch content
 Drop down occupies small area on the
toolbar / action bar on an application.

23
End of Lecture