Full Screen Gesture Widgets

Designing Six Full Screen Gesture Widgets For Mobile #

While working on an iOS app, our team became frustrated at the speed and efficiency of native mobile widget interactions. The new mobile/touch platform is still using widgets and interactions from the old desktop/mouse platform. Realizing an opportunity for new paradigms, we challenged ourselves to reimagine widgets using the full screen. The original ideas flowed from a full screen color picker which is the first widget we implemented. The color picker was the first step in creating the Conopsys (COS) widget set.

COSGestureColor—The Aurlien inspired picker is used to select colors for smart lights. Most color pickers don’t offer great interactivity and revolve around traditional RGB or HEX desktop color pickers. GestureColor creates a playful interface which takes advantage of the whole screen. The GestureColor view replaces your standard color picker using three gestures.

1. One Finger Horizontal Pan - Hue
2. One Finger Vertical Pan - Saturation
3. Pinch/Reverse Pinch - Brightness

COSGestureTime—The Rise alarm clock app made a big splash with the way it selected time. GestureTime uses Rise as inspiration and mixes in spring physics to give the control a playful magnetic-like bounce. The GestureTime view replaces a time selector using two gestures.

1. One Finger Horizontal Pan - Orientation
2. One Finger Vertical Pan - Time in 5 minute increments

COSGestureDay—For the purposes of managing recurring weekly events the seven-day week control was created. The inspiration for this came from a music studio mixing console’s motorized faders. The GestureDay view has two gestures.

1. One Finger Horizontal Pan - Switches one day to become selected or deselected on selected day
2. One Finger Vertical Pan - Switches day to become selected or deselected swiping next to day

COSGestureSlider—A nice big simple slider used to select a value. The GestureSlider has one gesture.

1. One Finger Horizontal Pan - Changes value

COSGestureSwitch—It’s a switch. The team is open to ideas on how to improve this. This is a potential example of a widget interaction made worse, but created to keep a consistent user experience. The GestureSwitch has one gesture.

1. One Finger Vertical Pan - Changes value

COSGestureMultiSelect—This gesture spawned from the the annoyance of only being able to select pictures one tap at a time. The box highlighting gesture selects a whole group of items quickly. The GestureMultiSelect has three gestures.

1. One Finger Tap - Toggle one item to selected or deselected
2. One Finger Horizontal Pan - Select/deselect a group of items
3. One Finger Horizontal Pan -> One Finger Vertical Pan - Box highlight a whole group of images

We want to start a design discussion around these concepts so we are open sourcing all 6 controls on GitHub and we will be adding them to the CocoaPods package manager shortly. The discussions will be on HackerNews and DesignerNews.

Source Code: https://github.com/conopsys