Friday, September 30, 2011

First attempt at a page redesign

Before:


The problem here is too much text! The eye doesn't know where to look. On this page, these are the primary actions the user would want to accomplish:
- log in
- view published results (does not require a log in)
- find out if they can use the system, and if so, how to get started
- get information regarding deadlines

The first two actions are small links with no real method of attracting the user's eye. They're lost in the sea of text. The third action is right at the top, but the header for it is not obvious and is easily missed to a roving eye. The last action is buried at the bottom of the page and easily missed by users with smaller screens.

After:


The first two actions are immediately obvious. These are the first places the eye goes. The third action could still use improvement. The "who can use it" part is presented right at the top, but it doesn't really attract the eye. A header is needed. Also, the part about getting started got moved to the bottom of the page where it might be missed by those with smaller screens. Still, it's clearly labeled and has much less text. The last action has been moved up to where it will appear on smaller screens and has explanations added to the different time-frames to help the user get a clearer idea of how the system works and what their responsibilities are.

I think there is still room for improvement, particularly with the third action, but it's much cleaner and hopefully answers all four issues better than before.

Wizards vs. Forms

From: http://www.uxmatters.com/mt/archives/2011/09/wizards-versus-forms.php

When to use a wizard:
- When actions need to happen in a specific order.
- When there are many tasks to be done and it would be less stressful to the user to break it up into manageable parts.
- When the actions performed differ depending on what data has already been given.

When to use a form:
- When the user should know all the data they need to provide to get a task done (like when you see a form, think it's simple enough to proceed, and then the next form asks for far more. If you knew that amount of time or data was going to be required, you never would have started at that point in time.)
- When you likely have "power users." If someone is going to be using your form repeatedly, it's better to allow them to tab through the form quickly than use a wizard and have to wait for each new step to load.
- When speed/performance is an issue. One form is one hit on the server while a wizard can be many hits and many times back and forth across the network. People with slow networks will appreciate the form over the wizard.

The general guideline (not a rigid rule): "novices and infrequent users like wizards, but frequent and power users prefer forms."

While wizards can be useful, don't forget to consider the option of allowing the user to select from multiple forms.

When deciding between forms and wizards for a user's experience, don't forget to consider coding difficulty, maintainability, and efficiency.