Category Archives: Design

Web Forms – areas to consider

The core aim in form design is to make the process as easy as possible for the user to achieve their goal. There are a bunch of very simple design features that can be employed to make the process easier.

I’d like to spend some time looking at forms on the site with a view to optimising them, both from an internal and a public perspective.  If we can create forms out of a set of building blocks it should in theory be much easier to create forms quickly and effectively which in turn save the business money and produce a standard set of ways to navigate and complete forms, creating a satisfactory user experience.

http://www.calderdale.gov.uk/support/itdev/bill/environment/land-premises/land-charges/LandChargeSearches/index.jsp

Using an * to highlight mandatory or optional fields

Asterix’s tend to be used for both mandatory and optional fields therefore it’s good to use copy to explain the intention.

Applicants name and address

form-land01

Reset and continue buttons

The reset button on a form can have very negative consequences. This is a secondary function and needs to be designed so with less presence than the continue button which has a primary function. It is important that primary and secondary functions are designed so that they have a clear visible distinctions.

Align the continue or submit button with the input fields.

Book notes – Emotional Design Donald Norman

Isn’t it strange how attractive things appear to work better.  Is this just a placebo, we expect things to  work better because we’re approaching them from a more positive stance.

According to Alice Isen – ‘Being happy broadens the thought processes and facilitates creative thinking.’ This is something that is explored in creative facitilitation – making brainstorming sessions more creative and fun returns better results. Is this common sense if people are relaxed and happy they’re more likely to be productive than if they’re stressed and unhappy?

In Donald Norman’s book  Emotional Design, he defines the brain as having three levels of processing, the visceral, behavioral and the reflective states.

In this instance visceral refers to the immediate physical response to a situation. Behavioral is more of a physical action or a skilled action whilst reflective  is  thinking about a situation, analysing and interpreting. According to Norman in design the visceral level is about the initial impact of a product, about it’s appearance shape, texture, colour –  how it looks and feels. Behavioural is about the products use, about the users experience with the product and how it functions and performs, how easy and satisfying is it to use.  Lastly the reflective level is about interpreting and reasoning.

Puffin Crossing – Help how does this work?

I maintain that a designer should always aim to consider and where possible engage the user in any design. If a user is struggling to comprehend how a product works then it is often back to the drawing board for further consideration. It feels like a failure if a product requires instructions to enable the user to operate it and my instinct is to develop the product further until it works. This set of instruction for using the new Puffin Crossings [Puffin crossing are an adaptation of the Pelican crossing] struck me as odd, firstly are people really having problems using this, especially when it’s older sibling has been around for such a long time now. If this is this case wouldn’t it have been better to resolve those issues without the need for pinning guidance to the product.

car stereo

I’ve been driving this car for nearly 3 years and I still haven’t worked out what these buttons are for. It’s somewhat ambiguous and pressing them doesn’t help me much.

interface for car stereo

interface for car stereo

Include a cancel order button

Whilst purchasing some yoga kit – I struggled so much with the suppliers website www.yogamad.com  (the payment process was not functioning correctly) that I inadvertently ended up with 3 orders for yoga mats and blocks.  It wasn’t the best of experiences especially as there was no obvious way to cancel the orders and guarantee that the transactions had not gone through. I had to wait till the following morning to call the company, who were very helpful.  A simple delete order button may have eased the experience, saved some time and reassured me that I hadn’t spent a small fortune.

grab of yogamad order page

grab of yogamad order page

Interactive framework

1. Product form and input methods. What is the form  of the product – where will it be used? Will it web based or in the physical world. If in doubt refer to the personas and the scenarios.

2. Functional and data elements. Data elements are broken down into the key elements, such as email, photo, contacts, messaging –  whilst the functional elements are the key functions that the user needs to undertake.

3. Functional groups and hierarchy
4. Interactive framework
5. Construct key scenarios – Outline the frequently used pathways through the system – based on the user tasks.
6. Check design with validation scenarios

[ref Cooper About Face]

Questions to consider during the information design phase

Do the users want to see the information grouped by subject, process, business group, or information type?

How similar are the needs of the different user groups?

How different are their needs?

How many potential main categories are there? (typically relates to navigation)

What should those groups be called?

What terms do customers find confusing?

Are there any items be included in more than one section?

What action would you take if you could not find the information you need here?

What items and groupings were easy to create?

What items and groupings were difficult to create?

card sorting a definitive guide

Heuristic evaluation

The site should provide mulitple ways to access the same content
Indexes and sitemaps should be employed to supplement the taxonomy
The navigation system should provide users with a sense of context
The site should consistently use language appropriate for the audience
search and browsing should be integrated and reinforce one another.
[information Architecture – Louis Rosenfeld & Peter Morville]

Jakob Nielsen’s Ten Usability Heuristics

Emotional Branding

“Emotional branding is about building relationships;it is about giving a brand and a product long-term value”….”It is based on that unique trust that is established with an audience. It elevates purchases based on need to the realm of desire. The commitment to a product or an institution, the pride we feel upon receiving a wonderful gift of a brand we love or having a positive shopping experience in an inspiring environment where someone knows our name or brings an unexpected gift of coffee – these feelings are at the core of Emotional Branding.” Sergio Zyman former chief marketing officer Coca Cola]