Wireframe Stencils

June 20th, 2008

My good colleague Oliver just linked me to this awesome wirefaming stencil kit from Yahoo!. These stencils contain just about every common element you’d need for wireframing anything from websites to iPhone apps. They even provide all kinds of different formats (Visio, PDF, SVG…to name a few).

Here’s a list of the different stencils located in the zip file:
picture-10.png

 Here’s some direct download links:
OmniGraffle
Visio (XML)
PDF
PNG
SVG

Recruiting Usability participants using Craigslist and Google Spreadsheets

April 11th, 2008

I’ve discovered some pretty slick and painless ways to recruit participants for your usability test. Google recently released an easy way to create a questionnaire and have the posted form automatically fill out your Google spreadsheet.
Heres how you get started:

Step 1) Create a google spreadsheet

googforms.jpg

Step 2) Create your questionnaire form

goog2.jpg

Now you can create any combination of text entry, multiple choice, check-box based, or “choose from a list” based questions your potential participants will answer for you.

Step 3) Preview your form and copy the link

picture-8.png
Step 4) Create a craigslist posting under Computer Gigs or related area for your test. Paste a link to your form in the craigslist posting as the only way to contact you.

Step 5) Watch the results populate in your spreadsheet

Now you’re all set and every time someone fills out the form, the results are magically posted to your google spreadsheeet. You can set up notifications on the spreadsheet so that you’re emailed as soon as there’s a posting.

This takes the time and hassle out of creating a contact sheet of usability participants.

The Tipping Point – A book every information designer should read

February 29th, 2008

tipping_point.jpgI recently read The Tipping Point by Malcolm Gladwell and must say it has had a profound impact on how I see information design and the world in general. It is the concept that little things make a big difference or “tip” an idea, concept, or product from mediocre to widespread adoption.

The book is filled with many in-depth case studies that reinforce the concept and help you become more familiar with how our minds work, how our culture works, and what links it together.

One interesting thing the book mentions is how the TV show Sesame Street became successful by doing iterative usability type testing on kids. They used the testing results to drive tweaks to the show that eventually led to the success. They used testing to figure out what the show needed in order to “tip”.

Usability testing on the mac – Tools & tips

February 28th, 2008

I’ve been doing a lot of usability testing on the mac lately and have learned a lot from it. One of the best things I’ve learned is that even though the mac is the most expensive computing platform, it is the cheapest to conduct a quality usability test on. Here’s why:

Recruiting: Craigslist – $Free
(I offer $50 per person that comes in)
Mac users are passionate about using a mac. A quick post titled “Mac users needed” on the computer gigs section offering $50 for 90 minutes of your time yields dozens of responses from a diverse crowd in less than 24 hours. I’ve created a form that i point the craigslist posting to which asks some simple questions related to the type of user i’m looking to test.

Screen recording software: Screenflow – $100

picture-1.png

Screenflow, only available for Leopard, is awesome because it allows you to capture the entire screen, internal audio, audio from your computer’s mic, and video from your iSight…all at the same time while running un-noticed in the background. You can even go back and edit it down with some simple features. For $100 this is a very powerful usability tool. The downside of Screenflow is that it takes a long time to export as a quicktime movie. An hour long usability test might take 6 hours to export on my macbook pro. I tried exporting the same clip from the new 8-core mac pro and it still takes a couple hours.
iShowU is a more dumbed down screencasting software that solves the export problem by creating the .mov file on the fly…so as soon as you hit stop, the file is ready to be watched in quicktime.

The Tests

Since I myself do the moderation and everything is recorded, it doesn’t need to involve anybody else’s time. This means that to conduct a full-on usability session of 8 recruits only costs $500. Compare that to the $10,000-15,000 cost of hiring someone to do the recruiting, renting a usability lab with all the equipment, and force 5 of your co-workers to sit behind a 2-way mirror for 8 hours. Seems like a pretty compelling alternative.

Tips for setting up your test mac

  • Make sure to disable any Expose hot spots in the preferences…people use this differently and it can get annoying pretty quick if windows start flying around in the middle of a test.
  • If you use a mighty mouse, or any mouse with a middle click, be sure to disable the middle click. I have my middle click set to trigger the dashboard so its good to prevent someone from triggering it unintentionally in a test.
  • This may be obvious, but be sure to close your instant messaging software like Adium or iChat.
  • Its always a good idea to do a restart before a test…who knows what type of processes are lingering that could hinder performance or cause a crash. Its safe to start with a clean system.

Really bad yet comical error messages

January 11th, 2008

error2.jpgStumbled on this site that lists out a bunch of really bad yet funny error messages found on Windows. One of them found the same dreamweaver error that I had a few months back. Good stuff.

Usability Testing – Screen Recorder for the Mac

October 30th, 2007

picture-6.pngI am about to embark on a pretty exciting usability study on some software we’ve been working on at Blue Lava Technologies. Since I will mostly be conducting usability testing on my own (everything from recruiting people to moderation and reports), I need a way to capture the user sessions on the computer so I can focus on moderating instead of being distracted by taking notes. Its also good to capture the sessions so that the team can review them when they have a chance (though in my experience nobody ever does).

My requirements for this software are pretty basic:

  • Must not impact performance at all…should run completely transparent in the background
  • Record the entire screen at a real-time frame rate so that mouse movements are clear
  • Record the audio from my laptop mic (or external mic if needed)
  • output a video file that can be reviewed later

I’ve done testing in the past that captures a video of the person’s face along with the screen so you can see physical reactions, but this has never really added that much value. Just observing the mouse movements alone can give you great insight to what the user is thinking.
Since I’ll be testing a mac application, this limits the options available for me to use quite a bit…but the funny thing is, I found IShowU, a $25 piece of software, to be the best solution.

I have tested it for hours at a time with no problems…and it is very configurable to suit a lot of different needs.

I love products that do 1 thing great…and this is one of em.

Instantly poll 30 million people on Facebook

July 25th, 2007

facebook.gifThe president at the start-up I’m working for, Lorenz, has been ranting and raving about how awesome Facebook is…so much that we’re starting to wonder if he is secretly working for them. Though I still don’t quite understand what the buzz is all about yet, he recently found and used their polling feature that I find amazing.

For as little as $6, you can poll Facebook’s 30 million users to get insight on questions you may need answers to without going through all the trouble of usability testing or traditional (and expensive) polling methods.

We tried a few questions and got several hundred responses very quickly. Overall I find it extremely useful and will definitely be using it a lot to assist in some of those difficult design decisions.

UPDATE:

Ok now that I’ve been using Facebook for the past couple of weeks, I can see the light now. From the time I registered to now, I’ve added about 5 friends on my own, but other friends and friends of friends have quickly found me and added me to their friends list. I was quite amazed at how quickly and easily they help you and your friends connect (via your IM, email contacts, etc…). Once you have a decent amount of friends you’re connected to, Facebook gets really awesome.

Facebook is one million times better than myspace. Granted I’m not a popularity-starved teenager who wants to pimp out my profile beyond the point of legibility, but the usability and thought they’ve put into every detail in order to enable a great social network is really impressive.

Ajax and Usability – Browser navigation buttons

July 19th, 2007

ajax1.jpgOne of the biggest usability problems you encounter in a fully Ajaxified site (i.e., a completely dynamic site that functions with little to no page refreshes)…is the fact that anything you load dynamically on the page without a refresh is blind to the browser’s buttons, as well as bookmarking.

Kailash however has discovered a slick way around this problem in this post. He mentions that by making use of the ‘url fragment identifier’ or whatever that comes after the # in a url, you can use javascript to dynamically update the url in the browser’s address bar:

Javascript can update the fragment identifier dynamically with a simple

CODE:
document.location.href = ‘#whatever’;

On page load, something like RegEx could be used to parse the query

CODE:
var thisUrl = document.location.href;
var query = thisUrl.split(‘#’);
alert(query[1]);

So if page numbers or required variables are set as the fragment identifiers, it is possible to efficiently make Javascript process it (nearly) and make Ajax act normal with page urls.

On another note, Smugmug has released a new version of their site that is proof positive that this technique can sucessfully be done. Well done! I’m really excited to start using this technique on our projects over at Blue Lava.

Gibberish application messages…

May 10th, 2007

I updated my copy of Adium instant messenger today, and after it installs, it presents me with this message:

adiumchange.jpg

After reading it, i had no idea what to do. The question starts out “Do you want to allow access…” and the action buttons are “change/dont change”. I knew that one button would probably grant the new version access to my IM account passwords, while the other would deny it. I ended up picking a random option and it happened to be the right one (no whammys!)

It’s been pretty quiet here…

May 8th, 2007

But for a good reason. I have accepted a full time position as Director of User Experience for a social-based web 2.0 startup in Honolulu, HI. The company is called Blue Lava Technologies, and we’ll be developing some break-through technology that will change the way you interact with your photos.

I have been working on the sister website, Kindfish.com for the past few months, and we’re about to roll-out some awesome new features as well as some social aspects that will make it a lot of fun to use.

With that said, I’ve decided to focus my future blog topics around social/web 2.0 user experience so that i can blog my thoughts and learnings as I go.