Redesigning Gesture Icons – A Proposed System

I believe today’s gesture icons are not hitting the mark because they lack the qualities associated with good icons. I have designed an icon system in attempt to address this issue.

Update: The proposed design described below has been released as Cue.

One of the clearly understood problems associated with touch interfaces is people are often left guessing as to what gesture(s) can be performed throughout an app. There are common interaction guidelines to follow, but that can only take us so far. One of the obvious ways to help solve this issue is to articulate the interactions allowed through gestural icons.

These gesture icons act as roadsigns to an app for interaction way-finding. As expected, there has been a significant collection of gesture icon sets that have been made available to fill this need. The current crop of icons succeed in clarity, but they lack the iconic qualities necessary to act as a standard representation of gestures. My goal is to help create a foundational set of icons that are flexible, clear and distilled to a point where they could become a standard visual system to build from – ultimately to be used within apps for when explicit communication is needed.

The Proposed System

Since all touch gestures start with the application of finger(s) to screen, the system makes that action it’s foundation. Instead of representing the entire hand for a gesture, the icons focus on the point of action. The tap icon is an encapsulation of the fingertip.

The principles that drove the icon design were the following:

Create a core visual language that all gestures could build from.
Gestures will come, go and change over time. The system should be able to support that.
Distill each gesture to its core action.
The illustrative nature of most gesture icons reduce focus from the fundmental interaction being performed.
Represent each gesture in a non-literal, yet clear way.
Not everyone is right handed, nor do they perform gestures uniformly which makes literal expression less than optimal.
Design forms that would be legible at small sizes.
Mobile devices are already space-constrained. My goal was to create icons that could take up little space in a mobile interface if needed.

The whole system builds from the tap and press icons above. Below lays out the standard gesture interactions found on most modern mobile devices.


Icon Comparisons

Gesture icons, while visually clear, represent gestures very literally. This can be problematic because it insinuates that it is how the gesture should be performed. The icons also quickly lose legibility at small sizes. Luke Wroblewski took a different route with his icons, showing the the start/finish states of a gesture, which is quite helpful, but makes the icon more elaborate. Below are comparisons between the different gesture icon sets (my concept, Gesture Icons, LukeW’s icons and GestureWorks respectively).

Tap

There are a few things to notice between the icons. In the tap gesture, look at the percentage of space in each icon that is dedicated to the actual tap. By displaying the entire hand, the fingertip responsible for the tap takes a small portion of the actual icon – which is a very inefficient use of space. Showing the hand for a gesture certainly provides useful context, but the hand dominates each icon, diminishing the point of focus.

Swipe Right

The inclusion of the entire hand is all the more problematic the more complex the gesture becomes. Even with the simple swipe gesture, icons become very difficult to confidently read at small sizes.

Spread

The illustrative style also becomes problematic with gestures that can be performed in many different ways. For instance, the spread can be done with one hand or with two hands. It can be done with the thumb and index finger, thumb and middle finger, index and middle fingers, etc. It can be done with the right or left hand. Two of the icons assume the gesture is be performed with thumb and index from the right hand. Another uses two hands. My opinion is that gestures need to be abstracted beyond any specific form of execution to be successful.

Next Steps

Nearing the completion of this icon system, I ran across the work of Ron George who had come to the same conclusion as I had in the belief that standardization would require abstraction. This gives me confidence that there is something to this idea. I do not think the icons are perfect, but I truly think there is something to this idea. I am planning on releasing it as a finished set when it is at a more refined state. I am hoping to get feedback from readers to get a sense if the sentiment is shared and how it can be improved for greater clarity and aesthetics. Once I feel confident that the system is at an appropriate level of completion, I will release it for free under the Creative Commons share-a-like license.

56 thoughts on “Redesigning Gesture Icons – A Proposed System”

  1. I like your approach on this, the abstraction is just at the right level without losing any criticial information.The case with Ron George’s example, for me at least, is that it’s too abstract. 
    I really look forward too the way these icons evolve and will look into this some more. 

    1. Thanks so much Chris – I’ve been getting some really good feedback so far which makes me all the more excited to push this further.

      I’m really hoping to have something available by the next month.

  2. These are really fantastic. I think your reasoning for developing a simpler system is right on. This is clear on the smaller comparison versions. Great work!

    BTW- Small issue on your two-finger left and right swipe image. Labels are swapped.

    1. Glad to hear Callie! Interesting feedback on the finger icon – that’s going to be an interesting issue since everyone’s fingers are so different. That’s actually a vectorized/simplified version of my index finger.

  3. As a UX designer putting the “standard” gesture icons to use over a series of mobile projects, I can tell you that I did have a number of instances where the hand icons took up too much space over the wireframes. There already is a bunch of information that is being communicated, then add annotation call-outs AND depictions of interaction / transition states. Your reduced set of icons would have been the right touch. They are abstracted down from the literal hand, but not so far as Ron George’s. The key is to have immediate comprehension of what you are communicating so that the concept’s, hierarchies, layout, etc = the architecture, is what shines. Keep up your thinking and refinements.

    Once last request would be to develop a couple of sets for InDesign & Illustrator, as well as Omnigraffle. Having the vector artwork would be ideal. Thanks!

    1. Thanks Charles, I certainly will.

      When the set is released, it will probably look a lot like Iconic where there are various formats at various sizes. Dropping in an Omnigraffle and possible InDesign file as well sounds very appropriate.

  4. Worth also developing some icons that deal with larger gestures like full hand, UI swipe etc for interfaces that require bigger body movements. ( wii, connect etc) this type of gestural software is taking off so getting in at the ground level with an icon reference system would be awesome!  🙂  top work 

    1. Good point Joanne. I’m focusing on multitouch for now because full-hand gestures will require a new system altogether. That said, I would love to expand the icons to communicate those gestures at some point in the future.

  5. These are great! I second Charles’s issues with the existing icons. I have the ones you critiqued and they were very awkward to use in my wireframes – especially when trying to outline a user flow for a mobile application. There is already so much information in the storyboard – I need something that supplies the intended message using only the absolute essential forms.

    Thanks!

  6. Looks great. The only issue I see is that Spread and Pinch icons can be mistaken for “Swipe left then right” or “Swipe left and right”. Maybe the circles could be touching, or overlapping, or connected with a bar.

  7. Finding a more universal system to touch gesturing that is size friendly is a fairly ambitious undertaking.  I believe the reason it looks more like a thumb it the length of the nail itself – I see my father’s hand in this (a working man’s finer has short cropped wider nails) whereas most people see their nails as longer.  That being said, I believe this is where interpretative design allowances can be made by companies wishing to have a uniform icon set that they can also customize (such as the finger being a color and the action being another, or the shape of the arrows, fingers, etc).

    I find it easier to quickly read the Drag icons than the Swipe icons due to the full encapsulation of the finger icon. This makes the weighting of the icon towards the action of the icon heavier, whereas the open arc for tap with an arrow to indicate direction has a battle between the visual weight of the arc and the arrow to indicate direction (in all but the up direction).  Perhaps a broken full circle to indicate tap could work with this (dashed lines).  The problem I see with that is at which point does it become illegible in a small scale (radiating lines much like sun rays could help alleviate this). However that could cause issue with double and triple tapping. Another option would be to move the arc around the finger icon icon to align with the same side as the gesture arrow. This would add weight in the direction of the movement, however, this would make multi-directional icons a pain.  

    Speaking of visual weight of the icon for quick reading, another way to help provide this is to offset the circle to be more drop shaped.  Give a heavier weight to the line on the side of the movement and less on the side away from the movement could help replicate abstractly the movement of the finger in ways that the other three did much more representationally. Again this would cause issues with the multi-directional icons.

    Lastly I agree that encapsulating the two finger taps together in a single arc will help show the fingers staying together. It would also allow you to decrease the size of most of your Primary Two Finger Gesture icons.

    1. @J.M. – Thanks, that’s some great feedback. I’m still trying to improve these icons; hopefully I will have some progress to show in the weeks to come.

      @Chris – The interesting thing about pinching and spreading is that I know people who don’t use their thumb at all to perform these gestures. That’s the thinking behind abstracting past specific gestural executions. That said, I’m still trying to tweak these gestures to better articulate the action.

  8. These are very good. I’m not quite convinced by the Pinch and Spread icons, though I can’t offer an alternative. Using the thumb seems integral to these gestures; but that’s not communicated.

  9. These are excellent! The complex drawings (full hand etc.) are too complex, and unusable on the device, whilst the super-abstract suggestions of Matt Gemmell seem just too abstract for the average user.

    You seem to have hit precisely on a notation that abstracts away the hand, whilst still making it clear that one, two, three or more fingers are required, and clearly providing the applicable gestures, in a sufficiently compact form to be used right where it is needed, in the UI.

    Perhaps you might simplify even further. If you render just the finger, that adequately signifies touching the screen. Short radial spokes (think original Mac OS close-box) could signify a tap, and eliminating the half-halo might increase the ink-value of the arrow.

    Of course, shown in context in an app, it might be useful to display and animate gestures. One could argue that perhaps there should be a standard help gesture akin to the old Graffiti gesture on the Palm OS.

  10. “Once I feel confident that the system is at an appropriate level of completion, I will release it for free under the Creative Commons share-a-like license.”

    Great news! 🙂 And great suggestions. Makes sense… Would like to see what people read from it when used in a real UI. Some testing is in order, I guess.

    Cheers!

  11. Hi there and happy NY!
    Can I use these gesture icons in an app?
    It’s a mappin app that will launch in February.
    Also it would be great if you would like a copy of our app in the beta phase to I’ve us feedback on functionality and features.

    All best
    George

  12. Pingback: ios???????????????
  13. Pingback: ??????N0.1 | ?????
  14. Pingback: ??????N0.1 | ?????
  15. i like the set, now that i understand it. but i have to admit that when seeing the first two icons, without knowing what it is all about, thus my reaction in its purest and most honest immediate form, i thought that they depict a saint woman (virgin mary) or a muslim woman wearing a burka or so. i’d thus kindly suggest to design the fingertip a bit less abstract, in order to make it more obvious that it’s a fingertip. thanks!

    1. I definitely get that feedback a lot and I am tempted to go back and rethink the finger icon. If anything worthwhile comes up, I may take a stab at a new version.

  16. Just as Dan pointed my first impression on the finger was seing a nun or a covered woman.
    But your conclussions on spacing, scalability and the future evolution of gestures is amazing. Thanks a lot for this

  17. It is excellent as far as it goes, but I would like to see a more uniform application of these icons to gestures of mouse, button and touch hardware, that is, you’ve omitted the thing that is being touched. For instance, how would you indicate that a button on the side of the tablet is to be tapped, or held, if the button is not in the icon? How would you design an icon to distinguish rotating the mouse wheel from clicking the mouse wheel (yes, you can click it like a button) when the mouse is not in the icon set? How are we to deal with multi-screen touches, for instance the Microsoft Display Table in which a tap in particular direction is how a user chooses a display to move an image onto? What about keyboards, buttons, orientations and accelerometers in conjunction with taps? What about finger pressure (which indicates line thickness in some drawing apps), or styluses (starting to replace fingers in signature collection software)?

    But the seminal point to ponder is why, in a world in which mouse and tablet have equal share of the web, would an icon set only apply to one, inducing designers to invent new, and possibly incompatible, icon sets for the other, and for future hardware?

    That question is the key to discover how to Widen Your Scope. Design for the future by thinking more deeply about extensibility. You don’t have to solve it, but you can hint at potential solutions, right?

  18. I like the idea behind this project 🙂
    The simplicity of the curves and directional arrows works really well in the designs, so well I’d question the need to represent the finger at all. When I first looked at the overview layouts the finger element of the designs felt far too dominant, it’s all my eyes focused on really. I understand these wouldn’t be displayed to a user in this context other than on an instructions area or page, but as other people have suggested, the focal point seems to be the finger rather than the action. I’d look to try and reverse your visual emphasis and make the finger secondary to the action. I’d at least try and see if users could understand your iconography without the finger. The visual system you’ve developed looks consistent and quite intuitive…
    Hope that helps, or at least added thought.

Leave a Reply

Your email address will not be published. Required fields are marked *