User Centered Design Tools

How to gather feedback about you or your company by Cory

funny-pictures-fighting-cats-constructive-feedback.jpg Some of the best feedback you can ever receive on your product is the unsolicited and indirect kind. Lets face it, most people are more honest about their opinions when there are no hurt feelings at stake.  Have you ever wondered what people are saying about you, your company, or your product when you're not around? I dont know about you, but if somebody says something about anything I've ever worked on, I want to know about it.

Companies are getting smarter about tracking what is said about them on them on web.

My good friend Greg over at Urban Monarch likes to write posts that go something like..."{ company name }, if you can hear me, we'd really like { product name } to review on our site". 9 times out of 10, the company will contact them for an address of where to send the product. Hey Greg...post a comment if you find this post (i dont think he follows my blog).

Recently, i posted a tweet on twitter..."I'm excited to make my first screencast using Screenflow". A couple of hours later, i get a reply tweet from the makers of screenflow saying "let us know how it goes...and be sure to post your work on our screencast site...". I was floored and instantly compelled to provide feedback to them on anything and everything Screenflow. Hey Vara Software, post a reply if you find this post.

miss-cleo.jpgHow are companies doing this? Are they telepathic? What worked for Miss Cleo does not work for all (Miss Cleo, post a reply if you sense this post). The trick here is to get the feedback to come to you so you are not spending a lot of precious time scouring the internet for related feedback. There's no better technology for this than RSS. Here's a few of the most effective tools I have found so far:

  1. Twitter You can track tweets on twitter by typing in "track" followed by "search term"....so "track user kind" will send me updates to any posts that contain "user kind". You can also track any activity on your twitter username: "track @twitterUserName".
  2. search.twitter.com Search all tweets and subscribe to the results via RSS
  3. FriendFeed FriendFeed aggregates information from a bunch of different social networks and websites...twitter, flickr, facebook, blogs, and 40 or so others. This is probably the most useful site for keeping track of what is said because you can type in any search term, and subscribe to the results as an RSS feed. For example, here's what people are saying about Screenflow
  4. Technorati Want to track what people blog about you? Try searching Technorati and subscribe to the results as an RSS feed.
  5. Google Blog Search Another blog search engine where you can subscribe to the results via RSS
  6. BlogPulse Track conversations and subscribe to the results via RSS

There you have it. You are now armed with some great tools on getting more in tune with what people are saying about you on the interwebs. If you know of any others, please post em!

Wireframe Stencils by Cory

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 by Cory

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.

Usability testing on the mac - Tools & tips by Cory

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.

Usability Testing - Screen Recorder for the Mac by Cory

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 by Cory

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 by Cory

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.

Google Powerpoint Confirmed - Visio Replacement? by Cory

docsslogo.gifToday Eric Schmidt, CEO of Google announced that they will be releasing the much speculated powerpoint version of their free online apps for small businesses. This is very exciting news for those of us who have been fully enjoying Gmail, Docs, and Spreadsheets...and more importantly those of us who use Visio. It has been said in the past that Power Point can be a great tool for creating wireframes and other types of bare-bones visualization methods. Though I've always used Visio in the past, I could see this new online tool being extremely useful for throwing together some quick diagrams.

Turn photoshop documents into working prototypes by Cory

pp_deployed.jpgAltia has released a photoshop plugin called PhotoProto that allows you to turn your photoshop documents into working prototypes. It is a script that you run that takes advantage of layers and layer comps, turning them on and off as you click around your mockup. The demo makes it look like it's very easy to use. You can even make changes to your photoshop document without affecting the prototype. Check out the demo video for more info.

Tips for consuming information via RSS by Cory

rss.gifWith over 140 RSS feeds now in my blogroll, it takes me around 2 hours a day to consume all of the info that is published...and most of that is just skimming to pick out the information I want to heavily digest vs. the info that doesn't matter so much. RSS allows us to consume more information faster than ever possible before. I even believe that RSS will increase the rate to which we evolve as a race. The downside of this is information overload. With all of this information at our fingertips, how can we possibly filter the important from the not-so-important? Marshall Kirkpatrick (former writer for Tech Crunch) gives us some insights to how he manages thousands of feeds with ease (I've added a couple tips of my own as well)...

Use a start page

Marshall suggests using a startpage that can be glanced at every couple of hours that gives you a high level of what's new with items you've marked as a high priority. The new google reader provides a nice start page that I sometimes use. Alternatives include Original Signal and Page Flakes.

Preview New Feeds

I think its a good idea to preview new feeds that you subscribe to. This helps keep them separate from other feeds you've deemed as important and reliable information. You can do this by creating a "new feeds" folder or just put them at the root level of your feed reader. Once you've deemed your new feed as one you want to hang on to and read regularly, you can them move into the appropriate folder or tag.

Organize your feeds

This one is pretty much common sense...but common sense is not always common practice. I am constantly re-structuring and optimizing how all of my feeds are organized. At one point i had an "internet" folder, but now its necessary for that to be broken out into 4 or 5 folders. Marshall advises that with thousands of feeds, it helps to separate your feeds by priority so that you can quickly access the more important information.

High priority sources

I'll just quote this one (note the last sentence in bold :)...

"The single most helpful tool for me in my efforts to blog about news events first has been an RSS to IM/SMS notification tool. I use Zaptxt to subscribe to very high priority feeds. It sends me an IM and SMS whenever a high-profile company blog is updated and in a number of other circumstances. There are quite a few services that offer this functionality now and it's invaluable. A big part of taking a prominent position in the blogosphere is writing first on a topic. That's a large part of what got me the job at TechCrunch and it's something that an increasing number of people are clearly trying to do.

In sectors where people are already using tools like the above, I expect further developments to emerge that differentiate writers' handling of the huge amount of information available. New tools and new practices. It's a very exciting time to be someone who works with information."

Do you have any tips to share? Let me know!

Beyond Visio - Simulation Prototypes by Cory

sim.gifWireframes never really cut it for me. Creating static diagrams of very dynamic sites make it difficult to articulate interactions to developers...normally requiring hand-holding to ensure things are built as designed. Developers loooove hand-holding.

Before I start a new project I normally interview the developers that I'll be working with and ask them what they expect from my prototypes in order to do their job the best they can. Most tell me that they want everything defined to the point that there is no question what needs to be built. (Personally I prefer working with developers that have more of a hand in the design so that they're engaged and accountable for what they're building...but thats another article). With today's tools (like visio), this is difficult to achieve.

We need more from our prototypes...they still need to maintain lo-fidelity and rapid development, but need to contain all the interactions and work like the final product.

Welcome to the world of Simulations. Simulations were originally used by Boing to test drive features of the 777 before they were actually built. In the same way, they enable us to build a web application that we can test drive (and usability test!) before we build the final product. They allow us to create working tabs, forms, error handling, and can even make global changes.
Boxes and Arrows recently posted a comparative review on various simulation tools available today...

Axure RP4

The latest version, RP4 (there is actually a Beta of 4.3) has certainly added a number of new features compared to RP3. RP4 provides the ability to create a basic sitemap (indicating pages) and the ability to link these pages together. RP4 offers masters for rapid changes to an entire project. RP4 allows for basic annotations but doesn’t offer a robust requirements management solution. Of the products reviewed, Axure RP4 falls in the mid-range for pricing. With the addition of a true simulation engine, this RP4 could certainly gain ground against the higher-end products. However, at its current price, it’s a great entry point into the world of simulation.

Scenario Design: No
Page Design: Yes
Widget Library: Yes
Dynamic Display: Yes
Data Interaction: No
Decision Logic: No
Annotations: Yes
Centralized Server: No
Portable Distribution: No
Requirements Management: No
Enterprise Support: No
Export to MS Word: Yes

LucidSpec

Much like Axure, LucidSpec offers the capability to create static “prototypes.” The product does not contain an actual simulation engine, thus limiting the product’s ability to save and reuse data at a later time. The product allows the design to “describe behaviors” or specifications in annotative form. However, it does not offer a solution for tying a non-visual requirement to visual elements.

Scenario Design: No
Page Design: Yes
Widget Library: No
Dynamic Display: Partial
Data Interaction: No
Decision Logic: No
Annotations: Yes
Centralized Server: No
Portable Distribution: No
Requirements Management: No
Enterprise Support: No
Export to MS Word: Yes

iRise

iRise offers a real simulation engine that allows users to save, edit, and delete requirements data. Of the products reviewed, iRise Manager provides the most comprehensive requirements management solution. Studio generates a portable simulation known as an iDoc, which can be reviewed with the free iRise Reader. Shared Server enables collaboration and incorporates a model for check-in/out capabilities and synchronization with the requirements management server. The shared server also provides an alternative delivery method, allowing stakeholders to view the simulation by accessing a URL. iDoc Express is a cost-effective service offering, where companies hand over requirements and receive a comprehensive simulation at a fixed price. No product purchase or installation is required. This is by far the most mature product in this space, with the most extensive list of recognizable customer names.

Scenario Design: Yes
Page Design: Yes
Widget Library: Yes
Dynamic Display: Yes
Data Interaction: Yes
Decision Logic: Yes
Annotations: Yes
Centralized Server: Yes
Portable Distribution: Yes
Requirements Management: Yes
Enterprise Support: Yes
Export to MS Word: Yes

Serena Composer
Composer fits at the lower end of the higher tier products. It offers the ability to model business processes at a very high level much like MS Visio. It then extends that ability to creating activities and detailed page designs. Composer provides greater support for requirements management; it is probably closer to iRise than any other tool. The challenge with Composer is that all users must own a licensed seat to view anything created within the product; this really limits the ability to share with stakeholders.

Scenario Design: Yes
Page Design: Yes
Widget Library: Yes
Dynamic Display: Partial
Data Interaction: Partial
Decision Logic: No
Annotations: Yes
Centralized Server: No
Portable Distribution: No
Requirements Management: Partial
Enterprise Support: No
Export to MS Word: Yes

Enterprise Simulator
Simunication is all web based. This is most likely the product’s biggest advantage over some of the lower- and middle-tier applications. Its interface, however, is quite cumbersome for the non-technical user. It offers the ability to simulate data through a scaled-down simulation engine. The workflow is driven primarily by creating use cases, then designing screens around those cases. Delivery is simplified by its all-online approach—thus anyone with a web browser can access it.

Scenario Design: Yes
Page Design: Yes
Widget Library: No
Dynamic Display: Yes
Data Interaction: Yes
Decision Logic: Yes
Annotations: Yes
Centralized Server: Yes
Portable Distribution: No
Requirements Management: No
Enterprise Support: Yes
Export to MS Word: No

Sofea Profesy

Profesy is comparable to Composer in product maturity. It offers requirements management with a scaled-down simulation engine. Much like Composer, there isn’t an easy way to distribute the simulation outside of the tool/editor in which it was created.

Scenario Design: No
Page Design: Yes
Widget Library: No
Dynamic Display: Partial
Data Interaction: Partial
Decision Logic: Yes
Annotations: Yes
Centralized Server: No
Portable Distribution: No
Requirements Management: Yes
Enterprise Support: Yes
Export to MS Word: Yes

Benefits to the user experience professional
User experience professionals who leverage simulation technology are able to visualize projects much earlier within the development lifecycle, while producing requirements that are much clearer than those generated through traditional requirements gathering processes. In fact, two of these packages, iRise and Serena, were actually created to help business analysts visualize requirements when they didn’t have access to user experience professionals for that part of a project!

One key feature that static wireframes lack is the ability to interact with the interface; by using a simulation tool, this limitation is removed. Software interactivity and ease-of-use, in addition to the portability and reusability of the simulation, are key points to consider in choosing the right simulation software for your company. The next several years should be quite interesting as each of these products continues to improve, adding new features and offering tighter integration with third-party products.