Loomio

Graphic Design of Loomio

Denjello PublicSeen by 77

This discussion started over at github, and for obvious reasons it was suggested to move it here. It began with my recommendation to look at the usage of the hand icon for visually representing the individual decision making process. The more and more I work with Loomio, the more I realize that some tender loving care for details like typography, icons and colours will definitely help with the cohesion of the site and user identification with the process.

Denjello

Here is my original post:

Although I am pretty impressed with the interface for the most part, I feel that the hand symbols symbolizing "your position"-- are not as highly polished as the rest of the platform. It seems that the hand icons with inset drop shadows & highlights and rather dubious colour-choices appear to be slated for replacement with flat png icons as can be found in the app/assets/images/1.0 folder. This is definitely a step forward, but it still makes me kind of wonder why it wasn't decided just to use http://fortawesome.github.io/Font-Awesome/icon/thumbs-up/ because that will at least scale nicely on a retina display. (And is exactly the same icon...)

But this all got me thinking about the voting we do in our organization, and we NEVER use thumbs up or thumbs down when building consensus within the group. (Maybe we aren't hipster / Roman enough.)

We are more likely to use hand signals like these:

Agreement
sign_04_agreement

Disagreement
sign_05_disagreement

Veto
sign_06_veto

These are from a colleague Martin Mueller in Berlin, who I am sure would be proud to see them used again.
[ his website: http://183off.com ]

Here is a page with English descriptions and all the images.
https://occupyconcepts.org/wiki/General_Assembly

A German page with higher quality images:
https://diskussionshandzeichen.wordpress.com/materialdownloads/

And this is what it could look like:
newicons

naught101

Those images are way too complex to read at small resolution. The existing images are good enough hand signals, and are heaps easier to understand immediately.

Olover

I agree with the general point of the current hands being unpolished as well as the fact that they are easier to understand than what @denjello proposed. I think we would need new, clearer drawings.

However, I would like to add that the hand signals @denjello provided are different from the ones I'm used to, which I assume (though I may be wrong) are more common. Those would be wiggling fingers pointing upward to indicate agreement, wiggling fingers pointing downward to indicate disagreement, the same thing with hands horizontal to the ground for undecided, and crossed forearms to indicate a block.

I think that we need to be mindful of possible confusion resulting from using whatever hand signals are not already most broadly used (if there is indeed such a thing). Not that we have to use those - but using different ones adds to the need for clarity so that people don't mistake one for the other (such as the crossed forearms above as a block instead of a disagree).

Denjello

The reason why I thought about this is that the icons stem out of a collaboration with the Occupy movement - just as Loomio did. However - every group is likely to have different preferred symbols. Maybe we should think about "translating" the iconography?

From Wikipedia:

The thumbs up signal has a generally positive connotation in English-speaking countries. However, its perceived meaning varies significantly from culture to culture.[7]

The sign has a pejorative meaning in parts of West Africa, Iran, Greece, Russia, and Sardinia, according to Roger E. Axtell's book Gestures: The Do's and Taboos of Body Language Around the World.[8]

In Germany, France, and Hungary, the gesture can simply indicate the number one, in the right context.

In India the gesture is accepted. If the hand is wagged from side to side in a reverse-pendulum like movement while doing a thumbs up, it means "won't work" or "disagree".[citation needed] The thumbs up gesture is used on the logo of Thums Up soda.

In the United States, American Sign Language users use the thumbs up wiggled modestly left and right to indicate the number ten (10).[9] When held stationary and thrust toward another person the meaning is "yourself".[10] When lifted up by the other palm, the meaning is "help".[11]

On the internet, and most particularly at the Facebook social media site, the thumbs up gesture is shown as an icon and is associated with the term "like"—which within that context means to follow or subscribe to the page, posts, or profile of another individual or company. See Like button.

https://en.wikipedia.org/wiki/Thumbs_signal

Denjello

This by the way is another way of visualizing participation (screen capped from DebateHub video)

Olover

Yes - and my understanding is that the hand signals used in Occupy are generally the ones I described and not the ones you suggested at the beginning, @denjello - but I could be wrong as I'm not an expert.

What about just using colors instead of gestures? I might suggest green, yellow and red for agree, abstain and disagree, respectively. The block could perhaps be another color, or maybe in a different category altogether so that it is distinguished from the other three, since it has a different function or effect in my view (it indicates a change either in direction or membership of the group rather than just an opinion on a given proposal that can still go ahead).

Here is a handout we prepared once for an event we organized. Colors and gestures are slightly different, so it may be good food for thought - and I'm sure there are many other handouts like this out there!

Ben Burton

Some people are colorblind so a mix of color and symbol is important. Customization based on cultural needs may be the best way to go.

Greg Cassel

I haven't had time to think about this much, but it seems worth noting that octogons have a frequent association with international stop signs.

Olover

@gregorycassel Which makes me think that there could be a combination of color, symbol AND shape.

Ben Burton

Yes, I was considering shape and symbol as one but naturally they can and should be separate.