In response to everyone’s awesome feedback on last week’s diagram of what we do, I’ve posted a new one:
This one adds a circle for the user which I agree is super important and a key part of our process. It also more specifically spells out what we do — strategy, user research, and design. The idea is that someone has an initial concept and we can help create the strategy and design for that concept based on our understanding of the concept, user needs, and development constraints. Thoughts?
I recently sketched this diagram to explain what we do and wanted to see if it resonated with people. Is this too high level? Does it add a layer of understanding? Basically, we work with clients on all levels of product design including feature definition, interaction and visual design, user research, and specification. The only thing we don’t do is the final code. Thoughts?
Open Table recently introduced a new mapping feature that displays restaurant info. Putting info on a map is a solved problem. Google, Yahoo! and many other sites have successfully mapped information with mouseovers and Open Table could have easily reviewed these sites and put together a design that capitalized on best practices. Instead, the Open Table interaction is awkward, resulting in an experience that is difficult and unwieldy. Sigh. Let this be a lesson to those putting together mapping interfaces on what you should and shouldn’t do. Here’s our list of key mapping tips:
- Allow the user to close boxes they opened on click. This is the most important tip here. In Open Table, when you click on a map marker, it opens a window that covers up the other restaurant markers on the page and there is no way to close it. Sometimes I noticed at random times the window would close on its own, but it did not have an X in the corner so was super annoying.
- Visually connect the pop-up with the map marker. As you can see in the screenshot above, Open Table does this quite subtly. The map marker in the middle has a black outline and a slightly brighter white spot. Uh-uh. This is not the time to be subtle. POINT to the marker that the hover refers to so that the user does not have to remember.
- Consider if you need to have both on hover and on click interactions. If you present different info on hover and on click, make sure that there is a reason why you are not presenting the info on hover to start with. Check out the difference between on hover and on click in Open Table:
Note that the box does not get bigger on click, leading me to wonder why they don’t just display the time info on hover. Even if the times sometimes wrapped to a second line as shown below, it’s still a pretty small box.
On click, 2 lines:
- Display the information in in an order that makes sense. This tip, of course, applies to anything you design. In the screenshot above with the four times, Open Table is displaying 6 and 8:30 PM at the end of the line, presumably because you get more points for going at those times. I’m used to time data being display chronologically. I dunno why. Must be something about the fact that it’s time.
A Good Example
Now for an example of what we consider a good map interaction. A while ago we designed a map interaction for hotels for Yahoo! that never got launched so I’ll share it here because it illustrates the points above. Here’s how it works:
On hover is simple with just the hotel name:
The on click pop-up reflects all the recommendations from above:
This solution is elegant and informative. If only we could see the same at Open Table.
If you’re building a product that people use, you should be watching people use your product as often and as early as possible. Gathering quick, informal user feedback during the design process will let you know whether or not you’re on track while you can still make adjustments – not after it’s too late. At Sliced Bread Design, we call this user research method Fast Insight Testing, and we use it constantly to get immediate feedback on work in progress.
To help you get started, we’ve answered some of the questions we’re often asked about doing Fast Insight User Testing so that you can try this on your own.
1. Won’t it take a long time to run the test?
Full usability tests can take weeks, but Fast Insight User Testing is aimed at getting very quick feedback on a specific target. Pick one thing you want to test, and keep it focused. For example, you could test your new home page to get general feedback on the message it’s sending to new visitors. Or, you could give your subjects a single task to perform, like editing some information in your product. If you keep it focused, you can get what you’re looking for in as little as five minutes per person on the phone. Or, you can test a short flow in 15-20 minutes.
2. Don’t I have to pay a recruiter to get participants?
Not at all. Start with friends and family in your address book or IM list who are easy to reach but have very little or no knowledge of your product. Unless you’re working on a product aimed at computer professionals, make sure that you pick a few people who aren’t too tech savvy. (You don’t need to mention why you picked them!) Use this as your list of test subjects. You’ll be surprised at how much great feedback you can get from talking to 3-4 people whose only qualification is that they aren’t familiar with your product.
3. What if my target market is specialized and my friends are not?
Even if your target market is specialized, that market is still made up of people. You are designing for people, right? There are many types of things you can learn about the usability of your design just by getting a fresh pair of eyes on it. For example, if you were designing a search engine for realtors, testing on anyone would be helpful for making sure people understand your method for presenting search fields and results, the location of buttons, etc. It would not be useful for assessing if you have the exact right search fields for realtors or the correct data in the results. Essentially, you can use your friends to test your overall design concept, and then test within your product’s niche to get more specific feedback later.
4. Do I need a fully working prototype?
Absolutely not. This is FAST Insight testing, which means that you should be testing quick mock ups that you create, not waiting around for engineering to create a stable build. We’ll write an article about creating quick prototypes in a future issue, but in the meantime see the list of links at the end of this article for resources to help you create your own mock ups. If you’re short on time, just sketch something on paper and scan it in.
5. What do I ask?
To help the process go smoothly, make sure that you plan your questions ahead of time. Here are the key recommendations for a Fast Insight test structure:
Before showing your design, start with a short introduction where you set the stage for how the user arrived at this page or process. For example, “Imagine that you are planning a party and want to use a website to invite guests.”
Then, your first question should always be: “What do you think is going on here?” Don’t jump directly into asking specific questions or giving them a task to do. Start by getting your user’s first impressions of the screen. And then follow up with more open ended questions, such as “What do you think you would do here?” Follow the user’s lead, and don’t be anxious about getting all of your questions answered until you thoroughly understand what the user would do without prompting.
Next, you can ask specific questions or ask the user to complete a task. For example:
- What do you think you would do first on this screen?
- Imagine that you want to do X. How would you do that?
Most importantly, always follow up all responses with “Why?” Even if you think you already know the answer, you’ll be surprised how often you learn something new.
6. How do I make sure I’m being a good moderator?
Moderating is harder than it looks, and we will write more about it in a future article. For now, we’ll keep it simple. Your number one goal is to get your user’s true feedback on the interaction you’re testing without imposing your views on them, so do not ask leading questions. For example, avoid saying things like “Do you like this new way better?” or “Click down there to move on to the next step.” Instead, ask open ended questions like “Which way do you prefer?” or “What would you do next?” Encourage your user to think out loud, and don’t put words in their mouth!
7. Can I do the testing remotely?
Ideally, it would be nice to gather the feedback in person — we’ve even been known to do Fast Insight testing at parties. However, you can easily gather feedback on the phone by either posting your screens online and giving your user the URL or sharing your screen using services like webex.com or gotomeeting.com
8. What do I do after the test is over?
When you’re all done, write a short summary of your findings for yourself and to share with your team (if there is one). It’s important to summarize the feedback quickly so that you don’t forget. Try to focus on the key areas where your participants struggled or seemed confused. Then, think of potential ways to address those problems. For example, create a list with two columns: Problem/Solution. Your final deliverable should give you a clear idea of what to fix and actionable ideas for how to fix it.
9. What about Non-Disclosure Agreements (NDAs)?
NDAs are important if you think what you are showing will compromise your Intellectual Property. Depending on what you’re testing, you may feel comfortable with a verbal agreement or a quick email. If you feel like you want to use a written NDA, have your subjects sign one online using a free site like wufoo.com.
10. When should I do this?
How about now? Once you see how simple and effective it is, you’ll be ready to start integrating users even more closely into your development process. Now go out there and start getting some Fast Insight.
More Sliced Bread Design resources for testing and prototyping:
- A/B Testing and Qualitative User Testing
- Dreamweaver Prototypes: All Pain and No Gain
- Balsamiq vs. HTML Wireframes
Tools to make your own prototypes for testing: