Final Project User Testing

Instructions:

Today, you will submit your Final projects for user testing. Please pay attention to instructions given in class and read the information below.

If you are conducting user testing:

Do not explain or give a presentation on your project. Simply observe how the user interacts with your project and take notes/document this. Do not try to sell your project or explain how it works. Limit your communication to explaining the bare minimum that is necessary for the user to use your project, and allow them to try and figure everything else out. If they have questions, guide them towards finding the solution on their own.

After they have used your project, ask them about their experience, question observations you made while they were testing, as well as any questions you prepared beforehand.  Take note of how their answers address your project’s interface, accessibility, predictability, learnability, etc. Listen to their feedback and any ideas they have about how your project can be improved.

If you are participating in the user test:

Go around your group and user test your peers’ final projects. As test these projects, make sure to verbalize every action or choice you make during your experience. Make sure to communicate these decisions to the presenter and also communicate any confusing or unclear aspects of the design. After testing, answer any questions  honestly and  provide feedback about your user experience.

Recitation 10: Making a Media Controller

Recitation Exercise

In this recitation, work individually to create a Processing sketch that controls media (images or video) by manipulating that media’s attributes using a physical controller made with Arduino. Reflect on this week’s classes to guide you in your coding process, and think about how you can incorporate interactivity and computation into this week’s exercise.

Arduino: For the physical controller, incorporate digital and/or analog input to your Arduino. These inputs should have a clear correlation to however they manipulate the media in your Processing sketch. To make your controller, you may use components from your kit, or check out and use sensors from the equipment room.

Processing: You may choose to use video, live video via webcam, or images as the media you will control in Processing,. If you do not have authorship over the media that you use for this exercise, make sure you credit the source. Here are a few resources for public domain and creative commons videos and images:

 

Document your work on your blog. Use this week’s reading, Computer Vision for Artist and Designers, to inspire you to write a reflection about the ways technology was used in your project.

Recitation 9: Serial Communication

Recitation Exercises

Working individually, you will complete the following exercises to send data from Arduino to Processing (and vice versa) using serial communication. You can find some example code that might help you here. Make sure to document each exercise, a schematic for each circuit that you make, and the interaction involved for each step. 

 

Exercise 1: Make a Processing Etch A Sketch

Image from Amazon

 

For this exercise, use Arduino to send two analog values to Processing via serial communication. To do this, build a circuit with two potentiometers and write an Arduino sketch that reads their values and sends them serially. Then write a Processing sketch that draws an ellipse and reads those two analog values from Arduino. This sketch should modify the ellipse’s x and y values based on the input from Arduino. Just like an Etch A Sketch, one potentiometer should control the ellipse’s x-axis movement, and the other should control the ellipse’s y-axis movement. To see how an Etch A Sketch works, you can watch the video here.

 

Exercise 2: Make a musical instrument with Arduino

Write a Processing sketch that sends values to your Arduino based on your mouse’s x and y positions and/or keyboard interactions. Then, make a circuit with your Arduino and a buzzer. The corresponding Arduino code should read the serial values from Processing and translate them into frequency and duration for a tone, which will be sounded by the buzzer (hint: you can use the tone() function to achieve this) . Consider the video below as a starting point for designing this musical instrument.

 

 

Recitation 8: Final Project Process

Recitation Exercise

In today’s recitation, you will sit in groups of four and present/discuss each member’s project preparatory research and analysis. Time for reading, presentation, and to reflect and begin drafting the Project Proposal will be allocated as follows:

 

First 15 minutes:

In groups of four, those who have prepared will read each of their group mates’ documentation blog posts (Preparatory Research and Analysis). Each member’s blog post can be found on the documentation blog. Make sure to read and take notes on each post.

Next 40 minutes:

After reading, everyone should close their laptops and listen to individual presentations. Each member of the group will have 5 minutes to present what they wrote, from points A-D. After this 5 minute presentation, the presenter will have 5 minutes to receive comments and feedback from other group members. During this time, the presenter should not talk at all; instead, presenters should just listen to their peers’ feedback, and take notes.

As a guideline for providing good feedback, avoid using “like” and “don’t like”; instead, use “this works” or “this doesn’t work”, and why you believe this.

Final 15 minutes:

Once presentation’s have finished, individuals will have time to read the “Project Proposal Do’s and Don’ts”. Students may then begin drafting their Project Proposals.

 

Before Recitation:

Preparatory Research And Analysis

In this assignment you will create a blog post in preparation for your final project. You will bring this blog post to the recitation on November 9. During recitation, in groups, you will share your research and writing and gather feedback from your peers. Your blog post should include the following points:

A. Go back to your definition of interaction as you defined it during the group project. How has your work in this course involved that definition?

B. Based on the initial definition and your experience developing and executing your midterm project, how has your definition of interaction evolved? Be as specific as possible.

C. Research two other interactive projects, one that aligns with your definition of interaction and one that differs from it.

  • Discuss why the first project lines up with your definition and why the second one clashes with your definition of interaction. Be precise, as always.
  • In your research process, you are strongly encouraged to consider interactive projects and experiences drawn from and in a variety of sources, media, materials, formats, etc.

D. Write a “new” definition of interaction in your own words. Draw from your account above and try to evolve your definition beyond the current convention. It should be polished and professional: imagine it will be printed on IMA Interaction Lab’s next course syllabus!

  • This definition should reflect the evolution of your understanding of interaction through both the above research and analysis process as well and your semester engagement with course readings, discussions and work.
  • Your definition may not replicate something you have read. You are an original, you will arrive at this semester’s end with an understanding and practice of interaction of your own—not others’—making!
  • Again, as in every step, be specific, give details.

Recitation 7: Processing Animation

Recitation Exercise:

Working individually, you will integrate the coding elements from this week’s classes to create an interactive animation in Processing. You may animate your creation from Recitation 6, or draw and animate something completely new. Regardless of what you choose to animate, your Processing sketch should include some level of interaction (i.e. keyboard or mouse). Take a video of your interactive animation, and upload this, along with your code, to the documentation blog.

 

Loops:

Variables:

Transform functions:

Keyboard interaction:

Mouse interaction:

Environmental variables:

================================================================================

Recitation Homework:

Instructions:

For each of the steps below, create a Processing sketch that satisfies the criteria in the description. Take a screenshot and a quicktime video of the sketch after running it, and upload this to the blog along with your recitation exercise documentation.

Step 1:

Create a Processing sketch with a circle or square at the center of the screen. Your canvas size should be 600 x 600.

Step 2:

Next, modify that Processing sketch so that the circle or square periodically expands and contracts, like the circle in this gif.

Step 3:

Then, modify the Processing sketch so that the the the outline changes color smoothly, as seen in the gif below. HINT: use colorMode().

 

 

 

Step 4:

Finally, modify that Processing sketch so that the circle or square moves around the canvas based on your keyboard’s arrow key input. As an added bonus, you may make your canvas’ edges a border that the circle or square cannot pass.

 

 

Recitation 6: Processing Basics

Recitation Exercise:

For today’s exercise, you will be working alone to draw an image in Processing based off of any image that inspires you.

 

Step 1: Choose an image to be your motif

To complete this exercise, you will need an image to use as a motif which you will eventually emulate and draw in Processing. Begin by selecting an image that inspires you. This image can come from any source, so for your documentation you should download and cite where this image came from and by whom it was designed. Some suggested sources that you may use can be found below:

 

 

Step 2: Draw your image in Processing

Considering your motif as a starting point or inspiration, draw a new image with Processing using any 2D primitive or vertex shapes. Your canvas size should be at least 600 x 600 pixels. To draw your new image, you may directly emulate your motif’s design or create an entirely original interpretation of the motif. Then, using the functions and methods covered in class, modify any shapes and adjust color to enhance your design. Using paper to sketch your idea before you begin coding may help.

You can use the following functions to help compose your drawing:

For other Processing questions, please feel free to review the reference site.

Documentation:

Document your work on to the blog. Start by uploading the image you chose in Step 1, and add a description of why you chose this image. Then, discuss what you wanted to draw in Processing and your method of achieving that goal. Consider how your final creation is linked to the motif, and in what ways it is similar and different. Do you think that drawing in Processing was a good means of realizing your design? Please make sure to post your code and a screenshot of your final sketch in addition to the information above.

Midterm Project User Testing

Instructions:

For today’s recitation, you and your partner will conduct user testing for your midterm projects. Please read the notes below on how to conduct your user testing. The format of the class will be explained in class.

If you are conducting user testing:

One partner should conduct the user test by presenting their participant with the project. Meanwhile, the other partner should observe, record, and take notes of what interaction happens during the test. Make sure that if you are conducting the test, you do not try to sell your product or explain how it works. In fact, limit your communication with the tester as much as possible and allow your participant to try and figure your project out; Do not explain how it works! If they have questions, do not simply provide an answer but guide them towards finding the solution on their own.

After they have used your project, ask them about their experience. You may ask prepared questions, but also ask about any occurrences you observed during the test. Take note of how their answers address your project’s interface, accessibility, predictability, learnability, etc. Listen to their feedback and any ideas they have about how your project can be improved. Take notes to ensure you collect this data for later study.

If you are participating in the user test:

Your job is critical for providing the testers with useful information about how their project can be improved. As you go about testing their project, make sure to verbalize what you are doing and why you are doing it. If you stumble across something that is unclear, make sure to communicate this to the testers.

When you have concluded the testing, please answer any questions that your tester’s answer honestly and feel free to provide feedback about your user experience.

 

 

Recitation 5: Visual Communication

Recitation Exercise:

For your group research project, you and your teams designed a theoretical interactive device that humans living in the year 2118 would interact with. To visualize your project, you used cardboard and other materials to create a physical paper prototype of what this technology. For this week’s recitation, imagine that you will be presenting this device to an investor or selling your technology. Working individually, design a poster that advertises this interactive device and communicates how it works/ what it does/ how it is interactive to the investors or target audience.

To design this poster, you will use 2D and 3D design software (Illustrator and Tinkercad). Your poster should not include any raster images; all images should either be of your 3D model, your own designs, or from the free vector resources listed in this week’s readings. Be sure to credit the authors of any vector design that you borrow for your poster in your documentation.

 

Step 1: Make a 3D model

In Tinkercad, make a 3D model of your technology. When you have finished, take a screenshot of the model.

 

Step 2: Edit the 3D model in Illustrator

You may have noticed that your raw screenshot contains some undesirable elements, such as the background and grid. To eliminate these elements, first open illustrator and select the preset size for A3 paper. Then import your screenshot into Illustrator (either by dragging and dropping the screenshot or using import) and edit away those undesirable elements. To do this you can use the trace function to stylize your image and then cut away any excess parts of the image.

 

Step 3: Design the advertisement

In Illustrator, continue to design the poster for your advertisement. Your poster should include whatever you think is necessary to communicate what your technology is and how it is used. Consider including elements such as the 3D image of your technology, a title, and a slogan, etc. You can reference these advertisements to inspire your poster’s design.

When you have finished your poster, save the document as a pdf and title this pdf with your net ID. Upload the pdf to the folder with your professor’s name from this google drive. Include this image in your blog post.

Recitation 4: Drawing Machines

Disclaimer: This recitation requires you to work with higher voltages. If the circuits are not built properly or in accordance with the provided schematics, there is potential to damage your computer. Therefore, if you choose to use your computer for this recitation, you do so at your own risk. If you do not feel comfortable using your own computer, you can check out an IMA computer for this recitation. In addition, the components in this recitation (the IC and Stepper Motor) will get hot, so do not touch these components when they are powered. Be mindful of this as you complete the exercises below.

Materials:

For Steps 1 and 2

  • 1 * 42STH33-0404AC stepper motor
  • 1 * SN754410NE ic chip
  • 1 * power jack
  • 1 * 12 VDC power supply
  • 1 * Arduino kit and its contents

For Step 3

  • 2 * Laser-cut short arms
  • 2 * Laser-cut long arms
  • 1* Laser-cut motor holder
  • 2 * 3D printed motor coupling
  • 5 * Paper Fasteners
  • 1 * Pen that fits the laser-cut mechanisms
  • Paper

Recitation Exercise:

This week, we will be creating drawing machines by using an H-bridge to control stepper motors attached to mechanical arms. Individually complete Step 1 and Step 2 to assemble a circuit using the SN754410NE IC and the pre-installed Arduino Stepper Library.

 

Step 1: Build the circuit

Build the following circuit to control the stepper. You can use the stepper_oneRevolution(Arduino>File>Examples>Stepper>stepper_oneRevolution) example code to get your motor to make one revolution. If done correctly, your motor should rotate smoothly.

 

 

Step 2: Control rotation with a potentiometer

Add a potentiometer from your kit to the circuit to allow for analog input. Then, upload the MotorKnob (Arduino>File>Examples>Stepper>MotorKnob) example  to control your motor. Please modify the number of steps within the code to 200, because the 42STH33-0404AC Stepper Motor is a 200 step motor. You can use the function “map()” in order to match the movement of the knob with the rotation of the motor.

 

Step 3: Build a Drawing Machine!

Once you have your motor moving via input from a potentiometer, find another person who has also completed Step 2 and pair up with them. Collect the materials needed for Step 3 and combine your parts into a mechanical arm that can hold a marker on paper, as seen in  the picture below. Use your potentiometers to make the motors turn and draw something.

Congratulations, you have just created a drawing machine!

 

Documentation:

Please answer each of these questions. Add your answers to your blog post, along with the other documentation for the circuits that you built in class.

 

Question 1:

What kind of machines would you be interested in building?Add a reflection about the use of actuators, the digital manipulation of art, and the creative process to your blog post.

 

Question 2:

Choose an art installation mentioned in the reading ART + Science NOW, Stephen Wilson (Kinetics chapter). Post your thoughts about it and make a comparison with the work you did during this recitation. How do you think that the artist selected those specific actuators for his project?

 

Components

Stepper Motor:

SN754410NE Integrated Circuit (H-Bridge):

Note on how to Identify the front of the IC:

To locate this IC’s front and pinout, look for a dimple or semicircle at its end. This dimple indicates where the front of the IC is. The pin to the left is pin 1, and the diagram below depicts how the other pins are mapped.

SN75440NE ic
Image from upmakerspace.com

Laser-cut arms:

Laser cut arms: One long (left), the other short (right)

Laser-cut motor holder:

3D printed motor coupling:

 

Paper Fastener:

Image from createandcraft.com

Recitation 3: Sensors

Recitation Exercise:

For this recitation’s exercise, please work with a partner. Choose one of the sensors listed below and read about what it is and how it performs. Once you have picked a sensor, build a circuit that integrates this sensor with your Arduino. Use the data (input) from your sensor to drive an output (Servo-motor, LEDs, Buzzer, etc.). Document the finished circuit and your interaction with it. In addition, draw a diagram of how all the components are connected and add this to your documentation. If you finish your circuit early, you may answer the documentation questions or try your circuit with a different sensor. Please cite any sources you reference to do this exercise.

For these circuits, think back to the lessons from class, such as how to map() an analog input, as well as how to set an analog output with an analog input. This can be seen in the example AnalogInOutSerial (Arduino>File>Examples>0.3Analog>AnalogInOutSerial).

 

  • Moisture Sensor:The Moisture Sensor can be used as if you were doing simple analog read. Connect the sensors’ power and ground pins to the Arduino’s power and ground, respectively. This sensor’s signal pin can then be connected to an analog input pin.

 

  • Infrared Distance Sensor:  Similar to the Moisture Sensor, the Infrared Distance Sensor can by used by implementing the connections and code from a simple analog read sketch. In the case of Infrared Distance Sensors, using the “map()” function can be helpful.  This function maps the analog readings from the sensor to the distance between the sensor and the object.

 

  • Vibration Sensor:  To create a Vibration Sensor you will need a piezo disk and a 1 mega ohm resistor. You can use the Knock example (Arduino>File>Examples>0.6Sensors>Knock). Otherwise, the Vibration Sensor can be used like a simple Analog input.

 

  • Ultrasonic Ranger:  The Ultrasonic Ranger (AKA Ultrasonic Sensor OR  HC-SR04) can be used to detect distance. To program Arduino to work with this sensor,  you can use the Ping example ( Arduino>File>Examples>0.6Sensors>Ping). Note: In order for the HC-SR04 to work with the Ping code, you must connect both Trig and Echo to the same Digital Pin in your Arduino.

 

  • 3-Axis Analog Accelerometer:  For the Grove 3-Axis Accelerometer (3-Axis Analog Accelerometer) you can use the ADXL3xx example (Arduino>File>Examples>0.6Sensors>ADXL3xx).

 

  • Joystick Module:  The Joystick module comprised of two potentiometers which gauge motion along the x and y axis, and a pushbutton for the z axis. Because of this composition, it can be interfaced with Arduino just as any potentiometer or button normally would.

 

Documentation:

Please answer each of these questions. Add your answers to your blog post, along with the other documentation for the circuits that you built in class.

 

Question 1:

What did you intend to assemble in the recitation exercise? If your sensor/actuator combination were to be used for pragmatic purposes, who would use it, why would they use it, and how could it be used?

 

Question 2:

Can you identify your circuit with any device you interact with in your daily life? How might your circuit be used to have a meaningful interaction?

 

Question 3:

How is code similar to following a recipe or tutorial?

 

Question 4:

In Language of New Media, Manovich describes the influence of computers on new media. In what ways do you believe the computer influences our human behaviors?

Recitation 2: Arduino Basics

Materials:

1 * Arduino Kit and its contents

Recitation Exercise:

In a groups of two, build circuit 1, circuit 2, and circuit 3. Carefully read the information and instructions from the links provided to help you build the circuits. When you have finished building these circuits, you may copy the code from Arduino.cc or from the IDE examples and upload it to your Arduino. Document the circuits working.

For circuit 3, you may choose to build any one of the two listed circuits.The circuit diagram and code for Arduino can all be found on Tinkercad. To view the circuits and find the Arduino code, click on the links and sign in with your Tinkercad account (or sign up if you don’t already have one). After completing the circuit, upload the corresponding code to your Arduino. Then document the circuit working and your team interacting with it. You should also switch out the pushbuttons with the Arcade button that you soldered in the previous recitation. For the circuit that you built, draw your own schematic of how the components are connected, and include this with your documentation. 

 

Circuit 1: Fade

https://www.arduino.cc/en/Tutorial/Fade

Code: Arduino>File>Examples>03.Analog>Fading

 

Circuit 2: toneMelody

https://www.arduino.cc/en/Tutorial/toneMelody

Code: Arduino>File>Examples>02.Digital>toneMelody

Circuit 3: Your Choice

Zelda Simon Says

A game of memory and patience, Simon Says is a great game that allows a player to test their ability to remember sequences of tones and lights. While initially easy, the sequence gets longer and more challenging with passing each round. First, the circuit will light up a series of LED’s. To start and restart the game, press the “start” button on the circuit. For the Zelda Simon Says circuit diagram and code, click here or use the following URL: https://www.tinkercad.com/things/bMAvN7Djoja

 

Speed Game

A game of speed endurance. This is a two player game where each participant races to click a button more than their opponent.. After 10 seconds, whoever has clicked their button the most and fastest wins! To play the game, open up the Serial Monitor in Arduino IDE. To start the game over, press the Reset button on your Arduino Board. For the Speed Game circuit diagram and code, click here or use the following URL: https://www.tinkercad.com/things/9reyJ6uTVoY-race-the-led/editel?sharecode=qMMfF_Cz3H5x-Esm7jx3SWGdZiYYLh864n9laKlOxxc=

 

Documentation:

Please answer each of these questions. Add your answers to your blog post, along with the other documentation for the circuits that you built in class.

 

Question 1:

Reflect on different interactions with technologies that you have observed in your daily life. Pick a few of these and write down your own definition of interaction based on your observations.

 

Question 2:

During the assembly of the circuits, we used many electronic components as inputs and outputs. Which of these components do you recognize in the circuit?

 

Question 3:

If you have 100000 LEDs of any brightness and color at your disposal, what would you make and where would you put it?

 

Question 4:

Which reflections about the nature of interaction can you make about the Figure I.1 in the Physical Computing reading?

Recitation 1: Electronics & Soldering

At the beginning of each recitation, please carefully read through the all of the instructions. If you have any questions, please feel free to ask any professors, fellows, or learning assistants for help.

Materials:

    • 1 * Breadboard
    • 1 * LM7805 Voltage Regulator
    • 1 * Buzzer
    • 1 * Push-Button Switch
    • 1 * Arcade Button
    • 1 * 220 ohm Resistor
    • 1 * LED
    • 1 * 100 nF (0.1uF) Capacitor
    • 1 * 10K ohm Variable Resistor (Potentiometer)
    • 1 * 12 volt power supply
    • 1 * Barrel Jack
    • Jumper Cables (Hook-up Wires)
    • 1 * Multimeter

Recitation Exercise:

For this exercise, find a partner and work in pairs to complete the following steps.

  • Step 1: Build the circuits

With your partner, create three simple circuits on a breadboard based on the circuit diagrams below. When you’ve finished a circuit, take pictures or film the the finished circuit working. Record notes about the building process for each circuit, such as problems that you encountered, and how you fixed them.

Note: To help you read the schematics for the circuits, you may look at the components and their symbols at the bottom of this document, or refer to the diagrams in this reading.

 

  • Step 2: Switch the switches

Think about the circuits we are building, and their configuration. For instance, with a lamp or doorbell, the button or switch is never next to the actual light bulb or buzzer, but instead located in a place that is easy for the user to interact with. During the recitation, you and your partner will be brought to soldering stations learn how to solder. Here you will solder wires (50 cm long) to a larger push button.Once you have completed this, you should replace the push button switch in your circuit with the newly soldered arcade button for at least one of the circuits you built.

 

Circuit 1: Door Bell

Circuit 2: Lamp

Circuit 3: Dimmable Lamp

 

Components and Diagrams

Resistor:

Resistor symbol

Resistor Image from techversat.com

 

 

 

 

 

 

 

 

 

LED:

LED symbol

Image from Tweaking4All

 

 

 

 

 

 

 

 

 

Capacitor:

Capacitor symbol

Image from Sparkfun.com

 

 

 

 

 

 

 

Voltage Regulator:

7805 voltage regulator symbol

Image from Electronics4u

 

 

 

 

 

 

 

 

Variable Resistor / Potentiometer:

Potentiometer symbol

Image from hellasdigital.com

 

 

 

Push Button (Switch):

Switch symbol

Image from Razzpisample

 

Speaker:

Speaker/ buzzer symbol

Image from Sparkfun.com

 

 

 

 

 

 

 

Power:

12 volt power symbol

Ground:

Ground (GND) symbol

Documentation:

For your documentation, create a blog post and that includes the following information based on your experience in this recitation: Write down the list of components you used to build each circuit. Write down what these components are, what they do, and why they are included in this circuit. In addition, please include pictures and or videos of the completed circuit working, as well as a diagram of how the components are connected. Describe the process of building the circuit: Did the circuit work? Were there any moments where something failed? How did you solve the problem? Note what worked and what didn’t. Take time to reflect on this week’s readings and the recitation exercise. Publish your answers to the following questions along with your documentation.

Question 1:

After reading The Art of Interactive Design, do you think that the circuits you built today include interactivity? Please explain your answer.

Question 2:

How can Interaction Design and Physical Computing be used to create Interactive Art? You can reference Zack Lieberman’s video or any other artist that you know .

 

For information on how to post documentation, please see the information below. If you have questions on how to document, you can always ask your professors, fellows, or learning assistants for help:

First, go to ima.nyu.sh, mouse over “Documentation”, and then click on”Create New Documentation”

Using your account name and password, log onto WordPress

 

Now, you can write your blog post!