Pressured To Say Yes

Many people have difficulty saying no to inconsequential requests. How many times have you found yourself doing something that was unworthy of your time because you didn’t have the courage to say no? You could fill your entire life with worthless activities if you said yes to everything that came across your plate. In doing so you would sacrifice your potential, failing to accomplish the things most important to you.

In many ways businesses fall victim to this same trap. There is a misconception that a business should serve anyone willing to spend money. In reality, doing so is damaging. But let’s look at where this habit forms, the startup phase.

It Comes Down to Sustainability

Unless you are one of the lucky few with deep pockets or ample funding, starting a business requires being respectful of cash flow. Can you keep the lights on? Your founders fed? No? Then you had better get some money anyway you can. Any paying project looks good when your checks start bouncing. For an agency trying to get off the ground, getting a paying client of any form is helpful.

While useful short-term, this becomes a learned behavior. Long term you begin acquiring more lackluster projects and all energy is spent sustaining the business instead of evolving it.

Agencies should strive to shed poorly fitting projects and only work with their “ideal clients.”

Only Work With Ideal Clients

Every agency, regardless of size will have ideal clients. No company has a target market of “everybody.” Sometimes the ideal client will be dictated by needs, for example, a prospect may need help with the CMS that your team has expertise in. Other times it comes down to personality. If you have an agency that likes close client integration, you will have difficulty working with someone who just wants as little involvement as possible.

You hold your agency back when you take on a client that falls outside your budgetary needs, has an incompatible personality or doesn’t interest you. I assure you these projects will take more energy and time than the dream projects.

Furthermore, the incompatibility will leave you and the client feeling lukewarm about each other. Worse yet, it will suck energy out of your team rather than energize them.

When you accept projects that are the ideal fit everyone benefits. You do your best work, the client gets the best product and you build strong relationships. It’s great relationships and great work that build great agencies, not the volume of output.

Get to the Milestone

Chances are you will say “yes” to average projects longer than you should. It’s hard to turn down money, I understand. What you need to realize is long-term you are actually losing money. Perfect projects are always more profitable. They lead to referrals, lower customer acquisition costs and larger budgets.

Even if you have capacity, time is better spent towards marketing than earning a quick buck. With enough time invested you will get fewer sub-par prospects and more that meet your criteria.

The rewards are obvious. A happier, more engaged team, lower marketing costs and higher profits. All it takes is a little courage.

Technology evolves quickly and it’s easy to get caught up in the new cool thing. It’s OK to be excited by change. Innovation is not only good, it’s necessary. But you can’t lose sight of what we are here to do… solve problems.

Don’t pick a solution before the problem is analyzed. Never assume that things should only be designed a particular way. Everything technique has its place… even “undesign,” sites that are intentionally ugly or minimalist can be effective in the right context.

Rather than get caught up in debates over which approach is better, why don’t we discuss when to use a particular solution, device or strategy? That’s the type of discussion I want to be a part of.

With so many things to focus on — style to structure and everything in between — I can’t blame anyone for having difficulty seeing the forest from the trees. But it’s no excuse. This is our profession, our trade, our craft. I don’t expect anyone to be perfect (and I certainly am not) but we should strive to create the best work possible.

But best is hard to quantify and even more difficult to qualify. How do you know if one design is better than another? Clearly tastes differ and chances are your aesthetic preference won’t match the users. At the risk of oversimplification, the answer is objectives. If you can define what the design is supposed to achieve in a measurable way you can (duh) measure its performance. This is the heart of objective drive design, let’s explore further.

Objective Driven Design Defined

Easy to understand yet hard to master, objective drive design is simply the act of consciously making design decisions based on the objectives of your stake holders and users. In short, what do the people paying you want to achieve? and what do the users want to achieve? This simple question (or more often, questions) should dictate every pixel placed on the screen.

Most design discussions I have been privy to explore objectives in one form or another, but alas exploration is not enough. ODD (objective driven design) isn’t that easy. Too often the answers to objective questions influence the end design but fail to dictate it — and there is an insurmountable difference. Let’s discuss what happens when take the former approach.

Objectives Influencing Design

Picture this common scenario. Your goal is to generate leads and users coming to the site want to find out pricing, service offerings and get some idea the quality of company X’s work. I would venture this loosely describes over 50% of the B2B service websites on the web.

With such a common design problem it’s not surprising most of the premium themes designed for this audience share a common set of characteristics. Below are the top three WordPress themes on ThemeForest.

What you will notice is all of these themes have a common set of elements. Typically news, a slider, their unique positioning statement, calls to action, massive amounts of social media links, blog listings, tweets, service offerings and previous work. Now there may be justification for some of these common elements, but certainly not all of them. There in lies the problem.

These themes were influenced by objectives but they aren’t objective driven. In all fairness, it would be near impossible to design a mass market theme in a “pure” ODD manner, but I digress. If you consider the primary goal of generating leads with users who’re looking for pricing, services and quality indicators then half the elements on the page are unnecessary. A carousel, while “cool” does little to help the users out. You could argue they are communication device, but I would counter that it’s hardly the most effective approach (well described here.) News? Typically news sections are a place for companies to brag about things users don’t care about.

In the end the design is probably not ineffective but it’s also not extremely effective either. Even a handful of unnecessary elements have a profound impact on a design. Those well versed in psychology know that adding decision points and expanding options create unnecessary cognitive load. Even simple decisions are a seven step process and take energy to perform. Thus every additional element on the page requires a decision to observe or ignore. Even after that decision you still have to process, comprehend and commit the stimuli to working memory. All together the task of browsing unfocused websites leads to ego depletion, leaving the user tired and strained… not the experience you want to be cultivating and certainly not the best way to generate conversions.

Let’s see how this differs with ODD.

Objective Driven Design (ODD)

I subscribe to the thought that users inherently want to convert. They have a task in mind, they’re interested in your product or service and if enticed will purchase, fill out your contact form… or whatever. Your job is to reduce the friction required to convert. This primarily achieved by eliminating slow downs and facilitate information retrieval. By preventing the user from having to think too hard and making it easy to find desired information you maximize the possibility of conversion. The best way of doing this is through the elimination everything which is not absolutely necessary.

If users are uninterested in your news feed, recent accomplishments or other self promotional content they will ignore it. It doesn’t mater that YOU want them to see it. See my post on selective disregard if you are interested in the reasoning. Instead of learning about the companies accomplishments you deplete their willpower by requiring unnecessary effort to ignore it in lieu of what they DO care about.

With ODD everything on the page supports the primary objectives (for both users and stakeholders.) Any element that doesn’t tie to the objectives is removed. Pure ODD is ruthless, even partially relevant elements are slashed and burned.

An Example of ODD

Not surprisingly well designed landing pages are great examples of ODD. Even though you can’t realistically design an entire website like a landing page you can still learn from them.

If we take a look at the DevAuditions landing page we can see that despite a large number of elements on the page each one is necessary to convert users. The design begins by introducing the user to the product with the USP and some supporting material. It follows up by outlining three key features, illustrated by the image to the right (giving the user an idea of what type of service this is.)

It then has the first call to action for those who are already sold. Those who aren’t get a detailed description of how it works, followed by some more detailed copy and credibility boosting client logos. This is topped off by some final teasers and another (stronger) call to action.

Notice how there is nothing superfluous? Notice how all the content on the page is also tailored towards the users questions? You can see with in each section they are answering common questions, stopping points, etc…

Question: What is this site?
Answer: DevActions.

Question: What is this about?
Answer: Hiring developers smarter.

Question: How does it work?
Answer: See this three-step process.

Question: What are the benefits of using DevAuditions?
Answer: Better hiring through demonstrated problem solving, reports on performance

Question: Who uses DevAuditions?
Answer: See our clients here.

Question: What do I do next?
Answer: Buy a Dev Audition

Note that ODD is about clarity, not sparsity. The design need not be drab, flat and boring. Rather everything exists to support the primary objectives without exception. The key here is primary, you don’t see social media icons, newsletter sign ups, etc…

What to Take Away

I could (and probably will) discuss ODD at great length, but this is not my intention for this post. The truth is ODD is nothing new. Some of you reading this have been doing it your whole career, only under a different name. The Aeronautics industry practically invented it, although they call it “Value-Driven Design.”

My hope is that I have planted a seed, one that you will consider even if in passing. Then, maybe, the next time you design that seedling will remind you to consider what you are doing just a slight bit more and maybe… just maybe you will decide to do something different as a result.

In my opinion, it’s time to stop designing mobile websites. Dramatic, I know… but my thoughts are not unfounded. Despite the popularity of mobile, we can no longer say “mobile browsing is on the rise.” Instead we must realize that  the way people use the web as a whole is changing. But before I dive into how people are using the web now, let’s cover how people used to browse using mobile devices.

A Brief History of Mobile (Users)

The mobile web used to be hard to access, hard to use and well… all around hard. As a result, people avoided using it when possible. Early devices offered users webpages with little more than text. Furthermore  not only were connections speeds slow, mobile data was expensive. To make mobile browsing at all desirable, website owners provided paired down, mobile specific sites that contained little more than the most commonly accessed content. This made sense at the time because if you had a choice you wouldn’t be browsing on your mobile phone.

That of course changed with the iPhone. Equipped with a browser that made accessing normal websites tolerable, the iPhone had more users reaching for their phone throughout the day. That said, the mobile web was still a burden compared to “fixed browsing” (ie: laptop or desktop.) Connections were getting better, but they still were lackluster and generally speaking users hadn’t adapted to the smaller screen and new method of browsing.

Because mobile was still a “next best alternative” to fixed browsing, us web designers threw out the word “context” in mobile conversations. What context was the user browsing the site? Why was it so important they access the site from their phone where they couldn’t wait for a desktop version? How can we remove everything they are unlikely to access and only show them what is contextually relevant?

In actuality this was a good plan. Most users did browse from a mobile device while on the go, in line at the bank and when they couldn’t easily access their desktop. But then something changed. Mobile became less mobile.

Mobile Browsing or Anytime Browsing?

Two major shifts have occurred in a short period of time. First, users have become accustom to browsing the web on a mobile device. Where mobile browsing was once a difficult and daunting task, frequent use of mobile websites and devices has sharpened the skills of many smart phone owners. Widespread skill adoption happens all the time, even typing was once a skill reserved for occasions where handwriting too informal.

Second, the number of browser enabled devices has — for lack of a better word — exploded. Obviously we have smartphones and tablets, but what about netbooks? game consoles? e-book readers? mp3 players? Now there are even digital cameras with web browsers in them. In the early days of mobile you only had to worry about cellphones and computers (practically speaking.) Now you can no longer predict what type of device a user will access your site with.

What does this mean for web designers? As I alluded to earlier, I say it means we should stop designing mobile websites. This sounds counter intuitive, but stay with me. The behavioral of mobile browsing has changed drastically. Because people are accustomed to browsing on mobile devices they are opting to do so in favor of desktop or other “fixed” platforms. This means you can no longer assume that those browsing on a mobile device are in fact mobile. It might just be easier to browse from your phone on the couch than going upstairs to your office. In the past a designer could reason that if a user comes to the site on their phone they must be in a rush, this is no longer the case. Context is no longer assessable.

Furthermore there are so many different web enabled devices that two categories (mobile and fixed) are too broad. Is a netbook mobile or fixed? What about your game console? It’s fixed, but very different from a desktop. How can you design a site for “mobile” when it’s questionable which devices fit in the category?

You can’t accommodate users who access a site from a spectrum of devices in infinite contexts by simply thinking “design for mobile.” It’s too narrow with a the landscape this big. We need to think about universal websites.

Universal Web Design

The idea behind universal web design is simple. Design a site such that the largest amount of people can access it and have a positive experience. This means the site should be easy to use regardless of device, technology, context and situation. This idea is nothing new, in fact it has existed for decades and accessibility experts have been preaching it since day one. I don’t even feel the concept needs more explaining.

The solution is simple because universal web design isn’t a technique, it’s a mindset. It goes hand in hand with web standards, accessibility and great design. I realize to some extent I am arguing semantics. One could argue designing for mobile makes a site more universal (because you are designing for the lowest common denominator.) I argue how we describe our approach is invaluable. Saying “design for mobile” sends the wrong message, suggesting focus on traditional mobile devices (phones and tablets) when you should be considering all devices. The word “universal” is all-encompassing and thus more fitting.

Now on many levels it probably sounds like I am promoting responsive web design, but I’m not… at least not explicitly. Responsive web design is a good tool that is appropriate in many different situations but it’s not the only approach. For example, I am becoming increasingly more fond of device/resolution dependent themes. But that is a discussion for another blog post.

In summary, don’t think mobile… think universal.

While there are hundreds of relevant principles, the following ten can be used to improve the aesthetic quality, usability and comprehension of your designs.

1. Visceral Reactions

The first emotional reactions originate in the central nervous system. These reactions influence our behavior on a subconscious level, meaning we don't realize they are influencing our behavior.

You may consider yourself self-aware and in complete control… well I’ve got news for you, you’re not. For centuries cognition has tricked on humans into believing their actions are completely thought-out and preplanned. Modern psychology says otherwise. Much of human behavior is still rooted and influenced by our “old brain,” the part of our mind controlling the survival instincts that kept our ancestors alive (Weinschenk, Nuero Web Design, 2009.) The old brain reacts much faster than conscious thought and is triggered anytime we’re exposed to a representation of food, shelter, danger or reproduction. These reactions are called “visceral reactions” as they originate from the central nervous system (Norman, Emotional Design, 2005.)

Not only are old brain signals faster than conscious thought, they influence us with out our knowledge (ie: visceral reactions are subconscious.) Ever love a design  but have a hard time explaining why? Chances are you had a visceral reaction and your old brain reacted to the visuals positively. Because visceral reactions are rooted in our genetic makeup, the responses are fairly consistent across all cultures, genders and demographics. As a result, visceral design produces very predictable reactions.

Visceral design is broad enough that it could (and probably will) have a blog post dedicated to it. To keep things short I recommend using design elements that could represent any of the old brain triggers. Specifically use elements that could represent survival, threat or reproductive opportunities (sex sells.) For example, you could use an aqua blue that is similar to fresh water, bright colors that are reminiscent of fruit or a clean open design similar to a safe environment.

2. Cost-Benefit Analysis

Form fatigue is a common example of the cost-benefit problem. The energy cost in filling out a long form often outweighs the perceived benefit of doing so.

Related to visceral reactions is the cost-benefit principle which surmises behavior is regulated by the perceived difficulty of a task in relation to the perceived reward (The Journal of Neuroscience, 8 April 2009, 29(14): 4531-4541.) Basic human behavior can be summed up in two patterns: opportunity seeking and threat avoidance. For example, your body is hardwired to seek out energy dense food, which is why calorie dense foods like french fries and chocolate are harder to resist than lettuce. Because the fuel for energy (food) used to be a scarce resource and took energy to obtain, we have developed an uncanny drive to conserve energy where possible. Our ancestors survived by limiting their energy usage to activities that would provide high benefit.

Despite the centuries of evolution between our nomadic relatives we exhibit much of the same behavior. Subconsciously we are always evaluating the potential energy expenditure for a given activity and our perception of the reward of doing so. On the web this means if a task appears to have a high energy cost, users are unlikely to complete it unless the reward is of high value. The most common example of this is form fatigue. Long forms take a notable amount of energy to complete. Users who will receive something valuable in return for filling out the form are more likely to go through with the task. If the user is just looking to get information about a product or service they will likely abandon the process and find a website that requires less effort.

Remember that energy expenditure is not limited to physical activity. Mental activity can be just as taxing (although in a different form.) Requiring frequent decisions, hunting, memorizing, learning or contemplation will slowly drain the user’s energy until the cost of proceeding outweighs the benefit of completing their task.

3. Hick’s Law

I originally covered Hick’s law in my post about 10 Laws to Design By. Simply put, the law states that more option one is exposed to the longer it takes to make a decision (Hick, On the rate of gain of information. Quarterly Journal of Experimental Psychology, 4:11-26, 1952.). Many claim they would like more options in a decision-making scenario, but their behavior illustrates the contrary. The difficult in making a decision actually increases with additional options and in extreme cases it’s so hard we’ll opt not to decide at all.

The classic example is a study that tested the effect of jam options at a busy grocery store. The study used a jam tasting display with two configurations. One with 24 different jams and the other with only six.  They found with the 24 option display, 60% of people passing tried the jam and  3% of them purchased. With the six jam display, a lesser 40% of people stopped but almost 30% purchased (Iyengar, Shena S. and Mark R. Lepper 2000. When choice is demotivating: Can one desire too much of a good thing?. Journal of Personality and Social Psychology.79:995-1006). When faced with 24 different jams, the nuances between them all made it too difficult to select. With six jams it was easy to determine which one tasted best and more purchased as a result.

Hick’s Law directly relates to the cost-benefit principle. The more options a user must pick from — be it navigation, products or images to look at — the more energy it takes to make a decision. Eventually the energy required to make the decision becomes so large the benefit of making it doesn’t seem worthwhile.

On the web, Hick’s Law tells us to keep options to a minimum. This applies for everything, including content on the page, navigational elements, images, etc… Anything that on the page gives the user another option of something to read, focus on or click. Removing everything unessential reduces the amount of unnecessary options and makes user decisions easier.

4. Gestalt Psychology

It only takes a little exploration into cognitive psychology to smash the illusion that we have a strong grasp of the world around us. It seems our brain loves to take shortcuts and make assumptions all the while reassuring ourselves that everything has been well thought out. The most nefarious of examples are the Gestalt Principles. Developed by german psychologists in the 1920s, the principles describe the ways that our brain assumes unification or relatedness to visuals based on proximity and whitespace. For example, visuals in close proximity are perceived as related when not necessarily be the case. Another example is that of similarity, where elements that look similar are considered to be related and elements that look different unrelated  (Humphrey, G. (1924). The psychology of the gestalt. Journal of Educational Psychology.)

Elements grouped in close proximity are seen as related.

Beyond proximity and grouping, the principles include similarity, continuance and figure ground perceptions. Gestalt principles are complex enough where I could write a post about them specifically (and probably will,) so if you want to know more it’s time to do some research on your own. Otherwise just know that people will make assumptions about what they see and find meaning in visuals that might not be there. Ultimately it’s critical to be intentional about what appears on the page and how it’s treated.

5. Pattern Matching

Despite the low detail, most will recognize this shape as a dancer. The form is matched to preexisting patterns of what dancers look like.

Pattern matching (or pattern recognition) is the way we process everything we see from people’s faces to the written word. When visual stimuli enters our eye it immediately starts a chain reaction in the brain. We subconsciously hunt  hunting for anything similar to the current stimuli that we have experienced in the past. If the stimuli is matched to a preexisting pattern we recognize what we are seeing, otherwise the stimuli is perceived as being new. This process goes beyond recognizing forms and colors, it also triggers any cognitive associations with the pattern being matched.

Look to the figure on the right, how do you know the silhouette is a dancer? Despite the lack of detail the shape fits a pattern matching dancers you have previously experienced. Now reflect on your thought process upon seeing the image, did your mind wander to previous experiences, encounters and feelings surrounding dancers? This is the pattern matching system at work.

Pattern matching also influences how familiar something feels. The more often you see something the more patterns you have stored and easier related patterns are  to identify. When patterns are easily matched they feel familiar or  ”normal.” Unmatchable or difficult to match stimuli feels foreign and can even be unsettling. While drastically different these new visuals are actually more memorable, at least at first. Like anything else, repeated exposure dulls the “shock” value of the stimuli eventually making it feel ordinary as well.

6. Facial Recognition

One of the most active form of pattern matching that occurs is facial recognition. There is no pattern that we recognize that has the impact of the human face. We are a socially driven race, well demonstrated by the rise of social networks and the role of social organization in human evolution. But before there were computers, smart phones and text messages most interactions occurred faced to face.

Human interactions are just as likely to bad as good. As a result, we evolved with a semi-conscious ability to read  faces. This technique is only effective because many facial expressions are involuntary. While you can put on a smile despite being sad, there are tiny muscles in your face that reveal your true feelings. There was a time where predicting the intentions of others was the difference between avoiding a threat and walking into danger.

People are instinctively drawn to the human face for two reasons. First to first identify another human. Second, to read the persons facial expressions to determine if they are friend or foe. The more aggressive the facial expression the more attention it receives, demonstrated by a study where participants eyes were typically drawn to unhappy faces in a sea of people (Facial Expressions of Emotion: Are Angry Faces Detected More Efficiently? Cogn Emot. 2000 January 1; 14(1): 61–92.).

Not only are we drawn to peoples faces, we read their expression and interpret their mood. We are most adept at recognizing angry faces as they represent a potential threat.

Related to web design, the use of faces can draw attention or set a mood. People will naturally identify with images of people over objects, landscapes or abstractions ( Neilsen, Eye Tracking Usability, 2010.) Furthermore the expression of the depicted person will influence how the user feels about the website. Someone happy and smiling will convey a sense of welcome where a picture of sad, starving children will convey sorrow and desperation. The more authentic the photo, the more effective it will be… this means drop the stock photography and be very intentional about what photos you take. Users will pick up on the emotions of those depicted, so avoid photos of people looking uncomfortable at all costs. This requires effort as the average person feels self-conscious when being photographed.

7. Social Influence

The influence of others extends far beyond facial expressions, there are specific actions that have predictable influences on human behavior.There was a time where being able to work together provided greater avoidance of threats and more opportunities for food and reproduction. As a result, the basic “systems” of human interaction still exist in our DNA. In the article Persuasion in Design, author UX Designer Elisa del Galdo references the six universal principles of social influence. These principles are hardwired into the human psyche, developed as a necessity to human survival.

As described in her article, the six principles are:

• Reciprocation: We are compelled to return favors, often in greater value than the original.
• Authority: We trust experts and those of high status or power.
• Commitment/Consistency: We want to act consistently with our commitments and values.
• Scarcity: The less available a resource, the more we want it.
• Liking: The more we like people, the more we want to say yes to them.
• Social Proof: We look to others to guide our behavior.

8. Selective Disregard & Change Blindness

You see and notice everything that happens around you, right? Well you might be surprised. Our brain does a surprisingly good job of tricking us into thinking we absorb everything we see, but we often miss things that happen right in front of us. This phenomenon is called Selective Disregard and happens out of necessity as it’s impractical (and arguably impossible) to process every visual in our peripheral vision (Nielsen, Eye Tracking Usability, 2010.)

Just walking down the street you are exposed to millions of visuals that could demand your attention, but unless they are necessary your mind filters them out as if you never saw them. If you are looking for Main Street any street sign will catch your attention and be processed. If you know where you are going the signs will enter your field of vision only to be ignored because they are unnecessary. This phenomenon is known as selective disregard, the process where your mind proactively ignores anything deemed irrelevant.

This most obvious example of selective disregard is banner blindness, where users have become so accustom to ignoring online advertising they couldn’t tell you if the website they surfed five minutes prior had ads or not. Selective disregard applies to more than just advertising, users often gloss over anything that doesn’t appear related to their task at hand. Sometimes users will miss key elements because designers have strayed from convention. Because the search form doesn’t look like a search form the mind ignores it and continues on. For usability sake, all elements should be clearly labeled and follow conventions matching the users expectations.

The more extreme brand of selective disregard is change blindness. Change blindness occurs when the state causes blindness of large and obvious changes. As discussed regarding the cost-benefit principle, our mind does all it can to conserve energy. One way it conserves energy is assuming nothing has changed unless it’s there is a clear indicator otherwise. There are a few really funny and interesting demonstrations of Change Blindness on YouTube.

In the javascript laden, non-refreshing web of today change blindness is a thorn in any designers side. If something changes on your page you better make it obvious, less you brave the scorn of frustrated users. Always remember that small loading GIFs and flashing content might not be enough and when in doubt, make changes painfully obvious.

9. Progress Disclosure

Ever get the feeling that learning increases in difficulty with age? Think again, learning is difficult regardless of age. Storing information is a high energy, high focus process.  The process in which we convert stimuli into stored memories is complex, influenced by hundreds of factors. You don’t need to fully understand learning theory to be a great designer, you just need to know that to conserve energy, people prefer to recognize information rather than store and recall it (ie: learn it.) Furthermore, when learning is required, most people have a limit to the information that can be absorbed in one sitting. This means if you overwhelm someone with too much information their eyes are likely to glaze over and their attention diverted elsewhere. Remember that sinking feeling in your stomach when you visit a website with a seeming endless page length? That’s the overwhelm I speak of.

This doesn’t mean you should opt to reduce the amount of information on a website, after all… content is king, right? Rather you should present information in such a way that it’s easier to absorb. Progressive disclosure is a presentational method that does just that. It’s technique where information is given to the user in small bites with the option to learn (or disclose) more if desired. This prevents information overwhelm and ultimately leads to more effective websites.

Some argue against more clicks citing the infamous “Three clicks rule,” but pay no mind as Neilsen debunked it ages ago (Neilsen, Prioritizing Web Usability, 2006.) Instead focus on small digestible chunks of content with a strong scent towards more information (where necessary.)

10. Dual-Coding Theory

Instructional design is rarely mentioned amongst discussions of web design despite its overarching relevance. With the rise of web applications, web designers often find themselves as stand-in instructional designers. But even outside of direct instructional design, there is value to be learned from the study. One of the most relevant (in my opinion) is Dual-Coding Theory. Published in 1986, the theory explores the relationship between memory and learning through verbal and non-verbal channels. The theory stipulates two cognitive systems, one that deals with verbal stimuli (words, spoken language, etc…) and another for processing imagery.

Which is easier to process? The all text version or the combination of visuals and text?

The key takeaway is that people learn and remember best when presented with both forms of stimuli, verbal and image based. As explored in a previous post on mental processing, most people can comprehend image based messaging faster than verbal. When imagery and verbal communication is combined, the greatest level of retention is achieved. In today’s text-heavy web Dual-Coding means a shift in design methodology. Rather than simply designing the layout and “framing” the content, designers need to start contributing to the design of content itself. Whether you are including diagrams, videos, infographics or relevant photos, clients need assistance in providing the second channel of content.

In Summary

There is no better approach for improving your design than gaining a better understanding of the people you are designing for. There is little practicality in dissecting every psychological principle relevant to design, but understanding a handful of key concepts can be a powerful gateway into designing with psychology in mind. The concepts listed in this post should be enough to keep you in the right mindset when designing and (hopefully) motivate you to learn more.

I will go out on a limb and claim emotion is actually the most important aspect of usability. This Because emotion is the root of all behavior, how one feels ultimately determines what they will or won’t do on a website. Let me explain further.

It’s no surprise that difficult websites cause frustration. This seems logical, but frustration is an emotion, not a logical process. Inversely, things that are easy to use actually produce pleasurable emotions. While rarely acknowledged, accomplishment from minimal effort literally feels good. These pleasurable emotions are caused by two factors. First, our natural inclination is to conserve energy (mental or physical.) Therefor accomplishing something while conserving energy feels rewarding. Second, being “skilled” likewise feels good. If you have ever played a sport or instrument you felt pleasurable emotions as you improved your abilities. You experience similar emotions when using a website effectively (on a smaller scale.) Thus when you go to kayak.com and book the best tickets for your trip with out trouble in minimal time you feel good as a result.

Inversely, usability issues make you feel bad about yourself. Even when you know the website is at fault, you often internalize the issue. The old “Why can’t I find it?” is hidden self-deprecation. When tasks take longer than they should or cause you to expend unnecessary mental energy you experience a wide range of negative emotions. You don’t feel as if you have approached this task skillfully, just the opposite in fact. Thus it’s ultimately your emotional response to usability that shapes the experience.

While there are a wide range of areas that usability and emotion intertwine, there are three core areas that are important to understand, visceral, behavioral and reflective. Don Normand details these three aspects of emotion in his book “Emotional Design.” These three aspects of emotion each have a direct influence on usability. Let’s explore them bottom up, or better yet, nervous system out.

Visceral Emotions and Your Mind state

Visceral emotions originate from the central nervous system.

Normand describes “visceral” emotions as feelings derived from the central nervous system. These are emotions directly tied to what author Susan Weinschenk calls “old brain thinking.” Specifically this portion of our body controls urges for food, sex and survival. These thoughts originate from the central nervous system and not the brain. They happen the quickest, before your brain has processed the situation. Because these feelings happen before mental processing they are subconscious. More important, you are often unaware they influence you.

The most relevant application of visceral emotions to usability is the “Aesthetic Usability Effect,” a phenomenon where a more attractive interface is considered to be more usable than an unattractive one all else equal. This occurs because a cluttered, overwhelming interface causes your body to react the same as it would a dangerous situation (a mild one of course.) Your focus narrows, pulse increases and when confronted with an issue you are likely to retry the same solution rather than alternative, untried methods. Inversely, attractive interfaces have the opposite effect. Your focus widens, your pulse slows and as a result creativity increases. In this situation, problems are addressed by modifying your approach. You find an answer and move on with out realizing there was a problem in the first place.

The visceral impact on usability is completely driven by subconscious emotional responses to visual stimuli. But not all areas of emotion and usability are subconscious. We also have behavioral emotions, which are conscious and are impacted by using a website.

The pleasure runners get from being skilled at running is an example of behavioral emotion.

Behavioral Emotions

Earlier in this post I mentioned the pleasure one receives by performing a skillful task. That pleasure is a form of behavioral emotion, which are emotions resulting from physical activity. Think about something you do physically that you enjoy, be it navigating a keyboard with ease, chopping up food or expertly driving a car. That enjoyment is primarily a result of positive emotions caused by performing a task in a skillful way. The enjoyment of skilled activities is a major contributor to the advancement of the human race. Early man felt good using tools, thus they used and developed more of them. Today, behavioral emotions play a large role in web usability.

Navigating the web is largely considered a cognitive task, most of the effort is put into thinking and making decisions. The fact remains that with a few exceptions using any computer requires both mental and physical effort. Thus buying a ticket to the latest movie falls into the behavioral emotion category. When you buy that ticket easily you feel good, you are a skilled web user. When it goes poorly, you don’t receive that gratification and often feel more negatively towards the situation than logically rational.

These emotions are not tied to aesthetics, they are a result of how you use the site. Poor usability leads to confusion, errors and ultimately negative emotions. Good usability makes you feel positive about yourself, leading to positive emotions. It’s no different from expertly dicing an onion.

Traditional user experience design and information architecture are the largest influences of behavioral emotion. The fewer mistakes a user has, the faster they can find what they are looking for and achieve their task the more skilled they will feel. While UX design is a vast subject, you can minimize mistakes with a proper visual hierarchy, clearly labeled elements and you design using common web conventions.

The final stage, “reflective emotions” is the one we are most aware of and have greatest control over.

Reflective Emotions

Pictures of food have the potential to trigger two levels of emotion. The desire to consume energy stocked food is visceral, but memories of eating a specific dish is reflective.

The best way to understand reflective emotions is through demonstration. Think back to a memorable happy holiday. What made it enjoyable? What made you feel good? The positive feel you’re experiencing is commonly described as “nostalgia,” and is a form of reflective emotion. Reflective emotions are contemplative, occurring when we consciously examine a situation and derive pleasure (or displeasure) from it.

Reflective processing is what allows you to appreciate the nuances of well-composed music, elegant prose and a witty debate. Out of all the emotional levels we are most aware of this one. It’s also the slows emotion we experience and it’s influenced by the two levels before it (behavioral and visceral.)

Reflective emotions are a complex subject but when it comes to usability the effect is simple. Interacting with any website will trigger a series of emotional responses. If those responses are primarily negative you will reflect back on the website with negative emotions. If positive, your reflections will also be positive. Not surprisingly, this final impression of the website is often the difference between a user coming back or visiting a competitor.

It’s important to note that previous experiences on other websites influence your users emotions as well. The most common example would be indicators of trust (or distrust.) With experience, users learn how to identify signals of trustworthiness. Likewise, users who encounter frustrating websites being to identify signals of distrust. While it’s impossible to include every possible trust signal, the common and obvious ones go along way. If nothing else include a privacy policy, secure connect badge on e-commerce sites, testimonials and a professional looking design.

Summary: Usability Impacts Emotion and Emotion Impacts Usability

Humans are incredibly complex, making usability (or user experience design) a difficult practice. To manage this complexity, many UX principles focus on data. While effective, focusing too much on data skews the motivations of behavior, often making them seem based on logic. Humans are not logical beings however, they are emotional first and logical second. To really understand usability’s impact on a website you must first understand how the user feels and what is triggering their emotional state.

Before hypertext, underlines were used for emphasis and designating titles. Now an underline in an offline setting carries a different connotation than it once did. As noted earlier, this happened slowly. It began with a simple “Usability 101″ style recommendation, “reserve underlines for links.” Perfectly rational advice seeing that one of the first things learnt about the web is the clickability of underlined text.

This rule was once limited to websites, however the mental model of underlined text has changed. Web usage is so frequent and so ubiquitous that even the offline perception of underlined text is “hyperlink.” So much so that myself (and others I have surveyed) take pause at reading underlined text even on a poster, flier or billboard. We are so used to associating underlines with links it takes mental effort to regard them as anything but.

Luckily there are much better ways to emphasize text. If you have proper heading structure you shouldn’t need a third option after bold and italic. One might argue that information hierarchy is a skill only designers possess, but such a claim sells people short. If you are smart enough to put together a professional document you should be fully capable of presenting it in a legible fashion. Imagine a world where every e-mail, document, whitepaper and report has a crystal clear information hierarchy…

This is just one example of slow changes as a result of the web. I am curious to know, have you encounter similar changes in behavior (either in yourself or others) that you can attribute to new technologies?

Today I came across a beautifully written piece by James Young titled “Mobile First is History Repeating.” James sentiments mirror my own, specifically that Neilsen does more research than anyone else in the industry and Responsive Design is not a silver bullet. I highly recommend you read it, as James is more eloquent than I and makes several points I missed.

Designer Greg Raiz has posted a wonderfully detailed breakdown of redesigning the GitHub navigation. It’s a great read for anyone who makes UX/UI decisions. One quote in particular resonates with me above all else:

Each page should have a key purpose. The UI should be optimized around that key purpose and extraneous things should be moved or removed when possible.

Mental Processing and It’s Effect on Design

Despite the power of the human mind, it still takes effort (and therefore time) to process information. Design, especially on the web, is primarily a vehicle for communicating information. Therefor great design not only communicates information, it also does so in a way that minimizes mental processing.

This ultimately ties into three key (out of — in my opinion — six) aspects of design. Specifically utility, usability and proficiency. Utility is the “functional” aspect of design. Every design is created with a result in mind, serving a specific function. For example, getting a user to contact you or purchase a product. Usability is how successful users are in achieving their tasks. Finally proficiency is how design impacts user performance. Can they complete tasks quicker? Are they able to do things they otherwise couldn’t feasibly do? etc…

Speed of processing effects each of these three aspects of design (and indirectly the other three as well.) In the book Willpower, authors Baumeister and Tierney describe the behavioral result of spending mental energy. In short, the more energy spent the less willpower one has at a given moment. This means running into usability problems, reading through poorly formated text and hunting for information leaves users with little willpower to pursue their task. Users who are willpower deficient are unlikely to push forward and perform an action which fulfills a site objective.

By reducing the effort required to process the information on a page you keep the users willpower high, increasing the likelihood they will perform said action. I doubt anyone would argue the value of reducing mental strain, so the then question becomes “how can you do so?” To grasp the solution you must first understand the problem.

Information Processing is Influenced by Presentation

The human brain processes information in different ways, influenced by the method of delivery. When delivered in an optimal way, the brain observes, processes and absorbs information quickly and effortlessly. Not surprisingly there is a connection between speed of processing and work required, which is often referred to as mental load. Inversely, information in some forms is processed slowly, requiring additional effort for comprehension. In my opinion, the best way to understand the difference is by experiencing it.

First read the paragraph below and do your best to understand exactly what it describes.

“It’s a bright and sunny day. The scene is littered with bright-colored, metal and plastic playground equipment. Behind the playground lies and old, brooding brick wall. Three children are here, carelessly enjoying their youth in the spring sunlight. With smiles and giggles they bound across a some play toys which resemble something out of a space rodeo. The space toy has three large poles erupting from the ground, twice the height of the kids themselves. On each poll has a plastic seat, allowing them to stand, hop and sit as they rotate positions…”

Think about how long it took to read the passage, visualize the description and absorb the information. Then, take a look at the image below.

Was it easier to process the text or the photo? Which method took more time? Which method lead to a greater understanding of the information?

Visuals Are Processed Faster than Text

This exercise demonstrates something important, we process visuals quicker than text. So why is the web overloaded with textual content? International design firm Information Architects have even claimed that Web Design is 95% Typography (because there is so much textual content.) There is a problem here, if an overwhelming amount of content on the web is text, then most websites are not as effective as they could be.

The Whitehouse.gov homepage is almost entirely comprised of textual content.

There are a host of causes for the heavy reliance on textual content. Visually representing complex ideas is difficult, sometimes impossible. Creating diagrams, flow charts and selecting (or taking) photos is time-consuming and can be cost prohibitive. I realize from a pragmatic standpoint it’s unrealistic to expect a major shift from text to visuals with web content. That’s OK, a purely visual web wouldn’t be very useful anyways. There is a middle ground, pairing visuals with text.

Visuals Combined with Text are Processed the Quickest

While we process visuals faster than plain text, we actually process information the quickest when text and visuals are used in conjunction. This is why captions, infographics and comic books are so popular. Infographics in particular are great examples of how combining the two content types eases the comprehension of complex information.

Which is easier to process? The all text version or the combination of visuals and text?

As designers we should be proactive about combining (appropriate) visuals with the textual content provided. In my experience, many designers (including myself) only include photos, diagrams and other visuals when requested. But in doing so we are doing our clients (or projects) a disservice. We should be looking for opportunities to translate text heavy sites into more visual experiences. In doing so we will be designing more effective websites.

Summary: One Piece of Many

The delivery of content is only one influencer of mental processing (all be it a big one.) Even with out visuals the speed which users absorb textual content can be improved through a host of design methods. Progressive disclosure, F Pattern content and line-length are a few quick examples. Which method is most appropriate depends on the context and type of content you are working with. More important is awareness of mental processing and how your work influences it.

Note: I do realize the irony of having a text heavy post on this subject.

If you aren’t familiar with my stance on responsive design, it would be worth your while to see my previous post on the subject. If that sounds like too much work, I will summarize it for you. Responsive design is a great tool, but it has a time and place, neither of which are “always” or “everywhere.” In my experience mobile specifics site are more effective when dealing with a broad audience. Mobile optimized presentation is often better than nothing, but it rarely results in the best experience for all users. Nielsen’s research lead to a similar conclusion. Our thoughts are not shared by everyone however. Shortly after Neilsen’s post, designer Josh Clark posted a response entitled “Neilsen is Wrong on Mobile.” After reading the article I felt Clark had some valid points and I began rethinking my approach to mobile as a results. During that process I decided to reread his article, and now I am no longer sure I agree with Clark’s conclusions.

Josh Clark’s Issue with Nielsen’s Findings

The bases of Josh’s response is largely fueled by two studies that report 25% of smart phone users access the web on the their cellphone more than any other device. I couldn’t find the On Device Research study referenced, but I was able to find the PEW study. According to this study, 35% of Adults in the United States own what they would consider a “smart phone.” 25% of those smart phone users report they access the internet from a mobile device majority of the time. When I do the math, that means 123.865 million adults in the US own a smart phone, and out of those people 30.9 million claim to primarily access the internet from their mobile device. This ends up being 11% of US Adults.

Ten percent is a significant portion of the population and seems to be a magic number in web design. We (web designers) have justified accessible websites because 10% of the population has some disability. We often choose which browsers, technologies and resolutions to support based on close proximity to a 10% adoption rate. With that in mind, I can’t deny that mobile designers should consider “mobile only users” (ie: users who only browse the web using mobile devices,) but to take this study and say the mobile experience should be designed specifically for them is extreme. Specifically I have two issues with this conclusion. Does this study really prove 11% of US Adults only browse the web on a mobile device? and if so, are full feature/content websites reorganized for smaller screens really the best experience for all mobile users? Let me explain further.

What The Study Really Says

While I am a web designer and not an anthropologist, my degree is in social science. For that reason I am often skeptical of survey results. In this case, I find the conclusions of the PEW study premature. If this study is going to be the guide determining how mobile websites should be designed, we need to be sure. Having looked through the study, I don’t see it addressing mobile websites specifically at all.

In Clark’s response, he states:

“…11 per cent of adults in the US, or about 25million people, [who] only see the web on small screens”

Josh uses this conclusion to argue that mobile web browsing isn’t about short, on the go and simple tasks. He claims mobile browsing is now on the couch, in the kitchen, airport layovers, etc… In short, he is saying this study proves mobile users are looking for a full featured and full content web experience.

Remember, we are talking about the design of mobile websites. So in order for this survey to have relevance to the topic at hand, it needs to cover mobile websites. However, if you look at the question this conclusion is based on it doesn’t reference mobile websites at all. The question the survey asked is says “internet usage,” not “web usage.” The exact question is detailed below:

“Overall, when you use the Internet, do you do that mostly using your cell phone or mostly using some other device like a desktop, laptop or tablet computer?” - PEW Internet Survey Questions

“Use the internet” is very different from “Browse the web.” There are hundreds of activities that constitute using the internet that don’t involve a mobile browser. E-mail, directions, music streaming, video streaming, app downloads, instant messaging, etc… etc… How can we use one study as a guide for mobile website best practices when it doesn’t even address websites specifically?

Furthermore, even if the study did prove 11% of US Adults only browse the web using their mobile device, how does that impact mobile web best practices? Does it really mean we should have one website for all devices with altered presentation? I think not.

Prioritizing Mobile Design

While 11% is a significant portion of the US population, it seems backwards to cater towards them over the other 88% who don’t use their cellphone as their primary internet device. Going back to Jackob Neilsen’s original test, after testing hundreds of mobile websites they sites with reduced functionality and features offered a better mobile experience. Disputing Neilsen’s field research because a small percentage of the population only browses on cell phones or does so for extended periods of time is illogical. To further say we should design mobile sites focusing on fringe cases rather than the majority is also illogical.

This doesn’t mean designers shouldn’t account for the fringe cases, by all means we should. Neilsen takes this into consideration by mentioning a “Full Site” link at the very beginning of his article. Doing so in an easy and obvious manner accounts for the fringe cases while catering to the most common use cases first. We can always make considerations for the anomalies where necessary. For example, you could provide a link to the full site which also employs responsive design. This is a more effective prioritization of users.

The Future of Mobile

Despite my disagreement with Josh, I admire his mobile education efforts. Mobile web design is very young, the way people use mobile is constantly changing. We may have strategies for mobile design but we have yet to find which strategies work best and why. This is why I also value Neilsen’s work. There is a lot of speculation and opinion surrounding mobile design, Neilsen does research. Facts and field research will ultimately uncover the best approach, not surveys and speculative conclusions. This is why Nielsen’s findings are ultimately right and should weigh in on the mobile design approach.

The most valuable insight I have gained from running a design agency is an understanding of my strengths and weaknesses. Like most agency owners or freelancers, I got into the business because I love creativity. While business is exciting and I love aspects of it, running an agency often requires performing tasks that fall in my weakness category. Project management is one aspects of business I frequently struggle with.

If it were up to me, I would spend time creating amazing things rather than planning when to create them or talking about what was created. That being said, any design professional respects the role of project management. Having been on both sides of the fence (client and provider) I know exactly how it feels to be in the dark about your project. If your a designer you must excel at project management, even if it’s not second nature.

Over the past seven years I have learned addressed my deficiency by harnessing my core asset, creativity.  Rather than force myself to adopt the common methods of project management I have begun creating tools that spread the weight of PM tasks. My current tool — “Project Status”  — is my favorite tool thus far.

A WordPress Plugin for Keeping Clients Updated

Anytime you experience the same situation a several times there is an opportunity to improve on it. My inspiration was a common occurrence of clients inquiring about the status of their project. This often happened despite setting dates, outlining milestones and creating schedules. To me, this illustrated two issues. Most importantly, clients shouldn’t have to proactively contact me to get an update. Secondarily the materials I delivered were too cumbersome to sort through and reference.

There are plenty of project management tools available, my company uses Basecamp for project management. While I still use it today, it’s use is primarily for internal communication. The problem with these systems is they are designed for the agencies, not clients. Most clients dread the idea of logging into a foreign system and the information provided is not what they are looking for anyways. In my experience, those who try these systems inevitably give up and resorting to e-mail by the time the project is over.

Most clients don’t care about what tasks we are performing or what the key milestones are. They  just want a general idea of how far along their project is, what they are responsible for and an expected completion date. Everything else is noise or irrelevant. Being that I haven’t come across a system that easily does this I went ahead and created one.

This creation is called “Project Status.” It’s a simple WordPress plugin for service based businesses and freelancers. It’s primary function is to give clients a visual indicator of the project status. More specifically it lets you define four key phases of a project, currently activities and client responsibilities. Rather than requiring logins, clients can access their project status through a custom URL.

And that’s just the beginning.

Plugin Features

This plugin is a simple way to give clients that information while providing you with a high level overview of open projects and their standpoint. It gives you the ability to:

• Create and manage unlimited projects
• Track levels of completion
• Track current tasks
• Identify client responsibilities and project holds
• Identify four major milestones (20%/40%/60%/80%)
• Send clients to a page containing the above information

Projects are displayed in a responsive template so clients can access and monitor their project from any device.

Future Plans

I have some big future plans, but first and foremost I want to know what the plugin is missing. In its current form this tool scratches my itch extremely well. That being said everyone’s business is run differently. I would love to hear what features and functionality would make this tool more useful to everyone.

For me, the only feature it doesn’t currently have is a method e-mail communication. My plan is to include some capability to e-mail project stakeholders letting them know their project has been updated (or even include the status in the e-mail.) I am debating if this should be automated, manual or an option. Time will tell.

Do you have an idea for an improvement? Let me know in the comments below. Otherwise you can download the plugin from WordPress.org.

Repeating important elements is not only useful, it can have dramatic effects on site usability. The reason lies in human psychology.

How People See (and Miss) What Happens Around Them

We tend to give ourselves a lot of credit when it comes to our skills of perception. We think we see everything that’s happening around us, especially what’s right in front of our faces. The truth is, humans have an extreme case of tunnel vision. We hyper focus on what we feel is important and ignore anything that looks familiar or irrelevant. This is especially true when it comes to the web where proficient users have become hyper-custom to identifying what’s related to their task at hand and what isn’t.

An interesting demonstration is the pass counting exercise. Watch this video and see if you can accurately count how many passes the players in the white shirt make, about 50% of people get it wrong.

What this video demonstrates is how easily we miss big obvious things even when we are practically staring right at them. Similarly, we can completely miss large changes directly in our field of view and not even realize it. This is a phenomenon called “Changed Blindness” and it’s more extreme than you might think. I highly recommend watching this video as a demonstration.

Both tunnel vision and change blindness have significant implications on web usability.

How This Applies to The Web

A certain percentage of users will miss key elements even if they are large, obvious and right in front of them. This is especially true of navigation. When someone visits a website they don’t calming focus on every aspect of the page, analyzing if it will help them accomplish their task or not. Eye tracking studies have shown their eyes dart around the page feverishly trying to catch a glimpse of anything that looks relevant. In this process much of the site gets ignored or missed. In fact, The Neilson-Normand Group reports only 28% of the words on a page actually get read.

If you have key information, messaging or navigation and it only appears in one spot then chances are users will miss it part of the time. If these elements are critical to the success of the website you are doing a huge disservice to only include them once. It’s obvious to you that these elements exist because you are hyper aware of the design. You are aware and care about every detail, a trait users won’t share.

Repetition (and redundancy) has incredible value in many aspects of modern life. Branding and marketing is relies heavily on people hearing the exact same message multiple times. In teaching, one of the best ways to improve comprehension is repeating yourself. And the availability heuristic states that what you consider to be true and important is largely dependent on how often you hear about it.

Repetition doesn’t mean duplicate. You don’t need to literally repeat the exact same representation of an element (be in navigation, a call to action, etc…) to minimize user oversights. In fact, if the user missed it the first time it’s because they didn’t think it looked relevant. Alternate representations are actually more effective.

The most basic example of this is footer navigation. Scrolled to the bottom of the page and didn’t find what you were looking for? The footer navigation is usually visually different and gives the user a second chance to find their link. Let’s look at some examples to demonstrate.

Zappos.com

Zappos.com is a great example of effective repetition. If you are looking for Men’s clothes (because I am a man and I like clothes) you can find it through the primary navigation by clicking on “Mens,” or Clothing.

You could also click on the sidebar navigation under “Shop Men’s.” Finally the options are repeated a third time in the footer through a massive footer menu.

One could argue Zappos is being horribly redundant in their design, but they’re not. They have given users three pathways to the same information. That way if the miss one or think about their task using different terminology there are other options waiting for them.

Freshbooks.com

Freshbooks.com, an online invoicing solution has five free trial buttons and a sign-up button in the top navigation. Is having five calls to action repetitive? yes. Redundant? No. In this case not only does repetition improve usability, it increases the effectiveness of the site. One of the primary objectives of this site is getting trial sign-ups, more calls to action means more users noticing them and higher conversions as a result.

Final Thoughts

For reasons beyond me, some people have an aversion to repetition with in design. In most cases, this manifests as the desire to remove elements on the page because they are deemed “redundant.” Redundant by definition means being able to remove without loss of function. In many cases repeating elements doesn’t mean redundant, as function is lost if a user doesn’t locate what they are looking for.

As demonstrated by the change blindness studies mentioned above, we navigate the world with tunnel vision. While we see much of the world around us, our brain actively filters out anything perceived as unimportant. This process trades accuracy for speed. In some cases our subconscious filtering makes mistakes, missing important items. If those items are not repeated the design fails.

Next time you are designing a website think about what critical elements exist on the page and consider how they can be repeated in an effective way. Further, make sure to push back when a client or boss requests you remove something because it’s “redundant.”

One could argue it’s the fault of uninformed stakeholders, design by comity, or simply bad designers… but I think there is a bigger problem. There is a fundamental misunderstanding of cognitive psychology. If you don’t understand how users interpret what they see you can’t be an effective designer. This is harder than it sounds however, because you can’t use logic and rational. Logic and rational only work if people behave based on logic and reason… but they don’t. The last five years of cognitive research has concluded most people don’t really know why they behave the way they do. Their mind justifies behavior using logic even though logic isn’t what’s used for decision making.

Many design failures are caused by this misunderstanding, the most damaging (in my opinion) is designing without consideration for selective disregard.

What is Selective Disregard

The web has historically been plagued with designs that attempt to cram too much information into too little space. The cause is often traced to misconceptions of “more is better” or “design by committee” where every department needs representation. Regardless, users have been forced to cope with overwhelming websites since their first experiences online.

Savvy users learn how to turn off images, eliminate ads, or simply avoid overwhelming websites. Average users have learned to instinctively ignore what they consider irrelevant. This behavior is known as selective disregard.

Banners were the first prevalent example of selective disregard. As the web gained popularity in the late nineties, more websites supplemented income by displaying narrow horizontal advertisements across the top of their page. Online advertising was new, both in customer base and targeting methods, so the quality of the advertisements was mediocre at best. The banners often distracted users, slowing them down and disrupting productivity. Over time users adapted, ignoring anything banner-shaped (hence the term “banner blindness”).

Banners are easy to ignore because they have easily identifiable patterns including shape, location, and behavior. With experience, users expand their disregard from what is obviously irrelevant, to everything but the immediately relevant.

Selective disregard operates via peripheral vision, similar to how we navigate the world. If you were to walk down a busy street, you would probably see and forget a handful of street signs. Those signs enter your peripheral vision but are subconsciously ignored because they’re deemed unimportant or familiar. If something flagged important or unfamiliar enters your peripheral vision, you subconsciously shift your attention to it.

Websites are browsed in the same fashion. When something enters your peripheral vision and is identified as relevant, focus is shifted to it. Everything else is ignored completely; users are unaware they saw anything beyond what they subconsciously deemed relevant.

Browsing Behavior

People make quick, subconscious assessments as to the relevance of what’s in their field of vision. For a given task, most web pages have more unrelated content than related. To maximize productivity, users ignore everything not labeled “relevant” by the brain.The more on a page, the more users must ignore. Processing everything on a cluttered page is cumbersome and unnecessary to complete most tasks. A page with few elements takes little effort to analyze, so users typically do so with ease, which in turn allows them to complete the task at hand as it was intended by the designer.

A common, but ineffective technique used to battle selective disregard is the application of emphasis. Rather than remove unimportant elements, designers further emphasize important ones. In doing so, they actually make the page more cluttered. With more emphasis there is more demanding the users attention and more they must ignore. If a user deems an element unnecessary they will likely ignore it regardless of emphasis.

If you are looking for the iPod Shuffle, you will likely ignore the large iPod touch graphic in the center of the page.

Let’s say you were on the Apple website looking for information on the iPod shuffle. The iPod section of the website has 10+ separate elements about various different types of iPods available for purchase. The most emphasized is the iPod touch, with very little screen real estate is dedicated to the shuffle.

Since your task is to find information on the iPod shuffle, while you will technically see most of the elements on the page but you will only process a few of them. It would take too much time to focus on, analyze and interpret each of the ten separate elements. Instead you will notice them through your peripheral vision and filter out anything that doesn’t look like or say “iPod Shuffle.” It doesn’t matter the iPod touch area is extremely large, users who are uninterested in that product will ignore it. Even those who  look directly at it will forget the details of the area moments later.

There is little that can be done to prevent selective disregard. It’s a behavioral byproduct of the information age. However, you can understand and manage it.

Managing Selective Disregard

If nothing else, refrain from including anything that resembles a banner, as you can be sure users will ignore it. More importantly, remove any unnecessary elements. With a minimal site, users can easily analyze and digest everything presented to them.

Further, resist the temptation to over emphasize elements to grab the users attention. While some amount of emphasis is key to good design, don’t force it. If you have a strong information hierarchy the user should be able to discover key elements relevant to them on their own. Instead, make sure key areas have adequate emphasis and are well-defined. For example, areas within a sidebar should have easily identifiable headings. That way a user can subconsciously ignore the section when irrelevant, or focus on it when relevant.

The use of easily identifiable headings and labels is a good way to manage selective disregard.

If you navigated to the Zappos website looking to purchase some mens shoes you would undoubtedly ignore the large image in the center of the page depicting a woman’s swimsuit. Your peripheral vision would likely spot several key areas relevant to your task, specifically the “Mens” navigation headings and anything related to “Shoes.” The over emphasized swimsuit pictures would just get ignored despite their size.

Zappos is a well designed site and their one large call out area is not damaging the experience of the site. The key takeaway is not to avoid emphasis, rather understand the limitations of emphasis. When over used as a way to combat selective disregard you actually make the phenomenon worse. Instead, first limit what ends up on the page to the bare essentials. Then use emphasis selectively and carefully while understanding the limitations of its effectiveness.

Final Thoughts

Design without consideration of selective disregard is one mistake out of many caused by a misunderstanding of human behavior. I have said it in the past and I will say it again, great designers are as much scientists as artists. If you are being hired to design something that hopes to get tangible results you need to understand how your decisions impact the way people interacting with your work behave.

This post was adapted from my upcoming book, “The Six Layers of Design.” The book is stuffed with many lessons on the relation between cognitive psychology and design. If you enjoyed it, please sign up for the e-mail newsletter so I can let you know when the book is available. I haven’t sent out a single newsletter yet, so you don’t need to worry about spam.

There are many advantages to this. For one, by focusing on one specific aspect of your career you can become a master at it much quicker. Secondarily, people are often willing to pay more for expertise. Finally, it’s much easier to become known for something very specific than a broad range of skills.

I discuss specialization at great length with my students. The program I teach in exposes students to three aspects of the web, coding (front end and backend), user experience and design. Many of my students take classes in all three areas but are primarily interested in just one. As a design instructor I encounter plenty of aspiring coders who begrudgingly try to work their way through color selection, typography and layouts. Often times these students will vent their frustrations, confused as to why they are forced to learn skills that they “aren’t going to use.” In every case I correct their assumption, coders and developers are often responsible for design.

Users Interact With Code Through Visuals

Author Donald Normand describes design as a way to translate what happens behind the scenes of an object (or website) into something a user can understand through their senses. In industrial design this most often occurs through site, sound and touch. On the web, it really only happens visually. This means all of the senses we use to understand the world around us can’t be used with the exception of one. Therefor how a user interacts with a website, web application, etc… is largely determined by what they see, ie. the visual layer.

These days you don’t see too many sites designed by coders with no design experience. That’s a situation of the past. I do consistently see however, sites where developers/front end coders were asked to turn designs into html/css templates. If the coder had an adequate understanding of design then the project ended up successful. If not, you can be sure the execution of the design was blunted.

Great Design is All About the Details

How well could you replicate a Monet painting if you didn’t understand the difference between paint types? Even if you could accurately recreate the image, if you used the wrong type of stroke, pressure, paint or brush size it wouldn’t carry the same impact the original did. This is not unlike coding a design without understanding design principles.

If you don’t understand design you don’t know what to pay attention to. Your eye isn’t trained to pick up the subtle details that make a design most effective. Dark gray text ends up looking “black,” elements end up approximately in the right spot and elements are close to the right size. With out design knowledge spatial zones are estimated. If you don’t understand the importance of exact measurements it doesn’t seem worth the effort to take them (which would be time-consuming). If you don’t understand the importance of whitespace elements in approximately the same spot as the original design they are assumed to be close enough. The problem is you don’t know there is a strict grid the design was created with. You don’t know the text was intentionally lightened a tad to ease eyestrain. You don’t know things were sized based on very specific proportions. You don’t know because you never learned those sorts of things matter.

But those details do matter, a great deal in fact. As you evolve as a designer you begin to become hyper aware of these details. It becomes immediately apparent when a design has lost it’s luster due to poor implementation. I don’t mean to berate coders, because there are some truly stellar ones out there… but the best coders are the ones who understand and respect design principles. You don’t have to be an amazing designer to code well, you just have to train yourself what to look for.

What to Look For When Coding

Combining experience with knowledge of the design principles is the best way to improve your coding abilities. That being said there are some key things coders should be conscious of when building a design, most importantly spacing, sizing and detail.

Pay Attention Spacing

The most obvious overlooked fundamental would have to be spacing. The space between and around elements is critical. Nine pixels are not the same as ten pixels. Great designers pay attention to every pixel of space and intentionally use spacing to communicate relationships, boundaries, develop balance and create resting areas for the eyes. Even being off by a few pixels can disrupt the design. Grids are held together by exact measurements. Failing to be exact breaks the grid.

Coders must pay attention to column widths, the height of elements, margins between columns, padding within areas and margins between text and images. Exact numbers mater so learning to measure is an invaluable skill.

Be Exact with Sizing

Like spacing, designs are held together by the relative sizing of everything on the page. If you make something larger or smaller than was intended the balance of the design is damaged. Sizing is not often a problem with images, where an exact portion of the design is transplanted into the website. More commonly it’s an issue with font size. I don’t deny it’s easier to guess a font size rather than use the type tool to see for sure, but it makes a difference on the overall design. Selecting a font size is not solely determined by legibility. The size of fonts relative to other type on the page plays a large role on the overall balance and information hierarchy.

Many designers are very intentional about how much larger headlines are compared to body type, some even use the golden ratio to select type sizes. If one size becomes off the golden ratio between type on the page is broken.

Be Mindful of Subtle Details

It doesn’t take much design experience to realize that details are more effective when subtle. A soft, subtle drop shadow adds depth to the design without being distracting. Sometimes a shadow can be so subtle it’s barely noticeable, but subconsciously the user picks registers it as part of the overall personality of the design. The problem is, if the coder doesn’t know to look closely for those details they will also miss them and the final design loses personality as a result.

There have been more than a handful of times where I knew details would be missed, for example adjacent dark and white lines which simulate a “groove” in a surface are often coded as a single black line. Subtle shadows or gradients get lost for solid colors. You don’t have to know how to create those details (or when to use them), but you do need to know how to spot them.

Ideally a design comes back from coding looking exactly like it did in photoshop (or your other tool of choice.) However I do realize this in some cases is asking a lot. In those cases, if the coder can handle the three items mentioned above making any final adjustments will require minimal investment.

In Summary

While this post has been focused on  front end coders, it applies to developers as well. I have seen plenty of teams where the developer ends up making design decisions because it’s too costly to involve a designer (in terms of time, hours, scheduling, etc…) Regardless of your official title, if you somehow alter the visual layer that users interact with you need to understand design well enough to preserve that layer. Again, that isn’t to say you need to know how to create usable and beautiful designs, rather you need to know what to look for.

The best coders not only know about semantic mark-up, efficient CSS, progressive enhancement and Javascript, they also know how to develop a page from a photoshop file design with out details getting lost in translation.

If you don’t have a kindle you can get the software for your Mac, PC, iPhone, Android, etc…

1. What is HTML5 – FREE!

2. Best of Smashing Magazine – $1.99

3. Web Design Basics, Color Choices – $0.99

4. SEO Web Design and Search Engine Concepts – $0.99

5. Web 2.0 Heros – $1.08

6. The Little Black Book of Design – $1.99 / Free for Prime

7. Fire the Web Committee - $2.51

8. HTML 5 Quick Notes – $2.99

9. Smashing Magazine’s Professional Workflow for Designers – $4.99

10. Smashing Magazine’s Professional Web Design Vol 1 – $4.99

11. Smashing Magazine’s Professional Web Design Vol 2  - $4.99

12. Smashing Magazine’s Mastering Photoshop for Web Design – $4.99

13. Smashing Magazine’s Master Photoshop for Web Design Volume 2 – $4.99

14. Mobile Design for iPod & iPad – $4.99

15. Getting the Hang of Web Typography – $4.99

16. Successful Freelancing for Web Designers – $4.99

17. How to Create Selling E-Commerce Websites – $4.99

18. WordPress Tutorials – $4.99

19. WordPress Essentials – $4.99

20. Mastering WordPress – $4.99

21. SEO Made Simple – $4.95

22. Web Designers Idea Book – Free for Prime Subscribers

23. 21 Sure Fire Ways to Market Web Design Services

21 Surefire Ways to Market Web Design

Conclusion

If you didn’t find what you were looking for here try searching through the Kindle section of Amazon and sort by lowest price. There were plenty of great looking books I didn’t include in this list. It will be worthwhile to check back throughout the year as well. I predict the affordable e-book trend will continue to grow as the publishing playing field is leveled and authors can make decent returns despite lower prices.

Eventually I gave up on the parallax idea and produced a website that stuck to typical javascript effects. In revisiting the technique for a new project I was pleasantly surprised with an abundance of tutorials and resources. In an effort to catalog them all, I developed the list below.

Tutorials

1. Recreating the Nike a Better World Parallax Effect

2. Javascript Parallax Effects (A Deeper Look)

3. One Page Website with the Parallax Scrolling Effect

4. Behind the Scenes of Nike Better World

5. Create a Funky Parallax Background Using jQuery

6. Create an Animated Parallax Header

7. Using jQuery to Create Parallax Scrolling Backgrounds

8. Parallax Scrolling Tutorial

Resources

9. Scrolling Parallax jQuery Plugin

10. jParallax Plugin

11. jQuery Scroll Parallax Plugin

12. Parallax Slider

13. jQuery Parallax Plugin

Thoughts on Parallax

There is no denying the “sexiness” of parallax effects but I question their usefulness. The primary purpose of the effect is an increase in engagement, ideally through an emotional response. If you have done any learning on emotion and design you know that all decisions are made based on emotion (with very little logic actually coming into play.) It would seem the parallax effect would be an ideal technique for any website… but it’s not. The approach is not without its shortcomings. The two major issues being performance related. Parallax websites tend to run slow even on fast machines and they also tend to slowdown the user. In the cases where users are just looking for information the “cool technique” becomes a hindrance, frustrating the user instead of exciting them.

Before using the parallax effect make sure it is the right approach for your situation.

To say I am disappointed in the selection of embed-able fonts would be extreme, but there is still a void left unfilled. As an avid tinkerer, I have made it a self-imposed duty to test out as many typefaces as possible. Having browsed Google’s selection, TypeKit and the free listings at Font Squirrel I couldn’t help but notice an abundance of typefaces perfect for headlines… but few well suited as an elegant solution for legible body copy. Many of the typefaces were limited to one style (meaning no italic or bold version), rendered poorly on Windows Machines or were illegible at smaller sizes.

Seeing few other options, I have replaced my use of Cufon and sIFR for headlines but continue to use the same boring default font stack for everything else. Not being satisfied with this compromise I decided to go out and find at least ten great typefaces for body copy that render well across all browsers. I found significantly more.

My Criteria

To meet my standards of being “acceptable” for body copy the fonts had to have at least a few different weights and ideally an italic and bold italic style. As almost any website with body copy will have common bold and italicized text this was my first priority. While browsers will simulate italic, bold and the combination of the two it’s never ideal.

Secondarily the fonts had to be pretty damn legible across multiple different browsers at 16px/24px. This really wasn’t an issue between modern browsers (Chrome, Safari, Firefox, etc…) quite a few of the fonts looked illegible in Internet explorer.

The Test Page and Collection

If you are interested in looking at the page I used for testing you can find it here. While I selected all of these typefaces from the Google Web Font directory you can find the exact collection I tested here.

The “Winning” Web Fonts for Body Copy

Conclusion

To my surprise, the selection of body copy fonts are plentiful… they are just buried amongst an avalanche of those suited for headlines only. I hope this proves to be a valuable resource in selecting alternative fonts for your body text with out having to wade through hundreds of ill suited ones.

Earlier this month I held the third “production” version in my hand and experienced a similar feeling. This new version, hard bound and simplified, feels special. There is something about it that makes me want to take it to meetings and use it to brainstorm nightly. Granted, I am admittedly biased, but I know it can help others too. Sketching undeniably improves design.

Sketching Improves Design

Some quick thumbnail sketches I did while brainstorming layouts.

For much of my career I dismissed designing on paper because I couldn’t get the sketches to look as “cool” as my interfaces in Photoshop. This mindset demonstrates my prior misunderstanding of design. I didn’t find sketching helpful because I couldn’t sketch cool textures, drop shadows and 3D buttons. I felt those were the elements that made design effective.

I will confess I began sketching because I saw some very detailed sketches that were practically works of art. The designer had even used drafting markers to add color and depth to the sketches! I wanted a book of sketches that I could use as a coffee table book at my office. In my mind clients would look through the book in awe as they waited for meetings. So I started sketching. While I never ended up putting my sketchbooks out for clients to look through I got something much better out of it.

Sketching lead to an epiphany. My focus and understanding of design shifted. Rather than thinking about what effects I was going to use, I began thinking about the best way to present content. This expanded into thinking about what content should be on the page in the first place. I realized what it looked like was not as important as what was on the page and how it was organized. Design isn’t adding a coat of paint of the walls, it’s deciding where the walls should go.

This new-found respect for designing on paper eventually led to the creation of The Web Design Sketchbook.

Version Three

The new hardcover

My goal with the latest version was to arrive at something that felt special, less whiteboard-esk (my original approach.) I realized the sketchbook would house the users grand ideas, strategies and be the start to new websites, companies and ventures. It should feel like an “innovation diary” rather than a throw away item. This lead to simplification. We took out the 12 column grid and switched to an open boxed grid. The white soft cover was removed and a deep black hardcover used in its place. It was shrunk from a notebook size and made into a diary or Moleskin size.

I am very pleased with the latest version. I truly believe designing from paper will improve any designers work, regardless if you use my tool or printer paper. I urge you to try it, just a handful of times. See where it gets you.

For those interested you can learn more about The Web Design Sketchbook here.

I will admit responsive design makes for a more enjoyable experience across different resolutions (and therefore devices) when compared to a single fixed design. When trying to cater to a multi-device audience responsive design is certainly an option, but is it the best one?

Is Context Irrelevant?

I question responsive design as a solution because it ignores the question of context. To assume that responsive design is the answer to the mobile web is to assume people browse on their phone under the same circumstances as a desktop computer. This isn’t the case, not in the slightest. Users browse using a mobile device because it is inconvenient or impossible to use a desktop or laptop.

Users are well aware that browsing on a computer is easier than a mobile device, they choose not to because it’s not practical at the time. This means the location and circumstances surrounding their usage is dramatically different. Rather than leisurely browsing from a quiet home office users are looking for information while standing online at the bank, on the bus, while walking, in the bathroom (ew?), etc…

The significance of this contextual difference is massive. When you have a fast connection, a large monitor, plenty of time and fewer distractions you welcome things like stimulating visuals, subtle effects and unessential content. You have the time and the resources to ignore the irrelevant and focus on what matters to you. In the mobile context almost the opposite is true. You have slow connections, limited screen real estate, little time and lots of distractions.

How can responsive web design be a solution to mobile browsing when it only addresses one (maybe two) of the aforementioned issues? Responsive design is best at addressing the reduced screen real estate of mobile devices. It does nothing to show the most contextually relevant content and reducing irrelevant content can only be done via hacks (display:none). Not to mention your device still downloads more data than necessary. Responsive design rearranges what’s on the screen for an improved presentation. The presentation is improved, but isn’t the web all about content? What does responsive design do about content?

But It’s Not All Bad, Right?

I am a firm believer in mobile specific sites. If mobile is important to you or your audience you need to invest in a site custom tailored for the mobile experience. Doing so is more expensive in both initial investment and ongoing maintenance but the payoff is worth it.

Despite the shortcomings of responsive design, it can be valuable. As a pragmatist, I accept it’s not practical to design a website to the highest of ideals. Mobile specific sites are resource intensive, the return is not always worth the investment. Alternatively, responsive design — with some practice — is not that difficult (ie: resource moderate.) If you want to improve the experience of the site across devices but can’t justify creating an entirely separate site then by all means use responsive design. When done well, it makes a significant difference.

Where Does That Leave Us?

I am a fan of responsive design, despite the tone of this post. The web design industry moves quickly, creating excitement. In my opinion, one of our industry shortcomings is “tactic-itous,” where new technologies are introduced and we are tempted to use them just because it’s new. Responsive design is both new and exciting, this has led to glorification. A year ago we experienced the same surge of excitement with web fonts (and the same occurred with jQuery before that.) Many designers used new, open licensed fonts simply because they could not because they were most appropriate.

If responsive design (or any web technology) will improve the experience for your users then by all means use it. However, make the decision based on strategy, don’t simply use the tactic which is newest and most exciting.

1. Collabtive (self hosted)

If you are only going to try one project management solution, try Collabtive. It’s a free, open source project management tool that rivals (and in many ways exceeds) the popular alternatives like BaseCamp and ZoHo. Like the premium solutions available, Collabtive has individual projects, user management, tasks, files, time reporting, milestones, calenders, etc… it even has a Basecamp import if you are looking to migrate. The interface is beautifully designed and looks like paid software as well. You should have little fear of the project becoming unsupported as the parent company makes money by providing hosted solutions, customization and additional functionality. Really a winner.

Collabtive Website

2. Freedcamp

The other heavyweight contender in the free project management arena is Freedcamp. Designed and built as an alternative to basedcamp Freedcamp boasts a wide and established user base including 48 universities, 30,000+ professionals across 188 countries. Impressive. Not sure how to install a PHP app or configure a MySQL database? No problem, Freedcamp is a hosted solution. However hosted solutions are not without fault. Worried about security and privacy? Your information is on their servers. Should they decide to charge for the basic service, guess what? Your looking at migrating your data to a new platform. Need a lot of space? Freedcamp is only free for  limited amount of space.

Hosting aside, Freecamp is full featured, easy to use and has a beautiful interface. If you don’t need unlimited space or prefer to have someone else host your project management tool, Freedcamp is a great fit.

Freedcamp Website

3. Project Pier

On first glance Project Pier looks pretty rough and I will be honest, I almost didn’t try it. Luckily I did, because it’s actually a pretty amazing piece of software. Despite the hideous skin used in the website screenshots, Project Pier has an assortment of beautiful and well designed themes which make the software pleasing on the eyes. Functionality wise PP boasts many of the same features as the two previous packages including messaging, client access, user groups (and rights management), scheduling, tasks, time management, files, etc… In addition, the software has some unique features such as form creation, easy theaming, tagging and version control. I wouldn’t be surprised if Project Pier surpases the quality of  Freedcamp and Collabtive in the near future.

Project Pier Website

4. Achievo

Achievo is not as pretty as Freedcamp or Collabtive, but what it lacks in aesthetics it makes up in features. Where Collabtive and Freedcamp seem like close copies of Basecamp, Achievo takes a different approach to project management. This open source gem has unique features including reporting, customer relationship management, human resource management, time scheduling and activity monitoring. If you have tried Basecamp, Collabtive, Freedcamp or the other common project management systems but found they don’t fit your needs… try Achievo. It’s a refresh look at project management.

Achievo Website

5. Redmine

From what I gather, Redmine is a niche project management tool. Rather than being PHP based (like all the previous self-hosted examples) Redmine is programmed in Ruby on Rails. In many ways it feels like a project management tool by developers for developers. I mention it here because it actually has some very cool and unique features including gantt charts, project specific forums and wikis, SCM integration (SVN, Git, etc…), LDAP authentication and more. The average project manager might not be excited by these features but any software company certainly will.

Redmine Website

Conclusion

The landscape of free project management tools is certainly different than it was a few years ago. In my previous post, many of the options were single features (like task management) or free versions of premium solutions. Now there dozens of completely free, open source and feature rich tools. There are so many, the top five are practically worth paying for (even though you don’t have to).

With design, there is no universal “best approach” that will apply to all situations. Those using the site, how they got there, their goals and the objectives of the site owners will all influence the most effective design approach. The best advice I can give is to empathize with the users, understand that they know very little about the company and struggle to just navigate the web . Think about what are they trying to accomplish and figure out how can you best facilitate it. Great design is achieved through an understanding of cognitive psychology, not the reuse of design patterns.

— A small snippet of an e-mail conversation I was having earlier today…

The rebirth of user experience should be proof enough that the websites we create should be shaped by those that use them. Therefor the qualify of a design is directly related to the empathy and understanding the designer has for the user, which can only be achieved through proper research. In this context, design is actually a practice of anthropology, yet another science. I often ask myself, where did this misconception come from? and until recently it puzzled me how the aesthetics of design fit into the “designer scientist” concept. My theory is as follows…

“Artist Designer Myth” Was Born…

From what I gather, the print and advertising industry has primed the way for the “design is art” complex. Early day graphic designers created images using fine art methods, including ink, pencil and paint. You can hardly blame agencies for labeling the designers as “the art department.” Origins aside, the label not only stuck, it spread. Design concepts are classified as “artwork” and I am sure you have heard the title “art director.”

Describing design as art makes little sense for print work and even less for the web. Yet it seems to have transferred over to the new medium. I attribute this to the misconception that web design is an evolution of traditional graphic design. This is in no way the case. Print is a self-evident, one way medium. You interpret what is in front of you and that is about the extent of it. The web is an interactive medium. You use a website to get things done, for enjoyment and for communication. The world would never have become depend on the web if it was just a form of online paper.

How It Affects Designers

The more I read about the subconscious mind and what Malcom Gladwell calls “thin-slicing,” the more apparent it becomes that referring to your work as “art” will, over time, alter your perception of what you are doing. So if you thought of design as a predictable process originally, simply referring to your work and title using the term “art” will subconsciously shift your perceptions towards visual expression.

It sounds harmless, but you are really giving up control of your work. You are essentially attributing the quality of your work to an indescribable skill. That skill may lead you to a great design sometimes, but not others… and ultimately you are at “it’s” mercy. I hope this sounds ludicrous, but suspect many designers operate under this false idea.

The Science of Design

My theory is that design is equal parts anthropology and cognitive science, or the study of people’s behavior and thought. What do you think is going to be more effective, an interface based on an understanding of how people think or one that was based on what looked good to the designer? Obviously the former.

Usability experts have been long aware of cognitive science as a way to predict users thought processes in order to make using something as easy as possible. In this context, cognitive science is used to improve learnability, comprehension and memory. If you understand how people learn, process information and store / organize it then optimizing those qualities becomes a repeatable process (just with different variables).

Few people dispute the importance of psychology when it comes to usability and who would with a title such as “Human Computer Interaction (HCI)?” But aesthetic design is still seen as an art performed by artists. Sites like “The Contrast Rebellion” demonstrate that designers carry a stigma of thoughtless pixel pushers who focus on nothing by visual pleasure. Until recently, I wasn’t sure why aesthetic design was more than art… I just knew.

The Science of Aesthetics

With all the talk about art and subjectivity it is no surprise that design is thought of the way it is. Don’t be fooled, there are scientific reasons we like (or dislike) what we see. While not always easy to predict, much of beauty is a combination of ancient survival mechanisms and human reflection. Meaning, our species evolved into the sophisticated beings we are today because of our ability to avoid danger and gravitate towards opportunity. With out getting into too much detail, designs that include danger signals are considered undesirable. Inversely, designs that communicate safety signals (or opportunity, such as food or shelter) are attractive.

Sound crazy? Consider this example, a very cluttered design mimics an environment that is hard to navigate through and spot potential predators. Walking through a dense forest requires a lot more awareness for danger than an open meadow. Is it a surprise that people gravitate towards open, clean and well-organized designs and avoid cluttered and overwhelming ones?

Much of our behavior still happens on a subconscious level, which is one of the reasons it is so hard to describe why some designs are attractive and others are not. Author Don Normand sites that people will often justify their reactions consciously even when the reaction comes from a subconscious level.

I am not suggesting that conscious thought doesn’t influence your design taste, just less than you may think. Life experiences, culture, gender, personal preferences do shape what design you are drawn too on a conscious level. While more difficult, if you know your users well you can predict their response to specific imagery. By studying the target users (anthropology) and understanding how they think (psychology) you can intentionally use visuals to create specific reactions. In what way does this description sound like art?

Summary: Intention and Purpose

One could argue that there is a science to art as well. You place objects on a page according to rules of visual balance, select colors based on sound principles and use shapes to create specific responses. The difference, in my opinion, lies in purpose and intention. When you design, you are really creating tools. What you make has utility to it, whether it be providing information about a company or the ability to interface with an online product.

Art on the other hand, is a form of emotional expression. The artist who creates the work does so out of self-expression and the purchaser (or appreciator) of the art does so for emotional reasons as well. While it is safe to say all behavior has an emotional component to it, design has a different purpose than art, one that lends itself to creating predictable outcomes for specific people. With artwork, it only matters that some people enjoy it rather than specific people.

Battling Speculation with Speculation

Discussion is always beneficial, especially when focused on improving the way people consume media. My issue here is that Andy does not experience in designing news sites, thus his solutions are based on speculation. Because his goal was to provoke discussion, this is OK. Those responding, however, seem to be suggesting serious solutions which are also based on speculation.

The result is a circular argument in which everyone assumes they know the right solution, despite the fact that no one has the knowledge that would be required to find it. Reading a few usability books or assessing a site based on your set of aesthetic values will not lead you to the right solution. Even haven worked on a media site before is irrelevant, as they are all dramatically different in content and users.

Digital news is still finding its way, the industry faces countless unique design challenges. The amount of content that even small news companies publish online, dwarfs almost any other industry. Even more complicating is the diversity of subjects covered. How do you engage a global group of users, all looking for different content on a site that publishes 1500+ articles a day? I will give you a hint, traditional design techniques like “more white space” is not the answer. In fact, we have yet to find the best answer.

We Are Smarter Than Them? Really?

What disturbs me most is that amount of respondents that presumed they were smarter than news designers. Does anyone really think they the designers never thought to remove article excerpts from topic pages? The sites coming under fire are multi-million dollar corporations. Their existence is directly tied to sites performance. If you don’t think they have designers smart enough to do usability tests or design based on site metrics you are crazy. I assure you that any major media site makes design decisions with evidence, not whim.

Unfortunately, the most valuable outcome of these discussions have been some designs that would be great for a designer’s newspaper. The discussion has clearly been focused on designers personal preferences, even though designers are far from the average users. There is no empathy for the average person and their needs.

What Needs to Happen

The media industry could advance so quickly if even one organization stepped up and published their discoveries. Knowing what design decisions had what implications would not only silence the naysayers, but allow digital news to become truly enjoyable.  I think everyone accepts that right now digital media is a compromise. It is difficult to navigate through, hard to read and impossible to filter… but social behavior speaks loudly and apparently the convince is worth it. If the designers of the world could better understand user behavior innovative solutions would naturally result.

Furthermore, the organization who is brave enough to expose their process would surely benefit as a result. Making the users a part of the process would not only help them better understand the balance of business and user needs, it would result in empathy for the organization. This is what social media was supposed to be about in the first place.

Long Term Solutions

Ultimately it is silly to believe that digital news will be “fixed” through design treatment. The challenge is bigger than that. A completely new approach is needed, one that no one has found yet. This is not the first form of traditional media that has had trouble adapting to a digital culture. The music industry was singing doomsday songs as people per-claimed their distaste for physical CDs and scoffed at paying for MP3 downloads. Yet while the horizon was bleak for record companies, Apple found a way to make buying music more convenient that stealing it.

While digital news doesn’t need its own “iTunes,” it does need a holistic solution. Some smart individuals will come up with a game changing approach to digital news and it won’t just be a matter of organizing content, multi-device compatibility and visual design.

Today, the vast majority of websites are still designed and built by talented generalists, and there’s absolutely nothing wrong with that. It’s just that some of the larger and more complex sites do require composite teams of specialists with a singular focus. Experts in information categorisation, human computer interaction or interface design. They also need people who specialise in specific programming languages, databases, security, or application architecture. The history of all human progress can be counted by the increased specialisation of individuals amongst a group, and I see this as a good thing.

So we have this strange dichotomy that the term webdesign can be used to describe both a novice and an expert, a neophyte and a master. This is where the Dunning-Kruger effect comes in. If you’re not familiar with this concept it’s the observation that novices suffer from the illusion of superiority and tend to rate their skills much higher than experts because they don’t fully understand the breadth of the field they need to master. Or to use a much quoted aphorism, “they know what they know, but they don’t know what they don’t know”. By comparison, experts tend to know more, but are also more conscious about what they don’t know, hence making them less sure about their expertise.

— From Andy Budd’s What’s in a name: The duality of user experience

Describing the Impossible

I wholeheartedly agree that we could find a better way to describe accessibility. I also have no question as to the importance of accessibility. My problem is that both “universal design,” and “design for all” describe the impossible. The term universal design has always been focused on accessibility, Wikipedia defining it as a “…broad-spectrum [of] ideas meant to produce buildings, products and environments that are inherently accessible to both people without disabilities and people with disabilities.”

The coined definition is no different from accessible design, it is just a fancier way of saying it. At face value this isn’t cause of great concern, until you consider the definition of “universal.” Webster’s defines universal as “Including or covering all or a whole collectively or distributively without limit or exception.” Thus Universal Design means creating something, quite literally, for everyone. This is absolutely impossible, there is no way to design a single thing that addresses everyone’s needs.

Why You Can’t Design Universally

The diverse nature of the human race means that everyone who accesses your site does so with different circumstances. Their goals, experiences, genetics and environment are all different. The more you can tailor a design to the person who uses it the more effective it becomes. If I were to design a website specifically to improve your life productivity with no intention of addressing anyone else’s needs, we would result in the most effective design for that need as possible. Specific design is the most effective design.

As you start addressing more people’s needs the design becomes less effective. Designing a site to fit teenagers needs is one thing, but designing that same site to also address baby-boomers is another. To be most effective, the design has to match the users in every way. All the way from visual presentation, through user experience, into content and finally how it is built. The design must address how the person perceives the world (ie: their mental model), the experiences they have and haven’t had and their personality. The closer the design matches the user the more the better it will serve them.

So designing to a specific group is difficult enough, designing for everyone is literally impossible. You will never design something that everyone likes. To do so would be to find the perfect design, which doesn’t exist… even when dealing with niche groups.

Accessibility Still Works

I realize that “Universal Design” isn’t supposed to mean design that appeases everyone, but it implies that. Accessibility, while technical is more semantically correct. Accessibility is equal access to a site, not equal priority in design. Everyone should be able to access a site, afterwards they can hate the site and that’s OK. The important element here is equal opportunity to access (and then hate) the content on a site. Universal design doesn’t describe access, it describes to purpose and appeal.

I am still open to a friendlier description of accessibility, just something that doesn’t imply the practice as something it is not. It really does a disservice to both design and accessibility and could hinder both. In my upcoming book, I describe accessibility as reliable design. Design that functions reliably regardless of platform or available technology. It isn’t perfect, but it is better. I am open to suggestions, what is yours?

When I was a novice designer, my primary motivation was to create something that appealed to the client and myself. My reasoning being that the client was paying the bill, choosing to recommend me to others and if we both liked what we saw then others would too. As a result my designs were very detailed, I took every opportunity to incorporate CSS or Javascript tricks as a way to show off my knowledge while also making the website look impressive. The approach in some ways, was successful. I often impressed clients, they happily paid my bills and I was proud of the work that I had done.

The Maturing Designer

As I matured as a designer I began to realize that I knew a lot more about what would look best than the client. Articles reenforced this concept by discussing the subjectivity of design and that you should target the audience not the stakeholders. At this point I became more invested in the critique process,  asked fewer questions about what the client liked and more about who the users were. Rather than deliver two different concepts for the client to pick from, I delivered them only one. The thinking being that I knew which concept was the strongest, why should the client be confused by an inferior design? This resulted in fewer revisions and reduced deviance from my initial vision. In many ways this approach was also successful, the end product was still visually pleasing, the client pretty happy and I got my way. It took significantly more energy however on both my part and the clients.

The Evolved Designer

In the past few years my design research has led me to the conclusion that design is hardly about aesthetics, to my dismay I was confused about the purpose of my profession for the first decade of my career. Making a website pretty is an aspect of design but only a portion of it. Design by definition is the intentional creation of something to serve a specific purpose. All along I was creating art, not design. This changed my entire process.

Rather than focus on how the website looked, I immediately shifted discussions towards what users wanted to do on the site. How was the site going to improve their lives? How will the site improve the client’s business? Is the site easy to use?

My designs reflected this new utilitarian approach. Nothing on the page was decoration, everything was intentional. I disliked the idea of any aesthetically driven change, after all I had planned out every element so that it would contributed to the success of the site. I continually reminded my students that any critique of a design concept that started off with “I like…” or “I dislike…” had no value. Design was a science and statistics prove that some designs outperform others… what you like has nothing to do with design, it’s how well the design performs that matters. I was the designer and I was correct.

This approach was endlessly frustrating. It seemed that no one understand the true purpose of design, even other designers. All my energy went into trying to persuade people into seeing design from my viewpoint with no avail.

The Enlightened Designer

At some point I realized that I was looking at design from the wrong lenses. I justified my thought process because I never questioned the collaborative process of design, and always welcomed suggestions based on logic and reason. However I was missing the point. Not all clients are hiring my company because they expect their website to revolutionize their business (although it can, and some do). Many clients use the website for an internal marketing tool as much as an external one. They derive a sense of pride from their website and so do their partners, employees and colleges. Many of these types of clients have just as much a vision for their site as I do and they are paying me to deliver it, not alter it.

While I continue to give my clients my best holistically focused advice, I now realize that their motivations for the site ultimately drive how the website is created. I am delighted when someone approaches us because they appreciate design in the same form that we do, but I also respect the other reasons that people care about design… including aesthetic reasons. My current approach is a hybrid of all three, depending on the situation and the client. It is the closest thing I have found to win/win/win.

I recommend anyone that can make it, do so. More info below:

Design the Future with the Leading Web Design Authors

New Riders’ Voices That Matter: Web Design Conference, taking place June 27-28^th in San Francisco, is where today’s most respected industry authors and thought-leaders of the Web design revolution come together to share some remarkable advances in Web design. Participants in this breakthrough event will gain insight on the best approaches to designing for mobile, social media, HTML5 and CSS3, content strategy, grids, typography, fonts, workflow, user experience, and so much more!

Not only does this two-day program compress as much learning as humanly possible into a comprehensive format, it provides a forum to hear from some of the industry’s leading gurus. Don’t miss this opportunity to meet face-to-face with dozens of authors and experts. Hear from Bruce Lawson, Kelly Goto, Shawn Welch, and more at this tremendous and efficient conference filled with education and networking. Plan to join us in San Francisco this June. We are certain that you will walk away inspired!

SPECIAL SAVINGS! As someone that reads this blog, you can save $200* off the conference fee by providing priority code WSDMAL4 and registering by May 2^7th as this $100 discount is combined with the Early Bird pricing! Check out the conference web site or contact Barbara Gavin, 617.848.7026 to register or request more information.

*Valid on new registrations only.

In the early 2000′s usability and user experience was on the upswing. The web was changing at a rapid pace and we had new ways to look at crafting websites. There was a focus on the holistic approach of using standards, being accessible and caring about the user. This trend left us with some valuable insights that have been adopted into common practice, but the widespread passion died down for “sexier” topics like jQuery and Social Media.

User Experience Design is an Emerging Trend

It hasn’t become “mainstream” yet but I have started to see evidence of user experience trends. As a community we are becoming greater experts in the topic allowing us to divide it into more specific categories such as content strategy and conversion optimization. While this is different from the first UX boom as we are now focusing on the outcomes of users experiences it is still UX none the less. Ultimately there are a growing number of blogs, articles, tweets and discussions around the topic of user experience. Just looking at Google Trends shows a huge upswing in the amount of news stories that discuss user experience in the last half of 2010.

In many ways this is a good thing as with any form of design the people who are using what we create are most important. The practice of design is creating something that people will use, as such the use of our creation is what is most important. I gladly encourage putting more focus on the user and less on business objectives. Putting more focus on what the user wants will ultimately lead to successful business objectives anyways. A happy user is much more likely to purchase a product or fill out a contact form. A user that feels manipulated or that the site is attempting to control their experience is just going to leave.

All of that said I do have some growing concerns about user experience becoming “popular.”

Everyone is a User Experience Designer

A few weeks ago I came across a blog post in which Cennydd Bowles has elegantly described how user experience has become such a broad term that almost anyone working on the web is a user experience designer on some level. From developers to visual designers, copywriters to the marketing department… everyone plays some part in the experience of the user.

Segmentation is Ineffective

Great design is not achieved through several groups of people with different specialized skill sets passing the work from one stage to the next. Yet this is the way so many agencies are setup. The UX team focuses on their deliverables and passes it off to the graphic designers, the graphic designers focus on their deliverables and pass it off to the developers and the developers create it. Decisions that the UX team impacts the effectiveness of the visual design and the developers need to understand UX and visual design well enough to effectively complete the vision. This almost never happens, so much is lost in this segmented process.

We Need to Understand User Experience

The broader awareness of user experience is great for this reason. Everyone from the visual designers to the developers should have a basic understand and respect for the user’s experience. Inevitably everyone will have to make design decisions that impact the experience, those decisions should be made with the user in mind. In this sense regardless of training this is how we have all become user experience designers.

So What’s the Problem?

Yet there is trouble brewing ahead for the user experience discipline. Because almost everyone involved in the web is now realizing they play a part in the user’s experience there has been a huge upswing of individuals claiming to be “user experience designers” in the classic sense. It seems that because literally everyone has an opinion on what they think would/wouldn’t be usable they are now qualified to be a full-fledged user experience designer. The problem is that awareness is not education. Being aware of the importance of usable design does not qualify anyone to be a UX practitioner. Cennydd explains this perfectly in his post:

…even among the brightest newcomers I see a worrying trend. User experience converts are typically drawn to the glamour of interaction design on shiny technology, and the amateur psychology that helps them sound authoritative about their approaches. Most lack knowledge of basic information architecture, design theory and elementary programming skills.

I have encountered many that justify their self titled “UX” label based on the fact that they use the web and know what is or is not usable to them. The obvious problem is that you are not the user and everyone is different. With out sound education in how people interact with computers you are making generalized guesses based on your own preferences and experiences which are not shared with others. Using a guessing approach is just going to lead to bad user experiences in the name of good UX. Unchecked this trend could lead to a situation where user experience design is devalued.

Where Does That Leave Things?

We all need to be realistic about what our core skills are. I am advocate of learning as much about the entire web design process as possible from programming to visuals. By all means you should continue to broaden your understanding so that you can make better design decisions for the users, for the development of the site and for visual aesthetics. That being said understand your skills and don’t over promise. If you are interested in user experience, great! There are many venues of learning the practice including universities, to a handful of great books and internships / mentoring. It will become clear when you can give yourself a new title.

The FAQ model has been used as early as the 13th century in Christian literature. Being that it’s 2011, 3.7 DESIGNS thinks you should revisit your FAQ section if you currently have one or were considering one.

Some FAQs for your FAQs:

1. How frequently are “FAQs” actually asked in your perception?
2. Who is asking these questions?
3. What if a user does not find what he/she is looking for? What options does he/she have?
4. And most importantly: WHY would a user find himself/herself in the FAQs?

Some answers for the FAQs of your FAQs:

1. If the same questions are consistently being asked by your user base, this should be a red flag to restructure some of your information. Important and relevant information should be easy to navigate to!
2. Questions are usually asked by your users, who may or may not know anything about your company, organization or product prior to arriving on your site. So when you’re considering which questions to address in your FAQ, remember it’s not actually YOU doing the asking.
3. If a user does not find what he/she is looking for, this is again a red flag to reorganize some of your content in a way that people actually find what it is they’re looking for. There must always be a “last ditch” option (ie. A well-designed footer or navigation with a phone number or other method of contacting a real person).
4. If a user is confused to the point he/she is resorting to an FAQ section which probably contains a hodge-podge of information, it is likely not the user’s own fault.

The job of a user interface designer and information architect is to make sure visitors to your site stay there as long as possible and ultimately perform a desired action. An FAQ section is often thought of as a “catch all” for miscellaneous questions that might arise. If a user feels lost, he/she will most likely not feel motivated enough to reach out and make that call to action.

So what can you do to prevent or minimize these undesirable results?

1. Organize your FAQ into categories instead of it becoming a dumping ground for afterthoughts.
2. Name the FAQ section something else. If all the FAQs relate to “shipping information” then simply call that section “About Shipping Information.”
3. File your FAQs into their proper “about” or informational sections and eliminate the “FAQ section” altogether.

We here at 3.7 DESIGNS are proponents of number 3. While it’s a considerate notion to have an FAQ section on your website, it is often misused and an excuse for a lack of information architecture. So, don’t be lazy! You owe it to your current and future user base to keep them efficiently informed so when/if they decide to contact you, they are doing so with the utmost confidence.