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

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) 
 

131

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) 


 

132

How to create working prototypes with OmniGraffle

Michael Angeles has created a little video showing how create working prototypes with OmniGraffle (a Macintosh diagramming tool) by linking drawings together and exporting them as HTML or PDFs.

Links:

  • Creating prototypes with OmniGraffle Open link in new window

Henrik Olsen - January 25, 2007

Permanent link Comments (0)

See also: Tools (106)  Prototyping and wireframing (119) 


 

133

Introduction to paper prototyping

Over at A List Apart, Shawn Medero has written a nice introduction to paper prototyping that covers the basic why and how.

"Though some people shy away from paper prototypes because they feel they will not be taken seriously, I argue that many people are intimidated by a formal, highly technical design process and that the less "professional" nature of paper prototyping is a great way to lighten the mood and engage a more diverse group. Just offer plenty of paper, pens, scissors, and other materials for anyone to grab and use. If anyone feels nervous, let them eat the paste."

Links:

  • Paper prototyping Open link in new window

Henrik Olsen - January 24, 2007 - via Usability in the News

Permanent link Comments (0)

See also: Prototyping and wireframing (119)  Primers (14) 


 

134

Study link popularity on web pages

Webmasters Eyes is a tool that shows how popular links on a web page are based on Google's PageRank. Type in the page you want to study and it will display the page with little PageRank bars next to each link.

Links:

  • Webmasters Eyes Open link in new window

Henrik Olsen - January 21, 2007

Permanent link Comments (0)

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


 

135

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: Tips and guidelines (95) 


 

136

Apple announces the iPhone

At last! Apple has announced their iPhone - a sleek and ultra thin combination of a mobile phone, an iPod and a pocket computer. The phone is operated with one button and a 3.5-inch high resolution touch screen.

Links:

  • Live from Macworld 2007: Steve Jobs keynote Open link in new window

Henrik Olsen - January 09, 2007

Permanent link Comments (1)

See also: Cases and Examples (28) 


 

137

How to document interaction designs using Visio and Word

Anders Bjork sent me a link to his article about how to document interaction designs created in Visio. Write your comments in Visio and export the screens and the comments to Word.

Links:

  • Documenting Interaction Design/Wire Frames with Visio and Word Open link in new window

Henrik Olsen - January 08, 2007

Permanent link Comments (6)

See also: Prototyping and wireframing (119)  Tools (106) 


 

138

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) 


 

139

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) 


 

140

Part two of report on how to design web applications

Part II of the The Designer's Guide to Web Applications is out. In this 62-page report, Hagan and David Rivers examine seven of today's most innovative web applications, including:

- WebOffice
- Serenata Flowers
- Backpack
- SurveyMonkey
- Writely (now Google Docs)

The authors investigate the purpose of each application, its target users, and how each application tackles its specific design issues.

There is a free chapter of the report available.

Links:

Henrik Olsen - December 15, 2006

Permanent link Comments (0)

See also: Books (47)  Web applications (6) 


 

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