Droidcon 2011 - Android Design patterns

Android Design patternsGiorgio Venturi User Experience lead - Closertag twitter: @gventuri"

Who am I?Information Architecture, UserresearchFounder of Closertag, design agencydesigning for Android since early 2009One of the lead UX architects for theSkype application in 2010 Giorgio Venturi twitter: gventuri

HOW DO I CREATE A GREATUSER EXPERIENCE?

Five layers of user experience Value proposition Structure Behaviour Code Visual design Giorgio Venturi twitter: gventuri

Five layers of user experience Value proposition Structure Behaviour Code Visual designUser experience can be decomposed into its ﬁve building components. However, users will experience all those layers as a whole – not separately. You won’t have a great user experience unless you address these ﬁve layers holis?cally Giorgio Venturi twitter: gventuri

WHAT IS A DESIGN PATTERN?

It’s a design solution to a recurringproblem Giorgio Venturi twitter: gventuri

It’s a design solution to a recurringproblemCan a design paAern help us designing a great user experience? Yes, they can! It’s also about not reinven?ng the wheel. People want to use what they have learnt already using the phone. Hence, know your paAerns and use them to build your applica?ons. Don’t use paAerns you have seen on other plaGorms like iOS, use Android paAerns. Giorgio Venturi twitter: gventuri

THINGS CHANGE… ISN’T IT?

The evolution of the Android UIGoogle IO 2009 Google IO 2010 Google IO 2011 Cupcake Froyo Gingerbread/Honeycomb First session at Google IO First presenta?on on Introducing the new on UI design PaAerns based on the honeycomb paAerns TwiAer app Hypertext nav Ac?on bar v1 Ac?on bar v2 No?ﬁca?ons Quick ac?on/contact Carousels Sharing Intents Search ﬁlters Only normal, mid-‐density Support for mul?ple screen Fluid design: screens sizes Fragments Giorgio Venturi twitter: gventuri

The evolution of the Android UIGoogle IO 2009 Google IO 2010 Google IO 2011 Cupcake Froyo Gingerbread/Honeycomb First session at Google IO First presenta?on on Introducing the new on UI design PaAerns based on the honeycomb paAerns TwiAer app Hypertext nfor Android back in 2009 was very different from war v2 s designing Designing av Ac?on bar v1 Ac?on b hat iNo?fica?ons in 2011 for Android Quick ac?on/contact Carousels Sharing Intents Search filters The Google Android team has been gradually addressing several design Only normal, mid-‐density with naviga?on. challenges – especially Support for mul?ple screen Fluid design: screens formidable challenge is designing for a wide range of form factors Also, a sizes Fragments (candybar, tablets, keyboards, etc) & screen resolu?ons & densi?es Giorgio Venturi twitter: gventuri

UI challengesNavigationInformation visualisationOn screen interactionNotifications & responsivenessEmotion & Expression Giorgio Venturi twitter: gventuri

NAVIGATION

Naviga?on answers to 2 fundamental ques?ons: • here am I? W• here can I go? W

Use shallow structures /!"0$)..$ %)123&! %)*+,*-$ 0),*$ 0),*$ 0),*$ .)-& ,&4 ,&4 ,&4 !""#$%&&% %&&%$( Giorgio Venturi twitter: gventuri

Use shallow structures /!"0$)..$ %)123&! %)*+,*-$ 0),*$ 0),*$ 0),*$ .)-& ,&4 ,&4 ,&4 !""#$%&&% %&&%$(General rule: Mobile applica?ons should have a shallow hierarchy & be light on func?onality. If possible, try simplifying & reducing the amount of func?on the app has; don’t try adding several nested features. Giorgio Venturi twitter: gventuri

Shun deep hierarchies +,-."((!"*#/0),1 )23),#"!"(( -4),4%)5 ("&) ,--3!)4)! *( !"#$%#& ("&) !)4)!6 !)4)!7 Giorgio Venturi twitter: gventuri

Shun deep hierarchies +,-."((!"*#/0),1 )23),#"!"(( -4),4%)5 ("&) ,--3!)4)! *( !"#$%#& ("&) !)4)!6 !)4)!7Some?mes this is just not possible (e.g. Facebook, Linkedin, etc). In these case, consider the most important view or feature in your app (e.g. contacts view in Skype, Feed for Facebook, etc) and make user land on that screen. Allow then people can go to the overview screen, by using the ac?on bar (see next slides) Giorgio Venturi twitter: gventuri

Up and back in Android Contacts Inbox Contact details Compose email Giorgio Venturi twitter: gventuri

Contacts Inbox Back Back Contact details Compose email Giorgio Venturi twitter: gventuri

Contacts Inbox Back Up Back Contact details Compose email Giorgio Venturi twitter: gventuri

Contacts Inbox Back Up Back From Honeycomb moving forward: -‐ SYSTEM BACK navigates history between related screens -‐ APPLICATION UP navigates hierarchy within a single app Contact details Compose email This issue has been discussed at length in: Designing and ImplemenIng Android UIs for Phones and Tablets, Google IO 2011 This has been a great area of concern as the back buAon brings you back in the history stack Giorgio Venturi twitter: gventuri

Action bar Up to HOME SCREEN + BRANDINGIntroduced at Google Io 2010 with the TwiAer app, it quickly spread to other apps (but it is far from being ubiquitous) Giorgio Venturi twitter: gventuri

Tabs Giorgio Venturi twitter: gventuri

TabsThey expose main func?onality & views. They help building a mental model of the app. They show you where you are and where you can go. You can use icons, labels or a mix of both according to screen sizes. You can’t go wrong with tabs really, they have been here since 1996 and they are here to stay. Giorgio Venturi twitter: gventuri

Dashboards Giorgio Venturi twitter: gventuri

DashboardsEntrypoint screen into the main views. It was made popular by Facebook on iOS. We don’t par?cularly like this approach, it’s a bit lazy & it is also an excuse for feature bloat. The main problem is that if your app has a dominant view (e.g. contacts) it will make it one step further & it adds an extra level in the naviga?on. It hides informa?on. In fact twiAer has recently removed the dashboard and gone back to tabs view – for good. Giorgio Venturi twitter: gventuri

Honeycomb action barAction BarGeneral organization๏ App icon๏ View details Home View Action๏icon Action buttons details buttons WHERE WHAT CAN I WHAT CAN I I AM? SEE? DO HERE? It works par?cularly well with large screens & tablets -‐ as you can imagine. This approach is discussed in 31 Designing and ImplemenIng Android UIs for Phones and Tablets, Google IO 2011 Giorgio Venturi twitter: gventuri

Action bar on large and small screensAction BarPhones andsmaller screens39 Giorgio Venturi twitter: gventuri

Carousel tabsAka ‘sliding tabs’ They are used to pivot between different views in the same category – for example browsing your circles, or filtering between different sec?ons in the market – featured, top paid, free, etc. The beauty is that users can either tap or swipe (on any part of the screen) Recent research from N&N Group claims that people DO GET swiping. Giorgio Venturi twitter: gventuri

DO NOT USE…

Menu navigationDiscovery problem: out of sight, out of mind gventuri Giorgio Venturi twitter:

Custom navigation Giorgio Venturi twitter: gventuri

Custom navigationNobody is going to give you a prize for re-‐inven?ng basic naviga?on. Linkedin for example is trying to reinvent the wheel by having a custom swipe gesture on the ac?on bar. There’s another problem with this screen: the ?les beneath seem a image carousel – but they are not. Giorgio Venturi twitter: gventuri

Custom navigation - Spotify Giorgio Venturi twitter: gventuri

Custom navigation - SpotifySPOTIFY is using a naviga?on metaphor from Cupcake, the ‘tray’. While the tray used to be part of the framework, it has now become obsolete from 2.1+ onwards Avoid using the tray from now on Venturi Giorgio twitter: gventuri

INFORMATION VISUALISATION

Portrait dominant or fluid? ? Giorgio Venturi twitter: gventuri

Portrait dominant or fluid? ? Un?l Android 1.6, OS had a ﬂuid behaviour. Unfortunately, it is not very eﬃcient & to design the app twice. If you have a limited set of resources, to design the app for one orienta?on only Giorgio Venturi twitter: gventuri

Consider the primary use of the app Giorgio Venturi twitter: gventuri

Consider the primary use of the appMake sure you understand where your applica?on is going to be used most when deciding the primary orienta?on. With laid back interac?on, make landscape the primary view With ‘on the move’ interac?on (e.g. loca?on btwitter: gventuri Giorgio Venturi ased services), s?ck to portrait orienta?on.

ListsContacts ContactsDisplay options Header Me +1234567890123Only contacts withphones Toggle ARecent activities Display Name Display Latest activityEnabled status Quick scroll Display Name Should be used toSort list by Latest activity position the userFirst name quickly in a section of Display Name the list.View contact names as Latest activityFirst name, surname Display Name Import/export contactsImport/export contacts Latest activity B Docking headersImport contacts Display Name They can dock at the A Display Name Latest activity top of the viewport Latest activity when scrolling down. BExport contacts Call to Action Display Name Display NameTo local storage Latest activity Latest activity Context Display Name Display Name Latest activity Latest activity Giorgio Venturi twitter: gventuri

2D carousels Giorgio Venturi twitter: gventuri

3D carouselsBeyond the ListExamples66 Giorgio Venturi twitter: gventuri

Use of fragments Giorgio Venturi twitter: gventuri

Use of fragmentsBefore the release of honeycomb, you had to develop completely separate views to take advantage of increased real estate on tablets. Now you can use fragments. In general, fragments can be used to have several views into one screen and it brings increased usability. Think Gmail. – Combine a list and a detail view for browsing tasks – Consolidate mul?ple related phone screens into a single compound view – Avoid excessively long line lengths Panes to the right should generally present more content or details for items selected in the panes on the lek. This topic is a presenta?on in itself, so I won’t indulge on this topic, check the other references Giorgio Venturi twitter: gventuri

ON SCREEN INTERACTION

Toolbars & Actions frames Giorgio Venturi twitter: gventuri

Toolbars & Actions framesFixed ac?ons frame at the boAom, allows users to quickly execute an ac?on with no scrolling. Giorgio Venturi twitter: gventuri

Modal dialogues Giorgio Venturi twitter: gventuri

Modal dialoguesThere’s way too many dialogues in Android, this one is especially threatening. If you have to use them, the posi?ve call to ac?on is always on the lek Giorgio Venturi twitter: gventuri

Forms: use tooltips | Enter Username i username must be minimum 6 charactersTool?ps allow the user to avoid making errors – especially useful in registra?on forms Giorgio Venturi twitter: gventuri

Use the appropriate input type for textfield Giorgio Venturi twitter: gventuri

NOTIFICATIONS &RESPONSIVENESS

Design for responsiveness, do notinterrupt users or make him wait Giorgio Venturi twitter: gventuri

Toast notifications from androidpatterns.com Giorgio Venturi twitter: gventuri

Toast notifications from androidpatterns.comWhen no response is required at all from the user. It can appear on top of any user ac?vity or app – not necessarily the app that originated it Giorgio Venturi twitter: gventuri

Status bar notification Giorgio Venturi twitter: gventuri

Status bar notificationUse this when ac?on is applicable . E.g. previewing the uploaded image Giorgio Venturi twitter: gventuri

EMOTION & EXPRESSION

Develop a visual language Giorgio Venturi twitter: gventuri

Develop a visual languageThe quality of your visual language is a strong cue towards the quality of your applica?on! Spend ?me developing a peculiar, dis?nc?ve visual language including ?les, Giorgio Venturi twitter: gventurimarkers, buAon, etc.

Take care in designing your icons Giorgio Venturi twitter: gventuri

Take care in designing your iconsPurchase decisions are made on an impulse. A well designed icon & logo can make the diﬀerence between success and failure if you are on the market. Giorgio Venturi twitter: gventuriIt will work also work wonders on the ac?on bar…

Use of splash screens Giorgio Venturi twitter: gventuri

Use of splash screensNot compulsory, but it is especially useful to show while app preloads libraries, collec?ons, caching loca?on etc. – beAer having users wait in the ﬁrst seconds, rather than once they start interac?ng. Giorgio Venturi twitter: gventuriIt’s also a good opportunity to reinforce your branding

IN CONCLUSION

Design strategiesUnderstand who’s it for, go and talkto themInvolve a designer (or two)Prototype & testAnalytics Giorgio Venturi twitter: gventuri

Thank youFollow us on Twitter@gventuri@closertag

http://www.usercentred.net	2483
http://www.closertag.com	161
http://mtweb.tistory.com	35
http://paper.li	30
http://www.mulreany.ie	23
http://pinterest.com	15
http://feeds.feedburner.com	3
https://twitter.com	2
http://d1677460.u185.host.ie	2
http://a0.twimg.com	2
http://us-w1.rockmelt.com	2
http://twitter.com	1
http://translate.googleusercontent.com	1

Droidcon 2011 - Android Design patterns

by Giorgio Venturi

Accessibility

Categories

Upload Details

Usage Rights

13 Embeds 2,760

Statistics

Droidcon 2011 - Android Design patterns Presentation Transcript