SlideShare a Scribd company logo
1 of 62
Android Design Guidelines:
The Missing Pages


Tricia Cervenan
Mobile Product Manager & UX Architect
November 29, 2012
                           @triciacervenan   1
HISTORY
          @triciacervenan   2
Android Market, circa 2010


                         @triciacervenan   3
Android                     iPhone




          @triciacervenan            4
Android 4.0 (ICS) released
November 2011




                             @triciacervenan   5
Android Design Guidelines released January 2012




                           @triciacervenan        6
Fragmentation in
May 2012
(via Flurry Analytics)




                         @triciacervenan   7
@triciacervenan   8
WHY FOLLOW GUIDELINES?
          @triciacervenan   9
@triciacervenan   10
“These design principles were developed by
and for the Android User Experience Team
to keep users’ best interests in mind.”
                                    - Android Design Guidelines




                  @triciacervenan                                 11
“Your app will play an important part in
keeping the overall Android experience
consistent and enjoyable to use.”
                                      - Android Design Guidelines




                    @triciacervenan                                 12
You have about 30 seconds to captivate
someone before you potentially lose them
forever.




                  @triciacervenan          13
My own personal mantra: If I have to tell you
how to use it, I didn’t do my job right.




                   @triciacervenan              14
Ratings and reviews are second most
important contributor to rankings.




                  @triciacervenan     15
It’s easier to develop to the guidelines...
if you understand them.




                     @triciacervenan          16
Let’s Talk Guidelines:
Seventeen tips (and four rules) to delivering a better app




                              @triciacervenan                17
NAVIGATION
             @triciacervenan   18
Root Navigation




                  @triciacervenan   19
Section Main View




                    @triciacervenan   20
Item Detail




              @triciacervenan   21
Collection List




                  @triciacervenan   22
Up is not Back, except when it is.

Up is Back, except when it’s not?


               @triciacervenan       23
“When the previously viewed screen is also the hierarchical
parent of the current screen, pressing the Back button has the
same result as pressing an Up button—this is a common
occurrence.”


                           @triciacervenan                       24
“When your app supports
navigation from a list of items
to a detail view of one of
those items, it's often
desirable to support direction
navigation from that item to
another one which precedes
or follows it in the list.”




                                  @triciacervenan   25
“However, a notable
          exception to this occurs when
          browsing between related
          detail views not tied together
          by the referring list.”




@triciacervenan                            26
“You have the ability to make
                  the Up behavior even smarter
                  based on your knowledge of
                  detail view.”




@triciacervenan                              27
Rule #1: As long as the user stays in the same section, up is
back.




                            @triciacervenan                 28
Rule #2: A collection list is not part of a section, so up is back.




                              @triciacervenan                    29
Rule #3: If a user jumps to a
different section or app, up
takes the user to the top of the
new section.




                             @triciacervenan   30
Rule #4: See rules 2 and 3.
A collection list isn’t part of a
section, but the detail view that
it can bring a user to is. So, if a
user navigates to a detail view
from a collection list, up takes
the user to the top of that detail
view’s section.




                               @triciacervenan   31
The Problem?

That’s a lot for a user to remember.




               @triciacervenan     32
?




@triciacervenan       33
Tip #1
An app is not a website. Be careful
about linking between sections. Or
         don’t do it at all.


               @triciacervenan    34
Tip #2
Your user is not stupid, but they are
 in a hurry. Don’t make them have
 to work extra hard to get the thing
     done they are trying to do.

                @triciacervenan     35
Tip #3
If you have to provide an alternate
“easier” way to do something, take
 a look at your app structure. The
  user may benefit from a revision
           there instead.
               @triciacervenan    36
ACTION BARS
          @triciacervenan   37
1
1
    2
    2

                          1 Main Action Bar
                          1


                          2 Top Bar/Tab Bar
                          2

                          3 Bottom Bar
                          3


3
3

        @triciacervenan                       38
1
1   Main Action Bar
    A
    A               C
                    C

         B
         B                          D
                                    D            E
                                                 E




    A.   Up button
    B.   Branding
    C.   App section navigation
    D.   Active app section’s options
    E.   Active app section’s options overflow
                            @triciacervenan          39
Tip #4
Don’t use an up button on the root
        navigation view.




              @triciacervenan    40
Tip #5
Google got rid of the menu button for
a reason. Don’t hide your navigation
   in another version of a menu.


                @triciacervenan    41
Tip #6
Keep your branding simple.




           @triciacervenan   42
Tip #7
  The action bar icons are not the
place to be creative. Use common,
standard, easy to understand icons
   to indicate what the action is.

               @triciacervenan   43
2
2   Tab Bars
    A
    A



    B
    B




    A. Fixed Tab Bar
    B. Scrollable Tab Bar




                            @triciacervenan   44
Tip #8
Fixed tab bars do not scroll. Only use
 them if you have two or three tabs.




                @triciacervenan     45
Tip #9
Tabs should be used to group like
things together, not as your main
           navigation.
    Exception: Your app truly has only one section.



                       @triciacervenan                46
3
3   Bottom Bar
      A
      A
                                             B
                                             B




    A. Icons for view specific options
    B. Overflow icon




                           @triciacervenan       47
Tip #10
 Only use the bottom bar if you are
using it as a contextual bar. Section
options stay in the main action bar.


                @triciacervenan     48
Contextual Action Bar
1 Top Bar v.1
1


2 Top Bar v.2
2



3 Bottom Bar
3


                @triciacervenan   49
@triciacervenan   50
Tip #11
    Don’t forget about your view
transitions. Make it obvious to your
   user that views with contextual
     action bars are different.

               @triciacervenan     51
FEEDBACK
           @triciacervenan   52
@triciacervenan   53
@triciacervenan   54
Tip #12
     You need to constantly and
consistently give your user feedback
so they know what they did right and
  what they did wrong, even if the
feedback only appears for a second.
                @triciacervenan   55
What else?
             @triciacervenan   56
Tip #13
Only provide landscape for an app that
  will truly benefit from the size and
  shape of that screen orientation.


                 @triciacervenan   57
Tip #14
 Your average user probably bought
  their smartphone for Facebook, to
take good photos, and text with a full
 keyboard. Your app will be used as
       much as it is memorable.
                @triciacervenan     58
Tip #15
Do user tests. With real users.




             @triciacervenan      59
Tip #16
Google doesn’t always follow their
        own guidelines.




              @triciacervenan    60
Tip #17
  Be nice to your UX people and
product owners. They may change
   their minds a lot, but its only
because they want what’s best for
             the user.
               @triciacervenan   61
THANK YOU!


 Follow me:

              @triciacervenan


              linkedin.com/in/triciacervenan


                        @triciacervenan        62

More Related Content

Viewers also liked

Android vs. IOS: Comparing features & functions
Android vs. IOS: Comparing features & functionsAndroid vs. IOS: Comparing features & functions
Android vs. IOS: Comparing features & functionsDipesh Bhatiya
 
Cannes 2016: Design Thinking for Health Innovation
Cannes 2016: Design Thinking for Health InnovationCannes 2016: Design Thinking for Health Innovation
Cannes 2016: Design Thinking for Health InnovationFjord
 
Google Material design
Google Material designGoogle Material design
Google Material designDan Vitoriano
 
Fjord Trends 2016
Fjord Trends 2016Fjord Trends 2016
Fjord Trends 2016Fjord
 
Fjord Trends 2017
Fjord Trends 2017 Fjord Trends 2017
Fjord Trends 2017 Fjord
 

Viewers also liked (7)

Android vs. IOS: Comparing features & functions
Android vs. IOS: Comparing features & functionsAndroid vs. IOS: Comparing features & functions
Android vs. IOS: Comparing features & functions
 
Cannes 2016: Design Thinking for Health Innovation
Cannes 2016: Design Thinking for Health InnovationCannes 2016: Design Thinking for Health Innovation
Cannes 2016: Design Thinking for Health Innovation
 
Android vs iOS
Android vs iOSAndroid vs iOS
Android vs iOS
 
Google Material design
Google Material designGoogle Material design
Google Material design
 
Android ppt
Android pptAndroid ppt
Android ppt
 
Fjord Trends 2016
Fjord Trends 2016Fjord Trends 2016
Fjord Trends 2016
 
Fjord Trends 2017
Fjord Trends 2017 Fjord Trends 2017
Fjord Trends 2017
 

Similar to Android Design Guidelines Missing Pages

Idea to launch: 13 lessons learned from a product manager
Idea to launch: 13 lessons learned from a product managerIdea to launch: 13 lessons learned from a product manager
Idea to launch: 13 lessons learned from a product managerTricia Cervenan
 
6 ways to refine iPhone and iPad Apps
6 ways to refine iPhone and iPad Apps6 ways to refine iPhone and iPad Apps
6 ways to refine iPhone and iPad AppsGinsburg Design
 
Eye Tracking the User Experience of Mobile: What You Need to Know
Eye Tracking the User Experience of Mobile: What You Need to KnowEye Tracking the User Experience of Mobile: What You Need to Know
Eye Tracking the User Experience of Mobile: What You Need to KnowJennifer Romano Bergstrom
 
Unifying the UX of a Survey Across Multiple Devices (MoDevEast 2013)
Unifying the UX of a Survey Across Multiple Devices (MoDevEast 2013)Unifying the UX of a Survey Across Multiple Devices (MoDevEast 2013)
Unifying the UX of a Survey Across Multiple Devices (MoDevEast 2013)Jennifer Romano Bergstrom
 
Six tips for better mobile ux design
Six tips for better mobile ux designSix tips for better mobile ux design
Six tips for better mobile ux designDenis Riftin
 
21 Ways to Awesome-ize Your Mobile Toolkit
21 Ways to Awesome-ize Your Mobile Toolkit21 Ways to Awesome-ize Your Mobile Toolkit
21 Ways to Awesome-ize Your Mobile ToolkitJeremy Caplan
 
Mobile Product Strategy Keynote Presentation for Mobile App Europe Conference...
Mobile Product Strategy Keynote Presentation for Mobile App Europe Conference...Mobile Product Strategy Keynote Presentation for Mobile App Europe Conference...
Mobile Product Strategy Keynote Presentation for Mobile App Europe Conference...Marc C. Lange
 
UX Activities for Pet Wearable iOS Mobile App
UX Activities for Pet Wearable iOS Mobile AppUX Activities for Pet Wearable iOS Mobile App
UX Activities for Pet Wearable iOS Mobile AppNicole Warner
 
What Would Users Change in My App? Summarizing App Reviews for Recommending ...
What Would Users Change in My App? Summarizing App Reviews for Recommending ...What Would Users Change in My App? Summarizing App Reviews for Recommending ...
What Would Users Change in My App? Summarizing App Reviews for Recommending ...Sebastiano Panichella
 

Similar to Android Design Guidelines Missing Pages (10)

Idea to launch: 13 lessons learned from a product manager
Idea to launch: 13 lessons learned from a product managerIdea to launch: 13 lessons learned from a product manager
Idea to launch: 13 lessons learned from a product manager
 
6 ways to refine iPhone and iPad Apps
6 ways to refine iPhone and iPad Apps6 ways to refine iPhone and iPad Apps
6 ways to refine iPhone and iPad Apps
 
Eye Tracking the User Experience of Mobile: What You Need to Know
Eye Tracking the User Experience of Mobile: What You Need to KnowEye Tracking the User Experience of Mobile: What You Need to Know
Eye Tracking the User Experience of Mobile: What You Need to Know
 
Unifying the UX of a Survey Across Multiple Devices (MoDevEast 2013)
Unifying the UX of a Survey Across Multiple Devices (MoDevEast 2013)Unifying the UX of a Survey Across Multiple Devices (MoDevEast 2013)
Unifying the UX of a Survey Across Multiple Devices (MoDevEast 2013)
 
Six tips for better mobile ux design
Six tips for better mobile ux designSix tips for better mobile ux design
Six tips for better mobile ux design
 
21 Ways to Awesome-ize Your Mobile Toolkit
21 Ways to Awesome-ize Your Mobile Toolkit21 Ways to Awesome-ize Your Mobile Toolkit
21 Ways to Awesome-ize Your Mobile Toolkit
 
Mobile Product Strategy Keynote Presentation for Mobile App Europe Conference...
Mobile Product Strategy Keynote Presentation for Mobile App Europe Conference...Mobile Product Strategy Keynote Presentation for Mobile App Europe Conference...
Mobile Product Strategy Keynote Presentation for Mobile App Europe Conference...
 
UX Activities for Pet Wearable iOS Mobile App
UX Activities for Pet Wearable iOS Mobile AppUX Activities for Pet Wearable iOS Mobile App
UX Activities for Pet Wearable iOS Mobile App
 
What Would Users Change in My App? Summarizing App Reviews for Recommending ...
What Would Users Change in My App? Summarizing App Reviews for Recommending ...What Would Users Change in My App? Summarizing App Reviews for Recommending ...
What Would Users Change in My App? Summarizing App Reviews for Recommending ...
 
Caffrey-Hill "Selecting Accessible (and Usable) Interfaces"
Caffrey-Hill "Selecting Accessible (and Usable) Interfaces"Caffrey-Hill "Selecting Accessible (and Usable) Interfaces"
Caffrey-Hill "Selecting Accessible (and Usable) Interfaces"
 

Recently uploaded

My Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 PresentationMy Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 PresentationRidwan Fadjar
 
How to Remove Document Management Hurdles with X-Docs?
How to Remove Document Management Hurdles with X-Docs?How to Remove Document Management Hurdles with X-Docs?
How to Remove Document Management Hurdles with X-Docs?XfilesPro
 
SIEMENS: RAPUNZEL – A Tale About Knowledge Graph
SIEMENS: RAPUNZEL – A Tale About Knowledge GraphSIEMENS: RAPUNZEL – A Tale About Knowledge Graph
SIEMENS: RAPUNZEL – A Tale About Knowledge GraphNeo4j
 
Key Features Of Token Development (1).pptx
Key  Features Of Token  Development (1).pptxKey  Features Of Token  Development (1).pptx
Key Features Of Token Development (1).pptxLBM Solutions
 
Hyderabad Call Girls Khairatabad ✨ 7001305949 ✨ Cheap Price Your Budget
Hyderabad Call Girls Khairatabad ✨ 7001305949 ✨ Cheap Price Your BudgetHyderabad Call Girls Khairatabad ✨ 7001305949 ✨ Cheap Price Your Budget
Hyderabad Call Girls Khairatabad ✨ 7001305949 ✨ Cheap Price Your BudgetEnjoy Anytime
 
Slack Application Development 101 Slides
Slack Application Development 101 SlidesSlack Application Development 101 Slides
Slack Application Development 101 Slidespraypatel2
 
Enhancing Worker Digital Experience: A Hands-on Workshop for Partners
Enhancing Worker Digital Experience: A Hands-on Workshop for PartnersEnhancing Worker Digital Experience: A Hands-on Workshop for Partners
Enhancing Worker Digital Experience: A Hands-on Workshop for PartnersThousandEyes
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationMichael W. Hawkins
 
Azure Monitor & Application Insight to monitor Infrastructure & Application
Azure Monitor & Application Insight to monitor Infrastructure & ApplicationAzure Monitor & Application Insight to monitor Infrastructure & Application
Azure Monitor & Application Insight to monitor Infrastructure & ApplicationAndikSusilo4
 
Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024Scott Keck-Warren
 
Install Stable Diffusion in windows machine
Install Stable Diffusion in windows machineInstall Stable Diffusion in windows machine
Install Stable Diffusion in windows machinePadma Pradeep
 
The Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptxThe Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptxMalak Abu Hammad
 
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...Neo4j
 
Maximizing Board Effectiveness 2024 Webinar.pptx
Maximizing Board Effectiveness 2024 Webinar.pptxMaximizing Board Effectiveness 2024 Webinar.pptx
Maximizing Board Effectiveness 2024 Webinar.pptxOnBoard
 
Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024BookNet Canada
 
Artificial intelligence in the post-deep learning era
Artificial intelligence in the post-deep learning eraArtificial intelligence in the post-deep learning era
Artificial intelligence in the post-deep learning eraDeakin University
 
AI as an Interface for Commercial Buildings
AI as an Interface for Commercial BuildingsAI as an Interface for Commercial Buildings
AI as an Interface for Commercial BuildingsMemoori
 
Swan(sea) Song – personal research during my six years at Swansea ... and bey...
Swan(sea) Song – personal research during my six years at Swansea ... and bey...Swan(sea) Song – personal research during my six years at Swansea ... and bey...
Swan(sea) Song – personal research during my six years at Swansea ... and bey...Alan Dix
 

Recently uploaded (20)

My Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 PresentationMy Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 Presentation
 
How to Remove Document Management Hurdles with X-Docs?
How to Remove Document Management Hurdles with X-Docs?How to Remove Document Management Hurdles with X-Docs?
How to Remove Document Management Hurdles with X-Docs?
 
SIEMENS: RAPUNZEL – A Tale About Knowledge Graph
SIEMENS: RAPUNZEL – A Tale About Knowledge GraphSIEMENS: RAPUNZEL – A Tale About Knowledge Graph
SIEMENS: RAPUNZEL – A Tale About Knowledge Graph
 
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptxE-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
 
Key Features Of Token Development (1).pptx
Key  Features Of Token  Development (1).pptxKey  Features Of Token  Development (1).pptx
Key Features Of Token Development (1).pptx
 
Hyderabad Call Girls Khairatabad ✨ 7001305949 ✨ Cheap Price Your Budget
Hyderabad Call Girls Khairatabad ✨ 7001305949 ✨ Cheap Price Your BudgetHyderabad Call Girls Khairatabad ✨ 7001305949 ✨ Cheap Price Your Budget
Hyderabad Call Girls Khairatabad ✨ 7001305949 ✨ Cheap Price Your Budget
 
Slack Application Development 101 Slides
Slack Application Development 101 SlidesSlack Application Development 101 Slides
Slack Application Development 101 Slides
 
Enhancing Worker Digital Experience: A Hands-on Workshop for Partners
Enhancing Worker Digital Experience: A Hands-on Workshop for PartnersEnhancing Worker Digital Experience: A Hands-on Workshop for Partners
Enhancing Worker Digital Experience: A Hands-on Workshop for Partners
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
 
Azure Monitor & Application Insight to monitor Infrastructure & Application
Azure Monitor & Application Insight to monitor Infrastructure & ApplicationAzure Monitor & Application Insight to monitor Infrastructure & Application
Azure Monitor & Application Insight to monitor Infrastructure & Application
 
Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024
 
The transition to renewables in India.pdf
The transition to renewables in India.pdfThe transition to renewables in India.pdf
The transition to renewables in India.pdf
 
Install Stable Diffusion in windows machine
Install Stable Diffusion in windows machineInstall Stable Diffusion in windows machine
Install Stable Diffusion in windows machine
 
The Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptxThe Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptx
 
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
 
Maximizing Board Effectiveness 2024 Webinar.pptx
Maximizing Board Effectiveness 2024 Webinar.pptxMaximizing Board Effectiveness 2024 Webinar.pptx
Maximizing Board Effectiveness 2024 Webinar.pptx
 
Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
 
Artificial intelligence in the post-deep learning era
Artificial intelligence in the post-deep learning eraArtificial intelligence in the post-deep learning era
Artificial intelligence in the post-deep learning era
 
AI as an Interface for Commercial Buildings
AI as an Interface for Commercial BuildingsAI as an Interface for Commercial Buildings
AI as an Interface for Commercial Buildings
 
Swan(sea) Song – personal research during my six years at Swansea ... and bey...
Swan(sea) Song – personal research during my six years at Swansea ... and bey...Swan(sea) Song – personal research during my six years at Swansea ... and bey...
Swan(sea) Song – personal research during my six years at Swansea ... and bey...
 

Android Design Guidelines Missing Pages

  • 1. Android Design Guidelines: The Missing Pages Tricia Cervenan Mobile Product Manager & UX Architect November 29, 2012 @triciacervenan 1
  • 2. HISTORY @triciacervenan 2
  • 3. Android Market, circa 2010 @triciacervenan 3
  • 4. Android iPhone @triciacervenan 4
  • 5. Android 4.0 (ICS) released November 2011 @triciacervenan 5
  • 6. Android Design Guidelines released January 2012 @triciacervenan 6
  • 7. Fragmentation in May 2012 (via Flurry Analytics) @triciacervenan 7
  • 9. WHY FOLLOW GUIDELINES? @triciacervenan 9
  • 11. “These design principles were developed by and for the Android User Experience Team to keep users’ best interests in mind.” - Android Design Guidelines @triciacervenan 11
  • 12. “Your app will play an important part in keeping the overall Android experience consistent and enjoyable to use.” - Android Design Guidelines @triciacervenan 12
  • 13. You have about 30 seconds to captivate someone before you potentially lose them forever. @triciacervenan 13
  • 14. My own personal mantra: If I have to tell you how to use it, I didn’t do my job right. @triciacervenan 14
  • 15. Ratings and reviews are second most important contributor to rankings. @triciacervenan 15
  • 16. It’s easier to develop to the guidelines... if you understand them. @triciacervenan 16
  • 17. Let’s Talk Guidelines: Seventeen tips (and four rules) to delivering a better app @triciacervenan 17
  • 18. NAVIGATION @triciacervenan 18
  • 19. Root Navigation @triciacervenan 19
  • 20. Section Main View @triciacervenan 20
  • 21. Item Detail @triciacervenan 21
  • 22. Collection List @triciacervenan 22
  • 23. Up is not Back, except when it is. Up is Back, except when it’s not? @triciacervenan 23
  • 24. “When the previously viewed screen is also the hierarchical parent of the current screen, pressing the Back button has the same result as pressing an Up button—this is a common occurrence.” @triciacervenan 24
  • 25. “When your app supports navigation from a list of items to a detail view of one of those items, it's often desirable to support direction navigation from that item to another one which precedes or follows it in the list.” @triciacervenan 25
  • 26. “However, a notable exception to this occurs when browsing between related detail views not tied together by the referring list.” @triciacervenan 26
  • 27. “You have the ability to make the Up behavior even smarter based on your knowledge of detail view.” @triciacervenan 27
  • 28. Rule #1: As long as the user stays in the same section, up is back. @triciacervenan 28
  • 29. Rule #2: A collection list is not part of a section, so up is back. @triciacervenan 29
  • 30. Rule #3: If a user jumps to a different section or app, up takes the user to the top of the new section. @triciacervenan 30
  • 31. Rule #4: See rules 2 and 3. A collection list isn’t part of a section, but the detail view that it can bring a user to is. So, if a user navigates to a detail view from a collection list, up takes the user to the top of that detail view’s section. @triciacervenan 31
  • 32. The Problem? That’s a lot for a user to remember. @triciacervenan 32
  • 34. Tip #1 An app is not a website. Be careful about linking between sections. Or don’t do it at all. @triciacervenan 34
  • 35. Tip #2 Your user is not stupid, but they are in a hurry. Don’t make them have to work extra hard to get the thing done they are trying to do. @triciacervenan 35
  • 36. Tip #3 If you have to provide an alternate “easier” way to do something, take a look at your app structure. The user may benefit from a revision there instead. @triciacervenan 36
  • 37. ACTION BARS @triciacervenan 37
  • 38. 1 1 2 2 1 Main Action Bar 1 2 Top Bar/Tab Bar 2 3 Bottom Bar 3 3 3 @triciacervenan 38
  • 39. 1 1 Main Action Bar A A C C B B D D E E A. Up button B. Branding C. App section navigation D. Active app section’s options E. Active app section’s options overflow @triciacervenan 39
  • 40. Tip #4 Don’t use an up button on the root navigation view. @triciacervenan 40
  • 41. Tip #5 Google got rid of the menu button for a reason. Don’t hide your navigation in another version of a menu. @triciacervenan 41
  • 42. Tip #6 Keep your branding simple. @triciacervenan 42
  • 43. Tip #7 The action bar icons are not the place to be creative. Use common, standard, easy to understand icons to indicate what the action is. @triciacervenan 43
  • 44. 2 2 Tab Bars A A B B A. Fixed Tab Bar B. Scrollable Tab Bar @triciacervenan 44
  • 45. Tip #8 Fixed tab bars do not scroll. Only use them if you have two or three tabs. @triciacervenan 45
  • 46. Tip #9 Tabs should be used to group like things together, not as your main navigation. Exception: Your app truly has only one section. @triciacervenan 46
  • 47. 3 3 Bottom Bar A A B B A. Icons for view specific options B. Overflow icon @triciacervenan 47
  • 48. Tip #10 Only use the bottom bar if you are using it as a contextual bar. Section options stay in the main action bar. @triciacervenan 48
  • 49. Contextual Action Bar 1 Top Bar v.1 1 2 Top Bar v.2 2 3 Bottom Bar 3 @triciacervenan 49
  • 51. Tip #11 Don’t forget about your view transitions. Make it obvious to your user that views with contextual action bars are different. @triciacervenan 51
  • 52. FEEDBACK @triciacervenan 52
  • 55. Tip #12 You need to constantly and consistently give your user feedback so they know what they did right and what they did wrong, even if the feedback only appears for a second. @triciacervenan 55
  • 56. What else? @triciacervenan 56
  • 57. Tip #13 Only provide landscape for an app that will truly benefit from the size and shape of that screen orientation. @triciacervenan 57
  • 58. Tip #14 Your average user probably bought their smartphone for Facebook, to take good photos, and text with a full keyboard. Your app will be used as much as it is memorable. @triciacervenan 58
  • 59. Tip #15 Do user tests. With real users. @triciacervenan 59
  • 60. Tip #16 Google doesn’t always follow their own guidelines. @triciacervenan 60
  • 61. Tip #17 Be nice to your UX people and product owners. They may change their minds a lot, but its only because they want what’s best for the user. @triciacervenan 61
  • 62. THANK YOU! Follow me: @triciacervenan linkedin.com/in/triciacervenan @triciacervenan 62