Android UI Design Patterns

Klaas Kabini Bamboo Computing Solutions (mLab

SA)

Roadmap
What is a design pattern ? How do design patterns emerge ? Design Pattern Benefits Android UI Design patterns Conclusion Q&A

www.bamboocs.co.za

22

What is a design pattern

A general solution to a reoccurring problem. reliable.

Not a perfect solution, but good and

www.bamboocs.co.za

33

How do design patterns emerge?

From developer communities. Naturally as a product of the design
process

www.bamboocs.co.za

44

Design Patterns Benefits

Tried and tested solution Reduces complexity Reusable Technology independent

www.bamboocs.co.za

55

Android UI Patterns
Dashboard Action Bar Search Bar Quick Actions Dynamic Lists Workspace

www.bamboocs.co.za

66

Design Pattern Presentation

Examples Problem Solution Recommendations

www.bamboocs.co.za

77

Dashboard Example

www.bamboocs.co.za

88

Problem
Very clear and easily accessible
navigation to the app main functionality is important in mobile applications. short period of time( e.g. Viewing status updates on twitter)

Users need to achieve simple tasks in a

www.bamboocs.co.za

99

Solution
Provides quick access to the application
main functionalities.

Layout varies from 2 to 3 columns grid

with not more than 4 rows. 3 rows are sufficient. Can be organised

Features Categories Accounts

www.bamboocs.co.za

10

Recommendations
Landing page must be visually clear,
there must be consistency between icons and fonts.

Dos Donts

Avoid cluttering the dashboard Focus on most important choices a user

can make

Use a one word naming for each

dashboard task if possible

www.bamboocs.co.za

11

Action Bar Example

www.bamboocs.co.za

12

Problem
An app can have frequently used actions Introducing buttons for each action can
consume a lot of space and cause consistency problems between multiple app screens

that are common across multiple screens.

www.bamboocs.co.za

13

Solution
Provides easy access to actions that are
common across multiple screen, including those specific to a single screen. screen

Provides a link to the application home Replaces the default title bar Best place for branding the app.

www.bamboocs.co.za

14

Recommendations
Avoid clutter, do not use it as a toolbar
or a replacement of the options menu

Use it consistently within your app

Dos Donts

Do not use it for contextual actions Use it to give the user a sense of place.

www.bamboocs.co.za

15

Search Bar Examples

www.bamboocs.co.za

16

Problem
Users need to quickly locate specific
content or elements within your app without going through tedious navigation of app menus.

www.bamboocs.co.za

17

Solution
Pop up search form anchored at the top
of the screen

Replaces the action bar Support suggestions Can use a quick actions popup to
present multiple search mode

www.bamboocs.co.za

18

Recommendations
Use it for simple searches Do present rich suggestions

Dos Donts

www.bamboocs.co.za

19

Quick Actions Examples

www.bamboocs.co.za

20

Problem
Users can perform more than one action on
an object onscreen and presenting these actions to the user on small touch-screen displays can be difficult. onscreen?

What can I do with this target/object

www.bamboocs.co.za

21

Solution
Provides quick way to perform multiple
actions on a target onscreen

Quick actions menu popup by tapping

on distinct visual targets onscreen context

Minimally disruptive to the screen Actions are obvious

www.bamboocs.co.za

22

Recommendations
Focus on key actions relevant to the
current object onscreen must be intuitive possible.

Make the actions to be obvious - icons

Dos Donts

Avoid using quick actions in case it is

www.bamboocs.co.za

23

Dynamic List Examples

www.bamboocs.co.za

24

Problem
Android apps use lists to display large
amount of data and that data can be loaded over a network which can be slow.

Forcing the user to wait for the whole

data set to load before working can ruin the user experience

www.bamboocs.co.za

25

Solution
Instead of waiting for the whole data
set load, the most relevant data is loaded and populated immediately in the list. data when the user reaches the end portion of the previously loaded data.

Provide a mechanism to request more A progress indicator is provided to

inform the user of more content that is coming

Can be implemented in multiple ways Endless list Paged list Pull to refresh
www.bamboocs.co.za 26

Endless List Example

www.bamboocs.co.za

27

Paged List/Pager

www.bamboocs.co.za

28

Pull to refresh

www.bamboocs.co.za

29

Recommendations
Do provide progress indicator inside the
list to indicate the progress of the data being loaded.

Dos Donts

www.bamboocs.co.za

30

Workspace Examples

www.bamboocs.co.za

31

Problem
Presenting multiple categories of large

data sets is always a challenge on small touch-screen devices.

www.bamboocs.co.za

32

Solution
Provides navigation through categories
of data using horizontally swipes or tabs. each tab represents a category.

Data is presented using a list where Simple indicators such as direction

arrows or dots are used to guide the user to the direction where more data is available.

www.bamboocs.co.za

33

Recommendations
Provides simple indicators that will
guide the user to navigate to the direction where more content is available.

Dos Donts

www.bamboocs.co.za

34

Conclusion
In addition to the app functionality, visual layouts and

organisation of the app functionality and elements is the key to make your app stand out in hundreds of apps. layout of your app.

Consider using these Android UI patterns to simplify the visual

www.bamboocs.co.za

35

Additional Info
GreenDroid Library
https://github.com/cyrilmottier/GreenDroid

ActionBar Sherlock

https://github.com/JakeWharton/ActionBarSherlock

www.bamboocs.co.za

36

Thank You

Q&A

Email: kkabini@gmail.com Tel : 0768718571 Twitter : @kkabini Blog : mobidevza.blogspot.com

www.bamboocs.co.za

37