+ Follow

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

by goodfriday

2,877 views

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" ...

Accessibility

View text version

Upload Details

Uploaded via SlideShare as Microsoft PowerPoint

Usage Rights

File a copyright complaint

2 Embeds 17

http://www.slideshare.net	16
http://static.slidesharecdn.com	1

Statistics

Likes: 7
Downloads: 129
Comments: 0
Embed Views: 17
Views on SlideShare: 2,860
Total Views: 2,877

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

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

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 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’ 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 , readability, color , remote control navigation , resolution, flicker , contrast, layout , graphics and content all impact the usability and design of your application or service .

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 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.

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 standards. › Should remain consistent everywhere. › Should be noticeable to user.

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 › Font sizes smaller than 16pt are un-readable › Create type hierarchy - few sizes

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

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

Thank you

Q&A | Next Steps Designing for the Ten-Foot User Interface. Blogs http://blog.retrosight.com http://www.thegreenbutton.com