GROUP 4

MOBILE USER
INTERFACE
DESIGN
BASSIG, FABIA, FRONDA,
GRAMATA
INTRODUCTION
A mobile user interface (mobile UI) is the
graphical and usually touch-sensitive
display on a mobile device, such as a
smartphone or tablet, that allows the user
to interact with the device’s apps,
features, content and functions.

In a mobile interface, symbols may be

used more extensively and controls may
be automatically hidden until accessed.
The symbols themselves must also be
smaller and there is not enough room for
text labels on everything, which can cause
confusion.
MOBILE USER
INTERFACE
DESIGN BEST
PRACTICES
 “
The layout of the
information,
commands, and
content in an app
should echo those of
the operating

1
system in
placement,
composition and
colors.
 “
Click points must be
usable for touch-
2
based selection with
a finger.
 “
Maximize the
content window size.

3
The “
number of

4
controls or
commands displayed
at any given time
should be
appropriate to avoid
overwhelming the
user or make
interacting with the
content confusing.
TYPES OF
USER
INTERFACE
DESIGNS
 LOGIN
AND
PROFILE
SCREENS
LOGIN & PROFILE
SCREENS
▹ For customer retention, it is best that
you offer a clean and minimalistic
login screen that users find interesting
and interactive.
▹ One of the major things that a UI/UX
designer needs to keep in mind is to
keep the login/profile page clear, tidy,
and easy to understand.
▹ It is suggested that you keep the
design and information limited, so as
to prevent the user from getting
distracted and confused.
PRODUCT
SCREEN
PRODUCT SCREEN
▹ As a designer, your focus would be on
keeping the image of the product in
the center, enlarged, so that the user
can take a good look at it.
PLAYLIST
SCREEN
PLAYLIST SCREEN
▹ For a music app, you would need a
Playlist screen, displaying the name of
the song, artist, album, length, etc.
▹ This would be a very basic screen and
you can take inspiration from top apps
like SoundHound, Google Play Music,
and Spotify.
▹ It would be a great idea to add an
image of the album the track belongs
to.
CATALOG
SCREEN
CATALOG SCREEN
▹ For an eCommerce app, you would
need a catalog screen to display all
the products in one place.
▹ The better the visual presentation, the
more are the chances of the user
buying the product.
▹ A designer’s job is to form the catalog
that will attract a user’s attention and
encourage them to shop for a product.
 FEED
SCREEN
FEED SCREEN
▹ People typically use various social
networking apps for communication
and to remain updated with the news.
▹ The news can be presented one by
one via scroll.
▹ To make the navigation more intuitive
the next piece of news should be
partially shown.
CALENDAR
SCREEN
CALENDAR SCREEN
▹ Everyone needs a calendar to be up to
date on their professional as well as
work life.
▹ Contingent upon the basic function of
the app, the calendar could perform
functions like sending timely
reminders and scheduling meetings.
▹ The visual vogue must fit the mood
and the objectives of the app to
impress the user.
SPLASH
SCREEN
SPLASH SCREEN
▹ Splash Screen is the page in an app
that demonstrates the main idea and
features of the app.
▹ It must be minimalistic, displaying the
logo, tagline, and name of a product.It
must be minimalistic, displaying the
logo, tagline, and name of a product.
▹ The basic elements must be kept in
the middle of the screen for added
visibility and simplistic design.
 HOME
SCREEN
HOME SCREEN
▹ It goes without saying that the home
screen is an important part of an app
as it is the main screen that a user
interacts with to navigate to the
different pages of the app.
▹ There are some factors in a home
screen that are common for all apps,
such as the search button and other
navigation screens.
▹ It is important that all the icons are
easily visible and do not confuse the
user.