User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.
Sign up to join this community
The web application I work has "What is this?" for most of the pages. Currently we place them at the top right corner.
Tab occupies only 70% of available space and help text occupies 30% and the space below the help text is left empty.
How could redesign this page so that I could occupy the empty space and also ensure What is this? is always visible.
Is your "help text" really a help text or an "introduction" to the form ?
I think you should start by rethinking the label "what is this?" as it has a number of flaws:
The three most common mistakes website labels should avoid are:
- Ambiguity
- Superfluity
- Repetition
This label lacks any form of description which creates ambiguity. Also, using a question format reduces users ability to anticipate the type of answers to expect.
On the other hand, using a more descriptive label allows you more scope to add a variety of content that would not necessarily fit in with the question answer format which could prove useful if you want to expand on subject in the future.
Having rethought your "what is this" label you could then maximise its use by having it introduce the content of the page in a much more user-friendly manner. your new title will give a clear idea about why users are asked to fill a form which will help them focus their attention on what to do next.
Without completely rethinking the design I would suggest that you review the content of your module tab and see if the design could be further optimised by expanding it to full width and using a progress bar instead. a rough mockup below:
The above layout will help users concentrate on filling the form and remain task-focused while also removing any unnecessary distraction.
Instead of wasting all that space for a static help box, how about having true context-sensitive help? Add a help icon next to things that you feel the user may need help with, and when they click or hover on it, show the help on a popup. Like this:
download bmml source – Wireframes created with Balsamiq Mockups
I did not quite understand if the help text is different for different parts of the form. If they are, then it should be ordered together with the form so that its relationship to the form is clear.
