Author Archive
Julie Stanford | 04.07.09
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:
Sunnygram
Blurb
Poll Everywhere
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.
Fansnap
Seatwave
But is three a magic number? Why not four steps?
Four steps starts to feel like a lot. Let’s look at this four step example from LOVEFilm.com – the British version of Netflix.
LoveFilm.com
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:
Before – 4 steps
After – 3 Steps with a No Late Fees sticker
2 Pitfalls
As with every good pattern, there are ways that you can mess it up:
1. Avoid empty sound bites
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:
Before – empty language
After – clear languag and graphics
2. Put the numbers close to the words
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.
Julie Stanford | 03.10.09
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.
.
Julie Stanford | 01.22.09
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/
Julie Stanford | 01.20.09
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:
1. Large font as the primary graphic element
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.
2. Bright primary colors
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.
3. Physical objects
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.
Julie Stanford | 01.20.09
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.
How to use a carousel
Use it for visual content
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.
Communicate the size
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:
Make it fun and compelling
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.
Consider how many items to include
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.
Add more functionality as needed
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.
Where to get your own carousel
If you want to prototype a carousel on your site, here are some places you can go to get some carousel plugins:
