4

Where do you accommodate the field explanation for the input element when following the material design input design. Bootstrap implements it in a very straightforward manner since it has static labels

The problem I'm encountering is whether to show the tooltip icon only when the input element is in focus, or to show it to the side at all times. The issue with the latter is that it is hard to relate the icon to its corresponding form element when dealing with larger forms - ie: it'd be easier to associate if the icon was closer to the label itself, unlike in the screenshot attached. Any insights would be appreciated.

Improve this question

2 Answers 2

Reset to default
1

Depending on the size (and the purpose) of the tooltip I usually place any relevant helpful info right below the input element.

If I am trying to provide information about proper input rules (e.g password fields) I make sure the info is always visible and under the correct input.

This helps with a couple of things:

1) The user doesn't have to click on the input to see the helpful information. If from the start I inform her that "Password needs to be at least 8 characters long and include symbols and numbers" then the user is prepared to use an appropriate password reducing the chances of failing the form completion and decreasing conversion rates.

2) It makes it easier for responsive design. "Floating" tooltips tend to be quite precarious with their placement in different views, especially mobile devices where there is not enough space. If the information naturally sits below (and you can still make it look like a tooltip) then applying responsive rules to the form (even retroactively) tends to be easier.

Here is an examples straight from the Material Design guidelines

enter image description here

P.S I follow the same rules with inline validation (i.e informing the user if the info they provided is correct or not)

Improve this answer
4
  • This makes sense in your case. But the project I'm working on uses a shade of red as the brand colour. I'm hence using a dark gray to indicate validation as the case is in your screenshot. I'm afraid a user won't be able to differentiate well between an input validation and the input information, despite the fact that the information is shown before the user even enters the form field.
    – Adarsh Sosale
    Sep 4, 2017 at 13:02
  • Should you wish to you can choose different colours to indicate error states. I imagine, even though your branding is red you have a way (or colour) to identify errors correct? Are you using gray to indicate both success, alert and error?
    – Socrates Kolios
    Sep 4, 2017 at 13:15
  • Unfortunately, that is the case. We're using 3 shades of grey to go with the brand red. I'm negotiating over using italics or varied font to indicate errors. This poses a very unique problem.
    – Adarsh Sosale
    Sep 6, 2017 at 9:51
  • Yes, albeit colour should not be your only indication you need to find a more easily identifiable differentiator between these states. A suggestion: Consider the addition of iconography as well.
    – Socrates Kolios
    Sep 6, 2017 at 12:54
4

Tooltips are text labels that appear when the user hovers over, focuses on, or touches an element.

Tooltips identify an element when they are activated. They may contain brief helper text about its function. For example, they may contain text information about actionable icons.

If you show it to the side all the time -

  • You are going against users mental model.
  • It will be unwanted content for users who are familiar with the form/field.
  • You might force all users to read it even if they don't want to.
  • It will make the UI look complicated, and unnecessarily add confusion.
  • It makes the task difficult to complete.

Edit:

I misread the icon part in your question.

Place the icon next to label and keep it visible at all time.

Improve this answer
2
  • These tooltips are very much needed in the context of the application. Using static text labels are much worse than showing them as tooltips. But what are you suggesting I replace the tooltips with?
    – Adarsh Sosale
    Sep 4, 2017 at 12:58
  • You're confusing things. Your source talks about not always showing the TEXT, becuase it adds a lot of extra text to read. But the question is about whether or not to show the ICON.
    – PixelSnader
    Sep 4, 2017 at 20:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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