Comments on Getting a Form's Structure Right: Designing Usable Online Email Applications

Kelly Ledger — Sat, 05 Mar 2011 05:58:40 GMT

Hi Afshan, pity I didn’t read this article last year! I’ve just come out of a project redesigning the webmail service of an ISP here in South Africa. Our challenge was not so much on enticement to sign up but getting users of the previous service to buy into the new and “improved’’ version that we believed added much benefit. Our experience is that users are resistant to change, skeptical of anything “new and improved” and were vigorously apposed to some changes that we, in our testing, found simple and pragmatic. This is what I love about designing user experiences – learning more about users and entertaining their goals and viewpoints.

I’m looking forward to your next installation.

Afshan Kirmani — Sat, 05 Mar 2011 05:58:35 GMT

Caroline, thank you for the reference.

Your paper, “Designing usable forms: the three-layer model of the form” caught my eye where you talk about perceptual (layout), conversational (questions and answers) and relationship (the structure of the task).

I am going to link your papers here.
1. Designing usable forms: the three-layer model of the form: http://www.formsthatwork.com/ftp/DesigningUsableForms.pdf…

2. Making a better web form:
http://formsthatwork.editme.com/files/Articles/BetterForm…

3. Should I use a drop-down? Four steps for choosing form elements on the Web: http://www.formsthatwork.com/ftp/dropdown.pdf

While I was going through the third paper, I came across six questions that practitioners need to run through:
1. Is it more natural for the user to type the answer rather than select it?
2. Are the answers easily mis-typed?
3. Does the user need to review the options to understand the question?
4. How many options are there?
5. Is the user allowed to select more than one option?
6. Are the options visually distinctive?

If we are looking at these questions from a higher level before entering a form, we could also add a few that aim at finding the business objective and the user goal.
1. Why do people come to your website/application?
2. How important is it for them to register?
3. How do you make them register without having to just provide a link?

This relationship that you mention is an important one. It is the relationship between the host (the information providers), the guests (the users who are interacting), and the medium (the interface).

Caroline Jarrett — Sat, 05 Mar 2011 05:58:31 GMT

Hi Afshan

Enjoyed your article and I’m looking forward to the next instalment.

Many of the points you have made relate to what I call the ‘relationship’ of the form: the way that the form has to exist within the relationship between the user and the web site, balancing the user’s reasons for filling in the form and the organisation’s reasons for asking for the data.

As you mention, sites often just assume that the user will want to engage with the form – wrongly. I love your way of putting it: luring users into wanting to engage.

I’ll be linking back to this article from my forms advice wiki: http://formsthatwork.editme.com

Best
Caroline Jarrett

rajat julka — Sat, 05 Mar 2011 05:58:28 GMT

This is an excellent article.

Few inputs which you might like to add in your article.

There is another focused way of presenting the “registration” form to the users unlike GMAIL. On the main page of the site user is welcome with a first focused option to “register”. Have a look at www.linkedin.com . It takes the first 3 required fields on the very first page and asks for only “required fields” data entry for the registration to complete.

The emphasis here is usable and simple IA that makes sense to any novice site user for the registration process. Use of less (or only required fields) for the registration gives the breathing space to the page and excites the user that only 7 fields are required to be filled in for getting registered with the site. The less number of fields on the page enables designers to make the text fields appear big/bold/clear that gives lot of comfort to visually week users.

Even if the user is performing the registration process which is not taken with too excitement by web users (usually
because of lengthy forms and all) this simple IA helps in providing exciting user experience for the users.

Another thing which I personally have experienced in our user experience studies and I would suggest that you make should make it as a part of your research is the point of “validation Interaction”. As per my learning in the user experience studies the use of AJAX (asynchronous calls) for validating form fields have further helped in improving the user experience of forms. e.g When a user enters the intended username in the form field and he moves to the password field, the system interacts with the user by showing the message of “status” of the availability of the desired user name as entered by the user. This is an enhanced user – computer interaction where the current context of communication is not breaking as the system has responded to the user that the intended user name is not available and he/she must use another name in order to proceed with the registration process. Otherwise in the old sites (some people who still like to validate the form after the complete data entry by the users) the fields are validated when the data is submitted by the users and then the system tells them that (after entering whole lot of data) there is a problem with the very first field i.e. user name is not available or something, and that frustrates any user (novice or expert).

Meaningful interaction between user and application also enables us to design a rich user experience of form pages.

Afshan Kirmani — Sat, 05 Mar 2011 05:58:25 GMT

Praveen, I remember doing a research study on understanding cultures and languages which included your idea of mapping the country’s flag with the language.

Thanks for pointing this out. It didn’t strike me. I should have mentioned this. :)

Praveen Kumar Verma — Sat, 05 Mar 2011 05:58:23 GMT

Change Language link is in English in Gmail and this approach does not really work most of the times. If the user could read that instruction, then he does not really need to change the language in the first place. Two better approaches are either to display country flags (visually) or write the language name using the respective script. Some sites use world image map also but the downside is that some countries speak more than one language.

Afshan Kirmani — Sat, 05 Mar 2011 05:58:20 GMT

Trevor, thanks for bringing up customer influence here. I believe that they definitely play a big role but I aimed to make these pointers aware to all practitioners before we take that next step.

I will incorporate your points into the next part of my article.

Trevor Bollers — Sat, 05 Mar 2011 05:58:16 GMT

Afshan,

Excellent article. I am forever working on web forms harping on these points to developers and BA’s. The one nut that I have a tough time cracking is the customer especially when it comes to designing forms that can and should be modified from the paper version to use technologies of the web to make the form more user friendly. In many cases I end up for multiple reasons developing forms that mimic the paper form and not optimaly designed for web technologies.

For this reason I think that customer influence should be touched on lightly in this series but customer persuation left to an entirely different article.

I look forward to the next article focusing on the designer and how they use buttons versus links as well as graphics and css to help users through the form. At least I think that is what you are writing about. If not I am still excited to read it.

Thanks again for an excellent article

Afshan Kirmani — Sat, 05 Mar 2011 05:58:09 GMT

Kinjal, I don’t know where you found an association but if you did—so be it. I guess it was that both have a checklist flow. :)

Marianna, obviously a developer plays a vital role here. I took that for granted. Without him/her, nothing would be functional. Thanks for your inputs. I will try and add a bit about the developer in the next part of this article when I concentrate on the actual design and structure of a form. I would hate to bring the code in though. I hope you don’t hate me for this. :)

Marianna Samara — Sat, 05 Mar 2011 05:58:06 GMT

Great Article.

I agree that this content can be used as a “web-based form” guideline. Nevertheless, I believe that there are four people who determine the success of a web-based form. Developer is the fourth one. The implementation of designers’ clear understanding of all the details is an important step before the user helps shape the overall approach to the application form. Sometimes many innovative ideas never get into practice. Usability practitioner’s responsibility is also to work close with developers to ensure that implementations of the designs do not drift from the validated design intent.

Look forward for part II :)

Kinjal P — Sat, 05 Mar 2011 05:58:03 GMT

Shneiderman’s “Eight golden rules of Interface design” comes to my mind when I read this article.

Afshan Kirmani — Sat, 05 Mar 2011 05:57:57 GMT

I didn’t aim to focus this article on email applications alone. I wanted to provide these examples as a support. But since our readers are taking this article literally in context, I would want to emphasize again that these pointers can be used in any domain, while creating a forms structure.

I would agree that a good example with respect to luring users would be Google. I love what they do with most of their stuff. When they come out with something (even if it’s a beta version), it has to be with a bang.

I remember Rediff trying to beat Gmail at this. Their advertisements primarily focused on unlimited space provided to their users. They even integrated Instant Messaging (Rediff Bol) into their service following Gmail which lead to a 40% increase in their revenues.

Anshuman, I think we forgot a really huge aspect. In my observation, one of the good techniques that Gmail has adopted is by attracting potential customers with their social networking buzz which is their Orkut. This again is a luring factor.

Leading our way back to a forms structure, I would think that the enticing ingredient plays a huge role in getting users to move ahead. Whether it’s creating a differentiating factor from your competitors or even building an external lure (like a social network which is now buzzing around), it’s this “pull” that gets them to make that switch and become loyal.

Anshuman Singh — Sat, 05 Mar 2011 05:57:52 GMT

Talking of luring a user esp. in context of email: Not too long ago the default choice for free email was primarily Yahoo and Hotmail/MSN + a local variant (e.g. Indiatimes in India). When Google entered the game, they had an uphill task to differentiate themselves so that people move away from their one/two primary email Hotmail/Yahoo addresses and opt into Google. Afterall, it’s not easy to change people’s habit (like your Shampoo/Toothpaste).

Google changed the game by
1. using the different (not unique and neither original) interaction model,
2. allowing labels instead of folders etc.
3. Email Search with a Pedigree
4. Fantastic Anti-Spam (I rarely receive Spam in my Inbox and rarely a genuine email in my Spam Folder)
5. to top it all a huge space.

It changed the rules of the game since – forcing Yahoo to change interaction, UI, space etc. Users were enticed by the 1GB limit and the fact that it was exclusive ‘invitation only’ email (in the start). Once people started using, they were hooked – these are classic selling techniques which you will notice aplenty in the real world.

Afshan Kirmani — Sat, 05 Mar 2011 05:57:48 GMT

Sathish, thanks for sharing your thoughts.

With respect to point one, I truly believe that the best form will have users driven into it rather than them having to find it. So yes, like you mentioned, it is important to blend the form into the structure of a website.

With respect to point number two, I cannot begin to explain the number of times our users wished that their path forward through the course of a form was clear enough for them to understand. I believe that the essence here is communication. You hit the nail on the head, Sathish. :)

Your point three spoke about immediate action feedback, if I got that right. Yup, yup, yup! I wouldn’t agree with you more. I will be talking more about feedback in the next part of this article. I will take what you said into account as well.

sathish sampath — Sat, 05 Mar 2011 05:57:40 GMT

Absolutely fantastic article. This can actually be a checklist with few more addition which i would probably add to this for any webarchitect who is incharge of creating a website for his client. an idea or a schema – whatever may be the case and findings. the fact remains the same that the usability remains high priority. some more points that i would like to bring to attention so that its been discussed when the designer role is being discussed
1. how the site structure has to be laid on for the execution of these forms, the forms and the pages has to be integral part of hte entire site structure when it comest to the usability manuovering of site
2. centralisation/decentralization of forms for effective communication thro the forms for what the user is upto or what he is planning or thinking on the same. eg. varied services will be offered thro one form with just a LOV and there will be a distinctive variation from one service to the other but still be part in the same form. whats the approach that we should take in that case in the stand point of usability and clarity of perception
3. one more thing which i want to add to the list of points is the indication of result in every action of the forms designed. i always seen in addition to information on use and advantages of using any service as listed above, if action is also mentioned then the client has clear set expectation on to decide to apply a click or not. Lack of this actually increases the bounce rate on the form when the stat is analyzed as the clients expect a different action thro the click but result is varying..