To the front pageThe Interaction Designer's Coffee Break - Weekly postings and quarterly articles about interaction design  
  To the front pageSign inTo the frontpageSearch in GUUUI postingsAbout GUUUI  




Stop worrying about the fold

According to Milissa Tarquini, the myth that users don't want to scroll is doing everyone a great disservice, most of all the users. Cramming as much information as possible above the fold of pages complicates the information design.

In her article, Milissa shows evidence from studies and examples from AOL that disproves the myth that users don't scroll. Her recommendation is to stop worrying about the fold and open op page designs to give users some visual breathing room.


  • Blasting the Myth of the Fold Open link in new window

Henrik Olsen - July 31, 2007

Permanent link Comments (0)



Do we read web pages in an F-shaped pattern?

SURL has done an eyetracking study to investigate whether users follow the F-shaped pattern suggested by Jakob Nielsen when reading and scanning web pages.

Findings from the study:

- When reading or scanning text, users appear to follow by the F-pattern
- When scanning a page with a grid of product pictures, the F-pattern doesn't seem to hold true
- On the product picture pages, the area above the fold received significant more attention than the area below

The authors suggest that we should structure web pages so that important content falls in the F-pattern and that important or featured products on picture pages should be positioned above the fold.


  • Eye Gaze Patterns while Searching vs. Browsing a Website Open link in new window

Henrik Olsen - January 30, 2007

Permanent link Comments (1)

See also: Research (130)  Eye-tracking (14) 



Research on scroll behaviour

ClickTale has researched how people use scroll on websites. Their results show that:

- 76% of the pages were scrolled to some extend
- 22% of the pages were scrolled all the way to the bottom
- The length of the pages had no significant influence on whether people scrolled to the bottom or not
- The location of the page fold (the bottom border of a web page visible in the browser at load time) is located about 430, 600 and 860 pixels from the top of the page depending on peoples screen size
- The most common location of the fold is around 600 to 610 pixels from the top, but only accounts for about 10% of the folds.


  • Unfolding the Fold Open link in new window

Henrik Olsen - December 29, 2006 - via Usability in the News

Permanent link Comments (4)

See also: Research (130) 



Visualizations of clicks on web pages

Crazy Egg is a web statistics tool that can track where people click on a web page and visualize the clicks in different ways. Especially their heatmaps are enlightening. They give you a quick view of what people click on and what is popular on a page.

Besides seeing what is popular, you can use the tool for testing different layouts and compare the results. The click visualizations can also reveal that people may click on areas of your pages that are non-clickable (but probably should be clickable), such as headlines and images.

You can sign up for limited free plan at Creazy Egg.


  • The statistics tool Crazy Egg Open link in new window

Henrik Olsen - November 24, 2006 - via 37signals

Permanent link Comments (3)

See also: Tools (106)  Web traffic analysis (12) 



Use transparent messages instead of monolog dialogs

Aza Raskin condemn the use of monolog boxes - dialog boxes where there's nothing one can do but click "OK". Instead, she suggests the use of transparent messages:

"Transparent messages are the brainchild of Jef Raskin. It's simply a large and translucent message that's displayed over the contents of your screen. They fade away when the user takes any action (like typing or moving the mouse). In practice, the message is both noticeable yet unobtrusive. And because the message is transparent, you can see what's beneath it. It's just humane."


  • Monolog Boxes and Transparent Messages Open link in new window

Henrik Olsen - September 14, 2006 - via Usernomics

Permanent link Comments (0)

See also: Tips and guidelines (95)  Error handling (7) 



Interfaces for navigating large data tables

"After forms, data tables are likely the next most ubiquitous interface element designers create when constructing Web applications. Users often need to add, edit, delete, search for, and browse through lists of people, places, or things within Web applications. As a result, the design of tables plays a crucial role in such an application's overall usefulness and usability."

Luke Wroblewski shows a number of interface design solutions that enable users to find their way through large data sets.


  • Refining Data Tables Open link in new window

Henrik Olsen - August 29, 2006

Permanent link Comments (0)

See also: Tips and guidelines (95) 



How to encourage users to scroll long pages

Studies by UIE show that users have nothing against scrolling long web pages. But pages that appear as if there is nothing below the fold makes people think that there isn't anything to scroll for.

According to Jared Spool, this problem can be solved by cutting of pages at the bottom of the browser window, so that only the top part of the content is visible. This communicates that there is more to see and makes it more likely that people will scroll for the rest of the content.


  • Utilizing the Cut-off Look to Encourage Users To Scroll Open link in new window

Henrik Olsen - August 14, 2006 - via Column Two

Permanent link Comments (3)

See also: Home pages (9) 



Use liquid web page layouts and optimize for 1024x768

According to Jakob Nielsen, web pages should use a liquid layout that stretches to the user's current window size. He recommends that we optimize page layouts for 1024x768 pixels, which is currently the most widely used screen size, but that we make sure it works for any resolution from 800x600 to 1280 x1024.

Pages should also work at smaller and bigger sizes. But a less-than-great design is an acceptable compromise. Fewer than half a percent have screen resolutions of 640x480 and users with large screens rarely maximize their browser window.

A liquid design should scale all the way down to the tiny screens found on mobile devices. But mobile services should be designed specifically for use on small screens.


  • Screen Resolution and Page Layout Open link in new window

Henrik Olsen - August 07, 2006

Permanent link Comments (2)

See also: Tips and guidelines (95) 



Designing pages listing links to content

According to Jared Spool, gallery pages - pages listing links to content pages - are the hardest working pages on a web site. They separate those users who find the content they are looking for from the users who don't.

Studies by UIE show that when gallery pages don't contain the information that users will need to make their choice, they have to resort to "pogosticking" - jumping back and forth between the gallery and the content pages hoping they'll eventually hit the content they desire.

UIE also noticed that users expect the most important items to always be listed first in the gallery. If the first few items aren't of interest, they often assume the rest will be even less interesting.


  • Galleries: The Hardest Working Page on Your Site Open link in new window

Henrik Olsen - December 01, 2005

Permanent link Comments (0)

See also: Research (130)  Persuasive design (23)  Sections (8)  Navigation (63) 



Eyetracking as a supplement to traditional usability tests

SURL have studied how eyetracking can be used to supplement traditional usability tests. They found that eyetracking data can be used to better understand how users search the interface for a target and what areas of a page are eye-catching, informative, frequently ignored and distracting.

The study is based on a test of three toy e-commerce sites, which is described in detail in the article.


  • The article Hotspots and Hyperlinks: Using Eye-tracking to Supplement Usability Testing Open link in new window

Henrik Olsen - August 02, 2005

Permanent link Comments (0)

See also: Research (130)  Eye-tracking (14)  Usability testing (71) 


Browse GUUUI postings

Methods and the design process

Prototyping and wireframing (120)  Usability testing (71)  Cost-justification and ROI (28)  User research (24)  Personas (19)  The design process (24)  Eye-tracking (14)  Card sorting (13)  Web traffic analysis (12)  Expert reviews (11)  Implementing user-centred design (9)  Site and flow diagramming (6)  Envisionments (4)  Use Cases (3) 

Design elements

Navigation (63)  Web page design (41)  Search (27)  Text (24)  Forms (30)  Links (19)  Guidelines and Standards (15)  Site design (14)  Ads (9)  Design patterns (8)  Sections (8)  Shopping Carts (9)  Error handling (7)  Home pages (9)  Help (3)  E-mails (3)  Sitemaps (2)  Personalization (1)  Print-friendly (1)  Landing pages (5) 

General aspects

E-commerce (28)  Persuasive design (23)  Visual design (20)  Information architecture (15)  Accessibility (13)  Search engines (7)  Credibility, Trust and Privacy (6)  Emotional design (10)  Simplicity vs. capability (7)  Web applications (6)  Intranets (3) 


Flash (6)  Download time (5)  Javascript (3)  URLs (3)  Browsers (3)  Web standards (2) 


Bad designs (20)  Cartoons (14)  Fun music and videos (13)  Funny tools and games (12)  Misc humor (8)  Fun with Jakob Nielsen (9)  Designs with humor (3)  Fun posters (5)  Funny 404 pages (2) 

Resource types

Research (130)  Tips and guidelines (95)  Tools (106)  Books (47)  Audio and video (48)  Interviews (30)  Cases and Examples (28)  Talks and presentations (18)  GUUUI articles (11)  Primers (14)  Online books (5)  Posters (5)  Glossaries (3)  People and organisations (3) 

Information sources

Blogs (12)  Websites (11)  Discussion lists (4)  News (3)  Newsletters (3)  Online magazines (3)  Wikis (1) 

  To the front pageSign inTo the frontpageSearch in GUUUI postingsAbout GUUUI