Categories
Graphic design Interaction design

Branding with badges

Many of the early ideas were fairly conceptual: Not a place or a thing, but an idea tied to the use of Foursquare itself (“10 check-ins”) or the kind of real-world social behavior the service was attempting to leverage (checking into the same place three times in one week, or checking in with two people of the opposite sex). The round shape and circular border directly referenced Boy Scouts merit badges. Beyond that, Sheibley says the relevant design context wasn’t logos, it was the familiar instructional iconography meant to signal ideas without words: “How do you communicate to people in an airport, who don’t speak the same language, where the bathroom is?”

Summify – Rob Walker: On Slate: Branding with badges

Categories
Graphic design

Stealthie!

Nice work from Richard Hogg: Hi I’m Stealthie!

Categories
Graphic design Information design Mapping Narrative

Graphical data fiction

Sumedecina and Graphical data fiction.

Categories
Graphic design Interaction design Play video

3D secret – hidden pictures

Beautiful new exploratory game for the Nintendo DS, that uses the front-facing camera and face tracking to calculate a perspective that renders like a window on a new world.

DSi??????????????. Via BERG

Categories
Architecture Graphic design Information design Interaction design Play Research Ubicomp

Augmented reality experiments

I’m really not a fan of the goggle/glasses/helmet variety of AR, where the user wears something in front of their eyes that superimposes 3D objects into the physical world. In my experience this has been slow, inaccurate, cumbersome, headache inducing, the worst of VR plus a lot more problems. But AR is really interesting when it’s just a screen and a video feed, it becomes somehow magical: to see the same space represented twice: once in front of you, and once on screen with magical objects. I can imagine this working really well on mobile phones: the phone screen as magic lens to secret things.

Hand drawing markers

On that afternoon we didn’t have a printer handy for making the AR marks, so we took to drafting them by hand, stencilling them off the screen with a pencil and inking them in. This hand-crafted process led to all sorts of interesting connections between the possibilities of craft and digital information.

AR nail decorations

We had lots of ideas about printing the markers on clothes, painting them on nails, glazing them into ceramics, etc. We confused ARtoolkit by drawing markers in perspective, and tried to get recursive objects by using screen based markers and video feedback.

Confusing ARtoolkit

Now as it turns out there is an entire research programme dedicated to looking at just this topic. “Variable Environment”:http://sketchblog.ecal.ch/variable_environment/ is a research programme involving partners like “ECAL”:http://www.ecal.ch/pages/home_new.asp and “EPFL”:http://www.epfl.ch. The great thing is that they are blogging the entire exploratory (they call it ‘sketch’) phase and curating the results online. The work is multi-disciplinary and involves architects, visual designers, computer scientists, interaction designers, etc. Check out the simple “AR ready products”:http://sketchblog.ecal.ch/variable_environment/archives/2006/07/ar_ready_simple.html, “sample applications”:http://sketchblog.ecal.ch/variable_environment/archives/2006/07/applications_1.html and “mixed reality tests”:http://sketchblog.ecal.ch/variable_environment/archives/2006/01/mixed_reality_t_1.html with “various patterns”:http://sketchblog.ecal.ch/variable_environment/archives/2006/03/test_01_pattern.html.

This seems to be part of a shift in the research community, to publishing ongoing and exploratory work online (championed by the likes of “Nicolas Nova”:http://tecfa.unige.ch/perso/staf/nova/blog/ and “Anne Galloway”:http://www.purselipsquarejaw.org/). Very inspirational.

Categories
Graphic design Information design Mapping Place Research Travel

You are here

Categories
Graphic design Information design Interaction design Mobility Place Project Ubicomp Usability

Graphic language for touch

[one_half]

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.

[/one_half]

[one_half_last]

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

[/one_half_last]

Categories
Adaptive design Graphic design Reading Research

Design research books

What is a designer: things, places, messages

Norman Potter.
amazon.co.uk / amazon.com

Models and Constructs

Norman Potter.
amazon.co.uk / amazon.com

Design Research: Methods and Perspectives

Brenda Laurel Ed.
amazon.co.uk / amazon.com

Design Writing Research

Abbott Miller, Ellen Lupton.
amazon.co.uk / amazon.com

Screen

Jessica Helfand.
amazon.co.uk / amazon.com

Categories
Graphic design Interaction design Mapping Mobility Photography Place Urbanism

Public markup

I have made a selection of research images over at Flickr, and more of the text and research will be online soon.

Categories
Experience design Graphic design Information design Interaction design Media Narrative Television Usability

Design for television

David’s reference to 18 points as the minimum size equates to 18 pixels if you are coming from a web background.

On some iTV projects I have pushed the type down to 16 pixels, but be very careful about colours and contrast, and enquire about the production path to air: if the work is going to be transferred via DV tape, squeezed through an old composite link, or online-edited with high compression, then you might want to leave type as large as possible.

In some cases ? such as using white text on a red background ? you can add a very subtle black shadow to the type, which will help stop colour bleed and crawling effects. Even if you dislike drop-shadow effects, it will still look flat and lovely on a broadcast monitor.

Safe areas need to be taken with a pinch of salt. The default safe areas in most editing and compositing software date from years ago before the widespread use of modern, widescreen televisions.

Try extending the safe area for non-essential text in interactive projects, and consult broadcaster guidelines for their widescreen policies: many channels now broadcast in 14:9 to terrestrial boxes, and offer options to satellite and cable viewers.

The largest problem is that widescreen viewers often crop the top and bottom of the image by setting their TV to crop 4:3 to 16:9. Some cable/satellite companies remove the left and right of the image to crop 16:9 to 4:3 for non-widescreen viewers, leaving us only a tiny, safe rectangle in the centre of the image to work with.

Robert Bradbrook (maker of Home Road Movies) has a some technical but excellent information on designing graphics for 16:9 television and film formats, including a sample safe area.

There are also excellent documents on picture standards from the BBC.

But this is one thing I don’t understand: according to the BBC: “Additional [20 or 26 horizontal] pixels are not taken into account when calculating the aspect ratio, but without them images transferred between systems will not be the correct shape.” Can anyone confirm that this is the case for PAL images?