Graphic language for touch

This work explores the visual link between information and physical things, specifically around the emerging use of the mobile phone to interact with RFID or NFC. It was a presentation and poster at Design Engaged, Berlin on the 11th November 2005.

Download the icons (PDF, 721KB, Gif preview).

As mobile phones are increasingly able to read and write to RFID tags embedded in the physical world, I am wondering how we will appropriate this for personal and social uses.

I’m interested in the visual link between information and physical things. How do we represent an object that has digital function, information or history beyond it’s physical form? What are the visual clues for this interaction? We shouldn’t rely on a kind of mystery meat navigation (the scourge of the web-design world) where we have to touch everything to find out it’s meaning.

This work doesn’t attempt to be a definitive system for marking physical things, it is an exploratory process to find out how digital/physical interactions might work. It uncovers interesting directions while the technology is still largely out of the hands of everyday users.

h3. Reference to existing work

Visual references

p(caption). Click for larger version.

The inspiration for this is in the marking of public space and existing iconography for interactions with objects: push buttons on pedestrian crossings, contactless cards, signage and instructional diagrams.

This draws heavily on the substantial body of images of visual marking in public space. One of the key findings of this research was that visibility and placement of stickers in public space is an essential part of their use. Current research in ubicomp and ‘locative media’ is not addressing these visibility issues.

There is also a growing collection of existing iconography in contactless payment systems, with a number of interesting graphic treatments in a technology-led, vernacular form. In Japan there are also instances of touch-based interactions being represented by characters, colours and iconography that are abstracted from the action itself.

I have also had great discussions with Ulla-Maaria Mutanen and Jyri Engestr�m who have been doing interesting work with thinglinks and the intricate weaving of RFID into craft products.

h3. Development

rfid_iconography_circles.gif

Sketching and development revealed five initial directions: circles, wireless, card-based, mobile-based and arrows (see the poster for more details). The icons range from being generic (abstracted circles or arrows to indicate function) to specific (mobile phones or cards touching tags).

Arrows might be suitable for specific functions or actions in combinations with other illustrative material. Icons with mobile phones or cards might be helpful in situations where basic usability for a wide range of users is required. Although the ‘wireless’ icons are often found in current card readers, they do not successfully indicate the touch-based interactions inherent in the technology, and may be confused with WiFi or Bluetooth. The circular icons work at the highest level, and might be most suitable for generic labelling.

rfid_iconography_circles.gif

For further investigation I have selected a simple circle, surrounded by an ‘aura’ described by a dashed line. I think this successfully communicates the near field nature of the technology, while describing that the physical object contains something beyond its physical form.

rfid_iconography_2circle.gif

In most current NFC implementations, such as the 3220 from Nokia and many iMode phones, the RFID reader is in the bottom of the phone. This means that the area of ‘activation’ is obscured in many cases by the phone and hand. The circular iconography allows for a space to be marked as ‘active’ by the size of the circle, and we might see it used to mark areas rather than points. Usability may improve when these icons are around the same size as the phone, rather than being a specific point to touch.

h3. Work in progress

This is early days for this technology, and this is work-in-progress. There is more to be done in looking at specific applications, finding suitable uses and extending the language to cover other functions and content.

Until now I have been concerned with generic iconography for a digitally augmented object. But this should develop into a richer language, as the applications for this type of interaction become more specific, and related to the types of objects and information being used. For example it would be interesting to find a graphic treatment that could be applied to a Pokemon sticker offering power-ups as well as a bus stop offering timetable downloads.

I’m also interested in the physical placement of these icons. How large or visible should they be? Are there places that should not be ‘active’? And how will this fit with the natural, centres of gravity of the mobile phone in public and private space.

I’ll expand on these things in a few upcoming projects that explore touch-based interactions in personal spaces.

Feel free to use and modify the icons, I would be very interested to see how they can be applied and extended.

h3. Visual references

Oyster Card, Transport for London.
eNFC, Inside Contactless.
Paypass, Mastercard.
ExpressPay, American Express.
FeliCa, Sony.
MiFare, various vendors.
Suica, JR, East Japan Railway Company.
RFID Field Force Solutions, Nokia.
NFC shell for 3220, Nokia.
ERG Transit Systems payment, Dubai.
Various generic contactless vendors.
Contactless payment symbol, Mastercard.
Open Here, Paul Mijksenaar, Piet Westendorp, Thames and Hudson, 1999.
Understanding Comics, Scott McCloud, Harper, 1994

25 Comments

  1. Complexity » Graphic Language for Touch
    21 November 2005

    [...] omplexity.

    Graphic Language for Touch
    Posted November 21, 0 comments
    link

    Speak.

    Name ( [...]

  2. Chris Hand
    21 November 2005

    link to touch_graphic_language.pdf
    is a 404…

  3. Timo
    22 November 2005

    Sorted, thanks.

  4. Spudart: Links
    22 November 2005

    [...] ks

    Graphic language for touch This work explores the visual link bet [...]

  5. Nokia 3220 with NFC / elastic space
    6 December 2005

    [...] that I’ve been getting excited about with respect to mobile services, stickering and touch. First impressions Overall the interaction between phone and RFID tag [...]

  6. The address book desk / elastic space
    16 December 2005

    [...] d tea stains alongside names. Initial ideas were to spraypaint or silkscreen some of the touch icons to the desk surface, and I may well do that at some point. But for qui [...]

  7. Small Surfaces - Mobile User Interface and Interaction Design Resources. » Blog Archive » Graphic language for touch
    8 January 2006

    [...] t’s physical form? What are the visual clues for this interaction?” Link: Graphic language for touch (elasticspace.com) T [...]

  8. Beta Alfa 2.0 » Symboler fr osynlig digital kommunikation
    12 January 2006

    [...] och vill veta mer? Lugn i det stormande vattenglaset, hr finns mer ktt fr dina ben: Timo Arnall: Graphic language for touch PDF-fil med symboler Permal [...]

  9. * joseph cartman 2006 : interactive, design, motion design » Blog Archive » Elastic Space
    19 January 2006

    [...] was a presentation and poster at Design Engaged, Berlin on the 11th November 2005.” view the site

    [...]

  10. Form Follows Function » Remote Control Design
    25 January 2006

    [...] c Space talks about how design for RFID (Radio Frequency Identification) needs to define a graphic language for touch. Good software is one example of how a common GUI (Grap [...]

  11. r-echos » Blog Archive » Graphic language for touch / elastic space
    27 January 2006

    [...] ine » Graphic language for touch / elastic space This entry was posted on Friday, December [...]

  12. LOCI Logo at shingleton.org
    11 May 2007

    [...] Download the initial concepts for my logo, or have a read of Timos research. [...]

  13. louis
    14 February 2008

    this reminds me of some film work that I produced about 10 years ago
    http://www.withlouis.com/film/feed

    I hope the link is of some interest.
    (please excuse what may appear to be mere self promotion – but it seems to me to be genuinely relevant) :)

  14. mathilde renard
    29 June 2009

    Dear Sir,
    I hereby represent The ‘Banque des Savoirs’ – which can be translated as the ‘Bank of Knowledge’ – a website
    - aimed to give scientists the opportunity to present their work, as well as keeping citizens up-to-date with what was being carried out in laboratories.
    - totally free and hosting no publicity
    - its public: from 7 to 77 years old
    - financed by a french local governmental council
    You can find some contents in english on http://www.en.savoirs.essonne.fr/ (this portal content about 1% of the french version, but it may help you to understand our work).

    We are currently preparing a feature on future Internet.

    We request your permission to use images found on the page http://www.elasticspace.com/2005/11/graphic-language-for-touch, Reference to existing work, on our website.
    If so, please indicate us
    - the specific credit to be used
    - if the authorization is permanent (as long as the website is online), or for a define number of years (how many?)

    If you have any question, it will be my pleasure to answer you.
    Best regards
    Mathilde Renard

  15. LOCI Logo « fields
    21 September 2009

    [...] I’ve been developing initial logo ideas for my final year project, and have been really inspired by Timo Arnall’s research into the ideas surrounding touch (above image). Having looked at his initial concepts I sat down with the guys from Blend34 and discussed how my logo might reflect his research and also my work into Near Field Communications. I had decided on the name LOCI a while back as it reflects architectural concepts regarding a ‘sense of place’ and the ‘art of memory’. It is a kind of mnemonic link system based on places (loci, or locations), used most often in cases where long lists of items must be remembered in order, and I felt this tied in nicely with my initial concepts to do with creating a physical folksonomy or wiki.Download the initial concepts for my logo, or have a read of Timo’s research. [...]

  16. Making radio tangible
    10 October 2009

    [...] projects like the Graphic language for touch we have begun to find ways of representing invisible radio as a tangible design material in a [...]

  17. Finger food » A short introduction
    30 July 2010

    [...] image alongside this article, from Timo Arnal’s “Graphic language for touch” represents an Aura around an object. Years ago I wrote that we needed the “Ultimate [...]

  18. Wireless in the World | Physical Computing
    21 September 2010

    [...] such as the dashed line and the kinds of visual language that we have previously proposed for RFID allow us to quickly communicate aspects such as the spatial properties of wireless technologies [...]

  19. Wireless in the world | Touch
    6 July 2011

    [...] such as the dashed line and the kinds of visual language that we have previously proposed for RFID allow us to quickly communicate aspects such as the spatial properties of wireless technologies [...]

  20. No to NoUI – Timo Arnall
    13 March 2013

    [...] our work with interface technologies such as RFID and computer vision, we’ve discovered that it takes a lot of work to make sense of the [...]

  21. The Immaterials project – Timo Arnall
    4 September 2013

    […] about the ways in which wireless interactions inhabited physical space, through my work on a Graphic language for touch, and also through films such as Wireless in the world. Some of my students made beautiful but […]

  22. 对NoUI说不 | 曉生
    25 February 2014

    […] 在我们交互技术工作中,如RFID和计算机视觉,我们发现使得技术为设计所用,需要大量的工作。当我们不完全理解他们作为UI的特性时,说UI将被传感器,算法和有形的界面代替,是没有意义的。 […]

Leave a Reply