2013 INFRAGISTICS UX of Windows 8

Kevin H. Richardson, Ph.D. Senior User Experience Architect krichardson@infragistics.com

Infragistics Services

Consulting

Cross-Platform

Cross-Industry

User Experience Design

Professional Training Software Development

About Me

• Working in the area of user experience for over 20 years.

• Experience across business verticals in the fields of research, evaluation, design and management of innovative, user-centered solutions.

• Weekends spent racing (or thinking about racing) his motorcycle for Infragistics Racing at a number of different racetracks on the East coast.

Information Architecture

Organization

Interaction Models

Design Philosophy

User Experience of Windows 8

Information Architecture

Hierarchical or Flat

Win8 Is All About Levels

Hub

Section

Detail

L1

L2

L3

Mixed Metaphors?

Hub

Section

Detail

L1

L2

L3

Fold? What Fold?

Screen height is fixed. Screen width isn’t.

Panning

Hub Section 2 Section 3 Section 4 Section 1

Organization

Hub Pages

Hub über dashboard

News Dashboard

Section 2 Dashboard

Section 3 Dashboard

Section 4 Dashboard

L1

News Section 2 Section 3 Section 4

2 3

4

5

6

Hub

News

Hub Example

Hub

Section 1 Dashboard

Section Pages

News Sub-Section D News Sub-Section A News Sub-Section B

News A (all)

News B (all)

News C (all)

News D (all)

L2

News Sub-Section C

Section Example

Section 2 (All)

Section 1 (All)

Detail Pages

Remaining Section Stories, Related Stories, etc. Selected Story Detail

Detail L3

Detail Example

Levels 1

News Section 2 Section 3 Section 4

News

2 3

4

5 6

Hub

News C News D News A News B

Remaining Stories, Related Stories, etc. Selected Item Detail

2

3

Primary Interaction Models

Navigation (Header or App Bar)

Drop-down header menu or top app bar to navigate between sections.

App Bar

Header Menu

App-Specific Actions (Bottom App Bar)

Contextually appropriate actions contained in the bottom app bar.

App Bar App Bar

Cross-App Actions (Charms Bar)

The charms bar houses actions common across all applications.

Charms Bar

Semantic Zooming

Zooming in or out (“pinching”) navigates between levels in the hierarchy.

Design Philosophy

Content Before Chrome

Non-essential / distracting UI is hidden. Focus on full-screen, immersive content.

Hub Pages / Live Tiles

Hub pages and Live Tiles alert users to new content.

Sharing

“Contracts”, top-level operating system functionality, improves sharing between applications.

Content Consumption

Philosophy of minimizing controls makes business-focused applications awkward.

Win8: Interesting & Useful?

Final Thoughts Like

• “Flattened” levels of information architecture

• Overarching design philosophy (on tablet)

– Content over chrome

– Hub pages, live tiles, bubbling-up content

Not So Sure

• Translation of philosophy to desktop/keyboard

• Translation of philosophy to business/content creation applications

• Ability of users to commute between Win8 and Web/iOS

Thank you.