Windows Phone has revolutionized mobile design, transforming traditional iOS/Android app interfaces with new modes of interaction. And because the platform is young, its interface traditions are developing rapidly. This presentation surveys today's top WP7 apps, talks about current design principles and new experiments, and gives you a list of things to consider in your own apps -- whether you're planning a new Windows Phone app or porting your existing apps to the Windows platform.

1. DESIGNING FOR WINDOWS PHONE:
A NEW INTERFACE PARADIGM
EVAN KIRCHHOFF CTO, QUBOP INC.
@THEEVANK
@QUBOPINC
WINDOWS PHONE DEVELOPER DAY, MAY 4, 2012
MAY 4, 2012 - WWW.QUBOP.COM

2. WHY WINDOWS PHONE?
MAY 4, 2012 - WWW.QUBOP.COM

3. MAY 4, 2012 - WWW.QUBOP.COM

4. BOTH DEVELOPER AND DESIGNER FRIENDLY
KNOWN DEVICE DIMENSIONS = ABSOLUTE LAYOUT
(LIKE IOS, UNLIKE ANDROID)
MAY 4, 2012 - WWW.QUBOP.COM

5. THE ONE THING BETTER
THAN A POPULAR PLATFORM
IS A RAPIDLY GROWING PLATFORM
MAY 4, 2012 - WWW.QUBOP.COM

6. CUMULATIVE USERBASE, LATE 2011
250M 250M
200M 200M
150M 150M
100M 100M
50M 50M
2005 2006 2007 2008 2009 2010 2011 2005 2006 2007 2008 2009 2010 2011
IOS (ALL) ANDROID PS3 XBOX 360 WII
(CUMULATIVE WORLDWIDE USERS IN MILLIONS)
MAY 4, 2012 - WWW.QUBOP.COM

7. “MOBILE” ISN’T JUST “PHONE”
iPhone: 55% iPod Touch: 32% iPad: 13%
MAY 4, 2012 - WWW.QUBOP.COM

8. MAY 4, 2012 - WWW.QUBOP.COM

9. MAY 4, 2012 - WWW.QUBOP.COM

10. MICROSOFT: 14 STORES
APPLE: 363 STORES
BARNES & NOBLE: 705 STORES

11. PREDICTION:
WINDOWS WILL BE THE
#2 MOBILE PLATFORM
WITHIN 24 MONTHS
MAY 4, 2012 - WWW.QUBOP.COM

12. DESIGNING FOR
WINDOWS PHONE
MAY 4, 2012 - WWW.QUBOP.COM

13. WINDOWS PHONE:
“PANORAMA”
MAY 4, 2012 - WWW.QUBOP.COM

14. 24px “peek”
MAY 4, 2012 - WWW.QUBOP.COM

15. PANORAMA = TAB BAR
MAY 4, 2012 - WWW.QUBOP.COM

16. PANORAMA: BEST PRACTICES
ALWAYS AT TOP LEVEL
AT MOST ONE PER APP
LIMIT TO 4 SCREENS (CAN MIX NARROW & WIDE)
TRY FOR “MAGAZINE COVER” LAYOUT STYLE

17. “MAGAZINE COVER” LAYOUT?

19. WINDOWS PHONE:
“PIVOT”
MAY 4, 2012 - WWW.QUBOP.COM

20. HOW TO TELL PIVOT FROM PANORAMA
no “peek” clickable headers
WINDOWS CALENDAR ESPN FOURSQUARE
MAY 4, 2012 - WWW.QUBOP.COM

21. PIVOT = SEGMENTED CONTROL (IOS)
MAY 4, 2012 - WWW.QUBOP.COM

22. PIVOT: BEST PRACTICES
CAN BE AT TOP LEVEL, OR DEEPER WITHIN APP
CAN HAVE MORE THAN ONE PER APP
LIMIT TO 6 SCREENS
USE FOR DENSER LAYOUT, OR MULTIPLE VIEWS OF CONTENT

23. WHY ALL THE SIDEWAYS MOTION?
THE “DON’T LEAVE THE SCREEN” PRINCIPLE
SCOOPLE (IPHONE)
MAY 4, 2012 - WWW.QUBOP.COM

24. WHY ALL THE SIDEWAYS MOTION?
THE “DON’T LEAVE THE SCREEN” PRINCIPLE
FOURSQUARE (WINDOWS PHONE)
MAY 4, 2012 - WWW.QUBOP.COM

25. WHY ALL THE SIDEWAYS MOTION?
PROMOTES FEATURE DISCOVERABILITY
IOS DEVELOPERS HAVE STARTED
MODIFYING THE TAB BAR TO
HIGHLIGHT KEY FEATURES
MAY 4, 2012 - WWW.QUBOP.COM

26. WINDOWS PHONE:
APPLICATION BAR
MAY 4, 2012 - WWW.QUBOP.COM

27. APPLICATION BAR = TOOLBAR (IOS) + MENU BUTTON (ANDROID)
MAY 4, 2012 - WWW.QUBOP.COM

28. OLD APPS,
NEW PARADIGM
MAY 4, 2012 - WWW.QUBOP.COM

29. FACEBOOK (IPHONE) FACEBOOK (ANDROID)
MAY 4, 2012 - WWW.QUBOP.COM

30. FACEBOOK (WINDOWS PHONE)
MAY 4, 2012 - WWW.QUBOP.COM

31. FOURSQUARE (IPHONE) FOURSQUARE (ANDROID)
MAY 4, 2012 - WWW.QUBOP.COM

32. FOURSQUARE (WINDOWS PHONE)
MAY 4, 2012 - WWW.QUBOP.COM

33. IOS AND ANDROID 2.x: SIMILAR DESIGN PATTERNS
MAY 4, 2012 - WWW.QUBOP.COM

34. ANDROID 4.0 - MOVING FURTHER FROM IOS
MAY 4, 2012 - WWW.QUBOP.COM

35. APRIL 2012: ANDROID DEVICES STILL MOSTLY 2.3
PERCENTAGE OF DEVICES ACCESSING GOOGLE PLAY IN PREVIOUS 14-DAY PERIOD
SOURCE: RON AMADEO, WWW.ANDROIDPOLICE.COM
MAY 4, 2012 - WWW.QUBOP.COM

36. WINDOWS PHONE:
APPS USING
STANDARD METRO
MAY 4, 2012 - WWW.QUBOP.COM

37. CNN TWITTER
MAY 4, 2012 - WWW.QUBOP.COM

38. KINDLE SKYPE USA TODAY
MAY 4, 2012 - WWW.QUBOP.COM

39. SHAZAM XBMC
MAY 4, 2012 - WWW.QUBOP.COM

40. WEATHER CHANNEL IMDB
MAY 4, 2012 - WWW.QUBOP.COM

41. FANDANGO
MAY 4, 2012 - WWW.QUBOP.COM

42. MINESWEEPER
MAY 4, 2012 - WWW.QUBOP.COM

43. NEW YORK TIMES
MAY 4, 2012 - WWW.QUBOP.COM

44. UI PORTING EXAMPLE:
MOBIPARK
MAY 4, 2012 - WWW.QUBOP.COM

45. MOBIPARK (IOS)
MAY 4, 2012 - WWW.QUBOP.COM

46. MOBIPARK (WINDOWS PHONE)
MAY 4, 2012 - WWW.QUBOP.COM

47. OTHER BEST PRACTICES
MAY 4, 2012 - WWW.QUBOP.COM

48. WINDOWS PHONE MANGO:
APPLICATION LIFECYCLE
YOUR JOB:
HIDE THIS FROM USERS
MAY 4, 2012 - WWW.QUBOP.COM

49. DESTROY UI CHROME
DO NOT USE BUTTONS FOR NAVIGATION
SURFACE INTERESTING CONTENT
MAY 4, 2012 - WWW.QUBOP.COM

50. THANKS!
EVAN KIRCHHOFF
EVAN@QUBOP.COM
TWITTER: @THEEVANK
WWW.QUBOP.COM
TWITTER: @QUBOPINC