6

On a portfolio site, after a project's title & description of things done on the project, there is a "skills used" section at the very bottom. Each skill is styled as a tag. They are not clickable, nor intended to be.

While watching somebody use this portfolio site on a tablet, they kept trying to touch/click the tags. It had not dawned upon me that they resemble buttons.

How should this be addressed from a usability perspective, considering that there is no intention to make the tags clickable? (For example: clickable to a list of all portfolio projects that have that tag)

Is it acceptable to leave these particular tags styled the way they are? If not, what is better way to style them other than as a comma-separated list?

enter image description here

4 Answers 4

3

I think the main problem is, the shape of each tag (i.e. rounded corner with inverted color) and the way they are presented together, makes them look like they are clickable keyword tags that people.

The only way to eliminate the possiblilty of people clicking on it is to get rid of that perception of affordance.

Keep in mind, the inverted color also reduces legibility, so by moving away from rounded corner inverted box, you'd be killing two birds with one stone.

If you're looking for a clean, creative, and legible way to present them as non-clickable items, then consider putting them in a 5 evenly-spaced column of bulleted lists.

2
  • That's a great idea, and I will try that. I don't know why I hadn't thought about bulleted lists, as each grouping of data is interrelated. And I did not know inverted color reduces legibility, that's fascinating. I'll have to read up on that. I will give the columnar bullet lists a shot, removing the rounded corners. Apr 22, 2016 at 2:43
  • The problem with bullet list is that they take up a lot of vertical space, and they use only a minimal amount of the horizontal space.
    – dr_
    Apr 22, 2016 at 7:40
2

What about simply do not use shapes for tags. Shapes evoke affordance (the idea that an object is usable in someway), while simple text does not.

Check the image below.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

1
  • Second that. If a tag is not clickable, my preference would be text tags, separated with spaces or commas "Tag 1, Tag 2, Tag 3" - if the your design guideline allow for that. Tags in icons (even stylized) may still look like clickable elements to some users.
    – Odie
    Apr 22, 2016 at 9:58
0

From your observation there is clearly a disconnect between the way the tags are styled and the users' expectations of what the interaction with them should be. Without knowing what the rest of the UI styling looks like, the only suggestion is to align them to other static UI components to avoid the confusion. You can also change the mouse pointer behaviour to ensure that the users know it is not interactive.

3
  • There are no other UI components below the tags, and above the tags is just paragraph text. The tags are not styled with an interactive mouse pointer either, and this problem happened on a tablet. Apr 22, 2016 at 0:43
  • I think you'll find this to be the cause of the problem. On a touch display device like tablets users expect some interactions, and styling the tags like a button is going to have that effect, especially on mobile because there are no hover-over behaviour. Is there a reason why you don't want to do a comma-separated list as it would be one logical solution? I would perhaps style it as a plain table with header columns and that could solve the problem.
    – Michael Lai
    Apr 22, 2016 at 2:24
  • I was avoiding comma-separated values because it would jumble everything together, which is what I ended up with with this rounded-corner tag thing anyways. Apr 22, 2016 at 2:40
0

You should use the correct icon to convey the image of a tag. Some simple examples are below (to be scaled down).

enter image description here enter image description here

Personally I like the rectangle with a folded ear. I remember having seen a Stack Exchange site which uses them in a more stylized version (B&W), but I can't recall which one.

Your Answer

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

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