Hi. I'm Sara from the Media Interaction Lab and today I will present on behalf of myself and my
co-authors our pictorial Exploring Affordances of Surface Gestures on Textile User Interfaces.
Textile user interfaces can sense our physical interactions with the material and can produce
responses as a result of that interaction. Responses could be for example silencing a call,
or playing music, or opening navigation. And these different responses are considered the functions
that users can access through a textile interface. In the example on the right with the Google Saint
Laurent backpack, you can choose actions like go to the next track or silence a call for example.
But to be able to access these functions users need to produce the previously mentioned physical
interactions in the form of gestures. In the example of the backpack to achieve the result
of moving to the next song we must for example brush our hand down over the interactive area.
And while gesture elicitation studies can help to establish mappings between certain gestures
and the functions that they trigger they don't really help designers with improving
the recognition of each specific gesture. We think that this could be achieved through the physical
design of the textile user interface itself. And we think that such physical design is actually
of critical importance here because users are not yet familiar with the textiles being interactive.
And so the design of the textile user interface should passively either inform or remind users
about the possible interactions. In our example on the right, we see that the interaction area
is very clearly marked with its ribbed surface and it provides hints to the user on how to interact.
William Gaver defines these and all properties of the world
that are compatible with and relevant for user interaction as affordances, and in the
following minutes, I'll present how we applied this theory to the development of our 30 samples
of textile user interfaces that you can see in this slide.
In the pictorial, we present the visual and haptic design of creating textile interfaces
a few textile-specific methods of fabricating them, and some options of adding electronic
sensing capabilities. In this presentation, I will present only the first aspect - the design.
When developing the samples of textile user interface elements we start by considering
the visual perception. And specifically, we focus on the shape and color parameter.
In the upper example, we can see the shape parameter through the principle of
continuity from the gestalt theory, and in this example, we tend to connect all the single arcs
into a full circle, and then the slant of these lines can further indicate a clockwise direction.
And in the lower example, we can observe the color parameter in this color contrast between
the central dot and all the others being in a different color. And so this can enhance the
visual hierarchy that could provoke the user to be more likely to interact with the intended element.
When considering the haptic perception in textile interfaces we focused on the details
and the texture parameters. Details would refer to our ability to haptically recognize
differences such as height or shape or texture. So in the upper example, we can easily detect
this element even when we don't see it because of its elevated height from the base material. And
the texture parameter refers to the structure of constructive components of each textile.
I like to call these components 'natural characteristics of textiles' and they can
be used to convey specific information like how certain surfaces are supposed to be touched. So in
the lower example, most people would perform some kind of a stroking gesture on this artificial fur.
As mentioned, through the development of these samples we have gathered a very good understanding
on which of these designs might work better than others and how users might perceive them.
We clustered our insights into five categories focusing on ergonomics, visual affordances,
perception of textures, the direction of movement, and the economic usage of design elements.
I'll present two insights per category,
although the pictorial contains a few more so you can check those out there.
The size of an element has a strong impact on how we perceive the interaction possibilities.
The size can indicate whether we should interact
with a single finger or several fingers for example, like in this picture above. And
regardless of which textiles we use they usually are very flexible and they tend to take the form
of the underneath surface. So how we design that underneath surface can further afford
or hide specific gestures. In this example below, we wrapped the textile onto a top of a triangle,
and then that advanced the affordance of a pinching gesture.
Visual affordances usually provide first hints on how the user should interact
through added visual properties as well as the material itself. So in the above example, we see
that the added visual property very much supports the natural direction that the velvet already has,
and so that results in a very clear affordance
of which surface gesture is expected, and in which direction it is expected.
In between the two visual parameters, that I mentioned earlier, we noticed that color is
what usually catches our attention, but then the shape is what communicates the interaction better.
In this example below the halftone graphic going from bigger and denser circles to smaller ones
with more spacings between them, gives the user a hint on which direction to move in.
Similar to the Chubb illusion in color theory, we also perceive the same textures differently
based on what surrounds them. We tried this out in the example above, our textile representative
the circle in the middle, artificial leather would in isolation be perceived as kind of
neutrally textured. However, when surrounded with rough wadding material it is perceived as smooth,
and when surrounded with a very smooth silk-like material it is perceived as rough.
When we design interfaces for specific contexts we should also be quite careful about the
associations that specific target groups might have to some more controversial textiles like
leather or fur. So we see an example of artificial fur in the lower picture and if for example, the
specific target group that we would use here, if there are against animal skin textiles altogether,
they are very likely to dismiss this interface completely without even trying it.
Unlike traditional GUIs where it seems kind of obvious that each slider is bi-directional,
this is not necessarily the case in textile user interfaces. Some textiles might afford a very easy
movement in one direction, but then a lot of friction or resistance when moving in the other.
And we tried this in the example above, by sewing only half of each slider unit and then leaving the
other half un-sewn. And this created smoothness when moving in one direction, but then resistance
when moving in the other. We also noticed that we could use some natural characteristics of
textiles as a communication channel that conveys information. In this example below, it could show
state or progress of interaction, or rather when the interaction stopped.
And while the design space of textile user interfaces provides many design parameters,
we really should use them economically and in moderation, like in the picture above,
and actually like in all design fields as well. And another general rule for interaction design,
hierarchy, should be applied to textiles as well, so we need to choose
our textiles in very clear contrast, so that it's very clear which one is in the
foreground and which one is in the back. So we see an example of this in the picture below.
Okay, so in this talk I presented the development of several textile samples, they were all created
to explore the notion of affordances in textile user elements. How we could use the ones that
are already there, how can we create new ones, and how would they be understood by the users?
We, unfortunately, did not conduct a user study to test all of these insights, but we would like
to in the future. Further, we would like to apply several of these elements together into
full interfaces to see how they influence each other. And finally, we see a very big potential in
exploring this design space much further. And we would like to extend the invitation to all users,
designers, engineers, makers, artists, and other possible collaborators with the hope of creating
more usable and pleasant textile user interfaces of the future. Thank you very much.