Yu Centrik: Safe Zone in Web Browsers

Safe Zone in Web Browsers

How can we ensure that primary content is visible when a page is first loaded? This case study amalgamates results from numerous interna6onal usability tests to define a safe zone which accommodates users’ web browsers.

Custom applications, toolbars and browser configuration can all have an effect on the available real estate for web sites to get their message across.

Context: Mandate:

As a usability consulting firm, we perform remote usability testing which grants us first hand experience with international users’ browsing environments.

The analysis of browser configuration was not the initial objective of our usability studies, as the remote tests were designed to evaluate specific websites with specific users, in various locations.

Remote usability testing conducted from July 2007 to June 2008 with 51 participants located in Canada, France, India, South Africa and USA, revealed that users had diverse configurations which directly impacted the “safe zone” of their browsers, compromising the visible portion of the web page. These tests were conducted on three different types of websites: a tourist information site, a sport clothing retail site and a web‐based human resources management application.

Question: What is a safe zone?

The safe zone for a web page is the part of a page that is visible in the browser when the page is first loaded. It is also known as the “above‐the‐fold” or “before the scroll”. The safe zone can be directly affected by two main factors:

• Screen resolution
• Browser chrome (6title bar, status bar, scroll bars, toolbars, tabs)

Results: Resolution

Based on browser screenshots from a sample of 51 participants, 8 different resolutions were identified:

• 60% had a 1024 × 768 resolution
• 25% opt for a 1280 resolution (1280 × 1024, 1280 × 800, 1280 x 768)
• 20% had a widescreen resolution 

While 1024 x 768 pixels remains the popular choice, we note that screen resolutions are increasing and varying.

Number of toolbars

Most users had 4 toolbars.

For the purpose of our analysis, toolbars include: the menu bar, address bar, navigation bar, specialized toolbars (Google bar, Yahoo bar, etc.) and tabs (for tab navigation).

Participants all used Firefox or Internet Explorer with at least 2 toolbars by default, the Menu bar (File, Edit, View, etc) and the Address bar.

In the case of IE 7, some users will actually have a third level by default since the initial page of the browser is tabbed.

What does it mean for designers?

The safe zone is key in the success of a site.

Despite the great design of a website, brilliant navigation, innovative concepts, if a user cannot see important elements like a navigation bar because it is located below the visible portion on his screen, the entire user experience will suffer.

Primary and crucial content should be available within the safe zone (first‐fold of the page). The main navigation elements should not be hidden. Toolbars and customized browsers represent a new and important subtraction from resolution.

Designers should continue to optimize their design for 1024 × 768 while remembering to subtract application zones: in short, design with the safe zone in mind.

Recommended safe zone size

• Set safe zone width to 960 pixels. The width should not go above 1003 pixels.
• Set safe zone height to 540 pixels. The height is affected by the number of toolbars.

Considering a resolution of 1024 x 768 and the numbers of toolbars as 4, the height should remain at least below 570 pixels.

Conclusion: Be flexible.

In the end the website should be flexible, so that users with any resolution or any number of toolbars will be able to navigate and not be lost.