UXVision - Tal Florentin - Windows 8 User Experience - Short Version

1,182 views

Published on

Introduction to Windows 8 User Experience - Secrets of designing Modern-UI Style Apps for the Windows 8 platform.

Published in: Technology
  • Be the first to comment

UXVision - Tal Florentin - Windows 8 User Experience - Short Version

  1. 1. RESTARTWindows 8 User Experience Workshop | by Tal Florentin | UXVision | May 2013
  2. 2. Profile I Wrote a UX BookStrategic UX SpecialistAGE34NAMETal FlorentinPOSITIONCEO at UXVisionSTATUSMarried + 1 + 2Lead LecturNice to Meet
  3. 3. BE AN EARLY ADOPTER
  4. 4. RESTART
  5. 5. Windows XPONCE UPON A TIME…START
  6. 6. After, we had Windows 7ONCE UPON A TIME…START
  7. 7. Then came Windows 8ONCE UPON A TIME…START?
  8. 8. Start screen DesktopWindows ButtonBASIC USAGE | Start Screen
  9. 9. BASIC USAGE | Panoramic NavigationScrolling vertically through content (Mouse slider affects horizontal scrolling)
  10. 10. BASIC USAGE | Apps open in full screenCharms Bar: Search, Share, Settings and more…
  11. 11. BASIC USAGE | CharmsMenu areaApplication headerMenu areaCharms Bar: Search, Share, Settings and more…
  12. 12. BASIC USAGE | ActionsMenu areaApplication headerMenu areaOpen application actions bar
  13. 13. BASIC USAGE | Close Active AppClose active app by dragging it from top to bottom (mouse or touch)Menu areaApplicationheaderMenu areaX
  14. 14. BASIC USAGE | Multitask ViewsSwitch to Snap ViewMenu areaApplicationheaderMenu areaTitle
  15. 15. BASIC USAGE | Multitask ViewsSwitch to Fill ViewMenu areaApplication headerMMenu areaApplicationheaderMenu area
  16. 16. Menu areaApplication headerMenu areaBASIC USAGE | App PagingSwipe to switch between active appsMenu areaApplication headerMenu area
  17. 17. BASIC USAGE | Open Apps TabMenu areaApplication headerMenu areaBrowse open apps, open, close, set views
  18. 18. BASIC USAGE | Semantic ZoomQuick browse within appMenu areaApplication headerMenu areaApplication headerMenu area Menu area Menu area Menu area Menu area
  19. 19. BASIC USAGE | Toast NotificationsMenu areaApplication headerMenu areaWhenever something happens we get a live notificationSomething happenedand I must tell you….
  20. 20. A LEARNING CURVE
  21. 21. A LEARNING CURVEWhere will you put your product?INTUITIVEBased on priorexperienceand knowledgePRODUCTIVEBased on the bestway for arecurring user
  22. 22. THIS IS INTUITIVEApple’s iPad unboxing with no tutorial or user manual• New product• New interaction• No prior paradigm• Intuitive interface• Zero learning curve
  23. 23. WE’VE BEEN THEREFrom Office 2003 to Office 2007Office 2003Familiar, knownOffice 2007Hard to learn, productive & efficient
  24. 24. WE’VE BEEN THEREFrom Office 2003 to Office 2007Office 2007Hard to learn, productive & efficient• Existing paradigm to break• Completely new model• Prior experience is irrelevant• Intimidating initial interaction• Slow learning curve• Much better productivity over time• Bigger risk• Great success
  25. 25. WILL IT WORK THE SAME?From Windows XP, Vista & 7 to Windows 8Windows 8• Existing paradigm to break• Prior experience partly relevant• Intimidating initial interaction• Medium learning curve• A major conceptual progress• Huge risk• Huge success?
  26. 26. HOW DO PEOPLE REACT TO WINDOWS 8?Watching Windows 8 from the users’ point of viewMatureAdultYoungChildSystemAdmin12Years OldWorkingMomDrunkLady
  27. 27. HOW DO PEOPLE REACT TO WINDOWS 8?Mature Adult
  28. 28. GOING ‘METRO’…
  29. 29. The white city, Chaplin, Louis Armstrong, Cabaret and more…REMEMBER THE 1920’S?
  30. 30. Functional Minimalism, Bald use of color, TypographyBAUHAUS MODERN DESIGN
  31. 31. International typography,INTERNATIONAL DESIGN STYLE
  32. 32. • Universal language• Beautiful | Minimal | Essential• Reduce non-functionalcomponents from design• Liability, readability, clear hierarchy• Blend into real life• Allow understanding whileon the moveDESIGN GUIDELINES
  33. 33. • No shadows, no rounded corners• Lowercase with no capitalsor full capitals• 2D icons• Bald noticeable colorsDETAILED IMPLICATIONS
  34. 34. REDUCING CHROME
  35. 35. DribbleSite Components• Search bar• Item sharing• Personal Settings
  36. 36. DropboxSite Components• Search bar• Personal Settings
  37. 37. FacebookSite Components• Search bar• Item sharing• Personal Settings
  38. 38. USA TodaySite Components• Search bar• Item sharing• Personal Settings
  39. 39. eBaySite Components• Search bar• Item sharing• Personal Settings
  40. 40. • Similar functional requirement• Offer them out-of-the-box• Consistent for users• Easier for developersIDEA
  41. 41. CONTRACTS | SearchCross system searching
  42. 42. CONTRACTS | SearchCross system searching• Searching from a single place• Searching an item easily throughout different apps• Supported export of items to the search results• Supported API for Auto- complete
  43. 43. CONTRACTS | ShareAll social apps connected + interacting apps
  44. 44. CONTRACTS | SettingsManage app settings in a central consistent location
  45. 45. ANATOMY OF A WINDOWS 8 APP
  46. 46. ELEMENTS OF A WIN8 APPLarge sized Live TileAppFull Screen App View Charms-BarSupportApplication Menu BarSnapped App ViewFill App ViewAppSmall sized Live TileSemantic ViewApplication Top Nav. Bar
  47. 47. LIVE TILES AND THE START SCREEN
  48. 48. THE START SCREENiPad Windows 8
  49. 49. THE START SCREENWindows 8• The best place to stay connected• Engaging experience• Vertical hierarchy by importance• Personalized area• Real interaction - send info to user
  50. 50. THE WIN 8 APP GRID
  51. 51. • Cross-apps consistency• Familiarity and confidencefor the user• Provides hierarchy andsense of orientationCONSISTENT STRUCTURE
  52. 52. Menu areaApplication headerMenu area7 Units2.5 / 6.5 Units6Units1 Unit = 20 px
  53. 53. Menu areaApplication headerMenu area0.5 Units0.5 Units4 Units1 Unit = 20 px
  54. 54. Menu areaApplication header1 Unit = 20 pxLorem ipsum dolor sit amet,consectetur adipiscing elit. Utquis velit ligula.Lorem ipsum dolor sit amet,consectetur adipiscing elit. Utquis velit ligula.Lorem ipsum dolor sit amet,consectetur adipiscing elit. Utquis velit ligula.Lorem ipsum dolor sit amet,consectetur adipiscing elit. Utquis velit ligula.Lorem ipsum dolor sit amet,consectetur adipiscing elit. Utquis velit ligula.Lorem ipsum dolor sit amet,consectetur adipiscing elit. Utquis velit ligula.Lorem ipsum dolor sit amet, consectetur.Lorem ipsum dolor sit amet, consectetur.Lorem ipsum dolor sit amet, consecteturadipiscing elit. Ut quis velit ligula. Nunc ultriceslacinia consectetur. Vivamus sit amet justo.Lorem ipsum dolor sit amet, consectetur.Lorem ipsum dolor sit amet, consectetur.Lorem ipsum dolor sit amet, consecteturadipiscing elit. Ut quis velit ligula. Nunc ultriceslacinia consectetur. Vivamus sit amet justo.Lorem ipsum dolor sit amet, consectetur.Lorem ipsum dolor sit amet, consectetur.Lorem ipsum dolor sit amet, consecteturadipiscing elit. Ut quis velit ligula. Nunc ultriceslacinia consectetur. Vivamus sit amet justo.Lorem ipsum dolor sit amet, consectetur.Lorem ipsum dolor sit amet, consectetur.Lorem ipsum dolor sit amet, consecteturadipiscing elit. Ut quis velit ligula. Nunc ultriceslacinia consectetur. Vivamus sit amet justo.0.5 Units2 Units
  55. 55. NAVIGATION
  56. 56. 3 LEVEL NAVIGATIONNo more 5 levels of navigationTHE HUB THE SECTION THE DETAILS
  57. 57. ORDER OF ITEMS BY HIERARCHYKeeping important stuff close to the userTHE HUBApplication headerMenu area Menu area Menu area Menu area Menu area
  58. 58. ORDER OF ITEMS BY HIERARCHYKeeping important stuff close to the userTHE HUBApplication headerMenu area Menu area• Reveal main content• Let the content speak• Engage using photos• Move buttons to app bar• Plan for responsive use
  59. 59. GENERAL NAVIGATION AREASScreen elements of navigationHeader
  60. 60. HEADER NAVIGATIONTop panel to support tab navigation or viewsSection A Section B Section C
  61. 61. GLOBAL NAVIGATION MAPConsistent STAR-MODEL navigation
  62. 62. TOUCH
  63. 63. THE EVOLUTION OF UI FEEDBACKDirect manipulation requires immediate feedbackCOMMAND LINE:Long time / No feedbackGRAPHIC USER INTERFACE:Medium feedback timeDIRECT MANIPULATION:Immediate feedback
  64. 64. TOUCH IS LEARNED IN THE ARMY• Design for touch-first• Direct manipulation requiresimmediate feedback• Secondary support for mouse usage• Fit to finger size• Fit to natural holding and gestures
  65. 65. A FEW THINGS TO KNOW ABOUT TOUCH• Sloppy• There’s no Hover state• Change behavior according to number of touching fingers• Provide visual feedback• Don’t hide the object• Pay attention to fat-finger syndrome
  66. 66. ANIMATIONS
  67. 67. THE SHOW HAS JUST BEGUN…

×