In the original stage production of Peter Pan, Tinker Bell was represented by a darting light created by a small handheld mirror off-stage, reflecting a little circle of light from a powerful lamp. Tinkerbell communicates her presence through this light to the other characters. See more info here.
There is no actor that plays Tinkerbell--her existence in the play comes from the interactions that the other characters have with her.
For lab this week, we draw on this and other inspirations from theatre to stage interactions with a device where the main mode of display/output for the interactive device you are designing is lighting. You will plot the interaction with a storyboard, and use your computer and a smartphone to experiment with what the interactions will look and feel like.
Make sure you read all the instructions and understand the whole of the laboratory activity before starting!
- Read about Git here.
- Set up your own Github "Lab Hub" repository to keep all you work in record by following these instructions.
- Set up the README.md for your Hub repository (for instance, so that it has your name and points to your own Lab 1) and learn how to organize and post links to your submissions on your README.md so we can find them easily.
- Paper
- Markers/ Pens
- Scissors
- Smart Phone -- The main required feature is that the phone needs to have a browser and display a webpage.
- Computer -- We will use your computer to host a webpage which also features controls.
- Found objects and materials -- You will have to costume your phone so that it looks like some other devices. These materials can include doll clothes, a paper lantern, a bottle, human clothes, a pillow case, etc. Be creative!
- 7 Storyboards
- 3 Sketches/photos of costumed devices
- Any reflections you have on the process
- Video sketch of 3 prototyped interactions
- Submit the items above in the lab1 folder of your class [Github page], either as links or uploaded files. Each group member should post their own copy of the work to their own Lab Hub, even if some of the work is the same from each person in the group.
This README.md page in your own repository should be edited to include the work you have done (the deliverables mentioned above). Following the format below, you can delete everything but the headers and the sections between the stars. Write the answers to the questions under the starred sentences. Include any material that explains what you did in this lab hub folder, and link it in your README.md for the lab.
For this assignment, you are going to:
A) Plan
Labs are due on Mondays. Make sure this page is linked to on your main class hub page.
To stage an interaction with your interactive device, think about:
Setting: Where is this interaction happening? (e.g., a jungle, the kitchen) When is it happening?
Players: Who is involved in the interaction? Who else is there? If you reflect on the design of current day interactive devices like the Amazon Alexa, it’s clear they didn’t take into account people who had roommates, or the presence of children. Think through all the people who are in the setting.
Activity: What is happening between the actors?
Goals: What are the goals of each player? (e.g., jumping to a tree, opening the fridge).
The interactive device can be anything except a computer, a tablet computer or a smart phone, but the main way it interacts needs to be using light.
**Describe your setting, players, activity and goals here.**
Storyboards are a tool for visually exploring a users interaction with a device. They are a fast and cheap method to understand user flow, and iterate on a design before attempting to build on it. Take some time to read through this explanation of storyboarding in UX design. Sketch seven storyboards of the interactions you are planning. It does not need to be perfect, but must get across the behavior of the interactive device and the other characters in the scene.
**Include pictures of your storyboards here**
Present your ideas to the other people in your breakout room (or in small groups). You can just get feedback from one another or you can work together on the other parts of the lab.
**Summarize feedback you got here.**
Try physically acting out the interaction you planned. For now, you can just pretend the device is doing the things you’ve scripted for it.
**Are there things that seemed better on paper than acted out?**
**Are there new ideas that occur to you or your collaborators that come up from the acting?**
You will be using your smartphone as a stand-in for the device you are prototyping. You will use the browser of your smart phone to act as a “light” and use a remote control interface to remotely change the light on that device.
Code for the "Tinkerbelle" tool, and instructions for setting up the server and your phone are here.
We invented this tool for this lab!
If you run into technical issues with this tool, you can also use a light switch, dimmer, etc. that you can can manually or remotely control.
**Give us feedback on Tinkerbelle.**
Take a little time to set up the wizarding set-up that allows for someone to remotely control the device while someone acts with it. Hint: You can use Zoom to record videos, and you can pin someone’s video feed if that is the scene which you want to record.
**Include your first attempts at recording the set-up video here.**
Now, hange the goal within the same setting, and update the interaction with the paper prototype.
**Show the follow-up work here.**
Only now should you start worrying about what the device should look like. Develop three costumes so that you can use your phone as this device.
Think about the setting of the device: is the environment a place where the device could overheat? Is water a danger? Does it need to have bright colors in an emergency setting?
**Include sketches of what your devices might look like here.**
**What concerns or opportunitities are influencing the way you've designed the device to look?**
**Take a video of your prototyped interaction.**
**Please indicate anyone you collaborated with on this Lab.** Be generous in acknowledging their contributions! And also recognizing any other influences (e.g. from YouTube, Github, Twitter) that informed your design.
This describes the second week's work for this lab activity.
You will be assigned three partners from another group. Go to their github pages, view their videos, and provide them with reactions, suggestions & feedback: explain to them what you saw happening in their video. Guess the scene and the goals of the character. Ask them about anything that wasn’t clear.
**Summarize feedback from your partners here.**
Do last week’s assignment again, but this time:
- It doesn’t have to (just) use light,
- You can use any modality (e.g., vibration, sound) to prototype the behaviors! Again, be creative! Feel free to fork and modify the tinkerbell code!
- We will be grading with an emphasis on creativity.
**Document everything here. (Particularly, we would like to see the storyboard and video, although photos of the prototype are also great.)**