Look around the web, you’ll find them all over the place. MS-Word and PDF forms that you have to download and complete.  I would be forgiven for thinking that we have not progressed on the web since 1995.

I know I’m not perfect I have been party to this crime against UX as well.

We know they are bad, so why are we still using them.

Let’s Consider

You’re feel inspired to join a professional association.  The website seems pretty good, it lists all the benefits. There is a professional air about it.   You can see that some of your respected peers are already members.

The annual fees aren’t that much either, well within your budget.  You can see at a glance you’ll have no problem with your experience with the membership criteria.

The entire progression through the site has been seamless, almost as if the site was personally responding to your needs and wants alone. It’s been a pleasure considering joining this association.

So finally you press on the “Join Now” button.

The perfect reality is shattered. One brief sentence destroys it all -

“To Join simply download, complete and fax back to us the following PDF document”

This is not a little speed hump in the process.

Its a 10 foot wall!  This is a user experience disaster.

Completing a Form

Just consider what you have to do to complete the form:

1. Often the PDF form can’t be filled out online, or it just doesn’t quite work right.
2. Download the form.
3. You print it off.
4. Find a Pen, that works.
5. Fill it in.
6. Find a Fax machine or scan it.
7. Fax it, ensuring the fax has been sent.
8. Remember to collect your copy of the fax.

Yeap, it’s just way to hard.   Now consider, if we want people to complete the form why are we making it difficult.  Why indeed.

Pros

• Sometimes we don’t want a Form online.

  Over the years I have run into a good number of  agencies and corporations who deliberately go out of their way to make it difficult to complete certain forms.  They rely on the fact people don’t like to fill in manual forms to restrict the number they get. In a way they are burying the form and the associated process online so you will not complete it.

• Writing outside the fields

  A manual form can allow for those incidences that an online form designer didn’t consider.  You can write outside the fields, in the margins and the like.   You may have a small comment box online, but on a manual form it can be limitless.

• Easier to update

  Sure, you just have to update the link for the downloadable form.  However what happens if you don’t have the master document. Do you have to build the form from scratch just for a “simple update”.

• Easier to publish

  Yes the process of publishing a MS-Word or PDF form is an simple, one.  Just upload the form and link to it.   But consider the time taken building the form and getting it looking the way you want it.   These are the hidden costs.

• No special software or skills required

  No special software is required.  Most businesses have a MS-Office installed. Hence building a form in MS-Word isn’t that greater task.   No real specialised skills like “web design” are required.  It doesn’t take that long to build them either as all the pesky interaction component has been removed.

Cons

• People are lazy

  We known that people are naturally lazy, they aren’t going to want to fill in a manual form at all.   Maybe it reminds them of an endless victoria bureaucracy of hideous  forms.

• Easy to add a CMS form

  With a lot of CMS these days there are modules or plugins that allow the admin person, with no special design skills, to easily put together a form.  These forms often have all the interactive elements such as error messaging and the like.   All they need is to be styled correctly in the first instance.  They also usually come with default styles anyway.

• Electonic records

  Provision of an electronic record, whether or not it is in a database allows for easier access to the information, and an increase aspect of data manipulation now or in the future.

• Data validation

  You can ensure with filters, and data validation that the data you get from an online form is pure and the best it can be.   This is very hard to do with a manual form.

• No double entry

  It’s simple with a manual form you have to enter the data, manually type it into a computer system or at the very least scan it and use an OCR package on the result.   This all takes time and resources.   Also what do you do with that extra long comment that is too big to be collected and entered into the database.

• Easy to development a custom form

  Years ago designing and developing a form for a developer was a long process.   But today with frameworks, form generators, specialised form tags and the like it is possible to build a form in a tenth of the time.   This really eliminates the complaint of it taking too long doesn’t it.

• Cost effective user experience

  Overall if you look the process, sure building a PDF or MS-Word form may appear initially to be cost effective, but if you consider that it’s just not going to be what people are expecting.   You are going to loose potential transactions with an manual form.  They have started the process in the online world of the web, they expect to complete it there simply and efficiently.

Next time a client sends you a PDF form or worse a MS-Word document to be placed on a site as a form. Stop.

Have a chat with the client, discuss their real needs and the purpose of the form.   If they really honestly want people to complete the form then realistically it has to be online.

I was talking to the local UPA Perth chapter (in formation) about aspects of UX visualisation.  It was an interesting topic that brought up a good number of discussion points.

One point was on the design process. The way we design.  The way that we just don’t allow ourselves time to fail at the design.  Or if we do, it is hidden in the back room so we can appear to be “magical design wizards” that produce the perfect product, interface design, IA or the like.

Great!  Nice idea if you want to really keep this air of the designer being someone “mysterious and magical”.   Someone that can just disappear for a few hours and suddenly they have the final product.

Stop the Myth

We really have to stop this process.

You know how no-one understands design.  They don’t value design. They just don’t get how long it takes to design something.  They just don’t get the process. They just don’t understand the principles of the design.

Well we are to blame!  We are the problem.   We have build the wall between ourselves and our clients.   We have build the prissy pedestal that we are standing on.

For to long we have been taking the design process and putting it behind closed doors where only a few audience members, team members and select client liaisons get to see behind the “Wizard of Oz” curtain from time to time.

We should go beyond just explaining the design process to the client, and flashing around a few final concepts when we need signoff.  We should  involve them. Even if it’s just in a small way. If we did this some of the issues we have would start to disappear.

Education is Important

It’s all about education. Educating the client’s decision makers, and even your team.

It’s about taking down the wall and showing your process.  Discussing and explaining with your client the design process as you step through it.  Not just showing the final stages of each process either, the steps along the way, warts and all.

Yes, that’s right,  show them the rough sketches, the wireframes that have failed, the concept storyboards and mockup concepts that you have rejected.   It’s simple, explain why these designs have failed and been rejected.   Involve the client in the process.

Become human, not a design mage or a mindless web design monkey.

You may say, “but the client doesn’t want to see all the design process” .

Are you really sure. Most people, I find, are even just a little bit  envious of us.  They would love to help out in the design process.  They want to be us.

Key is to just be patient with them, your clients are a design newbie, be understanding but firm, after all they are paying your because you are “the designer”.  It’s a balancing act, don’t pester them with details all the time. Still in your progress meetings, show the design output. Show the progression towards the final concept.

Stop Perfection, Make Mistakes

If you are looking at me strangely by now, then I can tell that you tend not to really design in the traditional way, with multiple iterations of a design leading to the final outcome.

Whether it be sketching with pencil and paper, in a wireframing application or just using Photoshop, you should be cycling through a series of design concepts before you decide on the final product.

Yes you could say that there is all this user research that we have and it’s all you need to build the design.   Well I agree, but I also disagree.

Granted you do have an outline a specification framework, restrictions on the design from the user research. Still there will often be hundreds of ways you can approach the issues and develop the design.

Even with applying the standard design principles on top of the user research findings, you should still have a good deal of approaches you can take.

If can only see one approach, maybe you need to take a fresh look at the problem, from a different view point.

Protosketch it

Like a good product design, there will be failures in a UX design.

However these failures are important. They give us ideas, they allow us to get frustrated, to look beyond the everyday and find that special design the client is really looking for.

Failure in designing allows you to iterate the design.  They allow us to discount designs and to get inspired with new alternatives  from the failures. Gradually over time, you will get less and less new concepts and start to discount more and more.  Resulting in the final concept.

It’s a simple process.  Just sketch out a concept, get others feedback, throw around some ideas.   It’s like you are prototyping the base concept sketch. Iterate it, adding and removing concepts.

Maybe  we should call it protosketching.

Involve the client, involve your peers, friends, team colleagues or maybe do a peer review.

Just work down that process of refinement to the final design.  Now I’m not talking an agile process here, I’m talking about something that happens the first moment you put pencil to paper in the sketching process be it analogue or digital.

Remember design is not a robotic process, it’s a creative process.

I often find my best designs are the ones I don’t think about, the ones I mull over for days looking for inspiration from things all around me.  Doing a little sketching, drawing, letting my mind wander.  In case you ask, I only work with clients that know they will get a good result if they don’t push the process, sure this helps as well.

Fail or Don’t Design

Now in my mind if you are not failing at your design, well you are not designing.   You are just processing an analysis, and producing one possible outcome.  Maybe you should stop and think.   Are you doing the right thing by your client.   Does your client really just want a second rate concept.

If you like producing second rate designs, do us all a favour, stop.  Just stop designing, the world has enough crap designs.

If you are failing.  Well that’s great, design and fail away.  God speed to you.

I have been involved with many user surveys over the years. Some have gone well. Some have been a complete waste of time and effort. The main distinction between them is the surveys that were professionally developed and pretested would succeed. The ones that had been knocked together by a well meaning manager were often destined to failure.

It comes down to this – unless you have experience designing surveys, then it’s best to either hire someone who has had experience and training, or find another way to collect the same information.

Proceeding with a flawed survey will just produce results that are tainted with bias and other data warping horrors. Not something you want in your user research, eh.

Survey Design Tips

Now I know some of you are going to be forced into running surveys despite my advice.   That’s okay, business is like that, sometimes you have to compromise.

Better that you at least know the pitfalls and can correct them as need be. So here is a list of tips for online survey design that you may find invaluable:

• Survey Objective

  This may sound really silly, but you have to know what the survey is for and what it needs to achieve before you start. Otherwise you will get side tracked asking meaningless questions. For example you may want to find out about the user demographics, their preferences, and the users needs and wants.

• Keep it Short

  There is nothing worse than an online survey that seems to go on forever. Asking page after page of questions. When you are putting together questions. Stop and think. Can I get that information elsewhere.  If you can scrap the question. Similarly if the question is not directly related to the goal of the survey.

  The point is to design a short sharp survey someone can complete in under 5 minutes. I don’t know how many online surveys I just abandoned after about 5 minutes, it must be in the hundreds.

• Tell Me How Many Pages

  Your respondent’s time is valuable, they are doing you a huge favour filling in your survey. Respect that. Just like you minimise the number of questions in the survey, it is also a good idea to let people know how many pages they have to complete. The best way to do this is to  display an indicator of their progress.  This will have a negative impact if your survey is too long. However  it will have positive one if the survey is short.

• Let’s go Back

  Again this is a simple issue, let respondents navigate forward and backward (not via the back button) in the survey and review their answers, if they so desire. Remember the respondent is doing you a favour, don’t make it hard for them.

• Its About the Design

  At the end of the day all the information you’re gathering about the users will be applied to the design of the web site. Be that on a visual, informational or interactive functionality level.  It follows that when you include a question you should ask yourself – “Is the data collected going to influence the design of the site.”   If the answer is – No; then remove the question. Now it’s not a hard and fast rule, but still one you should consider.

• Say No to Checkboxes

  I know you might love them, but a checkbox is just a bipolar field, yes or no, on or off.   You will get a higher response rate if you present a checkbox as a series of radio buttons with a yes or no response.   It’s instantly clear to the user what response is required. Also you have the advantage of taking up more visual space and hence avoiding the question being missed.

• Say No to Select Lists

  This is interesting, as I have discussed earlier, certain demographics have an issue with realising that they can scroll down the list and pick the unseen items on a single line select list. A good way to avoid this issue is to use radio buttons with a multiple choice layout.

• Add Some Other

  When you put an alternative list of multiple choice items in a survey, how can you really be sure you have all the possible choices. I have always found it’s a good idea to allow for an “Other” field and have space for the respondent to fill in their alternative.  You usually discover you have missed a few alternatives I find.

• No Response

  It’s a simple thing, but it’s a good idea to have the default setting for any multiple choice items to be “no response” that is when all the fields are not selected.  I would also consider adding a “not applicable” or the like,  response as well. Mainly because there can be cases when the respondent has no experience with what you are asking.

• Getting Likert Scales Right

  Likert Scales are those multiple choice responses that go “Disagree 1 2 3 4 5 Agree” . Now these are very good at gathering information where there is going to be a distinct difference of option. However the result of a Likert scale question is not a series of interval measurements. But in fact it is just a scalar representation of extremes from agreement to disagreement (in this case).  When using a Likert scale it’s a good idea to have a mid point (odd number of values) to allow the measurement of the common mid point.

  ALso if you are measuring a very subjective issue.  It’s  a good idea to label all the scale with the equivalent labels to help remove any bias or misinterpretation.

• Pretest the Questions

  Writing survey question is something you have to do carefully. Respondents will attempt to interpret your questions. And subsequently provide you with the information they think you are expecting to get. Also they will try and determine how you are going to use their answer and respond appropriately. This leads to bias in the results.

  The way to avoid this is to pretest your questions. A pretest will tell you the questions that are always going to be skipped, give similar answers, and questions that are just confusing or misleading. Just like we user test, so we also need to user test the survey as well. Ironic really.

• Stop Question Skipping

  It’s simple your respondents will skip a question if they don’t understand it, are confused or just plain bored with a your too long questionnaire. The solution is keep it short and on topic and ensure the questions are not confusing.

• Multiple Choice Order

  Ordering the multiple choice responses is very important.  However if you put the responses in their natural order (high to low) or just listing them as you think of them is dangerous. This presents bias to the respondent. Who will select that response that looks like it is the one you want.

  What you need to do is scramble the responses. Still,  expect some respondents to lean towards selecting the first or last items as they see these as the important ones.

• Duplicate Answers

  The arrangement of your questions can have a great influence on the responses.  If you put too many questions that have a similar response or layout together (especially multiple choice). You will get a leaning toward the same response for all the questions. You have to vary the responses and keep the respondent on their toes. However you don’t want to confuse them. So mix it up a little.

• Leading Questions

  This is something you would think wouldn’t be happening in surveys, but it still does. The use of leading question is still an issue.  Ensure the words you use don’t imply any unwanted  response.   and that they don’t point the respondent to any sort after response. I have always found that open ended questions like those in an interview are the only way to go here.

• Ambiguous Questions

  Supplied responses to questions need to have no ambiguity in them at all. Remember what you interpret as meaning one thing, someone else will see if as completely different. It’s recommend that you ensure that all supplied responses are 100% rock solid in what you want them to mean. Use the contemporary language and terms of your audience, also avoid verbs that have a double meaning.

• Negative Questions

  The use of negative terms in a question is not a the best solution. In a lot of cases people will mis-read the question as an implied positive. Which will give you a completely skewed dataset. The simple solution is just to present all the questions as a positive outcome.

  If you really have to use a negative, a way around this is to highlight a simple negative  like for example – NOT. Just bold and capitalise it.

• Getting Ranges Right

  When you ask about a range or the like, don’t imply a level of use for a response. As the respondent will just assume you are looking for answer within this level of the range.

  For example. “How many times do you visit our site a week:” this is bad, it implies you must visit at least once a week. Where as “How often to you visit our site:” is a better alternative as it leaves the value ranges to the supplied responses.

  Pre-testing on the supplied responses will also give you a realistic response range as well.

Now this list is by no means complete, what additional pointers would you include as UX professionals?

The other day I was chatting away with a potential client, I asked for their phone number, as you do. They replied with 1800 GETT AWEB (no that’s not real) . I asked what that was a real number, there was silence for a moment, then “I have no idea,” was the honest reply.

It’s not that phone names are anything new, but it did get me thinking.

The use of the phrase (name) as a number was all well and good if I wanted to remember the number. It’s well know that people remember words and phrases better in general than they do strings or numbers.  Clearly why phone number names are so popular.

However in this situation I just wanted the contact details so I could transcribe them into my client contact record. So a string of numbers would have been fine.

Phrase verses Numbers

Instead, getting the phone number as a phrase meant I had to translate this back into the real number. Which involved finding a phone with an alpha-numeric keypad. Not a really hard call in our geeky household. Then you have to stare at the phone and  letter by letter translate the name. Laborious at best.

Sure I could leave the number as is and just do the translation each time I dialed it. Again it’s really just a pain when all I want to do is plug in the phone number and ring the person.

I have done a little  biased unscientific research on twitter on this topic, to reveal that most people feel the same.

A phone name is great to remember when you are at a set of traffic lights, reading the side of a bus,  billboard or if you are just trying to recall the phone number.

However it’s a real frustration if you have to dial the number off the phone name alone.

Presenting the Contact Details

It just  comes down to the presentation of contact phone number or phone name.

Sure presenting a call to action phone number as a phone name will help the users remember the number. But this will fail if they are visiting the web site in order to ring you. Remember people are often just looking up websites now for contact details as well now.

The solution is simple, present both formats, together.  Most savvy web sites do this, but a lot don’t.

Having the real number on another page or somewhere else on the page – that is not near the phone name, is also a bad idea.  It is  just as likely to result in the user going elsewhere, if they can’t find the real number quickly enough.   Yes, as a user, we are all lazy, we don’t want to have to translate your phone name.

It’s a simple thing, just remember a user experience is a contextual thing; mainly relating to the environment and context in which the experience is presented.  And that people are lazy.

You have built the perfect web site, the colours invoke the right emotional response, the visual imagery leads customers to the relevant information while allowing the audience to personally relate to the site. The content is ideal for the web, not to much but enough to convince people of the service. The major call to actions are in the right locations, and easy to find. Everything is set, the web site is ready to take on the world!

Still no matter how perfect your site is, if the  last step, when they encounter the web form, isn’t streamlined and usable, the rest is a waste of time.

The other day I ran across a web form that was failing, it was suffering from a series of issues that would basically make most users stop in their tracks.

With any identifying markers removed, I would like to share with you some of the issues of this form, and a few simple steps to fix them.

The Form in Question.

The form was being used for membership of a professional organisation, it is broken down into three sections (fieldsets in this case) The Personal Details, the Payment Options and the Acceptance of Conditions, these are presented here, for clarity I have separated them, but normally they appear on one long form.

There are a good number of issues with this form, I’m not going to cover all of them, but here are a few of the common issues:

• Number of Fields  - Only What You Require

  I have a major beef with forms that are just way too long. You know the ones with an endless list of fields.  Clearly this one falls into that category –  when you first encounter it you are filled with dread at having to fill it out.

  You should consider every field that you put in a form to be a major stumbling block for anyone completing it. Research has indicated that people naturally hate forms and the like, as they slow them down to getting to their goal on the web. When you designing a form this long (with 38 fields) you are not really respecting your users time.

  Consideration needs to be given to what is the bare minimum to identify the person joining. Everything else should be removed. If you really want the extra informaiton there are ways of encourging people to complete their online profiles later on.

  Trying to capture all the information for a person at sign up in the worst possible time. People are hesitant, and still deciding on the your website.  A long form is just going to convince them you are a little bureaucratic .

• The Need Print out of the Form

  I do know that in some cases long forms like this are developed so people can complete them, print them off and fax, not ideal, but people do it. What needs to be provided is a fax back PDF form or the like. This should be presented on the same page as the online form –  preferably at the top of the page.

• Fieldsets and Grouping

  Yes the form is broken down into three sections. Sections 2 and 3 are reasonable, it’s just the first one that is a little long. This can be improved if it had been segmented into personal details, work details and joining information.

• Help

  With this example there is very little inline contextual help. In today’s interactive web, people are starting to expect to see contextual help boxes appear when they tab or focus on a field. These can be alternatively just be accessed by clicking on an appropriate  help icon (a question mark maybe). Semantically of course you place this information between the  fields and the associated label.

• Encouragement Along the Way

  Currently there is no inline encouragement on the form at all.

  This is a simple thing to put in place; for example every time a user completes a field or an information block (like the BSB / Account Number pair) they get an acknowledgment for their actions that appears inline on the screen. This could be a small tick, thumbs up or the like – appearing near the relevant field.

  Using this type of positive feedback adds a degree of trust that the organisation cares about the information it is collecting, as well as a sense of achievement and sense of completion for the user.

  Use of this technique can also be extended to inline validation of the form, hence providing instant feedback for any error as well.

• Create Steps

  Even if we removed all the redundant fields  we still have a form that is visually way to long.  In this case we are better of presenting the fields  in distinct groups of related information, one at a time.

  You would present it as two step process –  step one personal details and step two the payments, with the terms and conditions confirmation tacked onto the final section. Of course you would have an indicator showing the users progress through the various steps.

  As the user processes the form the indicator would show where they were up to in the process.  This step wise process allows one to segment a long process into several short chunks that users are more likely to undertake as they are progressing towards their final goal in manageable steps.

• Date of Birth

  There are different ways to ask for the date of birth, different  layouts was work for differently user audiences. It has been shown that it can be easier for some users to select a date of birth from three drop down lists than type it in the format you require.

• Clear Labels

  The labels on a form have to convey  instant meaning for the user, and yet still remain personal so they can relate to them.  The order and grouping of the fields should also follow a logical sequence  (as recommend above).  Labels such as “Optional” mean nothing to a user.  With a field like this, people may not even complete it, after all it’s optional.

• Add White Space

  From a design view point all the yellow fields do wash into one large yellow mass, they would be a lot clearer and easier to read if there was a some white space between the fields. It’s a simple thing, but cramming all the fields up together doesn’t help, if anything it makes the appearance of the form even more intimidating.   Remember white space is your friend.

• Avoid Multiple Columns

  This is one that has been debated quite a bit – should you use multiple column layouts on forms.

  Research has indicated that users really like to just run down the page filling out blocks of information as fast as they can. The don’t like shooting across a page to complete a postcode, like in this case.  However having blocks of fields like the BSB and Account Number field close together is acceptable as these are taken visually as one block of input.

• Terms and Conditions

  Use of a check box to confirm agreement is really redundant if you think about it.  Often these checkboxes are put in place to keep legal teams happy,  teams that usually don’t want the form on the web in the first place.   The checkbox sometimes is also seen as a substitute for a signature.   Still there are improved ways to approach this requirement.   If the agreement is required what can the user do,  join and not agree.  No.   The user has no choice – they have to agree or leave not completing the form.

  Sure the statement can remain, however a better approach would be to have the join button saying “Agree and Join”. That way if you don’t agree it is very clear that you can’t join.

  Using a required checkbox field just forces the issue, frustrates the user, and makes them feel a little like they are being railroaded into agreement.

  Also what if my browser produces a cross not a tick  in the checkbox,  labels like “Tick to accept terms” should be more generic.

• Final Submit Button

  The final submit button, should be easy to find visually and  be in line vertically with the input fields.   This allows for an easier path to completion.

  However on this form it is like it has been tuck in the corner, with a little reminder that seems like an apology. It’s almost like the form is saying – “Sorry to pester you, but if you just click you can join”.

  This doesn’t really fill you with confidence that your membership application is going to be taken seriously.  The submit button should be a big bold statement.  After all you want people to join.

• Processing the Form

  When I tested this form it was something of a shock.

  I just wanted to see what the validation and error handing was like on the form, so I submitted a blank form, expecting to get a screen filled with error messages. That’s not what happened. I was returned with a list of processed fields, which is fine if you have completed to form, which I clearly hadn’t.

  It is really important to validate the required fields at least, check for bad email addresses and the like, and return an error message, preferably near the relevant field. Ideally you should validate inline as the form is being completed and recheck server side when the submit button is pressed.

Accessibility issues

A quick review of the accessibility on the form indicates that it’s no that bad, fieldsets and labels are correctly used, tab order seems fine. However a few sticky points are present:

• Requirement Indicator. The indicator for the field requirement is presented after the field, this will be an issue for some people as they will not be aware of the requirement of the field till after they have moved past it. This should have been placed semantically between the label and the input field. Presentation wise it could remain after the field.

• Data Formatting – The use of data types formatting and hints in the input fields themselves can be an issue, especially if the JavaScript does not clear them.

  After all the user may not have JavaScript turned on.

  It is better practice to present these hints semantically before the input field but after the relevant label.

  Also consider from a usability view, when a user has moved into a field the context of the requirement is lost and can’t be referenced.  This information should be presented anywhere on the form  as long as it’s in close association with the relevant field, and not in the field itself.

• Field Labels – All fields should have labels, even if you don’t want to display the label. There are ways to hide them, but from an accessibility view point they are very important.

Something to consider

Now I have no idea if this has been done with this form or not, still I recommend with a form like this that  you:

• Produce Prototypes

  Using Prototypes would have allowed a development team to work with an interaction designer to produce a form that was within budget and still easy to use.  Any prototypes could have been tested and fine tuned with the respective audience to determine the best completion and conversion rate for a relatively low cost.

• Some User Testing

  Finally user test on a iterative developmental proccess with the final form to produce the best outcome could have been conducted on all of the above points.

Remember

A badly designed web form is like putting a roadblock in the way of your users  - this is something you really want to avoid.

I know there can be internal issues from legal departments, IT, reduced budgets and the like. Still consider if the form isn’t that usable, less people are going to complete it.  Sometimes having a bad form design can be worse than no form at all.

The more friendly and easier to use a form  is the greater conversion and completion you going to get.  Simple really.

Just think about these points next time you’re designing a form.

Over the years I have been trying to implement UX design tools and techniques into my day-to-day production cycle.   This would be very simple if all my projects where large ones with moderate size teams.   However business reality is that this is not often the case.  The projects I tend to work on, as an independent user experience consultant, can be with a large team for a limited amount of time, to 8-24 weeks as the sole user experience practitioner on a project.

More often it is the case that the projects are just micro projects for small business.  These projects can be anything from 2-3 weeks in length.

The budget on these projects is often very limited.    Often people look at these projects as too small to use any user experience techniques on.  However I have found  you can approach using user experience based tools and techniques two ways for these smaller projects:

1. Do it all anyway, as you would for a larger project, but do it under the radar at your own cost.   Just because you want to remain pure to the “cause”
2. Look at a way to reduce or streamline the user experience design tools and techniques so that they can be used on these smaller projects.

I tend to lean towards the latter.  The idea of working endless hours for an ideal when I could be spending the time with my family and friends is just plain silly.  Besides it devalues our industry and the worth of my fellow user experience designers.

Reviewing Wireframes for Small Projects

Now I’ve learned over the years to question the need for everything in my production cycle, there are no sacred cows here.  No special tools or procedures that must be done  – “because it is the way”, because some industry icon told me so.    Guess it’s my scientific training, the old requirement of having some evidence to support an idea or hypothesis.

With the smaller projects wireframes can be useful I have found, but only in a limited sense.  So maybe we should review if we need them at all.

It’s a similar story – you have completed all your user research to the highest level you can within budgetary constraints.    After all this you end up with basically two lists a “must have” and a “wish list” of information and functional elements for the site’s web design.

At this point we can go ahead and start to explore the concepts and ideas for the design.   What we need is a quick and iterative process to design, test and refine a number of design alternatives very cheaply and quickly.   Remember we have a very limited budget in terms of time and resources.

With this considered what are the pluses and minuses for using wireframes within a small project:

Advantages

1. With simple thumbnail sketches (mini wireframes) using paper and pencil one can very quickly iterate design ideas.
2. By using automated tools and libraries such as Omni Graffle or Balsamiq one can produce final idea wireframes with within minutes and shoot these off to a client for approval.
3. Wireframes can also give a base direction for the design, without the final high-fidelity designs having to be being produced.

Disadvantages

1. Clients often don’t understand wireframes.  They just can’t imagine the design over the top of the fine lines and greyed areas.   It’s like looking at traditional building architectural plans verses a 3D mockup rendering.  Lack of  visualisation skills tend to lead to the requirement for the final high-fidelity  mockups.   It’s at this point with hi-fi that they start to see the design that they understand what it is all about.
2. Wireframes often cause project time creep as too much time is spent making wireframes perfect and documenting all the requirements on them.
3. Smaller projects generally don’t have a major interactive component that is radically difference from the mainstream of existing web sites.
4. The online applications and packages usually used within small business projects are usually open source off the shelf products that can be skinned to meet the client’s visual requirement.   Hence there is little alteration in the interactive component.

Given that we seem to be just wasting our time on reinventing the wheel each time with wireframes, especially for small business projects. In these projects one site can look the same as another at the wireframes level of the design.  One has to consider why keep doing them if they are taking so long to do..

So we should question why keep them at all for smaller projects.

Beyond the idea generation stage discussed above there really isn’t that much use for them.

Even on larger projects we are spending too much time making them perfect, making them into masterpieces, when a few quick pencil sketches is all that is required, be that on a white board or paper.  Documentation is simple – a photograph of the whiteboard or a scan of the piece of paper will suffice.

Alternative Methods – Prototyping

Okay, so if we get rid of wireframes from the process what can we use instead. We still need to represent the base structure or layout with the constrains of the high fidelity design.

This is where I elect to move to rapid prototyping.  I’m not going to detail the process of prototyping here.  But you can use anything for prototyping,  paper, pens , bottle tops. paper clips, post-its, just remember to keep it simple.    The primary goal is to generate and discount ideas  as fast as possible.

Remember your client may not be that familiar with the prototyping process so it’s a good idea to add some detail to your simple prototype before you show it to them.  Flesh them out a little.

If you are using CSS/HTML perchance to prototype, you will have an added advantage.   As the underlying code, even if you are using a framework, can often be reused later on in the development process.  In some ways what we are really doing here is just moving the developmental process forward with a design component.

We can also create a tighter synergy with the design and developmental team as well.  A side effect here is that you tend not to get an overload of crazy design ideas that blow out the developmental budget as the developers can instantly comment of the proposed prototype as well.

One could say that doing the prototypes first is logical as it follows to have the wireframes produced from the outcome of the prototype developmental process.  However that would mean fussing over detailed wireframes. Again in a small project we just don’t have the time.

Simply we move the process from the user research to prototyping to the final high fidelity design.  Eliminating the wireframes.

This year I was honoured to be given the opportunity to speak at OZ-IA 2009.  I will also be speaking at the Edge of the Web 2009 in November for the first time, right after the keynote, talk about pressure!

The following is my initial transcript of my presentation at OZ-IA 2009, The Art of Skywriting  – The Demise of the Tag Cloud.

Now it’s not going to be word for word the same as the audio recording, but you’ll get the idea.  As usual it’s also available on Slideshare along with all my other presentations, distributed under creative commons license.  Soon as I have the audio I will sync it with the slides to make it easier to understand – promise.

Tag clouds have been a part of our community for a while now, we have come to love them, we have embraced them, welcomed them into our households. They have become part of our teams, an ever-present design or navigational component.

Or so we thought.  I don’t know if you have noticed but over the last few years Tag Clouds have been disappearing from web sites at an alarming rate.  In the dead of night they have been ripped from their home page, tossed aside, unwanted to die a lonely death on the curb side.  It’s as if no-one really cares.   I know I care!  What has been happening to our Tag Clouds!

I feel it’s time we got some real answers, answers from some fellow professionals, so I have called in a few favours the managed to get the SUXU team “Special UX Unit” on the case.

Now at last we can surely find out if some heinous crime has been committed and finally learn the true fate of the Tag Clouds.

The Investigation

To understand what has happen to Tag Clouds we really have to understand their history.

Tag Clouds first came onto the scene in a big way in 2006 when Stewart Butterfield (the designer at Flickr at the time) leveraged of the work of Jim Flanagan’s Search Referral Zeitgeist.   So for better or worst Flickr saw an opportunity to try something new and find a use for all those community tags.  Mind you Tag Clouds in theory have been around since 2002 in an online implementation and as theory way back to 1995.   It’s just in 2006 Flickr pushed them out into the limeslight.

Over the following year Technorati and Delicious would both implement Tag Clouds onto their home pages, shooting the status and popularity of Tag Clouds into that of a mega-rockstar.   Everyone wanted to have a Tag Cloud on their website, from blogs, to tech media sites.   It was even suggested that Tag clouds could replace the trusted menu navigation system.

By 2007, even the conservative end on town, in the form of the retail sector was looking at Tag Clouds. As the fringe of the retail sector began to implement Tag Clouds to allow customers an easier method to connect with their popular product lines.

Still what are Tag Clouds really like?   Just like we profile the suspects, so too the crack team at SUXU have profiled the major 3 types of  Tag Cloud

1. Mr Popular (the Elmo)

   With this tag cloud the word size represents the number of times a tag is applied to the single item.   These Tag Clouds are usually generated of audience contributions, like in the case of Last.fm.

2. The Streetwalker

   For this Tag Cloud the word size represents the number of items that to which the tag as been applied (or used).  As in the case of Deep Search, the large keywords have more search items applied to them.   There is no real freewill here, it’s just a case of take what you find.

3. Mr All you Can Eat

   This final Tag Cloud is used for representation of content categorisation. The bigger the words, indicates the more items in that category.   This type of Tag Cloud is very popular in blogs.   It is rarely generated from data that is provided by a global community.

Just a reminder that tag clouds in theory allow for a number of key visualisation techniques:

• As we all know Tag Clouds allow for a visualisation of the presented word frequencies, we can see in this case that Swine-flu and flu are prominent when Japan is not.
• They allow for a community or audience to contribute the tags and determine the direction of the Tag Cloud
• Tag Clouds can present an alternative navigation aid, allowing for easy discovery of the required or new content.
• And they can also present the visualisation of a semantic categorisaton, where the related items of information can be presented in close spatial approximation in the Tag Cloud. In this case Science, Politics and Religion are related, and so is Science Fiction, Sci-Fi, Sex and Zombies.   It gets stranger with Star Wars, Star Trek and Toilet – what are people saying here.

By the end of 2007, early 2008 Tag Clouds had really made it, even the Microformats community was now looking for a model to implement tag clouds. They where considering that there were enough instances “in the wild” as they like to say, to warrant a Tag Cloud Microformat.

Also the IA community stepped forward and deemed that Tag Clouds were now a useful technique for any designer’s toolbox and so they went and produced a design pattern for Tag Clouds.

However we did note and under-current, that like the Tech fringe of computer geeks, Tag Clouds seem too only appealing to a fringe community.   Like with Iggy Pop, the general public just didn’t embrace Tag Clouds.

Also like Rick Sanford, lead vocals, percussion and… flute, time had passed maybe, no longer was the white sexy neck tie, bare chest and mullet in vogue. Sorry Rick and prog rock, time to move aside.

It’s at this point in our investigations that we found unsolved cold case after cold case, hundreds of instances of the innocent Tag Clouds that have been brutally slain.   Clearly justice needs to be served.  We now had our suspects.

The Case for the Prosecution

Geeks and Geeklettes of the jury, we all know about Tag Clouds and their history now.  It’s is clear as has been presented by the members of the SUXU that their has been a heinous crime of murder committed here on a monumental level.

Suspect One

But did you know that by 2006 when the tag cloud population was at its peak that only 7% of the Internet community was in fact tagging [1].   Hence only 7% of the community was providing the tags for Tag Clouds.  This later increase to 12% as the Tag Cloud population waned.  Still with the beloved blogs being the home of the Tag Cloud. The number of bloggers on the web is only about 10-15%.   This means only 10-15% of the web community is supporting Tag Clouds.   Surely these people, the controlling fringe elements of the web community are a suspect.   Hence I give you suspect number one.

Suspect Two

We all know as professionals in the UX field that words do not always have the same meaning from society to society from one cultural group to another. For example I’m just looking for a wholesome “Family Guy” and I get this.   Err No. That’s not what I wanted.  Tag Clouds don’t help this matter.  But it’s not their fault.   Words and their differences are to blame.   So we have suspect two – our differences in meaning.

Suspect Three

The death of so may Tag Clouds can be lain at the feet of users.   They just don’t get them at all.   According to research people often just didn’t get that those items where links they could click on, or that they in fact lead to more information, or that they presented a visualisation of the information of the site.  Tag Clouds didn’t come in most cases with a manual.  But frankly realistically who would have read it if they had.  So the pesky users are suspect number three.

Suspect Four

You know what, people didn’t even realise that the big items in a Tag Cloud where big for a reason.   They considered that is was like that because the designers just wanted it that way.  If it was red or green in colour it was just a design element, and that was all.    Hence maybe the designers are a little to blame here in their presentation of Tag Clouds. So I give you the designers are suspect number four.

Suspect Five

People with accessibility issues are a pain in the arse.   They really made life hard for Tag Clouds.  Constantly complaining about, font resizing issues, colour-blindness, motor coordination issues on small sized words, lack of weighting and semantic spatial relationships for visually impaired users.   So much so that really we do have to consider these members of our community as suspect number five.

Suspect Six

Finally search engines are our last suspects.  The search engines and their bully gang have been lurking in the back alleys of the web. We know they have been secretly a little jealous of the Tag Clouds; especially the in-house search engine.   I put it to you that the in-house search engines with their brothers have been a contributing fact to the demise of the Tag Cloud.

However it does stop their ladies and gentlemen of the jury.  The 6 accused have marginalised Tag Clouds. To the point that they have become little more than noise or window dressing on a page.   And in the harsh commercial reality of the Internet anything that is noise on a commercial site of any nature is bound to be “remove”.  It just makes sense.

Designers started to list Tag Clouds in a warped mangled alphabetical order, but this was just another attempt to destroy them, as we will see.

Tag Clouds and User Research

Research has indicated that with Tag Clouds:

• Large tags attract more attention from users
• People don’t read a tag cloud, they scan for the word
• The centre based tags of a cloud will attract attention
• The upper left Quadrant of a tag cloud get more attention on average
• And that Tag Clouds are just not suited to supporting the search for information

I put it to you that these 6 suspects are guilty of the crime of murder of the Tag Clouds by conspiring to present Tag Clouds in their worst light.

The Case for the Defence

There has been no murder here at all.  Let’s be fair, these suspects are guilty only of marginalising the tag clouds, not of wholesale murder.

The Tag Clouds are just alive and well, hidden in plain sight.

Sure the Tag Clouds have disappeared from the home pages of Technorati and Delicious. Yes they are not easy to find on these sites, yes you have to login and be a member of the community to find them now.   But they are still around. Protected from the thugs of society.

You can still find Tag Clouds, alive and well in the lower reaches on articles on media sites.  Have a look; below the last adverts in the side bar, they will be living out their lives there.   Admittedly it’s not the best of places, but they are alive.

Tag Clouds are still in the mainstream; Governments are using them, as shown here. Also they are being used by MIT (not the Melbourne mob) and by the Creative Commons people.   Now I wouldn’t be calling these sites fringe, would you?   I would say more the conservative end of the community spectrum.

Anyone can now make or implement a Tag Cloud, there are now Tag Cloud Generators such as Wordle and also  a formula for the weighting on a Tag Cloud.   If anything we are promoting and cementing maturing Tag Clouds into our community.   So now Tag Clouds are here for everyone.

The Maturing of The Clouds

We can see that Tag Clouds have grown and matured, which the prosecution has failed to acknowledge in their haste to find a suspect.

Some Tag Clouds have become Index Clouds, where the information is presented in a alphabetic index like fashion.

Others have become Button Clouds, overcoming the issue of the user not knowing if it is link, by making it like a button with a little weighing for good measure.

Search Engines aren’t the enemy of the Tag Cloud – they are the Tag Cloud’s friends. They are not some back street gang of thugs to be avoided.

Many Eyes and Deeper Web have both been leveraging the power on the Search Engines to provide them with the best of both worlds.   With a situation that the results of the Search allow for an extended result set by using the semantic comparative nature of the tag cloud.

Text Clouds

This can be extend further with the use of Text Clouds, here the we feed the output of the search engine (the shark) to the goldfish (the tag cloud)  such that:

• The popular keyword search terms become the items in the tag cloud
• It still has all the display and usability issues of a traditional Tag Cloud.
• However the information base is a lot larger than a Tag Cloud, allowing for a better distribution over the terms.
• One issue with Text Clouds is that they are open to trending as the keyword search terms of a search engine are.

Topical Grouping

Luckily for us Tag Clouds have changed for the better via the use of Topical Grouping:

With Topical Grouping you take a topic of interest:

• Then you display in a Tag Cloud for that topic all the related topics and sub topics.
• This presents a drill down and sideways effect on topic examination.
• Topical grouping does allow for an increase in findability for a moderately small population of tags
• As you would expect using Topical Grouping with a Tag Cloud increases the rate of a serendipitous find.

Was there a murder? No good people there was not. It is just Tag Clouds have matured and the prosecution failed to see this. .

The Verdict

You have heard the case for the Prosecution and the Defence.   In this case we have 6 suspects

• The Community
• The Designers
• The Users
• The Search Engines
• People with Disabilities
• Or our Differences

Which of them is really guilty?

If you really consider it the UI designer, the IA is to blame, that’s us, and we are the guilty part here.  We have never give the Tag Cloud a chance, never allowed it to mature and grow.

Lucky for us they have not died but have just matured out of sight and are still in use on the fringes of the web communities.

References

[1] 28% of Online Americans Have Used the Internet to Tag Content (PDF)

[2] Improving Tag-Clouds as Visual Information Retrieval Interfaces (PDF)

This is the presentation given on Wednesday 24th June 2009 to the Perth Branch of the Silverlight Developer and Designer Network.  The slidedeck isn’t going to make much sense without the transcript below. Just be aware of that if you are slide deck with out following with this transcripts.

Let’s ground this a little and get real before we even start.

To often we design web sites and applications with a limited amount of information and specifications as to what is really is required. It’s a fact. Let’s not stand around and pretend otherwise.

Designing and developing it this type of environment can be hell. Sure I can talk about how to overcome this issue and pass on a few techniques that could assist you.

But what happens when you have got almost all the information you need and things still go wrong. What then – what are the solutions?

Let’s step back away from the web and desktop applications for a moment and consider an average couple, Simon and Maria. They are a loving young 20 somethings. They both have jobs that they don’t really aspire to. Yet still they battle on to save for those overseas trips and such. And just like you and me they get to experience life and all around them, the ups and downs.

Screaming Buttons

Maria and Simon have learnt, just like you and me, that buttons in the real world go off and on. They turn on the stereo. Stop things dead and sometimes they just silence the screaming.

So why does it have to be any different on the web. Why do they have to put up with buttons that just don’t look like buttons at all. You know the ones. They are just impossible to even find out that they are buttons visually. And when you do find out, well you just aren’t that sure what they are going to do. You are always thinking they could – delete the page, make you start over or destroy the world. You are just never that sure.

Really a button should “look” like a button and be labeled as such. Not some arty thing that no one can’t find or even work how they work. Applications and the Web are functional things they have to work or they are just waste of space. Crazy arse buttons are for an art gallery.

However we break our own rules here too. Even if we have buttons that look like buttons as they should. With the maturity of the web the previous experience of people like Simon and Maria really needs to be considered. Just like in the real world they have learnt from childhood what a button is and how to use it. We have learn that the power switch or light switch (which is usually unlabeled) turns on a appliance on the plug socket or the light in a room. Previous learned experience has taught us this.

Same with the web we now have expected instances of button types and iconography that have been ingrained into our common web cultural knowledge, as to have expected outcomes. For Example (and there are many more):

• Search
• RSS feed
• Shopping Cart
• Email
• Home
• Navigational Directional Arrows

In all these cases we know what to expect from the button type or icon. Yes they don’t look like buttons, but the symbolism behind the message works for us.

So in this case we break a few eggs… Still a button should be a button. But the omelets form the eggs does taste nice.

Tools, Functionality and Bears

Back to Simon and Maria. They both use multifunctional tools like the Leatherman. Nice handing tool, bit like a modern Swiss army knife. Has all sorts of gadgets and things hanging of it that are designed for various functions. Such things as a knife, a pair of pliers, screwdriver, nail clippers, and maybe even a coffee maker.

Still besides the great multifunctional of the Leatherman, Simon and Maria still use single functional tools such as knives.

I can understand this, knives are cool. You can cut bread with a knife. Cutting bread with Leatherman is possible, but hey it’s just too hard. A knife makes a single clean cut.

A knife is also really handy when you are faced with the odd suburban random Bear attack. You know the story – you are walking down the street and suddenly in board daylight and this massive Bear out of nowhere attacks you. If you have your trusty kitchen knife you are fine. But handling a Bear with a Leatherman – I don’t think so.

The multifunction tool like the Leatherman can cut things sure, but not that well. Also it’s not that good for locks or fences is it.

On the other hand a pair of bolt cutters is ideal for the odd fence and padlock cutting. It’s also a great accessory for late night “shopping”.

So despite the great multifunctional components of Leatherman, still Simon and Maria prefer to use a Single function tool like a knife. A knife just does the one single job, but it does it so well.

So why do we insist on having these multiple function web sites and applications that are just not doing one core thing well at all. They are constantly presenting us with various different functions all over the shop. Never really doing anything that well, remaining forever average.

Is it that we enjoy having a world of mediocrity where things are always dull and the same. Are we that budget aware that average, a score of C+ is the best we can be bothered with.

Why don’t we have single function applications? I know on the web with the use of APIs this is starting to happen. But still in Intranets and the like all I see are these massive over weight corporate spaghetti code fest. What gives?

Applications that do the job well and just interconnect with other single functional applications to make a suite of online applications aren’t that hard to design and code. In fact they are often easier to build. Think back look at how the MS-Office package started. Word was just for word processing. Excel was just for spreadsheets. Now look at the bloatware that it has become. Sure those two applications still do their core functions, but they also do a lot more. Things we often don’t really want in the first place. It is just endless marketing bloatware.

What we need to focus on when we code and design applications is to keep it simple.

Do one thing and do it well, shine at being the best application for that function in the world. Let’s have a little less applications that make me coffee, and comb my hair all before morning tea time.

We need to just focus on the core of the application or web site and translate that into a core message.

Okay that sounds good, in theory, but what do you do when you have lots of demands by your boss or client.

Simple – there is still only going to be a certain number of elements that are important or the core of the application at this point in time.

So like the ATO (Australian Tax Office) have done, we just focus on those elements as required.

By the way, you think you have an issue with functionality and information retrieval. Just take a moment to think about what it would be like to be in the shoes of the web team at the ATO. Still with all those issues they are just focusing on the core issues of the day.

And Now For Forms

I hate forms in real life; I can get bet you hate them too, as does Simon and Maria.

Forms are the bane of our life. I approach them with dread; they are often poorly designed and put together usually by something with no experience in the art of form design. More often than not the lowest level sectional officer gets the form design job, based off the chook scratching of some Director.

Guess what it’s the same on the Web. Yeah you’re not that surprised. The people in charge of web design project seem to have this burning desire to replicate the paper world based world with no consideration for the web.

Now I’m not going to rapid on about forms, I’m sure you are all experts a form design. But I am going to just point out a few things that people love and hate.

So why do forms suck so much.

Well usually it’s simply because of the sheer size of the form. It’s just too big… Frankly it scares the crap out of us. We look at it and think, okay there goes the next few hours of my life on this endless form.

A simple solution to all this is to just have a good look at the form. In most cases it can be segmented into functional or information related areas and you could slice it up onto separate pages.

Yes that is making the completion process longer or is it…

Consider Amazon.com, do you remember how many steps there is to in the process to buy a book once it is in the shopping cart. Is it 4 pages, 5, 7, 10…

Well really it doesn’t matter. Not at all, not one little bit!. Why? Well because of one simple factor – as long as we are seeing that we are progressing towards out goals and they are still in sight then we are usually happy.

The one exception here is a 35 page survey, mind you if you building a survey beyond 2-3 pages, expect a failure. But that is another issue, there is specialized approach to online survey forms that 90% of the surveys on the web just ignore.

It’s all about Confirmation Candy

We all love candy. The sweet tooth takes us all – we want – we lust over candy. Some would even kill for it.

Well in the world of the web, it’s the same. We love getting feedback, the visual candy the sweet and the sour type that lets us know that we are on the path to salvation that final form completion nirvana.

Giving these simple instant visual cues of positive (tick) and negative feedback (cross) let’s feel good or at least wanted for our progress through a form; even if we get it wrong.

The use of these elements is become now so common place that when they don’t appear on a web form, one really does start to question the validity of the form itself.

So why aren’t we using this instant feedback and error message technique on desktop applications. Usually at best we just get a beep or the field goes dull red.

Speaking Nicely to People

Forms are not just about the sweet and sour confirmation candy, they are also about talking nicely to people and making sense.

Take this case from Bankwest’s online banking facility. You would expect to that if I by accident put a dollar sign in the amount field it the application would have been nice about it and just removed it for me.

Well it is a bank… they have to be a little anal.

Still what would it have take to do that, code wise., not much at all.

Similarly with credit card fields, would it be that hard to filter out the spaces or dashes when you submit the form, instead of making the user do it.

It gets better. I like Bankwest, I’ll let you into a little secret they have invented a time machine, yeap it’s “Back to the Future with Bankwest!”

If you make an internal account transfer on certain days it seems that if you put in today’s date, it tells you that you are in the past or the future! Wow – I wasn’t that aware I had time traveled. Again – another error message, that will a little care could have been corrected. Clearly the system was not really independently user tested.

You know I hate stupid error messages that aren’t friendly and considerate.

What we should be doing is not leaving the error messages to the development team.

The marketing people, the copywriters, should write them. Funny thing is in the real world I can’t see that happening, can you.

Playing Hide and Seek.

Sometimes you know we make things too complex, when a simple solution would have helped.

Take this Linksys router support site. Nice design, overall UX makes me think these guys are professionals and know their stuff. Until you start the game of find the download link for the drivers.

I expected it to be under the drivers section on the page – but no you have to select a version then the driver will appear.

Still then you have to hunt visually for the correct link, as it’s the same colour as other page text elements. Finally you find the download link.

Simple things to fix, but for the sake of a “clever interface” the UX is lost.

Also, what if I don’t know the version or can’t find it… didn’t think of that one.

It’s all Confusing - Stepping beyond the problems

Yes it can be a little confusing. But what we are talking about is the fine detail. The things that make it a average experience to a mind blowing one.

This isn’t rocket science. It’s just thinking about the people using the application, and being considerate.

Still after you have you application perfect and it’s delivering the best user experience it can. You can still have issues. You may not be getting the conversions and sales you want. Well it maybe a few simple things that are not helping.

Are you considering AIDA – that’s number of design rules you can follow on your interface:

• Attention: get the users attention and make them feel wanted.
• Interest: now you need to spark interest in people quickly, showing of your best aspects.
• Desire: you have to spark the desire of the user for your product; this is usually a totally visual sell in most cases
• Action: finally give the user an action point that they can progress to, somewhere they can take the page to the next step.

Also consider the Gutenberg rule. Basically this maps out a thing we call reading gravity (in the western world). It tells us that people tend to end up with their eyes hovering in this Terminal Area (see below). Of course this enforces the reverse F patterns we see in eye tracking.

Still at the end of the day your application needs to be good experience at any cost. Sure you can make it average if you like, if the budget in time or dollars is just not there.

However trust me on this one, people like Simon and Maria will just consider you a roadblock and will work around you. Remember in the PC verses Mainframes conflict of the mid 80’s. The accountants brought PCs into the workplace as the Mainframes where not providing in their arrogance the needs of the corporation. Hence the mainframes became a roadblock, and the users removed it.

Don’t under estimate your users ever. They aren’t stupid people; they are just like you and me. If they are forced to use a bad system, sure they will pay lip service to it and develop their own system with the tools they can gather around them. Things will appear to be well and good, with no issues that management will see. Except in reality your users have just reworked the system to make it usable if you will not.

In summary it’s easy to remember

• Streamline the focus of your application or web site
• Segment any forms or procedures that are too long.
• Simplify things down to its core functionality

One final thing whatever we build it’s not for you or me for but for them, the unseen users.

The other day we came across a web site that  shows all the things that are wrong with a good deal of e-commerce sites on the web.

A little background, we were looking for education books for our youngest child -  so why not look online.  You  know, from the convenience of our own home and all that.  So on  the recommendation of  a friend we went to a local publishers web site.

This site in question does children and adult education  books, judging from the home page I would say that they are focusing on an adult market, from young parents to grandparents.

The first thing you see on the home page is a large screen filling advert, that proclaims in large text  ”Real Sex for Real Women”.  I can tell you this does make you do a double take.   Anyway we could see a small “Children’s Books” menu item so all was not lost.  But it doesn’t put you at ease, after all we are looking for kids educational books, not sex guides.

Onwards with Sex Guides and the like

Down the bottom of the home page we find a drop down list of the major catalogue sections, nicely divided into adult and childrens books.   You would have expected when you select an item you would have been taken to the relevant page.   Well you are partly right.  Not knowing what section of the kids books we needed to look in, we select to see the whole children’s catalogue from this list.  What happens next was off putting

You are sent back to the top of the page instead of to the catalogue as you  expected.   Again you are presented with the ”Real Sex for Real Women” advert right smack bang in your face.   Makes you think, “oh the kids section is in the adult sex section, do I have the right web site”, not the best experience so far.

The problem here is the select list options have been used as headings for sections on the list instead of using the correct optgroup element.   After working this out, we select one of the correct sections, only to be presented with a PDF document, that just has a few pictures of the books concerned and very little in terms of information we were looking for in the first place –   like what the book is about, the price, the skills sets it covers and so on.

Stabbing in the Dark

So back to square one, we end up via that small menu button in the children’s book section.  It’s  clever that the books are all hidden this way, it makes finding them interesting.    The books are  presented as a long list of books by title in descending alphabetical order, all 700 odd of them over 36 pages.   It’s not as you would expect segmented into alphabetic groups, but just pages 1 to 36.   In this case we know the title, but it’s still not  very handy for finding that book you are looking for.

After a few blind stabs in the dark at finding the right page, we are able to locate the right book, and we are able to display all its details that we require on the page.  This is great, we have found it, and it is perfect!

But…

Now we just want to order it.  so we look and look, but there is no “order” or “add to cart” or “purchase” button anywhere on the page.   We have come all this way, through the depths of the darkest library  to find this magical book and now we can’t get it.

However..

It is then we notice that there is smaller menu item labeled “ordering”. Surely this will solve it all.  But alas we are gutted, there is no shopping cart, no e-commerce system.

Just a manual form (print and fax) for orders over $100 or a recommendation to visit other online stores to purchase said book or better yet go to a bricks and mortar bookshop.

After all this effort, they had our trust, we searched out these books against all odds of the poorly designed  site and the bad experience, but still after all this we are told to go elsewhere, we are not wanted, we are cast aside.   Bad taste is a bit of an understatement.

What should have been done

In this case it is all about findability and a good user experience.

It’s not about  being impersonal, cold to busy thrusting the latest sex guide in your face.  It’s about gathering and nurturing your trust.  Okay this was a publishers web site, but that does not excuse the bad experience, and sloppy web site.  So what would have helped:

1. The separation of the Adult and Children section up front would be very handy, they is focusing on two markets, so why not funnel the user in that direction, gather their trust of the publisher by presenting the focus books that the person is looking for.
2. The correction of the navigation and page findability are minor technical issues, but still they should be addressed. Just like  a real life bookshop, make it easy for me to find the books  and I will browse and buy more.
3. The killer aspect is the lack of any e-commerce system.  Now I can understand that the publisher doesn’t want to disrupt their old school distribution channel, but really this is 2009.
4. It would be nice to have a list of available stores for each book on the book information page.  Ultimately there should be a shopping cart system and a way to purchase the books.  This would be good,  it  locks me into the sale, and the publisher doesn’t risk that I will find a competitors book that maybe be better than theirs and I end up buying that instead.

Mirror the Bookshop

This site should have been like a good bookshop.   I don’t know about you, but I love a good bookshop.   Note I said bookshop not bookstore.

A bookstore is impersonal, cold  stacked with best sellers and not much else, staff that are just killing time, everything is about sell, sell, sell.   Sadly in the city I live in,  it is mostly filled with these types of  chain bookstores.  I hate them.  Sometimes they are the model for online bookstores.  The bad experience is usually just transferred to the web.

On the other hand a bookshop is personal.  I can spend a whole day just browsing around the many topics that are available .  The smell of the books, the ink, the colors, the texture of the covers, the vast amounts of information and the volume of untapped ideas.   Things are logically organised, it’s usually easy to find things, even in a large store.   It’s somewhere you can trust, like an old friend.

Overall it’s about building and maintaining trust, and building that bookshop experience, but online.

So many times I find local publishers or bookstore sites that seem to fail to achieve this.

Is it budget, is it lack of vision, lack of user research, testing or just a lazy developer.  Maybe it’s all of them.  Can’t business owners see that for a small outlay they are easily find out if they are presenting a good or bad user experience.

So why in 2009 are sites like this still being produced?

I don’t know about you but over the last few years I have watched video explode online.   It’s a good thing in a way.  It has served its purpose, even if it has killed the IRC star. I have nothing against video per say.   However sometimes it just isn’t the best medium to present information in.

The Art of Information.

When you are referred to an article, generally you want to scan over it, determine if it is worth reading, and if it is, then  generally you will read the entire article or post.   If you are like me then you will even at this stage scan the article and process it very quickly – after all we all have busy lives that we don’t want to clutter them with information that may not be worthwhile.

So what happens when you encounter an article that has been presented just as a video.   You can’t scan it quickly.   You can’t determine if this 10, 20 or 40 minute video is really worth your time from a first glance.  Sure you can start watching, but if it’s got all the pearls of wisdom at the end, and the early sections are boring, you are just as likely to close it all down and leave.

This leaves you with the choice, do you stay and watch a video and hope it is worthwhile or not.   In general whether or not you watch is  determined by the presenters reputation or level of recommendation that brought you here in the first place, and the amount of free time you have to spare.

The solution here is simple – provide a transcript. This way at least we can all see and read what you are talking about with ease.  You see video is not appropriate when presented by itself, especially when you are looking quickly for information

A Conversation is about Discussion.

Lets take this a step further will general discussion. Sites like 12 seconds and Seesmic, that use video commenting around a video forum format.  Sure they are good for building up short run video  conversations.

However  this is all a little moot for those of us that are time poor.  Sitting down and listening to all the conversations in a video thread, can take forever in comparison to the written words on say a traditional blog or forum.   This time increase with videos can be the make or break as to whether people continue to use these types of services in the  longer term.

But …YouTube

“What of YouTube”. you say.   Yes, YouTube and the like is what you expect it to be, you arrive at YouTube, you expect that you have to wait and watch as you are at a video site.   So you have an expectation to wait or leave if it doesn’t interest you.  So in a way it’s a different beastie to say a blog or general site with an embedded video.

The lesson here is, any conversation or information needs to be quick to able to be absorbed.  I guess video has it’s place, just not in a conversational or information presentation mode, what do you think?