Why AJAX forms need an explanation?

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.

Marko Dugonjić is a designer specialized in user experience design, web typography and web standards. He runs a nanoscale user interface studio Creative Nights and organizes FFWD.PRO, a micro-conference and workshops for web professionals.

Interested in more content like this?