Let's Talk Page Fold

What is the page fold?

Page fold is a term carried into the web from the print newspaper industry. It is the area of a web page appearing on a user's screen before any scrolling takes place. Because the most common screen resolution is 1024 x 768, content above the 700 pixel line is usually considered to be "safe".


If you question whether or not your website's safe area falls into the 700 pixels category simply check your analytics data.


Check to see how your website appears at various screen resolutions quickly and easily.

Is the page fold important?

My short answer is yes, the page fold is still a force to be reckoned with.

"Web users spend 80% of their time looking at information above the page fold. Although users do scroll, they allocate only 20% of their attention below the fold."
--Jacob Nielsen's Alertbox
March 22, 2010: Scrolling and Attention

The long answer is there are varying degrees of reckoning. When designing, you first have to determine how important the page fold is to your homepage by answering these questions:

• Who is your target audience?
• What are they coming to your site to do?
  

• a task?
• casually browse?
• both?

At one end of the spectrum where the page fold is very important you have a bank website. Account holders arrive at the site to quickly check account balances, transfer funds, etc. That target audience wants to complete their tasks quickly and move on.

At the other end of the spectrum you have a bargain retail website. At this site most of the users come to browse sale items and click on any that are of particular interest to them. The most enticing deals should still be at the top but, that audience is far more likely to scroll down the page in search of deals.

If you have trouble determining how important the page fold is to your audience, Google's In-Page Analytics (beta) now provides you with a site overlay which provides a percentage of how many clicks below the fold your page is currently receiving.

The page fold is important to your site - now what?

Do not despair if you discover that the page fold is indeed important to your website's homepage. It does not mean that you are destined for an overly crammed homepage design. You can still keep your design clean and your navigation intuitive. In order to ensure a clean and intuitive design we recommend:

• Structuring your main navigation simply and in the way your audience will approach you, not the way your company is structured. Quickly answer the user's question - "Where do I begin?"
  
• Reviewing your website's analytics to get a feel for what content/tasks are really important to your audience and therefore might require a homepage callout or quick link.
  
• Above all else, make sure that within mere seconds of arriving at your homepage your audience is keenly aware of why they should do business with you.
  

Keep in mind the "3-click rule" is a fallacy. Users are comfortable clicking numerous times so long as they are secure in the knowledge they are on the correct path.

The page fold is not terribly important to your site - now what?

If your market research points to evidence of the page fold not being terribly important to your site make sure you are well versed in exactly how to go about designing for below the fold content.

• critical content always goes above the fold
• avoid horizontal design elements near the 700 pixel line
  
• must encourage scrolling with content that is visible just above the fold

Here is an example where a horizontal design element was used near the 700 pixel line. This is the site at 1024 x 768. Would you think there is some great content below the grass?

There's actually a pretty cool contest for consumers being advertised down there...


On the flip side sites such as Entertainment Weekly do a great job of teasing the site visitor. Who wouldn't want to know what Reader Favorites await them below?


~Steph

Heart Mountain Interpretive Center, Wyoming

"What does it mean?"
"We haven’t done anything wrong."
"Why are they treating us like criminals?"
“But I am an American citizen.”

Endless questions of the Japanese people living in the States raced on and on. Why were they being imprisoned at Heart Mountain? How did this happen?

With the attack on Pearl Harbor and World War II in full swing, the resentment and fear of all Japanese people brought about the apparent need to corral “these people” in one centralized place, which would be called Heart Mountain. This self-contained area in Wyoming was waiting for the thousands of Japanese people that were ripped away from their homes, their jobs, and their lives. They were then forced to relocate and start completely over, with nothing more than what they could carry on their backs. They would end up surviving by working together as a community, a character already infused in them by their Japanese heritage.

Decades later a museum, the Heart Mountain Interpretive Learning Center, has been built to honor these people and their experience, to help us feel what they felt and be enveloped by their stories. Applied Art & Technology had the privilege to be a part of this homage, by providing the audio-visual components for the Heart Mountain Interpretive Learning Center, whose construction was finished in late August, 2011. The AV interactive exhibits include themes such as Women and Mothers, Draft Resisters, Forced Removal, Life at Camp, and The Japanese in America. A visitor may push a button to view the clips within these interactive exhibits. When a button is pushed, the monitor's screen comes alive with various scenes from Heart Mountain such as a haircut and shave in a local barbershop, kids sledding down a hill, and workers in the field proudly showing off their crops. Interviews from Heart Mountain internees are also included in the exhibits. Their stories shed light on life at Heart Mountain, the prejudice they experienced for being Japanese, and the shock of having enjoyed freedom as an American citizen to suddenly becoming a prisoner under a guard's constant watch.

Another interactive exhibit allows the visitor to use button controls to fly or walk around a 3D-rendered version of the camp, giving one a more clear idea of the massive scale and feel of the camp filled with countless rows of barracks. This creative work was done, pro bono, by the Academy of Art University Schools of Game Design, Visual Effects, and Motion Pictures & Television, which was headed up by Vanessa Yuille.

Although what happened at Heart Mountain is very somber, the Heart Mountain Interpretive Learning Center duly honors the resilience of the Japanese people, and gives us a window into their experience and vivid memories of a place that will always be embedded in their minds.




~Rachel

What's the difference? Single, Dual and Multi Touch Monitors

This blog is an overview about the differences, best uses and relative costs of the various touch monitors.

Single Touch Monitor

A single touch monitor is an electronic visual display that can detect the presence and location of a single touch within the display area. Touch monitors can also sense other passive objects, such as a stylus. In essence, your fingertip or the stylus becomes the mouse click or flick.

Best uses: menus, page turning
Hardware and development cost: $


Dual Touch Monitor

Commonly claimed to be multi touch, dual touch refers to any touch monitor that can recognize two touches and perform additional functions to manipulate the interface. The iPhone is famous for introducing this interface to the cell phone world by using it to allow pinching and stretching gestures on the screen to control zooming.

Best uses: image zoom, 3D model manipulation
Hardware and development cost: $$


Multi Touch Monitor

Multi touch is a method of input that allows three or more touches (typically 16, 32 or 60 points) on a single interface at one time by two or more people. This is the most attention-grabbing and cutting-edge technology available.

Best uses: trade show booth, learning/education
Hardware and development cost: $$$$


This is one of the coolest examples of multi touch we have seen. This video is from Infocomm 2011: Christie MicroTiles Graffiti Wall powered by Baanto.



Feel free to also view Applied Art's interactive portfolio.

~Steph