I recently had a discussion with Mike McCue, the CEO of Flipboard, on how he and his team managed to get things so right with the Flipboard design. In particular, I was interested in how they were able to balance functionality with delightful, polished, user experience features. Mike’s answer was very simple — they had to make some very tough choices and a lot of cuts. Their goal with Flipboard was to communicate to first time customers the potential of the product and have them yearning for more. Mike explained that when people used Flipboard for the first time, he wanted them to think, “Yes, I get it! And it would be even better if…” Consequently, they cut all but the most important functionality for their v1. For example, Flipboard was a news reader but didn’t have full RSS on first launch; it only supported some predetermined feeds. Also, it had a Twitter reader but didn’t let you post tweets. These types of painful functionality decisions allowed time to implement the polish to the interaction that Flipboard is known for – gorgeous visuals, subtle animations and a magical, contextual user experience. Flipbooard’s goal was that people would become so enchanted by the experience on first use, that they would be willing to wait for more complete functionality in v2.
This approach clearly paid off for Flipboard, but it’s a difficult one for many companies to embrace. We frequently have conversations with clients who try to cut user experience features and polish in order to put in more functionality. Many of our clients ask us why they can’t have a product that works like an iPhone. If you remember when iPhone first launched, it also had all the polish and a limited set of features that were far less than current market leaders like RIM or Palm. However, by capturing people’s imaginations with amazing user experience, they were able to buy some time to round out their feature set in subsequent releases.
The lesson? Creating a beautiful, compelling, polished user experience for v1 takes guts. You have to be ruthless with your feature set and treat the user experience features as equal to the core functionality when planning your roadmap. We’ve often seen companies who have great design ideas cut those ideas at the last minute to squeeze in one more feature so it’s not a lack of ideas that’s at play here. It’s a matter of priorities.
While consumer smart grid energy portals are an important area for user centered design, there is an often overlooked design challenge in helping utilities craft a demand response (DR) program that really works. For readers unfamiliar with the term, demand response is a program utilities are exploring which asks customers to reduce electricity use during peak times in exchange for financial incentives. Utilities have recently launched DR programs with the basic assumption that providing access to energy usage data and an economic incentive would motivate users to change their behavior. Turns out, encouraging behavior change is not so easy. With that challenge in mind, I decided to look at what’s been done in the past to motivate energy behavior change and see how learnings from past efforts can be applied to the design of demand response systems – from a consumer perspective.
Based on my literature review, the following are ten ideas to consider when crafting your demand response program to create an effective user experience:
1. Carefully craft and explain rate structures
Construct the rates and program carefully with consideration of more than the just the economics. A 2008 study of a time of use pricing pilot found that suggestions for behavior change were highly time sensitive to key family patterns such as mealtimes and did not work if they were disruptive to the household. To make sure you create a structure that is within the capabilities of your target audience, consider conducting a user study to understand how household behaviors align with specific time periods. Then you can craft a program with realistic expectations for consumption management and provide users with actionable advice that they can follow without changing their family patterns.
2. Create a goal – get commitment – provide feedback
Consider structuring the DR program so that participants get a specific difficult goal for participation, commit to the goal, and then get feedback on their goal. This type of structure has proven repeatedly to be one of the strongest approaches for motivating energy behavior change. In one study, researchers gave households a difficult goal (20% energy reduction), easy goal (2% reduction), or no goal for energy use. All groups (including the no goal control) were then given information on which appliances used the most energy. The goal was also combined with feedback or not. Households who received a difficult goal + feedback conserved the most (15.1%) and were the only group to significantly differ from the control. Participants with the easy goal did not differ in behavior from the control at all. To make an even stronger program, consider an extra reward if the goal is reached.
3. Provide frequent feedback
The more continuous the feedback, the more effective the intervention. In a seminal study conducted over 30 years ago in 1979, households were given continuous feedback over a period of 11 months about monetary costs of electricity use by means of a monitor displaying electricity use cents per hour. On average, households that had a monitor installed reduced electricity by 12%. Although hourly, daily, weekly, and monthly feedback all create savings effects, the more frequent the feedback, the more effective it is. Consider creative ways to deliver that feedback via web portals, in home devices, smart phones or on SMS (intermittently).
4. Emphasize choice and control
One study considered people’s resistance to installing automatic day/night thermostats. Once the thermostat was redesigned to allow residents to override the system temporarily, the thermostat was much more attractive to residents – even though in actual use most people never overrode them. Similarly, a DR program should emphasize choice and control – people can opt into the program and still have full control over their consumption.
5. Tap into the power of the group
One energy conservation program that had a lot of success enrolled people in groups where they discussed and compared conservation behavior with their social group over a long term basis. Similarly, virtual networks of known groups can be set up to motivate participation in DR programs – for example by tapping into existing social networks of friends on Facebook to encourage participation.
In addition, consider a structure that offers additional savings if everyone in a group or neighborhood participates and reaches a set goal (see point 1 above). One study indicated that an incentive that offered on an individual and group level – in this case for all residents of one apartment building — was more effective than solely an individual incentive.
6. Frame program benefits as avoiding loss rather than emphasizing gain
The amount of joy that someone experiences when winning $100 is not equal to the consternation suffered when losing the same amount. Most people are more willing to take risks to avoid or minimize a loss than to increase their fortune. So, focus on showing residents how much money they are losing every month by not enrolling in demand response. Once the loss is obvious, people will take action.
7. Integrate complex information
When calculating energy savings, people usually can’t take into account all the elements such as rising fuel costs, the real long terms benefit, etc… So, do the math for them! Give price information that shows the full savings, presented as avoidance of a negative consequence of non-action (see point above). Use the actual data you already know about the consumer’s energy usage to make the information actionable and real.
8. Present information using vivid personal stories and videos
Statistical data summaries and impersonal information are less effective than case studies and colorful stories for motivating participation. For example, imagine that you are considering a new car and are choosing between a Volvo and a Saab. Consumer Reports informs you that the consensus of its studies is that the Volvo has a better repair record. That evening, you go to a party and run into an acquaintance who tells you a horrific story about a Volvo. Although the Consumer Reports article is based on hundred of repair records and your friend’s story is just one additional data point, most people will be swayed by their friend not to buy that car.
When communicating the benefits of a direct response program, demonstrate benefits with concrete stories about real people who save more energy than average but are “just like you. To be even more effective, present the content in videos. Numerous studies have also shown that videos of people modeling the desired actions are more effective in getting people to change their behavior than written information or lectures.
9. Use a foot in the door strategy
Individuals who agree to a small initial task are much more likely to agree to a larger request. So, instead of asking people to enroll in the full DR program immediately, first ask people to participate in a small act, such as filling out a survey, and then later ask them to consider signing up for demand response as a follow up to the first request. For example, one representative study showed that the percentage of people agreeing to an unattractive sign being put on their front lawn encouraging people to drive carefully increased dramatically (from 17% to 55%) if they had first been given the opportunity to sign a petition favoring safe driving.
10. Communicate trust
One key differentiator for successful energy programs is successful marketing to get people to even consider trying it out. We’ve found in our research that people inherently don’t trust their utility so partner with a local organization people do trust to market your program. In a marketing experiment conducted in Minnesota, a county government contracted with a private company to install energy saving equipment in homes in exchange for payment of a percentage of the value of the energy saved. To market the program, households received one of three types of letters: one letter was sent on company letterhead with no mention of cooperation with the county, one letter went out on company letterhead and mentioned the county’s role, and the third went out on county letterhead and was signed by the County Board of Commissioners. The source of information had a profound effect on consumer response – request for energy audits came from 6%, 11% and 26% respectively of households receiving the three types of letters.
We’re continuing to do more research in this area and will publish more insight expanding into some areas mentioned above. In the meantime, here’s a partial list of references…happy reading!
- Abrahamsen, W., Steg, L., Vlek, C., & Rothengatter, T. (2005). A review of intervention studies aimed at household energy conservation. Journal of Environmental Psychology, 25, 273-291.
- Krantz, D. H., & Kunreuther, H. C. (2007). Goals and plans in decision making. Judgment and Decision Making, 2(3), 137-168.
- Geller, E. S., (1992) It takes more than information to save energy. American Psychologist, 814-815.
- Geller, E. S., Winett, R. A., & Everett, P. B. (1982). Preserving the environment: New strategies for behavior change. Elmsford, NY: Pergamon Press.
- Lutzenhiser, S. et al (2009) Beyond the Price Effect in Time-of-Use Programs: Results from a Municipal Utility Pilot, 2007-2008. Presented at the International Energy Program Evaluation Conference, Portland, OR, August 12-14, 2009. http://drrc.lbl.gov/pubs/lbnl-2750e.pdf
- McKenzie-Mohr, D. and Smith, W. (1999) Fostering Sustainable Behavior. Gabriola Island, B.C., Canada: New Society Publishers.
- Swim, Janet et al. (2009) Psychology and global climate change: addressing a multi-faceted phenomenon and set of challenges, A report by the American Psychological Association Task Force on the Interface between psychology and global climate change. http://www.apa.org/science/about/publications/climate-change.aspx
- Winett, R. A., Hatcher, J. W., Fort, T. R., Leckliter, I. N., Love, S. Q., Riley, A. W., et al. (1982). The effects of videotape modeling and daily feedback on residential electricity conservation, home temperature and humidity, perceived comfort, and clothing worn: Winter and summer. Journal of Applied Behavior Analysis, 15(3), 381-402.
- Winett, R.A. and Geller, E.S., (1981) Comment on “Psychological research and energy policy”. American Psychologist, (425-426).
- Yates, S. and Aronson, E., (1983) A social psychological perspective on energy conservation in residential buildings. American Psychologist, (435-444).
- Stern, P. C., Aronson, E., Darley, J. M., Hill, D. H., Hirst, E., & Kempton, W. et al. (1986). The effectiveness of incentives for residential energy conservation. Evaluation Review, 10(2),
For related posts about designing for the smart grid, check out:
A recent SmartGridNews.com article praised Greenbox Technology for “deliver[ing] understanding to utility customers.” While Greenbox does provide useful functionality that differentiates it from its competitors, key improvements to its interaction design would go a long way to provide a better overall user experience.
To be fair, Greenbox does deserve a gold star for displaying energy data specifically in dollars ($). As I mentioned in an earlier post, consumers don’t understand energy units, such as kWh, and are motivated to change their behavior by saving money.
The Not So Good
But, what about the rest of the Greenbox design? Greenbox gets caught up in the same usability pitfalls I’ve seen in other consumer energy portals as well –too much information and not enough direct reference to the things that matter most to users. Here are my top three suggestions to help Greenbox, or any consumer energy portal, deliver an excellent user experience:
1) Simplify, simplify, simplify!
My foremost suggestion is simplicity. At first glance, the Greenbox interface looks very busy. There are many controls and buttons, and it tries to accomplish too much on a single page. Do users really need to be able to adjust their thermostat controls right on the main landing page, and also view their overview and data details at the same time? Instead, the home page could show only the most important information at first glance, and use color to further highlight and differentiate content on the page. The user can always drill-in to inside pages to access the less urgent information or access info on mouseover.
2) Engage users immediately with compelling content and proactive recommendations
My first response to the Greenbox dashboard is, “So what?” I’m missing context to understand the significance of my data. For example, is my overall usage good or bad? Am I using more or less energy than I did last month? Am I on track so far this month? Also, the portal doesn’t offer any suggestions for changing my behavior so it’s unclear what my next step should be.
To engage its users, Greenbox should focus on delivering insightful content that immediately provides context and motivation. Delight users by anticipating their questions and displaying answers at-a-glance. Provide simple charts and visuals on the dashboard to compare energy usage to different time periods and to others in the community so that people understand why this information matters.
3) Adhere to basic design principles
In addition to overall experience enhancements, here are some basic user interface guidelines to help GreenBox or any other site be more usable:
- Use clear titles Is the bar chart below showing data for all energy resource usage, just the electricity usage, or only heating and cooling (because that’s what is selected in green)? It’s hard to know for sure without a clear title for the chart.
- Use visual cues to help users appropriately group related itemsThe content relationships on GreenBox are a little hard to parse. For example, in the screenshot below, the “Heating/Cooling” button selected on the left side of the dashboard, actually updates the content shown on the right side, which is not immediately obvious.
Instead, GreenBox could make these two items more visually related to connect them. For example, put the same green border around the box on the right and give both elements the same background color (see update below). Then, I would be much more likely to quickly understand their relationship.
Updated design with green box:
- Visually identify hyperlinks & interactive featuresTo help users understand what’s clickable, it’s important to differentiate hyperlinks and interactive features from other static elements on the page. For example, on the GreenBox site buttons and links currently use the same dark text color as other static elements, which makes them difficult to identify.
A Minimal Redesign Idea
If we take the recommendations above and do a very minimal redesign of Greenbox limiting ourselves to only minor changes to content and layout, we already begin to see large improvements in terms of usability.
For example, in this minimal redesign, the relationships between content is clearer due to stronger visual cues and use of titles, the interactive elements more readily “pop” from the page, and inclusion of arrow icons begin to tell an interesting story about the user’s energy consumption.
But we’re not done yet…
Of course, it would take GreenBox more than just a simple redesign with no change in functionality to address all of our recommendations. As a next step, I think Greenbox would benefit to take a more critical look at its overall structure and content to ensure they lend themselves to a good user experience – in particular thinking about the best items to put on the home page and trying to answer the question “So what?”
Will we see a new and improved Greenbox site in the near future? We hope so. In the meantime, let’s learn both from the things that Greenbox does well and from the areas that Greenbox falls short so that we can continue to focus our energy on creating intuitive, meaningful, and persuasive user experiences.
Related post: Watts all the buzz about smart grid energy?
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.
Recently, I discovered a new prototyping tool for creating rough, sketch-style UI designs called Balsamiq Mockups. It’s basically a lo-fi mockup tool with a built-in library of sketch-style UI elements that can be easily dropped onto a workspace and edited.
After test driving this tool on my own, I decided to see how Balsamiq Mockups sketches compared to rough HTML wireframes in the context of a user study.
First impressions using Balsamiq
After demoing the tool for only a few minutes, I thought, “Wow, nice job!” It was fun to play with, drop dead simple to use, and required no tedious application tutorials or programming knowledge in order to just dig right in. I liked how quick and easy it was to drag and drop library items into the workspace and quickly adjust and rearrange them as needed. After only a short time using Balsamiq, I could create simple mockups just as fast (if not faster) than I could in Dreamweaver, the tool I use most frequently for rapid prototyping. I also found it very easy to export my Balsamiq sketches as static files and add interactive behaviors on top of them using hotspots.
However, the real strength of Balsamiq comes from the fact that the tool does not simply emulate other prototyping tools that make realistic-looking mockups (such as Visio, PowerPoint, GUI Design Studio, and MockupScreens). Instead, Balsamiq takes an entirely different approach and deliberately uses a rough, hand-drawn look and feel — presumably to better communicate that these designs are just early ideas in-progress and are not fully fleshed out yet. I hypothesized that Balsamiq Mockups would be especially good for communicating early design concepts, to keep users focused on the high-level ideas, rather than on the details.
Balsamiq vs. HTML usability test
To test my hypothesis, I conducted a comparison study to find out if the sketch-like quality of Balsamiq mockups had any effect on the type of feedback that users provide in the context of a study.
The research process
For the study, I used an A/B test format. First, I mocked up the same high level design using two different methods: version one was created in Balsamiq, and version two was a very rough, grayscale, HTML wireframe created in Dreamweaver. Then, I showed half the participants the version one Balsamiq sketch; the other half of the participants saw the version two HTML wireframe. (See images below with text blocked out for client IP reasons)
Version 1: Balsamiq sketch
Version 2: HTML wireframe
In both cases, I told users to share their initial impressions about the design. I explained that the designs were still a work-in-progress and I was looking for high-level feedback regarding the concept and overall functionality, rather than the specific language, details, or look and feel of the page. I then noted their feedback to see if there were differences between the two groups.
All participants were able to provide high-level feedback about both types of mockups. However, participants who saw the Balsamiq sketches were slightly less concerned with the details and specifics of the design. They tended to comment less on the colors and appearance of the design, as well as the particular language and text used. They were also more aware of the fact that they were looking at an in-progress design, making comments such as, “I don’t really like the way this dropdown menu works, but know the design for it might change later anyway.”
In both cases, users still made comments on specific page interactions, but the Balsamiq participants were more likely to be aware that this type of feedback was overly specific, as one participant qualified his feedback by saying, “I guess that’s not really the kind of feedback you’re looking for right now.”
Overall, I found that the participants who saw the Balsamiq sketches did a slightly better job of keeping their feedback more conceptual than the participants who saw the HTML wireframes. However, participants in both cases still commented on some of the details of the mockups as well, and it was necessary to use the moderator questions to guide the user’ focus and attention back to the level of feedback I was looking for.
Balsamiq Mockups is a useful new prototyping tool. It’s perfect for sketching quick ideas and sharing with others, especially if the mockups are fairly simple in layout and overall complexity. It’s also a great tool for concept testing with users, as the sketch-like quality of the designs works well for gathering high-level feedback on initial design ideas.
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.
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.
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
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.
I recently encountered a common design question while working on an intranet redesign project, “Should web links that point to PDFs and other non-web documents open in a new window?” Poking around the web to see what examples or standards I might find on the topic, I found an article by Jakob Nielson titled “Open New Windows For PDF and other Non-Web Documents.” Jakob’s article offers guidelines that I thought made a lot of sense, but one of them I disagree with and I offer an alternative here. Also, I provide an example of a good hyperlink format at the end.
A summary of Jakob’s viewpoint is: “When using PC-native file formats such as PDF or spreadsheets, users feel like they’re interacting with a PC application. Because users are no longer browsing a website, they shouldn’t be given a browser UI.” And, because users frequently close document windows, it’s a good idea to open the document in a new window. Here are the 4 guidelines for linking to non-Web documents he suggests:
- Open non-Web documents in a new browser window.
- Warn users in advance that a new window will appear.
- Remove the browser chrome (such as the Back button) from the new window.
- Best of all, prevent the browser from opening the document in the first place. Instead offer users the choice to save the file on their harddisk or to open it in its native application (Adobe Reader for PDF, PowerPoint for slides, etc.).
While I agree with the first three guidelines above, the fourth one I do not. My experience observing many users is that they find this type of behavior extremely annoying. Thinking from their user’s point of view, why would I want to take the additional time to either load a file in its native application or save the file to my hard drive (where I would then also have an extra file hanging around on my machine), when I could just have easily clicked the link and had it open more quickly in a browser window? While searching the web, or my intranet, I may not even know whether the link I clicked is something I am actually interested in until I’ve had a chance to look at it. Therefore, I’d like the process of opening the file to be as quick and easy for me as possible.
Instead, I suggest replacing this fourth guideline with a new one:
New Guideline #4: Display the file extension in the link name.
For example, if a link points to a PDF file, the link name should read: Link name (pdf). This practice supports the other guidelines by giving the user the context to understand why a new window with no browser chrome opens when clicking the link. And, it does it in a nice streamlined way.
Alternatively, an icon can be used to visually represent the file type instead of showing the file extension in text, but this may be distracting and/or messy if there are many links to PC-native files listed on the page, such as the pages I encountered in the intranet design project. And, an icon may not work as well if you are already using a different icon to warn users that a new window will appear.
Lastly, I had really hoped Jakob’s article would provide a few examples of what an appropriate hyperlink format looks like. Since this helpful piece was missing from the article, I thought I’d include it here:
- Examples of what NOT to do
- Example A:
- Example link one
- Example link two
- Example link three
- These links are missing their file extension, and a warning that the links will open in a new window.
- Example B
- Example link one
- Example link two
- Example link three
- These links use an ambiguous icon to warn the user that a new window is opening. For example, the icon could also be interpreted as a link to an external site. The file type icon is also a bit confusing when positioned next to a second icon for the same link.
- Examples of what to do
- Example A
- Example link one (pdf)
- Example link two (doc)
- Example link three (pdf)
- These links follow the convention I suggest here.
- Example B
- Example link one (opens new window)
- Example link two (opens new window)
- Example link three (opens new window)
- For user populations that really need things spelled out, you could be even more direct, by putting text like “opens new window” instead of the file extension. In this case, an icon with the file type is very helpful.
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.