Monday, May 11, 2009

Conversational Applications

One of the principles of was that it had to be conversational. This means that instead of the traditional filling-up-a-form experience of web applications, it should feel like you are talking to I first came across this when I saw the Huffduffer sign up page:

This is what I came up with for

Forms that are conversational come with a unique set of issues that you need to deal with to make them usable for the user. For one, they don't have labels, and the user has to figure out what he needs to fill in based on the context. I came up with a way to provide additional context using a sort of dynamic label that I call Callout Labels that appear when the form field receives focus (think this evolved from a tooltip suggestion by Jinesh):

How about help text? The traditional way of displaying help text around the form field was not feasible, so I had to display greyed out help text inside the form field itself that disappears when it receives focus (look at the previous two images). Although this technique is wide spread (for example, in search forms) it hit home in the context of when I came across Twitpay:

Another interesting issue is figuring out how to display validation errors. I'm not there yet with, but I like how Huffduffer does this:


Vishnu S Iyengar said...

I must say I like the UI. To be used with care no doubt, but it works for websites that don't really need to interrogate the user :)

Ram said...

some findings on this style of form design

Although the results are positive in terms of conversions, I strongly feel it works because the task needs it. Users wont be motivated enough to type a message and this approach gives them a ready-made message. I would like to know what happens if the same message is pre-filled in a message box using the traditional form design approach. (it just might work the same way)