User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I need to design a radio button for selecting/deselecting items using gestures. The app is on Surface tablet. Users can select/deselect a vehicle they are intersted in.

I would like to go beyond the usual radio button or check box.

Please if you have any suggestions share links and ideas with me.

Edit: Client explicitly asked for something connected to the world of agriculture. The website is selling agricultural machines. I am ok with keeping it with a simple tap gesture but I was looking for something connected with agriculture.

Each item is quite big, it covers something like 2/3 of the screen.

share|improve this question
up vote 4 down vote accepted

"Client explicitly asked for something connected to the world of agriculture"

Perhaps you could argue the following simple metaphors:

Touch to keep. To touch is akin to identifying with something, to form a bond, or to nurture or care for something. By using the word touch you are suggesting the user wants to keep the item. It's also the simplest gesture to either select or access a list of actions.

Swipe to move on. This is like parting a wheat crop or field of grass as you walk through it. You want to make forward progress without damaging or marking the crop so you part it with your hands as you walk on (being careful where you tread). Swiping to progress is also a common gesture, eg mobile 'switch on' states where you swipe a picture or a button to access the applications, or to switch articles like in FlipBoard, or in a timeline of some kind.

Pinch to discard. This is like the 'pinching out' of plants where you remove small shoots by pinching between finger and thumb to train the plant. Similarly, by pinching to remove an item on the screen, you train your selections by pinching out the ones you don't want.

share|improve this answer

If it's truly an on/off or yes/no choice, then a toggle switch is generally preferred. Android, iOS and Windows 8 all have them:

It should of course be clear what the "on" and "off" states mean, and by default the "active" state generally involves adding a color (and for whatever reason, moving to the right). I'd recommend sticking to default controls where possible as these are recognizable controls. If you're going to roll your own switch like this, remember to make sure the drag gesture works on it; the Android and iOS ones can be dragged (I assume Win 8's can be as well).

share|improve this answer

Why not just change the highlight around the image to indicate that the image is the one that is selected?

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.
{"cc_re__cc_re__cc_by_sa_3_0": ["                    <li><a href=\"//area51.stackexchange.com\" title=\"proposing new sites in the Stack Exchange network\">Area 51</a></li>\r\n                        <li><a href=\"//careers.stackoverflow.com\">Stack Overflow Careers</a></li>\r\n                    \r\n                </ol>\r\n            </td>\r\n    </tr>\r\n</table>\r\n                </div>\r\n            </div>\r\n            <div id=\"copyright\">\r\n                site design / logo &#169; 2016 Stack Exchange Inc; user contributions licensed under <a href=\"https://creativecommons.org/licenses/by-sa/3.0/\" rel=\"license\">cc by-sa 3.0</a> \r\n                with <a href=\"http://blog.stackoverflow.com/2009/06/attribution-required/\" rel=\"license\">attribution required</a>\r\n            </div>\r\n            <div id=\"svnrev\">\r\n                rev 2016.5.24.3604\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <noscript>\r\n        <div id=\"noscript-warning\">User Experience Stack Exchange works best with JavaScript enabled<img src=\"http://pixel.quantserve.com/pixel/p-c1rF4kxgLUzNc.gif\" alt=\"\" class=\"dno\"></div>\r\n    </n"], "copyright__copyright__copyright": ["witch like this, remember to make sure the drag gesture works on it; the Android and iOS ones can be dragged (I assume Win 8's can be as well).\n\nshare|improve this answer\n\nWhy not just change the highlight around the image to indicate that the image is the one that is selected?\n\nshare|improve this answer\n\nYour Answer\n\n\u00a0\ndiscard\n\nBy posting your answer, you agree to the privacy policy and terms of service.\n\nNot the answer you're looking for? Browse other questions tagged or ask your own question."]}