Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

January 20 2014


From Fabric to Flat Screen: How Color Combination Theories in Fashion Can Help a Web Designer

One cannot deny how color combination theories in fashion can help a web designer. You see, clothing and web designing have a lot in common. Both require a great deal of effort in trying to balance purpose and beauty. The two fields also require a great amount of effort in making quality designs become tangible products. In clothing, the design should be transformed – using scissors, thread, fabric and needles – into a tangible, comfortable, wearable and fashionable outfit.

Meanwhile, in web design, the designer should be able to create – using images, text boxes, codes and typefaces – a browsable, comfortable and usable website. These two, being common in some ways, also possess the similar techniques in creating elements. Fashion designers should have a very good sense of color combination. They make the most out of every hue to make their clients feel good about themselves. In fact, designers take loads of time to decide which colors they are going to use for such creations. They employ careful selection and consideration of visual and analytic aspects to make their work more appealing to the eye. For, in the end, fashion, clothes and dresses are still visual.


Photo by: Michiel Schuurman


Photo by Madame Herve


Photo by Amelie Hegardt

It is in the same principle that a web designer must select his color scheme. Like fashion, web design is mainly visual. The eye is the main processing unit of the body which perceives what is flashed on the screen of the computer or mobile device. A good web designer knows which colors combine and which do not. The designer must remember that these combinations suit different occasions and circumstances.


Experiment with color schemes at color-scheme-01

What if you haven’t studied web design or multimedia arts? What if you are just an ordinary blogger who has an extraordinary dream of getting a lot of readers? What will you do? Fear not. The secret is simple: stand up, go to your dressing room and  look at your closet. Try to look at your clothes. Which fabric fits the color of another? Which combination fits an occasion? Which of these gazillion fabrics compliment each another? Choose and answer these questions. Then, transform those fabric colors into flat screen ones

. color-combination-web002jpg

Photo by Andrea of

But, in case you are too preoccupied, (or in semantic terms, too lazy) to open your dresser, here are some few friendly reminders:

1. Occasionalize

Here is an example: unless it’s Christmas, or your company color dictates so, do not mix green and red. Don’t make your website look like a Christmas present. Red and green mix well only when it’s Christmas time (or when the company or client dictates so). People might think of your blog as a Santa’s Elves Labor Union website. Your readers might appeal that they got the wrong present last year. To avoid this, apply color theories. Learn the techniques on using colors to fit the theme of your website. Having a theme gives you identity. It’s something that all products, either on the Web or in the real world would want to attain. If a person recognizes you because of the color of your site, then you have nothing to worry because your website can be popular before you know it.


The thing is, you should learn how to occasionalize. Fit a color for the occasion or the nature of the website or blog. Example, if you manage a bank website, use blue colors as they suggest trustworthiness. If you are running a spa, use brown or/and green. If you are into a restaurant business, better use orange, yellow, and red. If you are a car dealer, use black. Fit every color, hue and shade for every occasion. But if you are designing for a Christmas-themed website, better retain the red and green colors because there’s no other more appropriate colors for Christmas than those. Web designing is like dressing up. If it ain’t fit the occasion, might as well go naked.

2. Be a Fame-whore!

Be a fame-seeking-madman, in a good sense. Get attention. Crave for it. Be crazy about it. Use your colors to attractively get subscribers. Like in clothing, neon colors of red, orange, yellow, purple and green attract attention. It suggests urgency. It is very useful to convey important messages. In the context of web designs, you could use such colors in your buttons which require attention. Hook your prospect readers by attracting their eyes first. Provide a good bait.


Getting their attention is one way of making them read your blog. The formula is simple: get them to read a part of your blog. If they like that part, they might as well read every entry. So that’s why you should able to get their attention! Use bright colors for your subscribe buttons, read-me pages, or any page or button that will require the attention of your would-be readers. Remember: Bright is right! Just be careful with this and don’t make your page look like a book with Stabilo highlighters all over. Too many neon colors are blinding, irritating and uninteresting to read.

3. Background-foreground agreement

If in clothing, you need to consider your skin color in selecting hues for your shirt, we have the seemingly same rule here. When designing web pages, consider the text-background relationship. Now, most beginners have a hard time on this. That is the reason why we see a lot of photos superimposed with texts and the text becomes unreadable. The background-foreground agreement rule generally says that you should make the foreground text readable. The background is just a designing tool. It just decorates the main thing.


Photo from Pamela Geller’s Book Stop the Islamization of America 

You should always remember the general principle: light colored background to dark colored text and vice versa. But if you are using pictures as background and the color is varying, it is most advisable to use solid-colored shapes as background superimposed to images.

Sta Ana

Photo by Rudolph Musngi


Web designing and fashion have the same roots. They both come from the early concepts of visual design. It is very obvious that they should possess the same philosophies- and color combination is one of them. The ability to produce a design which has complementing colors is something a designer should possess. He should be aware that the colors that he will use will affect, either visually or psychologically, the quality of his work. Knowing, understanding and applying the rules of fashion in web design is very beneficial. Yes, learning the theories and concepts that make colors coordinate with each other is a very tall order; and yes, it’s a big struggle but it’s a battle that you should win. All of these hard-fought troubles in learning new things will make you a better designer. You’ll produce better designs, and in turn, more money. So, start learning today!

Though the learning process may be,you should out-battle this struggle. You should be able to pick up the important lessons of design and put them in your arsenal. And these will matter to you in the end.

December 11 2013


Why It’s So Hard to Make Usability Sexy

Every time I’m in an electronics store to buy something or whenever I’m assisting one of my friends identify the right new gadget for them, I notice the feature-counting we’re all swept into as soon as we start comparing our options; "Well, this coffeemaker has 15 buttons, it has to be better than that one with only 6 buttons."

As a usability professional, my decision is frequently biased towards the usability and design of a product rather than its number of features or its price.

But, I must admit, even as a person who regards usability very highly, it’s extremely difficult to keep my mind straight and focused on design and usability when I’m shopping.

Here’s why.

Usability is Very Subjective

For products like electronics and the food you get at a supermarket, a lot of efforts have been made to make comparisons among them extremely simple.

For example, in the European Union, the EU Energy Label makes it crystal clear whether or not your new fridge or washing machine will be energy-efficient.


The labeling scheme quickly tells us which of our options will save us more money in our electricity bill and which one will have less of a negative environmental impact.

In addition, the EU Energy Label is a simple yet clever way to make us all aware and worry about energy savings in our buying decisions. Every time we’re about to buy an electronic product, the labeling scheme reminds us that energy efficiency is an important factor to keep in mind.

For food, we have standardized nutrition labels to help us decide which breakfast cereal or brand of potato chips is better for us:


The creation of a rating system for usability would appear to be a good solution because, just like with any rating system, it will achieve these two things for buyers:

  • It will allow us to compare usability between products
  • It will make us aware (or remind us) that usability is important

However, a usability rating system clashes with one of the cardinal points of usability itself: Different users have different needs. In other words, usability isn’t as cut and dry as the number of calories in our potato chips.

Perhaps we could create a usability rating system based on objective qualities related to usability, such as page load time, average clicks it takes to perform a user-action, background/foreground color contrast to measure readability, and so forth. But that type of rating system will only be able to tell a small portion of the entire usability story of a product.

Feature Count and Price is Easier to Use

I’ve found myself comparing the features and prices of two or more products on e-commerce sites simply by opening each option in their own browser tab and then just tabbing back and forth between them.

When we are comparison shopping, we can easily count and evaluate features and prices, and then come to a quick conclusion.

The same applies to brick-and-mortar stores, where we can actually see and touch the products we are considering. In stores, feature sheets and salespeople will never miss the opportunity to remind you that if your TV isn’t able to record five TV shows at the same time, you will never achieve happiness in life. And — surprise — the "slightly more expensive" TV right over there has it all. See? It says so right here in the feature sheet.

We do this as well when choosing which web app to sign up for. We can go to each "features" page and "pricing" page and readily decide which app suits us best.

But usability is completely absent from feature sheets because you can’t easily measure it.

Usability is difficult to convey to another person; how can we objectively show that our product is more usable than another? How can a person evaluate usability without first using the product for a significant amount of time?

A product’s list of features and price are easier to use and more readily available to us, so we often default to them for our buying decisions.

Can We Make Usability Sexy?

I think usability has an opportunity to become a factor in purchasing decisions in the next few years as our design techniques and understanding of user-centered design improves.

As web professionals, we are now much more aware of the importance of usability in the success of our products.

Now we need to figure out how to make usability a significant component in the buying decisions of people.

Related Content

About the Author

Daniele Grassi is a UX Designer and CTO of Timeneye Time Tracking, a time tracking web app designed with usability in mind. Follow him on Twitter or on his personal blog.

The post Why It’s So Hard to Make Usability Sexy appeared first on Six Revisions.

Tags: Usability
Sponsored post

December 10 2013


Notification Design Strategies

If your inbox is anything like mine, it’s littered with unwanted notifications from companies begging for attention. Gmail has done a great job of making it easy to separate important messages from automated notifications; however some organizations refuse to make it easy to control the emails we receive. What can notification designers do to make things right?

Interacting with most websites is simple: we sign up, we sign in, and, occasionally, we give websites a bit of our time and attention. Maybe we share a preference or two. In return, those sites provide us with not only useful information (in the short term), but also notifications and other recurring updates (in the long term). This functionality is nothing new. It’s often convenient.

Until it isn’t, that is.

What can designers do to make things better? In this article, we’ll review some examples of websites that allow users to control both the type and the frequency of the notifications users receive (to their user’s benefit as well as their detriment). Along the way, we’ll discuss alternative ways that our companies might provide value to their audience.

Quality over quantity

If you love it, set it free. If if returns, it was meant to be.


It’s a big, scary world out there for product managers. Allowing users to control the quantity of email notifications that they receive requires product managers to first trust that their users will return. Users will only do that, of course, if our products or services provide long-term value rather than merely grabbing (and squandering) attention.

Luckily, there are plenty of ways that the design of our notification can do just that. I recommend giving attention to the following five things:

  1. Say what you mean
  2. Give users a choice
  3. Relegate (some) interactions in the email itself
  4. Remind users of additional actions, especially time—sensitive ones
  5. Provide a digest

1. Say what you mean

The CAN-SPAM law specifically forbids sending an email to someone who has previously unsubscribed. In response, some website owners have deliberately obfuscated the unsubscribe process, often requiring users to sign in to receive fewer emails: e.g. “Don’t want to receive email notifications? Adjust your message settings.”

Consider Yipit. The company made a good first impression when it launched. As an aggregator of the bargains appearing on “daily deal” sites such as Groupon, LivingSocial, etc., YipIt promised to provide in an at-a-glance summary of deals.

When I signed up, however, I had login issues that their support team was unable to resolve. This would have been bad enough on its own. The kicker came when I discovered that—even though I couldn’t log in—I continued to receive email announcements! When I clicked on the “unsubscribe” option at the bottom of an email, it took me to a login page, not an “unsubscribe” page.

The bottom of the Yipit email, offering an opportunity for me to “unsubscribe.”

How frustrating. As a result, YipIt provided me a poor, inconsistent, confusing interaction. Unsubscribe buttons should never yield a dead end.

2. Give users a choice

When President Barack Obama ran for re-election, his campaign team specifically targeted emails based on “big data” about American voters. This meant that, at the peak of the election season, his team sometimes sent out as many as four or five emails a day. That’s quite a lot of email!

Rather than risk losing the support of subscribers who may have perceived the campaign’s increase in frequency as an increase in spam, the campaign team simply made better use of the page upon which users landed when they clicked the unsubscribe button. There, the team provided recipients with a way to adjust the frequency with which they received emails. Smart.

Next consider ThinkGeek, a website for nerdy gifts. Designers at the company recognized the simple—yet—nonetheless—profound fact that people likely get a lot of email during the holidays. So last year they provided an option for subscribers to pause their email notifications (or “temporarily unsubscribe”) until the holiday season passes:

In addition to providing users with a choice—always a welcome addition—both the Obama campaign and ThinkGeek designed smart ways for their less voracious users to stay on top of thingswithout feeling overwhelmed.

3. Relegate (some) interactions in the email itself

Zendesk, a web—based customer support system, provides both customer support representatives (CSRs) and users alike with a special kind of email. Rather than require that they make a roundtrip to a website to continue their conversation, Zendesk emails allow CSRs and users to simply reply to their email “above this line.” This effectively makes what would be a unique interaction (between a CSR, a user, and into something as easy as replying to an email.

Pragmatically speaking, this doesn’t save users more than a few seconds. But it’s the thought that counts. Both CSRs and users don’t need to recall their login information in order to get things done.

4. Remind users of additional actions, especially time—sensitive ones

Time—sensitive notifications are more likely to be seen as helpful, rather than annoying.
Instacart aims to be the “Amazon Prime of grocery delivery.” Instead of having one, big warehouse of groceries (like some failed dot—com era startups), Instacart trains a fleet of personal shoppers to go to local stores and deliver groceries.

Immediately after the company delivers a user’s groceries, Instacart sends an email notification to that customer informing him or her that their order is complete. This is more just a notification, though, as the email also provides users with several actions they might take in response: users can rate their order, leave a tip, report a problem, and refer a friend. If the user is satisfied with the order and doesn’t want to do anything else, he or she will still receive value from the final confirmation.

What a user sees right after the grocery delivery is complete: logical next steps.

For more information on keeping a list of subscribers happy, see Mailchimp’s Best Practices for Lists page. In particular, the company suggests segmenting subscribers by groups. This allows companies to send more—targeted emails which, in turn, lowers the likelihood that their users will feel overwhelmed. Additionally, Mailchimp recommends sending “relevant content” because if your email isn’t interesting to the user, the user might report your email as spam — and that’s not good for business.

RelayRides is a peer—to—peer car sharing platform that allows you to borrow your neighbor’s car. RelayRides sends lots of updates (many of which I do not mind) at logical times and related to my actions on the site. When I reserve a car, the quality of my job or vacation may depend on that car reservation, so I am very happy to receive an email and a text message updating me about my reservation.

Finally, don’t confuse time—sensitive interactions with promotions, which may be time—sensitive with regards to the company but not necessarily time—sensitive with regards to the user. In contrast to the relatively frequent text messages I receive when I rent a car from RelayRides, RelayRides does send me promotional emails. The difference is that they send the promotional emails infrequently.

5. Provide a digest

Finally, never forget the value of something as simple as a summary.

Content—rich sites such as Learnist, a place where experts curate content to help beginners learn, should provide users with an option to stay informed even if they don’t have the time to browse everything the site contains. With regards to Learnist, I found that the site interesting but overwhelming. It simply required too much of my time to find specific information. If I were able to pick a few topics of interest, however, and receive digests, my Learnist emails wouldn’t find their way to trash, as they usually do.

Content—heavy websites might consider two email options: one where users can see either a series of thumbnails with lots of content (as Learnist currently does), or another that provides users with an in—depth, blog—like summary of a particular topic. Whereas the former requires a bit more time to fully explore, the latter is much easier to browse “on the go.” This is especially important with regards to mobile access where connectivity can be an issue .

A great example of digests comes from the Nieman Journalism Lab. Longer in word count but more dense in the amount of information they contain, Nieman’s digests are filled with attractive images and short, informative sentences.

A more natural notification experience

Allowing users to control the frequency of email notifications about a product will improve the overall user experience. Whether we provide different options for notification content, through a different channel, offer different content entirely, or shift some attention to offline outreach, users appreciate the freedom from spam. Lastly, we must always consider the bigger picture. Thinking about what challenges users face, and what the platform solves, will guide all the decisions we make. Then our communications can truly be about quality, and not quantity.

The post Notification Design Strategies appeared first on UX Booth.

October 29 2013


Five Tips for Conducting Scientific Research in the UX World

Despite the fact that research plays such a pivotal role in the practice of user-centered design, much has been written about how to approach it in a “quick and dirty” manner. Why the rush? I believe that the application of a more rigorous, scientific methodology could lend some much-needed credibility to our approach.

My love story with research began almost a decade ago. One day, while working as a novice prototyper, I was instructed to get feedback from customers. So — awkwardly — I introduced my ideas to potential users. Some told me what they liked; others gently glossed over what they would improve. I came away feeling accomplished.

Little did I know. My subsequent training as a scientific researcher helped me see the error of my ways. I realized that, in that moment, I used biased responses to inform my design. I heard what I wanted and not necessarily what I needed.

A rigorous approach to research provides a much clearer path to unbiased findings, findings that go a long way towards informing our design. This article covers five perspectives to that end. Starting with research plans, we’ll cover details of testing methodologies and even the role of the researcher herself. Finally, we’ll discuss the ways these tips apply to our research in practice.

Go back to where it all began

All scientific research projects begin with a research plan, a document that outlines:

  • The problem (or the research questions) to be explored,
  • A summary of existing literature,
  • The hypothesis(es) or an extrapolation of any patterns evident in the existing literature,
  • The research participants who will take part (more on this, below),
  • The data collection methodology(ies) to be employed,
  • The planned analysis methods, and
  • Any expected results.

The goal in writing a research plan is to be absolutely certain that the entire team understands not only the purpose of the study but also the fact that each aspect of the study has been given due consideration.

Developing a sound research plan requires that we begin with an extensive review of existing theories, models, and other research studies. This ensures that we aren’ t reinventing the wheel. For instance, if the study is based around the System Usability Scale, the best thing to do is to read the original paper to truly understand the scale. Finding original research is more valuable than pretty diagrams or the popularity of the source. Valuable academic citation sites include Google scholar and Microsoft Academic Search. While there’ s always the risk of playing a game of “telephone”, these documents often go through extensive committee review which minimizes the chance that they will contain incorrect information.

Determine the number of participants beforehand

Sample size has been a hot topic for a while now. Some researchers assert that five participants will suffice2; others calculate their sample size based on the power that they want to achieve3; still others believe that a higher number has a lower percentage of risk associated with it4. My take is that the sample size depends on the methodology of the study.

For example, a qualitative, exploratory study on mobile phone usage behavior needs descriptive, insightful data, so the number of participants depends on the richness of the information received. But, a quantitative study, such as looking at the effects of mobile phone usage on behavior depends on confidence limits and intervals as well as analysis methods. The more analytical you want to be, the bigger your sample size needs to be.

Either way, the key is to determine the number of participants before conducting our research and to continue researching until we’ ve hit that number. This ensures that we aren’ t swayed by early trends that might ultimately cause us to miss subtle issues. The Three Mile High tragedy is a painful reminder of the severity of subtle issues.

Don’t let your interests conflict

Scientific research focuses on objectivity. For that reason, it always begins with getting approval from an Institutional Review Board (IRB), an academic organization that approves and monitors any research involving humans. The IRB requires that all researchers state they do not have a conflict of interest in the research project at hand.

So, what does this imply for UX designers? Simple: designers shouldn’t research their own designs.

Designers inevitably design things that make sense to themselves. This is beneficial in some ways, but it also paves the way for hundreds of biases to affect decision making. In order to gather unbiased research to inform designs, a trained, unbiased researcher needs to have the final say on the questions, and decipher the answers. This helps avoid experimenter biases like interpretive bias and observer bias.

Test the test

Pilot tests are tests of a research plan. For scientific researchers, pilot tests are necessary in order to ensure the validity of the research plan and help identify possible problems with it5. Ideally, pilot tests are conducted with a group of users that are representative of the target audience.

The pilot test works exactly like the proposed one, but instead of looking for data, it allows us to catch errors in our test itself. For example, if we are pilot-testing a survey and users don’ t understand the word ldquo; cumbersome” , we might remove that from our final survey. With a survey, we’ ll also time how long users take to complete it, make sure that every question is understood correctly and ask the participants for candid feedback.

If we’ re doing a usability test, we’ ll provide the instructions and watch them complete the tasks that we plan to assign to users, to ensure that our instructions are clear; we’ ll remind users to think aloud and to be frank with their opinions, as they would in an actual test; and, most important, we’ ll take notes every time they ask that a question be repeated or for more clarity.

Make sure to stick to the planned script and behave as though this was a regular research study. Ask for honest feedback on how users would improve the overall study and let your expertise as a researcher apply their answers accordingly.

Typically, results of a pilot test are only used to modify the actual test. Results like answers to surveys, time taken to complete tasks, etc. should not be incorporated into the final results of the research to ensure consistency.

De-bias, de-stress, de-tect

Scientific research often requires extensive vetting of researchers — the people conducting the research — prior to their participation in a project. The latest trend in the UX world is to get everyone involved with the research. As a researcher, nothing excites me more than this but that being said, it is extremely important to acknowledge that the inexperience of a researcher and its number of open (versus hidden) observers can be inversely proportionate to its overall ldquo; success.”

For instance, usability testing (arguably, the most common type of research method in the UX world), can be extremely stressful for participants6. Aside from being asked to ‘perform’ , users are sometimes put in unnatural conditions which can be very nerve wracking. This, in turn, could hinder performance and risk invalidating our findings.

Another thing that affects performance is the fact that participants change their behaviour when they know they’ re being observed, something otherwise known as the Hawthorne effect. Worse still, this effect is only exacerbated as the number of observers increases. So while it’ s definitely good to get more people involved and invested in research, there are a few precautions we should take in order to minimize their potential negative effects.

  1. First, whenever we’ ve got a group of people involved in the research process, we should always ensure the facilitator of a research session has some experience and training so that they’ re not unknowingly influencing participants. Keep an eye out for leading questions and analyze the results accordingly.
  2. Second, either keep the observers hidden or to a minimum. A researcher’ s main job is to keep the data as pure as possible (objectivity, remember?), and a stressed participant does not provide reliable data.
  3. Third, let’ s remind the users that we had nothing to do with the design, so that users aren’ t hesitant to give too much negative feedback.
  4. Fourth, always remind the user that we’ re testing the product and not them. This is (hopefully) old news, but users need to be reminded of this constantly.
  5. Fifth, and finally, always keep an eye out (or a ear, if the session is remote) for any sign of stress. If the participant starts to appear stressed, immediately change the topic or consider ending the session. The key here is to note the difference between a stressful or frustrating design interaction and a stressful research session. The former provides valuable insight while the latter can provide unreliable data.

Repurposing the scientific method

In summary, I suggest taking a leaf out of the scientific researchers ’ book:

  1. Plan your study out and read the sources to get accurate information.
  2. Choose a number of participants before testing, and stick to it regardless of the first trends that appear.
  3. Be alert! Watch out for bias when conducting research.
  4. Test our tests.
  5. Avoid biases, stress, and leading questions.

Most importantly, don’t shy away from rigor in the research process; it’ s the only thing that can lead to truly dependable results!


  1. Fin, P. (2006). Bias and Blinding: Self-Fulfilling Prophecies and Intentional Ignorance
  2. Nielsen, J. (1993). Usability Engineering. Boston :AP Professional.
  3. Kraemer, C. & Thiemann, S. (1987). How many subjects? Statistical power analysis in research. Oaks, CA, US: Sage Publications, Inc. (1987). 119 pp.
  4. Faulkner, L. (2003). Beyond the five-user assumption: Benefits of increase sample sizes in usability testing. Behavior Research Methods, Instruments, & Computers, 2003, 35(3), 379-383.
  5. van Teijlingen, E. & Hundley, V. (2001). The importance of pilot studies. Social Research Update. Issue 35.
  6. Schrier, J. (1992). Reducing Stress Associated with Participating in a Usability Test. Proceedings of the Human Factors and Ergonomics Society Annual Meeting 1992 36: 1210. DOI: 10.1177/154193129203601606.

The post Five Tips for Conducting Scientific Research in the UX World appeared first on UX Booth.

August 27 2013


Reimagining the 21st-century classroom

Education in America faces tough challenges. Innovative solutions to these challenges can be found when teachers and students apply service design to the classroom, solving short-term problems while also giving students long-term skills.

The 21st-century, American classroom faces major challenges. The threat of the privatization of schools1), the lack of funding, and the erosion of traditional societal institutions, has forced schools to take on the roles of “priests, psychologists, therapists, political reformers, social workers, sex advisers, or parents.”2 Now more than ever, schools are expected to not only teach children subject matter, but to teach life skills as well.

This, in turn, fundamentally changes the teacher’s role in the classroom. Further, legal mandates for test-based performance evaluation have not only trickled down to the teacher’s workload, but threatened their very job. After all, if a computer can teach individualized math better than a teacher and students get higher test scores, why are teachers needed?3 This threat is most acutely manifest by the proliferation of online courses. Michael Sandel of San Jose State University recently foreshadowed the future of higher education in an open letter to fellow professors stating, “Let us not kid ourselves…administrators at C.S.U. are beginning a process of replacing faculty with cheap online education.”4 For teachers at all levels, overcoming internal and external pressures and continuing to provide fundamental value requires an innovative re-envisioning of the classroom and making it a shared experience, one that cannot be replicated by an automaton.

Teachers must overcome the digital-age metaphor of learning, one which compares the human to a computer, putting knowledge into memory, emphasizing logic and measurable outcomes. Teachers must define their role not as data providers, but service providers. The two-fold purpose of education is to teach students to think critically about their world and, ultimately, to teach them to become good citizens. The Service Design techniques and tools – building empathy, customer journey maps, and prototyping – which originally arose to help businesses ideate on tough, multi-faceted problems, should now be used in the classroom to help teachers re-imagine and co-create the student experience.

Class in empathy

Before starting any service design project, designers work to understand the primary actors in their system – indeed, this is a foundational premise for any human-centered design endeavor.

Despite this, teacher‘s often overlook the classroom‘s primary actors, the students. After all, most teachers reason, “I was once a student myself. How could my students experience differ from our own? Neil Postman, the educational scholar and cultural critic, points out the fallacy in this logic:

Most teachers…teach subjects they were good at in school. They found the subject both easy and pleasurable. As a result, they are not likely to understand how the subject appears to those who are not good at it, or don’t care about it, or both.

Teachers, while well-intentioned, may have trouble empathizing with students struggling to understand the curricula or how it relates to them. As a practice in empathy, Postman goes so far as to suggest that teachers teach a subject they are bad at for a year as a way to gain understanding of how many students might feel in their classroom.

From a service-design perspective, teachers can bring more empathy into the classroom by giving students a voice. What do students like to do? What do students want to learn? A simple interview or class discussion can prove quite enlightening. Even switching roles where the student teaches for a day would prove to be enlightening of the other’s experience for both student and teacher.

The student journey

For further insight, students and teacher could employ another service design tool known as the Customer Journey Map. Customer Journey Maps trace the main actors in a system as they interact with its various touchpoints. This, in turn, helps designers discover opportunity areas that might benefit from creative problem solving.

As a classroom activity, a teacher can guide students in groups through making their own “student” journey map of several different time periods: the student’s experience in the teacher’s class, the school day, the student’s year, or even the student‘s entire school career. Doing so provides the teacher with deep insights about what students do outside of his or her classroom. If History class comes after an English class, for example, there might be an opportunity for cross-disciplinary learning cross-class relevant topics might emerge. Understanding the context of the class and getting insights from other classrooms can lead teachers to discover techniques students enjoy in other classrooms and use them in their own. Teachers may even get tough critique and suggestions on how to improve their own classroom from the stakeholders that really matter, the students.

A student journey map exercise also carries the potential to provide deep insight into a student’s life outside of the school environment: what other challenges do students face that might affect their academic performance? By identifying pain points, students and teachers can collaboratively brainstorm possible solutions, creating the ideal journey map to understand how students might better enjoy their school experience. This exercise places both student and teacher in a design mindset understanding that the classroom setting does not have to remain in the status quo. Furthermore, even if student ideas are not implemented, students will be left with the notion that their voice was important, was heard, and did contribute to the structure of their classroom experience.

Life imitates life

Once the teacher and students have created a new classroom model, they should try it out to see if it works. If it’s a success, great. If it’s a failure, even better. As John Dewey, the great 20th-century philosopher and educational theorist wrote, “Failure is instructive. The person who really thinks learns quite as much from his failures as from his successes.” Furthermore, this trial-and-error mentality cultivates one of the principle purposes of education, critical thinking.

Postman, again, writes:

When we incorporate the lives of our ancestors in our education, we discover that some of them were great error-makers, some great error-correctors, some both. And in discovering this, we accomplish three things. First, we help students to see that knowledge is a stage in human development, with a past and a future. Second…we acquaint students with the people and ideas that comprise “cultural literacy” – that is to say, give them some understanding of where their ideas come from and how we came by them. And third, we show them that error is no disgrace, that it is the agency through which we increase understanding.5

Teachers should encourage the prototyping of an idea and create an environment that allows for failure. This should permeate not only into the ideas and environment that students and their teachers co-create, but also into the students’ ability to jump into new learning feeling comfortable with the possibility of failure.

When students and teachers use service design tools to re-imagine their classrooms they fulfill the key purposes of education: thinking critically and being a productive member of society. Through collaboration and group decision making, students learn what it takes to organize and empathize. This makes them better citizens. By being part of their own classroom’s design, students understand that they have an important voice that can lead to change, skills applicable well beyond the classroom.

Designers think critically, and students and teachers must, too. By using Service Design techniques, teachers learn to better understand their students and their changing role in the 21st-century classroom. Instead of the “authoritarian ruler” in charge of imparting a narrow set of knowledge, the teacher becomes a choreographer, setting up the environment to teach and take into account the whole student. Through the Service Design process, both student and teacher realize that the classroom is a prototype that might sometimes fail but never fails to produce some kind of learning.

Excited about the intersection of service design and the classroom? Curious about how to further apply Service Design in Education? Check out these resources and examples:

Note: Service Design Tools are referenced from


  1. “Secondly, we have seen an increased role for national nonprofit and for-profit organizations in providing educational services, and in acting as self-interested players in school politics.” John Thompson, “Seismic Shifts in Education Policy”
  2. Neil Postman, The End of Education, 143.
  3. Motoko Rich, “Study Gauges Value of Technology in Schools.”
  4. Let us not kid ourselves,” the letter said, “administrators at C.S.U. are beginning a process of replacing faculty with cheap online education.”
  5. Neil Postman, The End of Education, 125.

The post Reimagining the 21st-century classroom appeared first on UX Booth.

August 26 2013


5 Mistakes You Should Avoid When A/B Testing Your Designs

5 Mistakes You Should Avoid When A/B Testing Your Designs

A/B testing can help improve your web designs. Even a small tweak such as changing the location of your call-to-action button can increase sales by 35.6%. Performing A/B tests will let you verify that your design changes lead to better results.

As a web designer who strives to create high-performing websites, you probably already know about A/B testing. But in case this is the first time you have heard of A/B testing (which is also called split testing sometimes), read this introductory guide first: An Introduction to Website Split Testing.

Though A/B testing seems like a no-brainer — especially with the huge array of user-friendly tools out there like Optimizely, Google Analytics Content Experiments, and Visual Website Optimizer (the company I work for) — there are a few common mistakes that will lead you towards unreliable results.

These A/B testing mistakes could spell disaster for a website because they have the potential to lower a site’s conversion rates.

Making the A/B testing mistakes I’ll be talking about below would, at the very least, mean you’re not going to get the best data you can get for making informed design decisions.

Mistake #1: Using A/B Tests When You Really Shouldn’t

A/B testing is best used when you want to test different two versions of one variable.

For example, if you want to find out if your hyperlinks get clicked on more if they were underlined versus if they weren’t, you can create two versions of a web page: One version with links underlined (version A), and one version where links aren’t underlined (version B). The variable being tested is the hyperlink’s text decoration (underlined vs. not underlined).

In this case, you can effectively use A/B testing to see which version is better.

But for testing more than one variable, you should use multivariate tests (MVT).

Continuing on with our hyperlink example, you should use multivariate testing if you want to find the best combination for these 3 variables:

  1. Text decoration: Underlined vs. Not Underlined
  2. Text color: Blue vs. Orange vs. Green
  3. Text style: Bold vs. Italics vs. Normal

In the case above, there are 18 (2x3x3) different versions you need to test in order for you to get the best results.

Why would you want to test 18 different versions? There could be an interaction between these 3 variables that could affect conversion performance.

For instance, green-colored hyperlinks may perform better than blue-colored hyperlinks only if the green hyperlinks were bolded and not underlined. But the green hyperlinks could perform worse than blue hyperlinks when the green hyperlinks are italicized and underlined.

However, multivariate testing requires site traffic to be divided among the different versions being tested, so I recommend using this testing method only when the web page you are testing already receives a good amount of traffic. Otherwise, the test will take too long to finish in order for you to get definitive results.

Websites with low traffic should choose A/B tests because it would be the most practical choice in the case of low site traffic.

Mistake #2: Ignoring the Sample Size

So you have just set up an A/B test on your website.

Two hours later, you get statistically confident results indicating that the web design version that has a blue call-to-action button is showing 300% improvement in sign-ups.

You jump with joy because of this newfound discovery, and now you will be committing the change site-wide.

Hold your horses!

Because the testing period seems too short, the scenario above is indicative of an A/B test that was administered on an insufficient sample size of visitors.

For those of us who aren’t stats junkies, sample size in this context is the amount of website visitors being tested.

An insufficient sample size means that the sample size is statistically too small to be an accurate representation of the entire population (entire population, in this context, means all website visitors).

When your site receives 50,000 visitors a month, a test that was run on a sample size of only 30 visitors (which is only 0.06% of the monthly site visits) won’t get you conclusive results.

The positive increase in performance in these scenarios might simply be due to chance/coincidence.

When you implement a change on your site based on an insufficient sample size, you might soon realize that your conversion rates aren’t increasing as you had expected.

Or worse: In some cases, it might even decrease. Why? If you have an insufficient sample size, the improvement you saw during the testing period might have only been by chance and there’s a possibility that, in reality, the version showing a positive improvement is actually worse when tested on an appropriate sample size.

To avoid this mistake, you will need to determine the appropriate sample size for your test. You can use Visual Website Optimizer’s free test duration calculator.

The tool will tell you how many days you need to run the test for so that you can receive reliable results. The calculation is based on the number of versions you’re going to test, your website traffic, your current conversion rate, etc.

Mistake #3: Focusing on Only One Website Metric

There are several conversion goals you can use as metrics for success, such as click-through rate, the number of sign-ups you get on your web app, shopping cart abandonment rate, and so forth.

You will often see that there is an interaction between your different website goals and metrics, and thus, using data you gather via A/B tests to improve only one of your metrics could negatively impact other important metrics.

For instance, using a design version that improves the click-through rate of your call-to-action button might consequentially affect the number of sign-ups you get.

Sometimes a change in the web design that decreases one metric is alright if it significantly improves a more important metric, such as a decrease in click-through rate is alright if you’re getting significantly more sign-ups.

You should have complete knowledge of every metric that’s being affected with your changes so that you can make an informed design decision based on your project’s priorities.

Mistake #4: Not Segmenting Your Tests

Over at Visual Website Optimizer, one of our customers ran a test to see if removing some navigation elements from their homepage could increase conversions.

The customer segmented the test in such a way that only new visitors on the site would be tested.

This made perfect sense because this was a video streaming website, much like Netflix. So, a good number of returning visitors on the site were people who were already their customers.

Since the site owner was most interested in seeing how to convert new site visitors to customers, it was a great idea to segment the A/B test.

Runing the test for all visitors on the site would have been a mistake; doing so would have skewed the results because testing all visitors would mean having a data sample that included visitors who have already gone through the conversion funnel and are already customers.

You can read the complete case study here.

Segment your A/B test if it can lead to better results for the particular test you’re running.

Mistake #5: Choosing Aesthetics Over Results

This is one of the biggest initial struggles I see designers face when they start A/B testing their work.

Here is a hypothetical scenario (exaggerated for discussion purposes): The designer believes the stock photo she picked looks beautiful with the design. She runs an A/B test to verify that it’s a good design choice.

She creates two versions to test: One with the stock photo (version A), and one without (version B).

The designer discovers that the web design gets more clicks on the "Buy Now" button on version B, the version without the stock photo.

However, version B looks "ugly" in the designer’s opinion.

What does she do now? Ignore the results and go with the flower photo, choose another stock photo, or make an informed design decision and revise the design so that it looks better without a stock photo?

Once you get into the groove of testing, you will get the hang of achieving a good balance between design aesthetics and test data.

Sometimes the site may not look as pretty as you want it to, but if it doesn’t look absolutely horrendous, choose the design that performs better.

After all, websites are tools. The purpose of a website is not to look pretty, but to achieve certain objectives like increasing online sales or getting more pageviews.

Regardless of how a web design looks, the design that is better at achieving the website’s goals should be the one that should be implemented.

Related Content

About the Author

Smriti Chawla is a Content Marketer at Visual Website Optimizer, a popular A/B testing and heat-mapping tool. Read more articles on A/B testing and high-converting design ideas by visiting the Visual Website Optimizer Blog. Connect with Smriti on Twitter.

The post 5 Mistakes You Should Avoid When A/B Testing Your Designs appeared first on Six Revisions.

Tags: Usability

August 20 2013


Has the Recession Taken Your Experience to the Dark Side?

When a new milkshake bar opened in my local shopping mall, I was very excited; I went right over and ordered my favourite flavour (coconut, of course). The cashier responded “Would you like a regular size?” and I agreed. I paid what I considered a high price for a medium-sized milkshake and, as I left, I noticed the sizes available weren’t “Small, Regular, and Large” (as I might have expected), but rather “Tiny, Small and Regular.” Realizing I was duped, I lost my incentive to return.

Unsurprisingly, the milkshake bar isn’t there anymore.

It’s been a tough time for businesses lately. The global economic downturn has led many consumers to tighten their belts and part with their cash more selectively. This has naturally driven companies to focus on maximising profits wherever possible in order to provide a strong return on their investment. That’s all well and good, of course, but sometimes the hunger for short-term results can happen at the expense of other “non critical” factors – as was the case in the story of the milkshake bar, above.

This conundrum has led me, a self-described user experience geek (UXG), to more closely examine the relationship between user and business objectives. Specifically, I sought answers to the following questions:

Is poor customer experience a necessary evil in order to meet business objectives?
What is the optimal way to design products or experiences that deliver a return on investment in both the short term and the long-term?

If I could find them, the answers to these questions could help businesses better rationalize the difficult choices they’d make during the recession. What follows is my journey. We’ll begin by observing a positive version of the “milkshake bar” experience. Next, we’ll discover how deceptive approaches translate to on the web. We’ll finish with a review of the habits of highly effective user centered designers – habits which are always applicable, recession or otherwise.

A favorable interchange

On any given Thursday you’ll find me at my local McDonalds. There, you might observe the following exchange:

Me: Hi, I’d like a Big Mac please.
My buddy at McDonald’s: Would you like to make that a meal?
Me: Yeah, sure.
My buddy at McDonald’s: Would you like to make that a large meal?
Me: No, thanks.

In this scenario, the short-term business objective is to sell a meal and my interaction with the sales clerk meets that objective. The experience is also good for me as a customer, because I get exactly what I ask for. The McDonald’s salesman first understands my needs and then offers a relevant upsell. When I reject the large meal (a higher short-term objective for McDonald’s), the salesman moves on, ensuring that I meet their long-term objective by returning as a customer (side effects may include high cholesterol). This straightforward, contextual approach – a combination of easy-to-understand terminology and relevant propositions – is a sustainable way to attract returning customers and build a reputable brand.

And the same logic applies to our websites. does a great job, for example, of offering two, relevant upsell opportunities.

I might not take the bait, but the option is both relevant and easy-to-understand.

So, is a poor customer experience a necessary evil in order to meet business objectives? No. Companies such as McDonald’s and Amazon prove that by valuing customer service and user goals over sales, companies are actually able to more successfully achieve their own goals (assuming those goals include retaining customers).

Dark patterns

In extreme cases, some companies completely disregard the user experience in favour of meeting business objectives. UX designer Harry Brignull calls these interactions “dark patterns.” From his site: “A dark pattern is a type of user interface that has been carefully crafted to trick users into doing things, such as buying insurance with their purchase or signing up for recurring bills.” So why are dark patterns used? Simple: they get short-term results. Over the long-term, however, users feel deceived, cheated and tricked – and they’re not afraid to share these opinions online!

Celebrated author Tim Seidell suggests that “For every action, there’s an equal and opposite reaction. Plus a social media overreaction.” And Twifficiency is a great example of this. Launched in 2010, the app “went viral” in a matter of days due to its accidental use of a dark pattern in which users automatically shared the app to all of their Twitter followers. The early growth was short-lived, however, as it was soon overshadowed by the exponential amount of negative attention it received.

Prioritizing appropriately

Given the connection between positive user experiences and long-term business objectives, why doesn’t every designer put user goals ahead of business goals? Because, as management guru Peter Drucker explains, “what gets measured gets managed.” In other words, some companies believe it is easier to track short-term sales than long-term customer retention.

When companies focus on driving short-term revenue and increasing short-term profit, the emphasis is on improving conversion rates or profit per visitor rather than helping users achieve their goals. The happy medium falls into what author Stephen R. Covey calls “Quadrant 2.” In his legendary book 7 Habits of Highly Effective People, Covey explains that Quadrant 2 contains tasks that are important but not urgent, whereas tasks that are both important and urgent are considered “quadrant 1. ” These lead to a business that’s constantly “fire fighting.”

Four business postures

Adapting quadrant 2 from Covey’s model maps business goals and user goals across two axes.

In Quadrant 1 a company focuses only on the urgent, short-term business goals, but not the important, long-term user needs. They might see short-term success, at the expense of unhappy, deceived users (think the milkshake bar). In Quadrant 2 a company focuses on the important user-needs as well as how they impact the business goals. Here user needs are met and, in turn, business goals are also met (think Amazon). In Quadrant 3 both the user needs and business goals are ignored (and we all know what happens there). Finally, in Quadrant 4, user goals are met but business goals are ignored. This is nicknamed “daydreaming” because, really, there’s no business model here at all.

Habits of highly effective designers

Because quadrant 2 presents the optimal way to design experiences, the first step of any design process is to know what the business objectives are and how they connect to user needs.

However a company’s designers currently focus on things, here are seven ways to ensure they move towards “quadrant 2.”

  1. Make a decision not to employ dark patterns. If the client disagrees, remind him/her of the long-term goals and the value of repeat business compared to single-visit exploitation. If they can’t see the value, drop the client.
  2. Keep your eyes on the prize. Design decisions should be driven by business objectives. Always review the objectives before development or design meetings, and keep them posted somewhere obvious for the whole team to see.
  3. Make the link between the UX and profitability. Discuss the value of positive user experience with the client early on. Make sure both sides agree that resources spent on the user experience are resources well spent.
  4. Get to know the user. Find out what your users’ goals are and what motivates them. User interviews and focus groups can provide invaluable insights.
  5. Work with user goals, not against them. Instead of tricking users into following a predefined path, help them to see why that path is the most attractive option. Use contextually relevant content to align their goals with those of the business.
  6. Increase the type of measurements you do. Don’t just measure the obvious,such as whether a new development impacts the conversion rate. Measure the effects, too. Are users more likely to return if they have a favorable experience? Will users recommend your service to a friend?
  7. Finally, be data driven. Analyse objectively what is and isn’t working. Iterate when needed and move forward in the direction the data takes you, not the direction you were hoping it would take.

By practising the habits of highly effective UX designers, we move towards “Quadrant 2,” a place where happy clients and happy businesses can coexist. These habits set us up for recurring revenue from empowered users. There is no need to go over to the dark side and leave behind the principles of user experience – even in a recession.

Ok, I’m off to McDonalds. I think I’ll order a milkshake, but probably just a regular…

The post Has the Recession Taken Your Experience to the Dark Side? appeared first on UX Booth.

August 13 2013


Designing with Code

To code or not to code? For designers, that’s a very contentious question. Clients like designers who code because (among other reasons) that’s one less body on payroll. Design advocates, on the other hand, often see code as a technical limitation that stifles creativity. To make matters worse, the information ecologies we all work in refuse to stand still. By looking carefully at some of our favorite arguments, however –and by taking them within the context of our ever-evolving digital landscape –we can begin to make a case for when working in code makes sense.

Several years ago, Andrew Maier penned an article on the use of prototypes in website design and development. In light of my own recent work in prototyping, one of the comments to that article stood out:

Any kind of prototype that involves programming or markup sounds scary to me –that’s the fastest route to a “developer-y” looking site rather than a truly designed –graphically as well as functionally designed –site.

This comment caught my eye because it is the same concern I often hear today, a full three years later. And here’s why this is a big deal: given the content and information architecture challenges that the responsive, multi-context web presents there are now better reasons than ever before to integrate coded prototypes into the design process. By paying close attention early on to the integrity of the narratives we create at the most basic level of communication, we can build the foundation necessary to effectively articulate those narratives far and wide.

Why we’re afraid to commit

If pressed to describe their relationship with code, many designers would hunt around for the “it’s complicated” checkbox. We may have already been sold on prototyping (see Todd Zaki Warfel, Jeff Gothelf, and Stephen Hay if you’re not yet convinced), but we’re still afraid of our beautiful UX getting all bent out of shape and smudged up by an engineering toolset (and mindset).

The source of this dread is no mystery. In his seminal 2004 book on design in technology, The Inmates Are Running the Asylum, Alan Cooper writes that “when engineers invent, they arrive at their solution through a succession of practical, possible steps. Because of this, their solution will always be a derivative of the old, beginning solution, which is often not good enough.” Cooper goes on to argue that interaction designers are in a unique position to break this cycle of derivative solutions by “keep[ing] a healthy suspicion of all assumptions about what cannot be done.”
Whether they’ve read Cooper’s book or not, many designers have implicitly heeded this advice and translated it into an “I design it, you build it” workflow. In many cases, this delivers the results Cooper promises: designers and developers frequently challenge one another to synthesize new ideas and novel solutions –ideas and solutions neither of them would have been able to come up with on their own.

What’s different now

With the growing need of responsive web solutions and adaptive, flexible content, there are new reasons for designers to roll up their sleeves and get into “code.” Since HTML is, at its core, a layer of description wrapped around content, working at this level helps designers think more critically about their content and about the architectural implications of that content. While considering markup won’t replace our content audit, user research, or taxonomy work any time soon, it can increasingly function as an important part of the design process.
HTML prototyping helps us discover and vet the IA step Information Architect Dan Klyn refers to as “choreography,” or the “appropriate unfolding” of content: the link between taxonomy and the interaction-level design typically represented in prototypes. When we address the architectural underpinnings of our content’s choreography early on, we ensure that we haven’t driven off course, and left our intent on the side of the road. What’s more, the benefits of HTML prototyping present themselves when we apply even the most basic of HTML’s elements. Creating a linear, semantic document calling out our navigation, header, teaser, aside, and paragraph elements forces us to think critically about how these elements relate to each other in context.

Now look at that same document on a tablet, or on a phone. Does it tell the same story? Does (should) it follow the same choreography? We might find that our content needs to break into summaries or teasers at different places in different contexts. We might also find that the navigation patterns that work on a phone are overly simplistic with regards to the desktop experience. Each of these insights forces us to think about how our content models need to adapt to accommodate new contexts. (For an in depth and practical look at creating content models, see Sara Wachter-Boettcher’s Content Everywhere.)

Why it matters

In her brilliant book Content Strategy for Mobile, Karen McGrane encourages us to stop thinking about content in terms of “pages” and to start thinking about it in terms of “packages.” A content package might contain things like long and short headlines, teasers, summaries, body copy, and pull quotes. Early HTML prototyping helps us decide which of these elements we need –and helps us think of them as pieces that combine across contexts to create a cohesive experience.
Whereas many of the excellent, commercially available prototyping tools are centered around interaction and design, early HTML prototyping is a way for us to begin to prototype our information architecture –and to test the architectural hypotheses we’ve laid out in our conceptual and taxonomy work. It also puts us in the right frame of mind to break out to the page metaphor.

In her keynote at DrupalCon in May, Karen McGrane traces the history of the page metaphor. This ubiquitous concept comes to us –surprise –from Xerox, maker of printers. Of course they would think about content in the digital age as coming together on pages: pages have been the cornerstone of their business for over a century! When we move to thinking of content as a resource that can be pulled into view when and how it is needed, we’ve already taken a huge step toward creating the responsive and adaptive information environments we need to meet the demands of the mobile ecosphere.

How to get started

So how can you get started designing with code? Both Jeff Gothelf and Stephen Hay stress the importance of sketching. I’ll reiterate that here: although our goal is to eventually end up in code, sketching out your rough ideas before diving into markup will keep you from committing to mediocre ideas you’re reluctant to change because they’re already saved to disk.
Use pen and paper or a whiteboard to work out a hypothesis and then write your markup to match. Does it work with your content? Check it out on mobile, on a tablet. Revise and refine. Consider how your content needs to adapt to convey the same concepts in different contexts.

There’s no way around the fact that you will need to understand the basic elements of HTML and CSS. Fortunately, these are not overly complicated and online resources abound. HTML alone allows you to author structured content in a semantically correct way. CSS (with help from media queries) allows you to shape the visual hierarchy of content and adjust it to different contexts.
If you’re new to HTML and CSS, learn a little bit at a time –and fake what you can’t build. You don’t need to have a fully functional AJAX calls or form validation in order to gain insight. Stephen Hay suggests capturing and printing screenshots to show to stakeholders early in the prototyping process. This way you can show exactly the ideas you want to convey without risking stakeholders getting caught up in the fact that a button doesn’t work, or links aren’t yet connected to their destinations.
Finally, allow your process to grow and develop over time. It will. We may never strive –or want –to be standards-compliant, cross-browser, front-end rockstars, but with a little bit of knowledge, practice, and experience, HTML prototyping can become a valuable addition to our content strategy and information architecture toolkit.

The post Designing with Code appeared first on UX Booth.

July 15 2013


How to Make Data Visualization Better with Gestalt Laws

How to Make Data Visualization Better with Gestalt Laws

People love order. We love to make sense of the world around us.

The human mind’s affinity for making sense of the objects it sees can be explained in a theory called Gestalt psychology. Gestalt psychology, also referred to gestaltism, is a set of laws that accounts for how we perceive or intuit patterns and conclusions from the things we see.

These laws can help designers produce better designs. For instance:

In this guide, we will talk about how to apply the principles of Gestalt to create better charts, graphs, and data visualization graphics.

For broader implementation tips of Gestalt laws, please read Gestalt Principles Applied in Design.


Gestalt laws originate from the field of psychology. Today, however, this set of laws finds relevance in a multitude of disciplines and industries like design, linguistics, musicology, architecture, visual communication, and more.

These laws provide us a framework for explaining how human perception works.

Understanding and applying these laws within the scope of charting and data visualization can help our users identify patterns that matter, quickly and efficiently.

None of the Gestalt laws work in isolation, and in any given scenario, you can find the interplay of two or more of these laws.

Let us cover some of the Gestalt laws that are relevant to enhancing data visualization graphics.

Gestalt Law of Prägnanz

The law of Prägnanz is the central law of Gestalt.

Prägnanz is a German word that means "pithiness." Pithiness is the act of being concise and full of meaning/substance.

The law of Prägnanz states that the human brain loves simplicity and it tends to process simple patterns — patterns that are regular, even, and orderly — faster than patterns that are more complex.

Let’s say you want to identify the top performer of the quarter from a "Sales by Salesperson" chart. Look below to see which of the two charts is easier to use: The one in which the data is disorganized (left) or the chart which has ordered the data from highest sales to lowest (right):

Lesson: Arrange data logically and systematically at every opportunity.

Gestalt Law of Continuity

The law of continuity states that our eyes instinctively group things that are aligned with each other.

Let’s go back to our "Sales by Salesperson" chart example.

In the left chart below, there are abrupt directional changes.

In the chart on the right below, the eyes follow a continuous path; it makes the whole chart more readable because of the continuous downward direction.

Lesson: Align elements linearly to facilitate comparison of different items that are in a related grouping.

Gestalt Law of Similarity

This Gestalt law theorizes that objects with similar characteristics — similar colors, similar shapes, similar sizes, similar orientation, etc. — are perceived as a group.

Let’s see how we can apply this to our "Sales by Salesperson" chart example.

We can find the top performer using the first chart easily because we used the laws of Prägnanz and Continuity.

However, we can improve the design a bit more by using the Gestalt law of Similarity.

In the chart on the right, we have made the bar graphs all the same color — they are all the same light blue color.

Giving them the same color removes the additional cognitive load imposed by the disruptive use of varying colors in the chart on the left, and makes it much easier for us to compare and find points of interest.

Notice how the multi-level pie chart below uses color to group related entities and differentiate them from other groupings:

Lesson: Use similar characteristics and attributes (color, size, shape, etc.) to establish relationships between objects and to reinforce groupings.

Gestalt Law of Focal Point

What’s the inverse of the law of Similarity? The law of Focal Point. The law of Focal Point states that in a visual presentation, distinctive objects create a focal point.

The focal point stands apart from other objects, draws the user’s attention, and persuades him to delve further into the presentation with the focal point as the starting point of the exploration.

Let’s again go back to our "Sales by Salesperson" chart example. (You are probably bored of this chart by now!)

Say that, for some reason, you want James (a salesperson represented in our chart) to be highlighted.

Perhaps you want to highlight James’s performance because he is the subject of conversation in your staff meeting. Or because, compared to the other salespeople in our chart, he’s doing incredibly well because he just started a month ago and he’s already our top 3 performer. (Good job James!)

By changing James’s bar graph color, see how your eyes are drawn to his bar graph immediately, even though there are two other top-performers prior to his bar graph:

In the chart on the right, the bar graph for James stands out due to its distinctive color — it makes James’s bar graph the focal point of the chart.

Lesson: Use the art of distinction to highlight and create a focal point in your graphs and charts.

Gestalt Law of Proximity

This law states that objects placed close to one another are perceived as a group. We easily tend to make comparisons and look for similarities in such groups. Objects that are further apart are seen as unrelated or less related.

Let us look at the law of Proximity in action. In the following chart, the sales of "North", "South", "East", and "West" regions form 4 distinct groups: "Quarter 1", "Quarter 2", "Quarter 3", and "Quarter 4".

It is quite easy to compare the sales of each region within a quarter (which is our grouping according to the law of Proximity) due to their proximity with one another.

But try comparing the sales of the "North" region (blue bar graphs) across the 4 quarters. Difficult isn’t it?

Let’s revise our chart by employing the law of Proximity:

Now try to find and compare the sales of the "North" region (and other regions) across the quarters using the revised chart. It should now be easier.

Lesson: Know what your chart wants to focus on. Keep those data points close to each other by grouping them according to your established information priority.

Gestalt Law of Isomorphic Correspondence

This law states that people interpret and respond to images based on their past experiences. This law, for instance, explains why sticking to well-established user interface conventions, like blue-and-underlined hyperlinks in web pages, is effective.

One application of this law in the realm of data visualization is in the selection of colors for your charts.

For example, many cultures and nations associate the color of red with "danger" or "stop", and green with "growth" or "nature".

When creating charts that have positive/negative connotations (e.g. profit/loss charts and revenue charts), you can color code your chart accordingly — green for positive and red for negative. (This is a popular charting convention in the business world that people are accustomed to.)

In the "Total Revenue" graph below notice how — due to the colors used for the bar graphs — the user quickly gets the idea that the revenues were below the target revenue for two months with minimal inspection of the graph.

Lesson: Keep in mind your users and their preconceived notions and past experiences; stick to popular conventions and best practices if possible.

Gestalt Law of Figure/Ground

This law states that objects of a graphic either are perceived as figures (distinct elements of focus) or as ground (the background on which the figures rest).

Foreground objects are important. Background objects are less important. Web designers should already be familiar with the concept of the Figure/Ground law.

The more the contrast between the figure and the ground, the easier it will be to distinguish between the two types of objects.

Below, which chart do you find more readable?

Due to the low contrast between the figure and background in the chart on the left, there is an additional cognitive load. Increasing the contrast (as in the chart on the right), improves readability.

Lesson: Ensure there is enough contrast between your figures and ground.

Gestalt Law of Common Fate

This law states that when lines or shapes move together in the same direction, they create a sense of unity and indicate a relationship. They share a common fate.

On the other hand, when lines or shapes move in different directions, they are perceived as unrelated or less related.

Below, in the chart on the left, the data plot for "Product A" and "Product B" appear to move together and facilitate a grouping. In the chart on the right, the plot for "Product C" is moving in a different direction so "Product C" is thus perceived as different and unrelated.

Lesson: Use direction and/or movement to establish or negate relationships.


To sum up the lessons we can derive from these Gestalt laws:

  1. Law of Prägnanz: Keep it simple. Arrange data logically wherever possible.
  2. Law of Continuity: Arrange objects in a line to facilitate grouping and comparison.
  3. Law of Similarity: Use similar characteristics (color, size, shape, etc.) to establish relationships and to encourage groupings of objects.
  4. Law of Focal Point: Use distinctive characteristics (like a different color or a different shape) to highlight and create focal points.
  5. Law of Proximity: Know what your chart’s information priority is, and then create groupings through proximity to support that priority.
  6. Law of Isomorphic Correspondence: Keep in mind your user and their preconceived notions and experiences. Stick to well-established conventions and best practices.
  7. Law of Figure/Ground: Ensure there is enough contrast between your foreground and background so that charts and graphs are more legible.
  8. Law of Common Fate: Use direction and/or movement to establish or negate relationships.

Learn More about Applying Gestalt to Design

Note: Charts and graphs in this guide were created using FusionCharts Suite XT.

Related Content

About the Authors

Udhaya Kumar Padmanabhan heads the UX and Communications initiatives at FusionCharts. He is an invited member of The Society of Industry Leaders (SIL), founding member of ACMSIGRAPH Bangalore and Local Ambassador of UXNet, a global network of UX pros. Connect with him on LinkedIn.

Shilpi Choudhury is a writer, blogger, design enthusiast, and an amateur actor. She writes for FusionCharts. Get in touch with her through LinkedIn.

The post How to Make Data Visualization Better with Gestalt Laws appeared first on Six Revisions.

Tags: Usability

July 12 2013


Designing the Perfect Hyperlink — It’s Not as Simple as You Think

Designing the Perfect Hyperlink — It's Not as Simple as You Think

Hyperlinks are the glue that holds the Web together. Without links, the Web would be a very different place, that’s if it would exist at all. Using a simple HTML element — the <a> element –you can create a bond with any other web page on the Internet. Hyperlinks are magical.

Hyperlinks are fundamental to the Web. They are always just there. Maybe that’s why many site owners and web designers don’t pay them the attention they deserve.

The design of the HTML <a> element is crucial in the user’s reading experience; we should take enough time to design them well.

I’m about to share with you some hyperlink design tips that will lead to a better user experience, enhanced web accessibility, and maybe even bring improvements to your search engine rankings.

Hyperlinks Need to Look Like Hyperlinks

All your hyperlinks need to stand out and clearly say to your readers, "Hey I’m a link. You can click on me."

Hyperlinks should appear interactable.

As web designers, we like to innovate and experiment with different navigation techniques, but sticking with certain design conventions is important.

One of the things that need to remain conventional is our hyperlinks.

According to a study in link readability, the regular Web user sees blue-and-underlined text as links.

Blue and underlined is a good standard to stick to, for no other reason than it’s what we Internet users have been acclimatized ourselves to.

Examples of Hyperlink Designs

Below you will see 3 different hyperlink designs. They are from top newspaper websites.

On the surface, these are all good hyperlink designs. They are some shade of blue. They stand out amongst the surrounding body of text.

But why is The New York Times hyperlink design better than the other two examples?

Allow me to explain.

A Simple Way to Test Your Hyperlink Design

Let me show you an easy method of testing if your hyperlinks clearly stand out from its surroundings.

If you blur and remove the color from the design, you will see what stands out if someone was quickly skimming or reading the page or if someone has particular problems with their vision such as low-vision or color blindness. (Read more about color testing tools.)

You can do this by:

Modifying your CSS property values for <a> and <p> elements to blur them and remove their colors

Taking a screenshot and editing it in Photoshop

  1. Image > Adjustments > Desaturate
  2. And then Filter > Blur > Gaussian Blur

Let’s look back to our earlier examples, but this time we are going to view them when they are blurred and in black and white.

Here is The Guardian’s; you can see that the hyperlink is hard to spot:

BBC uses a bold font weight to create emphasis on their hyperlinks, which is marginally better than The Guardian’s hyperlink design because it at least stands out a bit more.

With The NY Times, it’s still possible to work out where the link is.

The Problem with Underlining Links

Now here’s where it gets tricky.

Here is where hyperlink design gets a bit unsimple.

Here is where our convention of underlining links fail.

There is a study that shows that readability decreases when we underline the text in our hyperlinks.

The study says that underlined links have "seriously underestimated effects on the usability of Web pages."

The study reports that our current convention of underlining hyperlinks "can significantly reduce the readability of the text."

The researchers go as far as saying, "alternatives should be carefully considered for the design of future Web browsers."

Essentially, the researchers are saying that our current conventions for hyperlinks — underlined text — should be changed systemically.

The reason why underlined hyperlinks reduces legibility is that certain characters that go below the base line — characters with descenders extending below the underline such as p, g,  j, and q — are getting affected by the text-decoration: underline CSS property value.

Here is the default style of hyperlinks in the Google Chrome web browser (version 28):

What’s the Solution to This Readability Issue?

We can fix this readability issue ourselves. We don’t have to wait for a change in the way web browsers render underlined text by default.

How? We can use the CSS border-bottom property instead of the CSS text-decoration property to underline our hyperlink elements.

Using the border-bottom property can place the underline a few pixels below the affected characters, making the hyperlink easier to read.

Here is the CSS used for the image above:

a {
	text-decoration: none;
	padding-bottom: 3px;
	border-bottom: 1px solid blue;

Even more powerful than just fixing a readability issue, we can also control the underline’s style independently from the hyperlink text color, thereby decoupling these two components of a hyperlink.

For example, we can reduce the hyperlink underline’s distinctiveness to make the text more legible, or we can make it more distinctive to make the entire hyperlink design really stand out.

For the purpose of illustration, I changed the underline color just a little bit, making it a lighter shade of blue:


a {
	text-decoration: none;
	padding-bottom: 1px;
	border-bottom: 1px solid #8d8df3;

Make Hyperlink Text Longer

This next concept I’m going to discuss goes a bit into content strategy territory (which is a big part of web design process).

Some of you might dislike this suggestion because it deals with the content creation process, and some of you might not have control over that part of the web development process.

The basis for this next tip I’m going to share is Fitts’s Law.

The concept of Fitts’s Law is simple. The law states that the larger something is, the easier it is to see and interact with.

That makes sense, especially in the context of touchscreen devices where the size of your elements matter, where the input device (our fingers) is less precise than a mouse pointer.

Using a finger to click on a hyperlink can be a pain; often times you will have to zoom in for small links, adding an additional barrier towards users getting the action they desire (which is to interact with the hyperlink).

But there is only so much we can do with the style of our links.

We can bold them, underline them, change their color.

How about making them bigger by changing their font size?

If we change the <a> element’s font-size property, it affects the reading flow, and can affect the consistency of our line-heights.

Look at how the continuity of the reading experience is disrupted by increasing the font size of hyperlinks:

So we can’t expand them vertically. We will need to expand them horizontally.

User-friendly SEO Benefits

Having longer anchor text is a user-friendly SEO tactic. That is, hyperlinks with longer link titles is better for users according to Fitts’s Law, but it also has the nice side benefit of being better for search engine rankings.

Anchor text should be descriptive and should tell the user and search engines what the page you are linking to is about, according to Google’s Search Engine Starter Guide.

Say you were writing about walls.

Compare the two ways a hyperlink is used in these sentences below:

"I would like to talk about advanced wall-building techniques. Click here to learn how to build a basic wall because what I will talk about is beyond the basics."


"I would like to talk about advanced wall-building techniques. You will need to learn how to build a basic wall because what I will talk about is beyond the basics."

Not only is the second version better for our user, but it is additionally better for search engines too because there is more context than the anchor text that just says "here".

Should Hyperlinks be Blue?

According to a study by Google blue links got more clicks than greenish-blue links.

The study I referenced earlier about underlined text readability likewise affirms that Web users immediately recognize links when they are blue and underlined.

However, in my opinion, not all hyperlinks absolutely need to be blue.

The important thing about hyperlink design is that your links are obviously links.

If you can achieve that with a different color other than the conventional blue color, go for it.

Microsoft Development Network (MSDN) supports this concept.

The fundamental guideline about designing hyperlinks "is users must be able to recognize links by visual inspection alone—they shouldn’t have to hover over an object or click it to determine if it is a link," according to their link design pattern guideline. They didn’t say anything about links needing to be blue.

There are some cases where blue-colored links aren’t the best option.

For example, if the background color makes it hard to read blue links, then usability and readability triumphs over the standard blue link convention.

Always do what is best for the user, even if that means breaking conventions.


Here are the big ideas:

  1. Designing hyperlinks should be well-thought-out.
  2. Blurring and removing color from the design is a quick way of demonstrating how well your links stand out.
  3. Underlined text is a strong and familiar convention. The problem with underlining text, though, is that readability decreases. The solution is to use CSS to remedy the issue.
  4. Using longer descriptive anchor text can improve usability (Fitts’s Law), with the added benefit of being better for search engines.
  5. The one thing that is important in the design of hyperlinks is this: hyperlinks should obviously look like hyperlinks.

Related Content

About the Author

John Macpherson works in Design and Marketing. He works at Media Surgery, a small web design and marketing agency based in the beautiful Aberdeen, Scotland. Connect with John on Twitter and Google+.

The post Designing the Perfect Hyperlink — It’s Not as Simple as You Think appeared first on Six Revisions.

Tags: Usability

July 02 2013


The Art of Guerilla Usability Testing

Guerrilla usability testing is a powerful technique. Designer Martin Belam describes it as “the art of pouncing on lone people in cafes and public spaces, [then] quickly filming them whilst they use a website for a couple of minutes.” Let’s skip the pouncing part and instead focus on its subtleties, including how to obtain and share feedback with our team.

I recently worked on a quickstart project in which my team was asked to build a responsive website in a short amount of time. We were given very little time to code (let alone conduct research) for the endeavor, yet by employing guerilla usability testing along the way we collected feedback on the brand position. Eventually, we aligned our designs to both customer expectations and business goals.

Once a week throughout the project, we tested different kinds of prototypes to bring the business’s ideas to life. For example, while mid-development, we sketched a mobile version of the site on index cards and did a quick assessment. This revealed navigational problems (which guided us to rethink a key point in the customer journey) and even ended up shaping a bit of the brand’s media material. What’s more, guerilla usability testing opened our stakeholders’ eyes so that they challenged their own, innate assumptions about “the user.”

We iterated through our design ideas using lo-fi techniques like paper prototyping. Sketch by Chris Cheshire.

The bottom line? Guerilla usability testing presented itself as an easy-to-perform technique for refining the user experience. It helped us validate (and invalidate) critical assumptions at cheap cost and with rapid speed.

Breaking it down

It’s hard to see the magic that guerrilla usability testing affords and not want in on the action, right? Here are some basic questions to consider before getting started:

  1. What shall we test?
  2. Where will we test?
  3. With whom will we test? and, of course,
  4. How will we test?

What shall we test?

One of the best parts about this kind of testing is that it can be done with almost anything, from concepts drawn on the back of napkins to fully functioning prototypes. Steve Krug recommends testing things earlier than we think we should and I agree – get out of the building as soon as possible.

Test what the product could be so as to shape what the product should be. Even loosely defined UI sketches can be a great way to evaluate a future product. In fact, recent research shows that lower-fidelity prototypes can be more valuable concerning both high and low-level user interactions.

Where do we test?

Where we conduct tests affects how we perform and document our work. For instance, if we’re testing a new mobile app for a retail chain, we might go to the store itself and walk the aisles; if we’re working on “general” office software, we might test it with coworkers in a different part of the office; etc. The point is: let context drive the work.

With whom do we test?

When designing for the mass market, it’s easy enough to ask friendly looking strangers if they have a couple minutes to spare. Public spaces and shopping centers present some of the best places to do this on account of the sheer amount of foot traffic they receive (as well the relaxed nature of the environment). With more specific user sets, however, it’s useful to target subjects based on their context (see above): a mixture of location and behavior.

Coffeeshops are great because you’ll often find test subjects from varying cultural backgrounds and different age ranges.

How do we test?

Testing is fairly straightforward: have participants talk aloud as they perform tasks. Use the think-aloud protocol to test overall product comprehension rather than basic task completion. The key is to watch customers fiddle with a product and silently evaluate its usability. As Sarah Harrison explains, “Observing users is like flossing–people know they’re supposed to do it every day, but they don’t. So just do it. It’s not a big deal.”

Always start with open-ended, non-leading questions like:

  1. What do you make of this?
  2. What would you do here?
  3. How would you do [that]?

By answering these kinds of questions, participants tell a loose story in which they explain how they perceive a product. Along the way, we can generate ideas for how to improve things in the next iteration.

Employing the technique

Guerrilla usability testing is very much about adapting to the situation. That said, here are some helpful hints that I find consistently work in different international contexts:

  1. Beware the implicit bias. While coffeeshops are a great place to find test participants, focusing on people who frequent them introduces bias to our work. Simply acknowledging this implicit bias can help designers neutralise subjective experiences and account for individual differences. Remember to target different genders and be fair in who you approach.
  2. Explain what’s going on. Designers should be honest about who we are, why we’re testing, and what sort of feedback we’re looking to receive. Oftentimes, it’s best to do this with a release form, so that people are fully aware of the implications of their participation – like if it’s going to just be used internally versus shared globally at conferences. These sort of release forms, while tedious to carry around, help establish trust.
  3. Be ethical. Of course, being honest doesn’t mean we need to be fully transparent. Sometimes it’s useful to skip certain information, like if we worked on the product they’re testing. Alternatively, we might tell white lies about the purpose of a study. Just make sure to always tell the truth at the end of each session: trust is essential to successful collaboration.
  4. Make it casual. Lighten up tests by offering cups of coffee and/or meals in exchange for people’s time. Standing in line or ordering with a test subject is a great opportunity to ask questions about their lifestyle and get a better feel for how a test might go.
  5. Be participatory. Break down barriers by getting people involved: ask them to draw – on a napkin or piece of notebook paper, for example – what they might expect to see on the third or fourth screen of a UI flow. This doesn’t have to be a full-blown user interface necessarily, just a rough concept of what’s in their head. You never know what you’ll learn by fostering imagination.
  6. Don’t lead participants. When you sense confusion, ask people what’s going through their head. Open them up by prodding, saying “I don’t know. What do you think?”. People in testing situations often can feel as though they are being tested (as opposed to the product itself), and therefore can start to apologise or shut down.
  7. Keep your eyes peeled. It’s important to encapsulate passing thoughts for later analysis. Ethnographic observation is one good way to capture what you were thinking of during tests. Don’t get too hung up about formalised notes though, most of the time your scribbles will work just fine. It’s about triggering memories, not showing it off at an academic conference.
  8. Capture the feedback. A key part of any testing process is capturing what we’ve learned. While the way in which we do this is definitely a personal choice, there are a few preferred tools available: apps like Silverback or UX Recorder collect screen activity along with a test subject’s facial reaction. Other researchers build their own mobile rigs. The important part to remember here is to use tools that fit your future sharing needs.
  9. Be a timecop. Remember, this isn’t a usability lab with paid users. Be mindful of how much time you spend with test subjects and always remind them that they can leave at any point during the test. The last thing you’d want is a grumpy user skewing your feedback.

Sharing the feedback

Conducting the tests is only half the battle, of course. To deliver compelling and relevant results from guerilla usability tests, designers need to strategically decide how we’ll share our findings with our colleagues.

When analysing and preparing captured feedback, always consider your audience. The best feedback is the kind that understands stakeholders and kickstarts important conversations between them. For example, developers who need to evaluate bugs will have different needs than executives who want to prioritise new features.

Next, when delivering feedback, align it with your audience’s expectations. Try editing clips in iMovie or making slides in PowerPoint. Your co-workers are probably as busy as you, so an edited down “trailer” that highlights relevant results or a bullet-point summary along with powerful quotes is always a good method to keep people listening.

Go guerilla

At the end of the day, guerilla usability testing comes in many forms. There’s no perfection to the art. It is unashamedly and unapologetically impromptu. Consider making up your own approach as you go: learn by doing.

Note: Thanks to Andrew for providing lots of feedback on early drafts of this article.

Related reading

The post The Art of Guerilla Usability Testing appeared first on UX Booth.

June 24 2013


5 Usability Mistakes You Shouldn’t Make

Advertise here with BSA

5 Usability Mistakes You Shouldn't Make

No web designer sets out to create a terrible user experience.

And a terrible user experience usually isn’t just one thing — it’s dozens of tiny usability mistakes repeated all throughout the user interface that coalesce into one big, frustrating experience.

Let’s go over some usability mistakes that will frustrate your users.

1. Neglecting the Design of Blank Slates

The blank slate is what a screen looks like when a user hasn’t added any data yet, or when a user deletes all of the data related to that screen.

Let’s look at an example of a blank slate — FreshBook’s item estimates screen:

Blank slate example on FreshBooks

Notice how they have placed some simple elements in the blank slate that greatly enhances the usability of the screen. Namely:

  • Prominent description: At the top of the screen, there’s a distinct description of what the screen is
  • Actionable components: They have three pathways that allow users to take action and get started immediately
  • Blank slate indicator: To avoid confusion, there’s a statement saying that there are no items to display in the screen

Let’s take out these blank slate design components to see how powerful they are in terms of usability:

Imagine yourself as a first-time user presented with the screen above. You’re stuck. You don’t know what to do in this screen, and there are no pathways for you to learn what this screen is for (except creating a new item, but you won’t be sure what you’ll be creating and what the outcome will be).

What should you show on the blank slate?

At the bare minimum, you should have a blank slate indicator. "No invoices found", "No posts scheduled yet", "No photos to display", and so forth.

But, to me, the bare minimum of having a blank slate indicator is not good enough.

You want to teach new users how to use your software at every possible chance. And your perfect opportunity for teaching them are in these blank slates.

2. Unclear Button Labels

After you fill out a form to create an account on a web app, what should the button at the end of it say?

It should intuitively say "Create Account."

The label on actionable interface elements such as a web button should always tie back to what it will do for the user. These interface elements shouldn’t be unclear, questionable, ambiguous. They should be as obvious as possible.

Let me show you how subtle this idea is.

Look at the image below, it has an unclear button label.

You might be saying, "How is that unclear? It obviously states the purpose of the button: Contact Us."

It’s unclear because the result of pressing the button is not obvious.

  • Will it bring me to a new web page, such as a Contact Us page?
  • Will it reveal a modal window with a web form where I can type a message?
  • Will it open up a live chat widget where I can talk to a real person?

In fact, it’s none of the above.

What it does is it opens up your default email client:

What’s wrong about that? Here are some usability and user experience issues:

  • It’s confusing, I didn’t expect that my email client would open
  • What if I haven’t set my default email client to the one I use yet, and it opens up the operating system’s default email client (like MS Outlook)? That just wasted me some time.
  • What if I was using someone else’s computer, or I was at work using my company’s computer and it wasn’t set to my preferences yet?
  • What if I didn’t know websites could open my email client? It would be alarming if the email client just opened after clicking a button. It would make me fearful.

The resultant behavior of the button is not clear. If the button was labeled with "Send us an email" then having my email client open up wouldn’t be as surprising.

As a user, I shouldn’t have to take the time to look at the web page to derive the context of what a button will do for me. Why not just spell it out for me? If a button says "Save," I’m forced to look at the rest of the page to figure out what it is saving. But if it says "Save Post" then it’s immediately clear.

When setting the text of your web buttons, just ask this question to help you come up with good labels: What will the outcome be after pressing this button?

Here are a few examples of clear button labels:

MailChimp signup form

"Create new timer" button on Ballpark

GoGardless signup form

Coming up with good button labels is a simple and quick affair that some of us tend to neglect.

Having clear button labels greatly enhances usability.

3. Making Users Wait Without Giving Them Any Feedback

I hate to wait. Especially if it’s for an unknown amount of time.

If we were driving down a road together — and you, the driver of our car — pulled over to the side of the road and sat in silence for a minute without telling me why, I’d be annoyed at you.

But, if you say, "Hey, I need to pull over for a second because I’m sleepy and I need a short break," I would completely understand and wait patiently.

We make users wait all the time in our websites and web applications.

We make them wait whenever we’re updating a web page’s content asynchronously, whenever we’re opening a modal window with a very large high-res photo, or when our web server suddenly experiences reduced performance.

Making users wait is sometimes unavoidable.

But making users wait — without telling them why — is never unavoidable.

Any time you’re loading data, updating some content, or otherwise possibly making the user wait, tell them.

Display a progress bar or spinning animation along with some text of what’s happening.

Camera Plus uploading progress bar

Airbnb loading new content

If your site is experiencing uptime issues, tell your users what’s going on:

Store notice from Apple

People will be much more patient with you if they know what is going on.

4. Losing User Inputs in Web Forms

One time, I signed up for a web application. The first thing it wanted me to do after signing in was to fill out my profile information. That’s fine.

So I selected a photo, filled out one or two other input fields, and clicked a button to submit my info.

I was surprised when I was brought back to the same page, telling me that more fields were required.

But the real issue is that the photo I selected was gone — I needed to select the photo again and upload it.

This brings me to the cardinal rule of web form validation: Whatever you do, do not lose my data after validating my inputs.

Think of how frustrated your user would be if the form you’re asking her to fill out took a lot of time and, because she just forgot to fill out an input field, she now has to start over.

5. Clickable Areas Are Smaller Than They Appear to Be

It’s important to make sure that elements that appear to be clickable should be clickable.

Take a look at the image below to see what I mean:

A reasonable person would assume that the entire tab is clickable, but that’s not the case in the above example. Only the text is clickable. Not the tab. Yes, I know it is atrocious. What makes it worse is that it is a common mistake I see.

Why does this happen? It happens because most web designers create tabbed navigation menus using unordered lists (<ul>). So the markup looks like this:

  <li><a href="">Link 1</a></li>
  <li><a href="">Link 2</a></li>
  <li><a href="">Link 3</a></li>

That is good.

The mistake happens when they add all the style properties (particularly the padding property) to the <li> elements rather than to the <a> elements (where the style properties belong).

Since the <a> element is the only part that is clickable, we want it to take up as much space as possible.

This means that for this style of navigation nearly all the CSS should be applied to the nested <a> elements.

Also, when styling links (without backgrounds or borders) use padding rather than margin. Padding will give you space between elements as margin does, but will keep the clickable area nice and large.

Quick Fixes

Most of these are really simple things to fix, so if you are making any of these mistakes, go fix them now.

If you made it through this article unscathed, congratulations! Just make sure to keep looking at your user interfaces with a critical eye to catch any other usability issues.

Your users will thank you.

Related Content

About the Author

Nathan Barry is the author of Designing Web Applications, a complete guide to designing beautiful, easy-to-use web software. He also writes about design and business at

Tags: Usability

April 26 2013


Web Developer Checklist and Userium: 2 Useful Helpers for Oblivious Web Developers


I'll admit, you need not be oblivious to benefit from the two services I am about to introduce you to. It is not easy to keep proper track of all important aspects of clean and modern web design. I'm sure you will have created your own notes, hints, checklists as your experience developed throughout the years. In my case only the painful experiences made me jot things down for future reference. Today's article shows you Userium and Web Developer Checklist. The two can help developers with lesser experience, yet still be of value to more experienced ones who declare themselves a notes grouch.

March 21 2013


A Chat with Bill Gribbons, Part 2

Design and education are both hot-button topics these days. So when the opportunity to interview Bill Gribbons – head of the Master’s Program in Human Factors and Information Design at Bentley University – presented itself, I didn’t hesitate to take part. Earlier this week, we published the first installment in my two-part interview series with Bill. The second part, in which I ask questions more directly related to design education, appears below. Enjoy!

Students say you’re a professor with “list of people” to whom you want them to attend. Is that true? Who comprises that list?
More or less! I’ve always admired Don Norman. I knew Don before he became a very successful consultant, and he’s one of the greatest cognitive scientists of the 20th Century. He’s a brilliant man who started in the academic world as a researcher.

Dan Arielly also makes my list. Are you familiar with his book, Predictably Irrational? He’s down at Duke, and he’s lectured at MIT as a visiting professor.

And Malcolm Gladwell, of course.

Another guy, Nicholas A. Christakis wrote a book called Connected. In it, Christakis gives a full history of not just why social networks exist, but how we create communities, societies, and cultures on top of them. It’s all centered around meaning and our desire to belong.

Gladwell’s critics say he offers “pre-packaged common sense.” But isn’t that just good information design? He makes things more accessible, which –
– that’s exactly what I was going to say. And there is a brilliance in that. Anybody who criticizes him is just jealous they didn’t think of it before.
It also gets back to a kind of “universal design thinking:” What he says may be commonsensical, but nobody has articulated it as well. It’s as if, once an author tells a story the “right” way, it enables a broader, shared understanding?
I think that’s the brilliance of Arielly, too. He takes something like behavioral economics – something that’s about as dry as it could possibly be – and makes it accessible. He even made it fun! And I don’t think he cheapened it, either. He didn’t compromise the integrity of it; he just made it accessible.

And is it Stephen Johnson who wrote Where Good Ideas Come From? That’s a big one as well. He looks at design and innovation historically.

Online learning sites such as Code Academy and Udemy threaten the business model of universities and graduate programs everywhere. What do you make of those?
I believe that about 90% of higher education will eventually migrate online. The asynchronous nature of it is a big win.

Unfortunately what students lose when they study online is that “connection,” that sense of community. Students learn as much – or more – from each other than they do from books. The modern university’s job is to facilitate connection. You can have your blogs and such, but the sense of community around them is simply not the same.

That’s ultimately why we have two campuses, one here and one in San Francisco: We want students to feel included and involved regardless of where they study. Next year we’re bringing thought leaders such as Nancy Dickenson (former head of UX design at eBay) to the West Coast. That way it doesn’t matter where students decide to study; they’ll join a community with a shared purpose.

Many graduate programs partner with various corporations in order to expose students to real-world problems. How do you determine (1) which problems to share with students, (2) which problems to send to Bentley’s Design and Usability Center, and (3) which problems to tackle yourself?
So, we’ve actually had clients on the West Coast for years who have been partnering virtually with our students here. Our job when engaging potential clients is to triage, to figure out the nature of their problem. If their problem represents a design exercise then we partner them with a design class. If it’s research, we dig deeper: Is it a problem that’s out there that’s failed and needs forensics or is it something more basic?

Nancy teaches a leadership class, so there we partner with companies in the valley who are looking at organizational issues. She and her students work within companies who are struggling with integrating user-centered design into their company culture.

But at what point does the line dissolve? Every interesting, exciting project I hear about has an element of the unknown. I recently found myself offering “business consulting” even though I myself identify as an interaction designer, for example. At what point do students work for pay and at what point should students pay to work (or “learn”)?
I think there are times when you can work from home I think there’re times when you need to be out there observing and learning. It’s got to be a mixture.

Of course you’re going to have educational institutions that will dig their heels in and “be brick and mortar” – that’s all they know. I also think they’re going to be other places that will go completely online. Students will have to find the work on their own time. Ultimately, though, the goal – the value – is in community: learning from and contributing to it.

Universities have to preserve community. And Bentley’s been pretty successful in this regard: even our students who have graduated from the program come back to participate. So we’re constantly creating workshops outside of the classroom, and graduates of the program frequently return to give back.

Then how do you price the program? Do you price it based on what it takes to run the program – the bare minimum – or do you consider the value you add by teaching a philosophy or maintaining the community?
Our tuition and fees are pretty much based on the institution’s price.

When alumni come back to the program, it’s free for them to participate in the workshops. But nothing in this world is “free;” alumni pay for it with their time. They often hire other students or offer internships. They’re inevitably building reputations. So while it’s not free, it works for everybody. So long as everybody stays together.

I sort of asked you “Why San Francisco” once before, but my guess now is that you’ll say “the more locations we have to facilitate community, the better.” Is that correct?
Yeah. What I’d like to do if we’re around long enough would be to create a hub in Europe somewhere. There’s a lot of interesting, different kind of thinking going on in Europe around this.
I’m interested in the difference between, say, what you guys and what a company such as IDEO offers a client who is looking to build a product. Is a consultancy’s model that different from a school’s?
IDEO is sitting at the top. It’s hard to suggest anyone would compete with them, really, because of this. They really nailed it. They go into Proctor and Gamble and work with the whole organization, you know?

So I think you carve out wherever there’s a market opportunity. We’re not working at that high of a level. Most of Bentley’s work is product related. Sometimes, if we’re contacted early on we might build out the research that will fuel many products, so sometimes the research spreads across many products. On the whole, though, our work tends to be smaller in scale than someone like IDEO.

Final question, then. This one is a bit more broad. User experience fits into an interesting niche between qualitative and quantitative data. Your team is known to be data-driven; how do you measure customer experience?
I think that’s a big shift in the field. We’ve historically been very qualitative, and we’re becoming increasingly quantitative.

Qualitative data is always going to be there. And, particularly on the innovation front, field research and interviews give us the raw materials to gain the insights that fuel innovation. You can analyze analytics all day long and it’s never going to tell you where people are coming from. You’ll never innovate out of that.

Remote methods of data gathering – what we’re doing today looking at very large data sets versus what we could do in the usability lab ten years ago – provide a different kind of insight. Bill Albert (who runs the Design and Usability center) and Tom Tullis (the VP of user experience at Fidelity) have a book called Measuring the User Experience. They teach in the program as well.

We’re seeing more and more of our students taking statistics, too. This is a cultural shift. Many students have traditionally come into the program more qualitatively oriented. So this is changing the profile and the makeup of the profession. I love students that come along saying “I love math” because I think there’s a place for both.

So do you, personally, lean more qualitative or quantitative?
I’m more qualitative. That’s the part I love. And that’s what I tell my students: at the end of the day, do what you love. If you love getting insights from data, go quantitative. Myself, I like the connecting to people. It makes me happy.

That’s why I love teaching, and you shouldn’t do something that’s not natural for you. You won’t be happy, and you won’t be good at it. The good thing about this field is it gives you the opportunity to do both.

Around here the clock struck 1pm, marking the end of our time together. Although I thanked him profusely for his time and attention then, I can’t help but reiterate the sentiment: Thanks so much, Bill, for sharing your wisdom with us.

Readers, what do you make of the future of design education? Do you get everything you need from books, blogs, eLearning sites, universities, and/or conferences? How do you stay current? And what advice do you offer those looking to learn? Sound off in the comments, below.

The post A Chat with Bill Gribbons, Part 2 appeared first on UX Booth.

March 19 2013


A Chat with Bill Gribbons, Part 1

When it comes to establishing oneself as a design professional, few issues are more contentious than the role of higher education. Some believe it’s necessary. Others suggest alternate routes. The truth is, of course, that the value of a degree depends on what a student’s looking for. When combined with hands-on experience, masters programs can help students find their way in an otherwise vast, inaccessible profession. What’s more, these programs themselves potentially raise the bar for the future of professional education. And who wouldn’t want that?

So, there I was: my cab had just dropped me off in front of Bentley’s Campus just outside Cambridge, MA. The air was crisp and chill. The sun was high. Lots of students were hurriedly making their way to lunch.

I was soon greeted by a bright smile from a calm-yet-busy-looking lady named Joanna. She led me through a few quaint, old, New-England-style buildings where I eventually met Bill Gribbons, the head of the Master’s Program in Human Factors and Information Design (MFHID). Bill is a UX designer through and through, having worked in our industry for over 30 years. Although he talks quickly on the phone, in person his affect is warm and his tone is considered.

Suffice to say, our hour-long lunch flew by.

What follows is a transcript of what can only be described as the kind of lunch we all wish we could attend on a weekly basis: one in which a curious student is able to pose questions to a knowledgeable master. Bill’s in such a unique position that I also couldn’t help pry a bit with regards to the role education plays (and will continue to play) in our work.

Overall, I was both humbled and honored to take part in this interview and walked away more than a little inspired. Enjoy!

Hey Bill, thanks so much for taking time away from the classroom. You explained to me on the phone that one of the focuses of the Human Factors program at Bentley is to prepare students for work in industry, which leads me to ask: What do you make of the huge proliferation of independent consultants and consultancies in the UX world?
Thanks for making it out, Andrew! With regards to independent consultants and consultancies: The market is huge right now. So even our Design and Usability center here – in which we hire professionals as well as students to work with outside clients – grows about 30% a year.

Most of our clients have internal UX teams but they simply can’t handle the workload. They outsource it because they don’t want to take on the full time equivalent.

And while hiring an in-house designer has its merits, I find that high-level, strategic consultants can offer a more objective, broad-based perspective with regards to a business’s products or customers. Businesses think they know what’s right but they’re often too close to their problem. They have blinders on.

For someone to walk through the door (and I‘ve been doing this for 30 years) and just “see” the solution? Clients love that. User experience designers offer fresh perspectives on incredibly diverse industries – much more than just traditional tech, where we more or less grew up. Today, we contribute to retail, healthcare, publishing, and education spaces… it‘s really an exciting time.

I agree; it’s actually why I work as a freelance consultant myself! One of the projects to which I contribute has a big accessibility component which, as I’m sure you know, closely relates to the concept of Universal Design. Do you believe that Universal Design encompasses User-centered Design? How do you see the relationship between the two?
They have to be seamlessly integrated. So, this has been a problem I‘ve seen for some time and it‘s the reason that localization and Universal Design are key parts of our curriculum at Bentley. Twenty years ago, we thought of localization as a separate group –
– kind of like usability engineering, right? Didn’t we used to separate that out as well?
Exactly. As though international people were more drastically “different” than other kinds of users. But that’s not correct. Good design has to have a cultural component to it, just as we have to give consideration to people who have physical disabilities, cognitive disabilities, whathaveyou.

The problem that businesses here in the US have is that, particularly on the localization front – because we such a large, domestic market of potential users – we’ve felt that we could just start our businesses locally and then expand over time. That’s an “add-on” mentality. When you talk to businesses overseas – in Israel or Germany, for example – they build a global product from day one. That’s where we’ve got to go as an industry.

I believe that a large part of being a user-centered designer is being humble, admitting that I don’t know a subject area, that I don’t know my users best, etc. Do you think it’s possible to be a master in a field where we have to constantly admit our ignorance? Are you a “master” at UX design?
I always stress to my students that, after 30 years, I still consider myself a student. I say “the day you stop being a student, you should retire.” Because, again, we’re studying one of the most complex things imaginable: human behavior. How do you create something that maps to that behavior, in a natural way, and also delivers value? And then, particularly because of the idiosyncratic behavior you see out there, how do you accommodate larger populations? How do you deal with that? You’re never going to master it. And once you feel as though you have, you’re in trouble.

Students at Bentley learn about users alongside teachers.

I learn as much from my students as they do from me. For example, we had a couple of students that applied from architectural backgrounds. I asked them in individual interviews “What are you doing here?” to which they responded “We’re interested in the experiences that people have as they interact with a physical space.”

That’s when it clicked. How many times have you been lost in a museum? Or lost in a hospital? They’re never laid out as intuitively as we think they should be. You see the benefits of this cross-disciplinary approach when you visit the Holocaust Museum in Washington D.C, for example. It’s not a museum, it‘s an experience. From the moment you walk in, they give you a card and you’re basically a person taking part in a story.

These exhibits started so small, though! I remember some of the simple, “immersive” experiences I had in museums as a kid, but what you’re talking about sounds as though it’s on a much grander scale. Like a Disney-World-sized scale?

That’s the nature of it: continual rediscovery.

Experience design grows in fits and spurts. There was a period about three years ago when the national library association brought me in to speak. I started a nationwide tour, speaking at library events about the experiences they create. Libraries are at a crossroads where they’re questioning their identity: are they even relevant in the digital age? They’re literally talking about the experience people have in the library.

Another example – one that finally made me say “This is it. UX is everything…”

Dr. Gribbons continues.

One morning when I picked up the phone to answer a call from one of the largest bathroom-fixture manufacturers. They said “We want to talk to you about your consulting business“ to which I replied “I think you”ve got the wrong guy. I think you’re looking for an industrial designer.”

They start telling their story “No, we’ve done the industrial design thing. Twenty years ago, all we had to do is create faucets where you turn the handle and the water comes out. We built world dominance just by having a functional product. Then we woke up one morning and that wasn’t good enough to compete in the marketplace. That’s when we brought in industrial designers: people wanted things that were not only functional, but things that were beautiful…”

As I’m listening to them, I’m thinking “Wow, this is really tracking what went on in high tech. In the eighties and early nineties, things were just very functional, they just had to ‘work’ Then usability came along and products not only had to work but be easier, more pleasing, and all of that. Eventually that wasn’t enough and that’s when user experience took off.”

They finish telling their story saying, “We’ve since regained our dominance – we’ve got beautiful, functional products – but we feel as though we can’t compete anymore.” They said, “We’re at a point where we literally want to create the bathroom experience.” And that’s when I thought: “That’s it. I can retire now. If I’ve done the bathroom experience, I’ve done it all.“

But that’s what sells.

The end of the story is that we live in an “experience” economy, one where we expect things to be very powerful and deliver tremendous value. Over time, we expect things to be even more beautiful and deliver better and better experiences. And that’s true of everything thing in life, from relationships to products. What pleased us five years ago will not please us today. Although it drives manufacturers and producers crazy, it’s what fuels innovation.

Part of working in this field, in my opinion, is teaching people to have higher expectations of the things with which they interact. Was teaching students of design a natural progression for you?
I’ll be honest with you: I get a tremendous sense of satisfaction doing this. We’ve got 150 students in the program right now, and every year we watch them go out and do great things.

And I feel our students are really shaping the profession. We turn out more graduates here than anywhere else. Watching their contributions – and how their lives improve based on going through the program – gives me a tremendous sense of satisfaction.

But ours is a profession that’s sort of grown up in practice, you know? It’s never been codified, per sé, like engineering, medicine or law. These fields also grew up in practice but eventually they were codified and accreditation was offered. This is a big point of contention in our field. I think that 80% of the people in our field, myself included – even though I’ve got academic credentials – grew up on the job. If we as design professionals don’t get our act together – if we we don’t produce high-quality curricula and graduates – we risk our ability to shape the future. We simply can’t continue to force students to learn on the job.

As you and your students shape our future, where do you see that future headed? UX Design has come to the fore as a consequence of ubiquitous, networked technologies. Do you believe that these technologies are a necessary component of what we do?
I believe in an appropriate use of technology. Many times, in the final analysis of a problem, the solution isn’t related to technology all; it’s something more human.

We were examining a water project last year in developing countries in which “just digging a well near a village” wasn’t enough. The wells were sabotaged by local villagers after they were installed. Researchers couldn’t figure out why. It seemed as though they solved the problem; they had the technology of drilling the well and pumping the water and all that.

What they discovered is that, in relieving women villagers of their six-mile walk – six miles each way – carrying kilos of water on their head, they had also relieved women of the only time they had away from the men in the village. The final recommendation, then, included ideas for a micro-financing program and/or an educational program for women. At the end of the day, this solution wasn’t very technical, but it created value: women valued their time alone.

Ultimately, our work is not about providing people what they say they need or even what we think they need. If we listen carefully enough, we’ll know that customers don’t necessarily want “a faster horse” – as Henry Ford is often quoted as having said. They just want to go faster. Users just can’t step outside of the box that technology often prescribes them.

This gets back to what you were saying about being a lifelong learner: We simply have to realize that that box is ever expanding, right?
I once worked with a manufacturer of self-service checkout aisles, like those you might see at your local supermarket. There’re a lot of stories, now, about how stores are removing these aisles because of the backlash they’ve received from customers. People say it’s poor customer experience.

So we researched the aisle’s origin. Before the first one ever launched, the companies producing these kiosks never talked to customers. They only talked to store owners. So the product was built around business requirements, not user requirements.

This led us to conduct the first user research. We never heard from the users “Wow, I really want to checkout my own groceries and put them in the bag myself and pay the same amount of money.” What everyone said was “I don’t want to wait in lines. I don’t want the inconvenience of shopping. I want to get out of the store. If I could avoid the store altogether, that would be great.”

So here they were, telling us exactly what they wanted; they just didn’t know how to design the solution. That’s where our job begins.

Somewhere around here, the waiter cleared our table. Dr. Gribbons, Joanna, and I made a break for the dessert cart. I ordered coffee and he got a green tea (reputably the drink of all UX masters).

This Thursday, we’ll publish the second half of my interview. Check back then to hear how students have reacted to the MHFID program as well as where Dr. Gribbons believes design education is headed in the next few years.

In the meantime, if you’ve got any questions of your own regarding higher education or if there’s something specific you’d like to ask Bill Gribbons or Nancy Dickenson (the program’s San Francisco co-chair, and former head of UX design at eBay) just leave a comment below. We’ll do our best to ensure they see it!

About our guests

Dr. William (Bill) Gribbons

​ Dr. Gribbons is director of the Master of Science in Human Factors in Information Design and Founder and Senior Consultant of the Design and Usability Center at Bentley University. He has devoted the past twenty-eight years to helping students and clients create human-centered and value-driven user experiences

Nancy Dickenson

​Nancy Dickenson has been a leading user experience expert for more than 25 years. As CEO of FirstGiving, Nancy brought an integrated, user experience approach to strategic planning, team building, and executive management, and as the head of eBay’s Global User Experience Design and Research Team, she spent 5 years leading over 150 user experience professionals. Nancy is now coaching user experience professionals, consulting with clients, and teaching. She lives in San Rafael, California.

The post A Chat with Bill Gribbons, Part 1 appeared first on UX Booth.

March 04 2013


How to Use Images Successfully – Web Design Usability Guide

They say a picture is worth a thousand words. True or not, images are an important part of any website we create. Since it is so easy to embed an image in a website (even the process of creating your own images is very easy), most websites are filled with them. There are some very good examples out there on how to deal with images in a website from different points of view, but most of the websites do not showcase positive examples. And while this is not entirely dangerous for a design, it might decrease your chances to sell, in case you have a call-to-action page, or the chances to create good reading flow. It is more a matter of details than a matter of important principles, but dealing with images should be something designers understand and apply better.

Jakob Nielsen, the expert in webpage usability, together with his company NN/g, did an eye tracking study and concluded it with an article posted on their site, titled Photos as Web Content. Their conclusions amazed the design industry and came with great answers to questions experts weren’t able to answer before this study was done.

“Users pay close attention to photos and other images that contain relevant information, but ignore fluffy pictures used to “jazz up” webpages.” - Jakob Nielsen.

Web Design Usability Guide – Dealing with Images

Indeed, users want to see photos on websites, but they want them to be relevant. They would prefer a webpage that doesn’t have visual images rather than a webpage that has lots of photos that just make it heavy and cluttered. The key in using images on websites, according to the study, is based on a few basic ideas:

  • Image fundamentals - size, composition, quality and exposure are four important things to look for in a good image. People actually look for quality in images, even the contrast makes a huge difference.
  • Effectiveness – if the picture creates excitement or interest, then it works. It is down to three characteristics:
    • Emotional appeal – does the product in the picture look good and make the user want it?
    • Rational appeal – does the image show the benefits of the product?
    • and Brand appeal – does the picture fit your brand?
  • Transmitted message – this is about the image sending the right message to the website readers.
  • Anticipated user response – this is a bit more difficult to put into practice, but the basic idea behind it is that the picture should help decision-making and create a desire for the product. We will talk about this a bit later.

Purely decorative images tend to be ignored unconsciously by our brain. Like a radar, if the images are there only as a filler, the brain will ignore them. The study concluded that pictures and images of real people or real products are automatically categorized as important and are to be studied in detail by the human brain. If you have a personal blog, people would rather see your face than a drawing or a caricature. They want to see the face of the person communicating with them, it is a matter of trust and bonding.

If you own a company, it is a very good idea to take some time talking about the people behind it – using images. It gives a personal touch to an otherwise faceless company and people dig that. People actually want to know (or at least see) who the people are behind a company. If you can afford it, invest in a good photographer and try to stay away from stock pictures (especially from stock pictures that aren’t relevant to your content). It might cost a few bucks, but it will add a lot of value to your company website.

Several eye-tracking study show that the more detail your product images have, the better the results you will have. Yes, studio pictures of a big flat screen TV work just fine, but is just fine good enough for you? People want to see details, show them!

Quality and relevance

Below I will show you some results of different studies. You will see several websites marked with heat zones. The red areas indicate where the users’ eyes were mostly focused, while the blue areas show the exact opposite, indicating what is ignored or a turn-off for visitors.

Adelphia eye-tracking

Eye-tracking study on Adelphia’s website

Besides the fact that it is an incredibly outdated design, you can clearly see that none of the heat zones are on images. It is because all the images embedded in their webpage are purely fillers. Had they been using relevant pictures, the heat zones might have been a bit different, but for now it shows how much of a waste of space images are on their site.

Another good example can be seen below. New York Magazine’s restaurant section has also been part of the eye-tracking study and it shows that even if worldwide known chefs are featured in images, the quality is still important. So even if the pictures are somewhat relevant, low-contrast and small size images are simply ignored. Image quality is as important is the relevance of the image being used. There has to be a balance, where quality and relevance are the two guiding principles.

NYMag, retaurant section

Eye-tracking on NY Mag’s website

Jakob Nielsen and Kara Pernice wrote an article entitled “Images as Obstacles” some years ago. The images above are courtesy of Peachpit and the amazing heads who published the study. Thank you for your tremendous work!

Guiding the user

Not many designers have a degree in psychology, therefore few of us know how the human brain works. The same eye-tracking studies show that our focus can easily be influenced and changed by images. We are obviously talking about high-quality, relevant images, not fillers. In a study called “You look where they look,” James Breeze showed how relevant images can be to the flow of a website.

He made an eye-tracking study on 106 people by using a baby diaper manufacturer’s website as an example. As you can see in the two images below, when the baby faces the visitor, most of the people tend to look at his face. Remarks including “adorable, cute, sweet and little pumpkin” were probably quite popular.

eye-tracking study

Study on a diaper website

However, when the same ad, with the same text, with the same baby, but in a different position is presented to a 106 people, the results are clearly better. Not only do the people focus mostly on the text, but you can also see increased attention to the brand and even to the small text underneath, which is a money-back guarantee disclaimer (quite important for a business, probably one of their selling points – a bummer to miss that).


This shows how much influence a picture can have.

JCDecaux and THiNK worked together a few years ago and came up with this research which confirms the results above: the eyes of the users can indeed be guided towards key messages or elements in the presentation or the ad.

Because many ads feature beautiful models, they tend to be the focus instead of the product. Models, instead of drawing attention towards the product, steal the attention and draw it towards themselves. The study below shows how this can be fixed.

Sunsilk eye tracking

Eye-tracking on Sunsilk product.

In numbers, this research shows even clearer results. On the initial ad (left), there is very little focus on the brand and the product – actually only 6% of the people looked at it. However after the ad was manipulated and tested again, more people looked at it. No less than 84% of the people looked at the product and the brand (even the logo at the bottom) after it was modified. This is a 14X viewer increase, which, in my opinion, is a huge difference.

The right images can help designers guide user’s eyes. If models are used, make them look towards the product image, the logo (brand) or the text. This will increase the product awareness and have the desired effect.

Images Need a Purpose

Images can not only guide the user’s focus, but also explain a lot about the product in just few seconds – better than words could describe it. An extremely well-known example is Square, a smartphone application that allows you to accept credit card payments through your mobile phone or tablet by using a small device.


The product is described in so many ways by a simple image

As you can see in the image above, the visitors understand many things about the product in just a few seconds. After looking at this picture they already know how the card reader attaches to the device, how big it is, what devices it works with (it also works with Android, but it is quite difficult to show that too), how to swipe the credit card and what appears on the screen of the device when the card is swiped. Lots of long, boring paragraphs would have to be written (and obviously read by the visitors) in order to understand this information. Instead, a picture says it all. This is a classic, brilliant example of effective use of images!

Another good example is showed below, how Apple sometimes advertises their MacBook Air product. We all know it’s small, light and beautiful. Well if you didn’t know it, you’ll get the idea in a millisecond by looking at the minimalistic ad below.

macbook air ad

Macbook Air simple, yet effective image advertising

Trust is Key

In case you have an online shop, keep in mind that trust is crucial. Nobody will buy a needle on the internet if they do not trust the seller. The reason why Amazon and eBay are popular is because, besides the fact that they are huge worldwide brands and offer different money-back guarantees, they also have many different security features. Shoppers trust them and they know that if the seller is not going to deliver the product, the company will take care of it. If you own an online shop, make sure clients trust you.

What does this have to do with images? Well it’s simple. Trust can be achieved through images according to a study on landing pages conversion rates made by Paras Chopra.

building trust

Building trust is incredibly important when dealing with online visitors

It was incredible to hear about this online shop selling Brazilian and Caribbean paintings. A slight change meant an increase in their conversion rate of more than 95%, from 8.8 to no less than 17.2. How? Instead of showing thumbnails of the paintings, they showed thumbnails of the artists that made them. The quality of the paintings was never a problem, but the fact that they did not trust the shop was. By simply showing the faces of the artists, visitors realized they were buying from real people like themselves.

Chopra talks about another user who has an online portfolio. By just replacing the contact icon with his own picture, he increased the conversion rate by 45%, from 3.7 to 5.5. His conclusions were that visitors can spot stock photos right away and tend not to believe them. They create an emotional connection with faces they see online.


To end this article, I also want to mention some technical aspects of using images in websites, without getting into too much details. First I want to mention how important optimization really is.

According to data from February the 15th, 61.9% of a webpage is filled with images, with the average size of a webpage being 1.29MB. Images are heavy and take a lot of time to load. They are dangerous for users’ browsing flow. According to Jakob Nielsen, a one-second response time is the limit for users feeling that they are freely navigating the command space without having to unduly wait for the computer.

webpage size stats

Average Webpage Size – 15th February 2013

Before we upload images on 1WD, we always get them through Photoshop’s Save for Web & Devices function, where you can decrease the size of the picture without decreasing the quality too much. is a free online tool that does the same, and there is also a WordPress plugin made for it. Do either one of those before uploading your images and the total size of your website will decrease, which means faster loading times and less frustrated users.

Width and height

The last technical aspect I want to talk about is the necessity of mentioning the width and height of an image in the HTML markup. The reasoning behind this is simple. A webpage will always load the text first, then the images. But because of this, until the images are completely loaded, their position is marked with a small, blue question mark thumbnail. While the image is loading, this small thumbnail expands to the full size of the picture, which disrupts the reading flow if users already started reading the text. By expanding, the thumbnail will also move other elements in the website that the user might be focusing on – and this makes many visitors go bananas.

By declaring the height and width of an image in the HTML markup, you can be sure that the thumbnails (which will still exist), will appear right from the start at the full size of the picture – this means that while the picture is loading, it will just fill up the big thumbnail, instead of expanding it. It is a small detail, but a nice touch.

Width and height to images

However, some people consider this an old technique and with the emergence of mobile browsing, not very effective at all. I tend to agree. Therefore use this only when your framework is responsive and don’t forget to resize the images for different screen resolutions. You don’t want a picture with a width of 700 pixels on a screen 640 pixels wide.

Bottom line

Using images the right way is crucial if you want to have a successful website, especially when your goal is conversion. As you have seen in the examples above, bad images are a turn-off for visitors and they will ignore them. However, if you manage to find the right pictures and insert them in the right places, they can do wonders for you, as they did for some others.

It is also important to keep in mind that images are not always the solution for your website’s problems. Sometimes your website shouldn’t even have any images. Testing is important in this matter. I will put together an article about A/B testing for you in the coming months and will teach you not only how to use it, but more importantly, what to use it for and what you can get out of it. Until then, though, stay tuned for other amazing pieces here on 1WD.

Now it’s your turn to hit the keys. Do you have other usability tips or questions? Have you encountered issues with the matters discussed above? How did you solve them and what were the results? We would love to hear from you.

August 21 2012


The Difference Between Information Architecture and UX Design

Information architects form the blueprints of the web

Next to explaining what I do for a living, the second question I most frequently hear is: “What’s the difference between Information Architecture and User Experience?” The line always seems to blur between the two, even though there’s clearly a difference. How should I go about explaining it?

Information Architecture, according to Wikipedia, is “the art and science of organizing and labelling websites … to support usability.“ According to the same source, User Experience is “the way a person feels about using a product, system or service. [This includes] a person’s perceptions of the practical aspects such as utility, ease of use and efficiency of the system.”

Even with regards to its definition, User Experience takes Information Architecture as its foundation and brings it to the next level.

Information Architecture concerns structure

Information Architecture is a relatively old term. Old in the sense of the web and old in the sense of our progression through technology. It focuses on the organization and structure of content in a manner in which a user can navigate through it. Digitally speaking, it can range from a simple brochure site all the way to a complex information system.

Information Architects work to create usable content structures out of complex sets of information. They do this using plenty of user-centered design methods: usability tests, persona research and creation, and user flow diagrams (to name only a few). That said, it still seems that UX design is in vogue.

And here’s why: Information Architecture comprises only small a part of a user’s overall experience.

User Experience concerns emotion

What’s User Experience then? User Experience Designers take a site’s information architecture one step further, considering not only its navigation, but also its ability to facilitate engagement. To do this, they employ user-centered design to produce a cohesive, predictable, and desirable affect in their target audience. Whoa.

UX designers turn ordinary experiences into exceptional ones

Essentially, UX designers work to make things more profound, targeting their users on an emotional level. I don’t mean “tugging at heart strings” emotional, but more eliciting an emotional response in respect to what they just accomplished. UX design adds context and story to a user’s natural behaviour and, in so doing, gives them something to take away from their experience.

The Fundamentals of Experience Design

Stephen Anderson believes that the best experiences lie at the intersection of “People, their Activities, and the Context of those activities”

You can look at it like this: UX encompasses the whole spectrum. It’s like taking a cup of IA, mixed with a dash of usability, a pinch of content strategy and whole lotta creativity. Or, even simpler, UX is the love child between a Creative Director and an Information Architect. A lot of the time this means stripping things away so you’re left with just the essence of what a user needs.

Being easy and cool

If you aren’t completely confused yet, you’re probably thinking that you need a good IA in order have a good UX. Exactly. Another way of looking at it is: User Experience Designers consider Information Architecture, but Information Architects don’t necessarily consider their users’ entire experience.

A usable experience is easy, simple and gets the job done. An engaging experience does all of that and instills a lasting impression on the user. It’s the difference between coming away from a site and thinking “That was easy” and “Whoa. That was cool.”

It’s the difference between Wunderlist and Clear.

Between Sketchbook and Paper.

Both of the former apps are good, easy, usable tools. But the latter apps are not only easy and usable, they’re fun and engaging.

It’s all in the approach

Looking at any one discipline’s workflow is a daunting task, but let’s take a quick 10,000-foot view how the workflows for IAs and UX designers might differ. Information Architects would likely consider their requirements, research their users’ goals, and conduct some form of competitive analysis. In the end, they might generate page flows, wireframes and, of course, a sitemap. Add on some usability testing, refinement and revisions, and it’s off to the designers.

UX designers, though, would likely take a different approach. Although they’ll take the IA’s workflow into consideration, they might also consider the emotional goals of their end-user. Their competitive comparison may be more around interaction models, rather than structure and layout.


UX builds on the foundation that IA provides, aiming to take that experience to the next level, both creatively and emotionally. This is the outstanding difference that defines how the apps, sites, and products of today are designed as opposed to those of yesterday. For those interested in more resources, I’ve included a list of links below to check out.

The post The Difference Between Information Architecture and UX Design appeared first on UX Booth.

August 08 2012


40 Unique and Multifunctional Premium Admin Templates To Help You Manage Your Website

Backend web development can be compared to your local government. You don’t usually see them, but they’re doing their work (efficiency is another matter). While content management systems like WordPress or Drupal do the work most of the time, there are occasions where you can’t do without a custom solution. As you know, building an administration page yourself can be quite difficult and time-consuming.

“I’d do it myself but..” You don’t have to build it yourself. Especially when there are dozens of unique admin templates around that are responsive, clean, full of features and plugins and customizable at almost no cost. In this article, you’ll find 40 customizable premium admin templates for your next website, project or application.

1. Neat Admin – Responsive Admin Template ($16)


Neat Admin is a new responsive admin template with many features and custom elements. It comes with 4 different colors that you can switch with a built-in theme-switcher. It is built on Twitter Bootstrap with a lot of customized elements and additional colors.

  • Responsive Layout
  • Many custom elements
  • Custom made animations
  • 32 custom button colors

2. Mango – Slick & Responsive Admin Template ($25)


Mango is a slick and responsive admin template that comes with all features you can imagine – and even those you can’t imagine. It is built with modern techniques like HTML5 and CSS3 to be used for backend solutions of any size. It has custom elements, 30+ plugins, 15+ custom plugins and a very flexible content structure.

  • Fluid and fully responsive 12 column grid
  • 30+ Plugins
  • Customizable user interface
  • Lifetime updates

3. Slate Admin 2.0 – Responsive Admin Template ($17)


Slate Admin 2.0 is an all new premium responsive admin template based on the popular Slate Admin 1.0. This new version has been rebuilt from the ground up and comes packed with a multitude of new features.

  • Responsive Layout
  • jQuery Flot Charts
  • Enhanced Form Elements
  • All New Lightbox Plugin

4. Amanda Responsive Admin Template ($16)


Amanda Responsive Admin Template is a new admin template with many features, plugins and custom elements that you can use for your backend projects. This template has built-in theme switcher that you can change anytime you want. This template is very useful for any type of application whether for desktop or mobile devices.

  • Responsive layout
  • Very Sleek WYSIWYG Editor
  • Interface Elements
  • Add-on Pages

5. Kanrisha – Premium HTML5 Responsive Admin Template ($19)


Kanrisha is a premium HTML5 responsive admin template, with a sweet clean and minimal overview, suitable for iPad and iPhone resolutions, it’s coming with +14 plugin and 6 awesome patterns.

  • Two Column Responsive
  • 9 HTML Pages
  • 15 Javascript Scripts
  • HTML5 Valid

6. Utopia Responsive Admin Template ($18)


Utopia is a premium responsive admin template that comes packed with a massive set of features including 30+ beautifully crafted UI elements ranging from charts to gauges, knobs to masked inputs and what not. This theme comes with three themes white and dark which will suit your need in different situations. The collapsible sidebar and widgets, data tables, conversations tables, pricing tables and numbers of galleries with image effect will make it a perfect choice for the backend of your web applications.

  • Responsive, works with multiple devices
  • Massive collection of UI elements
  • 200+ beautiful icons in color and grey format
  • Detailed Documentation

7. Aquincum – Premium Responsive Admin Template ($21)


Aquincum is a premium admin skin with lots of custom elements, 35+ plugins and very flexible content structure.

  • Fully responsive layout
  • WYSIWYG editor
  • Image gallery and media table with pagination
  • Integrated source code viewer

8. Bingo – All Purpose Responsive Admin Template ($18)


Bingo is very powerful high-end admin/backend user interface template. You can use it in web admin, CMS, web application, accounting software etc. It is very easy to use and extremely easy to integrate.

  • 100% Responsive Template
  • 42 HTML files
  • Well Documented
  • 4 Dashboard styles

9. White Dream Admin Panel ($17)


White Dream Admin Panel has a huge number of functions that are necessary for the development of your projects. This template is suitable for any application ranging from the online store and ending with the music site.

  • Responsive layout
  • Valid HTML5
  • Page Forms
  • HTML5 Music Player

10. Gebo Admin Responsive Template ($16)


Gebo Admin is full featured, two column responsive template based on Bootstrap Framework from Twitter. It has lots of .js plugins: charts, filterable/searchable list, calendar, multi-select, location finder, file manager, gallery grid, data tables, sticky messages, WYSIWYG editor and many more.

  • Responsive two column layout
  • HTML5 /CSS3
  • Based on Twitter Bootstrap Framework
  • Responsive file explorer

11. Dandelion Admin – Responsive Admin Template ($17)


Dandelion Admin is a responsive, full featured admin template. This template focuses on having a simple, clear design, while providing the most commonly used elements on web apps.

  • Full responsive design
  • Header drop down menu for user tasks
  • 18 Plugins included and styled
  • 2000+ icons included in several colors and sizes

12. SweetDashboard: Responsive Admin Template ($15)


SweetDashboard is a simple and elegant Admin UI theme. With responsive design technique, you can view the same page with in different views.

  • Built on powerful HTML5 features
  • Advanced CSS3 animations
  • WYSIWYG text editor
  • PSD files included for customization

13. Starlight Responsive Admin Template ($15)


Starlight Admin Template is a new admin template with many features, plugins and custom elements that you can use for your backend projects. This template is very useful for any type of application whether for desktop or mobile devices.

  • Responsive Layout
  • Liquid 2-3 columns layout
  • Integrated flow charts
  • Chat support

14. Eternity Admin Theme ($16)


Eternity Admin is the perfect way to design a website with hundreds of possible features and plugins required while designing/developing a website. It gives you different layouts and plugins to design a dashboard or a web form. Based on jQuery, the interface is light,responsive and ready to use.

  • Custom page layouts
  • Error pages

15. Developr – Fully Responsive Admin Skin ($18)


Building a web app for desktop and mobile devices? Developr is for you. Write your code once, and let it handle the magic of responsive web design. Developr Admin skin is a flexible responsive HTML5 /CSS3 template, built on the mobile-first principle and based on the solid foundations of HTML5 Boilerplate and 320andUp, which provides a rich set of styles and features for all your needs.

  • Automatic template setup: all your plugins fired automatically, everywhere
  • Responsive changes events and control methods
  • Innovative size change events
  • Most plugins use inline options for shorter and smarter code

16. Dulcet Admin – HTML5 & CSS3 Back-end Template ($18)


Dulcet is a multifunctional admin template with a friendly interface which come with a lot of options, detailed documentation, and ready to use elements. It is full based on HTML5 , jQuery, and PSD files to edit something. All changes can be done from code.

  • Fully based on HTML5 CSS3 and jQuery
  • Fluid 960 grid system
  • Rich text editor multifunctional – TinyMCE
  • Data tables – real time management

17. Pertho Admin Premium Template ($16)


Pertho Admin is a full featured, mobile friendly, responsive Admin Template (based on Foundation Framework) with lots of jQuery plugins: charts, tabs, scrollable content, sticky messages, filterable list, data tables, nested accordion and many more. Style switcher is included in this template for easy customization.

  • Responsive layout (fixed/fluid)
  • Lots of jQuery plugins
  • Pricing table
  • Extended form elements

18. Zice Admin Colorful Admin Templates ($16)


Zice Admin is a colorful admin theme that includes dashboard, form, full option gallery, graph presentation, file management, calendar, user interface, map & location, error page, 200+ icon, PSD file and documentation for admin management.

  • Webcam take picture
  • Google maps & location
  • Full featured form
  • Image editor

19. Dream Works Responsive Admin Template ($16)


Dream Works is a a full featured responsive Admin Panel with custom plugins, widgets, forms, charts, galleries and much more.

  • Responsive Layout
  • 14 jQuery plugins
  • Iconsweet – icon font
  • iPad friendly

20. Admantium – Premium Admin Panel ($15)


With Admantium you finally can stop worrying about the user interface and focus on what really matters - your system. In a simple and elegant way, through the power of HTML5 and CSS3, Admantium will provide you all necessary and essential resources you will need.

  • HTML5 (valid) and CSS3
  • 960 Grid System
  • 17 HTML pages
  • jQuery powered

21. Adminity – Premium Admin Interface ($17)


Adminity is an attractive, clean and modern administration interface. Its fluid and adaptive layout enables Adminity to be viewed on screens as narrow as 320px, and its intuitive user interface makes navigating through it a piece of cake.

  • Clean, beautiful and modern design
  • Fully integrated jQuery UI
  • Semantic and clean HTML5 and CSS3 code
  • Well documented

22. Quick Admin – Responsive Admin Template ($18)


QuickAdmin is a template for a CMS or site back-end. Implemented using XHTML Strict and CSS3 enhancement brings a clean and easy to use interface. It comes with a variety of components, sample code and great icons to help you define your back-end.

  • Responsive template
  • CSS3 enhanced interface
  • Based on jQuery Framework
  • Great documentation

23. Ziown Admin – A Complete, Clean Admin Template ($18)


ZiOwn is a powerful and clean admin panel template for web entrepreneurs, app developers and site owners as this can be used for the admin part of any web application, web-based software’s or custom CMS admin panels. It is very easy to use and extremely easy to integrate.

  • CSS sprites
  • 4 predefined color themes
  • 17 HTML pages
  • more than 22 jQuery Plugins

24. Canvas Admin – Premium responsive admin template ($18)


Canvas Admin is a premium, full featured, responsive admin template that helps you get your project started quickly and with ease. Included are 20+ sample pages showcasing the many layouts and widgets you have at your disposal such as: buttons, grid layout, google maps, tooltips, and much more.

  • Responsive layout
  • Custom form elements & layouts
  • Uniform plugin support
  • Google maps integration

25. Crown – Premium Responsive Admin Theme ($25)


Crown admin theme is a premium admin panel template with lots of integrated features, plugins and custom elements. It could be useful for any type of web application, custom administration panels, any backend system etc. With integrated charts and statistics stuff, Crown will be very useful for developers who build their own graphs and charts, the design is ready to go

  • Responsive layout
  • Integrated flow charts
  • Lots of form elements
  • 500+ icons

26. Pastel Dashboard — Admin Template + iPhone web app ($20)


Pastel is a unique, feature packed dashboard with an intuitive and stunning interface.

  • Fluid and responsive layout
  • HTML5 offline cache with update system
  • Comprehensive documentation
  • iPhone web app with native gestures

27. Infinity Admin – HTML5 & CSS3 Premium Full Featured App ($18)


Infinity is a modern premium full featured admin template for professionals and corporates.

  • fully responsive design
  • background chooser
  • 14 jQuery plugins
  • cross browser compatible

28. Mustache! – Admin ($16)


Mustache is a nice clean admin template that can be used for any self-made backend system.

  • 4 column option
  • jQuery powered.
  • A variety of plugins
  • Awesome styled form elements

29. MWS Admin – Full Featured Admin Template ($17)


MWS Admin is a responsive admin template and it aims to be full featured while keeping everything simple and straight forward.

  • Responsive layout
  • MWS Themer, a feature to customize this template’s look and feel to match your site
  • 2000+ Icons
  • 19 plugins integrated and styled

30. Color life – Premium Admin Template ($18)


Color life admin panel facilitate the work for yourself and colleagues, it’s easy to use and flexible in the setup. It thinks about you, and you think about your future.

  • HTML5 and CSS3
  • Sortable tables
  • Flow charts plugin
  • WYSIWYG editor

31. Spina – Premium Admin Template + Tablet Theme ($18)


Developer’s goal was to create a beautiful interface packed with just the right features. After months of effort and lots of real use, you’re proudly introduced to Spina.

  • HTML5 & CSS3
  • Advanced AJAX support
  • Built-in iPad compatibility
  • Widgets & plugins

32. Cupcake – Premium Admin Template + Mobile Theme ($15)


Cupcake is a user-friendly, flexible and customizable admin theme with widgets and UI elements.

  • Semantic and valid XHTML + CSS3 markup
  • Cross-browser compatible
  • 12 jQuery plugins
  • Form elements

33. Hello Admin Template – Desktops, Tablets, Mobiles ($20)


Hello Admin is your web site’s or application’s full featured responsive admin interface.

  • Fully responsive design
  • Tons of features, plugins, options and more
  • Easy to customize
  • 18 pages

34. xSystem – HTML5 and CSS3 Admin Template ($17)


xSystem is an administration panel clean and flexible suitable for any web application type. It combines the best HTML5 and CSS3 techniques to give the best user experience.

  • 2 skins fixed with horizontal menu and fluid with sidebar
  • jQuery UI integrated
  • Backend file explorer
  • Data tables – real time management

35. Mandy Lane Premium Admin Template ($17)


Mandy Lane is an easy, powerful backend interface, perfect for your projects or any software application.

  • Semantic and valid XHTML + CSS3 markup
  • Cross browser compatible
  • Modal window
  • Custom UI: DatePicker, Slider, Tabs, Accordion, etc

36. It’s Brain – premium admin theme ($21)


Its Brain – premium admin theme with lots of different features.

  • Responsive layout
  • Integrated flow charts
  • Form elements
  • Interface elements

37. vPad – HTML5+CSS3 App Framework ($16)


vPad is an easily customizable, feature packed HTML5 + CSS3 web application template.

  • HTML5 + CSS3 Compliant
  • Fluid layout – iPhone and iPad friendly
  • Live search
  • Fully documented

38. Adminium – Modern Admin Panel Interface ($18)


Adminium is a stylish, modern admin panel template, perfect for the back-end interface of your application. The layout is responsive and liquid, so it fits in desktop and mobile browsers.

  • Responsive layout with device orientation support
  • HTML5 & CSS3
  • Unobtrusive jQuery
  • Dynamic search bar with AJAX capabilities

39. Peach – Clean & Smooth Admin Template ($18)


Peach is a clean and smooth admin template for huge and small backend solutions. It includes custom plugins, forms, validations, charts, tables, notifications and much more.

  • Liquid and fixed layout
  • Highly customizable
  • Clean and smooth user experience
  • HTML5 and CSS3 progressive enhancements with minimal use of images

40. Lagu Admin Premium Template ($16)


Lagu Admin template is a full featured admin backend template enriched with many third-party components: WYSIWYG editor with integrated file explorer, calendar, dynamic and static charts etc.

  • Fluid and fixed width layout
  • Sortable data tables
  • Dynamic and static charts
  • 79 icons and 5 ajax loaders

What do you think of these admin templates? Do share your thoughts with us!

July 25 2012


How to Build a Killer User Experience Team

We are in an era where the term ‘User Experience’ is still evolving and enterprises are still figuring out how to fit this piece of the puzzle into their organization’s structure. The field is new and filled with lots of uncertainties for the decision makers of an organization, but it is definitely promising and filled with tremendous opportunities!

Being a User Experience designer right now is an interesting and rewarding experience for the fact that the scope of exploring unknown lands is infinite and I feel proud to be one. The Internet obviously has a major role to play in the upkeep and growth of this field, and it has lived beyond its expectations up to now. There is a lot of stuff happening around UX nowadays. There are UX conferences, more blog posts explaining the need of User Centered design, and people surely are getting a better picture of the topic, day by day.

While this really is great news for us UX designers, we have miles to go ahead until we reach the pinnacle, where UX design will be considered most pivotal in a system’s design and development process. For this to happen, inclusion of Experience design in an enterprise scenario should be justified, i.e., UX should yield results in terms of tangible values like increased hits, high user conversion rate, improved task completion time and so on. I work for a large enterprise where people don’t have time for elaborate UX sessions and detailed demos on the benefits of embracing UX holistically. All that matters is the revenue, and it is the single tangible entity that defines the importance, or rather, it is what defines whether something deserves respect or not. Fortunately enough, the team which I am a part of within a large enterprise took the bold step of taking UX seriously and demonstrated the benefits of doing so, in our own way, to the top management.

This post makes use of my personal experience and wisdom that I have collected over time working in large enterprises, and I will try to present a detailed analysis of key points which will be decisive towards the making of a User Experience team, that delivers.

What is the need of a UX team?

The scope of this post is confined to large enterprises where revenue matters the most, where things are already working fine (in terms of revenue) and where there is very little awareness on the need of a good UI. In other words, where the word ‘user’ is often forgotten and has taken the backseat! The result will be ill-designed applications with significantly diminished user experience, insanely long task completion times and a huge dent in the reputation of the company, when it comes to the quality of interaction and the overall experience with the product. Though these negatives are obviously visible, people never realize the missing link, the reason is being unaware of the importance of a good UI, less tech-savvy customers who never demand a better experience and, most of the time, simply the lack of proper resources to get the job done!

Push for a UX team here! The challenge lies in convincing management, that this is the solution which connects the dots effectively. It’s just the beginning. Challenges will come like a landslide upon you, and only perseverance will work.

Starting to build the team from scratch

I am not a perfectionist, and I fully understand that there is no ‘perfect’ team. But without understanding what you are looking for, you will never be able to identify if you have found the right person or not. A great UX team is not one which is solely comprised of highly qualified or certified professionals, but one with  productive, passionate and positive thinkers who have the right skills. So it’s not only important to identify passionate people, but equal weight should be given to identify the right balance of skillsets, before you go on a recruitment drive. My understanding so far on the right ingredients for a UX team has worked out well and I take that gut feeling forward.

1. Bring in the experts

Like every other trade, there is no replacement for the wisdom that experience brings to the table. Experienced and seasoned professionals are an integral part of any team. Make sure you have experienced professionals who are self-driven. In many cases, people land up recruiting misfits just because either the hiring team didn’t have an in-depth understanding of the required profile, or the process of evaluating the candidate was not effective enough. This is where the importance of effective recruitment process comes into play.

Be focused on the specifics of skill-sets you are looking for when you set out to hire a person. For example, while recruiting a front-end engineer, look for his preferences of tools and techniques, which will give you a better first hand idea on his expertise and way of working. This has worked for me most of the time. My point here is, make your recruitment process more creative and find out your own ways to get great talents aboard. Also remember, always be on the lookout for better talents than you, and create a team of greats and not a team of dwarfs!

2. Fresh people bring vibrancy to the team

Often, in my experience, freshers (trainees) are the most underestimated resources in a team. I believe if you are recruiting a passionate and enthusiastic fresh soul to the team, the amount of positive energy and raw talent that these people bring into the team is unimaginable. If harnessed and directed in the right way, they can be one of the best sources of productivity for a team. Provide clear direction to the trainee, clearly set goals and checkpoints along with continuously motivating and directing them to reach the target and let them grow to their strengths. The key lies in identifying their interests and letting them grow with those interests and passion. The dividends being paid back will surprise you.

3. Certification is not the ultimate benchmark

Professional education/certifications definitely is an added value but not a necessity. Personally, I have worked with people with certifications/design education and also with passionate self-educated professionals, and most of the time the quality of the output was directly proportionate to the level of passion displayed rather than the education/certification. My point here is, let’s not take certification as a benchmark while recruiting an experienced professional. As I mentioned above, there are gems waiting to be discovered, and the only way to find them is to adopt some really creative recruitment methodologies. This is really important for a domain like Experience design, where passion is paramount.

4. Referrals might not always work – screen thoroughly

I decided to include this point based on some of my bitter experiences in hiring referrals. The ideology behind bringing referrals onboard is to increase the coordination and productivity of the team, assuming that people will find it encouraging to work again with their ex-colleagues or friends. But this might not always work unless you have a solid screening process in place. Blindly roping in a referred candidate can be suicidal at times. I am not completely against referrals, but my point here is to never take anything for granted when it comes to building a team that matches your expectations. Backfires in hiring can prove fatal for the team in the long run, and can seriously hamper the team spirit and productivity if not dealt with in the right way.

5. Never go with the numbers – assess based on the quality of work

Numbers can be deceiving and may not necessarily be proportional to the productivity/quality expected. You might come across a beginner who does magic with code while you may also tumble upon a veteran with no basic knowledge at all. So lets come out of the number game and give respect to those who deserve to be on the team.

6. Make training/sessions/workshops mandatory in the appraisal cycle

Creative designers feed on constant inspiration and that is one single thing that can drive the show forward. It is essential for a design team to conduct frequent knowledge sharing sessions, and exchange ideas. Make training sessions and workshops mandatory, this will help bring fresh inspiration to the team and will promote sharing and bring a sense of pride.

Key Roles in a UX team

While I am not a veteran professional with many years of experience, I’ve had some career defining moments where I have been closely associated with teams struggling to establish the right balance in the team when it comes to Experience Design. The diversity in my career (a video post-production artist to a web graphics designer to a front-end engineer to a User Experience enthusiast) has been most helpful for this state of mind. It has enabled me to look at my team from a variety of perspectives and identify shortcomings and positives. From my limited experience, let me suggest some key roles which can make the difference in a User Experience team:

1. User Experience Architect

The User Experience Architect is the team’s visionary. Every product thrives on its own vision, and unless the vision is clear, the influence it has on a user’s mind cannot be directed in the intended way. Designing a good experience is meticulously planning a chain of events in which the users are involved, and helping them find what they are looking for easily and smoothly. A UX Architect’s job is to carefully sandwich the vision into the product, while helping the user to be happy and satisfied in using it.

  • Should have extensive experience in driving the Experience design processes, as they might have to make key decision just based on his past experiences and wisdom.
  • They should be passionately associated with a product’s life cycle.
  • Knowledgeable in UX best practices and processes.
  • Ability to generate a User Experience Document based on personas and scenarios.
  • Deliverable will be in form of User Experience Document, Personas/Scenario details and a close association with the team at every stage to make sure the product is shaping up as they wanted.

2. Information Architect

The Information Architect is the authority when it comes to the information design of the product. A skillful Information Architect should be able to cruise along when presented with the challenge of organizing the information in a huge data-driven application with complex scenarios and screenflows. He will be responsible for laying out information and plays a key role in deciding the screen flows and interaction patterns to be followed.

  • Should be an expert in various wireframing tools like Axure, Omnigraffle, Visio.
  • They should be a master of IA techniques like card sorting.
  • Extensive knowledge in standard UI interaction patterns.
  • Deliverables will be wireframes, screenflows, sitemap and interaction design documents.

3. Visual designer

The role of a visual designer is crucial to a UX team’s success. Though the efficiency of a product is not skin deep, the skin does matter. The UX vision of a successful product is driven by a visual designer. While there will be numerous apps and services offering the same service or experience, the first impression and the visual aesthetics plays a very important role in carrying forward the experience of the product.

  • A visual designer should be a magician when it comes to color combination, typography, visual hierarchy and importantly should be a great communicator of ideas through whatever medium available, as design is all about communicating ideas.
  • Madly passionate about visual communication, colors, type and aesthetics.
  • Share the passion and ideologies of the UX architect and carry forward the UX vision the same way as he would have imagined. This is a key requirement for a UX team to click, and this is often ignored and overlooked upon.
  • A pixel perfectionist, and a critic lover.
  • A Photoshop rockstar.
  • Should have an open-minded approach to design, questioning each design decisions, and contributing to the Experience of the product in his own way.

4. UX All rounder (UX+ VD+Frontend engineering)

From my diverse career experience, this is a role which I feel will make the difference for any UX team. Someone who understands each stage of an Experience design process and who will be able to connect the dots seamlessly across each phase of the Experience design  process will be an asset for the team. They will make sure that the UX vision of the product doesn’t get blurred across each phases. The primary job of this person will be to be involved in each phases of the Experience design process, collaborate with the experts of the respective phases (eg. visual designer, while in the designing phase, information architect during the wire-framing phase and front end engineer during the prototyping and front end development process) and make sure the product gets transitioned between them smoothly. This includes guiding the visual designer in authoring graphics/UI elements which doesn’t fall out of the scope for a front-end enginee, or which is completely non-implementable from a front end development perspective.

  • Diverse and extensive knowledge in UX practices, Visual design tools & techniques
  • Front end development concepts, tools & techniques
  • A trend watcher
  • Should be on the bleeding edge of all updates, tools and techniques
  • A good communicator, and importantly a great team player.
  • The key is communication in this profile, as this person would be working closely with almost all members of the team.
  • Should have a strong hold on the concepts of each phases, and his/her experience will be put on test, while team discussions, as this person holds the baton for making convincing statements to bring the team to a common understanding and to clear out conflicts that are bound to arise in each phases of the Experience design process.

5. Front-end engineer

This is a key role in a UX team in my opinion, and I am surprised at the level of ignorance some enterprises (at least in the country I work in) show towards this role. Front-end development is when the product jumps into the first phase of life after much conceptualization and designing from other members of the UX team, and for that matter, this is the most vital part of the Experience design process. Front-end engineer’s responsibility will be to give life to the concepts and mockups and make them work on a browser or any other medium on which the product is expected to work on. The challenge lies in translating the ideas which are in the form of wireframes, documents and visual mockups into a working prototype. Working closely with the ‘UX all rounder’ will yield good results for a front-end engineer. In short:

  • a front-end engineer brings together the 3 forms of an application, namely content, presentation and behavior.
  • A rockstar in HTML/CSS/JS based techniques.
  • Should be a cross-browser compatibility samurai.
  • Should give attention to detail and should be able to appreciate design.
  • Well versed with optimization and performance boosting concepts and techniques.
  • Should have a solid understanding of the technology behind an application in which he/she is working on.
  • A sharp learner of new techniques and tools.
  • Ability to bring about a set of processes and standards, and in turn institutionalize the whole front-end engineering process within the organization at large.

6. Content Strategist

It is high-time we start thinking of content as one of the important parts of a product. The role of a content strategist has been a topic of discussion for a long time and the term ‘Content strategy’ itself is evolving. As an Experience design team, content should be considered as an important part of the product, be it web, mobile or any other medium. A content strategist will be responsible for shaping up the ‘tone of voice’ of the product. He sets the tone of the product by carefully planning the content. Here the content is not only text. It refers to whatever element used to communicate with the user. A content strategist might even have a call over the design element that the visual designer created, because it communicates something to the user. It is important to convey the right things in the right way to the user for a consistent ‘tone of voice’.

  • A passionate writer and communicator.
  • Should have impeccable command over the language and grammar.
  • Exposure to latest trends and developments in the web world will make a content strategist more desirable.
  • Ability to appreciate design.

7. Usability Expert

They are the Nielsen and Norman of a UX team. With much established techniques and tools available a qualified usability expert is always an asset to the team. They are responsible for assessing and making sure the product ships out as a usable unit. Most often, usability comments are best consumed at the initial stages of conceptualization, as keeping the very basic usability issues in mind can help the team move in the right direction. Also methods used to conduct user research and similar exercises can prove to be life-saving for highly sensitive which are:

  • Extensive experience in conducting usability tests and other usability related tasks.
  • Strong understanding on the working of the product, from a user’s perspective.
  • A good communicator.

Building a productive team takes time, dedication and lots of effort. Bringing in just the right skills may not always work. It is always important to bring in a balance to the team, by smartly utilizing fresh talent, setting goals and enabling each of them to have a sense of belonging and ownership within the team. While everything above is based on my experience in the field there are lots of other factors that some into play while building a team that delivers. The attitude, the passion, the thought processes, everything can make a major difference. Personally I believe in having members driven by passion and interest in the field, rather than just professional and academic achievements, and this has so far helped us in bring the right blend of talent to the team.

These are the words of wisdom which my diverse career has gifted me with. I would be excited to know more about this topic from experts and passionate UX practitioners. Share your thoughts, experience, and suggestions on building a rocking Experience Design team!

July 17 2012


Are You Giving Your Users Positive Feedback?


We love to tell users that they have done something wrong. We have error messages for everything from poorly formatted telephone numbers to incorrect logins. But what about our user’s successes, do we celebrate them? Do we tell them they are doing something right?

It is as important to tell users that they are doing things right, as it is to inform them when they make a mistake. This kind of positive reinforcement is key to a pleasurable user experience. In this post, I want to explain why positive feedback matters, suggest when it is appropriate and how to integrate it into your website.

We begin by asking why positive reinforcement matters.

Why Positive Reinforcement Matters

Have you ever considered why a majority of us may dislike virtual keyboards? One of the primary reasons is that a virtual keyboard cannot provide the same level of feedback as a physical one.

Virtual keyboard manufacturers have worked hard to provide positive reinforcement using sound and the pop-up keys (such as the ones found on the iPad). However, these do not match the positive feedback one gets from using a physical keyboard. The sounds are annoyingly artificial and virtual keyboards are unable to replicate the tactile feedback of using a physical key.

Keyboard on iPad
We tend to dislike virtual keyboards because they cannot provide the same level of feedback as a physical one.

The example of a virtual keyboard illustrates how important it is to provide positive reinforcement for users of our websites. As with virtual keyboards, the lack of positive feedback leaves the user with a less pleasurable experience.

Many users lack confidence (either in their own abilities, or in the reliability of your website). They worry about whether they had done something wrong or whether the website has understood what it was that they wanted to achieve. In many cases this is because they don’t really understand how websites and computers work. The result is that they blame themselves when something goes wrong, presuming that their ignorance has led them to make a mistake.

By providing positive reinforcement we reduce these worries and give the user confidence that everything is going smoothly. This is particularly important for users who lack confidence in their own abilities (for example, the elderly). These users are often perfectly competent. However, because they lack confidence they second guess their decisions, which significantly undermines their experience.

Positive reinforcement does not just give the user confidence that they are doing something right, it also eliminates doubt about whether something has gone wrong. This can prevent a user from undoing something that they have done correctly.

A good example of this is an e-commerce transaction. Have you ever submitted an order to an e-commerce website and been left wondering whether the transaction is being processed because the page was taking longer to load than you expected?

A simple piece of positive reinforcement (such as an update telling the user that the order is still being processed) would resolve this problem, and prevents people from hitting the back button.

Example order processing box for ecommerce site
By keeping the user up-to-date you reduce their anxiety that something has gone wrong.

All of this doubt and confusion significantly slows the user down. They find themselves re-entering data, re-submitting forms and constantly using the back button. A small amount of positive reinforcement will significantly increase the speed with which they complete tasks.

With the benefits of positive feedback clear, when should we use it? When does the user need encouragement that they aren’t making mistakes and that the website is doing what they expect?

When Positive Reinforcement Is Required

The most obvious place to provide positive reinforcement is when a user is entering data. Whether registering, logging in, making a purchase, posting a comment, updating a status, or interacting with a Web application, data entry accounts for a large proportion of our interactions online.

It also represents the greatest likelihood of error, and users know this. As a result they often lack confidence in their data entry skills, and need some reassurance. This is especially true when entering data such as email addresses, passwords and postal codes. signup with positive feedback
Graze speeds up the process of completing their signup form by showing a tick when you complete a field correctly.

Data entry is not the only (or even most common) form of user interaction—users interact with your website every time they click on a link. It surprises me how many websites fail to show the user that they have successfully clicked on a link, yet instead, rely on the browser to provide feedback.

Smashing Magazine active link state
Smashing Magazine leaves the user with no doubt that a link has been successfully clicked (screenshot of Monthly Desktop Wallpapers).

Relying on the browser to provide positive feedback can be problematic as the user may miss it. This is because the browser shows that it is loading a page using the address bar, while the user’s attention is on the link that they have just clicked. This can lead to the user clicking on the same link again.

Smashing Magazine homepage showing user attention
If the user is looking at a link, they may miss updates in the address bar.

The problem of feedback and attention being in two different places extends beyond links. There are many situations when a user’s interaction results in something changing elsewhere on the page. These kinds of changes are easily missed and some more obvious feedback is often required.

A common example of this would be adding an item to a shopping basket. Because the user’s focus is on the item they are adding, it can be easy for them to miss the basket updating. In such situations it is necessary to update the item itself to show it has been added.

Product listings on Wiltshire Farm Foods
When an item is being added into the basket on the Wiltshire Farm Foods’ website, the appearance of the product changes significantly.

Not that this is just an issue of distance between focus and the change on the page, it is also one of subtly. For example, a basket updating could be as subtle as a number incrementing from one item to two. This is easy to miss, even if the user’s attention is in the right place.

When a user’s interaction triggers a subtle page update, it is often necessary to provide some stronger feedback to reassure the user that their action has had the desired result.

How you provide that positive reinforcement will vary from website to website. There are a number of different approaches you may wish to consider…

Ways To Implement Positive Reinforcement

When a user makes a mistake, we normally inform them by displaying a textual error message. It is therefore unsurprising, that when we think of providing positive feedback, we also turn to textual messaging.

However, I believe we should be careful when providing positive feedback in a textual form. The problem with this approach is that text forces the user to shift their attention and read the message. This slows down the completion of their task rather than encouraging them to move forward.

That said, there are occasions when text can be effective for providing positive reinforcement. For example, if the user has just clicked an “add to basket” button, it may be appropriate to re-label the button to read “add another”. By changing the text you make it clear that one item has already been added, and encourages the user to move on to the next task. The other benefit to this approach is that the user is seeing a change where they are currently looking (the button that they have just clicked) rather than elsewhere on the screen (such as the basket, which they might miss).

Two buttons. First with the label add to basket and the second with the label add another to your basket
Changing the labelling on an add to basket button can bring clarity to a user’s interaction.

Visual Feedback

If we are going to limit the use of text as a method of positive feedback, a better alternative is to use design signals. These could include changes in imagery, styling, color, or size.

Examples may include altering the color of a link when clicked, adding a tick after a field that has been correctly completed, or highlighting an updated portion of the page.

An important example of this kind of positive design feedback would be the cursor state. Users have come to expect the cursor to change into a hand when they rollover an interactive element (such as a link or a button). When it fails to do so, the absence of this positive feedback causes confusion. Yet, despite this well known behavior, too many interactive elements on websites do not demonstrate this behavior.

Cursor state on
Without this cursor state, a user may be unsure whether they can click this box.

Feedback Using Animation

Another visual way to provide positive feedback is through animation. There are some great examples of how subtle animation can draw a user’s attention to an error (like the slight vibration you see if you enter the wrong log-in details for WordPress). These same principles can be applied to positive feedback, as well.

A common example of using animation to provide positive feedback would be when users click on an anchor link. By default this jumps the user down the page which can be a very disconcerting experience. However, a smooth scrolling animation combined with a highlighting of the destination can make it clear that what the user had expected has actually happened.

Animation can also be used on e-commerce websites to indicate an item has been added to a basket. Whether it is the basket expanding (to show the new item) or the product physically ‘flying’ towards the basket, these animations reassure the user that their intended action has been completed.

Animation can be a useful tool to show that an action has been completed.

I believe animation is an under-utilized way of providing positive feedback and is something we should be exploring further on our websites. However, it is not the only method that is under-utilized—there is also the use of audio.

Audio Feedback

Do you wait for that “whoosh” noise when you send an email? That is an audible signal that the email has sent successfully. What about those little pings, beeps and twerps that notify you that something has happened on your computer or mobile device? Whether we realize it or not, most of us are reliant on this kind of audio feedback that reassures us that an action has happened.

New email in Sparrow
When sending an email we are very reliant on the audible feedback to ensure us that it has been sent.

Why then do we shy away from using audio on our websites? Audio is an excellent tool for providing positive feedback and yet few websites use it.

Maybe our reluctance is because audio can be annoying. The history of the Web is littered with examples of annoying audio loops or background music that you cannot mute. However, you could equally argue that the Web is littered with bad design and animation (but still, that doesn’t stop us from using these tools).

Others may argue that audio is not appropriate in a work environment. Although I would generally agree, the audio we are talking about using here is no different to the audio notifications used by a plethora of desktop applications that are common in an office environment.

An audible click is a great way to tell a user they have clicked on a link. A “cha-ching” would be the perfect way of letting a customer know they have added something to a shopping cart. Audio is a powerful tool that we are currently under-utilizing.

Much To Learn And Discuss

Whether you use audio, design, animation, or text, we should be providing users with more positive feedback for their actions. It gives a user confidence that in turn increases the speed in which they move through your website (and their level of satisfaction). We have still have much to learn about how to provide positive feedback for users, and we would be especially interested to hear your thoughts in the comments below.

  • Is audio a good tool for feedback?
  • What examples of positive feedback have inspired you?
  • Do you perceive dangers in providing too much feedback to users?

Let us know your thoughts!

(jvb) (il)

Image used on front page is owned by opensourceway.

© Paul Boag for Smashing Magazine, 2012.

Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
Could not load more posts
Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
Just a second, loading more posts...
You've reached the end.
No Soup for you

Don't be the product, buy the product!

YES, I want to SOUP ●UP for ...