Widescreen Design: Usability Guidelines
Here are some tips for widescreen design with usability in mind:
1. Don’t try to use all the space onscreen. The fact that a large widescreen monitor offers a lot of space doesn’t mean you have to use all of it. Research shows that even when users have enormous monitors, they don’t use all the space. Users don’t maximize their browsers. Rather, they have two windows opened one next to the other but the size of each window is generally less than 1,000-1,200 pixels. The bad news is that you can never know how many pixels exactly the browser size will be but common sense tells that the browser size will hardly be less than the screen of a 1024x768 monitor.
-
Use more (or mainly) fixed widths. Due to the unpredictability of the size of the browser window your users will have when browsing your site, it is recommendable to use fixed widths than to try to scale to 100%. Fixed widths might be considered as poor coding but now they are becoming a reality – you simply have no other choice, especially with complex designs.
-
Design for 1024x768 minimum resolution. It is still save to design for at least 1024x768 resolution. This resolution is still popular and for the next couple of years 1024x768 screens won’t be history. Also, when you have in mind how many people access your site from devices with lower resolutions, 1024x768 is not that low. You can go over 1024x768 but don’t make your designs very wide because even if the screen is large enough, packing so much stuff on it is not a usability best practice because when the screen is cluttered, it is harder to spot the essential items, not to mention all the minor details.
-
Center your layout. One of the workarounds to the unpredictable browser size of your users is to center the layout. This way even if there is a lot of free space, it will be on the left and on the right, not only on the right (for left-aligned designs). Additionally, the important stuff will always be in the center – i.e. right in front of the eyes of your visitors.
5. Keep text columns narrow. As I already mentioned, even if the width of the screen were endless, packing lots of stuff is not a usability guideline. This is especially true for text. Broad text columns (i.e. 80 characters and more) are more difficult to read even when printed, not to mention onscreen. That is why even if you have the space, don’t make a paragraph, which normally fits on 3-4 lines, become a line and a half at 8 points font size.
6. Use larger fonts. All equal, larger fonts also contribute to better readability. Of course, you can’t use 20 points for the regular text but 12 or 14 points is OK. Larger fonts allow to keep columns narrow.
7. Leave more space between the page elements. Another usability guideline in the direction of the better use of space is to leave more space between the elements. Of course, this applies to all screen resolutions, not only to widescreens. However, widescreens frequently have a lower dot pitch, which means that objects look smaller on them than on an old monitor with a higher dot pitch and when you leave just few pixels between the elements, it is more or less as if there is no spacing at all.
There are many other recommendations to be added, if you want to make your designs widescreen-friendly but even these basic usability guidelines will make the experience of your widescreen users more enjoyable.
This post is part of the series: Widescreen Monitors and Usability
The mass adoption of widescreens is great but as far as usability is concerned, there are many things web designers should reconsider, if they want their sites to look professional.
