Welcome to the new Userkind.com

RIP old Userkind.com! It's bittersweet because I spent a lot of time building the old userkind site from the ground up. It served me well for 5 years, but it's starting to get dated and it doesn't do a good enough job at showcasing my work.

In the UX world, people want to see the wireframes and the story behind the project. Wireframes are ugly, but they're the foundation of a great user experience, and I want people to see the process and thinking that goes into a project.

I decided to use squarespace for my new site. That seems ludicrous seeing that I'm such a WordPress guy, but after multiple recommendations from smart people I know, and multiple free meals from the squarespace truck at SXSW, I decided to give it a closer look.

Man was I blown away! Talk about an elegant user experience. Squarespace quickly won my heart and the quality of their themes was exactly what I was looking for. It lets me focus on showcasing my work and not spend a bunch of hours building a site/theme from the ground up. I just dont have time for that, and I'd rather spend my time building great things for my clients.

I'll be adding more projects to my portfolio, but for starters, here's a deeper look into some recent projects I've completed:

Hawaiian Airlines Mobile Website

AppifyWP

W3C Validator Suite

Mozilla Popcorn

Improving Your App Store Rating

If you're an app developer, your app's rating is the lifeblood of your app's success. I wrote an article over at Mobile Orchard that outlines some tools and techniques for improving your app store rating.

Create a Spam-free contact form without a captcha

Captchas are annoying and only exist to combat spam. I've been using a technique for the past year that doesn't require a captcha and I haven't received a single piece of spam email. Here's how:

1. Create a form and set the form action to # (we dont want spam bots to know where the form is being submitted to).
2. dont use a submit button, instead use an <a href="#" class="submit">Submit</a>
3. Use jquery to trigger the post when the '.submit' link is clicked.

Here's the jQuery code I use to do the form post:

$('.submit').click(function(){ 
  
  // get the text that the user put into the form 
  var name = $('input#contact-name').val(); 
  var email = $('input#contact-email').val(); 
  var message = $('textarea#contact-message').val(); 
  
  // prepare it for an ajax post 
  var dataString = 'name='+ name + '&email=' + email + '&message=' + message;

  // post the form to the page that hosts your email script 
  $.ajax({ 
    type: "POST", 
    url: "/a/contact/", 
    data: dataString, 
    success: function() { 
      $('.contactform form').fadeOut(); 
      $('.contactform form').html("Thanks for reaching out!") .fadeIn(function() { 
        $('#formage'); 
      }); } 
  }); return false;

});

Building a great user experience for your mobile app

I'm really pumped with the innovations happening around mobile app development right now, and user experience is a growing focus as a driving factor in overall app store success. It's one of the reasons I created AppifyWP. I've written a guest post over at Mobile Orchard to help app developers build a great user experience for their apps. The principals of the article are fairly universal and can be applied to just about any project, mobile or not.

Introducing CrowdTube.tv

I'm excited to announce a side project that Derrick Petzold and myself have been working on that is finally ready to be consumed by the public. The Problem

Browsing YouTube clips is a cumbersome task. The clips are short, and you spend more time clicking around than actually watching videos. You cant really just kick-back and watch YouTube like you can your TV. We need the best of the web presented like a TV show...like a continual Tosh.0 without Tosh. We need something on the web that you can turn on, kick-back, and be entertained with no cable connection required.

Welcome to CrowdTube.tv

With CrowdTube.tv we take the most entertaining and trending YouTube videos as voted by the masses, then present them back-to-back like a never ending TV show. Videos that you watch are crossed off the list so when you come back, you see fresh videos every time. Welcome to TV meets the web, no hardware or cable service required.

I hope you enjoy it as much as we have. We'd love to hear your feedback!

Gmail adds more logic to improve UX

I was pleasantly surprised the other day when I fired off an email, and Gmail threw an alert saying "Did you mean to attach files?"

What a simple and brilliant piece of logic. We've all encountered this embarrassing problem countless times, and with a line of code, google engineers put an end to it. This is the type of stuff I'm talking about when I say "Make the system work hard so users dont have to".

Awesome work Google.

Using The Paradox of Choice to Improve User Experience

When designing a UI or landing page that has a desired action, I like to revisit the principals learned in an excellent book by Barry Schwartz called "The Paradox of Choice". There are three main principals I've taken away from The Paradox of Choice:

1. The more options people consider, the more buyer's regret they have.
2. The more options people consider, the less fulfilling the ultimate outcome.
3. Most important: The more options people have, the less likely they are to make a choice.

These three principles can be tough to use when designing a UI or a web page because our instincts tell us that more = more when in reality it is quite the opposite.

Here's a few tips for improving your user experience using these principals:

Strip out the bells and whistles. Unless they directly aid in getting your users from Point A -> B, loose em.

Get rid of fluffy copy. Face it, when trying to accomplish something, people don't read, they skim. Fluffy copy just slows them down and waists precious time. Chances are that if you need lots of text to describe something, that something is too complicated. If you must have a block of copy, re-write it down to the point where is says the same thing in as few words as possible.

Dont give users a bunch of different ways to view the same information. Determine the best way and present it that way. Any time I've ever built a UI with lots of views types, usability testing forces me to choose the best and strip out the rest.

Present one task or call to action per screen. Every screen should have one clear call to action or end goal. It's better to have many screens that lead the user down a path than one page that does it all.

CSS resets

Using a CSS reset has saved me a lot of time and frustration with cross-browser styling. It is annoying however that most reset style scripts reset every element in the html spec...most of which you'll likely never use on your project. Tuhin over at Inspiring Pixel wrote a good post on the pros and cons to using a css reset, and also provides a bunch of different reset scripts based on your needs. I'll definitely be referencing this for future projects.

This makes me wonder though, is there a tool out there that can generate a reset script for you based on the elements you know you'll be using on your project? If not maybe I'll go build one.

25 User Experience Videos Worth Watching

Smashing Magizine published a great list of thought provoking user experience presentations by the industry's top experts. A few of my favorite are Jesse James Garett's (Adaptive Path) "The State of User Experience", Nick Fink's (Blue Flavor) "UX Best Practaces", and Leah Buley's (Adaptive Path) "A UX team of one", which I had the pleasure of attending in person at SXSW in 2009. It's an exciting time to be in the user experience business!

Welcome to the new User Kind

I've been working for some time on revamping the user kind site and my portfolio with a fresh look and some fancy jQuery. Today I'm happy to launch User Kind 2.0. This was a design idea I had many years ago for a flash site that never came to fruition. After working with jQuery over the past year, I wanted to see how far i could push it to behave like a flash site. As it turns out I was able to acomplish everything I wanted (and more). The biggest hurdle was ie7 (surprise, surprise), but was eventually able to bend the code to work for most browsers.

The best thing that came out of this effort was what I learned in the process. jQuery is a truly powerful tool and is shaping the future of the web...I'm really looking forward to using it every chance I get.

Malcolm Gladwell: What we can learn from spaghetti sauce

Malcolm Gladwell, author of "The Tipping Point", "Blink", and the new book "Outliers", gave a TED talk that I find really interesting.

iLovePhotos Launched!

For the past couple years I've been working on iLovePhotos with an amazing team of talented people. It has been a long and enlightening journey, and I'm really proud to announce that today is the day we launch!

Visit www.iLovePhotos.com and download your copy today!

blog hacked

Wow, I just learned the hard way what happens when you dont update wordpress. This blog was hacked and injected with about 2mb worth of spam links. The script also went in and changed the file permissions on pretty much everything, adding extra headache in getting things fixed. I found out about this because google sent me an email saying that my blog was removed from the google index, stating exactly why.

Now that I'm running the latest wordpress, I've temporarily lost my custom theme, so I'm rolling with the  default for the time being.

UPDATE: I'm now using the "wordpress automatic upgrade " plugin, which makes updating a snap so you can retain your custom theme and plugins. Awesome!

How to gather feedback about you or your company

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.

How 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!

Ditch that pagination! - AJAX "Load More..." = Awesome

We've reached a point on the internet where page loads are unnecessary and instant gratification is expected. AJAX has become the new standard for how we retrieve and post information. Pagination has always been one of those tedious and annoying necessities for breaking up information, and the time has come to put an end to it! If there's anything that iPhone email or Google Reader has taught us, it's that pagination sucks. Once you use either of these products, going back to the "old way" of pagination will make you want to go do some yoga breathing exercises (or am I the only one?).

Why pagination sucks:

• when you're on page 3, all the content you've loaded from pages 1 and 2 are now inaccessible without clicking your browser's back button a few times...then scrolling back to the information you wanted.
• Target areas of pagination links are normally tiny and hard to quickly find.
• Pagination causes unnecessary server load when people request previously loaded information via pagination links.

A better way : AJAX "Load more":

• Use AJAX to load additional content below existing content without refreshing the page
• Have two HUGE buttons: "Load next 20..." and "Load All..."
• For textual content, add a visual indicator to separate every 20 or so items to aid in knowing where you currently are in the list

I know you might be saying to yourself..."Dude, your blog still has this crappy pagination!". Yes, I am fully aware that my wordpress site you're viewing does not utilize this. My current endeavor of changing how we organize and share our photos takes up most of my time these days. That is why I would encourage you to go and write a wordpress plugin for me and the rest of the blogosphere to solve this problem :)

Wireframe Stencils

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:

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

Recruiting Usability participants using Craigslist and Google Spreadsheets

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

Step 2) Create your questionnaire form

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

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

I 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

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

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

Stumbled 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.