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

What is a design pattern

 
A general solution to a reoccurring problem. Not a perfect solution, but good and reliable.

www.bamboocs.co.za

How do design patterns emerge?

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

www.bamboocs.co.za

Design Patterns Benefits

   
Tried and tested solution Reduces complexity Reusable Technology independent

www.bamboocs.co.za

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

www.bamboocs.co.za

Design Pattern Presentation

   
Examples Problem Solution Recommendations

www.bamboocs.co.za

Dashboard Example

www.bamboocs.co.za

Problem

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

www.bamboocs.co.za

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

Recommendations

Landing page must be visually clear, there must be consistency between icons and fonts. Avoid cluttering the dashboard Focus on most important choices a user can make Use a one word naming for each dashboard task if possible

Dos Donts

  

www.bamboocs.co.za

10

Action Bar Example

www.bamboocs.co.za

11

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

www.bamboocs.co.za

12

Solution

Provides easy access to actions that are common across multiple screen, including those specific to a single screen. Provides a link to the application home screen Replaces the default title bar Best place for branding the app.

  

www.bamboocs.co.za

13

Recommendations
 
Avoid clutter, do not use it as a toolbar or a replacement of the options menu Use it consistently within your app Do not use it for contextual actions Use it to give the user a sense of place.

Dos Donts

 

www.bamboocs.co.za

14

Search Bar Examples

www.bamboocs.co.za

15

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

16

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

17

Recommendations
 
Use it for simple searches Do present rich suggestions

Dos Donts

www.bamboocs.co.za

18

Quick Actions Examples

www.bamboocs.co.za

19

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. What can I do with this target/object onscreen?

www.bamboocs.co.za

20

Solution
   
Provides quick way to perform multiple actions on a target onscreen Quick actions menu popup by tapping on distinct visual targets onscreen Minimally disruptive to the screen context Actions are obvious

www.bamboocs.co.za

21

Recommendations
 
Focus on key actions relevant to the current object onscreen Make the actions to be obvious - icons must be intuitive Avoid using quick actions in case it is possible.

Dos Donts

www.bamboocs.co.za

22

Dynamic List Examples

www.bamboocs.co.za

23

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

24

Solution

Instead of waiting for the whole data set load, the most relevant data is loaded and populated immediately in the list. Provide a mechanism to request more data when the user reaches the end portion of the previously loaded data. 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

25

Endless List Example

www.bamboocs.co.za

26

Paged List/Pager

www.bamboocs.co.za

27

Pull to refresh

www.bamboocs.co.za

28

Recommendations

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

Dos Donts

www.bamboocs.co.za

29

Workspace Examples

www.bamboocs.co.za

30

Problem

Presenting multiple categories of large data sets is always a challenge on small touchscreen devices.

www.bamboocs.co.za

31

Solution
  
Provides navigation through categories of data using horizontally swipes or tabs. Data is presented using a list where each tab represents a category. 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

32

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

33

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. Consider using these Android UI patterns to simplify the visual layout of your app.

www.bamboocs.co.za

34

Additional Info

GreenDroid Library

https://github.com/cyrilmottier/GreenDroid

ActionBar Sherlock

https://github.com/JakeWharton/ActionBarSher lock

www.bamboocs.co.za

35

Thank You

Q&A

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

www.bamboocs.co.za

36