Psych Javascript

@orangedrum

Usability Test

1. Evaluate the usability of your website
2. Recommend improvements
3. Implement the recommendations
4. Re-test the site to measure the effectiveness of your changes.

"Test early and often."

Psych Javascript

@orangedrum

The Script

Hi,                    the Goat.

My name is Jean, and I'm going to be walking you through this session. You probably already know, but let me explain why we've asked you to come here today: We're testing a web site that we're working on to see what it's like for actual goats to use it.

I want to make it clear right away that we're testing the site, not you. You can't do anything wrong here.

We want to hear exactly what you think, so please don't worry that you're going to hurt our feelings. We want to improve it, so we need to know honestly what you think.

As we go along, I'm going to ask you to think out loud, to tell me what's going through your mind. This will help us.

If you have questions, just ask. I may not be able to answer them right away, since we're interested in how goats do when they don't have someone sitting next to them, but I will try to answer any questions you still have when we're done.

Do you have any questions before we begin?

Psych Javascript

@orangedrum

The Script

Before we look at the site, I'd like to ask you just a few quick questions.

1. First, ___the Goat, what's your occupation?
2. Good. Now, roughly how many hours a week, as a Goat, would you say you spend using the Internet, including email?
3. How do you spend that time? As a goat, what do you do both at work and at home on the internet.
4. Do you have any favorite goat sites?
5. Now, finally, have you bought anything on the Internet? How do you feel about buying goat things on the Internet?
6. And, as a goat, what have you bought?

​OK, great.

We're done with the questions, and we can start looking at things.

Psych Javascript

@orangedrum

The Script

First, I'm just going to ask you to look at this page and tell me what you think it is, what strikes you about it, and what you think you would click on first.

For now, don't actually click on anything, just tell me what you would click on.

And again, as much as possible, it will help us if you can try to think out loud so we know what you're thinking about.

What would you say americangoat.com is a site for? What would you expect to find if you were to click in the different sections? (think out loud)

So ___the Goat, you have a hot date this Friday and need to find a good place to go. You may click around to find your answer.

Would you think to go to Americangoat.com to find your perfect date spot? (What are you thinking right now?)

Where would you click next?

What would you expect to see?

What would you say americangoat.com is a resource for?

Psych Javascript

@orangedrum

our Hypothesis (or hope)

1. Goats use americangoat.com for all their internet needs
2. Restaurant sponsors would get more traffic with new link on home page

Psych Javascript

@orangedrum

a) quickest and easiest integration - well documented

b) stop running your own data servers

c) powerful - Data Modeling, Visualization tools

d) SDKs in all colors: JS, iOS, Android, PHP, Ruby, cURL, .NET...

e) scalable - use it however you need to

f) can change over time

g) so easy a UX Designer can use it

Psych Javascript

@orangedrum

1) Sign Up

Free to store data in Keen.io for up to 50,000 events. keen.io/signup

2) Create Project

Click giant "New Project" button. This creates a separate database to store all the things.

1) Grab the Keys

Be careful with that master key

Psych Javascript

@orangedrum

//********** Configuring Instance of Project **********//
  var client = new Keen({ ...
});  


//********** Listeners **********//
  $( "#distraction_eyewear" ).on( "click", recordEyewear);



  //********** CTAs as Data Objects **********//

  function recordEyewear(){
    // Create a data object with the properties you want to send
    var recordEyewear = {
      item: "recordEyewear",
      referrer: document.referrer,
      keen: {
        timestamp: new Date().toISOString()
      }
    };

    // Send it to the collection
    client.addEvent("ctas", recordEyewear, function(err, res){
    });
  };

Psych Javascript

@orangedrum

  //********** visualization **********//
  Keen.ready(function(){

    //goal count//
    var count = new Keen.Query("count", {
      eventCollection: "ctaGoal"
    });
    client.draw(count, document.getElementById("my_chart"), {
      chartType: "metric",
      title: "Total Times Goal Was Hit",
      colors: ["#49c5b1"]
    });


    //pie chart test//
    var pie_clicks = new Keen.Query("count", {
      eventCollection: "ctas",
      groupBy: "item"
    });
    client.draw(pie_clicks, document.getElementById("count-pageviews-piechart"), {
      chartType: "piechart",
      title: "Clicks on CTAs"
    });
  
  });