BlogmyQuery – BMQ

The Web is technical by nature. Different scripts and pieces of code are linked together through hyperlinks, forming an endless net of interwoven, encrypted information — data that is accessible only through technical interfaces, such as Web browsers, or applications. Yet, Web professionals have made it their calling to tame the “wildâ€� Web and turn it into an accessible, user-friendly and, most of all, personal medium.

Personality will set your brand apart from competitors and help you connect with a passionate audience.

– Aaron Walter

Designers can do plenty of things to counteract the technical appearance of the Web. One very effective way is simply to make it look less technical, by using a more human, personal style.

In this article, we will discuss different aspects of freehand drawing and writing in Web design and how they can enhance the user experience of your website.

Identity And Authenticity

Freehand drawings and other sketched elements are a great way to show personality and convey a feeling of authenticity. Imagine getting a letter or greeting card from someone you cherish. Do you expect the text to be typed or handwritten? A handwritten note is way more personal than a computer-written one, right? On the Web, it’s similar. It might be a different medium, but content that obviously comes directly from a human is more authentic and more trustworthy. Let’s look at three examples of how freehand drawings can help you create an identity and stay authentic.

Look and Feel

First of all, hand-drawn content has a unique look and feel. Compare it to handwriting. Creating a personality and unique appearance for your brand or product is important.

The look and feel of Balsamiq is authentic and distinctive.

Balsamiq does a great job here. It offers a mockup and wireframing tool. While its features are quite advanced, its look and feel is basic, recalling pen and paper sketches from way back. The low fidelity helps us focus on the essential functionality while also making the product authentic and distinctive.

Recognition

Freehand drawings have character. Through the touch of human imperfection, they gain a certain tension that is hard to recreate digitally. This special touch draws attention and allows people to pause to appreciate and process the hand-drawn content, more so than they might appreciate any old perfectly illustrated image.

Notepad++’s logo is distinctive and easy to remember.

The source-code editor Notepad++ has a distinctive hand-drawn logo. The little chameleon not only reflects the functionality of the program (the transformation of code), but is also cute and draws attention. The sketched style reflects the creative nature of what you can do with Notepad++ and makes sure you don’t confuse it with other editing tools.

Personality

Obviously, freehand drawings carry personality. They are authentic and help users to connect with your website or app. Hand-drawn content confirms that real people are behind the content, people who have put thought and effort into the design to make it usable and trustworthy.

Mathboard looks personal and easy to use.

MathBoard is an iPad app that help kids practice their arithmetic skills. The app has a classic chalkboard look, freshening up the dry and precise character of arithmetic. The whole app is set up in quiz form, and kids can actually write on the board to do rough work if needed. The personal appearance of the app makes it easy and attractive to use.

Information And Content

The way you present information on your website determines whether people will see it and, even still, understand it. Draw attention to your content at the right time in the user’s visit to your website. The content should look attractive and promising enough to involve the visitor. Information must be clear, relevant and actionable in order to be effective. Below are three examples of ways in which freehand styles can make the presentation of your content more effective.

Explain Features

You can use freehand drawings to explain your product, such as its features. Creatives often use simple sketches to explain a concept or present an idea that might otherwise take ages to put into words. With your website, you encounter a similar situation. You’ll have a product, concept or idea that you want to get across to visitors. By using hand-drawn icons or simple sketches, you create an intimate atmosphere, as if you were speaking to your visitors directly.

Stickies conjures the idea of presentations. (Image: TestFlight)

Online service TestFlight makes use of just this effect. In addition to the many other hand-drawn elements on its website, the company points out its main features with simple sketched sticky notes, accompanied only by a few brief lines of text. This conjures the idea of presentations, drawing attention to the features one by one to make them more clear.

Visualize Workflows

Freehand style is also a great way to familiarize visitors with your workflows. No one expects you to come up with the perfect solution out of thin air. The fact that you admit that a process is involved and that this process can be rough and bumpy only makes you human and likeable. It demonstrates that you try out different directions before deciding on the right track.

This hand-drawn workflow conveys creativity and a thorough working process. (Image: Alex Faure)

Designer and front-end developer Alex Faure demonstrates well how a hand-drawn visualization of a workflow can educate visitors and build trust. He seems to not only know what he is doing, but also thinks things through and involves his clients in the process.

Guide Users

Whether you are designing a website or an app, keeping your users in mind and guiding them towards the various goals they might have is always important. Hand-drawn icons can be a good way to do so. It’s no secret that icons are helpful when navigating a website or app. Why would hand-drawn icons be any different? While perfectly illustrated icons might be more detailed and clearer, they are computer-made and can easily look sterile and technical. Hand-drawn icons are personal, and we are more inclined to accept guidance from another human than from a machine.

We are more inclined to accept guidance from humans. (Image: Spamped)

The iPhone app Spamped uses very nice, meaningful icons to guide users. The app enables you to stamp and share your favorite things, such as places, books and movies. The hand-drawn style perfectly matches the personal nature of the app, encouraging users to keep stamping.

Team Presentation

The importance of team pages increases continually. While we used to accept a certain level of anonymity on the Web, we are now eager to know who is behind a website, service or product. Also, having the hypothetical option to contact someone is not enough; we want to know exactly who we would be contacting. The more personal your team presentation, the more likely your visitors will trust you. Here are some suggestions on how to enhance your team presentation with hand-drawn elements.

Be Likeable

Being perceived as likeable is important. Even if you offer a ton of information on yourself, if people think you are arrogant or too extravagant, it will do no good. We are much more willing to trust someone we like than someone whose character we cannot asses. Hand-drawn elements can make you more likeable by making you look creative, spontaneous and easy-going.

We are more willing to trust people we like. (Image: Knock Knock Factory)

The Knock Knock Factory welcomes its visitors with a personal and likeable presentation of its team. The pictograms sketched on the chalkboard in the background say a lot about Keith, the “fearless leader.� The company obviously considers it important to give visitors a clear picture of who they are about to deal with. It’s catchy and gives visitors a positive feeling, before they have even looked around the rest of the website. It creates an immediate personal connection and makes the visitor feel welcome to the website.

Be Trustworthy

Besides likability, trustworthiness is also important. At the end of the day, anyone can hide behind a website, pretending to be someone they are not. Showing authenticity is a great way to make sure visitors take you for who you are. Only if people trust you will they open up to what you have to say or engage in your desired actions, such as buying the product. Hand-drawn elements are usually not the easiest content to produce for a design; they require skills such as creativity and passion — skills we associate with honest and trustworthy people.

We feel more comfortable around people we trust. (Image: Polecat)

The software agency Polecat has found a trustworthy way to introduce itself. Instead of realistic photographs, it has put thought and passion in its team presentation, using abstract yet creative illustrations. The illustrations have a rough and sketchy look to them, making them even more human. And only first names are disclosed, giving an easy-going, familiar feeling.

Be Real

An important aspect of trustworthiness is authenticity. Your visitors must not doubt that you really exist and that you exist in the way that you present yourself on your website. The Web can be a scary place, especially considering that users will probably never meet the people behind websites in person. Anyone can use a Web font, but handwriting and hand-drawn elements reveal something about your person, making you look more real.

The authenticity of a team is important. (Image: Grove)

The people at Grove found the perfect balance between creative, carefree and authentic for their team presentation. Snapshots of all team members are neatly arranged as Polaroids, with the names looking handwritten. It looks as if someone walked through their work space, taking Polaroids of everyone, including the team’s dog. Does it get more real than that?

Storytelling

Freehand drawings are a great way to tell stories. Storytelling is extremely personal, an ancient means of communication, mediated at most (back then) by a cave wall. This basic method of exchanging information transcends all technical advances and gives us a comforting, human feeling. Sketches help us ignore the impersonal nature of the Web and put a face to the humans behind it.

Entertain

Entertainment entails emotional involvement — something that is much easier to achieve when humans are involved, rather than mindless machines. On the Web, hand drawings are a great way to establish a familiar and human experience, one that helps visitors to relax and enjoy themselves.

Drawings create a familiar and human experience. (Image: Axure)

The prototyping tool Axure welcomes visitors to its home page with an amusing yet informative story about UX Man, who is “accused of having superhuman powers.� The freehand style of the drawing is eye-catching. There is no reason to doubt that a lot of thought has gone into this fun and inviting landing page.

Explain

Hand-drawn stories grab our attention because we like to recognize human elements on the Web. Whereas a too-clean Photoshopped image might not gain our trust, hand drawings appeal directly to our emotions, making us more attentive and receptive to information.

Hand drawings appeal directly to our emotions. (Image: SignNow)

The app SignNow uses hand-drawn images to explain its main benefits right on the home page. The way it lines up the benefits, connected by the “flying� documents, creates a narrative. You can almost hear someone explaining the images as you read the descriptions below. The story draws visitors in, making it easy to follow.

Engage

Personalized elements such as freehand drawings also engage visitors. Along with user experience, “user engagement� has also become a hot topic. Once engaged, we are interested and willing to perceive and process the information given to us. So, a website that manages to engage us has already made a big step towards a positive user experience.

A website that manages to engage us has made a big step towards a positive user experience. (Image: TouristEye)

Travel app TouristEye engages effectively with a good story. The step-by-step introduction to its product is turned into a small adventure story, a treasure hunt waiting to be solved. Even without the text, the drawings are meaningful and reflect the free spirit of a trip.

Attention-Grabbers

Freehand elements, such as handwriting, are just not what we expect in a technical medium like the Web. They go against the straight lines and symmetry that we associate with the Web. Thus, a perfect opportunity to grab the visitor’s attention. Handwritten comments and instructions feel human and make us feel like we are being addressed directly.

Invite

You can use this personal method of communication for different things. First, you could easily invite visitors to perform certain actions, such as liking you on various social media platforms or sharing your content. We are more likely to respond to messages that appear to concern only us, not the general public. Even though the message is on your website for everyone to see, you can create a feeling of connectedness by addressing visitors directly.

We respond more likely to personal messages. (Image: Weezbe)

Weezbe use a handwritten message on its landing page, together with a happy smiley and an arrow that guides the visitor’s eye to the green button. The header is simple yet effective, drawing attention to the call-to-action button without being intrusive or annoying.

Make Curious

You can also use hand-drawn elements to make visitors curious and, in doing so, to guide their line of vision and trigger certain actions. For example, arrows are a great way to guide the attention of visitors.

Hand-drawn elements can make visitors curious. (Image: Radley Yeldar)

The creative agency Radley Yeldar shows a minimalist drawing of a hand that appears to be tapping on the screen, along with the line “This is not just a footer.� The visitor is motivated to mimic the gesture of the hand and click on the screen, if only to find out what happens. This is a great subtle way to bring the footer to the visitor’s attention.

Point Out Details

Last but not least, hand-drawn elements can be handy for pointing out details. Again, it’s all about grabbing the visitor’s attention and drawing it to the relevant area. Just as you use arrows and other marks to highlight content in a book or other offline medium, these elements work great on your Website. After all, highlighted elements bear a certain importance that makes them worth checking out.

Highlighted elements are expected to be important. (Image: Orbit)

Orbit uses hand-drawn arrows to point out adjustable elements of its image slider plugin. The hand-drawn quality of the arrows draws attention to the defined areas of the slider, and it also stands out, obviously not being part of the slider itself.

Don’t Overdo It

Sometimes, freehand drawing doesn’t suit the nature of a website. Make sure not to overdo it and that visitors would truly appreciate a more personal design. Don’t hesitate to ask visitors if you are not sure how far to go; for example, by conducting a live survey on your website.

While certainly many examples are out there of how not to use hand-drawings on a website, let’s look at only one. The aim of this article is to point out positive examples and offer ideas on how a freehand style can improve the user experience, but it is also important to be aware that it’s not always effective and that you should use hand-drawn elements within reason.

The overdone hand drawings make the buttons look obtrusive and pushy. (Image: Joshua Keenes)

For example, designer Joshua Keenes uses hand-drawings to draw attention to his social media buttons. While the concept might work, the fact that he overdoes it has two side effects. First, so much is going on that your attention gets lost before even getting to the actual target, making you lose focus before taking any action. Secondly, the invitation to hit one of the buttons becomes quite obtrusive and pushy, likely scaring people away, rather than welcoming them to the social community.

Conclusion

Having a personal experience on the Web is becoming increasingly important. We no longer want to visit cold, formal and anonymous websites. Rather, we want to feel comfortable surfing the Web and to meet the people behind a website, and we need to trust them before we are willing to interact with their website.

Freehand drawings have a human quality, the perfect bridge over the gap between the technical, impersonal Web and the accessible, user-friendly and personal experience that we expect today.

(al)

© Sabina Idler for Smashing Magazine, 2012.

The way you present your product or service is essential to its success — or at least it could be if you know how to do it right. On the Web, like anywhere else, the first impression you make on people is crucial. When selling a product, you want that first impression to be as positive and remarkable as possible.

Once people visit your website, make sure to attract their attention. If you have managed to draw them in, you will need to introduce the product within a few seconds. According to last year’s Google Analytics benchmarking report, bounce rates in the US were as high as 42.5%. If people don’t understand what you are offering them or how it works, they will lose interest quickly. Show them that your product is just what they want, that it’s useful and that it adds some kind of value to their lives.

A smart product presentation does all of that. Here, we will cover different aspects of a product presentation and give examples of how to use them to your advantage. The idea is to give you an overview of the different elements that make a product page successful.

Attract Attention

Before convincing anyone of the quality of your product, you need to make sure it gets noticed. No matter whether people are looking for your particular product, once you have caught their attention, you are in a good position to arouse their interest and get them engaged. The things you can do to catch the user’s eye are limited only by your creativity. Here are three examples that we believe are effective.

Stand Out From the Crowd

Countless companies and people freelance in the creative sectors, and all of them offer some kind of information about their services and prior work. Usually, you can browse portfolios to find a bunch of boring screenshots accompanied by even more boring information.

(Image: Chris Bower)

Web designer Chris Bower has found a unique and appealing way to demonstrate his expertise. His professional presentation of his work on various devices accomplishes three things. It is the ultimate eye-catcher on an otherwise clean website; it conveys the designer’s quality because it looks truly professional; and it shows that Chris designs for any device you can think of. With only a glance at his home page, you know whether to enter or leave the website.

Surprise Your Visitors

Another great way to attract attention is by surprising visitors. Offer them something they did not expect; make them pause and think to make sense of what they see. We like to be surrounded by the familiar, and things that don’t fit our expectations automatically draw our attention.

(Image: Nike)

Nike presents its new running shoes in the shape of wings, with the promise of a “Super-natural ride.� The arrangement of these multi-colored shoes and the fade in the middle almost force people to take a second look. The visual is not only appealing, but attracts attention because people are not sure whether they are looking at wings or shoes or both.

People Love Humor

Plenty of products out there are easy to promote, whether because of their function, popularity or unique look. Other products are less conducive to effective marketing and require a more creative approach.

(Image: Evian)

One such example is the brand Evian. How could boring water possibly attract attention? Quite simple, actually. Come up with a product-related slogan, such as “Live young,â€� and then translate that slogan into a visual campaign using some great humor. A couple of years back, Evian’s funny campaign videos went viral — proof that its unique approach works.

Explain The Product

The way you present the product is crucial to people’s first impression of both you and the product — including what they think of you and whether they understand the nature of the product. Online services and new products especially need clarification in order for the audience to make sense of them. Obviously, if people don’t get your product or understand why they would need it, they won’t pay for it.

Introduce the Product

With the ease of access to technologies such as the Internet, the number of inventions has significantly increased. Any ready idea nowadays can be turned into a product or service, but some of these ideas are so abstract that they require careful explanation.

(Image: Tickera)

The people behind Tickera recognized a need to carefully explain what their system is about. Their home page is simple, and the focus is on the product and its main features. Of course, a ticketing service is not a physical product that you can arrange nicely and take pictures of. But they did a great job of translating their service into a beautiful and trustworthy visual. With only a look, it becomes clear what Tickera is about.

How Does It Work?

Related to how you present the product is your explanation of how it works. Basically, you can do this by showing the product in action. And there is a big difference between showing a screenshot of software and showing the software on the device it is intended for.

(Image: Square)

Square is a perfect example of how to present a product and demonstrate what it is and how it works. The high-resolution image shows how simple collecting and processing credit-card payments on the go can be. All you need is the little Square card reader, an iPhone and the app — no words needed to convey the value of this product.

Convince People That They Need It

It could happen that people understand how your product works but don’t recognize its potential benefit to them. This is why you should point out the advantages that people will get from your product. People consider something to be more relevant if they can relate it to themselves.

(Image: Action Method)

The task-management tool Action Method focuses on its main advantage to the user: always being in sync. Seeing these different devices together, the visitor can see that this app could make life much easier for them. Perhaps they’re thinking about how annoying it is to take notes on a laptop and not be able to access them later on from a different device.

Focus On The Main Selling Point

Most products have many features but only a few or even one selling point that makes them special. Distancing yourself from competitors is important, whether through hardware features, design, service or something else. Point out this difference when presenting the product and show people that the product is different, special and better.

Quality

Quality is an effective selling point. And if the product costs a lot, people will want to be especially sure they are getting good quality in return. Competitors might offer the same product or feature but not the same quality. Reflect the quality of the product in your presentation of it.

(Image: Chanel)

Chanel present all of its products in high-resolution photographs. The images were obviously taken by professionals. The white watch above is bedded in perfectly white soft feathers. The image is extremely detailed, the viewer instantly gets a feel for the quality and luxury of the brand.

Features

Whatever your product, chances are high that at least one competitor offers something similar. To convince people that yours is the better choice, focus on features — particularly those that are relevant or essential to your target group.

(Image: HTC)

All smartphones basically offer the same functions. For example, they enable people to make calls, send messages and connect to the Internet. Instead of listing all of the things that all smartphones can do, HTC focuses on special features that are of concern to its target group: camera and sound.

Customization

People love products that have some personal meaning for them. That’s why we love to personalize our possessions, such as phone settings, laptop screens and clothing style. Customizing things helps us shape our identity, which is why customizable products are more special to us.

(Image: Converse)

Offer customization options to connect customers to your brand and products. Converse really makes a point that people can design their own sneakers. Being able to customize your own shoes definitely adds value to the brand.

Don’t Underestimate Copywriting

On the Web, our senses are limited. We send messages blindly, without looking our correspondent in the eyes. However, our limited senses should not limit our creativity. We can use more than plain images and text to make our point. Our message is shaped by our choice of words, typeface, font size and even punctuation.

Play With Words

Puns are a great way to attract attention because they wrap a message in a familiar concept. You are giving visitors something they recognize and are linking it to your own message. Wordplay can be used to explain a concept quickly and convey familiarity.

(Image: Apple)

Apple does this very effectively. It pioneered the tablet and puts everything into showing that it is the best in the field. The iPad 3 has a revolutionary display, which is the main selling point of this latest version. The pun “Resolutionary� is powerful and demonstrates in a single word the high quality of the product.

Don’t Get Too Serious

A good laugh helps people bond. You can surely think of more than one example of an inside joke that fostered a sense of connectedness and belonging. The same can be done online. A funny or ironic headline could be all you need to sell a product. Obviously, you can do both: bond with visitors and send a meaningful message.

(Image: Jax Vineyards)

A perfect example of a funny and powerful headline can be found on the website of Jax Vineyards: “Your food should be so lucky.� Of course, your food would not actually be lucky, no matter which wine you pair it with, but the idea of cherishing your food by choosing the right wine is appealing. Imagine spending hours preparing the perfect dinner; spoiling it with the wrong wine would be a shame, right?

Use Metaphors

Metaphors can bring copy — and, by extension, the product — to life. Metaphors help us understand the world around us and make sense of unfamiliar things. Abstract ideas such as the reason why your product is so special could also be easily explained with the right metaphor.

(Image: Adidas)

Adidas promotes its new running shoe with the slogan, “Sweat nothing, climacool seduction.â€� The melody of the words and the association triggered by the word “seductionâ€� could easily cause us to misread the slogan as “Sweet nothing, climacool seduction.â€� The ad gains a risqué charm, giving off a light and comfortable feeling — perhaps acquiring an association with alluring lingerie. The link between running shoes and lingerie is not at all obvious, but it works brilliantly and transfers a positive and familiar association to a new line of running shoes.

Make Use of Context

The context in which you present a product is just as important as the product itself, if not more so. It is the space in which you show the product in action. It is the accumulation of associations that trigger emotions in customers. It draws people in and convinces them that they need your product.

Awake Desires

Motion pictures are a great way to draw people into a different world. Why else do we go to the movies, if not to escape our everyday lives and immerse ourselves in some romantic love story or surrealistic adventure? You can use the same effect on your customers and enable them to experience, say, the pleasure of a vacation.

(Image: Post Ranch Inn)

The 24-hour time-lapse video of the idyllic Post Ranch Inn gives visitors the feeling that they have already been there. The website takes you on a journey from sunrise to sunset, whisking you away from your desk on a long-awaited and deserved vacation.

Trigger positive emotions

You can also use a narrative or mascot to add value to the product. Focusing not on the product itself but on the emotions that come with it is a clever strategy. Customers might have plenty of options, but if you sell them the right feeling, they will be easily convinced.

(Image: Fanta)

Fanta uses animated characters who enjoy life to the fullest and have a lot of fun. The slogan “More Fanta. Less Serious.� communicates the idea that Fanta will relax you and let you have fun. There is no reference to the drink itself, such as ingredients. The only thing you see is the emotional triggers of happy characters and bright positive colors.

Appeal to Your Target Group

Every target group is different, with different interests, levels of knowledge, expectations and so on. Clearly define your target group to make sure you appeal to the right people. Defining a target group means truly understanding what makes them tick: their motivations, goals and habits. Only with a clear picture of who you are designing for will you be able to create a product that people really need and desire.

(Image: Olay)

Products like the age-defying line from Olay have a clearly defined target group: middle-aged women. Products for the body — especially related to sensitive subjects, such as aging — are considered intimate and require a high level of trust. Olay appeals to just that desire and presents its products in a professional yet familiar and trustworthy way.

Offer Sufficient Information

Factual information can be important to selling a product. People make rational decisions based on factual information, especially when purchasing expensive items — at least they like to think so. Factual information not only answers questions people might have about the product, but makes people more confident in their decision.

Highlight Advantages

Facts are a great way to point out a product’s advantages. Clear statements and factual information can be very convincing, and that’s what you intend to do at the end of the day, right?

(Image: Heineken)

You would not necessarily expect a beer brand to volunteer factual information. Yet Heineken presents its tap beer with clarity and sophistication. The information is given a serious and refined atmosphere, instead of Heineken’s usual fun style.

Make Detailed Information Optional

For some products, people really need certain information before being able to decide. This information could be a list of features, technical specifications or anything else. If your product requires such information, make sure people don’t have to hunt for it.

(Image: Viking)

Viking presents a high-resolution image along with a simple textual description. The first impression is very clean. Of course, when buying a lawn mower, a person needs more detailed information; thus, technical specifications and equipment details are neatly included in separate tabs.

Convince With Facts

Use facts to underpin the message that you are conveying visually. Information helps a person feel more confident if it confirms something they already feel.

(Image: Porsche)

No one really needs a sports car. But people do want them, and they buy them for leisure. Porsche uses a lot of great visuals to convey a feeling of speed, excitement and precision. Yet it also offers some information with these visuals — some, though, not much; just enough to underpin the emotions conveyed by the image: power, independence and luxury.

Conclusion

Whether you are selling a gadget, software, service or anything else, your presentation will have a direct impact on people’s first impression. And on the Web, which offers many choices and where people can leave your website in a mouse click, this first impression is crucial to your relationship with visitors and to gaining new customers.

A good presentation will draw the visitor’s attention, help them understand the product and even convince them to buy it. Use sketches, detailed illustrations or vivid photographs to communicate your message. Together with thoughtfully written copy, this presentation could well be the most important asset on your website.

Editor’s Note: This article was created using a new tool from Usabilla, that allows you to collect and discover design elements, like the ones presented in this article. Find more design elements at: discover.usabilla.com.

(al) (fi)

© Sabina Idler for Smashing Magazine, 2012.

Emotional design has become a powerful tool in creating exceptional user experiences for websites. However, emotions did not use to play such an important role on the Web. Actually, they did not use to play any role at all; rather, they were drowned by a flood of rational functionality and efficiency.

We were so busy trying to adapt to the World Wide Web as a new medium that we lost sight of its full potential. Instead of using the Internet on our terms, we adapted to its technical and, at first, impersonal nature. If it wasn’t for visionary contemporaries such as Don Norman or Aaron Walter, we might still be focusing on improving processes, neglecting the potential of emotional design.

In his book Emotional Design, Norman describes why “attractive things work better.� He explains how attractive products trigger our creativity and ultimately expand our mental processes, making us more tolerant of minor difficulties. What he is saying is that attractive products make problem-solving easier, which makes them absolutely essential. Emotional Design is Norman’s reaction to critics who said that if they followed his rules, their designs would be only functional but ugly. So, he conducted the necessary research and came up with three levels of visual design that all need to be considered in order for a design to be both usable and pretty.

User experience designer Aaron Walter contributed another great book to this new era of design: Designing for Emotion. In this book, he defines emotions as the “lingua franca of humanity,� the native tongue that every human is born with. He describes how important emotional experiences are because they make a profound imprint on our long-term memory and create “an experience for users that makes them feel like there’s a person, not a machine, at the other end of the connection�.

Norman and Walter have recognized that emotions are key to the full potential of contemporary Web design. Let’s follow their example and learn how we can contribute to a more personal, more targeted and more emotional World Wide Web.

In this article, we’ll recap the foundation of a good design, take a look at Norman’s three levels of visual design and introduce practical ways to build emotion into a website.

(Image credits: perpetualplum. and geishaboy500)

Foundation Of Good Design

A couple of things form the foundation of any good design, whether the design is emotional or not. Why are we talking about the foundation of a design here? Think of the construction of a house. First, you need a solid foundation; then, you can start to plan the division of space and build walls. In Web design it’s the same; you need to know your internal design goals, who your users are and in what context they will use your website. Once this groundwork is done, you can get started on the design.

Internal Design Goals

Before you get started on anything, ask yourself what your own goals are. This does not mean you should put yourself at the center of attention for the rest of the process, but it is important to know what image you want to communicate, what your values and visions are, and how you want others to see you. With this knowledge at hand, you are armed to be very clear and consistent not only in your actions, but also in your appearance. A certain amount of continuity and predictability adds to your reliability, which is important for getting people to commit to a relationship with you.

Prospective Users

Know who you are designing for. Your future users will be the people who purchase and use your product or website, so make sure you know what they want. General demographics will give you a rough picture of who you are targeting. By drawing a clear picture of their goals, how they are going to use your website, and what matters and doesn’t matter to them, you will learn how to target your users. Without knowing your prospective users, designing something relevant that is both usable and pleasurable will be quite tricky.

Context of Use

Finally, think about the context of use. Knowing the situations and circumstances in which users will be visiting your website is valuable. Consider possible emotions that might be involved, and find out which role you and your users play. Be aware that knowing the context of use will make it easier for you to understand your users the moment they visit your website. It will help you reach out to your customers and to communicate with them more effectively.

Norman’s Three Levels Of Visual Design

Norman has identified three levels of visual design that designers can apply to build emotions into their products. These three levels are based on the way our brains function and can be seen as guide to a more appealing, effective, pleasurable and memorable design.

In a study on emotion that Norman conducted together with two colleagues from Northwestern University, they were able to show that different levels in our brain result in very specific and advanced human attributes. Those levels are the reason why we are able to accomplish and create things; why we can be artists, musicians and writers; why we have culture with language, art, humor and music; why we are conscious of our role in the world, a consciousness that enables us to reflect on our experiences. The three cognitive levels Norman has defined and applied to visual design are the visceral, behavioral and reflective levels. Let’s look at them one by one.

Visceral Level

The first and also lowest level is visceral. This is the level of preconsciousness, where emotional signals from our environment get interpreted automatically. The visceral level works instinctively, and both our personality and cultural values can influence how we perceive something. Impressions at this level have an immediate emotional impact on us. Norman calls activities that are initiated from the visceral level “bottom-up behavior.�

For a visual design, this means that the visceral level has to do with the initial impact of the appearance, touch and feel. The visceral quality of a design can be studied by observing people’s first impression. A good visceral design makes us feel at least something, hopefully making us happy and ideally getting us excited.

Vimeo has an appealing footer. The design has no other function than to catch people’s attention. (Image: mattyschreck)

Behavioral Level

The behavioral level is all about how things work and how we use and experience them. What matters on this level is function, performance and the physical feel of something.

A visual design would need to feature relevant functions that fulfill actual needs. Behavioral design needs to be understandable and usable. While confusion and frustration lead to negative emotions, fun, ease of use and effectiveness trigger positive emotions. To ensure a good behavioral design, you have to really know your user’s needs — for example, by observing how they interact with the design in the field.

The iPad’s split keyboard has phantom buttons. This way, if you are used to typing the letter Y with your left hand, you can still do it. (Image: Finer Things in iOS)

Reflective Level

The reflective level represents the highest level of our cognitive thought processes. Norman calls activities that come from this level “top-down behavior.� This level is conscious and capable of a high level of feelings, emotions and cognition. On the reflective level, we interpret and understand things, we reason about the world, and we reflect on ourselves. The reflective level sets in after having been exercised, and it dominates the other two levels, which means that through extensive reasoning, we can overrule both automated behavior and emotional impact.

In visual design, expertise enables us to respond differently to a design than if we had no idea what we are looking at. The reflective design defines our overall impression of a product, since we reflect on all aspects of it: messages sent, cultural aspects, the meaning of the product and whether it’s worth remembering.

US highways mapped like a subway system. This infographic has a great reflective design. (Image: Cameron Booth).

In every good design, all three levels work together. The need not be equally weighted, but because we perceive a visual design on all three cognitive levels, they should all at least be addressed. These different levels of visual design might conflict, though. For example, our opinion of a design after having thought about it might diverge from our initial impression of it. Also, people interpret designs differently and have different preferences for the visceral, behavioral and reflective qualities of a design.

So, the appearance of a design makes up only one level of visual design — the visceral design. The behavioral level relates to how the product works, and the reflective level relates to the long-term impact of the design. Combining these three levels in the right way, you can make a design…

• Appealing
  Grab the user’s attention and influence their perception.
• Effective
  Guide the user’s attention and make sure they find what they are looking for.
• Pleasurable
  Allow the user to appreciate your website and have fun.
• Memorable
  Build a relationship with the user and ensure a positive memory of you.

Implement Emotion In Your Visual Design

How can Web designers apply this knowledge? And how can we build emotions into our designs? A website usually includes several elements that can make a design more personal and that can be regarded as “emotion carriers.� Some of these are obvious, such as colors, images and shapes. Others are not so obvious, such as humor, recognition, dissonance, tone of voice and engagement. Let’s look at the less obvious ones.

Humor

Humor is an effective way to connect with people. A good laugh or even a little smile can break the ice and make people feel comfortable, whether it’s on the street, in the company of friends or on your website. However, humor is also a delicate matter because it is extremely difficult to generalize. What’s hilarious for one person might be ridiculous, embarrassing or even insulting to someone else.

When using humor on your website, think a couple of things through before launching. The foundation of design that was discussed earlier is important here. Knowing your users and the context of use will help you determine whether people will actually share your sense of funny. Also, keep in mind that you will probably not manage to make everyone smile, but avoid making people feel uncomfortable and especially offending them by any means. And don’t forget that the extent of humor on your website will influence the way users perceive you.

In Designing for Emotion Walter discusses an illustrative example of humor on the Web: Freddie von Chimpenheimer, the cartoon mascot of MailChimp. Walter describes Freddie as a friendly mascot who “welcomes users and makes them feel at home.� Freddie perfectly mirrors the brand’s traits, such as trustworthiness, simplicity and informality, without making the whole website look goofy. The mascot works because Freddie cracks jokes that “you can share with your mama,� but at the same time he never gets in the way of your workflow. This is important. Humor can get people involved, but it should never annoy visitors.

Freddie, the cartoon mascot of MailChimp, is a great emotion carrier for humor.

Recognition

By nature, we constantly seek emotional connections with others. That’s why we like to see images of faces on websites, and why we appreciate somehow recognizing ourselves. When we see a face, we are automatically triggered to feel something or to empathize with that person. If we recognize content on a website — such as a problem, dilemma, habit or whatever else — we feel connected and understood.

Walter explains in his book that we know ourselves so well that we try to relate everything we see to ourselves. We can even relate to a Web design that does not directly show human features. The recognition of our body’s proportions in a design is enough for us to perceive the design as being familiar and harmonic. This reason for this is the golden ratio, which helps us feel connected to a design because we link the abstract concept of proportion to our own body.

By recognizing ourselves in a design, we sense that there is more than just a screen with a bunch of code and images. We perceive human presence, which makes us feel comfortable and connected. Walter describes the personality of a website as the key to making a design more human.

Twitter based its redesign entirely on the golden ratio. (Image: Doug Bowman)

Dissonance

Another trait that characterizes us as humans is that we try to fit the world into patterns. Patterns help us understand and learn how things work, and they give us an idea of what to expect — and we love to know what to expect, because it makes us feel comfortable. In his article “Brains Agree: The Case for Website Usability Guidelines,â€� Todd Follansbee offers a great explanation of why we love patterns so much and of how we look for them on the Web just like everywhere else.

Usability guidelines are based on a deep understanding of how information is processed in our brains. Following these guidelines in Web design helps us offer users a consistent structure that they can fit into their mental models. As long as users recognize patterns on a website and find that everything matches their expectations, they can focus on the content and quickly achieve their goals.

However, if we build a website that doesn’t fit these patterns, we can expect two things to happen. Either users will become irritated because they can’t find what they are looking for; this might lead to frustration, which you want to avoid by any means. Or else users won’t mind being pulled out of their habits and would welcome some distraction; they might see the dissonance with their expectations as a positive or fun experience.

Again, how people react depends strongly on who they are and the context in which they use your website. If you know that visitors intend to find certain information, make sure to meet their expectations and stick with patterns they are familiar with. If you expect users to have the time and desire to explore, you can definitely play with some dissonance to get their attention and get them involved.

The branding firm Subplot has a clear layout for its website, but the navigation is fun and out of the ordinary; it engages people, while still being easy to use.

Tone of Voice

The tone of voice you use on your website is an important emotional factor. How you communicate with users says a lot about your relationship with them. While you communicate certain messages through words, your tone of voice reveals what you think of them and also what you want them to think of you. The psychologist Friedemann Schulz von Thun illustrated these different layers of a message in his “four-sides� model of communication.

Your tone of voice strongly determines your first impression. If you wrap a serious message in a humorous story, users might not take you seriously. On the other hand, if you try to sell something fun and your tone of voice is too serious, users might not take you seriously either.

For your own website, know what you are selling, who is buying it and the context in which you are delivering the message.

Wufoo creates a distinctive environment for conducting surveys through its tone of voice.

Engagement

A perfectly usable and accessible website could still have a high bounce rate, a low number of sign-ups, or no characteristics worth remembering. In his presentation on “The Art and Science of Seductive Interactions,� Stephen Anderson shows how engaging people helps us build relationships and positive user experiences. The World Wide Web has been around long enough that we take it for granted; we don’t notice good usability, and we are hardly surprised to find the content we are looking for.

Now is the time for something more than passive consumption of the expected. We want to be engaged, have fun and be entertained. This engagement could take the form of playing, interaction or personalization of content. We love customizing things; we can spend hours playing social games online; and we welcome any entertaining video that crosses our path, right?

Of course, as with all of the above, your users and their context should determine how you engage them. If users are simply looking for the most efficient way to interact with your website, then make that interaction as straightforward as possible. The more time your users have and the more curious they are, the more you will be able to draw them in.

On Slavery Footprint, users can learn about their impact on slavery in an interactive and engaging way.

Conclusion

Emotional design turns casual users into fanatics, ready to tell others about their positive experience.

– Aaron Walter

Emotional design has many qualities. We become more creative if we are confronted with something attractive. This creativity helps us solve problems more easily. Emotions also give us positive experiences, making us happier and giving us better recall. Norman came up with three levels of visual design based on different levels of our cognitive processing: the visceral level (appearance), the behavioral level (usability), and the reflective level (personal satisfaction, self-image and remembrance). Internal design goals as well as the needs, expectations and context of users will determine how the designer should balance those three levels and what to emphasize in order to get the most out of the design.

Recommended Reading

• Emotional Design, Don Norman
• Designing for Emotion, Aaron Walter

(al)

© Sabina Idler for Smashing Magazine, 2012.