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) 
 

71

Left-justify vertical lists and menus

According to Jakob Nielsen, eyetracking studies show that users tend to rapidly move their eyes down the left-hand side of lists (e.g. vertical menus). In order to design vertical list that are easy to scan, Jakob recommend that we should:

- Left-justify the list items so that the user's eyes can move in a straight line. Items that are right-aligned make scanning more difficult.

- Start each list item with the one or two most information-carrying words. People will only read a item if something catches their eyes in the left-most one or two words.

- Avoid using the same few words to start list items, because doing so makes them harder to scan.

Links:

  • Right-Justified Navigation Menus Impede Scannability Open link in new window

Henrik Olsen - April 29, 2008

Permanent link Comments (1)

See also: Navigation (63)  Research (129)  Tips and guidelines (95) 


 

72

Prototyping with Adobe Fireworks

It seems like Adobe Fireworks is becoming a new favourite prototyping tool of many interaction designers. With the CS3 version, Adobe has added a number of new features that makes it interesting for prototyping purposes:

- You can create pages instead of having to work with a maze of layers
- You can have a master page holding elements shared across pages
- It comes with a library of common user interface widgets that you can drag and drop onto pages
- You can create your own widgets
- You can make elements clickable and link them to other pages
- You can export the whole thing as web pages to create a clickable prototype
- You can work with schematic designs to fully treated graphic designs

Below you'll find a video and three tutorials on how to use Fireworks as a prototyping tool.

Links:

  • Video of a web page made with Fireworks Open link in new window
  • Tutorial: Rapid prototyping in Fireworks CS3 Open link in new window
  • Tutorial: Wireframing with Fireworks CS3 Open link in new window
  • Tutorial: Using Fireworks CS3 to design effective, interactive website presentations Open link in new window

Henrik Olsen - March 24, 2008

Permanent link Comments (4)

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


 

73

How the new Office 2007 interface came about

MIX08 has published a talk by Jensen Harris giving a rare behind-the-scenes glimpse into the new interface design of Office 2007. He talks about how Microsoft said farewell to menus and toolbars and hello to the Ribbon.

In his presentations, Jensen shows some of the many concepts prototypes that came before the final design and explains how usability tests of these prototypes led to the Ribbon concept.

Links:

  • The Story of the Ribbon Open link in new window

Henrik Olsen - March 11, 2008

Permanent link Comments (3)

See also: Prototyping and wireframing (119)  Usability testing (68)  Audio and video (48)  Cases and Examples (28)  Talks and presentations (18) 


 

74

Microsoft builds prototypes in PowerPoint

According to Long Zheng, PowerPoint is becoming a popular prototyping tool inside Microsoft. Parts of Windows, Windows Live, Internet Explorer, Home Server and Expression Blend have been prototyped in PowerPoint.

You can watch a talk by Manuel Clement, a lead at the Microsoft Design team, about prototyping with PowerPoint 2007. You can also download the PowerPoint prototyping toolkit and try it out yourself.

Links:

  • Microsoft Design prototyping with PowerPoint Open link in new window
  • Talk by Manuel Clement about prototyping with PowerPoint 2007 (video) Open link in new window
  • PowerPoint Prototyping Toolkit for PowerPoint 2007 Open link in new window

Henrik Olsen - March 08, 2008

Permanent link Comments (1)

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


 

75

Paper prototype case study

Here's a great video of a guy slamming together a paper prototype at a cafe and having the waitress test it. The video is a great example of how fast paper prototyping can show you that your design sucks.

Links:

  • Joe Arnold's paper prototyping video Open link in new window

Henrik Olsen - March 04, 2008

Permanent link Comments (0)

See also: Audio and video (48)  Prototyping and wireframing (119) 


 

76

iPhone usability rocks

The usability consulting firm inUse has tested the iPhone against three other high-end mobile devices to see whether it lives up to the hype.

According to their test, it does. Usability issues were observed, but nowhere near as many as with the other devices.

Links:

  • So Open link in new window

Henrik Olsen - February 28, 2008 - via Peter Krans

Permanent link Comments (1)

See also: Research (129) 


 

77

Videos of presentations at the Interaction 08 conference

IxDA have kindly provided videos of the presentations at the Interaction 08 conference - a conference geared toward anyone who practices Interaction Design.

Links:

  • Videos from the Interaction 08 conference Open link in new window
  • Interaction 08 conference site Open link in new window
  • IxDA Open link in new window

Henrik Olsen - February 13, 2008 - via Putting People First

Permanent link Comments (0)

See also: Talks and presentations (18)  Audio and video (48) 


 

78

Magnetic interface widgets for whiteboard prototyping

Not long ago, you could buy a magnetic interface design toolkit. Now, they are back - this time big enough to use on a whiteboard (or your fridge) for collaborative on-the-fly prototyping.

The magnetic interface widgets have a special coated surface so that you can write on them with a non-permanent maker and easily wipe them off again. They come in a nice laptop sized case with around 100 magnets.

Links:

  • GuiMags Open link in new window

Henrik Olsen - February 09, 2008

Permanent link Comments (8)

See also: Tools (106)  Funny tools and games (12)  Prototyping and wireframing (119) 


 

79

User's skills have improved slightly

According to a study by Jakob Nielsen and co., people are getting more confident with the web. At their favourite sites, they perform incredibly fast and competent. But when people visit a site for the first time, well-known usability problems still cause failures.

To help new users, sites must provide much more handholding and simplified content. If they don't, they will scare people away.

In the study, they also found that violations of long-lived usability guidelines still cause problems and irritation, such as:

- Opening new browser windows
- Links that don't change colour when the have been visited
- Splash screens and intros
- A site's logo being the only way to get to the homepage
- Non-standard scrollbars

Links:

  • User Skills Improving, But Only Slightly Open link in new window

Henrik Olsen - February 04, 2008

Permanent link Comments (0)

See also: Research (129)  Site design (14)  Guidelines and Standards (15) 


 

80

Recording paper prototype tests with Morea

This how-to article shows how to exploit the full functionality of the screen recording tool Morae when carrying out paper prototype usability tests.

Links:

  • Paper Prototyping with Morae Open link in new window

Henrik Olsen - January 20, 2008

Permanent link Comments (0)

See also: Tools (106)  Usability testing (68) 


 

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