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  
   
 

BROWSE GUUUI POSTINGS

Navigation (63)  Web page design (40)  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) 
 

61

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.

Links:

  • 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 (129)  Web page design (40)  Eye-tracking (14) 


 

62

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.

Links:

  • 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 (129)  Web page design (40) 


 

63

Use character counters with input fields

According to Robert Hoekman, input fields with a fixed character limit should communicate this limit to users. He shows how to do this with decrementing character counters telling the user how many characters can still be entered.

Links:

  • Design Stories: Character counters Open link in new window

Henrik Olsen - December 18, 2006 - via Usability In The News

Permanent link Comments (0)

See also: Tips and guidelines (95)  Forms (30) 


 

64

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.

Links:

  • 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 page design (40)  Web traffic analysis (12) 


 

65

Label placement in forms

Matteo Penzo has conducted an eyetracking study to evaluate the best solutions for label placement in forms. A number of suggested guidelines arose from their test results:

- Place labels above input fields so that users aren't forced to look separately at the label and the input field
- Be careful to visually separate labels from the previous input field
- If you choose to place labels to the left of input fields, make them right-aligned
- Don't use bold labels - they are a bit more difficult for users to read than plain text
- Use drop-down list with care since they are very eye-catching

Links:

  • The article Label Placement in Forms Open link in new window

Henrik Olsen - November 12, 2006

Permanent link Comments (1)

See also: Research (129)  Forms (30)  Eye-tracking (14)  Tips and guidelines (95) 


 

66

Guidelines for usable online flight booking services

The usability firm Webcredible has published 10 guidelines to help online travel companies to improve their online flight booking process:

1. Provide a clearly-labeled first step of the booking process on the home page
2. Provide a calendar
3. Help users find the cheapest flight by encouraging them to be flexible with their dates
4. Promote your cheapest fares and explain how to get them
5. Use a map to show where you fly to/from
6. Provide details on how to get to airports
7. Display prices in different currencies
8. Show the price in full as soon as possible
9. Make it easy to look for another flight
10. Make pages print-friendly

The guideless are based on a study of 25 of UK's biggest online agencies. Some of the guidelines are also relevant and transferable to other online booking services.

Links:

  • Download the guidelines at Webcredible Open link in new window

Henrik Olsen - October 01, 2006 - via Putting People First

Permanent link Comments (0)

See also: Forms (30)  Guidelines and Standards (15) 


 

67

Jared Spool on why good content must suck

Hear Jared Spool talk about how to design websites that suck people towards the content they want.

Everyone with the slightest interest in website design should listen to this. Jared is the most knowledgeable usability guy of modern time and in his talk he manages to cover most of his pet topics:

- How people need scent (links containing the words they have in mind) to get to what they are looking for
- How the best links are 7-12 words
- How people don't mind clicking through lots of pages if they just get what they want in the end
- How people love to scroll long pages
- How people love link-rich pages
- How people turn to search engines only when navigation fails

Download the two MP3 files and the presentation slides.

Links:

Henrik Olsen - September 27, 2006

Permanent link Comments (6)

See also: Audio and video (48)  Home pages (9)  Links (19)  Navigation (63)  Talks and presentations (18) 


 

68

Should we organize things into topics or according to usage?

According to Donald Norman, well-structured organization schemes, where hammers are in the hammer section and nails in the nail section, are practical when we want to find things. But when we engage in an activity, we need an activity-centered design, where the nails are right next to the hammer.

"The best solution is to provide both solutions: taxonomies and taskonomies. Some websites organize all their items logically and sensibly in a taxonomic structure, but once a particular item has been selected, taskonomic information appears. For example, if examining a pair of pants, the website might suggest shoes and shirts that match."

"Activity-centered design organizes according to usage: traditional human-centered design organizes according to topic, in isolation, outside the context of real, everyday use. Both are needed."

Links:

  • Logic Versus Usage: The Case for Activity-Centered Design Open link in new window

Henrik Olsen - September 25, 2006

Permanent link Comments (2)

See also: Information architecture (15)  Navigation (63) 


 

69

4 ways to avoid shopping cart abandonment

According to Anne Holland, research indicates shopping cart abandonment is no longer caused by users being unable to find their way through the check out. Today, it's more a marketing related problem.

She suggests four ways to avoid the problem:
- Promote return/exchange policies by placing a link in the cart reading "Returns Are Easy"
- Post reassuring security icon(s)
- Promote privacy and trust policies by placing a link reading something like "We Value Your Privacy" next to fields asking for personal data
- Remind customers of their abandoned carts by sending an e-mail after it has been abandoned and when it's about to expire

Links:

  • Study Data: Absolutely Pitiful Ecommerce Shopping Cart Abandonment Stats -- 4 Ways to Improve Yours Open link in new window

Henrik Olsen - September 21, 2006

Permanent link Comments (2)

See also: Tips and guidelines (95)  Shopping Carts (9) 


 

70

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."

Links:

  • 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)  Web page design (40) 


 

Browse GUUUI postings

Methods and the design process

Prototyping and wireframing (119)  Usability testing (68)  Cost-justification and ROI (27)  User research (23)  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 (40)  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 (27)  Persuasive design (21)  Visual design (19)  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) 

Technology

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

Humour

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 (129)  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