5

This question already has an answer here:

enter image description here

Right now the interaction is that when you click the small "i" icon next to a questions, additional text displays for clarification. (Shown in the example "Carrying anything that makes it heavier?")

My questions are: - Is it better to use "i" or "?" for this icon?

  • Is it ok to have the help content appear inline like this or is it better to have it in a tooltip box? I like it this way because it doesn't cover the existing content and it doesn't have to be closed out to continue.

  • In material design how would you do this type of tooltip? The only documentation I can find is here and it's not quite the same scenario.

marked as duplicate by Andrew Martin, Ken Mohnkern, Matt Obee, JohnGB Nov 21 '16 at 11:46

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

  • This may likely have a cultural variation - so it would be useful to outline the countries / languages of potential use of this app. Is it US only ? – PhillipW Nov 4 '16 at 19:26
1

The ? in a circle is promoted by AIGA and used by the USDOT, but the lower-case i reversed out of blue has been the ISO symbol for information forever (my memory says 50 years or more).

So there is no clearcut answer.

You can follow the ISO convention and be safe, because it is the ISO! Or you can follow the AIGA convention and feel comfortable about the fact that the ? glyph is used for "question" across all major languages whether they use the Latin-origin charset, the Kyrillic-origin one, or one of the East- or South-Asian ones. (The Greek and Armenian question marks are different, but speakers of those languages will recognise the ? glyph)

Or, of course, you could use both.

  • Interesting information, but this doesn't provide an answer to the question. – maxathousand Nov 4 '16 at 19:46
  • It did, but implicitly. So I fixed that, and appreciate your comment. – MMacD Nov 4 '16 at 20:34
1

The ? is very common in desktop software namely in Windows and macOS. Nevertheless both symbols exist in Material Design. Typically the i is a shortcut for quick information, and ? more extensive documentation as it is common in desktop software (the tooltip is an hover effect so when a user goes to the trouble of pushing a button it probably wants more than that).

For a touchscreen app, however, since Material Design accepts both symbols I would go with i. My arguments are:

1) It seems far more appropriate for what you are trying to do (small comment).

2) Your app already presents the ? mark at the top, so the i would create an healty contrast.

One last comment that, from my point of view, is relevant (although many times neglected) is that these kind of symbols typically appear in shapes that differentiate them considerably from other iconography. Note that the i and ? specifically appear as a circle in the great majority of software I have ever seen.

This might create some aesthetic problem considering other buttons in your app are also round but I would advise you to make some sketch tests to see what works best (intuitively your square info button doesn't seem right, but I can't seem to pinpoint exactly what is bothering me: the shape, the color, the choice of i, etc.; I would definitely draw some different models and see what comes up).

To answer directly to your questions:

1) I think the system you choose for the tooltip seems very adequate if the message is never big (so the displacement of the widgets never makes the user loose orientation).

2) I don't think your choice of tooltip is inconsistent with material design but you are right. I also can't seem to find any documentation regarding this specific point. hgshh hdsh hdsfh

0

From the example you've given, it seems the better choice would be to always show the explanatory text:

  • It seems the explanatory text provides important information on how to answer the question.
  • The user can gloss over it if they are confident they know the answer to the question as summarized.
  • Hiding the explanatory text by default doubles or triples the number of taps required to complete the task.
  • Showing and hiding the explanatory text is an additional mode the user needs to be aware of.
  • Showing and hiding the explanatory text moves elements around, murking up the user's spatial model of the screen.

But if you insist, I'd argue for using ?:

  • There's already a ? icon in the header which does something similar (provide information). Using the same icon reinforces the association between the icon and the action.
  • Using the same icon also removes the need for the user to learn what an additional icon does in this application, or what the distinction is between ? and i. UX geeks care about pedantic distinctions; users don't!
0

I would go for i for tooltip next to the button/or function, cause i is common used on tooltip and it's likely represent a quick tip/information about the function

on other hand ? more like a link to show a whole different page with all of Q&A or help on the app/web

Thew way I see it you already using the correct icon on your app

0

Clicking the small "i" on a mobile screen might not be the most pleasurable experience, depending on the screen size of course.

But like some of the answers mentioned, depending on the importance of the help text, it might make sense to have them displayed by default.

And maybe convert them to an i or ? after the user has seen this screen 5-10 times. So by then we know he has read the imp info, and can view it again if required.

It might be useful to see the usage trend and understand how (un)important this info is.

In this very specific case, i do not think"?" should be used. Your main text is also a question and ending with a question mark. I feel that 2 questions marks in close proximity might be confusing initially

-1

Why don't you test It? Make a research with these two options and ask for answers.

Example: What icon would you click to see more information about? (put your icon with the same shape and color you'd use on your layout).

a) ? b) i

If It is important for you at this moment, you must test It with your target.

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