Sketching, the simple, powerful UX tool

I’ll admit up front that I don’t think of myself as a great sketcher, but it is a great way to brainstorm solutions to user experience issues. It’s purposefully low fidelity, fast, and encourages multiple iterations. I’ve found I can waste a lot of time “trying stuff” if I jump to my computer first, but sketching allows you to iterate quickly without putting a lot of time into detail which is a easy trap to fall into. 

Yesterday, as a brainstorming challenge, I was asked to sketch out a few different approaches to a better airport security experience. I’ll share what I drew up here, but keep in mind that (a) I’m a terrible artist and (b) I tend to use humorous examples first to try and get my brain moving on a problem.

Simplify

Simplify airport security by doing the scanning while everyone is standing on a moving sidewalk. You step on, get scanned and move off at the end, and into the airport. No more hassle with lines and waiting!

Simplify airport security by doing the scanning while everyone is standing on a moving sidewalk. You step on, get scanned and move off at the end, and into the airport. No more hassle with lines and waiting!

Entertain

If you’ve ever stood in a airport security line, you know how boring they can be. So why not provide some entertainment while you’re standing there?

Entertain

Self-Select?

This is just me picking on security :)

idea3

 

 

An Introduction to Usability Heuristic Evaluations

You walk into work on Monday morning, and you’re greeted by the VP of Sales who tells you that your new product (mobile app, web service, etc) is not user-friendly and it’s killing sales, so now you’re tasked with figuring out how to fix it yesterday without any additional budget. What do you do?

The fastest and simplest tool you can pull out at a moment like this is the usability heuristic evaluation! A usability heuristic evaluation is something a team or individual can do on a product to find major usability issues quickly. It’s an effective tool when you need a quick turnaround and have limited resources to get outside input as it provides a framework for focus on, and will help you find the glaring issues. A more full usability review is still a very worthwhile investment, but this will get you started. Before we get into the parts of the evaluation, let’s look at how a few people have defined it:

Heuristic Evaluation…is a discount method for quick, cheap, and easy evaluation of the user interface. The process requires that a small set of testers (or “evaluators”) examine the interface, and judge its compliance with recognised usability principles (the “heuristics”). The goal is the identification of any usability issues so that they can be addressed as part of an iterative design process. (source)

Heuristic evaluation is a form of usability inspection where usability specialists judge whether each element of a user interface follows a list of established usability heuristics (source)

Also before you can jump in and do your evaluation, you need to make sure you’ve got the right constraints set for it. Specifically you’ll want to have already defined what the purpose, objectives, audience, user task, and other constraints for your website or product.

Now that you’ve got a clear idea of what the product should do and for whom, it’s time to set the scope of the evaluation. This will be useful because if it will keep you from getting sidetracked by a bug and instead help you focus for example on how the error is handled and displayed to the user.

Nielsen recommends 10 different criteria for heuristic evaluations: status and feedback, relevance and familiarity, control and freedom, error prevention, error handling, help, consistency, recognition vs recall, flexibility and customization, and pleasant simplicity. I’ll write a separate post with examples of each of these, but for now let’s just look at one example of “control and freedom.”

In Gmail after you hit “Send” to an email it gives you an option to undo sending your message for a few seconds. This simple feature (adding in a minor delay before actually sending the email) like this allows the user to have a greater degree of control and freedom. Also they avoid using a “are you sure” prompt which users inevitably just get in the habit of saying “yes” to without thinking.

gmail-undo-send

Clearly Google thought about their users in this case and how they want to have “control and freedom” in how their emails go out. Have you done a heuristic evaluation of your product yet?

Additional Resources

What is design?

In the first session of my Starter League UX class we discussed the question, “What is Design?”. The answer we came to was that it was more than just graphics, but I think the best quote to describe design was by Steve Jobs, when he said:

Design is a funny word. Some people think design means how it looks. But of course, if you dig deeper, it’s really how it works.

How would you define “design”?

Redoing Moody Radio’s homepage

Note: I updated this post in December 2013 to have newer graphics of the final homepage

This fall we updated the homepage of MoodyRadio.org and the navigation of the website, and I thought it would be interesting to post the wireframes and compare those with the final designs. Here is the original design:

Original - Moody Radio Homepage

The new design

There were a few goals in mind for the new homepage design. First, we wanted to better represent that we were a live radio network. So we wanted to show a bit of what was going right now on our radio network. Also, we wanted to promote some of the on-demand content we had, series we were running, or different promotions like fundraisers. And finally we wanted a simplified layout and navigation. Below is the wireframe and final design:

Moody Radio Homepage

 

moodyradiohomepage

 

Navigation

One area I wanted to highlight was the changes we made to the navigation of the website were probably some of the biggest and most helpful as it greatly simplified and cleaned up the website.

Original Design

original-nav

Wireframe

wireframe-nav

Final Design

current-nav

 

One of the goals of the redesign was simplified layout and navigation. One of the biggest steps in that direction was simplifying the navigation. We went from 9 main navigation items to just 4, plus in the final design we were able to further minimize the cross site navigation (to other parts of Moody Bible Institute) by placing that information at the top edge of the page.  This helped make the website more navigable for users, and the addition of the “Listen” menu item help drive traffic to our primary goal for the website which is to get listeners to our radio content. Obviously all of those extra navigation items didn’t just go away, but we were able to move to using a mega drop down menu  so we could better present that same information.

Also as we moved from the wireframe stage to the final design stage, we were able to introduce some good changes including :

  • Changes to corporate branding requirements.
  • Added vertical lines between main navigation items to help distinguish them
  • Moved search inline with main navigation
  • Changed the logo to the stacked version to better fit the layout

Discovery Area

The second area I wanted to highlight was the “discovery” area of the homepage we hoped to surface the current content playing on our radio network and the content on our national programs.

Original Design

original-now-playing

Wireframe

wireframe-now-playing

Final Design

current-now-playing

This section contains two parts, one the “now playing” section which highlights what’s current playing on the national radio network. We had hoped to make this actually be what was on your location station if you lived near a local station, but due to development constraints we kept it as the national feed. Secondly we added a section for promotion national program content, series or specials we had for example.

Conclusion

We made lots of other changes to the homepage, but the navigation and “discovery” areas really were two big wins for making the site more usable and allowing our listeners to discover Moody Radio’s content better.

Before adding new features

I came across this from 37Signals and thought it was worth sharing

For every new feature you need to…

1. Say no.
2. Force the feature to prove its value.
3. If “no” again, end here. If “yes,” continue…
4. Sketch the screen(s)/ui.
5. Design the screen(s)/ui.
6. Code it.
7-15. Test, tweak, test, tweak, test, tweak, test, tweak…
16. Check to see if help text needs to be modified.
17. Update the product tour (if necessary).
18. Update the marketing copy (if necessary).
19. Update the terms of service (if necessary).
20. Check to see if any promises were broken.
21. Check to see if pricing structure is affected.
22. Launch.
23. Hold breath.

http://gettingreal.37signals.com/ch05_Hidden_Costs.php

A Framework for Managing Your Web Presence

I’m giving a talk tomorrow for at the CCCU conference, and here are the reference materials I’ll be using to show what we’ve implemented at Moody to help manage our web presence.

Resources

  • Content Inventory Matrix (XLS)
  • Project Portfolio (XLS)
  • Social Media Policy, Guidelines, and Best Practices (PDF)
  • Web Format Standards and Guidelines (PDF)
  • Web Scoring Matrix For Ranking Projects (XLS)
  • Presentation and Evaluation of Major Types of Website Analytics (PDF)

Download zip file containing these resources.

Books


And finally here are a few books I’ve found invaluable in the process of managing our website:

Disruptive Improvements vs Iterative Improvements

Do we focus on innovation that’s new and disruptive? Barbwire was disruptive to the ranching and farming industries of the US when invented. Moving from a rotary dial phone to a touch tone phone was iterative.

Clayton Christensen in the article, “Key Concepts – Disruptive Innovation” states: [emphasis his]

Because companies tend to innovate faster than their customers’ lives change, most organizations eventually end up producing products or services that are too good, too expensive, and too inconvenient for many customers.  By only pursuing “sustaining innovations” that perpetuate what has historically helped them succeed, companies unwittingly open the door to “disruptive innovations”.

I’m not an expert on Iterative Improvements as used in Lean and Agile Development, but as I’ve read in the book The Four Steps to the Epiphany, the problem with the sustaining innovations he’s describing is that they aren’t being developed in a customer-centric manner.

If we only develop or add features in response to customer “pain” and real needs and avoid the feature bloat that lean/agile companies aspire too, then we should never experience the effect of “producing products or services that are too good, too expensive, and too inconvenient for many customers”.

In an agile/lean context as I understand it you would implement just what you had to. What would you do with your “extra” time (compared to your competitors who keep improving even when the customers don’t want it? You can start working on another disruptive product, based on the customer development model described by Steven Blank in his book I linked to above.

Don’t worry though, your disruptive innovation will be treated like a toy at first if it’s good.