Team member: Yang Gao, Alexandra Wheeler, Jesse Abeyta, Rafael Pimentel
Introduction & Brainstorm
Designing for wellbeing, we would like to create a website that would help the consumers the most. We had to import the Affectiva Library, that takes the webcamera of the users face and then the output with emoji. Thus, we wanted to do something that can benefit the consumer or the audience. Within the emotion wellbeing, the live chart of how many emotions we had on watching different videos became the most favorite topic that our group had. In the graph, it will illustrate your emotion at certain time.
Design
For designing part, the hardest issue is that except Alexandra, none of us had experience with javascript before. Thus, it’s a diffcult time for the team.
While during the designing, our group had different thoughts on how the chart looks like. There were two thoughts. One of the thoughts was that we could do histogram that count each time of your smile, sad or angry face. And after the video been played, you could actually see the overall graph about how much you laughed and angry about. The other thought was that the live chart that illustrated the emotion you had for every second, which we used for our final prototype.
Within the limit of the time, we wouldn't be able to list out all the emotion we had in the library. Thus, we picked four big categories of them, joy, sad, shock and angry. Since these four emotions should be easy to capture. However, during the testing we found out that since emotion changed for people were fast, so that the graph we got at the end was sharp with drastically up and down. In order to make the graph looked smoother, we turned out to apply moving average to the graph, so that the graph should look more like a curve other than strikes. How we did the moving average was we take the three recent emotions and take the average of that and plotted on the graph.
The layout of our webpage was the video screen, web camera, and the graph. However, our group felt that the web camera would make the user embarrassed or felt awkward while watching the video and seeing their face on the webpage. For the embedded video link, we thought that it would give the user a free choice about what they wanted to watch . We added a waiting for the user so that they can click play the video after the waiting time of generating the graph is ended.
Final Prototype
For our final prototyping, people thought that the place for input video link was actually a great idea. Thus they can put they video they like into the page. People comment on the live chart was easy to understand. Layout of the webpage was clear.
Here are some confusions about using the webpage
- Confusion at first with what to do
- Readings seemed awkward maybe even inaccurate
- Graph not reacting quickly enough
For the confusion of what they should about this page, mostly about the reading that we provided for the explanation on the page, which is actually making sense. The explanation was clear, probably just the wording that we had wan't accurate, so that it might confuse people. Also that seeing waiting was at right side so that tester can't pay attention to it. However, the purpose we put it right next to the graph and made it red were actually trying to attract tests' eyes.
For the graph, some people suggested that it start right after it finish loading. However, people might not start the video yet. So the time on the graph didn't match the actual time in the video. We were thinking about making a button at the side so that when they are ready to watch the video they can click on that so the video and the graph would start at the same time. However, within the limitation on the ability and time, we didn't achieve this goal. One more thing about the graph, this is a controversial part. Half of the testers said that they like when watching the video they could see the live chart. Nonetheless, the other half thought this was actually distracting. We personally all like the live chart at the bottom.
Conclusion
For this time, since we have to use javascript to code for the page. It consumed a lot of time on us to figure out how to coding. Thus, with all the thoughts we don't really have time to achieve all the goal that we wanted to have on the page. If we have more time, we would like to change starting time of the graph same as the video, so that the graph would be more meaningful than right now.
For our group work, although we all working together, but Alexandra did most the coding work.
Demo Video
https://www.youtube.com/watch?v=pY2jo9t5p0s&index=2&list=WL&t=0s