1

I have a avatars table. On hover, I want the avatar's username to appear. On click, the user will go to their personal page. Of these three types of hidden content, which would best suit this purpose?


Popover - Google Drive

Triangle Visual Aid

Rectangle - YouTube

Rectangle Visual Aid

Standard Title Attribute

<span title='Example Title'> Hi </span>

Title Visual Aid

  • The three example you give are for quite different purposes and it would be difficult to directly compare them. Could you clarify your question? – James Fenwick Apr 2 '16 at 16:19
  • @JamesFenwick I have a avatars table. On hover, I want the avatar's username to appear. On click, the user will go to their personal page. Of these three types of hidden content, which would best suit this purpose? – Cøde Play Apr 2 '16 at 16:22
  • ux.stackexchange.com/a/92240/69252 has a good example of when to use popovers – James Fenwick Apr 2 '16 at 16:30
1

Before getting to the solution, some clarification on the question.

Asking "How the user likes the hidden content styling" is pretty broad. Hidden content could represent:

  • Accordions - Showing content after some action
  • Tabs - Showing content after some action
  • Popovers, Tooltips etc...

Each are meant for a type of functionality like:

  • Type 1 - Showing app content. Like accordions or tabs... They hide content so that the user can have a cleaner and focused navigation. The content is a part of the app flow.

  • Type 2 - Showing content which gives some more information about the element/item/section. Tooltips for example. They can be used to show the user what the element/item is about or provide some hints on what to do.

So if this is to be considered, the question could have been phrased a little more specifically.

Now coming to the solution. You can use a popover/tooltip to show the username for the avatar. Having it like style 1 can be a good option.

As you mentioned that it is an avatar table, will having username not be a good option as a table column? This will help the reduce work from the user's side. Username can be an important detail to be shown. So having the avatar icon in one column and the username in other column could also be one solution to consider.

If it has to be designed the way you mentioned then option 1 can be a good option.

Suggestions: Crafting design and choosing elements appropriately can help dissolve a lot of design issues. Showing elements with proper design attributes and elements will help carve a good user experience.

Hope I could help you with some thoughts if not the solution :)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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