Here are the behavioral and visual factors I used to inform my design of up/downvote arrows for MyMaryland.net. This is pretty extreme UI nerdiness so if you’re not in our tribe here are some kittens.
Start with UX
What are the users’ goals as they relate to your functionality? What actions does the user want to accomplish, how should the features allow them, what moods should they engender? What actions were users taking prior to voting, and what will they do after? Short answer: In our case we wanted users to be able to voice general support or opposition to a post or comment. Pretty standard. However we also wanted users to feel as though they needed to vote on every post. We wanted unvoted posts to feel unresolved, and post-vote to feel like an accomplishment akin to crossing an item off a to-do list.
Use Cases
- Users can vote up or down
- Users can change their vote
- (intentional omission: we do not want to allow users to “unvote”, although that is often desirable)
What is an “Upvote”?
What an upvote is isn’t as clear-cut on MyMaryland.net as it is on most sites with content voting. Generally, an upvote is seen as a recommendation for that content. On MyMaryland.net, however, the noteworthiness of the content is different than the primary reason most users will vote: to express their support or opposition to an opinion. Initially, we thought that the vote arrows on the list view page would express whether or not the content was recommended and that the content specific voting–whether or not the user supported or opposed it–would be done on the separate content page. I thought the distinction between vote-types would be difficult for most users to understand. For example, I thought it would be difficult for a user that has a strong opposition to an issue to both vote against it AND recommend that content, even though the expression of their opinion is a clear indication that they found the content valuable. Instead we went with one vote per post/comment.
Arrows versus Thumbs
The question of whether to use arrows or thumbs wasn’t a clear one, and the choice is likely one of the biggest decisions you’ll make when designing vote arrows because it’s the biggest variable in defining the act of voting for your users. Arrows can be cleaner visually but there can be some amount of ambiguity for users. Thumbs-up and down are a clear indication of favor, at least in the western world, but there is also a degree of casualness to them that we felt would detract from the image of serious deliberation. You give a thumbs up to a movie, not a law.
Precedent Study
As a frame, let’s look at 3 of the most well known voting arrows in use today.
Disqus, with their minimalist primary-edge arrow pair. Tailless. Grey both when unvoted and when selected.
Reddit, with possibly the most used voting arrows on the web. Tailed, grey when unvoted, orange and teal when voted.
Stack Overflow. Tailless, grey when unvoted and voted. Simple, unexciting.
Arrow Shape - To Tail or Not to Tail
A lot of vote arrows are tailless, some even bodiless, just existing as their slicing edge, such as the Disqus arrows. For younger and more internet-acculturated users the tailless geometries are often the best choice because their modern abstractions allow for the greatest degree of minimalism, but to be most clear for our older users (some in their 80’s) I felt tails would be helpful.
Arrow Angle
The angle of the arrowhead is also a consideration. Though the three samples above are all obtuse, you probably have another arrow on this screen with an acute angle: your mouse pointer. Near-right-angle arrows have a geometric stability that gives them weight and presence without being overly dominating. Acute, sharp arrows will stand out from clean layouts, having a greater degree of object-ness than arrows that blend into the rectilinear page elements.
Plus, arrow head angle is somewhat of a secondary variable since it relies on height and width for variation, if you wanted an acute arrow you’d need to sacrifice tail or width.
Arrowhead Barbs
Similarly with the angle of the arrowhead, the barbs are best kept horizontal to integrate the arrow into the page. If you want a little more objectness for the arrow then barb angle is an effective tweak because the non-parallel lines will stand out strongly.
Small Digression on the Design of Mouse Pointer Arrows
Mouse pointer arrows have a very particular job, and their dynamic form accomplishes it well. Why?
- Angled orientation, pointing to 11 o’clock: causes it to stand out strongly from the rectilinearity of most programs/pages; the body of the arrow angled at 11/5 o’clock sweeps it out of view for more precise clicking of text for us left-to-right reading westerners; the angle matches basic western eye direction of top left to bottom right, giving it a sense of pointing forward.
- Subtle barbs create even greater contrast with content while maintaining its strength.
- Acute arrowhead angle balances just the right degree of accuracy (sharpness) with presence (width).
- Black and white fill and stroke guarantee it contrasts with content regardless of white or dark theme or content.
- Drop shadow to add a little additional contrast and further strengthen its objectness.
- I’m using OSX at the moment so I can’t say how universal this is, but the perfectly vertical left cutting edge of the arrow is clever for two reasons. First, having that vertical edge anchors our precision for the arrow point, making it much easier for users to get the point on the exact pixel they choose. Second, though antialiasing is becoming less of an issue as PPI gets absurdly large, having one non-AA edge gives it solidity; the non-fuzzy primary edge makes the pointer much stronger.
Gradient
A great way to add to the directionality of the arrow is to use a gradient fade in the direction of the arrow. I kept it subtle to stay at an unconscious level. Often the best design moves are those the user isn’t aware of even though they are under its influence.
Colors
Colors are powerful tools for conveying meaning. Given that the up/downvote arrows aren’t the strongest indication of support/opposition, I felt we needed to bring big guns: stoplight green and red. I picked hues that complimented the punchy color palette of the site, then saturated to the ideal level of impact. For the contra-down I went grey with a hint of red/green, returning to the unvoted color on hover. Once you vote the color conflict is resolved, red or green wins, but if you want to switch the color returns.
Depth
Depth is a thorny issue; it tends to veer toward skeuo or look dated. I kept these arrows flat except in the down state, which are recessed. This sort of glowing void arrow clearly doesn’t look like it can be pressed; there is no button there. But the imprint of the arrow shape clearly signals it was there. And in its place the glowing light shows the effect of an action; something was activated. Our brains are hardwired that a glow is an effect caused by something.
Final
The arrows in their three states.
Weaknesses and Shortcomings
These arrows were built in somewhat of a rush. I didn’t have the time I wanted to spend on the design(always the case), but it was even more hurried than “normal”. Consequently there are some things I’d like to address in the 2nd draft.
- The feeling of resolution isn’t strong enough with the down/contra-down arrows. Maybe the colors could change hue and saturation. Maybe instead of grey the contra-down arrow could go with a subtle neutral color such as a warm grey/sea-green.
- The vote behavior isn’t instant. The superscript % and button state should use ajax to change instantly.
- The colors aren’t perfect, I’m not happy with the red and greens. They don’t have enough character.
- The arrows shouldn’t expand on hover. Yes lots of people do it but its gives a sense of cheapness. It makes icons look like decals instead of fully integrated components.