The Digital Home: Designing for the Ten-Foot User Interface
-
Upload
goodfriday -
Category
Documents
-
view
112 -
download
1
description
Transcript of The Digital Home: Designing for the Ten-Foot User Interface
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.