html, css, jQuery, PHP, mySQL
Research shows that the experience that a consumer has on a website can drastically affect their perception of the brand or product. Bad design really does result in more stress – and fewer sales.
This is not simply a question of aesthetics, but also usability, and of understanding the purpose with which a customer has visited the site. All of these aspects need to be taken into consideration early in the design process, and can be reviewed regularly on a live site.
I have attempted to collate some interesting information from various sources around the web, outlining current trends in neuromarketing.
Google is trying to speed up the web by making page loading speed a ranking factor – and neuroscience is backing up the importance of fast, easy-to-use websites.
Just in case you were hiding under a bush in Outer Mongolia and missed the memo, research conducted by CA and Foviance shows that badly-designed, slow web applications can cause significant stress, as the concentration required increases by up to 50% . They note that outside of the lab, this translates into visitors who give up and leave the site early.
In their experiment, they artificially slowed websites to mimic slower connection speeds, but found that users consistently blamed the website for the slow speed regardless of the cause.
“more than three quarters (77%) of European consumers blame either website owner or the website host (which is in any case chosen by the website owner) when an online application fails. It also revealed that if consumers encounter problems online, 40% will go to a rival website and 37% will abandon the transaction entirely. Only 18% said they would report a problem to a company”
Multiple measures of stress, attention and frustration, including EEG (alpha waves), EOG (eye movement), behavioural analysis and a post-test questionnaire, all gave consistent results showing agitation, stress and frustration caused by a bad online experience, with alpha waves taking as long as a minute to return to a normal state after using a sluggish website.
It is essential that web applications are optimised to perform well from the customer’s perspective and minimise “web stress”. In a real situation, 75% of customers will abandon a website which is difficult to use without completing a purchase.
CA and Foviance have identified two critical danger points in the sales cycle where stress is at its highest – the search and checkout stages. On a large site with many product categories, a good search function which is forgiving in its treatment of incomplete or mis-spelled search terms will be more use than one which is rigid and restricted. Helpful search suggestions could further improve the chances of finding that elusive sonic screwdriver amongst 999,999,999 items. Forms … well everyone has had a bad experience of some kind with an online checkout. This is a subject I will return to later …
Here are some tips from the authors:
Of course there is more to good design than a fast website and a simple, logical form. Other factors to consider include the aesthetics of the site, its usability, and the purpose which the customer hopes to fulfil by visiting.
The visual appearance of a site will of course be the first thing that many designers think of when considering a new site. Not only do colour choices affect perception of a brand, but the shapes of items on the page can be a valuable cue to help people navigate and achieve tasks.
Keith Lang has outlined an interesting hypothesis about the popularity of rounded rectangles
According to Lang, the ability of the Mac to draw rounded rectangles quickly dates from 1981, when Steve Jobs asked graphics expert Bill Atkinson to find a solution due to the ubiquity of rounded rectangles in reality. These “friendly” RoundRects helped to define the “safe” appearance of the Mac and distinguished it from its competitors. Even today, the Mac User Interface Guidelines state that “people recognise push buttons by their rounded shape” – easing the ability of a user to get tasks done quickly in an unfamiliar environment.
Lang asked Professor Jürg Nänni, author of Visual Perception, if rounded rectangles could be easier to see. This is what the professor had to say:
“You are absolutely right. A rectangle with sharp edges takes indeed a little bit more cognitive visible effort than for example an ellipse of the same size. Our “fovea-eye” is even faster in recording a circle. Edges involve additional neuronal image tools. The process is therefore slowed down.”
There is only so much cognitive processing power and attention available when a person views a website. Lang speculates on the impact of cognitive cost on design, stating “certain aesthetic elements are, in fact, simply optimizations for the human visual system”. There may be an increased cognitive cost of garish colour schemes, inappropriate movement, or fonts which are harder to read.
The shape of elements can influence perception of other qualities due to synesthesia. An experiment by psychologist Wolfgang Köhler demonstrated that even very young children consistently name “Tikitiki” to a spiky shape, and name a curved shape “Boboo” when given a choice of the two names.
We naturally associate sharp edges and jagged points with things that could cut or hurt us. Softer rounded shapes encourage us to touch them. Although I am unaware of research in this field, I would hazard a guess that rounded shapes decrease stress whereas spiky shapes would increase stress. Uses which Lang suggests for this “synasthetic” approach to design include:
Quinton Figueroa has highlighted the importance of the overall design for the end user in his post Nobody Notices Details.
.As designers, we obsess over the details and skilful execution of a design, yet website visitors rarely if ever notice them. In fact, it may be true to say that often they will only notice details when they are wrong.
“All they notice is the end effect of all these details at once … they will intuitively know on a subconscious level as to whether or not something works. That’s why when you ask most people what’s wrong with something they wont know. But when you fix it they will say, oh okay, yeah now it’s right.”
Never forget that the average person neither knows or cares much about design and the technical wizardry which you used to accomplish your fabulous web design.
Design is always “right” when it appears to be finished, complete and professional. Apart from rare occasions, design is correct when it draws no attention to itself as a product of a process of thought, but rather appears to have sprung into existence as a finished work of art. A design should hang together as a whole – if details are calling to much attention to themselves and inviting comment, that could be a sign that something is wrong.
Even if the objective is to draw attention to some feature, the design should not distract from completion of a task – attention should enhance usability.
“They just want to see what they want to see and move on. They don’t care about the work that you put into something, they care about the work that they put into something.”
Although the above aesthetic considerations can aid usability, don’t forget to carefully plan the architecture of any web applications and forms to make them simple and quick to use.
A recent post on Design Festival by Emily Smith gives some useful pointers with regard to form design.
In addition to this, don’t forget your differently-abled visitors. Make sure form fields are accessible via assistive devices, screen readers and keyboard navigation, and provide “help” links for anything which may be unclear.
Visitors to a website have some purpose in mind when they visit – and the website has some purpose for existing (such as selling shoes, for instance).
In Web Design + Psychology = Satisfied Users?, “Brad” defines “being creative” as “producing something useful”, and raises the question of how a web designer can know if they have produced something useful.
He rightly points out that intuition is a very unreliable guide when it comes to psychology, due to effects such as cognitive bias. A much sounder basis for decision making can be found by looking at psychological research, and trying to understand the task that someone is trying to do on your website.
Many obvious things can contribute towards a site which is stressful and hard to use – slow applications, confusing forms and poor search engines. However what is less obvious is that this increase in stress is very real and causes a large increase in cognitive load for a considerable time after a poor online experience.
There is nothing we can do about a slow connection speed – but always remember that applications on the web should be optimised to be as swift an easy as possible, even for Grandma on dialup.
The overall look of the site, including shape and colour, can also significantly cause or reduce stress. Well-designed sites will have a natural flow to them, which encourages ease of use. Colour, shape and movement can be used to enhance the understanding of what to do next, attract attention to critical areas, or reduce distraction from a complex task.
With the arrival of HTML5 and CSS3 there is going to be an explosion of funky new online applications – lets make sure they are as pleasant and fun to use as they are to design.
Yale School of Art – Warning! Seizure Possibility
Tags: aesthetics, alpha waves, colour, concepts, connection speeds, current trends, design, eeg, european consumers, eye movement, frustration, google, neuro, neuroscience, page loading speed, slow speed, slow web, slower connection, useability, web applications, website host, website owner
This entry was posted on Thursday, March 24th, 2011 at 11:07 pm and is filed under neurology, useability, web design. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.