Author Archive
Mia Silverman | 02.25.10
We’re excited to share that our redesign of the Intuit Trends application has just launched!
Intuit Trends is a free online application that lets small businesses compare how they are doing financially (such as income, expenses, profits, etc.) with other businesses that are similar to them.
We talked with small business owners to find out what they most wanted to understand about how their businesses compared to their peers/competitors, and then introduced some big improvements to the previous design. This release delivers the first preliminary round of changes, and there are many more to come.
Key features of our redesign effort included in this preliminary release are:
- Introduced a new, personalized Scorecard
- Before the redesign, the Trends application only offered small businesses the ability to view general trends about how their peers and competitors were doing. Now, small business owners can also see how their own company compares to their peers along three key business metrics and receive individual and overall scores.
- Provided a simple bar chart and scoring solution
- Now that the site was going to show comparisons between a specific business and its peers, we needed a compelling way to present this information. To get started, we explored a variety of different design options for how best to show comparison data. Next, we usability tested our ideas and moved forward with the design that users liked best. Our final solution combined a simple bar chart with a visual quartile score, in a format that was easy for scanning.
- Created a clean, fresh, and consistent visual design
- We all know that it is important for information on a site to not only be useful, but to also be presented in a clear, visually appealing way. To help the Trends site appeal to its audience and convey the desired tone, we created a modern, clean look and feel for the site that also followed Intuit’s brand guidelines. We also introduced a consistent color scheme to use for “Me” and “Peers” across the site to help users differentiate between the two types of data.
You can check out our redesign for yourself at: https://workplace.intuit.com/db/bejqb2kpn.
We’d love to hear what you think!
Mia Silverman | 12.09.09
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.
The Good
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?
Mia Silverman | 11.11.09
We recently worked on a new energy tracking site to help consumers monitor their energy use and find ways to save money. With President Obama’s recent announcement awarding a few billion dollars in smart grid grants, we expect to see an even larger effort devoted to creating new energy tracking systems and devices. So, let’s save all of us some energy by sharing our top tips for creating a consumer energy portal.
1) Simplicity is key
We’re noticing that far too many of the new energy portals on the market are delivering complicated interfaces and busy dashboard-style pages with dense data charts and lots of buttons. Although heavy data, analysis tools, and controls might be interesting to data geeks, most consumers will find this information overwhelming or just plain boring. Consumers don’t want it to be rocket science just to learn to set their thermostat, and they don’t want to spend hours reviewing their usage details just to determine how they can save money.
A few examples of interfaces with too much data for consumers:
Greenbox
Fat Spaniel
Tendril
So, we encourage you to simplify, simplify, simplify! Anticipate user’s most common questions, then make it easy to find these answers. Highlight key information in an easily scannable format, and engage consumers with friendly language, like “How much energy am I using?” and “Is my electric bill on track this month?” If you have more data, you can always offer it on drill down for people who want to learn more.
2) Present energy data in meaningful unit equivalents, specifically dollars
Which in-home energy device would you want to use in your home?
Option 1
Option 2
I bet you chose Option 2.
To engage consumers, phrase information in a way that makes sense to them. What we say has to be both measurable and meaningful. Consumers do not understand the electricity unit of ”kwH”, unless they’ve had considerable experience with it. And the words “tons of carbon” are just as meaningless even to those who are in the industry. Instead, all energy data should be presented in terms of dollars ($), with kwH and other meaningful equivalents shown as alternative views that can be visualized. For example, “You’ve saved $53.44, or enough energy to watch 362 hours of TV.” Check out Chevron’s “Energy Generator” as another great example of how to present meaningful unit equivalents that consumers understand.
3) Consider a “new user” experience
Most consumers have not had a lot of experience seeing detailed analysis of their energy data, so there is going to be a 3-6 month period of active learning for new users. During this time, users are going to be interested in identifying some basics about their energy usage. For example,
- How much energy do I typically consume during a single day?
- What is the impact of different items and behaviors in my home?
After this initial learning period, consumers will have a good sense of the basics that will remain fairly static over time, and will start shifting their focus to a different type of monitoring. For example:
- Is my energy usage on track?
- How does my usage now compare to my usage in the past?
We suggest that you recognize this consumer learning curve by considering a “new user” experience for your consumer portal. The purpose is to educate users on their energy basics and to appropriately highlight information that is most relevant while they’re still learning, but might remain static overtime or become less interesting after initial use. Then, after this initial ramp-up period, keep users engaged by presenting an ongoing use experience that highlights the dynamic information they want to continue monitoring overtime.
4) Deliver proactive recommendations with bottom-line savings
Consumers want to know what concrete steps they can take to reduce their energy consumption, and they want to know what impact those steps will have on their bottom-line savings. Our research has shown that people are highly concerned and knowledgeable about environmental issues, but their primary motivation is still saving money. We recommend creating a predictive savings calculator based on actual energy usage that would allow users to see how various changes would affect their consumption and bill. Users could even use this calculator to help convince other household members to make the behavioral changes that matter most for their bottom dollar. Will the calculator show you which trade-off is right for you? Probably not, but at the very least, it will provide you with your top options for having the biggest impact on your bottom dollar. You can take it from there.
5) Offer a highly-visible, integrated in-home solution
In addition to creating a web portal for access to consumer’s historical data, we suggest also providing a highly visible point-in-time meter for integrated placement within the home. Consumers are looking for visible, real-time meters that can become an effortless part of their daily routines – much like their thermostats – because they know that everyone in their house has to be able to stay on track with one simple glance. Otherwise, it will be “one day up then one day down” instead of a forward-moving effort by everyone involved.
Also, remember what we’ve learned– keep the device simple, and present energy data in dollars and other meaningful equivalents, such the following example from Energy Aware.
We hope you found these tips in creating consumer energy portals helpful. Think about it… talk about it… try it… and get out there and create your own green power designs so that others can give it a try, too.
Mia Silverman | 10.17.09
We’re excited to share the infographic we designed for the Intuit Health Benefits Center project to answer this question.
In July 2009, Intuit conducted a survey with over one thousand small business owners in California asking about the health insurance options they offered their employees and how much they were paying for health insurance plans. From prior discussions with business owners, we knew employers were very interested in finding out the results of this survey, as they wanted to remain competitive with other businesses in their industry. We decided that an infographic would be the perfect way to transform our huge collection of data into a single, compelling visual. Our goal was to create a comprehensive infographic that would be instantly meaningful and easily understandable to the many employers looking to get a handle on the best way to offer competitive insurance packages to their employees.
Sound easy? Not exactly. Like most aspects of design, it turns out that creating infographics is a tricky business – on the one hand, we had to be careful not to present too much information so as to be overwhelming, but on the other hand, our infographic had to be able to provide enough detail to be useful to a wide range of employers looking for very specific information. And, of course, we had to do all of this without getting bogged down in the details or jargons of health insurance plans that often don’t make sense to someone at first glance who isn’t in the healthcare industry.
Here are our top design principles for creating an infographic:
1) Focus the infographic around a single, key question
We centered our infographic around the fundamental question new small business owners cared about most: “How do my health insurance costs compare?” Then, to answer this question, we created an infographic design to breakdown some of the important specifics – like employer and employee costs by region, and the average employer contribution. We placed secondary information, such as the various plan types offered by employers, on the side of the infographic and used subtler visuals so it would not to compete with our key message.
2) Identify a visual metaphor to help expose differences quickly
We wanted viewers to be able to notice variations in data quickly, as this is the fundamental power of a good infographic. Consequently, we came up with helpful visual metaphors that allowed us to visually represent plan costs by region in two ways. First, we used a heat map of California to indicate employer costs so viewers could quickly see regional differences at-a-glance. Second, we displayed horizontal bars that corresponded to the relative costs by employers and employees per region so viewers could visually compare differences in amount.
3) Use minimal text, and rely on visuals to tell the story
We wanted to keep our infographic clean and simple by requiring minimal reading, so we included a visual key for our chart at the bottom of the infographic to help keep the text and fine print to a minimum.
Overall, our quest to create an effective infographic helped us to double-deliver to our client — we not only revealed interesting findings, but also presented the findings in a ready-to-go format that met the needs of the employers Intuit wanted to reach. We’re excited to share our newest piece of healthcare artwork with you, so take a look and let us know what you think!
https://benefits.intuit.com/content/infographic.pdf
Mia Silverman | 05.04.09
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.
The results
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.
Conclusion
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.
Mia Silverman | 02.17.09
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.
