Happy Emergency

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

1. Users can vote up or down
2. Users can change their vote
3. (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 Mouse Pointer Arrows

Mouse pointer arrows have a very particular job, and their dynamic form accomplishes it well. Why?

1. 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.
2. Subtle barbs create even greater contrast with content while maintaining its strength.
3. Acute arrowhead angle balances just the right degree of accuracy (sharpness) with presence (width).
4. Black and white fill and stroke guarantee it contrasts with content regardless of white or dark theme or content.
5. Drop shadow to add a little additional contrast and further strengthen its objectness.
6. 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.

1. 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.
2. The vote behavior isn’t instant. The superscript % and button state should use ajax to change instantly.
3. The colors aren’t perfect, I’m not happy with the red and greens. They don’t have enough character.
4. 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.

Here’s another article I had published in TechCrunch recently about political social networking. Getting closer to making big change with small bytes.

http://techcrunch.com/2013/04/19/strategies-for-building-political-social-networks/

Your brand doesn’t exist in your marketing, it exists in the minds of your customers. Simple, obvious, but it does raise a possibility: if your customer unlocks your brand meaning, that process of discovery will add a strong sense of ownership and desire.

To illustrate this idea let’s assume we have a clothing company launching a new product-line for which we’ve already developed a brand persona (a recently popular exercise involving the creation of richly developed fictional characters that embody the personality and philosophy of your brand.) Brand personas are useful visualization tools that give people permission to imagine the world through the eyes of their hero-product. Just as children who are asked “how would a smart kid answer this question?” will themselves produce better answers, so brand personas give employees the nudge to role-play beyond the professional personalities in which they’ve cast themselves and produce branding more in alignment with their brand’s values. For our example, our clothing company’s brand persona for their new product-line is targeted at young, edgy urbanites.

How do we derive the final branding from the brand persona, is it just a further derivation of the brand persona to media such as graphics and marketing materials? No, the final step is to add the customer persona, the fictional-character representation of the key traits of your customers, then find a vehicle to create your brand identity in the mind of your customer persona. Brand is not your product’s identity, it is the prism through which your customer creates that identity in their own mind.

That is exactly what A-style did, the Italian clothing company whose logo you see at the top of this post. To many, their logo appears to be a sturdy “A” with a slumping umlaut. But to their young, sex-positive market their logo in fact shows two people having doggy style sex. This was a symbol whose meaning their target market was equipped to unlock. Their customers felt a strong connection with their brand because the customer’s minds recorded it as though they thought it up.

This is an easy point to miss, and many companies don’t trust their customers enough to make the connection sufficiently and thus opt for more prima facie branding.

As an example of a company that fell into this trap, French Connection was pursuing the same market at the same time. They wanted the same young, edgy, sex-positive customers of A-style, but as their central brand vehicle their new FCUK logo required no target-market specific decoding, let alone any decoding by anyone in the world. Everyone who even glanced at FCUK reads it as FUCK, there’s no sense of personal accomplishment in recognizing it, it’s simply a here’s-our-brand pie in the face. It was edgy, it was sex-positive, but it didn’t create the same connection with its customers. It is an easy trap to create branding materials that give you the sense of your ideal brand, but it will never compete with brands that conjures the imagery in their customers’ minds.

To create a sticky brand your customers must create the brand themselves. You can bring them 90% of the way, but if they make that last 10% connection themselves they will make your brand their own.

I’ve been developing this concept for a few years on a back burner in the recesses of my mind. Over the last year or so it’s been increasingly demanding, and about four months ago I started working with Lee Shanahan on the idea.

It’s current iteration can be found here, applying for a grant to develop it with the Knight Foundation. I’d love to hear feedback, and if you like the idea please “Applaud” it.

Text/Submission: http://kng.ht/ZTZCkz

YouTube Video (2:11) : http://youtu.be/4ZjNtPbf8FY

I recently had this article published in TechCrunch, give it a read:

http://techcrunch.com/2012/11/24/blueprint-for-a-democracy-transforming-startup/

Warning: If you aren’t a designer you’ll find this uninteresting. Move along. Move along.

I spent a nightmarish 1.5 hours getting the Nexus 4 yesterday—How could G blow that it in so many ways?— and a few optical illusion UI issues jumped out at me. Let’s see what you think.

I would recommend opening the two full-size screenshots linked below to see the true before and after. With this tumbr theme the size restriction forces me to use 500px wide vignettes which minimize the impact.
Original
Modified

Before then After

And since the changes are subtle (but #4, below) here are the differences called out and the modified css.

There are really two underlying components of environmental psychology that are operative in these examples:

• We don’t see with our eyes, we see with our mind.
• Looking right is more important than being right.