Download - Final Android Patterns
-
7/31/2019 Final Android Patterns
1/37
Android UI DesignPatterns
Klaas Kabini
Bamboo Computing Solutions (mLabSA)
-
7/31/2019 Final Android Patterns
2/37
www.bamboocs.co.za
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
-
7/31/2019 Final Android Patterns
3/37
www.bamboocs.co.za
What is a design pattern
A general solution to a reoccurringproblem.
Not a perfect solution, but good andreliable.
33www.bamboocs.co.za
-
7/31/2019 Final Android Patterns
4/37
www.bamboocs.co.za
How do design patternsemerge?
From developer communities.
Naturally as a product of the designprocess
www.bamboocs.co.za 44
-
7/31/2019 Final Android Patterns
5/37
www.bamboocs.co.za
Design Patterns Benefits
Tried and tested solution
Reduces complexity
Reusable
Technology independent
55www.bamboocs.co.za
-
7/31/2019 Final Android Patterns
6/37
www.bamboocs.co.za
Android UI Patterns
Dashboard
Action Bar
Search Bar
Quick Actions
Dynamic Lists
Workspace
www.bamboocs.co.za 66
-
7/31/2019 Final Android Patterns
7/37
www.bamboocs.co.za
Design PatternPresentation
Examples
Problem
Solution
Recommendations
www.bamboocs.co.za 77
-
7/31/2019 Final Android Patterns
8/37
www.bamboocs.co.za
Dashboard Example
www.bamboocs.co.za 88
-
7/31/2019 Final Android Patterns
9/37
www.bamboocs.co.za
Problem
Very clear and easily accessiblenavigation to the app main functionalityis important in mobile applications.
Users need to achieve simple tasks in ashort period of time( e.g. Viewing statusupdates on twitter)
99www.bamboocs.co.za
-
7/31/2019 Final Android Patterns
10/37
-
7/31/2019 Final Android Patterns
11/37
www.bamboocs.co.za
Recommendations
Landing page must be visually clear,there must be consistency betweenicons and fonts.
Avoid cluttering the dashboard
Focus on most important choices a usercan make
Use a one word naming for each
dashboard task if possible
www.bamboocs.co.za 11
Dos
Donts
-
7/31/2019 Final Android Patterns
12/37
www.bamboocs.co.za
Action Bar Example
www.bamboocs.co.za 12
-
7/31/2019 Final Android Patterns
13/37
www.bamboocs.co.za
Problem
An app can have frequently used actionsthat are common across multiple screens.
Introducing buttons for each action can
consume a lot of space and causeconsistency problems between multipleapp screens
13www.bamboocs.co.za
-
7/31/2019 Final Android Patterns
14/37
www.bamboocs.co.za
Solution
Provides easy access to actions that arecommon across multiple screen,including those specific to a singlescreen.
Provides a link to the application homescreen
Replaces the default title bar
Best place for branding the app.
www.bamboocs.co.za 14
-
7/31/2019 Final Android Patterns
15/37
www.bamboocs.co.za
Recommendations
Avoid clutter, do not use it as a toolbaror 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.
www.bamboocs.co.za 15
Dos
Donts
-
7/31/2019 Final Android Patterns
16/37
www.bamboocs.co.za
Search Bar Examples
www.bamboocs.co.za 16
-
7/31/2019 Final Android Patterns
17/37
www.bamboocs.co.za
Problem
Users need to quickly locate specificcontent or elements within your appwithout going through tediousnavigation of app menus.
17www.bamboocs.co.za
-
7/31/2019 Final Android Patterns
18/37
www.bamboocs.co.za
Solution
www.bamboocs.co.za 18
Pop up search form anchored at the topof the screen
Replaces the action bar
Support suggestions
Can use a quick actions popup topresent multiple search mode
-
7/31/2019 Final Android Patterns
19/37
www.bamboocs.co.za
Recommendations
Use it for simple searches
Do present rich suggestions
www.bamboocs.co.za 19
Dos
Donts
-
7/31/2019 Final Android Patterns
20/37
www.bamboocs.co.za
Quick Actions Examples
www.bamboocs.co.za 20
-
7/31/2019 Final Android Patterns
21/37
www.bamboocs.co.za
Problem
Users can perform more than one action onan object onscreen and presenting theseactions to the user on small touch-screendisplays can be difficult.
What can I do with this target/objectonscreen?
21www.bamboocs.co.za
-
7/31/2019 Final Android Patterns
22/37
www.bamboocs.co.za
Solution
Provides quick way to perform multipleactions on a target onscreen
Quick actions menu popup by tapping
on distinct visual targets onscreen
Minimally disruptive to the screencontext
Actions are obvious
www.bamboocs.co.za 22
-
7/31/2019 Final Android Patterns
23/37
www.bamboocs.co.za
Recommendations
Focus on key actions relevant to thecurrent object onscreen
Make the actions to be obvious - icons
must be intuitive
Avoid using quick actions in case it ispossible.
www.bamboocs.co.za 23
Dos
Donts
-
7/31/2019 Final Android Patterns
24/37
www.bamboocs.co.za
Dynamic List Examples
www.bamboocs.co.za 24
-
7/31/2019 Final Android Patterns
25/37
www.bamboocs.co.za
Problem
Android apps use lists to display largeamount of data and that data can beloaded over a network which can beslow.
Forcing the user to wait for the wholedata set to load before working can ruinthe user experience
www.bamboocs.co.za 25
-
7/31/2019 Final Android Patterns
26/37
www.bamboocs.co.za
Solution
Instead of waiting for the whole dataset load, the most relevant data isloaded and populated immediately inthe list.
Provide a mechanism to request moredata when the user reaches the end
portion of the previously loaded data.
A progress indicator is provided toinform the user of more content that iscoming
Can be implemented in multiple ways Endless list
Paged list
Pull to refresh
www.bamboocs.co.za 26
-
7/31/2019 Final Android Patterns
27/37
www.bamboocs.co.za
Endless List Example
www.bamboocs.co.za 27
-
7/31/2019 Final Android Patterns
28/37
www.bamboocs.co.za
Paged List/Pager
www.bamboocs.co.za 28
-
7/31/2019 Final Android Patterns
29/37
www.bamboocs.co.za
Pull to refresh
www.bamboocs.co.za 29
-
7/31/2019 Final Android Patterns
30/37
www.bamboocs.co.za
Recommendations
Do provide progress indicator inside thelist to indicate the progress of the databeing loaded.
www.bamboocs.co.za 30
Dos Donts
-
7/31/2019 Final Android Patterns
31/37
www.bamboocs.co.za
Workspace Examples
www.bamboocs.co.za 31
-
7/31/2019 Final Android Patterns
32/37
-
7/31/2019 Final Android Patterns
33/37
www.bamboocs.co.za
Solution
Provides navigation through categoriesof data using horizontally swipes ortabs.
Data is presented using a list whereeach tab represents a category.
Simple indicators such as directionarrows or dots are used to guide theuser to the direction where more data is
available.
www.bamboocs.co.za 33
-
7/31/2019 Final Android Patterns
34/37
www.bamboocs.co.za
Recommendations
Provides simple indicators that willguide the user to navigate to thedirection where more content isavailable.
www.bamboocs.co.za 34
Dos Donts
-
7/31/2019 Final Android Patterns
35/37
www.bamboocs.co.za
Conclusion
In addition to the app functionality, visual layouts andorganisation of the app functionality and elements is the key tomake your app stand out in hundreds of apps.
Consider using these Android UI patterns to simplify the visuallayout of your app.
www.bamboocs.co.za 35
-
7/31/2019 Final Android Patterns
36/37
www.bamboocs.co.za
Additional Info
GreenDroid Library
https://github.com/cyrilmottier/GreenDroid
ActionBar Sherlockhttps://github.com/JakeWharton/ActionBarSherloc
www.bamboocs.co.za 36
https://github.com/cyrilmottier/GreenDroidhttps://github.com/JakeWharton/ActionBarSherlockhttps://github.com/JakeWharton/ActionBarSherlockhttps://github.com/cyrilmottier/GreenDroid -
7/31/2019 Final Android Patterns
37/37
www bamboocs co za
Thank You
www bamboocs co za 37
Q & A
Email: [email protected]
Tel : 0768718571Twitter : @kkabiniBlog : mobidevza.blogspot.com
mailto:[email protected]:[email protected]