HeaderSIS.jpg

Difference between revisions of "IS480 Team wiki: 2011T2 Bazinga Video Tutorial Improvements and Timeline"

From IS480
Jump to navigation Jump to search
 
(42 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 
=<div style="width: 95%; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#37ab4d', endColorstr='#00922b'); background: -webkit-gradient(linear, left top, left bottom, from(#37ab4d), to(#00922b)); background: -moz-linear-gradient(top,  #37ab4d,  #00922b); padding:7px; margin-top: 35px; line-height: 1.4em; color:white"> Research on Kinect Tutorials</div>=
 
=<div style="width: 95%; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#37ab4d', endColorstr='#00922b'); background: -webkit-gradient(linear, left top, left bottom, from(#37ab4d), to(#00922b)); background: -moz-linear-gradient(top,  #37ab4d,  #00922b); padding:7px; margin-top: 35px; line-height: 1.4em; color:white"> Research on Kinect Tutorials</div>=
  
==<h1> <b>How it started</b></h1>
+
===<h1> <b>How it started</b></h1>===
 
Through the FYP project, our team realize that for Kinectify to be successful in a commercial setting, it requires users using the application to be able to know how to perform the different gestures. Due to this, our team has identify Tutorial Videos to be a core portion of the project where users will be able to call out for tutorial videos whenever they are unable to perform a certain gestures or when they get "stuck" using the application.  
 
Through the FYP project, our team realize that for Kinectify to be successful in a commercial setting, it requires users using the application to be able to know how to perform the different gestures. Due to this, our team has identify Tutorial Videos to be a core portion of the project where users will be able to call out for tutorial videos whenever they are unable to perform a certain gestures or when they get "stuck" using the application.  
  
<h1> <b>Purpose of Tutorial Videos</b></h1>
+
===<h1> <b>Purpose of Tutorial Videos</b></h1>===
 
For the tutorial videos, we aim to let users learn how to use kinectify in the most engaging and easiest manner ever. The tutorial videos will be like a virtual assistant being there by your side to teach you how to perform gesture step by step. In the event that users get stuck through the application, they can invoke tutorials through a simple gesture.
 
For the tutorial videos, we aim to let users learn how to use kinectify in the most engaging and easiest manner ever. The tutorial videos will be like a virtual assistant being there by your side to teach you how to perform gesture step by step. In the event that users get stuck through the application, they can invoke tutorials through a simple gesture.
  
  
<h1> <b>Challenges We Face</b></h1>
+
===<h1> <b>Challenges We Face</b></h1>===
  
 
{| border = "1"  
 
{| border = "1"  
Line 41: Line 41:
 
|}
 
|}
  
<h1> <b>Learning Process - Observe, Testing, Improve Approach </b></h1>
+
===<h1> <b>Learning Process - Observe, Testing, Improve Approach </b></h1>===
  
 
To ensure that our tutorial videos are engaging and also commercially feasible. We went through the road of observing the different ways commercial applications are push into the market and how tutorials are taught. The team even went to shops with establish touch screen base applications to see how they taught their users. Through these different findings, we always improve the tutorial videos. How can we gauge if the tutorial is effect? For that, our team will consult opinions or even through User Testing environment to see how users react to the tutorial video. From the feedback we receive, we improve the tutorial videos. Through each version of the tutorial videos, we realize how effectively we are teaching the users.
 
To ensure that our tutorial videos are engaging and also commercially feasible. We went through the road of observing the different ways commercial applications are push into the market and how tutorials are taught. The team even went to shops with establish touch screen base applications to see how they taught their users. Through these different findings, we always improve the tutorial videos. How can we gauge if the tutorial is effect? For that, our team will consult opinions or even through User Testing environment to see how users react to the tutorial video. From the feedback we receive, we improve the tutorial videos. Through each version of the tutorial videos, we realize how effectively we are teaching the users.
Line 51: Line 51:
  
  
-<h1><b> When is the best time to show tutorials?</b></h1>
+
==<h1><b> How should the tutorials be shown? </b></h1>==
  
<h2> Version 1 <h2>
+
From this question, the team aims to tackle how tutorials should be display and perceive by the end users. Through this question, you will see how our team tackle challenges like how we approach in flimming our tutorials or how we even show case step by step approaches to end-users. Ideally, our team will like the users to see the videos and instantly know how to use our applications.
  
[[Image:kinectsports_instructions 1.png ||300px]]  
+
[[Image:kinectsports_instructions 1.png ||300px]] [[Image:kinectsports_instructions 2.png ||300px]] [[Image:kinect_sports.png ||150px]]
  
[[Image:kinectsports_instructions 2.png ||300px]]
+
From the screen shots above, our team took reference from established kinect games like "Kinect Sports Season 1". Before the start of every game, there is tutorial to users where the users are engage in a step by step tutorial to aid their learning. We thought it was highly applicable to our application and thus we attempt to produce tutorial videos that are similar. The reason why we took kinect games as our reference as this gaming companies has spend millions of dollars doing research as to how tutorials can be taught to users and what the best way to learn them. For us, we felt it would be a good starting base for our tutorials.
  
[[Image:kinect_sports.png ||150px]]
+
===<div style="width: 95%; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#37ab4d', endColorstr='#00922b'); background: -webkit-gradient(linear, left top, left bottom, from(#37ab4d), to(#00922b)); background: -moz-linear-gradient(top,  #37ab4d,  #00922b); padding:7px; margin-top: 35px; line-height: 1.4em; color:white"> Tutorial Timeline</div>===
  
From the screen shots above, our team started
+
In total there are mainly 7 versions of the tutorial video that has been created. This excludes any minor changes we made along the way to any versions. The different versions can be summarize as shown:
 +
 +
====<div style="width: 95%; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#37ab4d', endColorstr='#00922b'); background: -webkit-gradient(linear, left top, left bottom, from(#98d4f3), to(#1fabf3)); background: -moz-linear-gradient(top,  #37ab4d, #00922b); padding:4px; margin-top: 35px; line-height: 1em; color:white"> Version 1</div>====
  
Similarly, we wanted to create different steps to help our users to understand the gestures immediately. <br /> <br />
+
<b>Description</b>
Photos taken from Kinect Sports Season 1 Videos on Youtube
+
<br />
  
=<div style="width: 95%; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#37ab4d', endColorstr='#00922b'); background: -webkit-gradient(linear, left top, left bottom, from(#37ab4d), to(#00922b)); background: -moz-linear-gradient(top,  #37ab4d,  #00922b); padding:7px; margin-top: 35px; line-height: 1.4em; color:white"> Tutorial Timeline</div>=
+
[[Image:tutv1a.png ||300px]] [[Image:tutv1b.png ||300px]]
  
 +
The idea here is to show a simple videos where a highlight of a person is shown. The person will be facing the camera from the front. Simple instructions will appear when the user perform gestures like two handed navigation to help assist the user.
  
 +
<b>Limitations</b>
 +
<br />
 +
 +
[[Image:tutv1b.png ||300px]]
 +
This screenshot showns how users will not be able to gauge the difference in hand position they have to place.
 +
 +
We realize that the video is hard to view and is not very intuitive for users. As it is a single color highlight, it will be hard for users to differentiate how an actual swipe should be or even how to properly do a 2 hand navigation.Furthermore, the instructions are not very clear. For example, terms like "Push Forward". What exactly is push forward as different users will have different interpretations of this meaning. This are things in the tutorial we had to improve on.
 +
 +
====<div style="width: 95%; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#37ab4d', endColorstr='#00922b'); background: -webkit-gradient(linear, left top, left bottom, from(#98d4f3), to(#1fabf3)); background: -moz-linear-gradient(top,  #37ab4d,  #00922b); padding:4px; margin-top: 35px; line-height: 1em; color:white"> Version 2</div>====
 +
 +
<b>Description</b>
 +
<br />
 +
For this version of the tutorial video. It was an improvement over the last video where the demonstrator is clearly shown. More meaningful instructions are added from just "Navigate" to "Navigate Downwards".
 +
 +
[[Image:tutv2a.png ||300px]]
 +
[[Image:tutv2b.png ||300px]]
 +
 +
<b>Limitations</b>
 +
<br />
 +
Limitations from this video is that the mask worn by the demonstrator is too scary and might scare some of the users. Apart from that, the instructions and images are still not clear enough for users. In fact, they might be redundant as the demonstrator is already performing the same action. Another limitation is where this video suffers the same problem to the last tutorial video. As it is forward facing, it was hard for users to tell actions like 2 hand navigation as they are unable to tell how far their hands should be apart.
 +
 +
 +
====<div style="width: 95%; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#37ab4d', endColorstr='#00922b'); background: -webkit-gradient(linear, left top, left bottom, from(#98d4f3), to(#1fabf3)); background: -moz-linear-gradient(top,  #37ab4d,  #00922b); padding:4px; margin-top: 35px; line-height: 1em; color:white"> Version 3</div>====
 +
 +
<b>Description</b>
 +
<br />
 +
More in-depth studies was done with reference to kinect games and proof of concept kinect applications online. Our team came out with this new tutorial video where it shows a step by step 3 column gesture screen. This time round, more visible changes were made to the tutorial.
 +
 +
[[Image:tutv3c.png ||300px]]
 +
For a start, a bright and striking title screen was included to let the users know what tutorial are they watching. Apart from this,the demonstrator is properly attired instead of having one color overlay or wearing a mask. Furthermore, the tutorial video breaks down the gestures into steps where each step shows a 45 degree view along with a front view. Depending on the gesture, the front view might be replace with a top view as the top view will be able to teach the user more effectively. We hope that through each step, users can see how this gesture is properly perform, especially with two different perspective. It should help the users greatly.
 +
 +
[[Image:tutv3a.png ||300px]]
 +
[[Image:tutv3b.png ||300px]]
 +
 +
<b>Limitations</b>
 +
<br />
 +
Though the tutorials were a huge improvements over tutorial 2, we realize how users still struggle to use the application. The tutorial videos do not show the actual kinectify screenshots. Thus though users can see how the demonstrator does the action, they are unable to visualize how this actions will impact on the actual application itself. Apart from that, due to the choice of clothing by the demonstrator, we realize that the pale pink cardigan blends too well with the white background that it makes it hard to view certain gestures. A different outfit could have been better. The wordings to describe each step was still too vague. For example, things like ready position does not mean anything to user.
 +
 +
====<div style="width: 95%; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#37ab4d', endColorstr='#00922b'); background: -webkit-gradient(linear, left top, left bottom, from(#98d4f3), to(#1fabf3)); background: -moz-linear-gradient(top,  #37ab4d,  #00922b); padding:4px; margin-top: 35px; line-height: 1em; color:white"> Version 4</div>====
 +
 +
<b>Description</b>
 +
<br />
 +
 +
More visual improvements were made. This time round, in view of the limitations mention in Version 3. We included the kinectify screenshot that show users the actual screen they will be interacting it. Apart from that, there is a main instruction shown the center that show users should do. There is also a improvement in the instructions given to users where it shows user for each step, what will be the purpose of the gesture. Example, Browse Up/Down is shown where the demonstrator browse with her right hand. The fancy title for each tutorial screen has been replace with our demonstrator performing the Help gesture and the title spell with bold font above.Overall, what we did this version was a huge improvement over the last version as users could now visualize how the different gestures interact with the kinectify screen.
 +
 +
Additional feature we added to this tutorial video was speech where every instruction was spoken to ensure users could hear it as they perform.
 +
 +
[[Image:tutv4a.png ||300px]]
 +
[[Image:tutv4b.png ||300px]]
 +
[[Image:tutv4c.png ||300px]]
 +
 +
<b>Limitations</b>
 +
Some limitations are as follows:
 +
 +
[[Image:tutv4c.png ||300px]]
 +
For the tutorial title, the font appears too kiddish or unprofessional. Furthermore, given the attire of the demonstrator, it blends too well with the white background that makes it hard for users to view properly.
 +
 +
[[Image:tutv4a.png ||300px]]
 +
For this screen, we can see center banners grab the attention of the users. As they are set to appear at the same time as the Steps below, it makes it very confusing for users to differentiate where to focus on. The font for the instructions can be improve and the demonstrator attire still blends too well to the background.
 +
 +
We also realize how our tutorial videos do not cover basic gestures like going back. This is something we like to explore for the next tutorial video.
 +
 +
The voice instruction was great but it was too robotic. We needed a more natural voice instruction. We also eliminated instructions like "excellent or great job" as it was redundant during the tutorial videos.
 +
 +
<br />
 +
 +
====<div style="width: 95%; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#37ab4d', endColorstr='#00922b'); background: -webkit-gradient(linear, left top, left bottom, from(#98d4f3), to(#1fabf3)); background: -moz-linear-gradient(top,  #37ab4d,  #00922b); padding:4px; margin-top: 35px; line-height: 1em; color:white"> Version 5</div>====
 +
 +
 +
<b>Description</b>
 +
<br />
 +
 +
From the shortcomings of the last version, the team went back to the drawing board and ask ourselves "Where can we improve from here?" During the brainstorming, our team took details into consideration like
 +
 +
1. When would instructions, screenshot and demonstrator appear so users can have clarity of instructions and not be confuse?
 +
<br />
 +
2. How fast can we get users to understand the instructions in each step?
 +
<br />
 +
3. The proper wordings for instructions to use to ensure they are clear to the users and ensure word is not too technical for users
 +
<br />
 +
4. The timing to flash each instructions to users.
 +
<br />
 +
We basically re-shot all our tutorial videos through a very elaborated setup where the demonstrator was flim along with the kinectify screen shot as shown below. We have broken down the different gestures to have different angles. For most gestures, we maintain a 45 degree posture and for certain gesture like the fast scroll for 2 hand navigation, we use a front shot approach as shown below.
 +
[image1]
 +
[image2]
 +
 +
This time round, we even choose an attire that stands out for the video (Black Cardigan with Velvet red top) and prevented it from blending with the white background.
 +
 +
Changes were also made to the tutorial title page, instead of just "How to Browse Menu", we have included a screenshot of what users will be expecting in the next screen.
 +
 +
A introduction quick tip was also added to the tutorial video as we wanted users to know how to go back or get help through the application. This will be played whenever the application is started.
 +
 +
A new natural voice instruction was recorded to give users a more natural experience and interaction.
 +
 +
For this tutorial video, all instructions would appear first and spoken to users before the demonstrator and screenshot appear to show users.
 +
 +
Background music was added to make tutorial video more fun and entertaining.
 +
 +
The end result is a sleek tutorial application. During UT2, this tutorial was place in our ut2 environment to see its effectiveness.
 +
 +
[[Image:tutv5a.png ||300px]]
 +
[[Image:tutv5b.png ||300px]]
 +
[[Image:tutv5c.png ||300px]]
 +
[[Image:tutv5d.png ||300px]]
 +
[[Image:tutv5e.png ||300px]]
 +
 +
<b>Limitations</b>
 +
<br />
 +
It was through UT2 environment (4 days) that we saw the limitations of these tutorial video.
 +
 +
For a start, we realize how users do not recognize the help gestures as it seems like a title page instead of a gesture. As a result, 1st day of UT2, the users could not get help from the application.
 +
 +
[[Image:tutv5d.png ||300px]]
 +
From the screenshot above of the tutorial title, we realize that the tutorial title page was too short for users to notice what was actually going on. Furthermore, the animation of our demonstrator doing the help gesture confuse users. Another critical issue was also how each tutorial title look too similar that whenever it was played to users, they skip it instantly thinking it was the same tutorial video.
 +
 +
We also realize how lengthy our tutorial videos are at 1min plus. It was too lengthy and thus we needed to shorten it.
 +
 +
This time round, the tutorial was able to guide users properly but minor changes needed to be made and these changes were done through the 4 days UT2 testing.
 +
 +
====<div style="width: 95%; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#37ab4d', endColorstr='#00922b'); background: -webkit-gradient(linear, left top, left bottom, from(#98d4f3), to(#1fabf3)); background: -moz-linear-gradient(top,  #37ab4d,  #00922b); padding:4px; margin-top: 35px; line-height: 1em; color:white"> Version 6</div>====
 +
 +
<b>Description</b>
 +
<br />
 +
Through the UT2, we made several immediate changes to the tutorial video base on the user experiences. This was necessary as it was critical problems that users face and would have drastic impact on UT2. For a start, we streamline the videos in terms of duration and steps. For example, for 2 hand navigation gesture, we initially had 7 steps as we separate left scroll from right scroll. After streamlining, we left 5 core steps where we group gestures like scroll left and right together. This has greatly has reduce the overall video timings from 1 min plus to all less than a minute. For the tutorial title menu, we have crop the screenshots to focus on specific areas and a notepad is place there to tell users what sort of screen or browser are they interacting with. This helps give a different feel to each tutorial video. Apart from that, the quick tips segment was given a revamp where by it has its own title screen and a intro to kinectify. The quick tip will show users what they will be expecting in Kinectify and what are the main gestures they should remember.
 +
 +
[[Image:tutv6a.png ||300px]]
 +
[[Image:tutv6b.png ||300px]]
 +
[[Image:tutv6c.png ||300px]]
 +
[[Image:tutv6d.png ||300px]]
 +
 +
<b>Limitations</b>
 +
<br />
 +
One limitation is that we realize that users do not know when the tutorial end so we have to find a way. Another limitation is that users do not remember what is the previous step about so we must find some way for them to recall what was the previous step they have done for the gesture. One other limitation was the background music that sounded repetitive and gave the impression that the tutorial video was similar. All these are solve in the next version.
 +
 +
====<div style="width: 95%; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#37ab4d', endColorstr='#00922b'); background: -webkit-gradient(linear, left top, left bottom, from(#98d4f3), to(#1fabf3)); background: -moz-linear-gradient(top,  #37ab4d,  #00922b); padding:4px; margin-top: 35px; line-height: 1em; color:white"> Version 7</div>====
 +
 +
<b>Description</b>
 +
<br />
 +
 +
The most current version of the tutorial videos where we address the shortcomings from the last version. We have included a end screen for each tutorial video so users know when the video ends as shown in the screen below. Apart from that, we have rename each Step in the video to show what the step is about. Users can be reminded about what each step is to help them complete the gesture. Lastly, we use a more light base music where each tutorial video had a different starting point. It gave a fresh new look and feel to each tutorial so users can differentiate them easily.
 +
 +
[[Image:tutv7a.png ||300px]]
 +
[[Image:tutv7b.png ||300px]]
 +
 +
 +
==<h1><b> When should the tutorials be shown? </b></h1>==
  
{| class="wikitable"
 
|-
 
! No
 
! Date of Usage
 
! Tutorial Image
 
! Content
 
! Improvements
 
|-
 
  
|
+
===<h2>The challenge</h2>===
1
 
|
 
Week 3-5
 
|
 
picture
 
|
 
-
 
|
 
-
 
|-
 
  
 +
From this question, we aim to tackle on exactly when should the tutorial video be display. This is a challenging question as a tutorial video can make or break an application. Consider the following two scenarios that we observe from UT2,
 +
<br />
 +
<br />
 +
<b>Scenario A</b>
 +
<br />
 +
<br />
 +
Tutorial videos are only shown when users invoke the help gesture. We notice how many users come to application and they simply get lost. Despite the help signs, many do not really want to invoke the tutorial. The tutorial was very important for the 2 hand navigation as without it, it was quite hard for any users to figure out how to use it.
 +
<br />
 +
<br />
 +
<b> Scenario B</b>
 +
<br />
 +
<br />
 +
We show the tutorial video every time user goes into a new page. We thought forcing the user into the tutorial scenario would be the best case. Apparently, it was not as effective as we thought as we saw users either getting irritated by the repetitive tutorials from the same gestures or they simply skip every single tutorial as they find it hindering their actions.
 +
<br />
 +
<br />
 +
<b>Scenario C (Something we thought off but did not try it out)</b>
 +
<br />
 +
<br />
 +
Having a session base tutorial where the first instance a user uses the application, they will see every tutorial once. When they return to a similar page, they will not be shown the tutorial video as it is part of the same session. One problem with this is that was that our application had no login. Simply to say, it was impossible to tell when a user session started or when it ended. A user could found what he needs and walk away half way during our application.
  
|
+
As shown, the different scenarios post different difficulties but are considerations we had while developing the tutorial video. A group might have the best tutorial in the world, but then, the ultimate question lies " Where and when exactly to put them?"
2
 
|
 
Week 6-8
 
|
 
picture
 
|
 
-
 
|
 
-
 
|-
 
  
 +
===<h2>Our Solution</h2>===
  
|
+
Based on the different scenarios, our team studied how users react to tutorial videos and then came out with what we thought was the best way to integrate tutorial videos into the application.
3
 
|
 
Week 9-10
 
|
 
picture
 
|
 
-
 
|
 
-
 
|-
 
  
|}
+
Whenever the application appears idle or no users are in front of it, a screensaver would appear. If more than 10seconds, we assume that a new user is here to use the application and a quick tip tutorial video will be played to introduce the system. If the user happens to be an existing user, he/she can simply skip the tutorial. Through each screen, we choose to "simplify" each screen with possible instructions to help users use the application. In the worst case scenario, they can do the help gesture to invoke the application.
  
<h1><b>What the best way to show tutorials? </b></h1>
+
Through this approach, we saw how user experience was greatly improve and how every user could learn the gestures we have in Kinectify in a fun and engaging way.

Latest revision as of 12:13, 18 April 2012

Research on Kinect Tutorials

How it started

Through the FYP project, our team realize that for Kinectify to be successful in a commercial setting, it requires users using the application to be able to know how to perform the different gestures. Due to this, our team has identify Tutorial Videos to be a core portion of the project where users will be able to call out for tutorial videos whenever they are unable to perform a certain gestures or when they get "stuck" using the application.

Purpose of Tutorial Videos

For the tutorial videos, we aim to let users learn how to use kinectify in the most engaging and easiest manner ever. The tutorial videos will be like a virtual assistant being there by your side to teach you how to perform gesture step by step. In the event that users get stuck through the application, they can invoke tutorials through a simple gesture.


Challenges We Face

1 Different from Mobile Application or Website
We realize how different the tutorial are from a mobile application or even a website. We realize we are unable to simply give instructions in a manual or just through a screen as our application requires some form of "teacher" to teach the users how the properly perform the gesture. This is interesting as our team are being engage mentally and physically on creating tutorial videos that can teach users without us being there. We realize how detail we must be in our tutorial video but at the same time not making it too long if not we will lose the attention of our users.
2 What the best way to show a tutorial video

The team has came a long way from creating the tutorial videos. From the first video to the most current video we have produce, we have experiment with many different ways to let users learn how to use gestures in our web application. This was something interesting and also challenging for us as we do not have a so call "industry standard" we can use given that Commercial Kinect applications are very new in the market. We simply have to create the tutorial and then test the market response to see if the videos are effective.

3 No Industry Standard

Given the Kinect has always been used as a gaming platform, there is not "Industry Standard" when it comes to tutorial videos in a commercial setting. We have seen many different applications where Kinect is used in a commercial setting. However, one thing we notice is how all these application are mostly prove of concepts or there are users present to guide users through. As such, to help give us direction for our tutorial video creation, our team use Kinect games like "Kinect Sports" or "Dance Central" as a guide where we see how they showcase their tutorial video. From there, we tweet it into a more commercial ready environment where users can learn gestures in the easiest way and also engaging manner.

Learning Process - Observe, Testing, Improve Approach

To ensure that our tutorial videos are engaging and also commercially feasible. We went through the road of observing the different ways commercial applications are push into the market and how tutorials are taught. The team even went to shops with establish touch screen base applications to see how they taught their users. Through these different findings, we always improve the tutorial videos. How can we gauge if the tutorial is effect? For that, our team will consult opinions or even through User Testing environment to see how users react to the tutorial video. From the feedback we receive, we improve the tutorial videos. Through each version of the tutorial videos, we realize how effectively we are teaching the users.

Video Tutorial Journey and Progress

To meet the goals we define to create our video tutorials, our team tackles two critical questions:


How should the tutorials be shown?

From this question, the team aims to tackle how tutorials should be display and perceive by the end users. Through this question, you will see how our team tackle challenges like how we approach in flimming our tutorials or how we even show case step by step approaches to end-users. Ideally, our team will like the users to see the videos and instantly know how to use our applications.

Kinectsports instructions 1.png Kinectsports instructions 2.png Kinect sports.png

From the screen shots above, our team took reference from established kinect games like "Kinect Sports Season 1". Before the start of every game, there is tutorial to users where the users are engage in a step by step tutorial to aid their learning. We thought it was highly applicable to our application and thus we attempt to produce tutorial videos that are similar. The reason why we took kinect games as our reference as this gaming companies has spend millions of dollars doing research as to how tutorials can be taught to users and what the best way to learn them. For us, we felt it would be a good starting base for our tutorials.

Tutorial Timeline

In total there are mainly 7 versions of the tutorial video that has been created. This excludes any minor changes we made along the way to any versions. The different versions can be summarize as shown:

Version 1

Description

Tutv1a.png Tutv1b.png

The idea here is to show a simple videos where a highlight of a person is shown. The person will be facing the camera from the front. Simple instructions will appear when the user perform gestures like two handed navigation to help assist the user.

Limitations

Tutv1b.png This screenshot showns how users will not be able to gauge the difference in hand position they have to place.

We realize that the video is hard to view and is not very intuitive for users. As it is a single color highlight, it will be hard for users to differentiate how an actual swipe should be or even how to properly do a 2 hand navigation.Furthermore, the instructions are not very clear. For example, terms like "Push Forward". What exactly is push forward as different users will have different interpretations of this meaning. This are things in the tutorial we had to improve on.

Version 2

Description
For this version of the tutorial video. It was an improvement over the last video where the demonstrator is clearly shown. More meaningful instructions are added from just "Navigate" to "Navigate Downwards".

Tutv2a.png Tutv2b.png

Limitations
Limitations from this video is that the mask worn by the demonstrator is too scary and might scare some of the users. Apart from that, the instructions and images are still not clear enough for users. In fact, they might be redundant as the demonstrator is already performing the same action. Another limitation is where this video suffers the same problem to the last tutorial video. As it is forward facing, it was hard for users to tell actions like 2 hand navigation as they are unable to tell how far their hands should be apart.


Version 3

Description
More in-depth studies was done with reference to kinect games and proof of concept kinect applications online. Our team came out with this new tutorial video where it shows a step by step 3 column gesture screen. This time round, more visible changes were made to the tutorial.

Tutv3c.png For a start, a bright and striking title screen was included to let the users know what tutorial are they watching. Apart from this,the demonstrator is properly attired instead of having one color overlay or wearing a mask. Furthermore, the tutorial video breaks down the gestures into steps where each step shows a 45 degree view along with a front view. Depending on the gesture, the front view might be replace with a top view as the top view will be able to teach the user more effectively. We hope that through each step, users can see how this gesture is properly perform, especially with two different perspective. It should help the users greatly.

Tutv3a.png Tutv3b.png

Limitations
Though the tutorials were a huge improvements over tutorial 2, we realize how users still struggle to use the application. The tutorial videos do not show the actual kinectify screenshots. Thus though users can see how the demonstrator does the action, they are unable to visualize how this actions will impact on the actual application itself. Apart from that, due to the choice of clothing by the demonstrator, we realize that the pale pink cardigan blends too well with the white background that it makes it hard to view certain gestures. A different outfit could have been better. The wordings to describe each step was still too vague. For example, things like ready position does not mean anything to user.

Version 4

Description

More visual improvements were made. This time round, in view of the limitations mention in Version 3. We included the kinectify screenshot that show users the actual screen they will be interacting it. Apart from that, there is a main instruction shown the center that show users should do. There is also a improvement in the instructions given to users where it shows user for each step, what will be the purpose of the gesture. Example, Browse Up/Down is shown where the demonstrator browse with her right hand. The fancy title for each tutorial screen has been replace with our demonstrator performing the Help gesture and the title spell with bold font above.Overall, what we did this version was a huge improvement over the last version as users could now visualize how the different gestures interact with the kinectify screen.

Additional feature we added to this tutorial video was speech where every instruction was spoken to ensure users could hear it as they perform.

Tutv4a.png Tutv4b.png Tutv4c.png

Limitations Some limitations are as follows:

Tutv4c.png For the tutorial title, the font appears too kiddish or unprofessional. Furthermore, given the attire of the demonstrator, it blends too well with the white background that makes it hard for users to view properly.

Tutv4a.png For this screen, we can see center banners grab the attention of the users. As they are set to appear at the same time as the Steps below, it makes it very confusing for users to differentiate where to focus on. The font for the instructions can be improve and the demonstrator attire still blends too well to the background.

We also realize how our tutorial videos do not cover basic gestures like going back. This is something we like to explore for the next tutorial video.

The voice instruction was great but it was too robotic. We needed a more natural voice instruction. We also eliminated instructions like "excellent or great job" as it was redundant during the tutorial videos.


Version 5

Description

From the shortcomings of the last version, the team went back to the drawing board and ask ourselves "Where can we improve from here?" During the brainstorming, our team took details into consideration like

1. When would instructions, screenshot and demonstrator appear so users can have clarity of instructions and not be confuse?
2. How fast can we get users to understand the instructions in each step?
3. The proper wordings for instructions to use to ensure they are clear to the users and ensure word is not too technical for users
4. The timing to flash each instructions to users.
We basically re-shot all our tutorial videos through a very elaborated setup where the demonstrator was flim along with the kinectify screen shot as shown below. We have broken down the different gestures to have different angles. For most gestures, we maintain a 45 degree posture and for certain gesture like the fast scroll for 2 hand navigation, we use a front shot approach as shown below. [image1] [image2]

This time round, we even choose an attire that stands out for the video (Black Cardigan with Velvet red top) and prevented it from blending with the white background.

Changes were also made to the tutorial title page, instead of just "How to Browse Menu", we have included a screenshot of what users will be expecting in the next screen.

A introduction quick tip was also added to the tutorial video as we wanted users to know how to go back or get help through the application. This will be played whenever the application is started.

A new natural voice instruction was recorded to give users a more natural experience and interaction.

For this tutorial video, all instructions would appear first and spoken to users before the demonstrator and screenshot appear to show users.

Background music was added to make tutorial video more fun and entertaining.

The end result is a sleek tutorial application. During UT2, this tutorial was place in our ut2 environment to see its effectiveness.

Tutv5a.png Tutv5b.png Tutv5c.png Tutv5d.png Tutv5e.png

Limitations
It was through UT2 environment (4 days) that we saw the limitations of these tutorial video.

For a start, we realize how users do not recognize the help gestures as it seems like a title page instead of a gesture. As a result, 1st day of UT2, the users could not get help from the application.

Tutv5d.png From the screenshot above of the tutorial title, we realize that the tutorial title page was too short for users to notice what was actually going on. Furthermore, the animation of our demonstrator doing the help gesture confuse users. Another critical issue was also how each tutorial title look too similar that whenever it was played to users, they skip it instantly thinking it was the same tutorial video.

We also realize how lengthy our tutorial videos are at 1min plus. It was too lengthy and thus we needed to shorten it.

This time round, the tutorial was able to guide users properly but minor changes needed to be made and these changes were done through the 4 days UT2 testing.

Version 6

Description
Through the UT2, we made several immediate changes to the tutorial video base on the user experiences. This was necessary as it was critical problems that users face and would have drastic impact on UT2. For a start, we streamline the videos in terms of duration and steps. For example, for 2 hand navigation gesture, we initially had 7 steps as we separate left scroll from right scroll. After streamlining, we left 5 core steps where we group gestures like scroll left and right together. This has greatly has reduce the overall video timings from 1 min plus to all less than a minute. For the tutorial title menu, we have crop the screenshots to focus on specific areas and a notepad is place there to tell users what sort of screen or browser are they interacting with. This helps give a different feel to each tutorial video. Apart from that, the quick tips segment was given a revamp where by it has its own title screen and a intro to kinectify. The quick tip will show users what they will be expecting in Kinectify and what are the main gestures they should remember.

Tutv6a.png Tutv6b.png Tutv6c.png Tutv6d.png

Limitations
One limitation is that we realize that users do not know when the tutorial end so we have to find a way. Another limitation is that users do not remember what is the previous step about so we must find some way for them to recall what was the previous step they have done for the gesture. One other limitation was the background music that sounded repetitive and gave the impression that the tutorial video was similar. All these are solve in the next version.

Version 7

Description

The most current version of the tutorial videos where we address the shortcomings from the last version. We have included a end screen for each tutorial video so users know when the video ends as shown in the screen below. Apart from that, we have rename each Step in the video to show what the step is about. Users can be reminded about what each step is to help them complete the gesture. Lastly, we use a more light base music where each tutorial video had a different starting point. It gave a fresh new look and feel to each tutorial so users can differentiate them easily.

Tutv7a.png Tutv7b.png


When should the tutorials be shown?

The challenge

From this question, we aim to tackle on exactly when should the tutorial video be display. This is a challenging question as a tutorial video can make or break an application. Consider the following two scenarios that we observe from UT2,

Scenario A

Tutorial videos are only shown when users invoke the help gesture. We notice how many users come to application and they simply get lost. Despite the help signs, many do not really want to invoke the tutorial. The tutorial was very important for the 2 hand navigation as without it, it was quite hard for any users to figure out how to use it.

Scenario B

We show the tutorial video every time user goes into a new page. We thought forcing the user into the tutorial scenario would be the best case. Apparently, it was not as effective as we thought as we saw users either getting irritated by the repetitive tutorials from the same gestures or they simply skip every single tutorial as they find it hindering their actions.

Scenario C (Something we thought off but did not try it out)

Having a session base tutorial where the first instance a user uses the application, they will see every tutorial once. When they return to a similar page, they will not be shown the tutorial video as it is part of the same session. One problem with this is that was that our application had no login. Simply to say, it was impossible to tell when a user session started or when it ended. A user could found what he needs and walk away half way during our application.

As shown, the different scenarios post different difficulties but are considerations we had while developing the tutorial video. A group might have the best tutorial in the world, but then, the ultimate question lies " Where and when exactly to put them?"

Our Solution

Based on the different scenarios, our team studied how users react to tutorial videos and then came out with what we thought was the best way to integrate tutorial videos into the application.

Whenever the application appears idle or no users are in front of it, a screensaver would appear. If more than 10seconds, we assume that a new user is here to use the application and a quick tip tutorial video will be played to introduce the system. If the user happens to be an existing user, he/she can simply skip the tutorial. Through each screen, we choose to "simplify" each screen with possible instructions to help users use the application. In the worst case scenario, they can do the help gesture to invoke the application.

Through this approach, we saw how user experience was greatly improve and how every user could learn the gestures we have in Kinectify in a fun and engaging way.