Julie EichstaedtUser Experience, Visual Design and ResearchApril 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 perceptionThe aspect ratio of our

eyes is 2:1 which is closer to 16:9 than 4:3.

Optimal viewing experienceMovies 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 HDTVHigh 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 20091

• 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 manufacturer’s 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 Productivity2

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 1024x768World Wide Web Consortium (w3C) tallies screen resolutions based on the last 15,000 page views to each website tracked by W3Counter. W3Counter’s sample currently includes 28,814 websites.

October 2009 March 2010

6-month trend1024 x 768 resolution on a steady decline. Higher resolutions now more common.

Perc

ent

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 centered3

• 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-aligned4

• Remaining screen space padding on right side

4 Smashing Magazine, September 2009

Monitors rotateLike 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 audience’s task performance• the target audience’s 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 EichstaedtUser Experience, Visual Design and Researchjulieeichstaedt@gmail.com