Embed Size (px)
DESCRIPTION
Delivering compelling content to television sets around the Digital Home presents new design challenges for consumer content. Join us to learn more about best practices for creating new "ten foot" user interfaces for experiences on Windows Media Center and on Xbox 360.
Citation preview
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.
