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:
On click
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.
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.
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.
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.
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.
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.
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.
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!
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
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.
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.
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.
- A/B Testing and Qualitative User Testing
- Dreamweaver Prototypes: All Pain and No Gain
- Balsamiq vs. HTML Wireframes
- Balsamiq
- Dreamweaver
- Axure
- iPlotz
Our redesign of the Quicken Picks website has just launched!
Key features of our redesign effort:
Here’s our three step design on the home page (it follows a design pattern we’ve blogged about before):
Here are some screenshots of the site before our redesign to give you a sense of the impact of our work. It’s a bit green and gunky to say the least:
Home page – Logged in
Home page – First time visitor
Feel free to check out the redesign yourself at the www.quickenpicks.com.
I’ve noticed a trend recently of home pages for various web services having a three step layout. The goal is to describe your service with three simple steps. A few examples:
This pattern is becoming pretty rampant and with good reason — it’s effective. If you have a site that is providing a service in a new or unique way, you need to explain to your prospective customer why you are special very quickly. I can’t even tell you how many sites I visited in the course of doing research for this article that I could not figure out. The three steps design approach provides a framework for communicating uniqueness in a clean, simple format.
For example, screenshotted below are two sites that do very similar things — ticket search. Fansnap uses the three steps approach to describe what they do and why they do it better than others. Seatwave highlights an event at the top and then provides a browse interface below.
Fansnap does a better job educating their visitors about what is so special about their ticketing site. In contrast, Seatwave is just another ticket site — I’m not sure why I would use it over eBay or StubHub which are more well known.
Four steps starts to feel like a lot. Let’s look at this four step example from LOVEFilm.com – the British version of Netflix.
Four steps starts feeling complicated — I can’t just scan and move on. Do they really need that third step –”Watch it at your leisure with no late fees”? It seems like they could combine it with step 4 pretty easily. Then maybe they could have a big sticker or something that says “No late fees!”
Check out this super quick redesign I did reducing the steps from 4 to 3:
As with every good pattern, there are ways that you can mess it up:
In the quest to have 3 catchy pieces of information, don’t reduce your something to nothing but buzzword fluff. Fansnap is trying to be clean by sticking with three words: Compare – Choose – Click. But, on first glance it’s a little confusing what they are talking about and why they are unique. Basically, they search across a bunch of sites (like kayak.com except for tickets) and then offer a cool UI to compare the seats so that you can get the best seats at the lowest price. Handy. Here is a redesign of the language and graphics that keeps the simplicity but doesn’t force the user to think:
In the original FanSnap above, the numbers are buried in the graphic. This makes me wonder at first if the items below are steps or just three features. In the redesign I’ve put the numbers next to the words and suddently it is clear that this is a quick, fun process.
So, to make a long story short, three steps is an interesting design pattern for quickly communicating the essence of your service to your prospective customer. Next week, I’ll delve into the sister pattern of 3 steps which is 3 features.
Economy be damned, we’ve just started working with 2 new clients in really interesting spaces.
Yummly is a start up looking at the intersection of food and the internet. They’re in stealth mode so that’s all we can say for now but we’ll keep you posted.
iConstituent is a more established company that provides email communication solutions to congresspeople. We’re working with them on a visual refresh followed by a more comprehensive user experience redesign.
We’ll post pix of our latest work as soon as we can.
.
After a few months of working with Sliced Bread to develop the concept, Intuit has just launched the initial version of its health benefits center. This new experience is designed to help small businesses in California learn about choosing the right health insurance plan for their company. Sliced Bread Design did all of the interaction and visual design for this Adobe Flex site. Intuit did the implementation.
In addition to learning about the different health insurance options, the site also presents the results of a survey Intuit has been conducting of what health benefits small businesses offer their employees. Finally there is a place on the web where you can go to see what employers like you are doing for their employees — a feature we think is pretty neat.
Needless to say we have worked hard with Intuit on the information design for this site to make complex insurance verbiage more transparent. We are very excited about how it has turned out and are even more excited about what is in the works for the future so keep checking back to watch it grow.
You can also join the feedback group (link at the top of the site) if you want to be in the group of customers we’re working with to make sure that we create a site that really works for users.
http://www.intuithealthbenefitscenter.com/
I just received the annual Communication Arts Design Annual, which is the compendium of the best print graphic designs of the year. What does this have to do with interaction design you might ask? Well, if you are in the business of creating great experiences that people want to interact with, you are in the business of making things look good for your audience as well as be easy to use. We subscribe to CommArts because we want to know what the latest visual trends are so we can create the right experience for each design project, whether it’s in order to create a hot, modern experiences or deliberately steer away from what everyone else is doing. Trends in the print world bleed into the digital world and vice versa. Here are the trends that I noticed that people should know about:
This trend was is rampant in all categories and was is sometimes blended with other trends I discusselements below. Oversize font was is treated as the primary visual theme and communicatesd the brand, often in black or another primarybold color.
Flipping through the pages, in a cursory way I was struck by the brightness of the designs. Bright, saturated colors were are overrepresented…sometimes complimented by black or dark brown. Pastels and muted tones were are almost missing. Orange was is the most prominent color – used alone or in combination with other bright colors.
Many designs mimicked real physical objects in an unusual space. Aqualtis unusual bag for advertising the ability of its wool and cashmere clothing line to be thrown in themachine washing washed machine set the standard for other designs to come including large brands like Tommy Hilfiger and Coke. and many other novel uses of real goods. Sometimes, as you can see in the Kresge annual report below, the large type theme was combined with a physical object to have both trends represented.
Carousels are a useful mechanism for showing multiple, individual pieces of visual information when you do not have the space to show them all at once. Like a real carousel, a carousel widget presents eye candy in a circle that the user can spin (i.e. navigate) one direction or another to get to more stuff.
The three primary uses are (1) selecting an image from a longer list , (2) Advertising different pieces of rotating contet and (3) navigating to content areas that can be represented by a consistent visual object such as an album cover for navigating music or a photo for navigating user profiles.
Carousels often inject a sense of fun in your interaction, especially if you can use animation as part of the widget.
A carousel is not appropriate for navigating between textual information. For example, here is a carousel to navigate through cartoons at www.cartoonnnetwork.com. If you go try out this carousel, you’ll notice that they’ve added a nice physical animation so that when you go to another part of the carousel it spins forward and then back a bit. Nice.
If you can’t see the size of the carousel, it’s nice to communicate to the user where they are in the queue. Here’s one on movies.yahoo.com – not as fun as on the cartoon network but still does the trick:
Use animation and/or dimension to guide people through your carousel and give it a sense of fun. This carousel is a widget that Amazon.com offers it’s associate sellers to place on their site. You can take it for a spin here.
If you have a flat carousel (like the Yahoo! one above), have no more than 5 panels of content. For a 3-D carousel like Amazon’s, limit yourself to about 10 items. If you have a carousel like is found in itunes Coverflow or in the screenshot below from MooFlow, you can have unlimited items as images on either side fade into the background as you scroll.
If you want to add more functionality to your carousel, you can allows users to select items in your carousel to get more information. You can also have controls appear over the selected item on mouseover. This screenshot below is a hacked carousel from DMXZone.
If you want to prototype a carousel on your site, here are some places you can go to get some carousel plugins: