SlideShare a Scribd company logo
1 of 50
Windows 8 UX Design
             Welcome to Metro | Windows 8 Design Language




All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
Where does Metro come from?
             The origins of Windows8 design language




All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
Metro – Sleek, quick and modern
 •   Consolidating groups of common tasks to speed up usage (Gestalt)
 •   Large hubs over small buttons
 •   Animation, movement and transitions for live response and continuity
 •   Scrolling canvas




Windows 8 UX Design Language                                                                                          3
                                                              All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
The origins of Metro: Bauhouse
 • Bauhaus - a German modernist school of design
 • Extreme Reductionism (Minimalism)
 • Reducing design to its function




Windows 8 UX Design Language                                                                               4
                                                   All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
The origins of Metro: International Typography
 Our lives are constantly in motion,
 so we need to have to be able to glance at these kind of signs,
 get the information and keep going
 • Swiss Typography Movement:
 • Minimal & simple 2D 1-color icons
 • Good typography
 • Large text that catches the eye
 • Segeo font family
 • No capitals
 • No bolds
 • No rounded corners
 • No shadows and 3D effects



Windows 8 UX Design Language                                                                                           5
                                                               All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
The origins of Metro: Emotional Impact Through Motion
 • The power of kinetic typography
 • Movement brings the text and shapes to life
 • Creating an emotional response




Windows 8 UX Design Language                                                                             6
                                                 All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
The basics of the Metro-Style design




All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
5 Leading Principles
 Used to help you choose throughout the way

 •   Show pride in craftsmanship (‫)אמנות‬
 •   Be fast and fluid
 •   Be authentically digital
 •   Do more with less
 •   Win as one




Windows 8 UX Design Language                                                                          8
                                              All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
:Leading Guidelines

 Focus:
 • Be great at one thing
 • Let people interact with content. Put the content in the front
 • Do more with less - Reduce your design to its essentials

 Interaction, Usability and Experience
 • Design for intuitive interaction - take advantage of what people already know:
    Remember, People come to see the content, not to interact with the app
 • Bring life to the app by creating a sense of continuity and telling a story
 • Delight your users with motion and use it to create meaningful transitions
 • Design for touch




Windows 8 UX Design Language                                                                                           9
                                                               All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
Leading Guidelines

 Visual Design:
 • Sweet the details
 • Use balance, symmetry and hierarchy to foster trust and sense of integrity
 • Use typography beautifully,
 • Use bold, vibrant colors
 • Align the app layout to the grid
 • Promote consistency

 Technology
 • Connect to the cloud and to other apps and platforms (task continuity, social sharing, etc.)




Windows 8 UX Design Language                                                                                        10
                                                               All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
Anatomy of the metro style app




All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
The basic concept of the canvas




                   That is your content canvas
                       This is the Screen




Windows 8 UX Design Language                                                                     12
                                            All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
Using horizontal layout with visual cues




            A                  B            C                              D



Windows 8 UX Design Language                                                                         13
                                                All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
The basic concept of the canvas




            A                  B   C                              D



Windows 8 UX Design Language                                                                14
                                       All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
Tiles
 Tiles = application shortcuts




Windows 8 UX Design Language                                                          15
                                 All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
Single Canvas
 Things move in and out with motion rather than pop up in layers




                                        This is the screen




Windows 8 UX Design Language                                                                                      16
                                                             All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
Single Canvas
 Things move in and out with motion rather than pop up in layers




                                        This is the screen




Windows 8 UX Design Language                                                                                      17
                                                             All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
View States
 3 main application view states




  Full Screen View                Snapped View                Fill View




Windows 8 UX Design Language                                                                          18
                                                 All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
App modes to fit view states




  Full Screen View             Snapped View                    Fill View


      A                           A                                              A
                                  B
                 C                        Other                   Other                     C
      B                           C                                              B




Windows 8 UX Design Language                                                                           19
                                                  All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
Bars


                    This is the screen                This is the screen




                                                              Application Bar

        Application Bar:                 Charms Bar:
        Views and actions                Standard options available from every app:
                                         - Cross app search
                                         - Share app content
                                         - Connect to devices
                                         - App settings
                                         - Start - back to main Start screen


Windows 8 UX Design Language                                                                             20
                                                    All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
Context Menus

                                               Up to 5 items
                               Option   1
                               Option   2
                               Option   3
                               Option   4
                               Option   5




Windows 8 UX Design Language                                                                     21
                                            All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
Dialogs

                                                          Lightbox




              Modal Dialog     This is the screen




Windows 8 UX Design Language                                                                             22
                                                    All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
Metro-style Navigation




All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
Navigation Basics




Hub page                       Section page         Details Page




Windows 8 UX Design Language                                                                       24
                                              All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
Wizard-oriented navigation model




Windows 8 UX Design Language                                                             25
                                    All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
Detailed Screen Layout
                Back
                          Header                     Nav Bar


                                   Header Menu




                          Home
                                    Home Link


              Display Modes                                    Actions: Filter, sort, new….
                                           App Bar




Windows 8 UX Design Language                                                                               26
                                                      All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
Detailed Screen Layout

                       Header   On Canvas Controls




Windows 8 UX Design Language                                                                          27
                                                 All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
Detailed Screen Layout

                       Header
                                                  Correct Grouping




Windows 8 UX Design Language                                                         28
                                All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
Navigation Map




Windows 8 UX Design Language                                                        29
                               All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
Header top navigation
                                        Header Navigation
                      Section A   Section B    Section C




Windows 8 UX Design Language                                                                                     30
                                                            All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
Layout Grid Structure




All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
Unit = 20px
                                           Top header = 7 Units (140px)




               6 Units




                               2.5 Units       6.5 Units




Windows 8 UX Design Language                                                                             32
                                                    All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
2 Units
                                                  ½ Unit




Windows 8 UX Design Language                                                                  33
                                         All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
1 Unit

                                                    ½ Unit




Windows 8 UX Design Language                                                        34
                               All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
4 Unit




Windows 8 UX Design Language                                                                 35
                                        All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
Case Study




All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
General App Navigation




Windows 8 UX Design Language                                                        37
                               All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
Date filtering (the iPad style)




Windows 8 UX Design Language                                                            38
                                   All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
Date filtering (the win8 style)




Windows 8 UX Design Language                                                            39
                                   All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
Skype Metro – What’s your guess?




Windows 8 UX Design Language                                                             40
                                    All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
Skype Metro




Windows 8 UX Design Language                                                        41
                               All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
Windows 8 UX Design Language                                                        42
                               All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
Windows 8 UX Design Language                                                        43
                               All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
Windows 8 UX Design Language                                                        44
                               All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
How do people use the tablet?




All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
Most Common Tablet Grips




        • 1 hand holding,                           • 2 hand holding,
          1 hand interacting                          2 thumbs interacting
        • right/bottom areas best for interaction   • Right/left bottom areas best for interaction
        • Low right corner hidden                   • Anchored thumbs – better accuracy
        • Minimal Reach – better                    • Touch middle of the screen requires
        • Read/browse, Light typing                   alternative position
                                                    • Gaming, Read/browse, Light typing



Windows 8 UX Design Language                                                                                         46
                                                                All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
Most Common Tablet Grips




        • Device rests on table/legs              • Device rests on table,
          2 hands fully interactive                 Interaction from a distance
        • bottom area best for interaction        • bottom area best for interaction
        • Lower corners covered by hands          • Touching upper areas may move device off
        • Reduce need for reaching higher areas     balance




Windows 8 UX Design Language                                                                                      47
                                                             All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
Optimal Touch Areas




    For Interaction



Windows 8 UX Design Language                                                        48
                               All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
Optimal Touch Areas




    For Reading



Windows 8 UX Design Language                                                        49
                               All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
To be continued…




All rights reserved | Tal Florentin, UX Vision Ltd. © 2012

More Related Content

Similar to UXV certification - sessions 22 - mobile - metro

Best practices for Flash applications on mobile devices
Best practices for Flash applications on mobile devicesBest practices for Flash applications on mobile devices
Best practices for Flash applications on mobile devicesMichael Chaize
 
모바일 시대, 웹의 역할과 방향
모바일 시대, 웹의 역할과 방향모바일 시대, 웹의 역할과 방향
모바일 시대, 웹의 역할과 방향Jaeseung Mun
 
Іван Дульнявка “Розробка UI для мобільних платформ”
Іван Дульнявка “Розробка UI для мобільних платформ”Іван Дульнявка “Розробка UI для мобільних платформ”
Іван Дульнявка “Розробка UI для мобільних платформ”Lviv Startup Club
 
Metro Style Apps - Whats there for Developers
Metro Style Apps - Whats there for DevelopersMetro Style Apps - Whats there for Developers
Metro Style Apps - Whats there for DevelopersJitendra Soni
 
Microsoft Lync 2013 preview
Microsoft Lync 2013 previewMicrosoft Lync 2013 preview
Microsoft Lync 2013 previewSentri
 
Deloitte Cem Ams 25 May2011
Deloitte Cem Ams 25 May2011Deloitte Cem Ams 25 May2011
Deloitte Cem Ams 25 May2011Theo Slaats
 
Define & design apps for success en
Define & design apps for success enDefine & design apps for success en
Define & design apps for success enAcrmnet s.r.l.
 
Creating Flash Content for Mobile Devices
Creating Flash Content for Mobile DevicesCreating Flash Content for Mobile Devices
Creating Flash Content for Mobile Devicespaultrani
 
Camerjam mobile marketing masterclass 12snap
Camerjam mobile marketing masterclass 12snapCamerjam mobile marketing masterclass 12snap
Camerjam mobile marketing masterclass 12snapJames Cameron
 
Effective prototyping (for Vermont Code Camp)
Effective prototyping (for Vermont Code Camp)Effective prototyping (for Vermont Code Camp)
Effective prototyping (for Vermont Code Camp)Everett McKay
 
SeaBeyond 2011 ProcessOne - Marek Foss: designing mobile collaboration software
SeaBeyond 2011 ProcessOne - Marek Foss: designing mobile collaboration softwareSeaBeyond 2011 ProcessOne - Marek Foss: designing mobile collaboration software
SeaBeyond 2011 ProcessOne - Marek Foss: designing mobile collaboration softwareProcessOne
 
Multichannel User Interfaces
Multichannel User InterfacesMultichannel User Interfaces
Multichannel User InterfacesIcinetic
 
Multichannel User Interfaces
Multichannel User InterfacesMultichannel User Interfaces
Multichannel User InterfacesPedro J. Molina
 
Native vs Hybrid - Options to develop your mobile application
Native vs Hybrid - Options to develop your mobile applicationNative vs Hybrid - Options to develop your mobile application
Native vs Hybrid - Options to develop your mobile applicationLoic Ortola
 
Pharma times mobile[2]
Pharma times mobile[2]Pharma times mobile[2]
Pharma times mobile[2]Doctors.net.uk
 
ADM: Mobile banking and trading website - Keytrade Bank
ADM: Mobile banking and trading website - Keytrade BankADM: Mobile banking and trading website - Keytrade Bank
ADM: Mobile banking and trading website - Keytrade BankHuman Interface Group
 

Similar to UXV certification - sessions 22 - mobile - metro (20)

Clearboth
ClearbothClearboth
Clearboth
 
Best practices for Flash applications on mobile devices
Best practices for Flash applications on mobile devicesBest practices for Flash applications on mobile devices
Best practices for Flash applications on mobile devices
 
모바일 시대, 웹의 역할과 방향
모바일 시대, 웹의 역할과 방향모바일 시대, 웹의 역할과 방향
모바일 시대, 웹의 역할과 방향
 
Іван Дульнявка “Розробка UI для мобільних платформ”
Іван Дульнявка “Розробка UI для мобільних платформ”Іван Дульнявка “Розробка UI для мобільних платформ”
Іван Дульнявка “Розробка UI для мобільних платформ”
 
Metro Style Apps - Whats there for Developers
Metro Style Apps - Whats there for DevelopersMetro Style Apps - Whats there for Developers
Metro Style Apps - Whats there for Developers
 
Microsoft Lync 2013 preview
Microsoft Lync 2013 previewMicrosoft Lync 2013 preview
Microsoft Lync 2013 preview
 
Deloitte Cem Ams 25 May2011
Deloitte Cem Ams 25 May2011Deloitte Cem Ams 25 May2011
Deloitte Cem Ams 25 May2011
 
Windows 8
Windows 8Windows 8
Windows 8
 
Define & design apps for success en
Define & design apps for success enDefine & design apps for success en
Define & design apps for success en
 
Creating Flash Content for Mobile Devices
Creating Flash Content for Mobile DevicesCreating Flash Content for Mobile Devices
Creating Flash Content for Mobile Devices
 
Camerjam mobile marketing masterclass 12snap
Camerjam mobile marketing masterclass 12snapCamerjam mobile marketing masterclass 12snap
Camerjam mobile marketing masterclass 12snap
 
Effective prototyping (for Vermont Code Camp)
Effective prototyping (for Vermont Code Camp)Effective prototyping (for Vermont Code Camp)
Effective prototyping (for Vermont Code Camp)
 
SeaBeyond 2011 ProcessOne - Marek Foss: designing mobile collaboration software
SeaBeyond 2011 ProcessOne - Marek Foss: designing mobile collaboration softwareSeaBeyond 2011 ProcessOne - Marek Foss: designing mobile collaboration software
SeaBeyond 2011 ProcessOne - Marek Foss: designing mobile collaboration software
 
Multichannel User Interfaces
Multichannel User InterfacesMultichannel User Interfaces
Multichannel User Interfaces
 
Multichannel User Interfaces
Multichannel User InterfacesMultichannel User Interfaces
Multichannel User Interfaces
 
android.pptx
android.pptxandroid.pptx
android.pptx
 
Native vs Hybrid - Options to develop your mobile application
Native vs Hybrid - Options to develop your mobile applicationNative vs Hybrid - Options to develop your mobile application
Native vs Hybrid - Options to develop your mobile application
 
Pharma times mobile[2]
Pharma times mobile[2]Pharma times mobile[2]
Pharma times mobile[2]
 
Win 8 webinar
Win 8 webinarWin 8 webinar
Win 8 webinar
 
ADM: Mobile banking and trading website - Keytrade Bank
ADM: Mobile banking and trading website - Keytrade BankADM: Mobile banking and trading website - Keytrade Bank
ADM: Mobile banking and trading website - Keytrade Bank
 

More from TAL FLORENTIN

UX Vision - Tal Florentin - Digital Marketing, Personal Branding (Hebrew)
UX Vision - Tal Florentin - Digital Marketing, Personal Branding (Hebrew)UX Vision - Tal Florentin - Digital Marketing, Personal Branding (Hebrew)
UX Vision - Tal Florentin - Digital Marketing, Personal Branding (Hebrew)TAL FLORENTIN
 
Making'em Click - Tips to make your site convert.
Making'em Click - Tips to make your site convert. Making'em Click - Tips to make your site convert.
Making'em Click - Tips to make your site convert. TAL FLORENTIN
 
UXVision - UX Design Agency - Portfolio 2015
UXVision - UX Design Agency - Portfolio 2015UXVision - UX Design Agency - Portfolio 2015
UXVision - UX Design Agency - Portfolio 2015TAL FLORENTIN
 
UX Vision - Tal Florentin - 2014 UX Awards - The story of maveze
UX Vision - Tal Florentin - 2014 UX Awards - The story of mavezeUX Vision - Tal Florentin - 2014 UX Awards - The story of maveze
UX Vision - Tal Florentin - 2014 UX Awards - The story of mavezeTAL FLORENTIN
 
UXVision - Tal Florentin - UXIT Conference - When was the last time you've se...
UXVision - Tal Florentin - UXIT Conference - When was the last time you've se...UXVision - Tal Florentin - UXIT Conference - When was the last time you've se...
UXVision - Tal Florentin - UXIT Conference - When was the last time you've se...TAL FLORENTIN
 
UXVision - 20 things you need to know about UX for Content - Tal Florentin | ...
UXVision - 20 things you need to know about UX for Content - Tal Florentin | ...UXVision - 20 things you need to know about UX for Content - Tal Florentin | ...
UXVision - 20 things you need to know about UX for Content - Tal Florentin | ...TAL FLORENTIN
 
UXVision - UX Portfolio by Tal Florentin
UXVision - UX Portfolio by Tal FlorentinUXVision - UX Portfolio by Tal Florentin
UXVision - UX Portfolio by Tal FlorentinTAL FLORENTIN
 
How to become a successful speaker - Presentation Perfect | UXVision
How to become a successful speaker - Presentation Perfect | UXVisionHow to become a successful speaker - Presentation Perfect | UXVision
How to become a successful speaker - Presentation Perfect | UXVisionTAL FLORENTIN
 
UX Secrets That Will Make Your Marketing ROCK
UX Secrets That Will Make Your Marketing ROCKUX Secrets That Will Make Your Marketing ROCK
UX Secrets That Will Make Your Marketing ROCKTAL FLORENTIN
 
UXI Live 2013 - Tal Florentin - Zugiut - done right - heb
UXI Live 2013 - Tal Florentin - Zugiut - done right - hebUXI Live 2013 - Tal Florentin - Zugiut - done right - heb
UXI Live 2013 - Tal Florentin - Zugiut - done right - hebTAL FLORENTIN
 
UXVision - Tal Florentin - Windows 8 User Experience - Short Version
UXVision - Tal Florentin - Windows 8 User Experience - Short VersionUXVision - Tal Florentin - Windows 8 User Experience - Short Version
UXVision - Tal Florentin - Windows 8 User Experience - Short VersionTAL FLORENTIN
 
UXVision - Tal Florentin - Ignite presentation - UXPA 2013 Israel
UXVision - Tal Florentin - Ignite presentation - UXPA 2013 IsraelUXVision - Tal Florentin - Ignite presentation - UXPA 2013 Israel
UXVision - Tal Florentin - Ignite presentation - UXPA 2013 IsraelTAL FLORENTIN
 
UXVision - Tal florentin - zaid, hardoof - book writing conference
UXVision - Tal florentin - zaid, hardoof - book writing conferenceUXVision - Tal florentin - zaid, hardoof - book writing conference
UXVision - Tal florentin - zaid, hardoof - book writing conferenceTAL FLORENTIN
 
UXVision | Target Audience Profiling with Personas
UXVision | Target Audience Profiling with PersonasUXVision | Target Audience Profiling with Personas
UXVision | Target Audience Profiling with PersonasTAL FLORENTIN
 
UXV certification - sessions 23 - part 3 - agile and ux - emenies or friends
UXV certification -  sessions 23 - part 3 - agile and ux - emenies or friendsUXV certification -  sessions 23 - part 3 - agile and ux - emenies or friends
UXV certification - sessions 23 - part 3 - agile and ux - emenies or friendsTAL FLORENTIN
 
Agile sparks 2012 ux-vision - agile an ux - emenies or friends
Agile sparks 2012   ux-vision - agile an ux - emenies or friendsAgile sparks 2012   ux-vision - agile an ux - emenies or friends
Agile sparks 2012 ux-vision - agile an ux - emenies or friendsTAL FLORENTIN
 
UXLX 2012 - The skewered box method of persona profiling - Tal Florentin, UXV...
UXLX 2012 - The skewered box method of persona profiling - Tal Florentin, UXV...UXLX 2012 - The skewered box method of persona profiling - Tal Florentin, UXV...
UXLX 2012 - The skewered box method of persona profiling - Tal Florentin, UXV...TAL FLORENTIN
 
מודל הקוביה המשופדת | טל פלורנטין | כנס UXStoryTelling
מודל הקוביה המשופדת | טל פלורנטין | כנס UXStoryTelling מודל הקוביה המשופדת | טל פלורנטין | כנס UXStoryTelling
מודל הקוביה המשופדת | טל פלורנטין | כנס UXStoryTelling TAL FLORENTIN
 
תובנות וטיפים לניתוח פרסונות בארגון גדול ובינלאומי
תובנות וטיפים לניתוח פרסונות בארגון גדול ובינלאומי תובנות וטיפים לניתוח פרסונות בארגון גדול ובינלאומי
תובנות וטיפים לניתוח פרסונות בארגון גדול ובינלאומי TAL FLORENTIN
 

More from TAL FLORENTIN (19)

UX Vision - Tal Florentin - Digital Marketing, Personal Branding (Hebrew)
UX Vision - Tal Florentin - Digital Marketing, Personal Branding (Hebrew)UX Vision - Tal Florentin - Digital Marketing, Personal Branding (Hebrew)
UX Vision - Tal Florentin - Digital Marketing, Personal Branding (Hebrew)
 
Making'em Click - Tips to make your site convert.
Making'em Click - Tips to make your site convert. Making'em Click - Tips to make your site convert.
Making'em Click - Tips to make your site convert.
 
UXVision - UX Design Agency - Portfolio 2015
UXVision - UX Design Agency - Portfolio 2015UXVision - UX Design Agency - Portfolio 2015
UXVision - UX Design Agency - Portfolio 2015
 
UX Vision - Tal Florentin - 2014 UX Awards - The story of maveze
UX Vision - Tal Florentin - 2014 UX Awards - The story of mavezeUX Vision - Tal Florentin - 2014 UX Awards - The story of maveze
UX Vision - Tal Florentin - 2014 UX Awards - The story of maveze
 
UXVision - Tal Florentin - UXIT Conference - When was the last time you've se...
UXVision - Tal Florentin - UXIT Conference - When was the last time you've se...UXVision - Tal Florentin - UXIT Conference - When was the last time you've se...
UXVision - Tal Florentin - UXIT Conference - When was the last time you've se...
 
UXVision - 20 things you need to know about UX for Content - Tal Florentin | ...
UXVision - 20 things you need to know about UX for Content - Tal Florentin | ...UXVision - 20 things you need to know about UX for Content - Tal Florentin | ...
UXVision - 20 things you need to know about UX for Content - Tal Florentin | ...
 
UXVision - UX Portfolio by Tal Florentin
UXVision - UX Portfolio by Tal FlorentinUXVision - UX Portfolio by Tal Florentin
UXVision - UX Portfolio by Tal Florentin
 
How to become a successful speaker - Presentation Perfect | UXVision
How to become a successful speaker - Presentation Perfect | UXVisionHow to become a successful speaker - Presentation Perfect | UXVision
How to become a successful speaker - Presentation Perfect | UXVision
 
UX Secrets That Will Make Your Marketing ROCK
UX Secrets That Will Make Your Marketing ROCKUX Secrets That Will Make Your Marketing ROCK
UX Secrets That Will Make Your Marketing ROCK
 
UXI Live 2013 - Tal Florentin - Zugiut - done right - heb
UXI Live 2013 - Tal Florentin - Zugiut - done right - hebUXI Live 2013 - Tal Florentin - Zugiut - done right - heb
UXI Live 2013 - Tal Florentin - Zugiut - done right - heb
 
UXVision - Tal Florentin - Windows 8 User Experience - Short Version
UXVision - Tal Florentin - Windows 8 User Experience - Short VersionUXVision - Tal Florentin - Windows 8 User Experience - Short Version
UXVision - Tal Florentin - Windows 8 User Experience - Short Version
 
UXVision - Tal Florentin - Ignite presentation - UXPA 2013 Israel
UXVision - Tal Florentin - Ignite presentation - UXPA 2013 IsraelUXVision - Tal Florentin - Ignite presentation - UXPA 2013 Israel
UXVision - Tal Florentin - Ignite presentation - UXPA 2013 Israel
 
UXVision - Tal florentin - zaid, hardoof - book writing conference
UXVision - Tal florentin - zaid, hardoof - book writing conferenceUXVision - Tal florentin - zaid, hardoof - book writing conference
UXVision - Tal florentin - zaid, hardoof - book writing conference
 
UXVision | Target Audience Profiling with Personas
UXVision | Target Audience Profiling with PersonasUXVision | Target Audience Profiling with Personas
UXVision | Target Audience Profiling with Personas
 
UXV certification - sessions 23 - part 3 - agile and ux - emenies or friends
UXV certification -  sessions 23 - part 3 - agile and ux - emenies or friendsUXV certification -  sessions 23 - part 3 - agile and ux - emenies or friends
UXV certification - sessions 23 - part 3 - agile and ux - emenies or friends
 
Agile sparks 2012 ux-vision - agile an ux - emenies or friends
Agile sparks 2012   ux-vision - agile an ux - emenies or friendsAgile sparks 2012   ux-vision - agile an ux - emenies or friends
Agile sparks 2012 ux-vision - agile an ux - emenies or friends
 
UXLX 2012 - The skewered box method of persona profiling - Tal Florentin, UXV...
UXLX 2012 - The skewered box method of persona profiling - Tal Florentin, UXV...UXLX 2012 - The skewered box method of persona profiling - Tal Florentin, UXV...
UXLX 2012 - The skewered box method of persona profiling - Tal Florentin, UXV...
 
מודל הקוביה המשופדת | טל פלורנטין | כנס UXStoryTelling
מודל הקוביה המשופדת | טל פלורנטין | כנס UXStoryTelling מודל הקוביה המשופדת | טל פלורנטין | כנס UXStoryTelling
מודל הקוביה המשופדת | טל פלורנטין | כנס UXStoryTelling
 
תובנות וטיפים לניתוח פרסונות בארגון גדול ובינלאומי
תובנות וטיפים לניתוח פרסונות בארגון גדול ובינלאומי תובנות וטיפים לניתוח פרסונות בארגון גדול ובינלאומי
תובנות וטיפים לניתוח פרסונות בארגון גדול ובינלאומי
 

UXV certification - sessions 22 - mobile - metro

  • 1. Windows 8 UX Design Welcome to Metro | Windows 8 Design Language All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  • 2. Where does Metro come from? The origins of Windows8 design language All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  • 3. Metro – Sleek, quick and modern • Consolidating groups of common tasks to speed up usage (Gestalt) • Large hubs over small buttons • Animation, movement and transitions for live response and continuity • Scrolling canvas Windows 8 UX Design Language 3 All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  • 4. The origins of Metro: Bauhouse • Bauhaus - a German modernist school of design • Extreme Reductionism (Minimalism) • Reducing design to its function Windows 8 UX Design Language 4 All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  • 5. The origins of Metro: International Typography Our lives are constantly in motion, so we need to have to be able to glance at these kind of signs, get the information and keep going • Swiss Typography Movement: • Minimal & simple 2D 1-color icons • Good typography • Large text that catches the eye • Segeo font family • No capitals • No bolds • No rounded corners • No shadows and 3D effects Windows 8 UX Design Language 5 All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  • 6. The origins of Metro: Emotional Impact Through Motion • The power of kinetic typography • Movement brings the text and shapes to life • Creating an emotional response Windows 8 UX Design Language 6 All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  • 7. The basics of the Metro-Style design All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  • 8. 5 Leading Principles Used to help you choose throughout the way • Show pride in craftsmanship (‫)אמנות‬ • Be fast and fluid • Be authentically digital • Do more with less • Win as one Windows 8 UX Design Language 8 All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  • 9. :Leading Guidelines Focus: • Be great at one thing • Let people interact with content. Put the content in the front • Do more with less - Reduce your design to its essentials Interaction, Usability and Experience • Design for intuitive interaction - take advantage of what people already know: Remember, People come to see the content, not to interact with the app • Bring life to the app by creating a sense of continuity and telling a story • Delight your users with motion and use it to create meaningful transitions • Design for touch Windows 8 UX Design Language 9 All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  • 10. Leading Guidelines Visual Design: • Sweet the details • Use balance, symmetry and hierarchy to foster trust and sense of integrity • Use typography beautifully, • Use bold, vibrant colors • Align the app layout to the grid • Promote consistency Technology • Connect to the cloud and to other apps and platforms (task continuity, social sharing, etc.) Windows 8 UX Design Language 10 All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  • 11. Anatomy of the metro style app All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  • 12. The basic concept of the canvas That is your content canvas This is the Screen Windows 8 UX Design Language 12 All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  • 13. Using horizontal layout with visual cues A B C D Windows 8 UX Design Language 13 All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  • 14. The basic concept of the canvas A B C D Windows 8 UX Design Language 14 All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  • 15. Tiles Tiles = application shortcuts Windows 8 UX Design Language 15 All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  • 16. Single Canvas Things move in and out with motion rather than pop up in layers This is the screen Windows 8 UX Design Language 16 All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  • 17. Single Canvas Things move in and out with motion rather than pop up in layers This is the screen Windows 8 UX Design Language 17 All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  • 18. View States 3 main application view states Full Screen View Snapped View Fill View Windows 8 UX Design Language 18 All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  • 19. App modes to fit view states Full Screen View Snapped View Fill View A A A B C Other Other C B C B Windows 8 UX Design Language 19 All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  • 20. Bars This is the screen This is the screen Application Bar Application Bar: Charms Bar: Views and actions Standard options available from every app: - Cross app search - Share app content - Connect to devices - App settings - Start - back to main Start screen Windows 8 UX Design Language 20 All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  • 21. Context Menus Up to 5 items Option 1 Option 2 Option 3 Option 4 Option 5 Windows 8 UX Design Language 21 All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  • 22. Dialogs Lightbox Modal Dialog This is the screen Windows 8 UX Design Language 22 All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  • 23. Metro-style Navigation All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  • 24. Navigation Basics Hub page Section page Details Page Windows 8 UX Design Language 24 All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  • 25. Wizard-oriented navigation model Windows 8 UX Design Language 25 All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  • 26. Detailed Screen Layout Back Header Nav Bar Header Menu Home Home Link Display Modes Actions: Filter, sort, new…. App Bar Windows 8 UX Design Language 26 All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  • 27. Detailed Screen Layout Header On Canvas Controls Windows 8 UX Design Language 27 All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  • 28. Detailed Screen Layout Header Correct Grouping Windows 8 UX Design Language 28 All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  • 29. Navigation Map Windows 8 UX Design Language 29 All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  • 30. Header top navigation Header Navigation Section A Section B Section C Windows 8 UX Design Language 30 All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  • 31. Layout Grid Structure All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  • 32. Unit = 20px Top header = 7 Units (140px) 6 Units 2.5 Units 6.5 Units Windows 8 UX Design Language 32 All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  • 33. 2 Units ½ Unit Windows 8 UX Design Language 33 All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  • 34. 1 Unit ½ Unit Windows 8 UX Design Language 34 All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  • 35. 4 Unit Windows 8 UX Design Language 35 All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  • 36. Case Study All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  • 37. General App Navigation Windows 8 UX Design Language 37 All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  • 38. Date filtering (the iPad style) Windows 8 UX Design Language 38 All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  • 39. Date filtering (the win8 style) Windows 8 UX Design Language 39 All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  • 40. Skype Metro – What’s your guess? Windows 8 UX Design Language 40 All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  • 41. Skype Metro Windows 8 UX Design Language 41 All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  • 42. Windows 8 UX Design Language 42 All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  • 43. Windows 8 UX Design Language 43 All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  • 44. Windows 8 UX Design Language 44 All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  • 45. How do people use the tablet? All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  • 46. Most Common Tablet Grips • 1 hand holding, • 2 hand holding, 1 hand interacting 2 thumbs interacting • right/bottom areas best for interaction • Right/left bottom areas best for interaction • Low right corner hidden • Anchored thumbs – better accuracy • Minimal Reach – better • Touch middle of the screen requires • Read/browse, Light typing alternative position • Gaming, Read/browse, Light typing Windows 8 UX Design Language 46 All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  • 47. Most Common Tablet Grips • Device rests on table/legs • Device rests on table, 2 hands fully interactive Interaction from a distance • bottom area best for interaction • bottom area best for interaction • Lower corners covered by hands • Touching upper areas may move device off • Reduce need for reaching higher areas balance Windows 8 UX Design Language 47 All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  • 48. Optimal Touch Areas For Interaction Windows 8 UX Design Language 48 All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  • 49. Optimal Touch Areas For Reading Windows 8 UX Design Language 49 All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  • 50. To be continued… All rights reserved | Tal Florentin, UX Vision Ltd. © 2012