Thanks Pau, thats a helpful overview of the issues at hand.
* * * * *Jared Zimmerman * \ Director of User Experience \ Wikimedia Foundation M : +1 415 609 4043 | : @JaredZimmermanhttps://twitter.com/JaredZimmerman
On Thu, Oct 24, 2013 at 4:45 AM, Pau Giner pginer@wikimedia.org wrote:
Hi,
There are different topics discussed here:
*Similar icons*
Similar icons are not bad thing per se, provided that (a) they are distinguishable, and (b) the similarities and differences create a system that makes sense (in which case facilitate learnability).
For example, the Facebook app for Android (view examplehttp://i.imgur.com/7efCJFw.png) shows the following icons: three lines (hamburger) to represent a list of options, a human silhouette to represent friend request notifications, and the human silhouette with three lines to represent your list of friends.
In our case, a callout represents a message, a smiling face is a user, and a smiling face within a callout represents sending a message of gratitude to a user. So I think that it makes sense for the representations of such elements to have much in common.
The relevant question here in my opinion is whether this system works. For that, personally I really like to evaluate icons in context: ask a user a task that requires identifying, understanding, and using the icons, and identify problems.
*Faces in icons* Faces are a powerful tool to attract our attentionhttp://thevisualcommunicationguy.com/wp-content/uploads/2013/07/DesignPrinciples_AnthorpomorphicForm_McCloudFaceShapes.jpg, so they should be used with caution. Many sites use your own picture to represent you as a user. Seeing your own picture is very effective to attract your attention. Using a face to represent the user goes along those lines as an alternative to use profile pictures.
A face also adds a human touch. Chromehttp://www.codinghorror.com/blog/2009/03/why-cant-error-messages-be-fun.html or YouTubehttp://worldcadaccess.typepad.com/.a/6a00d8341c19df53ef0168e89f2426970c-pi use them in error messages. The Android contacts and the messaging app iconshttp://developer.android.com/design/media/iconography_launcher_example2.png may be the closest examples to our context (use of faces related to communicating with people).
*The flag icon*
Adding a face to the flag icon was just an attempt I did to extend the system (that probably went too far). The rationale was just to present "thank" and "report" as alternative actions. Although we want to move from a mental model of voting (e.g., thumbs up/down), I wanted to keep the UI compatible with users that came with that mental model.
If a regular flag is used, actions will look independent (and not helping to understand one another). However, it provides two bigger benefits: (a) avoid having too many faces, (b) consistency with flag icons used in other contexts. So I'm happy to replace this with the standard one.
Pau
On Wed, Oct 23, 2013 at 1:38 AM, Quiddity pandiculation@gmail.com wrote:
On 13-10-22 03:54 PM, Brandon Harris wrote:
On my desk there is a book called “Understanding Comics”. Ithas a whole section that goes into how various degrees of fidelity with comic drawings, icons, and photographs create empathic connections.
I would encourage everyone to read this. Your take away islikely going to be that you shouldn’t show any kind of facial features at all, nor should you pick a color for your icon other than black, white, or grey.
Seconded. This is one those books I believe everyone should be assigned once in middle school, and again in high school. It is dripping with insights. I've gifted a few copies to teacher-friends.
______________________________**_________________ Design mailing list Design@lists.wikimedia.org https://lists.wikimedia.org/**mailman/listinfo/designhttps://lists.wikimedia.org/mailman/listinfo/design
-- Pau Giner Interaction Designer Wikimedia Foundation
Design mailing list Design@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design