Designers, want to refresh your foggy memories of the names of the theories you learned in design school? Product managers, engineers, and anyone else that works with a designer: want to understand the terms designers throw around? Then this is the book for you! Universal Principles of Design
by William Lidwell, Kritina Holden, and Jill Butler is a cross-disciplinary design reference that defines and illustrates 100 design principles. A designer friend of mine recommended it to me a few years ago and it’s been a great reference ever since. The book’s subtitle is “100 ways to enhance usability, influence perception, increase appeal, make better design decisions, and teach through design.” As one of my favorite Food Network hosts Ina Garten says, “How bad could that be?”
It’s like a quick, introductory design class without the pop quizzes and annoying brown nosers. The book is organized alphabetically, making it easy to quickly reference a principle by name. Example principles are affordance, expectation effect, hierarchy, and rule of thirds. Each principle has a two-page spread. The spread’s first page describes the principle in layman’s terms and the second page shows real-world examples. Each principle has a “See also” section at the bottom which lists related principles.
Another cool feature is that table of contents is organized both alphabetically like the book, and also by category. The table of contents categories include “How can I influence the way a design is perceived?”, “How can I enhance the usability of a design?”, and “How can I make better design decisions?”
I find myself pulling this book off the shelf more often than almost any other book in my office. It’s easy to find the name of that theory that’s been bugging you. “Make it big to make it easier to click” sounds so much more professional when it’s called “Fitts’ Law.” (I know, I know. There’s more to Fitts’ Law than that. Here’s the book’s definition: “The time required to move to a target is a function of the target size and distance to the target.”) The book is also a great source of examples of design principles in action. Every now and then I flip through it just for inspiration. The book is beautifully designed and a pleasure to look at.
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.
Have you ever had to make changes to someone else’s design file or webpage that uses styles? As a project manager with a few (rapidly increasing) skills in the land of design I can tell you that it’s tough just getting by. However, the hardest thing I’ve come across recently is trying to take someone else’s designs in any application that uses layers or style sheets and trying to make changes when nothing is named. It appears that many of the applications that people use like to pick such wonderful names as, “Layer 1” and “Style 4”. Now, if you only have a few of these, it’s not an issue.
But, what if you’re working on a Photoshop file with hundreds of layers and trying to edit a button that has 8 layers? Well, if that button was a “Submit” button and all of the pieces of that button were named “submit_…”, i.e. submit_text, submit_background_color, and they’re grouped under a folder called, “submit button” then you’d know what you were looking at and where everything was. If the layers are called Layer 156 and the background is called #CCCCCC and one is at the top of the list and one is half way through the hundreds of layers, it’s crowded, hard to find, and difficult to fix. Then what happens when you decide you want to change the outline color? All of a sudden you’re magnifying the screen as much as possible so you can right-click and get the layer, then you’re sorting through 5 or 6 layers, all named with nothing meaningful until you find it.
I know, I know, when you’re hard at work, who has time to actually name things? A few months ago I would have just accepted this as a legitimate response. Now I’ve worked on it myself and you know what? It doesn’t take that long to keep things together. It doesn’t take that long to give layers appropriate names. And in the end, what you’ve produced is clean, makes sense, and can be worked on by someone else if it absolutely comes to that. Now, if your goal is to make it as difficult as possible for anyone else so that your job is set for life, then never mind.
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.
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:
At Sliced Bread Design, we’ve had an ongoing debate for the last year about whether to have a blog or not. I was saying it’s overdone, cliché, and does everyone really want to know what we’re thinking? Others at Sliced Bread said it would be a natural venue to share our viewpoint on design topics and issues in a lightweight way. OK, I do see how it could be useful as we do have well researched and thought out design views on lots of topics – especially those that we look into for a project, find very interesting, and then lose in the shuffle of everyday design work. Surely others would be interested as we were when the topic was timely for us.
But, it didn’t happen. Those who were more enthusiastic were busy with client work. When I had extra time, the little voice in me who still said it was a little bit lame would win out.
But recently I was won over to the blog side and we finally made some time to start it up. On the very day I was going to write my first entry, I had a flight out of San Jose Airport. I’d just gone through security, has wrestled my 19 month old back into her extremely cute tiger pattern shoes, and was stuffing my laptop back into my bag while keeping my eye on my 3 year old who is playing with the security ropes, as I see this sticker shown in the picture here. Got feedback? What? Even the TSA has a blog? OK, now seeing that sticker made me feel like we are jumping on the band wagon with our blog, cause you know if the government is doing it, it’s pretty old school. I bravely took a picture of as the TSA and police looked on. A very quick picture as I was a little nervous about doing it, and also the TSA guy was now pointing out to me that my toddler is climbing on a chair and it’s making him nervous (actually, he was really nice and helpful overall). So, I checked out the TSA blog today, and it is actually pretty good. They have a picture of some recent shoe bombs, and explain why they still make us take our shoes off, which did make me feel better about the foot gymnastics at the x-ray machine. So, let’s give this blog thing a try. Hopefully we’ll be at least as informative about design issues as the government is about security, or maybe a little bit more.