Redesigning Affordances

Tangible Interface
A translation of a digital to tangible interface

Brief

Many of the desktop and mobile apps we use today use physical interfaces as inspiration, mimicking the real affordances of physical objects and controls in the digital world. This assignment is about figuring out creative ways to redesign affordances and practices by doing the opposite, i.e. translating a digital interface into a tangible one. Choose a piece of digital media (could be a digital video game, a computer application, a website, an interactive film, a video-conferencing tool, a music-making app, basically anything happening on a 2D screen) and spend some time redesigning the way you interact with it, translating the existing interface into a different kind of physical interface. Redesign the interface as a physical, tangible with no visual screen or any kind of virtual, sight-based components (e.g., how would you take Tetris and redesign it as a physical game that could be played with tangible controls?). Don’t simply translate the current interface into the 3D world, but rather use this opportunity to think about what affordances and property does the “thing” possess that could be better exploited in a redesign, or are there users that are being excluded from the current interface that you could finally include in this re-imagining? 

Consider the behavior of the “thing” that as a user you are trying to control. For example, if your system featured a bouncing ball that moved with a “squishy” feeling which you cannot properly experience digitally, make sure the physical control exploits and focuses on that feel. If your animation has a sharp feeling to it, you might need an interface that has a precise, sharp feel, such as a discrete switch with a good solid “click”. You might get this by playing around with different materials, gestures, and their affordances. Design your interface and rapid prototype it with materials you have accessible to you. Or let materials you have collected inspire a completely new design direction. Document it on your process blog together with the qualities, affordances and types of interactions you were inspired by. 

Some things to inspire you: 

      • You could think of something that has a strong interface/dynamic/model/affordance which you are fascinated by or attracted to and translate that interface to a completely different context/action. 
      • You could create a physical interface or interaction for your webcam that modifies how you interact with people on video chatting tools while creating new social affordances.
      • Choose a thing’s affordance and transpose it onto another object (e.g. add a mug handle to a laptop? what would that do?)
      • Think about affordances & computing paradigms that go beyond the screen. 
Tangible controller for Angry Birds.

Tasks

  1. Choose an app, game, website, interactive film or animation, or anything digital with an interface that can be manipulated.
  2. Sketch and explore different options for converting the digital interaction into a physical one and what kind of controls it should have. 
  3. Try creating a basic prototype for the interface (it doesn’t have to work, but you should be able to demonstrate key features).
  4. Document your interface from multiple angles, upload it and reflect on your process in your blog.

GRADING CRITERIA

These are a few general criteria to keep in mind for grading:

  • How thoroughly and creatively you’ve analyzed and explored different media choices and their affordances. What we would like to see is not a mere translation of the same action/gesture/affordance in the physical world but rather the conception and ideation of an interface that more purposefully explores and exploits the affordances and interactions beyond what we have come to expect. 
  • How rigorously you were able to research, organize, plan and translate your interface and interaction design and how well you were able to analyze how this affects your users. This research and ideation should be reflected in your sketches, experiments and prototypes. 
  • The quality of reflection and documentation. How in-depth you were able to document the process and the depth of your reflection on your process, captured on your blog.

This assignment accounts for 5% of your final grade for the course.