Android Design Patterns in Mobile Application Development - Michalis Grigoropoulos - MSc networks and data communications - Thesis

ANDROID DESIGN PATTERNS IN MOBILE APPLICATION
DEVELOPMENT
GRIGOROPOULOS MICHAIL
Master of Science in Networking and Data Communications
THESIS
Kingston University London

ANDROID DESIGN PATTERNS IN MOBILE APPLICATION
DEVELOPMENT
Dissertation submitted
for the Degree of Master of Science in Networking and Data
Communications
GRIGOROPOULOS MICHAIL
ADAMOPOULOS DIONISIS
KINGSTON UNIVERSITY, FACULTY OF SCIENCE,
ENGINEERING AND COMPUTING
PIRAEUS UNIVERSITY OF APPLIED SCIENCES, DEPARTMENTS OF
AUTOMATION ENGINEERING AND ELECTRONICS ENGINEERING
JULY 2017
Kingston University London

Table of Contents
Introduction ...........................................................................................................5
Android OS..............................................................................................................5
Android's Design History.......................................................................................6
Android Studio ......................................................................................................11
Android Application Design Principles................................................................11
Design Patterns ....................................................................................................13
Design Anti-Patterns ............................................................................................15
Application Design Patterns and Anti-Patterns ...............................................16
Interaction..............................................................................................................16
Getting Input and Performing Actions.................................................................18
Navigation .............................................................................................................27
Presentation..........................................................................................................34
Feedback...............................................................................................................40
Anti-Patterns .........................................................................................................42
Application Development Based on Design Patterns.....................................48
Project's Scope.....................................................................................................48
Business analysis and design .............................................................................48
Conclusion ..............................................................................................................60
Design Process Criticality....................................................................................60
Design Patterns Usability in the App ..................................................................60
The Benefits of Using Design Patterns..............................................................62
References...............................................................................................................64

Android Design Patterns in Mobile
Application Development
Grigoropoulos Michail1
, Adamopoulos Dionisis2
1
Dpt. of Automation Engineering and Electronics Engineering, “MSc
in Networking and Data Communications”, Piraeus University of Applied
Sciences (TEI of Piraeus), Greece,
E-mail: michalis.grigoropoulos@gmail.com
2
Dpt. of Automation Engineering and Electronics Engineering, “MSc
in Networking and Data Communications” Piraeus University of Applied
Sciences (TEI of Piraeus), Greece,
E-mail: dxa@otenet.gr
Abstract - Design patterns help developers and designers to solve
common design problems by using tested and user friendly solutions. The
term can be applied to both directions to build a thing and the thing itself.
The purpose of this study is to present such solutions and examine their
applicability in android application development and user experience. For
the study's purposes, an application called "Messeme" was developed
based on some of the design patterns that are presented in the Second
section of this Thesis.
In the Introduction section, the Android OS is presented along with a
short flashback to Android's versions and the design patterns and
innovations used by the OS. Design pattern's and Anti-Pattern's definition
are also explained together with the basic principles in Android design.
In the second section selected Android Design Patterns and Anti-patterns
are presented thoroughly with screenshots from current known
applications, following Christopher Alexander's documentation methods.
In the third section of this thesis, the application "Messeme" is presented.
An analysis of the screen's design and the functionalities of the
application is conducted and the design patterns that were used, are
mentioned in each section.
In the last section, conclusions, regarding the usability and experience
that design patterns offer, are drawn and evaluated from the use of the
application. The benefits of using design patterns in application
development are also presented.

Introduction
Android OS
Android is today's most popular Operating System running on mobile
devices [1]
. It runs on 80% of mobile devices worldwide. It was
designed and launched in 2007 by Google and revealed
commercially in September of 2008.[2][3]
Android stack was created to
be used with a wide array of devices.
The Linux Kernel
Android OS is based on the Linux Kernel. That means that
manufacturers can develop drivers for their hardware easily for a
well-known Kernel such as Linux. [9]
Android Runtime
After android version 5.0 each application runs on its own process
and instance of the Android Runtime (ART). ART can run multiple
virtual machines on low-memory devices by executing DEX files, a
byte code format designed especially for Android that is optimized for
minimal memory footprint. Build tool chains, such as Jack, compile
Java sources into DEX byte code, which can run on the Android
platform. [9]
Application Development
Java* is used for the development of android applications that control
the device with Java libraries developed by Google. Android provides
a rich application framework that allows building apps and games for
mobile devices in a Java language environment. The code is
compiled along with any data, by the Android SDK tools (Software
Development Tools) into an APK. APK is an android package which
is an archive file with .apk file extension.
XML is used for the creation of layout files. The creation of different
XML layout files allows the system to choose between them
depending on the mobile's screen size. [4][9]
Security
Each Android application lives in each own, protected by the following
features[9]
:
 The Android operating system is a multi-user Linux system in
which each app is a different user.
 By default, the system assigns each app a unique Linux user
ID (the ID is used only by the system and is unknown to the
app). The system sets permissions for all the files in an app so
that only the user ID assigned to that app can access them.
 Each process has its own virtual machine (VM), so an app's
code runs in isolation from other apps.
 By default, every app runs in its own Linux process. The
Android system starts the process when any of the app's

components need to be executed, and then shuts down the
process when it's no longer needed or when the system must
recover memory for other apps.
 Each app, by default, has access only to the components that
it requires to do its work and no more. This creates a very
secure environment in which an app cannot access parts of
the system for which it is not given permission.
Android's Design History
Since the first Android version, Android has gone under an incredible
metamorphosis. Smart-Phones is one of the most evolving
technology and industry of our times. This for the Android OS meant
that it should evolve as fast to keep up with the devices' evolution and
be able to use every new feature the hardware could offer. Many
changes could be seen from version to version that gave the
consumers a more user friendly and powerful interface.
Android 1.0
Google developed Android 1.0's UI with help from The Astonishing
Tribe, a Swedish interaction design firm responsible for some truly
amazing interface concepts over the years.
The first Mobile device ever used the Android 1.0 OS was T-Mobile's
G1 in 22 October 2008 in the United States of America. Many
features that are considered to be standard in today's versions were
missing. The device had a hard keyboard and that is why the
operating system did not offer an embedded soft keyboard.
The Notification Window - Android 1.0 introduced the most
revolutionary notification system that was later adopted by other
competitive operating systems. That notification system was no other
but the well known drag-down notification window. The status bar
notified the user with messages and alerts coming from other users
or from applications that were installed on his smart-phone. [10]

Figure 1: T-Mobile's G1 with Android 1.0
Home Screen Widgets - Android is the only Mobile OS until today
that used home screen widgets that gave the user quick access to
application information and functions. In Android 1.0 though,
developers could not create their own widgets.
The android Market - When Android 1.0 shipped it lacked, it did so
at the very start of the mobile application revolution. The Android
market was a very simple application that contained only a few Apps
that the user could install. It also lacked a payment system until the
next year of its release.
Android 1.1
No major changes were made graphically in this version. A fairly
lengthy list of bugs was patched, but if nothing else, Android's ability to
roll out updates over the air and make them nearly effortless for users to
install was validated. At the time, that was a big deal, and it was
something that no other major smart-phone platform was doing.
Android 1.5 "Cupcake"
In many ways, Cupcake was about refinement, polishing some rough
edges on the user interface that had originally launched. Some of
these changes were nearly imperceptible if you weren't looking for
them. For instance, the standard Google search widget — a staple on
many users' home screens — gained a hint of transparency, and the
app drawer was decorated with a subtle weave pattern beneath the
icons.

An on screen keyboard was added to this version along with the
enhancement of other functionalities. Widgets became extensible,
clipboard was improved Video capture/playback support was added
etc.
Android 1.6 "Donut"
The major enhancement in this version was the update of Android
Market. Android Market began to take it's form and started to
resemble today's market apps. New screen capabilities were
launched with "Donut". This opened the door for phones featuring
displays other than 320x480 portrait.
Android 2.1 "Eclair"
Android 2.1 was the first Android version that included Google Maps
Navigation and Speech to Text functionalities.
Android 2.2 "Froyo"
In Andoird 2.2 the overall performance of the system was improved
and functionalities such as Tetherin and Voice Actions were added.
Android 2.3 "Gingerbread"
"Gingerbread" made the android experience simpler and faster for
both users and developers. Gaming was brought to another level
since developers were able to built heavy-graphic 3D games thanks
to lower level access to audio, device controls, graphic and storage.
NFC, battery management, an improved keyboard, support for front
facing cameras, and redesigned copy-paste functions were also
some fundamental additions.
Android 3.0 "Honeycomb"
Android 3 was the first version of Android that came with an onscreen
system bar to replace physical buttons. It had a more tablet friendly
design and the new quick settings functionality made it even easier,
for the user, to access essential information of his phone. Colors also
changed from green to a light-blue.

Figure 2: Android 3 - Quick Settings menu
Android 4.0 "Ice Cream Sandwich"
"Ice Cream Sandwich" was a big change for Android. Android Beam,
Face Unlock, data usage analysis, new calendar and Email apps,
improved multitasking and action bars within applications were
added.
Android 4.1 "Jelly Bean"
"Jelly Bean" introduced the Google Now personalized assistant to the
Android users. Actionable notifications were added and also the
ability to change accounts so that the device could be used by
different users.
Android 4.4 "KitKat"
Android 4.4 gave the user the ability to control his smart-phone by his
voice with "Ok Google". The user could just say "OK Google" to
launch voice search, send a text message, get directions or even play
a song. In this version, immersive design was implemented. The user
could focus to what he was doing with the help of the immersive
design that hided everything except from the things, the user really
wanted to see. The smart dialer was also
Despite being just a point update, 4.4 brought the largest visual
change to the platform since the release of Android 4.0 Ice Cream
Sandwich. The familiar blue accent color seen throughout versions
4.0-4.3 was been replaced with white, excising the last remnants of
the Tron-inspired aesthetic introduced in Android 3.0 Honeycomb.

Additionally, a number of stock apps were redesigned with lighter
color schemes.
But the biggest change was found in the home screen: Android 4.4
introduced a transparent notification bar and on-screen buttons; a
refined, condensed version of the standard Roboto font; a new app
drawer; and most importantly, Google Now integrated directly into the
home screen.
Android 5.0 "Lollilop"
Android gets an entirely new look with the release of Android
"Lollipop". Based on shadows and motion, Material design unites the
classic principles of design with the innovation of what's possible
through the evolution of design technology.
"Lollipop" was designed to fit any device with any screen size. It is
compatible with wearables , tablets and smart-phones.
Notifications appearing on the lock screen as cards was also a nice
enhancement.
Figure 3: Android 5 - Notifications on lock screen
Android 6.0 "Marshmallow"
Android 6.0 "Marshmallow" is the latest Android OS version until
today. Permissions' control is changed in this version. The user can
define what he wants to share with each application. Battery

optimization is made easier with the use of Doze and App Standby.
With the simple tap and hold on the home button, the user can have
access to Google Now. Fingerprint functions were also added.[9][10]
Android Studio
Android Studio is the official Integrated Development Environment
(IDE) for Android application development. It is based on IntelliJ
IDEA and it offers features that enhance a developer's productivity
when building Android apps.
Project Structure
A project in android studio contains everything that defines the
developers workspace for an application.
Each Android Studio Project contains one or more modules.
A module is a collection of source files and build settings that allow
the developer to divide your project into discrete units of functionality.
The project can have one or many modules and one module may use
another module as a dependency. Each module can be
independently built, tested, and debugged.
Application components are the essential building blocks of an
Android app. Each component is an entry point through which the
system or a user can enter your app. Some components depend on
others. There are four different types of app components[9]
:
 Activities
 Services
 Broadcast receivers
 Content providers
Android Application Design Principles
Android uses a new design metaphor inspired by paper and ink that
provides a reassuring sense of tactility. This design metaphor is
called material design. Material Design is a visual language for
developers and users that synthesizes the classic principles of good
design with the innovation and possibility of technology and science.
By using the principles of Material Design the designer can develop a
single underlying system that allows for a unified experience across
platforms and device sizes. Surfaces and edges of the material
provide visual cues that are grounded in reality. The use of familiar
tactile attributes helps users quickly understand affordances. Yet the
flexibility of the material creates new affordances that supersede
those in the physical world, without breaking the rules of physics.
The foundational elements of material design guide visual treatments.
Some of these elements of print-based design are, typography, grids,
space, scale, colors and use of imagery. These elements are used
not only to please the eye but also to create hierarchy, meaning and
focus. The developer/designer should use the appropriate colors,
large scale typography, images and intentional white space to create

a bold and graphic interface that immerse the user's experience. An
emphasis on user actions makes core functionality immediately
apparent and provides waypoints for the user.[12]
Measuring and sizing things in DPs ensures your designs have a
consistent physical size across devices of varying density. To ensure
balanced information density and usability, touch targets should be at
least 48 x 48 dp. In most cases, there should be 8dp or more space
between them. Size elements must be at least 48dp high and wide to
ensure a physical size of about 9mm regardless of screen size. The
recommended target size for touchscreen objects is 7-10mm.[19]
The fundamentals of light, surface, and movement are key to
conveying how objects move, interact, and exist in space and in
relation to each other. Realistic lighting shows seams, divides space,
and indicates moving parts. Motion is meaningful and appropriate,
serving to focus attention and maintain continuity. Feedback is subtle
yet clear. Transitions are efficient yet coherent. Primary user actions
are inflection points that initiate motion, transforming the whole
design. Animations are used to keep the user grounded to the UI by
helping gesture seem responsive and intuitive. Movement should be
smooth, natural and match the gesture's speed and intensity. [12]
Some good examples of applications following the principles of
Material Design are the following[13]
:
 Evernote
 Google Drive
 Houzz
 LastPass
 LocalCast
 Robinhood
 Runtastic Running
 Slack
 Solid Explorer
 Textra
 Today Calendar
 Wally
Human-Mobile Interaction Observation
Before the appearance of mobile devices, the context of software was
a computer that users sit in front of. The way to interact with a
computer, is by keyboard and mouse. The context is simple enough
and is not highly considered when designing a computer application.
With mobile devices things are different. Users interact with a mobile
device by using other methods that are inspired from the real world
and physical movement. Users can interact with a mobile device by
using touch, voice, movement, location and visualization. This fact
should be highly considered in a project's scope and in the
application's design because the user's behavior with the device is
highly depended on context.

Variety in Form Factors
Since there is a variety of platforms and devices, an application
should be compatible with the most, if not all of them. An application
must be as pleasant and usable when it runs on a small phone as it
will be when it runs on a small or large tablet. The user interface must
eventually match the specific needs of the device. A variety in form
factors must be allowed when prototyping. The design approach of
the whole project must be modified in order for the form factor of the
device, transitions and animations to be included.
Simplicity and Sophistication
Because of the screen's size of a mobile device, mobile applications
need to have a simple and sophisticated interface that allows more
and easy readable content to be presented to the user. The user
should be able to focus on that content without been distracted by
other objects.
Cross-Channel Experiences
Most users have their mobile phone always with them. People
nowadays go nowhere without their mobile phone. Because of the
incredible array of on-board sensors (microphone, GPS, light sensor,
camera, near field communications [NFC], touch, motion, and so on)
the mobile experience creates a completely unprecedented
connection between offline (also known as “real-world”) and digital
realities. Mobile phones are now more often used to augment offline
real life experiences. A task could start from the mobile application,
be continued on a desktop and finish in a physical store. Channel
integration and interaction should be highly considered when
designing an application.[16]
Design Patterns
Design patterns in software design are defined as tested solutions to
solving design problems. The term can be applied to both directions
to build a thing and the thing itself. A pattern can describe a design
problem and the procedure or the object that can be used to solve
this problem or even an instance of the problem.[7]
Design patterns
are formalized best practices that the developer or the designer can
use to solve common problems when designing software. A Design
Pattern can also be described as the intermediate between the levels
of a programming paradigm and a concrete algorithm.
The History of Design Patterns
The whole idea of design patterns was born from architects who
investigated automated, computerized building design in the 60s.
Their interest was focused in rules and algorithms that could
transform requirements into a configuration of building modules. This
trend was later known as modular construction/design.

Christopher Alexander was the main exponent of the idea at the time.
He was born in 1936 in Vienna and was a professor at the University
of California, Berkeley. He was an architect and design theorist and
his research focused on nature and human-centered design. His
theory affected many fields beyond architecture such as sociology,
software, urban design and others. He is considered to be the father
of the pattern language movement.[8]
He recurring themes in
architecture that were often repeated and were more aesthetically
pleasing to the human eye, while pleasing the human's needs and
providing comforts and documented them as patterns.[5][7]
Why do we need Design Patterns?
Since design patterns are proven solutions to a problem, they are
already tested and known to work effectively. Valuable time and effort
can be saved from the development of a project by using a pattern
instead of designing a custom solution that will demand a significant
amount of effort.
A pattern can be customized in order to fit the project's requirements.
It is, within certain boundaries, a customizable solution that can fit the
developer's needs for solving a specific design problem and it can be
re-customized and used several times to solve similar problems.
By using design patterns developers can deliver to the user a more
friendly and easy to learn Application. The user may have seen or
used similar solutions before in different ways. Solutions that are
based on a design pattern, may be more familiar to the user.
Design Patterns do not tell the developer/designer how to
code/design an application but instead it uses values to determine
which is the best solution to his problem. Design patterns offer
solution to common problems that occur in software design. They
increase productivity but reduce the ability of customization.[6]
Structure of a Design Pattern
Many patterns have been designed and developed over the years by
many authors. Design patterns are described by authors in highly
structured documentation. This documentation usually uses a
template in order to identify the information that is needed to
understand and solve a software problem. There is no standard
agreement on how this template should be but it usually resembles
the one shown in Table 1.
Term Description
Pattern Name
Describes the essence of the pattern in a short, but
expressive, name

Intent Describes what the pattern does
Also Known As List any synonyms for the pattern
Motivation
Provides an example of a problem and how the pattern
solves that problem
Applicability Lists the situations where the pattern is applicable
Structure
Set of diagrams of the classes and objects that depict the
pattern
Participants
Describes the classes and objects that participate in the
design pattern and their responsibilities
Collaborations
Describes how the participants collaborate to carry out
their responsibilities
Consequences
Describes the forces that exist with the pattern and the
benefits, trade-offs, and the variable that is isolated by the
pattern
Table 1: Design pattern common template
The template shown in Table 1 captures the essential information that
is required from a developer to understand if the problem that the
pattern solves, resembles the problem that he is trying to solve and
presents the structure of the solution, so that he can decide if the
solution fits his needs and can be used with the parameters of his
project.
Design Anti-Patterns
Anti-patterns, also called pitfalls, are classes of commonly reinvented
bad solutions to problems. Antipatterns should always be avoided
when designing a project, so they are studied in order to be
recognizable when investigating possible solutions to problems.
The term "Anti-Patterns" was first used in computer science and was
inspired by the Gang of Four's book "Design Patterns", which
displays examples of high-quality programming methods.[19]

Application Design Patterns and Anti-Patterns
Interaction
Gestures
Figure 4: Android touch-screen gestures
Intent - Since there is no mouse or physical keyboard, gestures are
used for the performance of different actions. Selecting the right
gesture for an action means that the system will be user-friendly and
easy to learn and use. The performance of a gesture should have a
reaction that seems natural to the human eye and does not overcome
the natural laws by far.
Motivation - The business requirement in this case is that the user
should be able to interact with objects on his screen in many different
ways. For example, the user has a map on his screen and he must
be able to move the map, zoom in, zoom out, zoom in to fit, rotate
and select a place on the map. A different gesture should represent

each of these actions. By using the standard pattern, users already
know how to perform the above actions.[14]
Applicability - Gestures are almost common for all platforms so far.
Android commonly used gestures and the actions that should be
caused by each of them, are presented in the following table:
Action Description
Touch
mechanics
Activate
Activates a screen element, like a
button
Touch
Cancel or
Escape
Cancels or escapes out of the
current task, as in dialogs or
menus
Touch
Enable/Disable
lights out
Hides or shows a view’s chrome Touch
Drag or Swipe or
Fling
Scroll, Reveal upon scroll, Pan,
Dismiss, Swipe to refresh, Edge
swipe, Paging swipe, Overscroll
collapse, Menu open, and Tilt
Drag, Swipe,
or Fling
Data selection
(when nothing is
selected)
Selects a single element
Long press,
two-finger
touch
Data selection
(when items are
already
selected)
Selects additional elements while
in selection mode
Touch, two-
finger touchCan use any combination of
subsequent one- or two-finger
gestures
Data multi-
selection drag
Reveals selection box that
originates from point of gesture
initiation Two-finger
swipe or drag,
long-press
drag with no
items selected
The height and width can be
adjusted based on finger position.
The final selection is based on
selection box dimensions upon
finger(s) lifting.
Pick up and
move
Affects the selected item or items.
It can be used to: Two-finger
long-press
drag, long-
press drag on
selected item
Rearrange data within a view
Move an item into a container or
onto a target
Reorder items in a list or a card
collection
Zoom in Scales up content
Double-touch
Double-touch
drag (down)
Pinch open

Zoom in to fit
For nested views, scales up the
smallest targetable view
Double-touch
Zoom out Scales down content
Double-touch
at maximum
zoom
Double-touch
drag (up)
Pinch closed
Two-finger
touch
Two-finger
double touch
Expand Expands collapsed content Pinch open
Collapse Collapses expanded content Pinch closed
Rotate Rotates the targeted content Rotate
Table 2: Commonly used gestures
Getting Input and Performing Actions
Smart Keyboards and Controls
Intent - Using smart keyboards, means that different type of
keyboard appears to the user according to the type of data inserted to
the selected field.
Motivation - The user should be able to type data quickly and with no
errors. If the field's data type is numeric, the user should only type
numbers and should not be able to insert letters or characters. In this
case the numeric keyboard should pop up and not the full keyboard
that distracts user's attention with unnecessary keys and make him
susceptible to errors. With the use of the numeric keyboard in this
case, extra coding effort for data validation is avoided. The same
applies if the field's data type is a date. A could be used to allow the
user to enter a value choosing the correct date or time in an easy way
and in the correct format.
Applicability - For different data Types, a different type of keyboard
should appear. [14]
Data Type Description Keyboard/Control
Free Text
Any number, letter or
Character
Full Alphanumeric
Keyboard
Numeric
Only numeric values and
decimal point if necessary
Numeric Keyboard
Phone Number Phone Numbers Numeric Keypad
Date / Time
Date / Time Values in any
format
Spinner / Numeric /
List of Values /
Picklist

URL URL / Link
Full Alphanumeric
Keyboard with the
“/” and “.com”
buttons displayed
next to the
spacebar instead
of behind the
symbols key. The
".com" key should
change to other
extensions (.eu,
.net, .org) by long-
pressing it.
Email Email Address
Full Alphanumeric
Keyboard with the
“@” and “.com”
buttons displayed
next to the
spacebar instead
of behind the
symbols key. The
".com" key should
change to other
country extensions
(.eu, .net, .org) by
long-pressing it.
Table 3: Keyboards/Controls for each data type
Cancel/OK Buttons
Intent - Action Buttons must be positioned as Cancel/OK on the top
or bottom of a form. The primary button (OK) must be on the right in
order to be reachable from right-handed users. Sometimes the OK
button should be larger than the cancel button. The OK button should
be disabled in case the user hasn't done the requested actions (e.g.
Completing mandatory fields). [16]

Figure 5: WhatsUp and Spitogatos.gr Apps - Cancel/OK Buttons
Motivation - In the past when mobile screens were smaller it was
convenient to put the cancel button to the right and the OK button to
the left. Now with bigger screens it's easier for the user to choose the
OK button when it is on the right side of the screen.
Applicability - This is the standard pattern that should be used for
every form or dialogue box in an application.
Multi-State Buttons
Intent - Multi-State Buttons are Buttons that act both as action
triggers and a feedback mechanism.

Figure 6: Google Play Store's Multi-State Buttons
Motivation - Users need to know the state of the button before
pressing it. Multi-State buttons act as a feedback mechanism and
save space from the UI. The most common multi-state button is the
Play/Pause button in music / movie applications which performs two
actions (pausing and playing) and shows its state with the Pause and
the Play symbols. Android's Play Store also uses Multi-State Buttons.
Applicability - Applies to all projects that use buttons to change
states in an object and the user needs to now the current state of the
object before pressing the button to perform an action.
Auto-Complete and Default Values
Intent - Using default values means presetting the value of a field, so
that the user does not have to fill it if not necessary.
Auto Complete functions are functions that prompt the user to choose
from a possible list of values and auto-complete his entry as he types.
The application tries to guess the user's entry from a history of
entries or from a predefined list of values.
Motivation - Typing in a mobile screen is not as easy as typing on a
hard keyboard. For example, it requires time and effort for a user to
complete a form and in many cases the users abandons the try. By
presetting default values and using auto-completion the user is saved
from extra effort. It is also better for data manipulation and analysis to
have a default value in a field than having a Null value (In case filling
the field is not mandatory). Applications like Google Maps use auto-

completion to save the user valuable time. Shopping applications
have default values for the quantity or color of the product and the
user can change the values depending on his needs.
Applicability - Auto-Complete and default values can be used in
form, search fields or any field that the user's entry can be guessed or
proposed by the system.[14]
Easy Login / Registration
Intent - An easy-to-fill registration form, is a registration form that the
user can complete easily, with the least amount of typing and time.
Several methods can be used for that reason. A Login form should
require a minimal number of inputs like:
 Username
 Password
 Password help
 Command Button
 An Option to Register
The Password should be masked by default but the user should have
the option to unmask it by clicking on the common "Eye" icon or on a
"Hide/Show" words.
The latest and fastest way to sign-in or sign-up is the registration
through social media option. Registration with personalization is used
often by many apps.
Many applications use registration forms without the Confirm Email
and Confirm Password fields. This is a good method to use when the
audience of the application is consisted of average users.
Motivation - Filling in registration/sign-in forms on a smart-phone's
screen is not as easy as it sounds. The user should have to type the
least amount of information possible. The registration form may be
the first interaction of the user with the application. It should be easy
for the user to complete the form and proceed with using the app and
it should not take him a lot of time or effort.
Applicability - Applies in every project that requires Registration and
Login from the user.[15][14]
Commonly used Patterns:
Registration, Registration with Personalization, Checkout, Calculator,
Search Form, Multi-Step, Long Form, Sign In.
Search Sort And Filter
Intent - Searching and sorting data in an application can be easier
and bring better results when using patterns like implicit or explicit
search, auto-complete, onscreen sorting and filters.

Motivation - Users need search, sort and filter results to match their
requests for information. They should be able to search sort and filter
data in the most effective and quick way.
Applicability - Applies to every project that requires Search sorting
and filtering.[15]
Function Pattern
Search
Implicit Search
Explicit Search
Auto-Complete
Scoped Search
Dynamic Search
Saved
Popular
Search Form
Search Results
Sort Patterns
Onscreen Sort
Sort Overlay
Sort Form
Filter Patterns
Onscreen Filter
Filter Overlay
Filter Form
Filter Drawer
Gesture-Based Filter
Table 4: Search, Sort and filter Patterns
Swiping
Intent -Swiping means allowing the user to move content on the
screen to perform actions like Deletion, Archiving, accepting,
rejecting, changing screens or any other action related to the
application's functionalities. Mail applications and social applications
like Tinder use swiping a lot.

Figure 7: Gmail App - Swipe left to archive an email
Figure 8: Huawei's Mail App - Swipe left to reveal more Options

Motivation - Users want to perform quick actions using only one
hand. Deleting or archiving an email is a good example by swiping
saves the user time, effort and clicks. Swiping provides users with a
very intuited way to handle information on his screen.
Applicability - Applies to any application using list views or
applications that ask the user to choose between two actions.
Swiping can also be used to reveal more options regarding the object
that was swiped or to reveal more objects on the screen (Carousel) or
even to reveal a menu.
Date and Time Wheel
Intent - Date and Time when is a control on a field that brings up a
date/time picker light-box. The picker resembles a wheel which the
user can swipe vertically to scroll between a range of dates or time.
Figure 9: Google Calendar's Date Wheel
Motivation - Users need to give date or time input in an easy and
without errors way. Using the standard date/time wheel allows users
to achieve that while the developer does not have to validate the data
inserted since the user choose from predefined values throught the
wheel.

Applicability - Applies to any application that uses date or time
fields.
Floating Action Button
Intent - Floating action buttons are used for a special type of
promoted action. They are distinguished by a circled icon floating
above the UI and have special motion behaviors related to morphing,
launching, and the transferring anchor point.
Figure 10: Gmail App Floating Action Button
Motivation - Users need to always have instant access to a specific
action that is used very often in the application. When scrolling down
the ability to access this functionality should not be lost. Floating
button floats above content and the user has always access to it. For
example, facebook uses floating button for new post creation and
Gmail App uses it for creating a new email which is a main
functionality for a mail application.
Applicability - Applies to any project that has a main functionality
that is commonly used and users need quick access to it. [17]
Pull to Refresh
Intent - Refresh content by pulling or swiping down the results.

Figure 11: Gmail's App - Swipe down to refresh
Motivation - The user wants to get updates or refresh the information
displayed on his screen manually. He is presented with a long list of
updates. The user typically reviews the list of updates starting at the
top, reading the most-recent messages first. The application loads
newer updates, as the user pulls down on the results list, performing
a scroll-up function.
Applicability - Applies mainly to projects that have integration with
other systems to get updated content.
Navigation
Action Bars
Intent - The top section of an application can be used as an action
bar that shows different buttons according to the action performed.
Each button will perform a different function when pressed.
In Figure 5, Gmail's Application is shown. In the left screenshot the
search button can be seen on the action bar. When an email is long-
pressed, different buttons appear and provide the user with options
related to the selected email (Delete, archive, move).

Figure 12: Gmail App Action Bar
Motivation - Users want quick access to commonly used actions
such as clipboard functions, quick search and various application
related functionalities.[14][16]
Applicability - Applies to any project. The Action bar can be used
with static or dynamic buttons.
Overflow Menus
Intent - Overflow menus are menus that appear or pop up over the
main content of the application. These menus are usually triggered by
pressing the Android's three vertical dots icon on the top right corner
of the application.

Figure 13: CamScan's and Youtube's Overflow menus
Motivation - Users need immediate access to actions they can
perform or additional options. Overflow menus provide this ability by
showing a menu over the main content of the application. The menu
is consisted of options or actions that the user can perform. By using
overflow menus, extra buttons can be hidden in order for the UI to
become clear and uncluttered.[14][15]
Applicability - Applies to any project that contains a lot of quick
access functionalities that cannot be represented by buttons and the
need of a menu can simplify the graphic design and the user's
experience.
PopOver - PopUp - Context Menus
Intent - PopOver, PopUp and context menus are menus that are
triggered when the user touches an arrow sign or action buttons or, in
many cases, by long-pressing an item. They provide functionalities
similar to right clicking. When a PopOver Menu is triggered, the menu
appears on top of any content and the background is faded out.
PopOvers and PopUps can contain information, buttons or more
options for the user to select.

Figure 14: WinRar's Context Menu and Spotify's PopOver Menu
Figure 15: Google Play's PopUp Menu

Motivation - Users want quick access to a menu that provides them
with options depending on the application's content. In desktops and
laptops users use right clicking to access such menus. In Android
though there is no such option and right click does not transalte to
touch. Tap-and-hold or action buttons can be used to show a PopUp
menu that contains options users need.
Applicability - PopOver, PopUp and context menus can be used to
any project to show more options to the user and simplify the graphic
design and the user's experience.[14][16]
Swiss-Army-Knife Navigation
Intent - A Swiss-Army-Knife is a tool that has foldable hidden blade
and tools inside the handle. Swiss-Army-Knife Navigation has the
exact same ability and the pattern took its name from that. Swiss-
Army-Knife Navigation or Side Menus are menus that appear and
hide by swiping them or by pressing the android's 3-vertical-bars icon.
The side menu appears from the left or right side and it contains
options that execute a procedure or perform actions (e.g. Exit,
Logout, Configuration Options) or navigate the user to a new
activity/view.[14][15][16]
Figure 16: Gmail's Side Menu

Motivation - In comparison with a Desktop's screen, smart-phones
have a small screen to fit the options, an application can offer. Users
need a clean interface with more space for content and easy access
to menu for navigation within the application. Side menus hide, to
create more space for content and give easy access to customers.
Applicability - Swiss-Army-Navigation is suitable for every
application that needs more space for content and less for not often
used options.
Swiping Between Tabs Navigation
Intent - Swiping between tabs and views navigation allow users to
navigate between views by swiping left or right on the content area.
They are always visible on the screen and can’t be moved out of the
way like scrollable tabs.
Figure 17: Adobe Reader's Tab Menu
Motivation - Users want quick navigation between views. Fixed tabs
display top-level views concurrently and make exploration and
switching between them easy. Swiping can be used to navigate
between tab, screens and content without having to go back to a
menu or index.

Applicability - This pattern should be used when there is the
expectation that users change tabs frequently and when users need
to be highly aware of the alternate views.[15]
Vertical Navigation - Grouped List of Links
Intent - Vertical scrolling Navigation, is presenting important sections
of the UI in list views that are vertically scrollable. Users can scroll
content vertically by swiping up and down. By choosing an option
from the list, an action is performed or the user navigates to another
activity.
Figure 18: Spotify's and Facebook's app Vertical Navigation
Motivation - Users need to choose from a variety of options or
content that do not fit the screen and could not be represented as
buttons. By using vertical scrolling navigation the list of options can
expand according to the application's scope. Vertical Navigation also
leaves more space on the header and footer for more "universal"
navigation options, such as action bars.
Applicability - Applies to projects that need to provide a way for the
user to navigate between different sections of the app, but there’s
limited space to show this information.

Sticky/Fixed Navigation
Intent - The top, bottom or side navigation or menu is static and stays
always in place even when the view is scrolled.
Figure 19: Dropbox app Fixed Navigation
Motivation - Users needs access to menus or options while using the
application. By using this pattern the menu stays in place in order for
the user to access it any time. Taking Dropbox or contact applications
as examples, it is easily noticed that the side alphabetic al scrollbar is
also static for the user's needs.
Applicability - Usually applies to any project that a static menu that
does not disappear when scrolling, is needed. This pattern is often
used with Adress books, Photo and file-folders galleries.
Presentation
Hub-and-Spoke Homescreen
Intent - Hub-and-Spoke pattern, lists all the major parts of the
application on the Homescreen or "Hub". The Homescreen of the
application provides links to other activities or view inside the same or
another application.

Figure 20: Car.gr and Google Home Apps - Homescreen
Motivation - Users need to get the whole picture of the application's
functionalities or a family of functionalities from the Homescreen
without having to browse through menus and submenus. The Hub
makes clear what information can be obtained within the application
and what are the available Options for the user. Users can navigate
easily to each link.
Applicability - Applies to projects that have complexity and perform
several functionalities with different options each.
Dashboard / News Feed
Intent - Dashboard pattern, presents critical information for the user
on the application's Homescreen in a Dashboard form.

Figure 21: CNBCs App - Homescreen
Motivation - Users need important for them information to be
displayed directly on the Homescreen of the application so that they
can access it directly or get the information they want without having
to browse inside the application or drill down to other options. A
Dashboard on the Homescreen presents this information in short and
gives users the ability to get general information and statistics.
Applicability - Dashboard/Newsfeed can be used anytime there is a
need to obtain numbers, information and statistics that are important
to the user. Financial and banking apps, travel apps and tracking
activity apps use dashboard pattern. Social media, and News
applications use dashboard Homescreen displayed as a newsfeed.
Transparency
Intent - Transparency pattern is the use of gradients and fading
overlays in menus, notifications or other layers, to show that there is
layered content below. [16]

Figure 22: E-food.gr transparent toast message and Spotify's semi-transparent
menu
Motivation - User has the need to know if there is content behind an
overlay. By applying transparency, users can see what is behind the
front overlay.
Applicability - The use of semi-transparency and responsive content
creates a wonderful experience. It can have a practical use but it can
also be used for making the UI more pleasant to the eye. It should be
used in applications that want to provide users with the ability to see
what is behind their optical view. [14]
Huge Buttons
Intent - Use huge buttons when there is no space restriction. Full
width buttons is a pattern that is often used in popular applications.
Basic choice buttons should share the full width of the screen.

Figure 23: E-food.gr huge order-now and Soundhound's huge listen-now buttons
Motivation - The user needs quick access to the main functionality of
the application and he needs it fast and even doing it with one hand.
By using huge buttons the user can have access to the functionality
he wants to use easy and fast without holding the device with two
hands. A good example of huge buttons are Shazam , Soundhound
and Tinder applications which allow the user to operate them fast with
one hand without having to search for the button on the screen.
Applicability - Huge buttons is a standard pattern to use in all
applications but fits better in applications that have a main
functionality and are simple with limited actions for a user to take.[14]
Full Screen Mode
Intent - In Full Screen Mode, the UI is minimized and users only see
the content.

Figure 24: Facebook's Camera Mode vs Pixlr's Fullscreen Camera Mode
Motivation - Users want to focus on content instead of being
distracted by the clutter of the UI. Using fullscreen mode pattern
allows users to be able to exploit the whole screen and get better
view of content. In Figure 24 a comparison between facebook's
camera implementation and Pixlr's camera implementation. Facebook
does not use the full screen pattern and a lot of screen space is lost
for the controls. The image becomes smaller and the bottom and
upper parts of it is cut.
Applicability - Applies to projects that want to give users an more
immersive experience with the content when it is needed.
Spinners
Intent - When the applications loads data, fetches data from the
internet or performs a procedure a spinner appears on the screen
and content becomes faded.
Motivation - User Needs to know when the application is loading. By
showing the user that the application is loading with a spinner, he
does not tap on other options and knows that he has to wait until the
procedure is finished.
Applicability - Applies to all projects which use functionalities that
demand an amount of time to be processed.[16]

Feedback
Toast Messages/Alerts
Intent - In the original Android implementation Toast alerts are
messages that pop up from the bottom of the screen. In general, any
alert message that appears on the screen with and goes away
without user actions, is called "Toast Alert". When a condition that
generates a toast alert is met, a small overlay window that contains a
message, an icon or link, or both appears. Usually animated
transitions are used to catch the users attention.
Figure 25: E-food.gr and LinkkedIn Apps - Toast Messages
Motivation - Users need to be alerted from the app without
interrupting their workflow. Unlike Pop-Up Message, Toast Alerts do
not need an explicit function to be dismissed.
Applicability - Applies in all projects whenever there is a need to
inform the user about something.[14][16]
Pop-Up Alert
Intent - Pop-Up alerts are flow disrupters that inform the user with
text and icons and ask for an action to be taken. When an alert
condition is met the system pops up a lightbox and the background is
usually darkened.

Figure 26: Dropbox App - Pop Up Alert
Motivation - User needs to be informed for an event and take action.
When using pop up alerts, the interaction flow is disrupted and the
user has to take an action to continue.
Applicability - This pattern should be used when the current task
flow needs to be disrupted with an alert that requires the user to take
an immediate action.
Inline Error Messages
Intent - When an input error occurs the system notifies the user by
showing an error indication next to the field that is not properly filled
or below it. The error message or icon is usually in red color to catch
the user's attention.

Figure 27: Google's Calendar Application - Inline Error Alert
Motivation - It is very common for users when completing forms, to
mistype or fill the wrong information to the wrong field. Users want to
know which field is not correctly filled and update their entry. When
this pattern is used, data validation code finds the error (e.g. The "@"
symbol does not exist in email typed by the user) and alerts user to
correct their error before they can submit the form.
Applicability - Applies mainly in projects that contain forms that the
user has to complete.
Anti-Patterns
Novel Notions
Many times, especially new designers trying to be creative, they
design bad and hard to understand applications. Attending to
translate old interaction models to new innovative ones is not always
the best idea especially when non-standard UI elements are
introduced.
Novel Notions can be found on NBC News App (older version). The
application is full of anti-patterns like[15]
:
 The menu is in an non standard location in the middle section
of the app. It is difficult for users to find and interact with it
 The rotated text is hard for the user to read
 The too many colors make the UI confusing for the user

 There is no navigation function since it does not show users
where they are and where they can go
Figure 28: NBC News App
[15]
Control Mismatch
Using non standard custom controls is an anti-pattern. By not using
the default Android controls, users get confused trying to understand
the new buttons. Menus should not be misplaced and the standard
android menu positions should be applied. Android's default controls
are easily recognizable by Android users and should be preferred
instead of custom ones.
Icon Mismatch
Using non standard custom icons is an anti-pattern. By not using the
default Android icons, users get confused. Users have specific
expectations for common icons e.g. the gear icon is used for settings
and the magnifying glass for search. Android's default icons are
easily recognizable by Android users and should be preferred instead
of custom ones.
Gesture Mismatch
Using non standard custom gestures is an anti-pattern. By not using
the default gestures, users get confused. Users have learned the
common used gestures and by changing them users get confused
and annoyed. Android's users are familiar with default gestures and
used to them. [15]
A good example for this anti-pattern is the Facebook's Messenger
application versions after 91.0 and before 125.0.0.22.70. Facebook
Messenger used the default swipe down gesture to refresh content
(Messages) in older versions. After the 93.0 version and with the
launch of Messenger Day, Facebook Messenger was arguably
repeating this same pattern, sacrificing the user experience for the

strategic objective of promoting its new features. In these versions
Facebook replaced the swipe down to refresh gesture with a swipe
down to open the camera gesture. Users were frustrated and the
application's rating dropped immediately in the Android market.
Facebook Messenger took back that change after version 125.0
because of the users' complaints. [20]
Model Mismatch
Using the right buttons, icons and gestures is not the only things. a
designer or a developer must be aware of. Model Mismatch is very
often met in applications designed by inexperienced developers. Not
using the right flows that a user can logically follow means bad user
experience and difficulty in operating the application. For example,
imagine an application for dedicated technical support with
automated answers to a problem that the user selects. Now imagine
that instead of letting the user to choose from a list o values or a
menu the nature of his problem and presenting him the results, he is
forced to choose from a checklist, add his option to a cart and check
out in order for the results to show. Choosing from a list and adding
options to cart, would be a nice solution for a shopping application but
not for the technical support app.
"Idiot" Boxes
The user's flow should not be disrupted with unnecessary Boxes/Pop
Ups. Interrupting the user's flow for no urgent reason is something to
avoid in order to keep the user's experience in high levels. "Rate this
app" windows and asking for access rights windows on first use, can
be frustrating to the user who wants to just use the application. Its
access rights should be asked before the functionality that demands
an access right runs. "Rate this App" window should be triggered
after some time that the application runs on user's device.
Confirmations should be asked only for actions that are irreversible.
For example, there is no need to ask users to cofirm the addition of a
product to the cart in a shopping app, but on the contrary he should
be asked when the he tries to delete a contact from a contacts
application.
Chart Junk
Chart Junk is the all the visual elements in graphs and charts that are
not necessary for the user to see and does not need them to
comprehend the results. The user gets distracted and the data get
hard to read.
Bottom tabs
While bottom tabs can be used a design Pattern, sometimes it can
also be an anti-pattern. On iOS, it’s common to use a bottom tab bar
to switch between views in the app.

The bottom navigation material design pattern includes best practices
for adopting this navigation structure on Android, including
implications for the Back button, scrolling and swiping behavior, and
visual styling.
For Android though, it is more common to use a tab bar at the top of
the screen. A top tab bar is preferable in a number of situations:
 If swiping between tabs is desirable (avoid swipe for bottom
navigation)
 If another element such as a music player’s ‘now playing’ bar
requires the bottom area
The key differences between the two approaches are:
 Bottom navigation bars can persist across category and detail
screens, while this is highly discouraged for top tab bars
 Bottom navigation bars always represent the top level of the
app’s information hierarchy, whereas top tabs can be used for
any level
 A navigation drawer generally contains additional top-level
targets when used with bottom navigation bars, while top tab
bars are always subordinate to items in the navigation drawer
Drill-down List Navigation
A deep list-based navigation, known as drill-down navigation, is
where lists lead to more lists which lead to even more lists. It is often
inefficient and difficult to use. With this kind of navigation the number
of touches required to access a piece of content is generally very
high, leading to a poor user experience.
This type of navigation is often tedious to use as making the wrong
selection means, going back to the right list, re-orienting yourself and
making another choice. This can quickly become frustrating.[21]
Figure 29: List drill-down navigation

Using the Action Bar Overflow for Core App Navigation
On Android, primary app navigation is done using Navigation
Drawers, Tabs or Spinners. The Action Bar overflow is used for
action related items e.g. Search and Settings. A common maxim for
this is Navigation on the left, Actions on the right.[21]
Oceans Of Buttons
Placing too many buttons on the screen makes it hard for the user to
focus on content and difficult for him to choose a button to press
among many others on his screen. That is why it is not recommended
to put more than on row of buttons in a screen.
Square Peg, Round Hole
The Square Peg, round Hole anti-pattern is a mistake made by many
developers who do not want to take the time re designing the
application which was initially designed and developed for another
OS (e.g. iOS).
Porting an iOS design straight to Android without modifications not
only makes the application looks funny but it also breaks the Android
design conventions. [16]
Forced Login
In Android OS users find apps by browsing the App Store. That
means that they can find a free app and install it without knowing
what the application is all about. A common mistake that developers
do is forcing users to log in or signup before they can use the
application.
Users won't give their credentials (email address) so easy and in
many cases, they get bored doing it so they just uninstall the
application.
Users so take a tour inside the application's functionalities before they
are asked to create an account. The best practice is to ask for the
user's login in order to give him rights perform basic functions of the
application that a guest user cannot.[21]
Small Touch Targets
Small Touch targets are targets that are too small and in small
distance from other objects that the user cannot press. The user will
make wrong selections and that is a good reason for him to leave the
app. The app may also seem to be non-responsive as a user taps on
what they think is the area affected by the touch and see no
noticeable action take place.
The material design specification document states the right
dimension limits that should be used in dpis.

Neglecting Touch Feedback
Not giving a user feedback when they take an action increases the
app's perceived latency. User selections need to be pointed with
motion or pressed and focused state. Selected items should be made
obvious by the use of color and shape (e.g. making an icon/font bold).
In material design, shadows are used to show that an element is at
the forefront.[21]
Not Including a tutorial or contextual help
Not including a tutorial or contextual help inside the application is a
common mistake made by developers who think that all users can
directly understand the application's functionalities and the
developer's way of thinking and designing the app.
The best practice either to include a section inside the application
with instructions on how to use the application or contextual help
which acts like a guide for the user during the application's operation.
Games for example use very often the contextual help pattern to
explain the controls of the game or how the game is played. All
applications should at least have a link to a help page to empower the
user's support experience of the application.
Confusing landing screen
The first page of an app is very important. If users are confused by
the first screen it is likely that they will not continue to use the app.
Apps with a lot of functionality should organise the functionality in
easily understandable categories. Dashboard design pattern is often
used to solve this issue.

Application Development Based on Design Patterns
In order to study design patterns and their usability, an android
application was designed and developed. The project was
successfully completed in 10 steps:
1. Scope Definition
2. Business Analysis
3. Research Methods
4. Application Sketch
5. Application Design
6. Mockups Creation
7. Development
8. Prototype Testing
9. Details Refinement
10.User Acceptance Testing
Project's Scope
The scope of the project was the creation of an app in which users
can write notes that relate to a place/location and get notified when
they get to that place. The application should be able to determine
user's location by using 3G/4G, Wifi and GPS services. It should
consume the minimum amount of the device's battery and should be
as easy as possible to use.
Business analysis and design
Screens / Views
Homescreen - The main content of the application is presented in a
list. Each item on the list is consisted of the place's label, the note
that is related to that place and an option button that gives the user
options for the selected place.
Design Patterns Used: Floating Action Button, Side Menu, Action Bar

Figure 30: Messeme App - Homescreen
Field Name Field Type Editable Mandatory Description
Place Name Free Text N Y Place's Label
Place Note Free Text N N Place's Note
Table 5: Homescreen's Fields
Button Name Selectable Description
Y Battery Saver Mode Switch
Y Side Menu Access Button
Y Add a new place button
Y Options for each place on the list
Table 6: Homescreen's Buttons

Place Selection Screen - In this screen, a map appears integrated
from Google Maps. No fields are present.
Figure 31: Messeme App - Place Selection Screen
Y Add place to placelist
Y Search button
Y Back button
Table 7: Messeme App - Place Selection Screen Buttons
In case there is no GPS Signal or connectivity, a toast message
appears to the user to inform him and disappears after some
seconds.
Search Screen - In this screen a field for the user's input appears
and depending on that input, search results appear below.

Design Patterns Used: Auto Complete, Search/Sort/Filtering,
Gestures
Figure 32: Messeme App - Search Screen
Search Spec Free Text Y N
Search
Specification
Search
Result
Free Text N N Search results list
Table 8: Messeme App - Search Screen Fields
Y Back button
Table 9: Messeme App - Search Screen Buttons
Side Menu - The side menu contains two Action Options and two
Navigational Options which lead to other views.
Design Patterns Used: Swiss-Army-Knife Menu

Figure 33: Messeme App - Side Menu
Item Name Selectable Description
Remove Places Y Delete all places
Remove Notes Y Delete all notes
About Y About Information
Help Y Help Information
Table 10: Messeme App - Side Menu Items
About Screen - The Screen contains information about the
application and the developer.

Figure 34: Messeme App - About Screen
About Text Free Text Y Y About Text
Table 11: Messeme App - About Screen Fields
Y Back button
Y Email Text
Table 12: Messeme App - About Screen Buttons
Help Screen - Screen that contains basic instructions for the
application's operation.

Figure 35: Messeme App - Help Screen
Help Text Free Text Y Y Help Text
Table 13: Messeme App - Help Screen Fields
Y Back button
Y Email Text
Table 14: Messeme App - Help Screen Buttons
Use Cases
Adding a new place - The user presses on the Add-a-new-place
button and navigates to the map screen. If location services are
turned on, the application will locate the exact user's position on the
map. Alternatively the user can search for a specific address by
pressing the magnifying glass button or by pressing on the map. After

the right address is found, the user presses on the "Add to my
placelist" button and a pop up appears, asking for the users input.
The user has then to fill in a name for the place he choose. In case
he doesn't, the place takes the name of the address which is chosen
on the map. The user presses the "OK" button and navigates to the
homescreen.
Design Patterns Used: Pop-Up Message
Figure 36: Messeme App - Name Your Place Pop Up
Adding a note to a place - From the homepage the user presses on
a place. A Pop Up window appears asking for the users input. The
user presses the "OK" button and the note is saved.

Figure 37: Messeme App - Insert Note Pop Up
The user is then navigated to the Homescreen and the place is
marked with Green color which means that there is a pending
notification for that place.
Figure 38: Messeme App - Pending Note

Receiving Notifications - The Application uses 3G/4G, Wifi and
GPS to locate the user. It calculates the devices location and when
the user gets within 20 meters from the noted location (plus the
place's proximity) , then he gets alerted with sound, vibration and a
notification.
In case the user misses the notification or if he dismisses it without
reading the note, next time he opens the application the place will be
marked with red color.
Figure 39: Messeme App - Notification
Viewing Notifications - By pressing on the notification, the
application runs and the note is shown to the user. After the user
reads the note, he can either Delete it by pressing the thrash button,
edit it by pressing the pencil icon or ignore it and go back to the
homescreen. The place now is marked grey.

Figure 40: Messeme App - Note
Edit a places name - To edit a place's name, the user has to press
on the 3-Dots icon and then press on Edit Place option.
View a place on the map - To view a place on the map, the user has
to press on the 3-Dots icon then press on View on map option. The
map appears with a red dot that represents the place selected. By
pressing on the red dot the user can navigate to the place using
Google maps navigation.
Figure 41: Messeme App - View on map

Clear a Note from a Place - To clear a note the user has to press on
the 3-Dots icon then press on Clear Note option. A confirmation
dialogue appears and the user can continue by pressing "YES".
Design Patterns Used: Overflow Menu
Delete a place - To delete a place the user has to press on the 3-
Dots icon then press on View on Delete Place option. A confirmation
dialogue appears and the user can continue by pressing "YES".
Remove all Places - To remove all places, the user has to press on
the main menu icon and select the Remove Places Option. A
confirmation dialogue appears and the user can continue by pressing
"YES".
Remove all Notes - To remove all places, the user has to press on
the main menu icon and select the Remove Notes Option. A
confirmation dialogue appears and the user can continue by pressing
"YES".
View About Page - To view the About page, the user has to press on
the main menu icon and select the About Option. The user is
navigated to the About screen.
View Help Page - To view the help page, the user has to press on
the main menu icon and select the Help Option. The user is
navigated to the Help screen.
Battery Saver On/Off - When battery Saver is On, the interval in
which the application monitors the device's location gets multiplied by
1,5 and this way the application consumes less battery. In order for
the battery save mode to e activated or deactivated, the user has to
press on the battery icon on the top right side of the screen. The Icon
becomes Green if the Battery Saver Mode is On. A toast message
appears each time the user activates the Battery Saver Mode
informing him about deactivating or activating the functionality.
Design Patterns Used: Toast Notification, Action Bar, Multi-State
Button

Figure 42: Messeme App - Battery Saver On/Off
Conclusion
Design Process Criticality
The design process is crucial to the success of any software
development project. It forms the central communication document
for the development team. It reduces the risks and costs to the
project. It helps to manage the complexity that is inherent to the
development lifecycle.
Design Patterns Usability in the App
The overall design process of the application completed by the
following steps:
 After completing the analysis, design problems where
recognized and documented.
 For each problem a suitable design pattern was selected to
provide the best solution.
Patterns Used
Floating Button - The floating button was used to allow users to add
a new place at any time from the Homescreen. Its use and

functionality is really clear to the users and it is a good way to start
the user's experience route.
Swiss-Army-Knife Menu - The Swiss-Army-Knife menu was used
for the application's main Navigation menu and basic options. It
opens by pressing on that three-vertical-bars icon or by swiping to the
right. Users are very font of this kind of menu and it is really for them
understand its use to navigate through it.
Pop-Ups - Pop-Ups are used often in this application in order to aks
for the users inputs (e.g. Note) or in order to show information to the
user without having to change view / activity. Pop-Ups were also
used to ask for the user's confirmation when deleting places or notes.
Overflow Menu - Overflow Menus were used for its items options in
the list view. A custom adapter was used to achieve that but the
result was pleasant since the user has immediate access to the items'
options and it is really clear to him were to find them.
An alternative pattern to use was swiping the item to the left and
show options with icons but it was not preferred since there would be
a confusion with the side menu present. It was also difficult to
represent its option with a recognizable icon.
Toast Messages - Toast Messages were used to notify the user
about connectivity issues and battery saver mode
activation/deactivation. Toast Messages are a good solution to inform
users without asking them to take an action since the message
disappears by itself after some seconds.
Action Bar - The Action bar was used to host the Battery Saver
Button. It could host more buttons if more functionalities were present
in this application.
Auto Complete - Auto Complete was used in the address search
screen were the user types in an address and propositions that much
his typing appear as he types. This make it easy for him to find the
right address and without spelling mistakes.
Gestures - The standard Android gestures apply when using the app
and especially when using the map.
Multi-State Button - The Battery saver icon is a multi-state icon. It
activates or deactivates the battery saver but it also states the battery
saver's current status with green or grey color. This way users always
know the in what state the battery saver is without pressing anything.
Observations
By using design patterns, the overall design process did not last more
than two working days and it did not take users more than 5 minutes
to understand and comprehend the application's scope and
functionalities. It was easy to develop an application relatively good-
looking and most of all efficient for users with the minimum amount of
time possible and good overall user experience journey.

User testing and acceptance was also successful and fast since
users were already familiar with the provided UI functionalities. The
application was tested by three users that were satisfied by the
overall design and performance. All three users though marked that it
would be better to mark the lost notifications with an icon than with
coloring the letters. Indeed, coloring letters in list is an Novel Notion
anti-pattern that should not be used but it was used on purpose to
test users' ability to criticize the application. In a newer version the
functionality has been changed and an icon indicator has been
added.
Figure 43: Messeme App - Lost Notification marked with a red icon
The Benefits of Using Design Patterns
Design patterns have major benefits:
 They provide you with a way to solve issues related to
software development and design using a proven solution.
The solution facilitates the development of highly cohesive
modules with minimal coupling. They isolate the variability that
may exist in the system requirements, making the overall
system easier to understand and maintain.
 Design patterns make communication between designers
more efficient. Software professionals can immediately picture
the high-level design in their heads when they refer the name
of the pattern used to solve a particular issue when discussing
system design.
 They are language neutral and so can be applied to any
language that supports object-orientation

 They aid communication by the very fact that they are well
documented and can be researched if that is not the case.
 They have a proven track record as they are already widely
used and thus reduce the technical risk to the project
 They are highly flexible and can be used in practically any type
of application or domain
Design Patterns, despite their initial learning curve, are a very
worthwhile investment. They enable developers to implement tried
and tested solutions to problems, thus saving time and effort during
the implementation stage of the software development lifecycle. By
using well understood and documented solutions, the final product
will have a much higher degree of comprehension. If the solution is
easier to comprehend, then by extension, it will also be easier to
maintain.

References
[1] Computer World, "Windows comes up third in OS clash two years early", 1 April
2016, Retrieved 5 April 2017.
[2] Macworld, "Google releases Android SDK" , 12 November 2007, Retrieved April 5
2017.
[3] Android Police, "A History of Pre-Cupcake Android Codenames", 2012-09-17,
Retrieved 5 April 2017.
[4] Dominique A. Heger, Mobile Devices - An Introduction to the Android Operating
Environment Design, Architecture, and Performance Implications , April 2011.
[5] Linda Rising, Cambridge University Press, "The Pattern Handbook: Techniques,
strategies and applications, 1998.
[6] James Maioriello, "What Are Design Patterns and Do I Need Them?", Retrieved 20
May 2017.
[7] Alexander Christopher (1977), A Pattern Language: Towns, Buildings,
Construction, Oxford University Press, ISBN 0-19-501919-9.
[8] Official website for Alexander's Pattern Language, Retrieved 23 May 2017.
[9] Android Developers, Retrieved 2 June 2017.
[10] Verge Staff, Android: A visual history, The Verge, 7 December 2011, Retrieved 23
June 2017.
[11] Android's Official Site, Retrieved 22 June 2017
[12] Material Design, "Material Design Principles", Retrieved 22 June 2017
[13] Joe Hindy, "10 Best Transit Apps for Android", Android Authority, 27 June 2017,
Retrieved 27 June 2017.
[14] Dominik Pacholczyk, " Mobile UI Design Patterns", UXPin, January 2014.
[15] Theresa Neil, "Mobile Design Pattern Gallery Second Edition", O'Reilly, ISBN: 978-
1-4493-6363-5, May 2014
[16] Greg Nudelman, "Android Design Patterns", Wiley, ISBN: 978-1-118-39415-1, 2013
[17] Android Developers, "FloatingActionButton Function", Retrieved 2 June 2017.
[18] Jennifer Tidwell, "Designing Interfaces", O'Reill, 2011
[19] Material Design, "Metrics & keylines", Retrieved 22 June 2017
[20] Jan Dawson, "Facebook’s new features like Messenger Day are distracting and
obtrusive", Recode, 17 March 2017, Retrieved 23 June 2017
[21] Joyce Echessa, "Android Design Anti-patterns and common Pitfalls", 02 July 2015,
Retrieved 23 June 2017

Android Design Patterns in Mobile Application Development - Michalis Grigoropoulos - MSc networks and data communications - Thesis

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Android Design Patterns in Mobile Application Development - Michalis Grigoropoulos - MSc networks and data communications - Thesis

Similar to Android Design Patterns in Mobile Application Development - Michalis Grigoropoulos - MSc networks and data communications - Thesis (20)

More from Michail Grigoropoulos

More from Michail Grigoropoulos (6)

Recently uploaded

Recently uploaded (20)

Android Design Patterns in Mobile Application Development - Michalis Grigoropoulos - MSc networks and data communications - Thesis