Your SlideShare is downloading. ×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

819

Published on

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

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

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
819
On Slideshare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. RESTARTWindows 8 User Experience Workshop | by Tal Florentin | UXVision | May 2013
  • 2. Profile I Wrote a UX BookStrategic UX SpecialistAGE34NAMETal FlorentinPOSITIONCEO at UXVisionSTATUSMarried + 1 + 2Lead LecturNice to Meet
  • 3. BE AN EARLY ADOPTER
  • 4. RESTART
  • 5. Windows XPONCE UPON A TIME…START
  • 6. After, we had Windows 7ONCE UPON A TIME…START
  • 7. Then came Windows 8ONCE UPON A TIME…START?
  • 8. Start screen DesktopWindows ButtonBASIC USAGE | Start Screen
  • 9. BASIC USAGE | Panoramic NavigationScrolling vertically through content (Mouse slider affects horizontal scrolling)
  • 10. BASIC USAGE | Apps open in full screenCharms Bar: Search, Share, Settings and more…
  • 11. BASIC USAGE | CharmsMenu areaApplication headerMenu areaCharms Bar: Search, Share, Settings and more…
  • 12. BASIC USAGE | ActionsMenu areaApplication headerMenu areaOpen application actions bar
  • 13. BASIC USAGE | Close Active AppClose active app by dragging it from top to bottom (mouse or touch)Menu areaApplicationheaderMenu areaX
  • 14. BASIC USAGE | Multitask ViewsSwitch to Snap ViewMenu areaApplicationheaderMenu areaTitle
  • 15. BASIC USAGE | Multitask ViewsSwitch to Fill ViewMenu areaApplication headerMMenu areaApplicationheaderMenu area
  • 16. Menu areaApplication headerMenu areaBASIC USAGE | App PagingSwipe to switch between active appsMenu areaApplication headerMenu area
  • 17. BASIC USAGE | Open Apps TabMenu areaApplication headerMenu areaBrowse open apps, open, close, set views
  • 18. BASIC USAGE | Semantic ZoomQuick browse within appMenu areaApplication headerMenu areaApplication headerMenu area Menu area Menu area Menu area Menu area
  • 19. BASIC USAGE | Toast NotificationsMenu areaApplication headerMenu areaWhenever something happens we get a live notificationSomething happenedand I must tell you….
  • 20. A LEARNING CURVE
  • 21. A LEARNING CURVEWhere will you put your product?INTUITIVEBased on priorexperienceand knowledgePRODUCTIVEBased on the bestway for arecurring user
  • 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. WE’VE BEEN THEREFrom Office 2003 to Office 2007Office 2003Familiar, knownOffice 2007Hard to learn, productive & efficient
  • 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. 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. HOW DO PEOPLE REACT TO WINDOWS 8?Watching Windows 8 from the users’ point of viewMatureAdultYoungChildSystemAdmin12Years OldWorkingMomDrunkLady
  • 27. HOW DO PEOPLE REACT TO WINDOWS 8?Mature Adult
  • 28. GOING ‘METRO’…
  • 29. The white city, Chaplin, Louis Armstrong, Cabaret and more…REMEMBER THE 1920’S?
  • 30. Functional Minimalism, Bald use of color, TypographyBAUHAUS MODERN DESIGN
  • 31. International typography,INTERNATIONAL DESIGN STYLE
  • 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. • No shadows, no rounded corners• Lowercase with no capitalsor full capitals• 2D icons• Bald noticeable colorsDETAILED IMPLICATIONS
  • 34. REDUCING CHROME
  • 35. DribbleSite Components• Search bar• Item sharing• Personal Settings
  • 36. DropboxSite Components• Search bar• Personal Settings
  • 37. FacebookSite Components• Search bar• Item sharing• Personal Settings
  • 38. USA TodaySite Components• Search bar• Item sharing• Personal Settings
  • 39. eBaySite Components• Search bar• Item sharing• Personal Settings
  • 40. • Similar functional requirement• Offer them out-of-the-box• Consistent for users• Easier for developersIDEA
  • 41. CONTRACTS | SearchCross system searching
  • 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. CONTRACTS | ShareAll social apps connected + interacting apps
  • 44. CONTRACTS | SettingsManage app settings in a central consistent location
  • 45. ANATOMY OF A WINDOWS 8 APP
  • 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. LIVE TILES AND THE START SCREEN
  • 48. THE START SCREENiPad Windows 8
  • 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. THE WIN 8 APP GRID
  • 51. • Cross-apps consistency• Familiarity and confidencefor the user• Provides hierarchy andsense of orientationCONSISTENT STRUCTURE
  • 52. Menu areaApplication headerMenu area7 Units2.5 / 6.5 Units6Units1 Unit = 20 px
  • 53. Menu areaApplication headerMenu area0.5 Units0.5 Units4 Units1 Unit = 20 px
  • 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. NAVIGATION
  • 56. 3 LEVEL NAVIGATIONNo more 5 levels of navigationTHE HUB THE SECTION THE DETAILS
  • 57. ORDER OF ITEMS BY HIERARCHYKeeping important stuff close to the userTHE HUBApplication headerMenu area Menu area Menu area Menu area Menu area
  • 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. GENERAL NAVIGATION AREASScreen elements of navigationHeader
  • 60. HEADER NAVIGATIONTop panel to support tab navigation or viewsSection A Section B Section C
  • 61. GLOBAL NAVIGATION MAPConsistent STAR-MODEL navigation
  • 62. TOUCH
  • 63. THE EVOLUTION OF UI FEEDBACKDirect manipulation requires immediate feedbackCOMMAND LINE:Long time / No feedbackGRAPHIC USER INTERFACE:Medium feedback timeDIRECT MANIPULATION:Immediate feedback
  • 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. 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. ANIMATIONS
  • 67. THE SHOW HAS JUST BEGUN…

×