Designing For Windows Phone: A New Interface Paradigm

3,918 views
3,725 views

Published on

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.

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
3,918
On SlideShare
0
From Embeds
0
Number of Embeds
1,622
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Designing For Windows Phone: A New Interface Paradigm

  1. 1. DESIGNING FOR WINDOWS PHONE: A NEW INTERFACE PARADIGM EVAN KIRCHHOFF CTO, QUBOP INC. @THEEVANK @QUBOPINC WINDOWS PHONE DEVELOPER DAY, MAY 4, 2012MAY 4, 2012 - WWW.QUBOP.COM
  2. 2. WHY WINDOWS PHONE?MAY 4, 2012 - WWW.QUBOP.COM
  3. 3. MAY 4, 2012 - WWW.QUBOP.COM
  4. 4. BOTH DEVELOPER AND DESIGNER FRIENDLY KNOWN DEVICE DIMENSIONS = ABSOLUTE LAYOUT (LIKE IOS, UNLIKE ANDROID)MAY 4, 2012 - WWW.QUBOP.COM
  5. 5. THE ONE THING BETTER THAN A POPULAR PLATFORM IS A RAPIDLY GROWING PLATFORMMAY 4, 2012 - WWW.QUBOP.COM
  6. 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. 7. “MOBILE” ISN’T JUST “PHONE” iPhone: 55% iPod Touch: 32% iPad: 13%MAY 4, 2012 - WWW.QUBOP.COM
  8. 8. MAY 4, 2012 - WWW.QUBOP.COM
  9. 9. MAY 4, 2012 - WWW.QUBOP.COM
  10. 10. MICROSOFT: 14 STORESAPPLE: 363 STORESBARNES & NOBLE: 705 STORES
  11. 11. PREDICTION: WINDOWS WILL BE THE #2 MOBILE PLATFORM WITHIN 24 MONTHSMAY 4, 2012 - WWW.QUBOP.COM
  12. 12. DESIGNING FOR WINDOWS PHONEMAY 4, 2012 - WWW.QUBOP.COM
  13. 13. WINDOWS PHONE: “PANORAMA”MAY 4, 2012 - WWW.QUBOP.COM
  14. 14. 24px “peek”MAY 4, 2012 - WWW.QUBOP.COM
  15. 15. PANORAMA = TAB BARMAY 4, 2012 - WWW.QUBOP.COM
  16. 16. PANORAMA: BEST PRACTICESALWAYS AT TOP LEVELAT MOST ONE PER APPLIMIT TO 4 SCREENS (CAN MIX NARROW & WIDE)TRY FOR “MAGAZINE COVER” LAYOUT STYLE
  17. 17. “MAGAZINE COVER” LAYOUT?
  18. 18. WINDOWS PHONE: “PIVOT”MAY 4, 2012 - WWW.QUBOP.COM
  19. 19. HOW TO TELL PIVOT FROM PANORAMA no “peek” clickable headers WINDOWS CALENDAR ESPN FOURSQUAREMAY 4, 2012 - WWW.QUBOP.COM
  20. 20. PIVOT = SEGMENTED CONTROL (IOS)MAY 4, 2012 - WWW.QUBOP.COM
  21. 21. PIVOT: BEST PRACTICESCAN BE AT TOP LEVEL, OR DEEPER WITHIN APPCAN HAVE MORE THAN ONE PER APPLIMIT TO 6 SCREENSUSE FOR DENSER LAYOUT, OR MULTIPLE VIEWS OF CONTENT
  22. 22. WHY ALL THE SIDEWAYS MOTION? THE “DON’T LEAVE THE SCREEN” PRINCIPLE SCOOPLE (IPHONE)MAY 4, 2012 - WWW.QUBOP.COM
  23. 23. WHY ALL THE SIDEWAYS MOTION? THE “DON’T LEAVE THE SCREEN” PRINCIPLE FOURSQUARE (WINDOWS PHONE)MAY 4, 2012 - WWW.QUBOP.COM
  24. 24. WHY ALL THE SIDEWAYS MOTION? PROMOTES FEATURE DISCOVERABILITY IOS DEVELOPERS HAVE STARTED MODIFYING THE TAB BAR TO HIGHLIGHT KEY FEATURESMAY 4, 2012 - WWW.QUBOP.COM
  25. 25. WINDOWS PHONE: APPLICATION BARMAY 4, 2012 - WWW.QUBOP.COM
  26. 26. APPLICATION BAR = TOOLBAR (IOS) + MENU BUTTON (ANDROID)MAY 4, 2012 - WWW.QUBOP.COM
  27. 27. OLD APPS, NEW PARADIGMMAY 4, 2012 - WWW.QUBOP.COM
  28. 28. FACEBOOK (IPHONE) FACEBOOK (ANDROID)MAY 4, 2012 - WWW.QUBOP.COM
  29. 29. FACEBOOK (WINDOWS PHONE)MAY 4, 2012 - WWW.QUBOP.COM
  30. 30. FOURSQUARE (IPHONE) FOURSQUARE (ANDROID)MAY 4, 2012 - WWW.QUBOP.COM
  31. 31. FOURSQUARE (WINDOWS PHONE)MAY 4, 2012 - WWW.QUBOP.COM
  32. 32. IOS AND ANDROID 2.x: SIMILAR DESIGN PATTERNSMAY 4, 2012 - WWW.QUBOP.COM
  33. 33. ANDROID 4.0 - MOVING FURTHER FROM IOSMAY 4, 2012 - WWW.QUBOP.COM
  34. 34. APRIL 2012: ANDROID DEVICES STILL MOSTLY 2.3 PERCENTAGE OF DEVICES ACCESSING GOOGLE PLAY IN PREVIOUS 14-DAY PERIOD SOURCE: RON AMADEO, WWW.ANDROIDPOLICE.COMMAY 4, 2012 - WWW.QUBOP.COM
  35. 35. WINDOWS PHONE: APPS USING STANDARD METROMAY 4, 2012 - WWW.QUBOP.COM
  36. 36. CNN TWITTERMAY 4, 2012 - WWW.QUBOP.COM
  37. 37. KINDLE SKYPE USA TODAYMAY 4, 2012 - WWW.QUBOP.COM
  38. 38. SHAZAM XBMCMAY 4, 2012 - WWW.QUBOP.COM
  39. 39. WEATHER CHANNEL IMDBMAY 4, 2012 - WWW.QUBOP.COM
  40. 40. FANDANGOMAY 4, 2012 - WWW.QUBOP.COM
  41. 41. MINESWEEPERMAY 4, 2012 - WWW.QUBOP.COM
  42. 42. NEW YORK TIMESMAY 4, 2012 - WWW.QUBOP.COM
  43. 43. UI PORTING EXAMPLE: MOBIPARKMAY 4, 2012 - WWW.QUBOP.COM
  44. 44. MOBIPARK (IOS)MAY 4, 2012 - WWW.QUBOP.COM
  45. 45. MOBIPARK (WINDOWS PHONE)MAY 4, 2012 - WWW.QUBOP.COM
  46. 46. OTHER BEST PRACTICESMAY 4, 2012 - WWW.QUBOP.COM
  47. 47. WINDOWS PHONE MANGO: APPLICATION LIFECYCLE YOUR JOB: HIDE THIS FROM USERSMAY 4, 2012 - WWW.QUBOP.COM
  48. 48. DESTROY UI CHROME DO NOT USE BUTTONS FOR NAVIGATION SURFACE INTERESTING CONTENTMAY 4, 2012 - WWW.QUBOP.COM
  49. 49. THANKS! EVAN KIRCHHOFF EVAN@QUBOP.COM TWITTER: @THEEVANKWWW.QUBOP.COMTWITTER: @QUBOPINC

×