SlideShare uma empresa Scribd logo
1 de 50
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
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
                         (LIKE IOS, UNLIKE ANDROID)

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




MAY 4, 2012 - WWW.QUBOP.COM
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
“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 STORES
APPLE: 363 STORES
BARNES & NOBLE: 705 STORES
PREDICTION:




         WINDOWS              WILL BE THE
       #2 MOBILE PLATFORM
        WITHIN 24 MONTHS
MAY 4, 2012 - WWW.QUBOP.COM
DESIGNING FOR
                    WINDOWS PHONE


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


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


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




MAY 4, 2012 - WWW.QUBOP.COM
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
“MAGAZINE COVER” LAYOUT?
WINDOWS PHONE:
                       “PIVOT”


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




                WINDOWS CALENDAR   ESPN         FOURSQUARE



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




MAY 4, 2012 - WWW.QUBOP.COM
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
WHY ALL THE SIDEWAYS MOTION?
                     THE “DON’T LEAVE THE SCREEN” PRINCIPLE




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




                              FOURSQUARE (WINDOWS PHONE)


MAY 4, 2012 - WWW.QUBOP.COM
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
WINDOWS PHONE:
                   APPLICATION BAR


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




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


MAY 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 PATTERNS




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




MAY 4, 2012 - WWW.QUBOP.COM
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
WINDOWS PHONE:
                      APPS USING
                   STANDARD METRO


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


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


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


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



MAY 4, 2012 - WWW.QUBOP.COM
FANDANGO

MAY 4, 2012 - WWW.QUBOP.COM
MINESWEEPER

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

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


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

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

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



MAY 4, 2012 - WWW.QUBOP.COM
WINDOWS PHONE MANGO:
  APPLICATION LIFECYCLE


       YOUR JOB:
 HIDE THIS FROM USERS



MAY 4, 2012 - WWW.QUBOP.COM
DESTROY UI CHROME


     DO NOT USE BUTTONS FOR NAVIGATION


            SURFACE INTERESTING CONTENT


MAY 4, 2012 - WWW.QUBOP.COM
THANKS!


    EVAN KIRCHHOFF
    EVAN@QUBOP.COM
    TWITTER: @THEEVANK




WWW.QUBOP.COM
TWITTER: @QUBOPINC

Mais conteúdo relacionado

Destaque

Arh2050 1730 syllabus
Arh2050 1730 syllabusArh2050 1730 syllabus
Arh2050 1730 syllabus
ProfWillAdams
 
Zhaojinbiao self introduction
Zhaojinbiao self introductionZhaojinbiao self introduction
Zhaojinbiao self introduction
zhaojinbiao
 
Hum2220 sm2015 proust questionnaire
Hum2220 sm2015 proust questionnaireHum2220 sm2015 proust questionnaire
Hum2220 sm2015 proust questionnaire
ProfWillAdams
 
Hum2220 sp2015 proust questionnaire
Hum2220 sp2015 proust questionnaireHum2220 sp2015 proust questionnaire
Hum2220 sp2015 proust questionnaire
ProfWillAdams
 
Centrals nuclears
Centrals nuclearsCentrals nuclears
Centrals nuclears
elfaker
 
2005 Summer Newsletter
2005 Summer Newsletter2005 Summer Newsletter
2005 Summer Newsletter
Direct Relief
 

Destaque (18)

Fiesta de Disfraces
Fiesta de DisfracesFiesta de Disfraces
Fiesta de Disfraces
 
Arh2050 1730 syllabus
Arh2050 1730 syllabusArh2050 1730 syllabus
Arh2050 1730 syllabus
 
Piano tuner
Piano tunerPiano tuner
Piano tuner
 
1015026
10150261015026
1015026
 
Distributed WPA PSK security audit
Distributed WPA PSK security auditDistributed WPA PSK security audit
Distributed WPA PSK security audit
 
Zhaojinbiao self introduction
Zhaojinbiao self introductionZhaojinbiao self introduction
Zhaojinbiao self introduction
 
Vinci Services Products
Vinci Services ProductsVinci Services Products
Vinci Services Products
 
Bidnii hvns
Bidnii hvnsBidnii hvns
Bidnii hvns
 
Hum2220 sm2015 proust questionnaire
Hum2220 sm2015 proust questionnaireHum2220 sm2015 proust questionnaire
Hum2220 sm2015 proust questionnaire
 
Hum2220 sp2015 proust questionnaire
Hum2220 sp2015 proust questionnaireHum2220 sp2015 proust questionnaire
Hum2220 sp2015 proust questionnaire
 
Loopbaanbeleid
LoopbaanbeleidLoopbaanbeleid
Loopbaanbeleid
 
東北芸工大特別授業 20150526
東北芸工大特別授業 20150526東北芸工大特別授業 20150526
東北芸工大特別授業 20150526
 
地域コミュニティ活性化プロジェクト実証実験のご紹介
地域コミュニティ活性化プロジェクト実証実験のご紹介地域コミュニティ活性化プロジェクト実証実験のご紹介
地域コミュニティ活性化プロジェクト実証実験のご紹介
 
Centrals nuclears
Centrals nuclearsCentrals nuclears
Centrals nuclears
 
Clothes & markets
Clothes & marketsClothes & markets
Clothes & markets
 
2005 Summer Newsletter
2005 Summer Newsletter2005 Summer Newsletter
2005 Summer Newsletter
 
DIY to CMS
DIY to CMSDIY to CMS
DIY to CMS
 
9th Annual Safe Schools Initiative Seminar
9th Annual Safe Schools Initiative Seminar9th Annual Safe Schools Initiative Seminar
9th Annual Safe Schools Initiative Seminar
 

Mais de Qubop Inc.

5 Principles of Killer Mobile Apps: How to Think About Product Design for iOS
5 Principles of Killer Mobile Apps: How to Think About Product Design for iOS5 Principles of Killer Mobile Apps: How to Think About Product Design for iOS
5 Principles of Killer Mobile Apps: How to Think About Product Design for iOS
Qubop Inc.
 

Mais de Qubop Inc. (6)

API Design and Enterprise Mobile Apps
API Design and Enterprise Mobile AppsAPI Design and Enterprise Mobile Apps
API Design and Enterprise Mobile Apps
 
Developing for Windows Phone: A Guide for iOS Developers
Developing for Windows Phone: A Guide for iOS DevelopersDeveloping for Windows Phone: A Guide for iOS Developers
Developing for Windows Phone: A Guide for iOS Developers
 
Essential Mobile Design: Interface Principles and Best Practices for iOS, And...
Essential Mobile Design: Interface Principles and Best Practices for iOS, And...Essential Mobile Design: Interface Principles and Best Practices for iOS, And...
Essential Mobile Design: Interface Principles and Best Practices for iOS, And...
 
Sensational iOS App Design: First Principles and New Trends for 2012
Sensational iOS App Design: First Principles and New Trends for 2012Sensational iOS App Design: First Principles and New Trends for 2012
Sensational iOS App Design: First Principles and New Trends for 2012
 
3 Major Trends in Healthcare: Social, Mobile and Games
3 Major Trends in Healthcare: Social, Mobile and Games3 Major Trends in Healthcare: Social, Mobile and Games
3 Major Trends in Healthcare: Social, Mobile and Games
 
5 Principles of Killer Mobile Apps: How to Think About Product Design for iOS
5 Principles of Killer Mobile Apps: How to Think About Product Design for iOS5 Principles of Killer Mobile Apps: How to Think About Product Design for iOS
5 Principles of Killer Mobile Apps: How to Think About Product Design for iOS
 

Último

Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Victor Rentea
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
panagenda
 

Último (20)

AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
 
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
 
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
 
Understanding the FAA Part 107 License ..
Understanding the FAA Part 107 License ..Understanding the FAA Part 107 License ..
Understanding the FAA Part 107 License ..
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
 
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodPolkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
Exploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with MilvusExploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with Milvus
 
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
 
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024
 
Elevate Developer Efficiency & build GenAI Application with Amazon Q​
Elevate Developer Efficiency & build GenAI Application with Amazon Q​Elevate Developer Efficiency & build GenAI Application with Amazon Q​
Elevate Developer Efficiency & build GenAI Application with Amazon Q​
 
Mcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Mcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot ModelMcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Mcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot Model
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
 
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
 
Introduction to Multilingual Retrieval Augmented Generation (RAG)
Introduction to Multilingual Retrieval Augmented Generation (RAG)Introduction to Multilingual Retrieval Augmented Generation (RAG)
Introduction to Multilingual Retrieval Augmented Generation (RAG)
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
 

Designing For Windows Phone: A New Interface Paradigm