Final Android Patterns

7/31/2019 Final Android Patterns

1/37

Android UI DesignPatterns

Klaas Kabini

Bamboo Computing Solutions (mLabSA)


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


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


4/37

www.bamboocs.co.za

How do design patternsemerge?

From developer communities.

Naturally as a product of the designprocess



5/37

www.bamboocs.co.za

Design Patterns Benefits

Tried and tested solution

Reduces complexity

Reusable

Technology independent



6/37

www.bamboocs.co.za

Android UI Patterns

Dashboard

Action Bar

Search Bar

Quick Actions

Dynamic Lists

Workspace



7/37

www.bamboocs.co.za

Design PatternPresentation

Examples

Problem

Solution

Recommendations



8/37

www.bamboocs.co.za

Dashboard Example



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)



10/37


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


Dos

Donts


12/37

www.bamboocs.co.za

Action Bar Example



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



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.



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.


Dos

Donts


16/37

www.bamboocs.co.za

Search Bar Examples



17/37

www.bamboocs.co.za

Problem

Users need to quickly locate specificcontent or elements within your appwithout going through tediousnavigation of app menus.



18/37

www.bamboocs.co.za

Solution


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


19/37

www.bamboocs.co.za

Recommendations

Use it for simple searches

Do present rich suggestions


Dos

Donts


20/37

www.bamboocs.co.za

Quick Actions Examples



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?



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



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.


Dos

Donts


24/37

www.bamboocs.co.za

Dynamic List Examples



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



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



27/37

www.bamboocs.co.za

Endless List Example



28/37

www.bamboocs.co.za

Paged List/Pager



29/37

www.bamboocs.co.za

Pull to refresh



30/37

www.bamboocs.co.za

Recommendations

Do provide progress indicator inside thelist to indicate the progress of the databeing loaded.


Dos Donts


31/37

www.bamboocs.co.za

Workspace Examples



32/37


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.



34/37

www.bamboocs.co.za

Recommendations

Provides simple indicators that willguide the user to navigate to thedirection where more content isavailable.


Dos Donts


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.



36/37

www.bamboocs.co.za

Additional Info

GreenDroid Library

https://github.com/cyrilmottier/GreenDroid

ActionBar Sherlockhttps://github.com/JakeWharton/ActionBarSherloc

https://github.com/cyrilmottier/GreenDroidhttps://github.com/JakeWharton/ActionBarSherlockhttps://github.com/JakeWharton/ActionBarSherlockhttps://github.com/cyrilmottier/GreenDroid


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]

Final Android Patterns

Documents

Transcript of Final Android Patterns