Jack of All Trades Web Development

Cheap User Testing with Amazon Turk

m@marcgrabanski.com (Marc Grabanski) — Tue, 23 Jun 2009 10:08:31 -0700

Category: Usability & Testing Tags: Testing

After writing clean, cross-browser code and testing it in all browsers.. what if issues show up on others' computers and not yours? Recently this happened to me and I was baffled.

Cross-Browser Testing

Upon testing my code in IE6+ through a virtual machine, Firefox, Safari and Chrome.. it all worked. Yet when I handed off the code to the client, they replied, "the submit button isn't working". So I went back to doing further testing.

Friend Testing

Friends tested the website and it worked for them. Yet, the client still could not submit the form on their computer. I was now infuriated at this mystery.

After some changes, I revamping my code and making sure every "t" is crossed and "i" dotted. The markup was now perfect and validated with w3c. Still, after sending it through to the client it still didn't work for them! "Wow?!" I thought, "what do I do now?"

The Problem Still Exists. "What Now?"

At this point I was mad, not at the client but at the fact that I had no idea what was causing the issue. I then said these words to the client:

If I could have 100 PC computers from all around the world to test your website to find the issue, I would pay for it. I am riled up about this and want to fix the issue at all costs.

The Amazon Turk, "Testbed"

To my complete amazement, I actually found out a way to have 100 PC computers from all around the world testing my website! Welcome to the world of Amazon Turk. For a total of $5, I had just about 80 users go through my tests and give me feedback.

My Process of Testing Through Amazon Turk

I came up with a process that made it easy to report back to the client with findings and numbers

Setup a test to gather feedback on using the website. Be sure to isolate the code so that you only have the code on it that you think might be causing an issue. Save each file used in the test for future reference.
Register and pre-pay around $5 on Amazon Turk.
Created a HIT (Human Intelligence Tasks) on Amazon Turk that details the test. Use the default template and make sure you have a textarea on the HIT for them to report their findings.
After getting results back, summarize the findings into a paragraph that pinpoint reported issues.
Based on the summary, create an action item in order to develop a solution.
Based on the action item, create a new test with the solution.
Post the new HIT / test on Amazon Turk until your desired results are achieved.

Failing at First

My first HIT test didn't go well, 75% of the users failed. But, I got great feedback and found a solution based on the feedback.

Resolving Infrequent Problems

In test rounds 2 and 3, I found infrequent problems based on specific cases with users. I made my error messages very specific so that users could copy and paste the results into the Amazon Turk results so that I could easily resolve the issue. These issues normally wouldn't surface in the testing process unless the website was launched for a while and someone told us about it. Even then, it would have shown up so infrequently that I'm not sure we would have bothered.

Make your error messages specific, so users can report exactly what happened.

From 25% Completion, Up to 96% Completion!

After 4 rounds of tests, the completion results went up to 96% completion rate! During one of the tests, the user said the page didn't show up. So the website must have temporarily been down and I'm not worried about that one failed test out of so many succesful test.

Emailing through Google Apps / Gmail on CakePHP

m@marcgrabanski.com (Marc Grabanski) — Sun, 07 Jun 2009 18:20:21 -0700

Category: PHP & CakePHP Tags: Email, PHP, CakePHP

When launching new websites and web applications, it is difficult to get on trusted email lists of Hotmail, Yahoo and Etc. Aside from having proper SPF records, a great way to avoid this sysadmin problem is to use Gmail / Google Apps to offload your domain's email to their servers. By doing this, your domain gets an instant trust factor with receiving mail servers that a new server simply cannot do in a short period of time.

To email with Google Apps / Gmail with CakePHP, I've had recent success using the SwiftMailer CakePHP component. It is easy to use and leverages the PHP SwiftMailer library.

Configuring SwiftMailer CakePHP Component with Gmail

This is pulled off the component article's example, but I posted it here as well for your reference.

$this->SwiftMailer->smtpType = 'tls';
$this->SwiftMailer->smtpHost = 'smtp.gmail.com';
$this->SwiftMailer->smtpPort = 465;
$this->SwiftMailer->smtpUsername = 'name@domain.com';
$this->SwiftMailer->smtpPassword = 'your_password';

$this->SwiftMailer->sendAs = 'both';
$this->SwiftMailer->from = 'name@domain.com';
$this->SwiftMailer->fromName = 'Full Name';
$this->SwiftMailer->to = 'to_name@domain.com';
$this->SwiftMailer->template = 'your_action';
$this->SwiftMailer->subject = 'your_subject'

I added two custom attributes here, template and subject because I find I like to set that as a variable instead of putting it in the send function (in the next step).

Emailing with SwiftMailer CakePHP Component

The send function has 3 parameters, but we are only concerned with the first two since we've already configured our settings in the step above. The first is the template found in /views/elements/email, the second is the subject.

try {
    if(!$this->SwiftMailer->send($this->SwiftMailer->template, $this->SwiftMailer->subject)){
        $this->log("Error sending email");
    }
} catch(Exception $e) {
	$this->log("Failed to send email: ".$e->getMessage());
}

You will also notice here that we are wrapping the send function in a try/catch block. This allows us to output whatever caused the function to fail through an exception (and fail silently), rather having the component either kill the client to output the message, or simply return false with no explanation like a lot of things in CakePHP-land. Try/catch blocks work great in non-mission critical things like sending an email, conturary to the core library which should simply fail and exit the application.

I had one error on my local computer with TLS not being installed into PHP. So I added the following line to my PHP compile to add TLS support:

--with-openssl

My entire PHP compile looks like this...

sudo make clean && sudo ./configure --prefix=/usr/local/php5  --with-pear --enable-sockets --with-iodbc=/usr --with-curl=/usr --with-mysql=/usr/local/mysql --without-iconv --with-apxs2=/opt/local/apache2/bin/apxs --with-zlib-dir=../zlib-1.2.3/ --with-jpeg-dir=../jpeg-6b --with-openssl --with-gd --with-freetype2=/Developer/SDKs/MacOSX10.5.sdk/usr/X11/include/freetype2/freetype && sudo make && sudo make install

As an alternative to SwiftMailer, I was pointed to joshua's solution on the mailing list to use the built-in CakePHP email component with Gmail. Apparently he got it to work, but I couldn't for whatever reason.

Enjoy having mail go through to your users without fail!

jQuery Tools vs jQuery UI

m@marcgrabanski.com (Marc Grabanski) — Fri, 05 Jun 2009 00:09:13 -0700

Category: JavaScript & jQuery Tags: jQuery, jQuery UI

A new library has come out called, "jQuery Tools" that is packed with some visually appealing plugins built on top of jQuery. Here is their opening line to grab your interest:

Let's face it: do you really need drag-and-drop, resizables, selectables or sortable tables in your web applications? Websites are not desktop applications. They are different.

This is obviously a jab at jQuery UI, but before we dismiss what they have to say let's read on...

What you really need are tabs, tooltips, accordions, overlays, smooth navigation, great visual effects and all those "web 2.0" goodies that you have seen on your favourite websites.

This library contains six of the most useful JavaScript tools available for today's website. The beauty of this library is that all of these tools can be used together, extended, configured and styled. In the end, you can have hundreds of different widgets and new personal ways of using the library.

While there is some truth to the fact that you don't need each component that jQuery UI provides in most websites. You still have to keep in mind that jQuery UI's focus is to bring a set of components to the table that you can pick and chose from.

I agree with what the jQuery Tools author in saying that everybody needs overlays and visual effects that this library provides. I just don't understand the arrogance of attacking jQuery UI right off the bat, instead of augmenting the library and working together with them.

Note: the author says he isn't attacking the jQuery UI library (in comments). But I think he should still be looking for ways to add the good parts of his plugins onto jQuery UI.

From an outside perspective, this library shines and has great potential. However as I dig deeper into the API and intensions it just looks bad.

Note: Tero from jQuery Tools has updated the API to fix this issue I'm pointing out here. You can see the result of the update in the jQuery Tools release notes. This type of thing should be sorted out behind the scenes from now on, but it was a good learning experience for me personally about where the public / private line should be.

Tooltip

Demo (hover over box):

Definition of Pride

Tooltip Implimentation

<!-- trigger element --> 
<a href="#" id="trigger"> 
    Move the mouse over this box to see the tooltip in action. 
</a> 
 
<!-- tooltip element --> 
<div class="tooltip"> 
    <h3>The Tooltip</h3> 
 
    <p> 
        <strong>A great tool for designing better layouts and more intuitive user-interfaces.</strong> 
    </p> 
 
    <p> 
        Tooltips can contain any HTML such as links, images, forms and tables. 
        This tooltip is vertically centered on the top edge of the trigger element. 
    </p> 
</div>

$('#tooltip').tooltip();

It doesn't make sense within the context of jQuery.

So apparently, you have to grab the tooltip div, then turn it into a tooltip? Um... what? How do I get multiple tooltips on the page?

Quick, here is the philosophy behind jQuery:

Find element(s) on the page

Do something to them

Is the tooltip on the page? nope, not yet. Ok, failed #1. Where do we go from here? Typically you would grab elements on the page and then attach the tooltips to them. This is just common jQuery sense.

Note: After reading this article, the author of jQuery Tools updated his tooltip API.

As I dive into more examples of the tooltip, it continues to make no sense. The form example have no way to target inputs that you desire with custom classes or ids. You have to modify the markup before page load to change tooltips. After you load up the tooltips, you are stuck and cannot ditch tooltips, or make new ones from within the JavaScript.

Please, just use the jQuery Tooltip plugin or ClueTip.

Non-jQuery API

So now look at the API where it talks about returning the API instead of a jQuery object by passing api: true .... WHAT?! We are now forced to exit out of jQuery into a seperate jQuery Tools API by passing a variable?

var api = $("#myDiv").scrollable({size: 3, api: true});
api.onClick = function(){ ...

Contrast this to using jQuery UI, you can stay within' jQuery and modify all settings.

var $myDiv = $("#myDiv").accordion({ 'header': 'h3' });

Then if later we want to change an option we can use that same div jQuery object.

$myDiv.accordion('option', 'changestart', function(){ ... });

With jQuery UI, all the plugins work with jQuery and it's philosophy. Working with John Resig's supervision and incite. Working together. Returning a seperate API has some potential, but not the way it is implimented here.

jQuery Tools flying solo

All this means (from what I've seen) is that the author did not take the time to learn the why behind jQuery and decided to go his own route, then flame jQuery UI and give you some shiny effects. The effects have potential, but the author needs to open up the code and start collaborating instead of going it solo.

Note: discussion has been opened up between jQuery UI and jQuery Tools teams.

Keep it real, y'all

First Look at Google Maps API v3

m@marcgrabanski.com (Marc Grabanski) — Thu, 28 May 2009 01:06:58 -0700

Category: JavaScript & jQuery Tags: Google Maps, JavaScript

Google announced version 3 of the google maps API.

Some things I noticed right away:

no API key required! before you had to sign up for an API key, but now you can shed your API key woes (I know I had them) and not have to sign up for one again.
mobile browser support (iphone and android)
You now have to specifiy the sensor variable in your include of google maps
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true">
the sensor is for detecting user's location with mobile sensors like GPS
No more polluting the global namespace with tons of variables. Google is moving over to their google namespace. so instead of new GMap2 you do new google.maps.map
New mouse event object.
Default UI so that as Google maps updates their UI, you get to enjoy the new interface without updating code.
it is like 3AM now so that is enough changes to see before I go to bed. =P

The only thing I couldn't figure out is where is the directions object? A lot of my maps applications use driving directions, so I'll be holding off on migrating over until I figure that out with the new API.

Twitter Invented a New Type of Phone

m@marcgrabanski.com (Marc Grabanski) — Sun, 10 May 2009 01:31:27 -0700

Category: Communication & Reading Tags: Twitter, Communication

"I'm shifting from RSS to the live-web [Twitter]" - Minnov8 podcast: episode 36

Another person on the podcast even quoted:

"The internet seems to be shifting to the live-web instead of blogging"

This comment fired me up a bit to tell you that Twitter is simply a new form of communication. New methods of communication encourage the others, not destroy them. Finding out about Twitter is like when people found out about the telephone. Telephony is a method of communication that bridges the gap between actually physically having to be in the same location. Overall people are able to meet up by talking on the phone first, expanding their communication. In this same way, Twitter bridges another gap of instantaneous communication between blogging and emailing.

Blogging and (e)Books are Here to Stay

Other types of communication are not going away. Blogging, books and e-books, major publications, etc are all forms of communication that will more than likely actually increase with the advent of micro-blogging.

Major publications will always exist because we, as humans need an "authority" to trust in each topic. Someone who really knows their stuff in the midst of the sea.
Personal blogging will continue because we need a place to gather our thoughts into a (semi)thought-out format that is publicly consumable.
Books will stay because we need deep, thorough and comprehensive content covering various topics.

Twitter's Invention, Micro-Blogging

In late 1800's, "What is the Telephone?" was the question. After the invention of the telephone, more communication actually took place. As the internet continues to grow, we are learning new forms of communication with each other and asking similar questions, "What is blogging?" "What is Twitter?"

Instead of what is twitter, the real question should be,"What is micro-blogging". Twitter was the one to captivate the majority of people using micro-blogging, so this becomes the saying, "Kleenex" instead of saying what it is, facial tissue. Twitter's underlying principle is actually micro-blogging. Micro-blogging is obviously a short version of blogging limited to a set amount of characters (140 because of SMS capabilities).

Hyping the New Telephone

The current hype of Twitter is a result of people finding out about this new form of communication. It encourages them to get involved with a low barrier to entry. This is exactly the same as when the hype of blogging was going on. The only difference between this and the hype of blogging is that blogging was not tied to a single service leader -- there were many (Blogspot, Blogger, Typepaself-hosted, etc). With micro-blogging people have a single source to direct their attention to, hence the major hype on Twitter with the only occasional mention of the real invention, micro-blogging.