2

I'm designing an interface to ask for user evaluation on data submitted by other users and I'm stuck on designing simple and effective call-to-action on a counter icon.

Context:

enter image description here

The favorite is a toggle-icon and not relevant here.

The call-to-action should be "on" the counter icon and when user responds to the call-to-action (by clicking on the counter icon), the context will change to something like this:

enter image description here

Clicking on a thumb submits the vote online, changes back to favorite & counter icons, yada, yada... unimportant.

What is the problem (here) is how to present the 42 with "vote" call-to-action incorporated with it.

Also possible for counter icon to be displayed differently that now (rectangular with rounded corners), although this design scales best with different number of votes.

From what I can think of, some guidelines:

  • icon should be button-like to be more recognizable as actionable
  • icon should be (of holo look & feel to be) consistent with the rest of the app
  • ideally, its visual container should be scalable horizontally (to incorporate numeric characters 1-99)
Improve this question
4
  • If you are showing a vote count, what is the significance of the vote down option. If the vote shows the likes by other users then you can either like it (vote up) or not like it (leave it alone). If you look at it, by the vote down you are cancelling out a vote given by another user. Hence this doubt on vote down. Help me out here.
    – roni
    Commented Apr 24, 2014 at 12:13
  • @roni think StackExchange voting buttons: negative cancels out positive. Context here is crowd-sourced parking payment zones. So, voting down (and even going into negative) is giving users the control to let other users know the submitted parking zone is bad (in some way).
    – Dream of Electric Sheep
    Commented Apr 24, 2014 at 12:28
  • Okay. In that case don't you think it would be more useful to show how many users voted up and how many voted it down. Consider this, if 50 users voted up and 50 voted down then as of now it will show the vote count as 0 (first impression says no users have used/ voted for it) where as actually there have been 100 votes cast for the parking zone. Hence showing the actual vote count (both up and down) should serve the user better. Any views?
    – roni
    Commented Apr 24, 2014 at 12:42
  • Could be useful, but provides too much information imo. In the end it boils down to the same: 0. On the other hand, the "weight" of voting algorithm is a question on its own (b/c recent votes should have more "weight" than old ones as the data freshness is of significance in this case). But that is a matter for a separate discussion.
    – Dream of Electric Sheep
    Commented Apr 24, 2014 at 12:57

3 Answers 3

Reset to default
2

what about "shaking" the counter? if you apply a periodic small rotation left and right, like a bell ringing, and you do this with proper timing, you can drive attention to the icon and make the user interested in tapping the counter, revealing the vote icons.

This is obviously something that must be carefully used to avoid too many shaking icons across the page, I would suggest to use this to catch attention in the first runs of the app, and keep a counter of the number of times the user pressed the icon. Once he learned the path (e.g.he pressed the icon 3 times since the app has been installed) stop using this trick as it can became annoying. This is somehow in line with progressive reduction, as described in http://layervault.tumblr.com/post/42361566927/progressive-reduction and discussed in http://www.fastcolabs.com/3008419/tracking/first-time-user-experience-what-developers-need-know

Improve this answer
2
  • Shaking is a good idea to get attention, I agree, but for a single (and very important) action. Consider a list of (5-10) visible rows (like the 2 shown on screenshots in question) and all their voting/counter icons shaking :) A bit too much "action" on the screen, imo. But, if handled with care to e.g. shake them in waterfall style (top-to-botom, one after the other and each only once), that could be enough of the visual aid and also could be turned off after successful response to that call-to-action (like you suggested).
    – Dream of Electric Sheep
    Commented Apr 24, 2014 at 11:53
  • I agree. IMO this should be used on one item at a time (maybe the first one? maybe a random visible item?), and with proper non-periodic pause between the shakings. The idea is to surprise the user and drive attention... once the user learned to perform the action there's no need to move again unless you really want to lure the user :)
    – Francesco Mapelli
    Commented Apr 24, 2014 at 11:59
3

In the scenario you describe, the user has to click twice; once to get the vote control visible, and then a second time to vote either up or down. This seems like one click too many to me. It would be better if the thumbs up / down were initially visible (this is the ideal call to action), but I see in you design you don't have the space for this because of the favourite star.

Perhaps you could create more space by moving the star icon so it is horizontal to the voting icon. Probably on the left side is best in this scenario (voting buttons will be used more often that favourite, so on a mobile device you want them closer to the edge where the thumb will be), and then use more minimalistic up / down arrows so the user can vote with a single click (something similar to what stackexchange uses for voting). These buttons can be small, but take care that these buttons are distinct enough from each other to be accurately activated by touch (they will need a bit of space between).

I would avoid using green and red for the voting buttons, as I think that you may want to reserve colour to indicate if the user has already voted, and which way they have voted. The best way to use colour distinctions for colourblind people is to use saturated colour compared to a very pale one (grey / beige).

Improve this answer
0

You might add a divider to the left of the icon to denote a separated part of the list view row. Simple but I suspect quite effective.

Improve this answer

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.