1

There's a current discussion on meta StackExchange about extending a change being trialled on the Android Enthusiasts site to other StackExchange sites. This would bring changes to the voting buttons, including animation, and would include the UX site if rolled out everywhere.

The right place for that discussion is obviously the meta level, where it's now happening.

However, with regard to the voting button appearance, I want to ask a question here from a UX perspective. As a very basic principle, the visual appearance of a UI element should be such as to convey what will happen if the user clicks the element. It follows that any ambiguity or contradiction in the message(s) conveyed is undesirable. Is it just me, or does the proposed voting button appearance have this very problem?

enter image description here

EDIT: I've discovered it's browser-specific: the dots don't show up in IE or FireFox, but they do in Opera. So I'm now thinking it may be a bug rather than a design. May depend on browser versions etc but anyway I think the question of whether what the screenshot shows would be a good design, and if not why not, remains interesting.

  • Honestly I didn't even see the two dots until I read your call outs and never made the association with a smile face. It's not very obvious. Regardless I would get rid of the dots as they add nothing to the metaphor. – Mark Jun 7 '15 at 13:57
  • what do the blue dots mean? – tohster Jun 7 '15 at 16:31
  • @Mark, then I guess it may depend on the monitor how much the dots stand out. – Reg Edit Jun 7 '15 at 16:57
  • @tohster, I have no idea what they mean. In the discussion I've suggested not putting the dots there, but no one's said "ah no, we need those because...". – Reg Edit Jun 7 '15 at 16:57
3

Those are some crappy buttons

There are several things wrong with the blue dots:

  • It overloads the icon confusingly. This Neilsen article explains why icons should be used carefully. The angled up and down arrows are reasonably (but not ubiquitously) familiar. But the blue dots are not familiar and adding them to the button damages the familiarity of the up/down icons on the buttons, and hence the button's overall usability.

  • The up/down vote buttons represent a crucial microinteraction. Microinteractions are crucial to get right for crowdsourcing and social sites. So clarity and usability is very important for these buttons.

  • The blue dots are not only unfamiliar to users. First, they are blue so they actually draw the user's attention onto the most confusing part of the button. Second, they are tiny which is a double usability antipattern (don't use unfamiliar icons, and don't make them so small that visually impaired users have a hard time).

  • The combination of the above concepts often drives several undesirable behaviors for users.

    • First, it can create cognitive dissonance, because users have to pause to resolve the confusing iconography. That cognitive break can cause them to become frustrated, less likely to vote, focused on the icon rather than a good vote decision, etc.

    • Second, the weird dots can be annoying to users, in the same way that a squeaky wheel or door handle can really grate on a user after repeated use. This is another microinteraction antipattern (don't make microinteractions annoying, especially if they're used frequently)

There are plenty of other ways to spice up an interface without messing with two crucial vote buttons...you can go crazy with CSS elsewhere but changing the design of vote buttons should be done really carefully with a lot of testing.

  • I've just discovered the dots don't show up in some browsers. I've edited my answer to mention that. – Reg Edit Jun 7 '15 at 18:21
0

Well, I believe in contextual design. Maybe the up/down vote system could confuse someone who is not familiar with it, but if you already are in the context of visualizing a question/answer on a site like this, your brain probably understand what is that for a little bit easier.

About your doubt, to turn that more easily recognizable I would use a more global metaphor, like color green for good and red for bad. For example, the upvote button could be a light green and the downvote a light red.

enter image description here

But I love minimalism, and to many information could confuse user too. So I would put color on hover (another solution could be a small tooltip with a text like Upvote this question, for example).

You just need to go clean and soft, small changes in the shades of grey could help the user have a less obstructed view of the meaning of that element.

In fact, apparently websites like these have adopted this size of upvote/downvote system, in my opinion this elements could be smaller, and color and hover effects (tooltip) could be used to say what they are for more clearly.

And careful about the icons, they should be simple and easier to understand. Not very common forms could make the user think more to undestand what that means without necessity.

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.