Expand the interaction canvas across the device


  • Consider the entire device as a potential interaction canvas
  • Lights, speakers and ports can be repurposed to provide interaction beyond the touchscreen
  • Even the simplest input/output mechanisms can be used to convey information

The seductive, immersive glow of touchscreens risks blinding designers to alternative interaction possibilities. Indicator lights, built-in speakers, charging and headphone ports can supplement or replace touchscreen interactions with more convenient, memorable or tactile experiences. For instance:

  • Chirp uses bird-like sounds to transmit data between devices
  • Pressy utilises the headphone jack of Android devices to provide a user programmable hardware shortcut button
  • HTC’s U11 uses a ‘squeezable’ sensor on the edges of the device to control functions such as the camera shutter

These interactions are at their best when designed as part of a seamless flow, where the touchscreen and wider device form factor are treated as a contiguous interaction canvas.

Interaction sketch: seamless indicator light in a to-do list

Consider a basic to-do list interface: what if the visual interaction of swiping an item away to mark it complete was accompanied by a quick spark from the indicator light? This playful addition might drive the users’ sense of achievement and make the overall experience more memorable.

Of course, this example also highlights some of the risks:

  1. Is the new interaction consistent with system-wide conventions or does it conflict with, say, certain notifications?
  2. Can it be switched off or re-configured to the users’ preference?
  3. Has it been sufficiently optimised to ensure no lag between the on-screen and off-screen interaction?

MEX Pathway #9, our ongoing exploration of audible and tactile UI, as well as Pathway #2 on multi-touchpoint experiences, both contain a wealth of additional videos, essays and resources expanding on this theme.

The principle, part of an emerging series in the MEX journal, is summarised below in a tweetable, shareable graphic. Thank you for citing appropriately.

Subvert indicator lights, speakers  & ports to extend the interaction canvas beyond the screen

+ There are no comments

Add yours