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.

3www.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.

4www.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))

5www.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

15www.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

M a t e r i a l D e s i g n S t y l e

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?

31www.mobirses.com

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

38www.mobirses.com

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 Design Patterns

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?

42www.mobirses.com

Navigation

Problem: User wants to access additional options fast

43www.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.

44www.mobirses.com

Problem: The user wants to know how to use application and the features it has

45www.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.

46www.mobirses.com

Problem: The user needs to navigate between different sections of the app

47www.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.

48www.mobirses.com

Problem: The user wants to access frequently used actions fast

Getting Input

49www.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.

50www.mobirses.com

Problem: The user wants an easy and a fast way of signing up or logging in

51www.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.

52www.mobirses.com

Problem: The user wants to control and focus on a particular content fast

53www.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.

54www.mobirses.com

Problem: The user wants to input information quickly

55www.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.

56www.mobirses.com

Problem: The user wants to browse through content quickly that contains specific data

Data & Content Management

57www.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.

58www.mobirses.com

Problem: The user wants to have organized content

59www.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.