UI Design Patterns

DROIDCON - 17/06/2013

in practice

Android

@Mathieu_Calba

http://bit.ly/11FFK9zhttp://bit.ly/Y7wFiU

What is aDesign Pattern ?

What is aUI Design Pattern ?

What is aAndroid UI Design

Pattern ?

Why should you use them ?

The best solution to

solve your problem Mental Model

HomogeneityLibraries

Do not reinvent the wheel

Why should not youuse them ?

Trendy solutionTo solve a nonexistant problem

Copy a competitor

What is the best way to learn ?

Practice

YANA

IT News Website

News

Briefs

Tests

Reports

Accounts

Categories

Favorites

Yet Another News Application

Identify the Minimal Viable Product

Article’s Consultation

V1Community

V2

Articles List About

Article Details

LoginAccount

Create

Home

Comments

V1

V2

Organization

How does the user find its way through the

application ?ActionBar

Why you should use itLocate /Navigate

Contextual ActionsBranding

Why you should not use itImmersion

in a universeMaximizing space

for content

VariationsSplit Contextual

How to implement it ?

SDK since API level 11ActionBarSherlock from Jake Wharton - Backport

to API Level 7

http://actionbarsherlock.com/http://developer.android.com/guide/topics/ui/actionbar.html

https://github.com/MathieuCalba/android-ui-design-pattern/tree/step-1

Navigation ?Categories Kind of articles

(News, Briefs...)

Dashboard

• Slowing the access to information

• Access to 6 to 9 sections

• Landing Page

Menu Drawer

• Responsive• Dynamic• Quick access

• Not easy to discover / use

Usefull when there is a complex navigation

aka Fly In App Menu or Sliding Menu...

https://speakerdeck.com/cyrilmottier/the-fly-in-app-menu-for-designers-and-developers

Cyril Mottier’s slides

ActionBar’s Spinner• Easy access• Filter or tab substitute

to gain screen space• Standard

• Can be confusing if used with 2 kind of data (like changing account and categories)

http://developer.android.com/guide/topics/ui/actionbar.html#Dropdown

Technically :

Tabs

• Simple• Quick access

5 Sections/Categories max

• Not very extensible

VariationScrollable Sliding

How to implement it ?

SDK with ActionBar API since API Level 11

ViewPagerIndicator from Jake Wharton - Different Styles from API Level 7

http://developer.android.com/guide/topics/ui/actionbar.html#Tabs

http://viewpagerindicator.com/

PagerSlidingTabStrip from Andreas Stuetz - Play Store style from API Level 8

https://github.com/astuetz/PagerSlidingTabStrip

Solution ?

Spinner for categories

Tabs for article kinds

https://github.com/MathieuCalba/android-ui-design-pattern/tree/step-2

Article details

Fast article switch

ViewPager

Read mode

ActionBar hiding

https://github.com/MathieuCalba/android-ui-design-pattern/tree/step-4

Basic finishedversion

Additionalfeatures

Notifying the user

No internet connectivity

No data Loading

Dialog

• Never read• Force user interaction• Interrupt the user

For irreversible actions

Technically ? SDK :http://developer.android.com/guide/topics/ui/dialogs.html

Toast

• Customizable• No user interaction• Not intrusive

• Not contextual (with a screen)

Technically ? SDK :http://developer.android.com/guide/topics/ui/notifiers/toasts.html

• Contextual to screen• Basic styles with

different levels of importance

Based on Toast

Defined par Cyril MottierCrouton

Technically ? Library by Benjamin Weiss :https://github.com/keyboardsurfer/Crouton

Basic style Many extended styles

Big Text

Inbox

Big Image

Possibility to add actions

System Notifications&

Technically :http://developer.android.com/guide/topics/ui/notifiers/notifications.html

• Select an article on the left list

• There is no favorite items yet

First use

Empty View

Error(s)

Empty View

• Allow to retry the download• No internet connectivity

https://github.com/MathieuCalba/android-ui-design-pattern/tree/step-5

Tablet adaptation

How to adapt the design to screen

diversity ?

How to do it ?

Small Normal Large XLarge426 x 320 dp 470 x 320 dp 640 x 480 dp 960 x 720 dp

sw320 dp sw600 dp sw720 dp

The Responsive Design Android wayGathering by bucket

How to adapt it ?

View re-use

View re-organization

Content re-organization

For YANA ?

https://github.com/MathieuCalba/android-ui-design-pattern/tree/step-6

Conclusion

Identify the problem

Identify possible solutions

Weigh and

Choose the right Design Pattern to be consistent with the

platform and the app

Use Android SDK and existing libraries !

Thanks/Credits

• Cyril Mottier for Photoshop templates for screenshots and other blog posts http://android.cyrilmottier.com/

• Juhani Lehtimaëki - Book Smashing Android UI

• Kirill Grouchnikov - http://www.pushing-pixels.org/

• Guillaume Berry for up/down icons

• YANA - Code available on GitHub : https://github.com/MathieuCalba/android-ui-design-pattern

Questions ?

@Mathieu_Calba