Developer/Designer Notes

Designing User Input Form (with a long list of input fields)

Posted by Kiran Mova on March 12, 2007

A common User Interface issue while designing an registration form or developing an provisioning application.

Here is an article from UIE on Using Ajax for Creating Web Applications

As the author goes on to talk using Ajax to provide sophisticated functionality using easier-to-implement web standards, there is a mention of an interesting usability situation. With Ajax, it is easier to provide an Single Screen Interface for a transaction with instant error checking etc., Why would user prefer an Single Screen Interface?

One advantage of a single-screen is that users can see the big picture of the application, seeing all of the steps necessary to complete the application. This gives users a clear idea of what is expected of them during a transaction.

To implement this, one doesn’t always have to display all the fields in the same page which might result in a scroll bar. (I personally hate to scroll to see what is hidden from my view.) Instead, like in the recent websites (like netflix registration), an tabbed approach would be better. Indicate at the top of the form how many steps are involved and what data has to be entered in each step. And don’t forget to preserve the input while the user switches between these various tabs.

Another challenge to consider with tabbed approach is to make it intuitive to the user on how to proceed. Don’t hide the submit button in the final tab. Instead keep it visible at the bottom of the page. If the page cannot be submitted, disable the button and keep provide information next to the button.

here are several ways this has been implemented. While designing one has to consider the fact that user wouldn’t like to scroll the screen to see all the information. So an alternative way of indicating the user about all his steps is the design where he knows how many steps are invovled

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: