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.

1. RESTART
Windows 8 User Experience Workshop | by Tal Florentin | UXVision | May 2013

2. Profile I Wrote a UX BookStrategic UX Specialist
AGE
34
NAME
Tal Florentin
POSITION
CEO at UXVision
STATUS
Married + 1 + 2
Lead Lectur
Nice to Meet

3. BE AN EARLY ADOPTER

4. RESTART

5. Windows XP
ONCE UPON A TIME…
START

6. After, we had Windows 7
ONCE UPON A TIME…
START

7. Then came Windows 8
ONCE UPON A TIME…
START
?

8. Start screen Desktop
Windows Button
BASIC USAGE | Start Screen

9. BASIC USAGE | Panoramic Navigation
Scrolling vertically through content (Mouse slider affects horizontal scrolling)

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….

20. A LEARNING CURVE

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

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, Typography
BAUHAUS MODERN DESIGN

31. International typography,
INTERNATIONAL DESIGN STYLE

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

34. REDUCING CHROME

35. Dribble
Site Components
• Search bar
• Item sharing
• Personal Settings

36. Dropbox
Site Components
• Search bar
• Personal Settings

37. Facebook
Site Components
• Search bar
• Item sharing
• Personal Settings

38. USA Today
Site Components
• Search bar
• Item sharing
• Personal Settings

39. eBay
Site Components
• Search bar
• Item sharing
• Personal Settings

40. • Similar functional requirement
• Offer them out-of-the-box
• Consistent for users
• Easier for developers
IDEA

41. CONTRACTS | Search
Cross system searching

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

43. CONTRACTS | Share
All social apps connected + interacting apps

44. CONTRACTS | Settings
Manage app settings in a central consistent location

45. ANATOMY OF A WINDOWS 8 APP

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

47. LIVE TILES AND THE START SCREEN

48. THE START SCREEN
iPad Windows 8

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

50. THE WIN 8 APP GRID

51. • Cross-apps consistency
• Familiarity and confidence
for the user
• Provides hierarchy and
sense of orientation
CONSISTENT STRUCTURE

52. Menu area
Application header
Menu area
7 Units
2.5 / 6.5 Units
6
Units
1 Unit = 20 px

53. Menu area
Application header
Menu area
0.5 Units
0.5 Units
4 Units
1 Unit = 20 px

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

55. NAVIGATION

56. 3 LEVEL NAVIGATION
No more 5 levels of navigation
THE HUB THE SECTION THE DETAILS

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

59. GENERAL NAVIGATION AREAS
Screen elements of navigation
Header

60. HEADER NAVIGATION
Top panel to support tab navigation or views
Section A Section B Section C

61. GLOBAL NAVIGATION MAP
Consistent STAR-MODEL navigation

62. TOUCH

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

66. ANIMATIONS

67. THE SHOW HAS JUST BEGUN…