If you are reading this, please get modern browser.
skip to main content | skip to main navigation | skip to secondary content

Why AJAX forms need an explanation?

~ 3rd February 2006. · 10:06 CET · permanent link · printer friendly ~

Web 2.0 is currently all over the Internet. Web based applications are popping up on a weekly basis. The first contact with the future interface is usually a notification form with AJAX. Predictable or not, it has its’ reasons.

Most of the time, in spreading-the-word phase, an application’s homepage (teaser page) gives you short and sweet – a paragraph or two – overview of what it’s gonna do for you and why it’s cool. And a notification form. Nothing else, nothing more. Subscribe or not. Simple as that.

But lately, I found some of such pages too complicated for a visitor. They require guessing. And therefor they possibly fail.

The setup

I could draw a wireframe, but I’ll write it down, intentionally. The main content objects on the page are (by order of appearance):

  • logotype
  • notification form
  • headline and the main copy
  • send-to-a-friend form
  • screen shot of the application
  • more copy about the application

The target market here are not technical people, more of general population, but the premise is that they are browsing the internet regularly.

Possible scenario

Let’s say Jane Doe is not fond of giving her e-mails on every cool new web service or whatever. She would want to read all about it and then submit for a notification. We are assuming that the application is really cool enough for Jane to eventually subscribe.

Jane remembers that when she hits the submit button, the page reloads and she looses her track about the content areas on the page.

Jane here comes to our pretty cool web site. She sees attractive logo and a nice input field with a button. She tempts to subscribe, but she also sees that there’s some attractive copy text. She’ll read that first. She remembers she subscribed last week on another site and now she has a trouble unsubscribing. She wants to be sure it’s worth it.

  1. Mistake one: the subscription form before the main copy.

Okay, she reads the main copy and it all sounds great to her. She sees send-to-a-friend form. But she also sees a screen shot. She decides to take a closer look at it, plus, she has no time to wait for a page to reload after the form submission – the screen shot is much more interesting!

  1. Mistake two: missing explanation about how the page will not reload after the form submission
  2. Mistake three: the form before the screen shot.

By now, Jane already scrolled page down and saw additional text about the app. She reads some of it, glances down to the bottom and concludes that this application could be handy. But the notification form is already out of her sight and the attractive interface elements disappeared. You are already guessing – chances are she will leave the page without subscribing.

  1. Mistake four: poor exit point.

What we could do here?

If she only knew that she wouldn’t wait for a page to reload after she hits the submit button, she’d probably submit both of the forms. I’ll tell you why.

The notice about the super cool functionality could immediately raise her experience to a higher level, which would most possibly raise site’s overall convenience. She’d know that the can expect the same from that application once it’s released.

4 Comments

  1. Good article, well it was of use to me anyway, since I have recently put up one of those. No AJAX though. :)

  2. Ha! Subscribed!

  3. Nice article :)
    Love the preview and shadows on these boxes.

  4. Appreciate walking us through the scenario of how a user may step through a registration page.

    User behavior and navigation paths are so critical to the success of our sites. It amazes me how often developing sound user profiles is not tested throughout the entire development process.

    Thanks for your work.

Sorry, the comment form is closed at this time, but if you have anything to say, please send me a message.

* Please keep in mind that this is a personal web site and it does not reflect the position or opinion of my respective employers, organizations or partners.

Typetester – compare screen type Supported by Veer.

What is this?

A web log of Marko Dugonjić, web professional from Croatia. Topics covered:

Translate this site

German, Spanish, Italian, French or Japanese (via).

See you there!

Feel like buying a book?

Try with maratz.com aStore

Worth visiting

top of the page | skip to main content | skip to main navigation | skip to secondary content