Posts Tagged ‘layout’

Recent reads - form design

Sunday, January 24th, 2010

Last week I was doing some research on form design and jotted down the following links and thoughts:

The Apple store’s checkout form redesign (Luke Wroblewski)

A lengthy article reviewing the old and new Apple store checkout process highlighting the good and bad points.

  • Under “Dynamic Indication” is an explanation of how you can detect the type of credit card people are using based on the first few digits of the card. Minimising the amount of information people enter on a form is good.
  • Under “Primary Action” is an example of helping users move forward through a process by clearly distinguishing the “continue” button from every other item on the page.
  • Under “Error Messaging” is a point about clearly distinguishing which fields have errors and why - Apple’s use of yellow field highlights can be confusing. I disagree with the authors suggestion however to use red alone for error highlighting - a differentiating colour backed up with simple instructions may be sufficient and less likely to make the person feel stupid/at fault.

Marking required vs. optional form fields (Luke Wroblewski)

Suggests showing the word “optional” with the field labels instead of marking mandatory fields with an * is more user-friendly.

23 forms and data entry usability guidelines (User Focus)

A usability checklist when designing and building forms.

In-line tips (an example)

I personally like the treatment on the PlainFrame Early Access form to show tips in-line with a form - hover your mouse over a question/field and you see tips on the right-hand side. It reduces the length of the form and can be easily ignored by people more familiar with the terms they are being presented, or those who don’t wonder why they’re being asked particular questions.

I haven’t checked out how accessible it is, but if it’s not then there would be work-arounds to make it accessible.

PlainFrame In-line tips

Multi-lingual user experience design process

Thursday, March 5th, 2009

I’ve just read the article Creating a great user experience for the whole world by Tammy Gur (which I found via the UX Australia Conference blog) and took a few notes:

This article provides an overview of focus areas of the design process that were used during the BBC World Service’s recent re-designs of the BBC Persian and BBC Brasil web sites. The design process also considered the upcoming 2009 re-launches for their other sites across 33 languages. The key considerations were:

  • The script - understanding the user requirements and expectations in the presentation of text in their language such as flow, spacing, and size.
  • Editorial design - understanding the user expectations on content layout and construction while providing flexibility to handle the variety of content.
  • Navigation - ensuring that the navigation mechanism is ordered and easy to use for the language content.
  • Interaction design - user, survey, statistical and competitor research to understand the target markets acceptance of certain interaction methods.

The solution involved finding common elements and creating a “repository of building blocks” allowing them to be arranged in specific ways for each language service.

An interesting part of the article for me is the “Competitor analysis” diagram that displays a way of breaking down content from competitor sites in to the most simple blocks for comparison, learning and decision making.