HeaderSIS.jpg

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

From IS480
Jump to navigation Jump to search
Line 146: Line 146:
  
 
1. When would instructions, screenshot and demonstrator appear so users can have clarity of instructions and not be confuse?
 
1. When would instructions, screenshot and demonstrator appear so users can have clarity of instructions and not be confuse?
</ br>
+
<br />
 
2. How fast can we get users to understand the instructions in each step?
 
2. How fast can we get users to understand the instructions in each step?
</ br>
+
<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
 
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>
+
<br />
 
4. The timing to flash each instructions to users.
 
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.
 
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]
 
[image1]
Line 195: Line 195:
 
<b>Description</b>
 
<b>Description</b>
 
<br />
 
<br />
 +
 +
To shorten it, we had suggestions from users to streamline certain steps together. 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.
 +
 
[[Image:tutv6a.png ||300px]]  
 
[[Image:tutv6a.png ||300px]]  
 
[[Image:tutv6b.png ||300px]]  
 
[[Image:tutv6b.png ||300px]]  

Revision as of 09:17, 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 quicktip 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 lengthly 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

To shorten it, we had suggestions from users to streamline certain steps together. 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.

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


Version 7

Description

Tutv7a.png Tutv7b.png

Limitations