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 (56)  Web page design (30)  Search (24)  Text (18)  Forms (19)  Links (15)  Guidelines and Standards (12)  Site design (10)  Design patterns (8)  Shopping Carts (7)  Ads (8)  Error handling (6)  Home pages (5)  Sections (5)  E-mails (2)  Help (3)  Sitemaps (2)  Personalization (1)  Print-friendly (1) 
 

11

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 (103)  Web page design (30)  Eye-tracking (14) 


 

12

Designing by stealing

"Good artists borrow. Great artists steal," Picasso once said. Looking at what others before us have done is a time-tested method for gathering inspiration.

As a way of learning how to solve design challenges, Jared Spool recommends that we take regular tours of competitors' sites, top popular sites, and sites we never heard about. By paying close attention to all the details, from the subtleties of page elements to the overall flow, we can build ourselves a catalogue of problems and potential solutions to use in our daily work.

Links:

  • Taking Time to Tour Open link in new window

Henrik Olsen - January 14, 2007

Permanent link Comments (0)

See also: Shopping Carts (7)  Design patterns (8)  Site design (10) 


 

13

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 than 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 (103)  Web page design (30) 


 

14

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 (80)  Forms (19) 


 

15

The complexity of designing for simplicity

Everybody demand simplicity in design of digital products, but simplicity doesn't come easy. In his pursuit to design for simplicity, Luke Wroblewski has frequently encountered the following problems:

- Perceived simplicity can often conflict with actual simplicity of usage.
- Actions that provide real value and drive revenue often have steep learning curves.
- Designing for gradual engagement (hiding away advanced features until users ask for them, also called progressive disclosure) is quite difficult to design and build

According to Luke, we should not think of these problems as reasons to give up on the pursuit of simplicity. "Being aware of these considerations is actually likely to make our jobs simpler."

Links:

  • The Complexity of Simplicity Open link in new window

Henrik Olsen - December 04, 2006

Permanent link Comments (0)

See also: Site design (10) 


 

16

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 (65)  Web page design (30)  Web traffic analysis (11) 


 

17

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 (103)  Forms (19)  Eye-tracking (14)  Tips and guidelines (80) 


 

18

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 (19)  Guidelines and Standards (12) 


 

19

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

See also: Audio and video (23)  Home pages (5)  Navigation (56)  Talks and presentations (12) 


 

20

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 (13)  Navigation (56) 


 
<< Back | More posts >>

Browse GUUUI postings

Methods and the design process

Prototyping and wireframing (52)  Usability testing (45)  Cost-justification and ROI (24)  The design process (17)  Personas (17)  User research (17)  Eye-tracking (14)  Card sorting (10)  Expert reviews (9)  Web traffic analysis (11)  Implementing user-centred design (8)  Site and flow diagramming (5)  Use Cases (3) 

Design elements

Navigation (56)  Web page design (30)  Search (24)  Text (18)  Forms (19)  Links (15)  Guidelines and Standards (12)  Site design (10)  Design patterns (8)  Shopping Carts (7)  Ads (8)  Error handling (6)  Home pages (5)  Sections (5)  E-mails (2)  Help (3)  Sitemaps (2)  Personalization (1)  Print-friendly (1) 

General aspects

E-commerce (22)  Visual design (16)  Persuasive design (14)  Information architecture (13)  Accessibility (11)  Search engines (6)  Credibility, Trust and Privacy (6)  Emotional design (6)  Simplicity vs. capability (5)  Web applications (5)  Intranets (2) 

Technology

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

Humour

Bad designs (12)  Cartoons (11)  Fun music and videos (11)  Funny tools and games (10)  Fun with Jakob Nielsen (7)  Misc humor (6)  Designs with humor (3)  Fun posters (2)  Funny 404 pages (2) 

Resource types

Research (103)  Tips and guidelines (80)  Tools (65)  Books (44)  Audio and video (23)  Cases and Examples (20)  Interviews (16)  GUUUI articles (11)  Primers (11)  Talks and presentations (12)  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