Open House

Before we were ready to show off our prototypes at the HCDE Open House and poster session, we had a lot of small moving parts that had to sync up. Not only did we have to put the final touches on the gesture prototype, but we also had to prepare for our final presentation and the poster session. From making posters and tickets to shooting video, this week was jam packed with action.

Gesture Prototype

Last week, we had a long discussion on the interaction design of the gesture prototype and agreed on a workflow using thumbs up/down to go to the next page/back and divided the interaction into these steps:

  • User walks up to the prototype
  • Drags hand to change movie, thumbs up to confirm
  • Drags hand to change showtime, thumbs up to confirm
  • Does one of the corner postures to choose the type of ticket, repeats until all tickets needed are added, thumbs up to confirm
  • Slides the card for payment

During implementation, we found that with the current Kinect SDK, it is very difficult to get a reliable detection of thumbs up/down, especially if the hand is in front of the body. We looked for alternative ways such as having the user nod or shake their head, but the current SDK does not provide enough features to implement detection of those actions. Given the SDK is still in tech preview, we understand that problems and missing features are expected, but we cannot wait for its final release.

Therefore, we revised the workflow by merging some of the steps into one screen, removing the showtime selection feature and requiring one user represents oneself for choosing the type of ticket. Our logic was to ensure the quality of the whole experience by cutting use cases that happen less frequently. Now the workflow we will show in the demo is:

  • User walks up to the prototype
  • Drags hand to change movie
  • Does one of the corner posture to choose the type of ticket
  • Swipes the payment card

We are planning to continue to work on the prototype after the quarter ends and we expect the SDK to be more stabilized soon, so we’ll be able to add back the cut features.

Card Scanner

We wanted to make a credit card scanner so users can actually slide their card when they used the prototype; to make it a more realistic experience. However, we don’t really need to get their credit card information, so we made a fake scanner just to detect the action of sliding a card. This is what the scanner currently looks like. Compared to last week’s model, we rounded the corners on each end of the slit to make it easier to slide a card into the slit.

scanner.v3

One idea is to have an LED and a light sensor mounted on each side of the slit, so that when users slides their cards, they’ll get feedback in the form of a change in brightness. Another LED will be put behind the hole on the front of the scanner and be turned on to indicate the scanner is activated and ready to scan.

learn_arduino_LDR_schematic

Using a circuit like above, we convert the resistance of the light sensor into analog input for Arduino. We use three 1KΩ resistors instead of one and our photosensor is 16kΩ-2MΩ, meaning its resistance is 16kΩ when exposed in maximal light and 2MΩ in maximal darkness. We used three 1KΩ resistors is to increase the delta of voltage between the cases of light and dark. Below is the units soldered into a component.

2014-05-26 17.55.07

Then we added two LEDs to the component. Both LEDs will be turned on at the same time so they share the digital output and ground.

2014-05-26 18.29.35

We used a 6-pin header to arrange the wires to make it neat. It is an optional step but since our engineer is a obsessive about such things, it became required. The 6 pins in the picture are 5V, light reading, LED, unused, unused and GND. And it can be easily wired to Arduino.

2014-05-26 18.48.44

The scanner model was also revised, we added walls inside to make it easy to attach the circuit.

2014-05-26 19.46.21

The Arduino code is as simple as: get the reading of light sensor and print it to serial port; if there are data from serial port, read one byte which indicates whether the LEDs should be on or off, and then set LEDs.

void loop() {
int reading = analogRead(PIN_LIGHT);
Serial.println(reading);
if (Serial.available() > 0) {
active = Serial.read();
}
digitalWrite(PIN_LED, active);
}

The Arduino is connected to a laptop through USB and the C# code on the laptop reads from a COM port to get the light reading and writes a byte to the port to turn on or off the LEDs.

And here is the final look:

2014-05-26 21.16.20

And a close-up shot to show the inside of the scanner:

2014-05-26 21.18.23

Posters, Presentations, and Paraphernalia

The rest of our focus this week was on making sure we had everything ready for the big events next week: our presentation on Monday and the poster session on Wednesday.

The presentation is a chance for us to show off all the work we have done over the past 10 weeks, and just putting it together was a great way to reflect over the whole process so far. Saturday was the first time we got to set up the prototype we’ll be demoing on Wednesday. To make that part of the presentation, we shot the video at the top of this post. The rest of Saturday was spent making sure we had the content we needed, and designing an overall look for the slide deck.

We met with our adviser, Andy, on Wednesday to go over our poster design and from there set out to put together the assets needed for it. We debated exactly how to layout the poster and ultimately committed to an elaborate, innovative concept involving interactive panels and a multilayered design. We’re all excited about it and will share it on the blog soon.

Open House poster landscape

Finally, we designed some more assets we needed for the poster session. For one, there’s the beautiful movie poster above, which is something you can see in person if you stop by the HUB lyceum on Wednesday. We also finally agreed on a logo we liked, which is just nice to have. And we got caught up working on a handful of other tasks too. Like everything else, these materials will be uploaded to the blog as soon as their finished.

Advertisements

Prototype Walkthrough

Here is a video walkthrough of the iPad prototype of the touch screen model of our product. We used this prototype for our first usability test.