3

enter image description here

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.

5

Rethink and optmise labeling

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

source: Information architecture: labelling for websites

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.


Expand or replace the module tab

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: enter image description here

The above layout will help users concentrate on filling the form and remain task-focused while also removing any unnecessary distraction.

4

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:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

  • 1
    I guess the what is this help is about the entire page and not specific to controls. – Harshal Mar 5 '15 at 7:58
0

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.

enter image description here

Not the answer you're looking for? Browse other questions tagged or ask your own question.