The document provides an overview of the Windows 8 user experience workshop presented by Tal Florentin. It covers basic Windows 8 usage including the start screen, apps, and multitasking. It discusses design principles for Windows 8 apps including live tiles, full screen views, and navigation patterns. It also addresses touch interactions and the role of animations in the Windows 8 user experience.
10. BASIC USAGE | Apps open in full screen
Charms Bar: Search, Share, Settings and more…
11. BASIC USAGE | Charms
Menu area
Application header
Menu area
Charms Bar: Search, Share, Settings and more…
12. BASIC USAGE | Actions
Menu area
Application header
Menu area
Open application actions bar
13. BASIC USAGE | Close Active App
Close active app by dragging it from top to bottom (mouse or touch)
Menu area
Application
header
Menu area
X
14. BASIC USAGE | Multitask Views
Switch to Snap View
Menu area
Application
header
Menu area
Title
15. BASIC USAGE | Multitask Views
Switch to Fill View
Menu area
Application header
M
Menu area
Application
header
Menu area
16. Menu area
Application header
Menu area
BASIC USAGE | App Paging
Swipe to switch between active apps
Menu area
Application header
Menu area
17. BASIC USAGE | Open Apps Tab
Menu area
Application header
Menu area
Browse open apps, open, close, set views
18. BASIC USAGE | Semantic Zoom
Quick browse within app
Menu area
Application header
Menu area
Application header
Menu area Menu area Menu area Menu area Menu area
19. BASIC USAGE | Toast Notifications
Menu area
Application header
Menu area
Whenever something happens we get a live notification
Something happened
and I must tell you….
21. A LEARNING CURVE
Where will you put your product?
INTUITIVE
Based on prior
experience
and knowledge
PRODUCTIVE
Based on the best
way for a
recurring user
22. THIS IS INTUITIVE
Apple’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 THERE
From Office 2003 to Office 2007
Office 2003
Familiar, known
Office 2007
Hard to learn, productive & efficient
24. WE’VE BEEN THERE
From Office 2003 to Office 2007
Office 2007
Hard 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 8
Windows 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 view
Mature
Adult
Young
Child
System
Admin
12
Years Old
Working
Mom
Drunk
Lady
32. • Universal language
• Beautiful | Minimal | Essential
• Reduce non-functional
components from design
• Liability, readability, clear hierarchy
• Blend into real life
• Allow understanding while
on the move
DESIGN GUIDELINES
33. • No shadows, no rounded corners
• Lowercase with no capitals
or full capitals
• 2D icons
• Bald noticeable colors
DETAILED IMPLICATIONS
42. CONTRACTS | Search
Cross 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
46. ELEMENTS OF A WIN8 APP
Large sized Live Tile
App
Full Screen App View Charms-Bar
Support
Application Menu Bar
Snapped App View
Fill App View
App
Small sized Live Tile
Semantic View
Application Top Nav. Bar
49. THE START SCREEN
Windows 8
• The best place to stay connected
• Engaging experience
• Vertical hierarchy by importance
• Personalized area
• Real interaction - send info to user
54. Menu area
Application header
1 Unit = 20 px
Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Ut
quis velit ligula.
Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Ut
quis velit ligula.
Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Ut
quis velit ligula.
Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Ut
quis velit ligula.
Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Ut
quis velit ligula.
Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Ut
quis velit ligula.
Lorem ipsum dolor sit amet, consectetur.
Lorem ipsum dolor sit amet, consectetur.
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Ut quis velit ligula. Nunc ultrices
lacinia consectetur. Vivamus sit amet justo.
Lorem ipsum dolor sit amet, consectetur.
Lorem ipsum dolor sit amet, consectetur.
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Ut quis velit ligula. Nunc ultrices
lacinia consectetur. Vivamus sit amet justo.
Lorem ipsum dolor sit amet, consectetur.
Lorem ipsum dolor sit amet, consectetur.
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Ut quis velit ligula. Nunc ultrices
lacinia consectetur. Vivamus sit amet justo.
Lorem ipsum dolor sit amet, consectetur.
Lorem ipsum dolor sit amet, consectetur.
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Ut quis velit ligula. Nunc ultrices
lacinia consectetur. Vivamus sit amet justo.
0.5 Units
2 Units
57. ORDER OF ITEMS BY HIERARCHY
Keeping important stuff close to the user
THE HUB
Application header
Menu area Menu area Menu area Menu area Menu area
58. ORDER OF ITEMS BY HIERARCHY
Keeping important stuff close to the user
THE HUB
Application header
Menu area Menu area
• Reveal main content
• Let the content speak
• Engage using photos
• Move buttons to app bar
• Plan for responsive use
63. THE EVOLUTION OF UI FEEDBACK
Direct manipulation requires immediate feedback
COMMAND LINE:
Long time / No feedback
GRAPHIC USER INTERFACE:
Medium feedback time
DIRECT MANIPULATION:
Immediate feedback
64. TOUCH IS LEARNED IN THE ARMY
• Design for touch-first
• Direct manipulation requires
immediate 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