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  




How to design selection-dependent forms

In web applications, we sometimes need selection-dependent forms, where users need to provide additional information after having made a selection. There is a myriad of ways to solve this design challenge. Luke Wroblewski provides an overview and discusses their pros and cons.


  • Selection-Dependent Inputs Open link in new window

Henrik Olsen - March 06, 2007

Permanent link Comments (1)

See also: Forms (19) 



How to you turn scanners into readers

Jessica Neuman Beck has written a nice little piece on how turn scanners into readers by making copy easy to process.

Here's her advice:
- Give your words some breathing room by increasing your margins and choosing short, concise paragraphs
- Organize information into sections with headlines to make it easy to decide which section to read and which can be skipped
- Break up your pages using relevant images and illustrations
- Use pull quotes to highlight important lines of text
- Include descriptive blurbs below headlines to explain what the text is about
- Use icons to denote certain site elements and break up text-heavy pages
- Style links in such a way that they're easy to recognize even to the people who aren't reading the copy
- Use lists that distill information to its essence


  • Does Your Copy Hold Up To A Quick Glance? Open link in new window

Henrik Olsen - February 28, 2007

Permanent link Comments (0)

See also: Text (19) 



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.


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



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


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

Henrik Olsen - November 12, 2006

Permanent link Comments (1)

See also: Research (105)  Forms (19)  Eye-tracking (14) 



How to communicate design concepts

Steve Calde from the design consultancy Cooper has found that there are some critical components to successfully communicating a design concept:

- Use realistic scenarios to show how users can achieve their goals using the product
- Present design concepts at a level of fidelity that matches the level of feedback you want
- Get all the decision-makers together in the same room so that everybody can see and understand the reactions of others


  • Communicating design concepts without getting skewered Open link in new window

Henrik Olsen - November 09, 2006

Permanent link Comments (0)



How to encourage user to contribute to online communities

At online communities a tiny minority of users contribute with content, while the great majority lurk in the background.

Jakob Nielsen has some advice on how to encourage more users to contribute:

- Make it easy to contribute, such as rating something by clicking a star rating
- Make users' actions add to the contribution, such as Amazon's "people who bought this book also bought..."
- Let users build their contribution by modifying existing templates instead of having to face a blank page
- Reward users for contributing, but don't encourage people to dominate the community
- Promote quality contributors


  • Participation Inequality: Encouraging More Users to Contribute Open link in new window

Henrik Olsen - October 09, 2006

Permanent link Comments (0)



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


  • 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: Shopping Carts (8) 



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: Error handling (6)  Web page design (31) 



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: Web page design (31) 



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: Web page design (31) 

<< Back | More posts >>

Browse GUUUI postings

Methods and the design process

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

Design elements

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

General aspects

E-commerce (23)  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) 


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


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

Resource types

Research (105)  Tips and guidelines (80)  Tools (68)  Books (44)  Audio and video (24)  Cases and Examples (20)  Interviews (17)  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