際際滷

際際滷Share a Scribd company logo

User Experience Design For Widescreen Viewing

Download as PPT, PDF
J
julieeichstaedt

Research objectives: trends of wide-screen monitor usage, best practice user experience recommendations and design considerations for software and web sites that may display on widescreens.

1 of 28
Downloaded 17 times
Julie Eichstaedt User Experience, Visual Design and Research April 2010
油
油
Widescreen describes a television or monitor that is wider horizontally in relation to its vertical height The aspect ratio describes the shape of the screen The industry standard aspect ratio for a wide-screen monitor is 16:9
油
Visual perception The aspect ratio of our eyes is 2:1 which is closer to 16:9 than 4:3.
Optimal viewing experience Movies and sporting events are ideally suited for widescreen viewing. Movies have been filmed in widescreen for over 50 years Sporting events are better viewed on wide-screen displays because fields of play are predominantly wide
Consumer adoption of HDTV High definition television provides a great viewing experience. Crisp, lifelike details Brilliant color Optimized viewing for movies and immersive programming
Oversupply = Greater Affordability In 2008, economic conditions created less demand which created oversupply in 2009 1 Smaller, traditional 4:3 monitors are difficult to find A single wide-screen monitor can replace dual monitor setups (saves $) New laptop buyers are widescreen users Widescreens often top best selling products list on manufacturers websites 1 iSupply Research, February 2009
Widescreens show more screen real estate See more, do more multitask several applications at once Simplify navigation fewer clicks, less scrolling increases efficiency and reduces ergonomic stress Streamlines decision processes seeing more details on screen drives decision making Environmental benefits the more you see, less likely to print Microsoft Windows 速 7 Snap and other features
Increased Screen Space = Increased Productivity 2 A 2008 NEC Displays/University of Utah research study found: 2 The University if Utah, Monitor Size and Aspect Ratio Productivity Study, March 2008 For text-based tasks, users were 52% more productive than those who used 18-inch traditional 4:3 monitors For spreadsheet-based tasks, users were 26% more productive Productivity gains max out and decline once the screen becomes too large
NEC Displays / University of Utah productivity study 2 The University if Utah, Monitor Size and Aspect Ratio Productivity Study, March 2008
油
8 of 10 resolutions are higher than 1024x768 World Wide Web Consortium (w3C) tallies screen resolutions based on the last 15,000 page views to each website tracked by W3Counter. W3Counters sample currently includes 28,814 websites. October 2009 March 2010
6-month trend 1024 x 768 resolution on a steady decline. Higher resolutions now more common. Percent
Quick Study 6 site comparison 3 resolution settings 24-inch wide monitor
Images and text are large Must scroll horizontally to see entire page width
Entire page width displays without horizontal scrolling Most web sites are intended to have vertical scrolling
Content, especially text, is smaller Page layouts have a centered or left alignment with padding
Takes advantage of the wide-screen and higher resolution combination Four columns of product display as compared to three columns of product (on the lower resolution settings) 1280 x 1024 displays 4 columns of product 1024 x 768 displays 3 columns of product
Centered page layout is most common 89% of web sites use layouts that are horizontally centered 3 Remaining screen space padding on both sides 3 Smashing Magazine, September 2009
Left-aligned page layout 11% of web sites use layouts that are left-aligned 4 Remaining screen space padding on right side 4 Smashing Magazine, September 2009
Monitors rotate Like the iPhone and iPad, some monitors rotate from a landscape to a portrait orientation. 5 Layouts are always right side up. 5 www.Dell.com, October 2009 Dell 2210 flat panel monitor
油
Best practice recommendations, step 1 Research how the target audience will use the software or web site Consider the intrinsic qualities of the content Consider the user goals of the software or web site Consider user expectations of the experience
Best practice recommendations, step 2 Optimize the design for: the target audiences task performance the target audiences most common screen resolution but plan ahead for the next most common screen resolution Use a different style sheet for different resolutions Use centered aligned layouts with padding Know browser safe areas
Best practice recommendations, step 3 Conduct usability tests with your target audience on various monitor sizes of different resolutions and aspect ratios Ensure the design provides a satisfying user experience and extends the brand identity across all system configurations
Julie Eichstaedt User Experience, Visual Design and Research [email_address]

More Related Content

User Experience Design For Widescreen Viewing

  • 1. Julie Eichstaedt User Experience, Visual Design and Research April 2010
  • 2. 油
  • 3. 油
  • 4. Widescreen describes a television or monitor that is wider horizontally in relation to its vertical height The aspect ratio describes the shape of the screen The industry standard aspect ratio for a wide-screen monitor is 16:9
  • 5. 油
  • 6. Visual perception The aspect ratio of our eyes is 2:1 which is closer to 16:9 than 4:3.
  • 7. Optimal viewing experience Movies and sporting events are ideally suited for widescreen viewing. Movies have been filmed in widescreen for over 50 years Sporting events are better viewed on wide-screen displays because fields of play are predominantly wide
  • 8. Consumer adoption of HDTV High definition television provides a great viewing experience. Crisp, lifelike details Brilliant color Optimized viewing for movies and immersive programming
  • 9. Oversupply = Greater Affordability In 2008, economic conditions created less demand which created oversupply in 2009 1 Smaller, traditional 4:3 monitors are difficult to find A single wide-screen monitor can replace dual monitor setups (saves $) New laptop buyers are widescreen users Widescreens often top best selling products list on manufacturers websites 1 iSupply Research, February 2009
  • 10. Widescreens show more screen real estate See more, do more multitask several applications at once Simplify navigation fewer clicks, less scrolling increases efficiency and reduces ergonomic stress Streamlines decision processes seeing more details on screen drives decision making Environmental benefits the more you see, less likely to print Microsoft Windows 速 7 Snap and other features
  • 11. Increased Screen Space = Increased Productivity 2 A 2008 NEC Displays/University of Utah research study found: 2 The University if Utah, Monitor Size and Aspect Ratio Productivity Study, March 2008 For text-based tasks, users were 52% more productive than those who used 18-inch traditional 4:3 monitors For spreadsheet-based tasks, users were 26% more productive Productivity gains max out and decline once the screen becomes too large
  • 12. NEC Displays / University of Utah productivity study 2 The University if Utah, Monitor Size and Aspect Ratio Productivity Study, March 2008
  • 13. 油
  • 14. 8 of 10 resolutions are higher than 1024x768 World Wide Web Consortium (w3C) tallies screen resolutions based on the last 15,000 page views to each website tracked by W3Counter. W3Counters sample currently includes 28,814 websites. October 2009 March 2010
  • 15. 6-month trend 1024 x 768 resolution on a steady decline. Higher resolutions now more common. Percent
  • 16. Quick Study 6 site comparison 3 resolution settings 24-inch wide monitor
  • 17. Images and text are large Must scroll horizontally to see entire page width
  • 18. Entire page width displays without horizontal scrolling Most web sites are intended to have vertical scrolling
  • 19. Content, especially text, is smaller Page layouts have a centered or left alignment with padding
  • 20. Takes advantage of the wide-screen and higher resolution combination Four columns of product display as compared to three columns of product (on the lower resolution settings) 1280 x 1024 displays 4 columns of product 1024 x 768 displays 3 columns of product
  • 21. Centered page layout is most common 89% of web sites use layouts that are horizontally centered 3 Remaining screen space padding on both sides 3 Smashing Magazine, September 2009
  • 22. Left-aligned page layout 11% of web sites use layouts that are left-aligned 4 Remaining screen space padding on right side 4 Smashing Magazine, September 2009
  • 23. Monitors rotate Like the iPhone and iPad, some monitors rotate from a landscape to a portrait orientation. 5 Layouts are always right side up. 5 www.Dell.com, October 2009 Dell 2210 flat panel monitor
  • 24. 油
  • 25. Best practice recommendations, step 1 Research how the target audience will use the software or web site Consider the intrinsic qualities of the content Consider the user goals of the software or web site Consider user expectations of the experience
  • 26. Best practice recommendations, step 2 Optimize the design for: the target audiences task performance the target audiences most common screen resolution but plan ahead for the next most common screen resolution Use a different style sheet for different resolutions Use centered aligned layouts with padding Know browser safe areas
  • 27. Best practice recommendations, step 3 Conduct usability tests with your target audience on various monitor sizes of different resolutions and aspect ratios Ensure the design provides a satisfying user experience and extends the brand identity across all system configurations
  • 28. Julie Eichstaedt User Experience, Visual Design and Research [email_address]

Editor's Notes

  1. 04/23/10 19:09 息 2007 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.