The Digital Home  Designing for the Ten-Foot User Interface. Speakers Brian Kralyevich  . Windows Media Center 10’ Design ...
Overview 01 Remote Control Experience 02 Goals for distance UI 03 Design principles
Designing for a Remote Control Experience Users interact with most PC applications using  a keyboard and mouse. 2’ design ...
Designing for a Remote Control Experience Users interact with most PC applications using  a keyboard and mouse. 2’ design ...
Designing for a Remote Control Experience Users interact with most PC applications using  a keyboard and mouse. 2’ design ...
Designing for a Remote Control Experience Users interact with most PC applications using  a keyboard and mouse. 2’ design ...
Designing for a Remote Control Experience Users interact with most PC applications using  a keyboard and mouse. 2’ design ...
Designing for a Remote Control Experience Users interact with most PC applications using  a keyboard and mouse. 2’ design ...
Designing for a Remote Control Experience Users interact with most PC applications using  a keyboard and mouse. 2’ design ...
 
 
 
10’ Design 01 Overview 02 Goals for distance UI 03 Design principles
Goals for creating great distance UI ›  Clean ›  Simple ›  Compelling ›  Consistent ›  Direct Font size,  legibility , rea...
 
 
10’ Design 01 Overview 02 Goals for distance UI 03 General Design principles
01 General Design Principles ›  Most conventional web design principles fail when viewed from a distance. ›  Design for Me...
01 General Design Principles ›  Most conventional web design principles fail when viewed from a distance. ›  Design for Me...
01 General Design Principles ›  Most conventional web design principles fail when viewed from a distance. ›  Design for Me...
01 General Design Principles ›  Most conventional web design principles fail when viewed from a distance. ›  Design for Me...
01 General Design Principles ›  Most conventional web design principles fail when viewed from a distance. ›  Design for Me...
25’  100’  200’  design
25’  100’  200’  design
25’  100’  200’  design
25’  100’  200’  design
25’  100’  200’  design
25’  100’  200’  design
5000’  design
25’  100’  200’  design
 
 
02 Focus ›  This is the single most important thing  from a distance. ›  It does not have to be a button or mimic web stan...
02 Focus ›  This is the single most important thing  from a distance. ›  It does not have to be a button or mimic web stan...
02 Focus ›  This is the single most important thing  from a distance. ›  It does not have to be a button or mimic web stan...
02 Focus ›  This is the single most important thing  from a distance. ›  It does not have to be a button or mimic web stan...
02 Focus ›  This is the single most important thing  from a distance. ›  It does not have to be a button or mimic web stan...
 
 
 
 
 
Show MCE Start menu
 
Tilting Gallery UI here Combining text focus and tilting
03 Readability, Fonts and Text ›  Avoid paragraphs / pages of text  ›  Serif fonts for large titles or graphic elements › ...
03 Readability, Fonts and Text ›  Avoid paragraphs / pages of text   ›  Serif fonts for large titles or graphic elements ›...
03 Readability, Fonts and Text ›  Avoid paragraphs / pages of text  ›  Serif fonts for large titles or graphic elements › ...
03 Readability, Fonts and Text ›  Avoid paragraphs / pages of text  ›  Serif fonts for large titles or graphic elements › ...
03 Readability, Fonts and Text ›  Avoid paragraphs / pages of text  ›  Serif fonts for large titles or graphic elements › ...
 
04 Keep navigation simple ›  Distance viewing real estate is tight – split  tasks onto multiple pages ›  Up, Down, Left, R...
04 Keep navigation simple ›  Distance viewing real estate is tight – split  tasks onto multiple pages ›  Up, Down, Left, R...
04 Keep navigation simple ›  Distance viewing real estate is tight – split  tasks onto multiple pages ›  Up, Down, Left, R...
04 Keep navigation simple ›  Distance viewing real estate is tight – split  tasks onto multiple pages ›  Up, Down, Left, R...
 
05 Graphics and Icons ›  Simple ‘consumer device’ style UI ›  Avoid fine detail – single pixel lines flicker  on NTSC  ›  ...
05 Graphics and Icons ›  Simple ‘consumer device’ style UI ›  Avoid fine detail – single pixel lines flicker  on NTSC  ›  ...
05 Graphics and Icons ›  Simple ‘consumer device’ style UI ›  Avoid fine detail – single pixel lines flicker  on NTSC  ›  ...
05 Graphics and Icons ›  Simple ‘consumer device’ style UI ›  Avoid fine detail – single pixel lines flicker  on NTSC   › ...
 
Thank you
Q&A | Next Steps Designing for the Ten-Foot User Interface. Blogs http://blog.retrosight.com http://www.thegreenbutton.com
© 2006 Microsoft Corporation. All rights reserved. This presentation is for informational purposes only. Microsoft makes n...
Upcoming SlideShare
Loading in …5
×

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

2,383 views

Published on

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.

0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,383
On SlideShare
0
From Embeds
0
Number of Embeds
19
Actions
Shares
0
Downloads
147
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide

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

  1. 1. The Digital Home Designing for the Ten-Foot User Interface. Speakers Brian Kralyevich . Windows Media Center 10’ Design Context and Windows Vista MCE Richard Cardran . Zetools Design Process, 10’ Design Challenges and Principles Kate Wojogbe . Schematic 10’ Design principles applied and work examples BTB029
  2. 2. Overview 01 Remote Control Experience 02 Goals for distance UI 03 Design principles
  3. 3. 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.
  4. 4. 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.
  5. 5. 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.
  6. 6. 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.
  7. 7. 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.
  8. 8. 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.
  9. 9. 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.
  10. 13. 10’ Design 01 Overview 02 Goals for distance UI 03 Design principles
  11. 14. 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 .
  12. 17. 10’ Design 01 Overview 02 Goals for distance UI 03 General Design principles
  13. 18. 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.
  14. 19. 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.
  15. 20. 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.
  16. 21. 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.
  17. 22. 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.
  18. 23. 25’ 100’ 200’ design
  19. 24. 25’ 100’ 200’ design
  20. 25. 25’ 100’ 200’ design
  21. 26. 25’ 100’ 200’ design
  22. 27. 25’ 100’ 200’ design
  23. 28. 25’ 100’ 200’ design
  24. 29. 5000’ design
  25. 30. 25’ 100’ 200’ design
  26. 33. 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.
  27. 34. 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.
  28. 35. 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.
  29. 36. 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.
  30. 37. 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.
  31. 43. Show MCE Start menu
  32. 45. Tilting Gallery UI here Combining text focus and tilting
  33. 46. 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
  34. 47. 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
  35. 48. 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
  36. 49. 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
  37. 50. 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
  38. 52. 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
  39. 53. 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
  40. 54. 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
  41. 55. 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
  42. 57. 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
  43. 58. 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
  44. 59. 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
  45. 60. 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
  46. 62. Thank you
  47. 63. Q&A | Next Steps Designing for the Ten-Foot User Interface. Blogs http://blog.retrosight.com http://www.thegreenbutton.com
  48. 64. © 2006 Microsoft Corporation. All rights reserved. This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.

×