Android Material Design Quick Presentation

2
TABLE OF CONTENTS
www.mobirses.com
1. Introduction
2. Terminology
3. The Context
4. The Idea
5. Sketching
6. Wireframing
7. UI Flows (Storyboarding)
8. Material Design Style
9. Android Lollipop UI Design Patterns

INTRODUCTION
Thank you for joining in! Where is a very big chance that you are curious about mobile apps
and looking to find out more about it or maybe even start designing one on your own. Or, you
are a mobile developer, who wants to improve your skills in mobile app design and learn
awesome stuff which could definitely improve your app?
If so - that’s exactly what we’re going to do with this presentation! I’m going to help you take
your first step towards the great looking and user-friendly mobile app design!
That’s what this presentation is about: taking an idea from a rough concept to a polished
experience that your users will love.
3
www.mobirses.com

Hello, I‘m Deimantas Brandisauskas, mobile UI/UX designer and developer
from Lithuania. I fully believe that user experience design is a process, not
something that you can start creating from template. I have been
designing Mobile apps for about 4 years for clients and my own projects
and since then I started to teach other people about user experience (UX)
design specifically for mobile devices.
If you want to get the latest updates about all my presentations and video
courses about mobile app design and programming you should follow me
on Twitter @deimantasbrand.
If you have any questions about anything you can write me an email
deimantas.brandisauskas@gmail.com and I promise to answer all of them
as soon as possible.
4
www.mobirses.com
About the author

TERMINOLOGY
Before we start learning the process of designing mobile apps, I’d like to mention a few terms
that will show up in the presentation.
• UI stands for User Interface design (it’s everything what the user sees, like buttons, text
fields, images, etc.)
• UX stands for User Experience design (how the user feels navigation through the app,
what features it has, how user-friendly design is, etc.)
• When I say mobile design in almost all cases I mean Android design (I will cover design
elements and components for Android Operating System (OS))
5
www.mobirses.com

6
THE CONTEXT
Mobile was a technology which was easily ignored for several years.
After all, smartphones were really new, and most people haven’t
switched from using laptops or desktop computers. However, that is
no longer true today. Not at all. Two-thirds of Americans who own a
cell phone now uses their phone to go online, and for 21 percent of
phone owners, their phone is their primary source of using the
Internet. Furthermore, among American households that own a
gaming console or dedicated PC, 53% play games on their
smartphones as well. Already 966 million, or 78% of all 1.2 billion
gamers play mobile games worldwide. And those numbers are
growing and growing.
This means businesses can no longer get away with ignoring mobile or
building apps based off of websites built for PC’s. Same goes for
games. The world of mobile is significantly different than that of the
desktop computer because mobile is all about context and that
context is constantly changing.
No one uses a laptop while waiting for a bus or a desktop to find
directions while driving. Mobile devices, on the other hand, can be
used anywhere. Someone may check Twitter on their Android while
bored at a party or covertly read the news with their Android under
the table in a slow meeting.
www.mobirses.com

7
If you aren’t getting results with your current mobile
app, here are some reasons why lack of context could
kill your mobile app.
Desktop computer usage is well known to any web designer,
where it’s been the contextual default for years. In this stereotype,
the user sits comfortably in front of a computer and searches for
news, tickets or whatever. The room is well lit, the pencils sharp.
What Are Consumers Doing on Mobile?
• 99.5 percent access content/information
• 63.1 access the Internet
• 62.1 percent check email
• 49.2 percent listen to music
• 46 percent play games
• 41.7 percent download and use apps
• 15 percent make purchases
• 15 percent read a presentation
http://searchenginewatch.com/
www.mobirses.com

8
Let’s take a restaurant presentationing as an example.
When visiting the restaurant presentationing website from a desktop
computer there is a lot of information I may want to know: hours when
it’s opened; location of the restaurant; photos and menu to see if the
price and ambience match my preferences. If I visit the same website
on my phone I may want reduce the same information: phone number,
hours, and location of the restaurant. Why? Well, if you are using your
phone remotely, in other words, you are on the go, you probably want
to presentation a restaurant in a hurry or just want to know just the
basic information for the restaurant, because you don’t want to read a
bunch of it on your phone.
Probably, you would like to leave the photos of the restaurant for more
detailed information after all, you can’t be certain about a visitor’s
intentions based on the context, but you can make reasonable
assumptions and prioritize certain content.
www.mobirses.com

9
Let’s take a look at the very popular Android application, OpenTable - Free
Reservations. In this app, you can see that it’s doesn’t include
unnecessary information in the app. If the user is on-the-go and he (or
she) just wants to skip through restaurants, which are close to them and
want to presentation it, OpenTable does just that. It allows the user to
search for the restaurants, read titles, show some pictures and even
ratings, which are important for most people. Plus, it shows where it’s
located and how many miles the user needs to go or drive
to the restaurant. And, one of the most important features for this kind
of application, price. You can skim through all the restaurants and user
can presentation it very fast with quick checkout process.
How to apply this to apps?
www.mobirses.com

10
THE IDEA
Most successful app ideas come from a real need for them. How do
you think the flashlight app idea could come up and why? Well,
probably because he was stumbling around in the dark trying to use
his phone for light and thought, “I really wish my phone had a
brighter light, so I can use it as a candle or even light replacement”.
Find a need and fill it.
www.mobirses.com
Fill a need

11
Think about your job or your hobbies.
How could you use your Android to help you in your job? Maybe it
would improve your free time? What about food? Maybe you want to
make a really fast and unique breakfast for your girlfriend or boyfriend
to surprise her or him? For me, an app which could have a bunch of fast
and innovative ideas for breakfast would be amazing! Just think about it!
Be creative and just look around you!
And take this one to even to another level: go outside and look what
people are doing, what they are talking about. You may find a problem
which could be fixed with a simple Mobile App.
Look around you. Look for existing problems. Paul Graham once said:
“The way to get startup ideas is not to try to think of startup ideas. It's
looking for problems, preferably problems you have yourself.”
www.mobirses.com

12
Not enough developers take the time to learn the platform and the
design guidelines for the platform, such as the Search and Share
Contracts, or Snap view on Android or basic rules like to put your
buttons at the bottom of the screen on phone apps (so your hand
doesn’t cover the screen when you press a button).
As a result, you see simple apps that although functional, lack
polish and don’t really shine. Even a simple app can embrace good
design!
So go on Google Play Store or Apple App Store and search for apps.
Browse them. Search for Blog Readers. News Readers. Dating Apps.
Download and install them on your phone. Then try the app
yourself and see what you could improve in those apps.
www.mobirses.com
Improve existing app

13
It’s kind of similar to the fill a need one, but in this one, you actually
can target an audience.
This method requires you to choose a market and observe it for a
period of time. During that observation process you're writing down
specific information, such as:
• Their frustrations.
• Their problems.
• Their desires.
• Their language.
• etc...
Basically, any data that can be used to come up with ideas for
products. This is a very good approach because your ideas are coming
from observed data and real people, not your own imagination (which
is not bad, but you should test it before actually start creating it,
because you may found out, that your idea from the top of your head
is useless for the market).
www.mobirses.com
Observe a market to find and address a need

14
In the space below (in the next page), write down some ideas you might
have RIGHT NOW. You don’t need to fill out everything and you can
always come back later. Write in a few ideas that fall into each category -
is there an app you’ve seen that you really like? Don‘t limit yourself with
6 ideas. Write some more if you have your creative thinking flowing!
Have some fun with it and let’s just be creative!
www.mobirses.com
Exercise

15
www.mobirses.com
1.
2.
3.
4.
5.
6.
1.
2.
3.
4.
5.
6.
1.
2.
3.
4.
5.
6.
1.
2.
3.
4.
5.
6.
Existing Apps Existing Problems (solutions to those problems)
Your Passions Apps You Like on the App Stores

16
SKETCHING
When planning for Mobile App Idea it’s better to
sketch out every iteration with pen on a blank sheet of
print paper or grid paper.
You may think: “Why do I need to create them?”
Sketching enables us to explore the problem space and define the
solution space at the same time. It frames our current understanding
of the problem, while also helping us to figure out possible solutions.
While we sketch out our thoughts, new ideas will emerge. By
sketching different solutions to a problem, we can explore them
without immediately committing to one of them. This gives us new
insight and raises new questions. Sketching is essentially a
brainstorming exercise.
www.mobirses.com

17
Sketching allows us to quickly see how our idea will work.
By applying this to app design we can create a lot of
possible app layouts in very short time, because sketches
shouldn’t look good and they are being drawn very
quickly. Anywhere. Anytime. Then, after we reviewed the
options we select favorites and sketch them with slightly
more detail.
To better illustrate how they look, take a peek at the
image below (www.smashingmagazine.com image).
www.mobirses.com

18
But now you may say to me and yell: “I don’t know how to draw!”
Please, don’t worry about it. Sketches aren’t detailed with shading or
anything elaborate. Just simple lines and boxes with a few words
thrown into overall meaning. Sketches are very effective, but the
favorite part of this method is that it allows you, the designer, to take
risks while designing your actual app in Adobe Photoshop (or any
other graphical editor). If you saw that current layout isn’t going to
work in Photoshop and you don’t like it, you can go back to your paper
and sketch it again in minutes.
So ok, what now? How to design them? Is there some secret idea to
create those sketches? No. You just get a pen and a simple paper and
now just start to scribble you app down. In the beginning, you want to
capture different ideas for your mobile app. Start sketching different
versions of a single key screen or parts of it. Your goal is twofold: to
generate a lot of different ideas, and to explore and evaluate them —
at the same time.
When I start sketching, I do not think of any fixed number of sketches
and screens I want to create. It really depends on your own app idea,
your goals and what your app is going to do. But the easiest way to
look into sketching is just by drawing your ideas on the paper and see
what you come up with.
www.mobirses.com
But I can’t draw!

19
If you found yourself that you just can’t come up with ideas for your
app interface, browse some mobile UI galleries for inspiration (such
as Inspired UI, Pttrns, Lovely UI and UI Parade). Include the things
you like in your sketches, and mix them with your own ideas. Plus,
don’t forget the Google. Just try different queries out. Again, be
creative!
But, if you don’t want to draw your app screens by yourself, you can
get wireframe templates:
http://www.smashingmagazine.com/2012/09/18/free-download-ux-
sketching-wireframing-templates-mobile/
You just need to print them out on the paper and start sketching
your own app idea.
www.mobirses.com

20
WIREFRAMING
First of all, let’s make it clear: a sketch is not
equal to wireframes. Yes, they are similar, but
they are not the same exact thing. Both
methods are very useful for getting your idea
out of your mind to the paper, illustrate an
interface concept. But let’s examine and find
out, how they are different from each other.
www.mobirses.com
A Sketch is Not a Wireframe

21
When you sketch, you are trying to get out most ideas from your head
to the paper or any other material. You just grab a pen, found a napkin
and trying out what your app could look like before actually diving into
polished design. You just figure out different concepts of your app:
layouts, buttons, navigations, maybe even draw a use-case diagram to
better demonstrate how the user is going to use your app.
When you wireframe, you are actually trying to refine the same process
you went with sketches, but it’s more polished and cleaner version of
them. With wireframes you are working in forces you to think your app
in higher detail.
www.mobirses.com
http://digital-nation.com.au/ image

22
Wireframing is an important aspect in any design process. It allows you
to define the information hierarchy of your mobile app design, making
it easier for you to plan the layout according to how you want your
user to process the information.
Wireframes are like an architectural blueprint; you need to see it in
two-dimensional black and white diagrams before you understand how
to build the actual house. You just can’t go straight to the Adobe
Photoshop and start designing your complete mobile app design
without any bones. You have to have a better understanding about
your app layout before you dive into the actual design.
Also, like with sketches, it’s also a very good way of deciding user
actions when he opens up your application and how he behaves with
it.
Wireframes are important and a very good idea to do them because it
allows the designer to concentrate and plan the actual layout without
any colors, typefaces, etc.
www.mobirses.com

23
Where are 3 types of wireframes:
1. Low-fidelity
2. Mid-fidelity
3. High-fidelity
Low-fidelity wireframes: The main point of low-fidelity wireframes
are to get as many ideas down as possible. Take a look at how low-
fidelity wireframes look like right here. You will notice that these types
of wireframes has rough and sketchy design. They are done in
minutes, and they are very similar to sketches.
Mid-fidelity wireframes: These wireframes are the next logical step.
Once an initial idea has been formulated in the lo-fidelity stage, the
designer may choose to further develop this idea by adding and
refining certain details.
Hi-fidelity wireframes: At this stage you are most likely to go almost
near finished version of your mobile app design minus the fine details.
It contains way more detail than the other ones and they are taking
longer to create.
www.mobirses.com
What Are Types of Wireframes?

24
To create wireframes, you need a specialized tools and in here, I’m
going to mention a few of them. They are not in any particular order:
Balsamiq
Balsamiq became popular as wireframes produced with this software
resemble sketches, making it immediately obvious that the wireframe
is not a finished product but a work in progress. Balsamiq also has a
quite big library of mobile app design components, so you can use
some of those components directly for your wireframe design. But, it’s
a paid software and it costs $79.
Adobe Products
For those, who has some experience with highly popular Adobe
products, you absolutely can create wireframes with it. Illustrator,
Photoshop, InDesign are very powerful wireframing tools. And, those
tools are pretty expensive. Adobe with newest edition Adobe CC
(Creative Cloud) offers all applications for 60 euros/month.
JustInMind
Another really great wireframing software, which is absolutely free! It
has a bunch of different mobile user interface components to choose:
from simple buttons, tabs, image views to radio buttons, switches and
inputs. A huge variety of options.
www.mobirses.com
Tools

25
UI FLOWS (STORYBOARDS)
Next, we will examine the process of moving from individual user
interface screens design to the construction of a user flow chart that
describes the detailed user experience through the app. Flows are just
as important to good interfaces as individual screens are. Customers
don’t land on mobile app from out of nowhere. Specific sequences of
actions lead customers through your app as they try to accomplish
their tasks.
But what’s UI flow (or storyboard)? A UI flow is a collection of mobile
app screens or pages that define a logical task the user could perform
in your application. It consists of a number of steps that need to be
performed in order to complete the task.
www.mobirses.com

26
For example, in this news reader application I have
been working on, you can see that the user first
sees the login screen which is required for the app
to load. If the task is successfully performed, the
user is going to interact with app in the next
phases. I indicate screen flows by drawing some
simple arrows and on top of the screens I just
write what the specific screen suppose to do.
www.mobirses.com

27
After you have decided on how the app is going to look like with your
rough sketches and wireframes, now it’s time for the next step –
define, how those individual screens are going to work together. For
this, we need to create so called UI Flows (or storyboards) that shows
how the user will interact with application and how he would use the
solution to accomplish a specific task. UI flows highlight which
elements are being used (which buttons, tabs, text or edit views) and
how the app responds to those specific actions (animations, new
screens, a popup or toast).
I usually start with a sketches I’ve created and try to redraw them on
the new paper, but this time with arrows and notes on what exactly
will happen when the user tap on a certain UI element in the app. You
need to keep in mind user goals and problems in your app and how he
or she is going to better achieve the result they wanted before
downloading and installing your app.
For more inspiration on how to sketch and design UI flows you can
read Gisele Muller’s article
http://webdesignledger.com/inspiration/inspiring-ui-wireframe-
sketches
www.mobirses.com
Creating UI Flows

28
When you put together your sketches and or wireframes, it’s a really good
idea to have IF-THEN mindset which will help you effectively achieve the
best result. For example: “If the user pressed the button, then this specific
action will happen” and represent it with an arrows. Draw some screens
on to the paper and have a user goals in your mind with IF-THEN mindset.
But if you don’t want to draw them, you can just write user action in the
diagram to the right. Feel free to choose the right method, but keep in
mind that you want to create the best experience for the users, and to
accomplish this the best way is to actually draw and re-draw screens.
www.mobirses.com
The IF-THEN Mindset

29
Material Design Style
Now as you have already sketched and wireframed your app idea,
created UI flows, storyboards, identified your users, now it’s the time
to actually dive into the final parts of mobile app design process (even
though we just slightly touched UX for Mobile design in this short
presentation) – visual design. And in this short guide I’m going to give a
quick introduction to some of the Android Material Design style UI
patterns, main UI components and features of the new Material design
and how to use them correctly without distracting the users.
www.mobirses.com

30
Material Design, at a glance, represents an enormous departure from
the traditional Android aesthetic — the origami-inspired layout looks
more like a pastel and paper. Material environment is in 3D space,
where the object has three dimensions: x, y and z. And as you may
already saw that Android Lollipop has a very different design than the
older versions. Why is that? Well, in the past where there no UI
consistency going from one Android device to another. Every app on
the Google Play Store may have different UI components which are
being used completely different. Even within the same operating
system Android is a mess. One of the most popular mess in Android
apps are back button: sometimes it’s going to do absolutely nothing,
sometimes it takes you to the previous screen and sometimes it exists
the app completely. Android developers and designers largely ignore
Android UI guidelines and patterns. When a user downloads one app
and uses for a couple of times and he is going to download other app,
where are quite a chance that the other app is going to have absolutely
different UI. But that’s not the case in Material Design.
If you go through Google’s Material Design guidelines you will see that
Material Design is designed to build trust between app users and the
software itself. Material Design has a strict set of rules of how the user
will navigate throughout the app: how items can be added or removed,
what kind of animations are available, how much should be left for
space between individual words and so on. Good job Google guys!
www.mobirses.com
What‘s Material Design?

32
The right color scheme does a lot to for your app design. It defines the
initial feel and branding of your application. You can use entire color
scheme to define the branding guidelines. But in the older Android
versions, developers and designers faced a lot of troubles then
choosing the right color scheme for their app.
One of the most exciting things to happen to Android in some time is
base color attributes for Material Design theme. If you have ever tried
to customize the colors of the Android action bar, status bar, or
navigation bar then you probably understand what I mean. You needed
to spend a lot of hours trying to define what exact colors should I
choose for different UI components in the app design, testing them out,
remaking everything by not knowing what the users will like the most.
For Material Design it’s not the case.
www.mobirses.com
Colors

33
What are color palettes? Why do we need them? Basically, they help
you to create consistency throughout your app and they can be used to
define and develop your app brand color. Choose a color from a color
palette and use them as the dominant color scheme throughout your
app. And Google made this task even easier for you. They‘ve created
color swatches You can check them out at the official google style
document right here - http://bit.ly/1yxUXEO.
As you can see in the example to the right, for Material Design you
want to you the same bold color at the top for action bar and status
bar and then as you go down you need to choose the lightest color and
by going down throughout your app screen, you want to darken them
up.
www.mobirses.com
Color Palette

34
The most common font used throughout Android app design since Ice
Cream Sandwitch is Roboto. It became the standard type face on Android.
It is the default font for Android unless you choose to specify your own
font, which is not recommended by any means. You want to keep
consistency in your app and keep Android UI guidelines in mind then you
start coming up with ideas to choose different fonts for your app. You don’t
want to specify other font, which is quirky, cartoony looking. The best way
to go around this is to use the standard font for your app – Roboto.
www.mobirses.com
Typography

35
Too many type sizes and styles at once can break your app
layout and make design inconsistent and loose. A
typographic scale has a limited set of type sizes that work
well together along with the layout grid. The basic set of
styles are based on a typographic scale of 12, 14, 16, 20
and 34.
For font or when designing and developing the
application you should set your font to scale-independent
pixels (sp) in order to let the users to select a system-wide
scaling factor for text in the Settings app
www.mobirses.com
Typography Scale

36
Icons are abstract images that represent functions, display
status, and guide users. Icons can be used on many user
interface components (launcher, action bar, menu, status bar,
tab icons, etc.) and they can often replace text and save screen
real estate. An icon must be representative and easily
understood. Also if you are going to design icons for Material
Design (Lollipop) you need to keep in mind specific guidelines
especial for this new Android version which is fairly different
than the older ones.
www.mobirses.com
Using Icons

37
Launcher Icons
The launcher icon is the only icon that is visible to users outside your
app. Following launcher icon guidelines is doubly important. You
don’t want your app to stand out in a bad way. Though Google’s new
vision for launcher icons is totally different than the older ones – it
has depth, lighting, shading and dimension. Material design
philosophy is quantum paper. No exception for launcher icons.
When designing launcher icons for Android it’s very good practice to
remember that launcher icon for the user one of the very first contact
places to your app. A high-quality icon helps users to get a better
impression of your overall app look.
www.mobirses.com
Icon Types

39
Action Bar Icons
Icons on the Action Bar represent the most important function on any
given screen. The Action Bar icons must be clear to the users so they
have the confidence to use them as they should represent a single
concept that most people can grasp at a glance.
Action Bar icons are grayscale, flat, simple, modern and friendly. The
icons must not have a background and use transparent background
instead. The design of these apps should be relative simple and
reduced to the minimal form. The design of the icon should be
readable even at the small screen sizes.
www.mobirses.com

40
Status Bar Icons
Status bar icons are used to represent events that the user is being
notified about (getting new messages, e-mail, battery life, time,
etc.). The icon must be descriptive and users must be able to
recognize its meaning right away. Status bar icons should be white.
Also the system itself is going to scale down or darken the icons and
animate it (for example, battery life icon).
Status bar icons should be relative simple and easy to understand so
they should look very simple for the user.
www.mobirses.com

41
Android Lollipop UI DesignPatterns
Generally speaking, UI patterns are solutions to recurring problems, or
just a reusable solution to commonly occurring problems. It’s a guide
or a template that designers, developers or anyone, who is touching
the product can use them to use common problems when designing
for specific platform. Those specific platforms have their own
guidelines which helps those people who touches the product to avoid
recurring problems for UI and make that interface user-friendly. And in
this section I’m going to discuss the most common and the most
popular UI patterns for mobile devices, plus, Android Material design
apps that are using those patterns in this new operating system. But all
of those patterns can be used for other platforms (iOS, Windows
Phone, etc.) and they are not limited for Android or older Android
versions.
I’m not going to discuss every single UI Design pattern in this
presentation, just the most popular and most commonly used ones.
www.mobirses.com
What Are UI Patterns?

42
www.mobirses.com
Navigation
Problem: User wants to access additional options fast

43
www.mobirses.com
Solution: Overflow Menu
Overflow Menu or action overflow in the action bar provides the user a
very fast accessibility to less frequently used actions in your
application. It must be added to the action bar and nowhere else so
that they don’t clutter the main interface. This feature is extensively
being used in Android. YouTube app use this button to add additional
options for the user such as settings, help or logout from the app.
Gmail app use overflow menu to add refresh and settings status. These
features aren’t commonly used by the users so they should be added in
the overflow menu, plus a user have access to those options.

44
www.mobirses.com
Problem: The user wants to know how to use application and the features it has

45
www.mobirses.com
Solution: Walkthroughs
Create and design a walkthrough (or tutorial) that demonstrates how app
is working, what features it has and how to use them. This is a very good
practice to implement in your own applications, because it allows the user
to understand everything what your app has to offer. It is very important
to implement walkthrough to your app because it also gives the user more
reasons to come back to your application.
Walkthrough can be a simple images which shows how to use app. But it’s
also even better way to show them for the user by using animated images.
Recently a lot of apps have begun using this kind of walkthrough as they
are more engaging for the user that makes them come back to your app.

46
www.mobirses.com
Problem: The user needs to navigate between different sections of the app

47
www.mobirses.com
Solution: Navigation Drawer
Navigation Drawer (that’s how it’s being called in Android) is a
secondary section full of additional information of the app – such as
navigation through different sections, additional settings, user
profiles, notifications, support, help, feedback, etc. In Material Design
navigation Drawer slides in from the left overlapping the current state
of the main content and setting that content to the dark transparent
color (darkened by a scrim). It’s a very common patterns which can be
found in various apps for Android.
Navigation Drawers can scroll like any normal view and they can
contains icons, text and some other simple control which could help
the user to better navigate the app and choose the right option
available for him.
Often times Navigation Drawer is hidden by a hamburger menu (three
horizontal lines). It’s very easy and user-friendly approach to hide all
the less important information in this drawer.
Perfect example of the app which uses Navigation Drawer is the new
Inbox by Gmail by Google (Material Design) which uses a simple
hamburger icon to indicate, that where is additional information user
can access. And the drawer itself has a scrollable view with Settings
and Feedback that are pinned at the bottom.

48
www.mobirses.com
Problem: The user wants to access frequently used actions fast
Getting Input

49
www.mobirses.com
Solution: Action Bar
Action Bar (toolbar in iOS terminology) is a very popular UI design
pattern being used in mobile apps. It allows the users to access
important and frequently recurrent actions at the top of the app.
The action bar provides several key functions:
• Provides a current user location in the app
• Makes important actions accessible in a predictable and fast way
• Supports consistent navigation and view switching between apps
In the following example you can see an app called QuickPic (a simple
gallery application) which has an Action Bar with different icons being
presented while browsing different screens in app. Action Bar allows
users to share, delete, refresh and go back to the previous screen.

50
www.mobirses.com
Problem: The user wants an easy and a fast way of signing up or logging in

51
www.mobirses.com
Solution: Social Logins
Please make use of social media and social accounts. If your app
requires the user to log in or sign in in order to proceed further, for
usability purposes you probably want to integrate social sign in
methods that allow to sign in with their existing accounts. This means
they no longer need to write long texts for username, password, e-mail
or even more. Everything what you need is already done, just use it for
your purposes. Also, you don’t have to worry about password security
that much, plus, for developers it’s really easy to implement those
social login buttons so your budget cuts down.
No one really likes to write long texts, especially in mobile apps, where
screen is small and most of the times the user is on-the-go, meaning he
is writing while waiting for the bus, at the shop or wherever.
This simple feature can drastically improve your apps UX, and no
wonder this pattern is well on its way to become an expectation for the
users.

52
www.mobirses.com
Problem: The user wants to control and focus on a particular content fast

53
www.mobirses.com
Solution: Swiping for Actions
Allow users to quickly handle the information on the screen with
swiping. If you don’t know what it is, you may want to download Inbox
app by Google which is basically Gmail application but it’s designed using
material design guidelines. In this app you will see a list view in which
you can swipe to the right and mark the specific message as Done (or
Marked). This is a very good feature because user don’t need to select
the message (or long click on it) and then search for the specific button
to do the action.
Another example would be Tinder app where you can swipe to the left or
right to indicate a positive or negative response to person photo.

54
www.mobirses.com
Problem: The user wants to input information quickly

55
www.mobirses.com
Solution: Default Values and Autocomplete
You know that people are using their mobile phones not only at home,
right? They use them in coffee shops, at the airports, public transport,
at school, at work, etc. So, as a designer you need to make sure you
have in mind those given statistics. And if the person is at the airport he
wants to input the information which could be required in a mobile app
as quickly as possible, whether he wants to send a message to friend or
search for near places around him.
This pattern can be very useful in standardizing user input and
anticipating certain problems they occur. Skype, for example,
automatically finds phone number and populates it in the input field.

56
www.mobirses.com
Problem: The user wants to browse through content quickly that contains specific data
Data & Content Management

57
www.mobirses.com
Solution: Cards
A card is a peace of paper that contains some kind of data, it could
be a text, image, link, also it can contains buttons, of a single
subject. Basically, they are snippets of information, which when
the user presses on one of those cards, he is going to be redirected
to the full article or any subject the card contains. So as you
probably already understand that most of the times cards are
useless without a photo. You need to make sure that the photo is
answering the question for the user, what he or she can expect in
the other windows if they presses to read more. Also the title
should be descriptive enough to get a better understanding what’s
all about. Of course, it depends on how you are using cards. You
are not limited to only news or articles or any similar subject. You
also can only display images (so it’s a gallery), lists ( so it could be a
To-Do app) or anything else. But please be aware of using cards
that could distract the user from being able to quickly scan
through content. If this is a case, you can just use a simple list to
show the content instead of cards.

58
www.mobirses.com
Problem: The user wants to have organized content

59
www.mobirses.com
Solution: Grids
Grids are typically most useful to presenting images, others use
them to serve articles which contains visual content.
Google Material Design Guideline is pointing out that Grids typically
scrolls vertically and it‘s highly discouraged of using horizantal grids.
Grids are a great alternative to the simple list views and can work
very well for content which is visually presented to the user.
You also can implement text on top of the grids which contain
images or just use pure images without any text. Plus, to make your
content even more interesting, you can add some icons next to the
text but please don‘t make a lot of different icons for the grid view
items. Use one single icon for all of them if you decide to use them
to maintain consistency.

Android Material Design Quick Presentation

More Related Content

What's hot

Similar to Android Material Design Quick Presentation

Android Material Design Quick Presentation