Microsoft Confidential © 2006

The Digital Home Designing for the Ten-Foot User Interface.

SpeakersBrian Kralyevich . Windows Media Center10’ Design Context and Windows Vista MCE

Richard Cardran . ZetoolsDesign Process, 10’ Design Challenges and Principles

Kate Wojogbe . Schematic 10’ Design principles applied and work examples

BTB029

Microsoft Confidential © 2006

Overview

01 Remote Control Experience02 Goals for distance UI03 Design principles

Microsoft Confidential © 2006

Designing for a Remote Control Experience

Users interact with most PC applications using a keyboard and mouse.

2’ design

Users interact with Media Center, XBox, and game consoles with a remote control or games controller.

10’ design.

Creating a 10’ user interface presents new challenges.Users expect it to work like TV.

Dynamic, animated experiences.

Microsoft Confidential © 2006

Designing for a Remote Control Experience

Users interact with most PC applications using a keyboard and mouse.

2’ design

Users interact with Media Center, XBox, and game consoles with a remote control or games controller.

10’ design.

Creating a 10’ user interface presents new challenges.Users expect it to work like TV.

Dynamic, animated experiences.

Microsoft Confidential © 2006

Designing for a Remote Control Experience

Users interact with most PC applications using a keyboard and mouse.

2’ design

Users interact with Media Center, XBox, and game consoles with a remote control or games controller.

10’ design.

Creating a 10’ user interface presents new challenges.Users expect it to work like TV.

Dynamic, animated experiences.

Microsoft Confidential © 2006

Designing for a Remote Control Experience

Users interact with most PC applications using a keyboard and mouse.

2’ design

Users interact with Media Center, XBox, and game consoles with a remote control or games controller.

10’ design.

Creating a 10’ user interface presents new challenges.Users expect it to work like TV.

Dynamic, animated experiences.

Microsoft Confidential © 2006

Designing for a Remote Control Experience

Users interact with most PC applications using a keyboard and mouse.

2’ design

Users interact with Media Center, XBox, and game consoles with a remote control or games controller.

10’ design.

Creating a 10’ user interface presents new challenges.Users expect it to work like TV.

Dynamic, animated experiences.

Microsoft Confidential © 2006

Designing for a Remote Control Experience

Users interact with most PC applications using a keyboard and mouse.

2’ design

Users interact with Media Center, XBox, and game consoles with a remote control or games controller.

10’ design.

Creating a 10’ user interface presents new challenges.Users expect it to work like TV.

Dynamic, animated experiences.

Microsoft Confidential © 2006

Designing for a Remote Control Experience

Users interact with most PC applications using a keyboard and mouse.

2’ design

Users interact with Media Center, XBox, and game consoles with a remote control or games controller.

10’ design.

Creating a 10’ user interface presents new challenges.Users expect it to work like TV.

Dynamic, animated experiences.

Microsoft Confidential © 2006

Microsoft Confidential © 2006

Microsoft Confidential © 2006

Microsoft Confidential © 2006

10’ Design

01 Overview02 Goals for distance UI03 Design principles

Microsoft Confidential © 2006

Goals for creating great distance UI

› Clean› Simple› Compelling› Consistent› Direct

Font size, legibility, readability, color, remote control navigation, resolution, flicker, contrast, layout, graphics and content all impact the usability and design of your application or service.

Microsoft Confidential © 2006

Microsoft Confidential © 2006

10’ Design

01 Overview02 Goals for distance UI03 General Design principles

Microsoft Confidential © 2006

01 General Design Principles

› Most conventional web design principles fail when viewed from a distance.

› Design for Media Center is related to other distance design.

› Keep it clean and simple – avoid density

› Posters, billboards, and DVD menus offer examples of distance design principles.

Microsoft Confidential © 2006

01 General Design Principles

› Most conventional web design principles fail when viewed from a distance.

› Design for Media Center is related to other distance design.

› Keep it clean and simple – avoid density

› Posters, billboards, and DVD menus offer examples of distance design principles.

Microsoft Confidential © 2006

01 General Design Principles

› Most conventional web design principles fail when viewed from a distance.

› Design for Media Center is related to other distance design.

› Keep it clean and simple – avoid density

› Posters, billboards, and DVD menus offer examples of distance design principles.

Microsoft Confidential © 2006

01 General Design Principles

› Most conventional web design principles fail when viewed from a distance.

› Design for Media Center is related to other distance design.

› Keep it clean and simple – avoid density

› Posters, billboards, and DVD menus offer examples of distance design principles.

Microsoft Confidential © 2006

01 General Design Principles

› Most conventional web design principles fail when viewed from a distance.

› Design for Media Center is related to other distance design.

› Keep it clean and simple – avoid density

› Posters, billboards, and DVD menus offer examples of distance design principles.

Microsoft Confidential © 2006

25’ 100’ 200’ design

Microsoft Confidential © 2006

25’ 100’ 200’ design

Microsoft Confidential © 2006

25’ 100’ 200’ design

Microsoft Confidential © 2006

25’ 100’ 200’ design

Microsoft Confidential © 2006

25’ 100’ 200’ design

25’ 100’ 200’ design

Microsoft Confidential © 2006

5000’ design

25’ 100’ 200’ design

Microsoft Confidential © 2006

02 Focus

› This is the single most important thing from a distance.

› It does not have to be a button or mimic web standards.

› Should remain consistent everywhere.

› Should be noticeable to user.

Microsoft Confidential © 2006

02 Focus

› This is the single most important thing from a distance.

› It does not have to be a button or mimic web standards.

› Should remain consistent everywhere.

› Should be noticeable to user.

Microsoft Confidential © 2006

02 Focus

› This is the single most important thing from a distance.

› It does not have to be a button or mimic web standards.

› Should remain consistent everywhere.

› Should be noticeable to user.

Microsoft Confidential © 2006

02 Focus

› This is the single most important thing from a distance.

› It does not have to be a button or mimic web standards.

› Should remain consistent everywhere.

› Should be noticeable to user.

Microsoft Confidential © 2006

02 Focus

› This is the single most important thing from a distance.

› It does not have to be a button or mimic web standards.

› Should remain consistent everywhere.

› Should be noticeable to user.

Microsoft Confidential © 2006

Microsoft Confidential © 2006

Microsoft Confidential © 2006

Microsoft Confidential © 2006

Microsoft Confidential © 2006

Microsoft Confidential © 2006

Show MCE Start menu

Microsoft Confidential © 2006

Tilting Gallery UI hereCombining text focus and tilting

Microsoft Confidential © 2006

03 Readability, Fonts and Text

› Avoid paragraphs / pages of text

› Serif fonts for large titles or graphic elements

› Font sizes smaller than 16pt are un-readable

› Create type hierarchy - few sizes

Microsoft Confidential © 2006

03 Readability, Fonts and Text

› Avoid paragraphs / pages of text

› Serif fonts for large titles or graphic elements

› Font sizes smaller than 16pt are un-readable

› Create type hierarchy - few sizes

Microsoft Confidential © 2006

03 Readability, Fonts and Text

› Avoid paragraphs / pages of text

› Serif fonts for large titles or graphic elements

› Font sizes smaller than 16pt are un-readable

› Create type hierarchy - few sizes

Microsoft Confidential © 2006

03 Readability, Fonts and Text

› Avoid paragraphs / pages of text

› Serif fonts for large titles or graphic elements

› Font sizes smaller than 16pt are un-readable

› Create type hierarchy - few sizes

Microsoft Confidential © 2006

03 Readability, Fonts and Text

› Avoid paragraphs / pages of text

› Serif fonts for large titles or graphic elements

› Font sizes smaller than 16pt are un-readable

› Create type hierarchy - few sizes

Microsoft Confidential © 2006

Microsoft Confidential © 2006

04 Keep navigation simple

› Distance viewing real estate is tight – split tasks onto multiple pages

› Up, Down, Left, Right navigation models work well

› Tabs or multiple scrolling sections don’t test well

Microsoft Confidential © 2006

04 Keep navigation simple

› Distance viewing real estate is tight – split tasks onto multiple pages

› Up, Down, Left, Right navigation models work well

› Tabs or multiple scrolling sections don’t test well

Microsoft Confidential © 2006

04 Keep navigation simple

› Distance viewing real estate is tight – split tasks onto multiple pages

› Up, Down, Left, Right navigation models work well

› Tabs or multiple scrolling sections don’t test well

Microsoft Confidential © 2006

04 Keep navigation simple

› Distance viewing real estate is tight – split tasks onto multiple pages

› Up, Down, Left, Right navigation models work well

› Tabs or multiple scrolling sections don’t test well

Microsoft Confidential © 2006

Microsoft Confidential © 2006

05 Graphics and Icons

› Simple ‘consumer device’ style UI

› Avoid fine detail – single pixel lines flicker on NTSC

› Icons and widgets generally need to be a little larger for distance viewing

Microsoft Confidential © 2006

05 Graphics and Icons

› Simple ‘consumer device’ style UI

› Avoid fine detail – single pixel lines flicker on NTSC

› Icons and widgets generally need to be a little larger for distance viewing

Microsoft Confidential © 2006

05 Graphics and Icons

› Simple ‘consumer device’ style UI

› Avoid fine detail – single pixel lines flicker on NTSC

› Icons and widgets generally need to be a little larger for distance viewing

Microsoft Confidential © 2006

05 Graphics and Icons

› Simple ‘consumer device’ style UI

› Avoid fine detail – single pixel lines flicker on NTSC

› Icons and widgets generally need to be a little larger for distance viewing

Microsoft Confidential © 2006

Microsoft Confidential © 2006

Thank you

Microsoft Confidential © 2006

Q&A | Next StepsDesigning for the Ten-Foot User Interface.

Blogshttp://blog.retrosight.com

http://www.thegreenbutton.com

Microsoft Confidential © 2006

© 2006 Microsoft Corporation. All rights reserved.This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.