1. XTREME LABS
BUILDING GREAT APPS
IN THE FRAGMENTED
ANDROID WORLD
Boris Chan (@borisc)
Principal, Xtreme Labs (@xtremelabs)
June 23, 2012 - FITC Spotlight Android
1

2. XTREME LABS
Leader in Mobile Solutions
Toronto, Canada & Palo Alto, California
Boris Chan @borisc / @xtremelabs

3. 100% AGILE
Boris Chan @borisc / @xtremelabs

4. SUCCESS ACROSS MULTI-PLATFORMS
300+ 300+
Apps Millio
Developed n
Downloads
BlackBerry and iPhone and Android Windows Mobile Web
PlayBook iPad Phone Phone 7
Tablet
Boris Chan @borisc / @xtremelabs

5. (@borisc or boris@xtremelabs.com)
Boris Chan @borisc / @xtremelabs

6. BUILDING GREAT APPS IN THE
FRAGMENTED ANDROID WORLD (IN 3
PARTS)
1. Tips for Building Great Apps
2. Android Fragmentation and Understanding Holo
3. Putting it All Together
Boris Chan @borisc / @xtremelabs

7. 10 THINGS WE LEARNED FROM BUILDING
APPS
What we talk about when we talk about building
Boris Chan @borisc / @xtremelabs

8. #10: THINK MOBILE-FIRST
Not just a strategy for disruption.
Boris Chan @borisc / @xtremelabs

9. #9: DESIGN IN SOCIAL BY DEFAULT
Friendly, private and intimate.
Boris Chan @borisc / @xtremelabs

10. #8: LATENCY KILLS.
You have limited time and resources.
Ed Yourdon http://www.flickr.com/photos/yourdon/
4064143718/
Boris Chan @borisc / @xtremelabs

11. #7: EMBRACE BEAUTY
(Holo tells you to do this too)
Boris Chan @borisc / @xtremelabs

12. #6: EMBRACE TOUCH
Keep it real.
Boris Chan @borisc / @xtremelabs

13. #5: CREATE THAT A-HA MOMENT
Delight your users.
Boris Chan @borisc / @xtremelabs

14. #4: CACHE IS KING
Cache all the things. (A lack of speed also kills.)
Boris Chan @borisc / @xtremelabs

15. #3: HAVE PERFECT TIMING
“All Get things ready for your users.
things entail rising and falling
timing. You must be able to discern
this.”
– Miyamoto Musashi
Boris Chan @borisc / @xtremelabs

16. #2: KNOW YOUR PLATFORMS
Understand Android.
Boris Chan @borisc / @xtremelabs

17. #1: KNOW YOUR USERS
Get data to build the right thing. Play to your
Boris Chan @borisc / @xtremelabs

18. ANDROID AND FRAGMENTATION
Boris Chan @borisc / @xtremelabs

19. ANDROID AND FRAGMENTATION
400+ devices that differ in many ways
Different dpi and densities, screen sizes
(5+!)
Different form factors: Tablet/Phone/
Phablets/Content Devices/etc.
Different configurations of Hardware/
Software Buttons on physical device.
Boris Chan @borisc / @xtremelabs

20. ANDROID AND FRAGMENTATION
Current Android Marketshare
2.2/2.3 is
usually the
decision...
4.x just at 7%
Boris Chan @borisc / @xtremelabs

21. ANDROID AND FRAGMENTATION
Current Android Marketshare
Adoption rate not picking fast
enough...
Boris Chan @borisc / @xtremelabs

22. ANDROID AND FRAGMENTATION
What you should look for:
Device manufacturers branch their own
versions of Android (Motorola RAZR,
Kindle Fire)
Also, there are forks: Fire, MIUI, etc.
Compatibility Test Suite compliance
TL;DR: A tested version of Android can
run apps, launch Intents, etc.
Boris Chan @borisc / @xtremelabs

23. HOW DOES ANDROID ATTEMPT TO SOLVE
THIS?
Enter Holo...
Boris Chan @borisc / @xtremelabs

24. REVIEWING HOLO:
An attempt to unify Android UI/UX
Boris Chan @borisc / @xtremelabs

25. HOLO UI PRINCIPLES
Boris Chan @borisc / @xtremelabs

26. ENCHANT ME
Boris Chan @borisc / @xtremelabs

27. REVIEWING HOLO
ENCHANT ME
Real objects are more fun than
Delight me in surprising ways
buttons and menus
Let me make it mine Get to know me
Boris Chan @borisc / @xtremelabs

28. SIMPLIFY MY LIFE
Boris Chan @borisc / @xtremelabs

29. REVIEWING HOLO
SIMPLIFY MY LIFE
Keep it brief
Pictures are faster than words
Decide for me but let me have the final say
Only show what I need when I need it
Boris Chan @borisc / @xtremelabs

30. REVIEWING HOLO
SIMPLIFY MY LIFE
I should always know where I am
Never lose my stuff
If it looks the same, it should act the same
Only interrupt me if it’s important
Boris Chan @borisc / @xtremelabs

31. MAKE ME AMAZING
Boris Chan @borisc / @xtremelabs

32. REVIEWING HOLO
MAKE ME AMAZING
Give me tricks that work everywhere
It’s not my fault
Sprinkle encouragement
Do the heavy lifting for me
Make important things fast
Boris Chan @borisc / @xtremelabs

33. A QUICK REVIEW OF HOLO AND THEMES
Understanding Holo as a unified look-and-feel for Android
ActionBar is actually their attempt to fix the
back stack
Provide more guidance on informational
hierarchy with their suggestions on categories
Language of icons and text to unify how to
communicate to users
Flat look-and-feel to create a differentiated and
unique experience for Android
Help enforce forgiveness, direct manipulation,
consistency (really helpful on mobile!)
Boris Chan @borisc / @xtremelabs 27

34. A QUICK REVIEW OF HOLO AND THEMES
Understanding Holo and the Compatibility Standard
Provides a predictable, standard look and feel
for Android (vs. 2.x)
Provides a forward and backwards compatible
standard
Use themes that are selected based on
platform version.
Provides a standard and safe-for-use parent
styles for customization
App's look and feel should not change when the
device (manufacturer or other) themes are
Baseline theme and then let Android handle each
Boris Chan @borisc / @xtremelabs 27

35. HOLO IS THE NEW UI/UX CENTRE OF
ANDROID
Boris Chan @borisc / @xtremelabs

36. ON FRAGMENTATION DURING DESIGN
AND DEVELOPMENT
(Also, note that this is a companion guide to our afternoon
session)
Boris Chan @borisc / @xtremelabs

37. MOST OF THE DESIGN GUIDE IS EASY TO
NAVIGATE...
(Except the following...)
Boris Chan @borisc / @xtremelabs

38. UNDERSTANDING BACK STACK ON
Placement
Hardware at the bottom (in any order),
Software button (at the bottom left),
Software - tied to app (in the navigation at
the top), or other actions that can pop the
stack.
Hard to learn, but also hard to scan!
And Up vs. Back:
Boris Chan @borisc / @xtremelabs 27

39. Up vs. Back
Boris Chan @borisc / @xtremelabs 27

40. Sibling Screens
Boris Chan @borisc / @xtremelabs 27

41. Unrelated Siblings and the Back Stack
Sibling Screens
Boris Chan @borisc / @xtremelabs 27

42. Action Bars, Menus and Backwards
Compatibility
Hardware Controls
Virtual Controls Legacy Controls
Boris Chan @borisc / @xtremelabs 27

43. Spot the problem for designers...
Hardware Controls
Why does the action bar look
like this on the older phone?
- Your favourite designer
Virtual Controls Legacy Controls
Boris Chan @borisc / @xtremelabs 27

44. PURE ANDROID
Don’t mimic UI elements from other platforms
Android
iOS
WP7
Boris Chan @borisc / @xtremelabs 27

45. PURE ANDROID
Don’t carry over platform specific icons
Android
iOS
WP7
Boris Chan @borisc / @xtremelabs 27

46. PURE ANDROID
Don’t hardcode links to other apps
Boris Chan @borisc / @xtremelabs 27

47. PURE ANDROID
Don’t use labeled back buttons on action bars
Boris Chan @borisc / @xtremelabs 27

48. PURE ANDROID
Don’t use right-pointing carets on line items
Boris Chan @borisc / @xtremelabs 27

49. COMPARING APPLES AND ANDROIDS
iOS is not like Android, most of the time
Flat and follow Holo - Holo + fallback to
system theme, flat, not skeuomorphism for
look-and-feel
Follow Pure Android - Don’t confuse the users,
make sure the easy stuff is taken care of
(use Android icons, Android-style sharing, no
right-carets, Android-style table cells, etc.)
No on-screen back buttons (they could be up
buttons for action bars though)
Use action bar as the menu system - iOS
needs some form of custom design and
Boris Chan @borisc / @xtremelabs 27

50. DESIGN PATTERNS ARE JUST GUIDELINES
You must be fearless in destroying yourself to progress...
Example: Dashboards are being replaced by Sidebar navigation
Boris Chan @borisc / @xtremelabs

51. LIFE WITH THE SUPPORT PACKAGE
Focus on the app, worry less about the platform. (But help
exists!)
Support Package/Compatibility Library is
there to target older versions of Android.
Use Fragments if starting from scratch,
reduces complicated Activity nesting
logic, increases code reuse. (Hello,
FragmentActivity!)
Configure different layouts for different
devices (instead of creating from scratch)
that need them
Boris Chan @borisc / @xtremelabs 27

52. LIBRARIES AND PRACTICAL ANDROID
Things to consider when thinking about Holo Everywhere
practically...
Third party-libraries build upon existing
libraries to add more features
backwards in Android time
ActionBar is a can be a quick drop-in
thanks to actionbarsherlock
http://actionbarsherlock.com/
Pull to refresh:
https://github.com/johannilsson/
android-pulltorefresh
Boris Chan @borisc / @xtremelabs 27

53. ONE MORE THING...
Let’s put it all together.
Boris Chan @borisc / @xtremelabs

54. TALKING ABOUT BUILDING APPS
The Countdown...
1. Know your users
2. Know your platforms 6. Embrace Touch
3. Have perfect timing 7. Embrace Beauty
4. Cache is King 8. Latency Kills
5. Create that A-ha 9. Design in Social by
Moment Default
10. Think Mobile-First
Boris Chan @borisc / @xtremelabs 27

55. HOLO IS THE NEW UI/UX CENTRE OF
ANDROID
(and the path to Pure Android)
Boris Chan @borisc / @xtremelabs

56. Boris Chan @borisc / @xtremelabs

57. Boris Chan @borisc / @xtremelabs

58. Boris Chan @borisc / @xtremelabs

59. Boris Chan @borisc / @xtremelabs

60. Boris Chan @borisc / @xtremelabs

61. Boris Chan @borisc / @xtremelabs

62. Boris Chan @borisc / @xtremelabs

63. THANK YOU!
Ask me anything: @borisc / boris@xtremelabs.com
Boris Chan @borisc / @xtremelabs