Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.
DESIGNING FOR WINDOWS PHONE:                A NEW INTERFACE PARADIGM                EVAN KIRCHHOFF CTO, QUBOP INC.        ...
WHY WINDOWS PHONE?MAY 4, 2012 - WWW.QUBOP.COM
MAY 4, 2012 - WWW.QUBOP.COM
BOTH DEVELOPER AND DESIGNER FRIENDLY                 KNOWN DEVICE DIMENSIONS = ABSOLUTE LAYOUT                         (LI...
THE ONE THING BETTER          THAN A POPULAR PLATFORM       IS A RAPIDLY GROWING PLATFORMMAY 4, 2012 - WWW.QUBOP.COM
CUMULATIVE USERBASE, LATE 2011 250M                                           250M 200M                                   ...
“MOBILE” ISN’T JUST “PHONE”    iPhone: 55%               iPod Touch: 32%   iPad: 13%MAY 4, 2012 - WWW.QUBOP.COM
MAY 4, 2012 - WWW.QUBOP.COM
MAY 4, 2012 - WWW.QUBOP.COM
MICROSOFT: 14 STORESAPPLE: 363 STORESBARNES & NOBLE: 705 STORES
PREDICTION:         WINDOWS              WILL BE THE       #2 MOBILE PLATFORM        WITHIN 24 MONTHSMAY 4, 2012 - WWW.QUB...
DESIGNING FOR                    WINDOWS PHONEMAY 4, 2012 - WWW.QUBOP.COM
WINDOWS PHONE:                     “PANORAMA”MAY 4, 2012 - WWW.QUBOP.COM
24px “peek”MAY 4, 2012 - WWW.QUBOP.COM
PANORAMA = TAB BARMAY 4, 2012 - WWW.QUBOP.COM
PANORAMA: BEST PRACTICESALWAYS AT TOP LEVELAT MOST ONE PER APPLIMIT TO 4 SCREENS (CAN MIX NARROW & WIDE)TRY FOR “MAGAZINE ...
“MAGAZINE COVER” LAYOUT?
WINDOWS PHONE:                       “PIVOT”MAY 4, 2012 - WWW.QUBOP.COM
HOW TO TELL PIVOT FROM PANORAMA                       no “peek”          clickable headers                WINDOWS CALENDAR...
PIVOT = SEGMENTED CONTROL (IOS)MAY 4, 2012 - WWW.QUBOP.COM
PIVOT: BEST PRACTICESCAN BE AT TOP LEVEL, OR DEEPER WITHIN APPCAN HAVE MORE THAN ONE PER APPLIMIT TO 6 SCREENSUSE FOR DENS...
WHY ALL THE SIDEWAYS MOTION?                     THE “DON’T LEAVE THE SCREEN” PRINCIPLE                              SCOOP...
WHY ALL THE SIDEWAYS MOTION?                     THE “DON’T LEAVE THE SCREEN” PRINCIPLE                              FOURS...
WHY ALL THE SIDEWAYS MOTION?                        PROMOTES FEATURE DISCOVERABILITY                               IOS DEV...
WINDOWS PHONE:                   APPLICATION BARMAY 4, 2012 - WWW.QUBOP.COM
APPLICATION BAR = TOOLBAR (IOS) + MENU BUTTON (ANDROID)MAY 4, 2012 - WWW.QUBOP.COM
OLD APPS,                       NEW PARADIGMMAY 4, 2012 - WWW.QUBOP.COM
FACEBOOK (IPHONE)   FACEBOOK (ANDROID)MAY 4, 2012 - WWW.QUBOP.COM
FACEBOOK (WINDOWS PHONE)MAY 4, 2012 - WWW.QUBOP.COM
FOURSQUARE (IPHONE)   FOURSQUARE (ANDROID)MAY 4, 2012 - WWW.QUBOP.COM
FOURSQUARE (WINDOWS PHONE)MAY 4, 2012 - WWW.QUBOP.COM
IOS AND ANDROID 2.x: SIMILAR DESIGN PATTERNSMAY 4, 2012 - WWW.QUBOP.COM
ANDROID 4.0 - MOVING FURTHER FROM IOSMAY 4, 2012 - WWW.QUBOP.COM
APRIL 2012: ANDROID DEVICES STILL MOSTLY 2.3              PERCENTAGE OF DEVICES ACCESSING GOOGLE PLAY IN PREVIOUS 14-DAY P...
WINDOWS PHONE:                      APPS USING                   STANDARD METROMAY 4, 2012 - WWW.QUBOP.COM
CNN   TWITTERMAY 4, 2012 - WWW.QUBOP.COM
KINDLE      SKYPE   USA TODAYMAY 4, 2012 - WWW.QUBOP.COM
SHAZAM      XBMCMAY 4, 2012 - WWW.QUBOP.COM
WEATHER CHANNEL   IMDBMAY 4, 2012 - WWW.QUBOP.COM
FANDANGOMAY 4, 2012 - WWW.QUBOP.COM
MINESWEEPERMAY 4, 2012 - WWW.QUBOP.COM
NEW YORK TIMESMAY 4, 2012 - WWW.QUBOP.COM
UI PORTING EXAMPLE:                   MOBIPARKMAY 4, 2012 - WWW.QUBOP.COM
MOBIPARK (IOS)MAY 4, 2012 - WWW.QUBOP.COM
MOBIPARK (WINDOWS PHONE)MAY 4, 2012 - WWW.QUBOP.COM
OTHER BEST PRACTICESMAY 4, 2012 - WWW.QUBOP.COM
WINDOWS PHONE MANGO:  APPLICATION LIFECYCLE       YOUR JOB: HIDE THIS FROM USERSMAY 4, 2012 - WWW.QUBOP.COM
DESTROY UI CHROME     DO NOT USE BUTTONS FOR NAVIGATION            SURFACE INTERESTING CONTENTMAY 4, 2012 - WWW.QUBOP.COM
THANKS!    EVAN KIRCHHOFF    EVAN@QUBOP.COM    TWITTER: @THEEVANKWWW.QUBOP.COMTWITTER: @QUBOPINC
Designing For Windows Phone: A New Interface Paradigm
Próxima SlideShare
Cargando en…5
×

Designing For Windows Phone: A New Interface Paradigm

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.

  • Sé el primero en comentar

  • Sé el primero en recomendar esto

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

×