Psychology of Design

There are few things more important to a successful website than its design. In many respects, it's the window to the soul of an Internet business as well as the people behind it. Portals busy with too many elements fail, in that they attempt to express too much, confuse visitors and make interaction stressful. On the other hand, those which are too barren or sparse fail to build trust or convey purpose with users clearly. Is there a successful middle ground? A virtual place where satisfying end-user needs and designer creativity meet to fulfill the objectives of those running a website? That balance is certainly the goal, but how do we (the collective of Web professionals) get there without alienating either essential group?

 

There are, or perhaps should be, two schools of thought in the psychology of Web design; should our experiences influence design choices or should end-users (and their demographics, psychographics and needs) determine how websites and applications are designed and developed? The difference might be arbitrary to some, but they can have a profound effect on how your site performs. Do you listen to the actions of your users as they interact with your site or do you, as a designer (or as the one responsible for its success), dictate best practices? Clearly, this can be a challenging choice for a designer. Yes, a designer's job is to build a Web page or website to fulfill the objective of the client which meets or parallels the existing brand (and its customers affinity for it), but are users' needs superseded in doing so? If the answer to that question is yes, are we risking the loyalty of existing clients or even worse, prospects? And how do our choices affect revenue?

 

In a perfect world, there would be a balance between properly satisfying the needs of the brand and creating an appealing Web presence that drives users to take specific actions, feel certain emotions, and create certain thoughts. Successful designers achieve this symbiosis. But there are many challenges - cost, purpose, guidelines, and environment, not to mention the many platform limitations.

 

Web designers express the objective of a website (without copy) through layout, form, color and theme. To provide designers with the best possible canvas to help achieve the objectives and goals set forth, it is essential to address the psychology of design from the perspectives of purpose, balance and branding - often where genuine psychology comes into play. Those able to romanticize the experience while remaining in line with fundamental artistry achieve a certain mastery of design psychology and provide a website with dramatically better odds of success.

 


Website Magazine Readers Please Note:
There are additional article briefs/sidebars which appeared in the 2009 February Edition of Website Magazine. In order to maintain the flow of the article you are reading now, we have placed this content on its own page. Links to these article briefs are below:

- The Many Flavors of Site Search
- Trust and the Theory Behind Color
- Life With (and Beyond) jQuery

 

No Page Is an Island

 

It used to be that the index, or home page of a website was the most important piece of your entire Internet property. But thanks to the increased sophistication of search engines and their broadening indices (as well as the popular rise and use of landing pages in all things Internet marketing) this is no longer a hard and fast rule. In fact, since search engines, social networks and individuals can send Web users to virtually any area of a website (predefined or not), it is more essential than ever before to make strong first impressions, regardless of the drop-off point for visitors.

 

The questions designers must ask themselves, considering the fact that "no page is an island," is: How do individual pages relate to the overall purpose of the site itself and, in turn, how do these pages relate to the user?

 

If our aim is to sell merchandise, secondary and even tertiary pages must meet our underlying purpose in some capacity - perhaps by giving the "add to cart" button a location high on the page. If the business objective is to sell exclusive (not found elsewhere) content, featuring multiple advertising units runs counter to the concept of conveying credibility and makes the principal focus of a design unclear for users. This ultimately decreases the chances that end-users will make a purchase. In any context, straying too far from the core mission of the website (no matter how good of an idea it may seem) can be detrimental. To achieve consistency and saliency of purpose, the rule should always be to analyze each element appearing on each page to determine its likelihood of distracting visitors. Do you really need another third-party widget? Which elements of our CMS' force users to take an action that is counter to the action we really want them to take? Asking these questions might reveal deeper site issues than you previously thought.

 

Once the site visitor has seen the main/index page of the site and is interested enough to venture deeper, presenting navigational cues (textual and graphical) should become a primary purpose of pages. After all, the visitor is coming to the site in search of something to see, read, hear or purchase - or all of these things combined. Getting users to this content as quickly as possible is a priority, and there are several different ways to do this depending on your visitors' preferences. For example, popular blogging and CMS system WordPress (wordpress.org) features many plugins to help users find the most popular content, recent content and even content related to the page the end-user is currently viewing. The result is more interaction.

 

Giving Genuine Meaning to Whitespace

 

White space, often referred to as negative space in design circles, is the portion of a page left empty or unmarked - essentially, just unused space. There is a purpose for white space, however, and many consider it a vital graphic element in Web page design. White space is not about increasing margins, paragraph spacing and the space between sections. Expert use of white space helps a designer achieve balance, provides a sense of elegance through simplicity, and focuses the reader's eye on a desired part of the page. Most of all, white space provides a sense of breathing room for the viewer.

 

The concept of whitespace, however, can seem counterintuitive to many website managers or inexperienced designers. Wouldn't it simply be better to include more content to tell the story, promote a product and feed search engine spiders? More content is usually better, but the presentation of your content has a major impact on how it is consumed, if at all. When the spacing of characters is small, margins are wide and paragraphs run together, copy becomes a much less effective tool to convey the intended purpose of the page to end users. People don't typically react well to rooms full of clutter, so why would they with a Web page? Part of this sort of response has to do with how we associate open space with emotional or physical comfort, and our basic human survival instincts - when we feel spatially constricted our primary concern is finding a way out. Often referred to as fight-or-flight, this response comes down to one result on the Web - leaving the website. And once a user feels threatened and leaves with a bad impression, they won't likely return. But when spaces are comfortable, users feel safe and more open to the power of suggestion.

 

Designers can influence decisions by discovering which areas of a website are of the most importance, and which are better left to secondary pages, or not included at all. The easiest way to uncover this essential information (though there is an investment of time) is through the implementation of heat maps - a graphical representation of where clicks occur on a two-dimensional map of a website. Popular services include CrazyEgg.com (commercial) and ClickHeat (open-source) from LabsMedia (labsmedia.com/clickheat/), although most de facto analytics solutions feature this capability out of the box. With a graphical representation of viewer clicks, underperforming areas can be replaced with white space to direct users to focus on the desired portion of the page. Of course, testing different elements is always suggested before making a sweeping change to a website.

 

For designers, convincing a client to leave a portion of their site unused can be a struggle. The client may need to be reminded of how the layout of the structure and content should address the specifics of influencing how viewers approach, consume, and act on the page. In other words, remind the client that their page should be designed to produce one primary action. If a client has trouble understanding the value of certain design elements like white space, the designer should make every effort to demonstrate its value through tools like heat maps, case studies, testimonials or simply presenting different versions of the page to several decision makers at one time.

 

On the Importance of Image and Branding

 

Brands play a major role in the success of all organizations, both online and in the brick-and-mortar world. But too often, the branding of a Web businesses falls by the virtual wayside. While it's smart to focus on the value proposition of the actual service, image is everything. You might initially struggle to explain the essence of your own brand, but its worth every effort. The most notable brands convey a certain cultural significance, a shared lifestyle and, most importantly, an attitude. Coca-Cola, one of the most identifiable brands on the planet, has branded to the point where it is much more of a culture than a product.

 

If exceptional businesses are supported by great brands, then bad businesses fail because of poorly conceived brands. In hyper-competitive markets where "getting online" takes little money and even less time, those with the ability to differentiate themselves can rise above the noise and create an enterprise of significant consequence.

 

Branding is, of course, a lifetime pursuit but it begins on a small scale. Those most successful in design branding understand that logos communicate the essence of an organization and invest heavily in their development. The same holds true for branding colors (Coca-Cola red, for example) and design elements consistent throughout the brand (Coca-Cola's cursive lettering.) On an even smaller scale, a website's favicon (the tiny image in a browser bar) can instantly add credibility to a website before the user even becomes familiar with the brand.

 

Clients' aims and desires are always relevant to a site design project, but hopefully the preceding information helps show that individual client preferences should often take a back seat to proven design principles and user expectations of websites. The client's investment of trust in the designer can pay high dividends when it comes to design and branding issues. So, rather than merely being the production of online decoration, Web design is an effort of direction and communication.

 

Web design is not something that should be engaged in lightly. The goal is to strike a balance between client preferences, design principles, and trial-and-error tests based on end-user analytics data. Perhaps it is best not to view Web design as a one time, beginning-to-end project but rather as a continual work in progress. At no point will the preferences of the client, the designer, and the end-user all coalesce perfectly. But that's fine as long as they can come close enough to guide visitors to established objectives - a goal common to all parties involved.