Advertisement

Employing AIDA Principles in Web Design

by

In this article we'll discuss how we can use design to implement the principles laid out by AIDA (the marketing acronym, not the Italian opera) and help create sales-orientated web pages.

AIDA stands for Attention, Interest, Desire and Action; the four steps belonging to the process of selling according to E. St. Elmo Lewis, the man behind this school of thought. AIDA can be applied to different situations which involve selling products or services, but in this article we'll focus on how we can achieve each step through web design.

AIDA principles are especially relevant to the design of landing pages, where typically marketing and web design meet online. Landing pages generally aim to sell either a product, service or a subscription.

Let's begin.


A: Attention

Attention is the first step of the AIDA principles, and the one upon which all the others rely. After all, how can you get a user to take action if you haven't caught their eye to begin with?

Attracting attention is discussed a lot within web design; clients want their site to be noticed. Concepts such as Above The Fold and The Thee Second Rule are regularly discussed, both of which focus on the need to grab users’ attention quickly.

The web as a platform is an excellent way to attract attention; good or unique design by itself will get noticed. However, individual elements of a design can be utilized to draw the focus of the user and lead them to particular areas on the page.

It's worth noting, however, the negative connotations of having too many page elements vying for the attention of the user. If everything is emphasized, no sense of hierarchy will be established and the user may feel intimidated and overwhelmed.

Methods of attracting attention generally change over time as trends and technology evolve, but here are a few popular methods currently in use.

Large Text

Really big text has been around for a while now within web design. It is generally used to make a bold statement upfront such as welcoming the user or explaining the nature of the site (e.g. We make websites). The sheer size of the text relative to the rest of the page places it firmly at the top of the visual hierarchy.

Sliders

Javascript powered sliders have been a massive trend for the last few years (just check some of the popular files on Themeforest) and rightly so – as they are excellent for grabbing attention and making a great first impression. They allow for the use of imagery combined with movement and animation. Sliders have been gradually getting more advanced, starting from simple fade and slide transitions to the 3D effects capable with CU3ER and the (albeit Flash-based) Piecemaker.

Animation

To create elaborate, detailed animation on the web, one would have traditionally had to rely on Flash - this is no longer the case however. CSS3 animations are becoming increasingly more advanced and browser support is increasing along with it.

Animation, if used correctly, is an excellent way to distinguish your site and attract the attention of the user.


I: Interest

Next comes Interest, the second of the AIDA principles. We've already grabbed the user’s attention, now we need to get them interested in what we are offering. How do we do this?

It is suggested that instead of communicating the features of our product or service, we explain the benefits and advantages of it. This approach shifts the focus back to the user rather than the product or service and enables the user to identify with it on a personal level.

In terms of how we can approach this through design, it is all about clearly and succinctly presenting these benefits. Users will not want to read through paragraphs of a sales pitch in order to find what is in it for them. Chunks of information, steps, lists, bullet points, icons and more can all be utilized to quickly communicate information.


Evernote displays three large benefits, coupled with images, as soon as you load the page.

The landing page for Basecamp by 37signals gets straight to the point by listing three key benefits.

The webpage for Sparrow uses clearly defined sections to display the benefits of their app.

D: Desire

OK, so we’ve attracted their attention, got them interested, now we need to get users to want what we are offering. We have to generate desire.

Generating desire is a broad topic, businesses employ whole marketing divisions to create elaborate and engaging campaigns in order to accomplish this. We will focus however, on how we can do this through web design.

At this stage, you have the user’s attention and interest and they will be willing to invest more time on the site. This patience allows for more detailed information to be presented, whether in the form of images, video or text. There is no need to rush this step.

Show it Off

It goes without saying that you need to present your product in the best light. People will make judgments purely based on aesthetics and will associate good design with a higher level of overall quality. Not only then, must the design the website be up to par, but the actual product (if there is one) must look good as well.


The short video for Clear is excellent and really shows off the app.

High quality, enticing imagery and well produced videos can be extremely powerful in making your product look good. The Apple website does an exceptional job of showcasing all of their products using large imagery combined with animation.

Consider the best way to present your product or service. Those who sell digital products, such as apps or web design, often display them on devices such as monitors, laptops and phones.

Social Proof

Social proof is one of the most powerful and common ways to generate desire. It can take many forms and you will often come across it multiple times in your day-to-day life.

Social proof can be a complex psychological concept, but on a basic level it describes that people take their cues from other people. If others find something acceptable, an individual is more likely to think that way themselves.

Testimonials and reviews are an excellent example of this, as they will demonstrate that others have already had a good experience with a service or product. Knowing that others have used a product and recommend it removes the feeling of risk and in turn increases desire.

Better still is to feature the opinions and views of experts or celebrities. These types of people have a large following and their opinion has a lot of value and trust behind it.

The same concept can be seen when a design studio displays big, successful companies as clients, or when an author proudly presents where their work has been featured.

As well as using quality to your advantage, quantity can work just as well. This can be seen when high numbers of Twitter Followers, Facebook Likes or RSS Subscribers are displayed for all to see.


A: Action

We’ve done all of the hard work and have made it this far, it now comes down to the final step – action. The ultimate goal for a landing page is to convert someone to a buyer or a subscriber and the last thing we would want is to fail at this final stage.

Call to Action

A ‘Call to Action’ element is pretty self-explanatory. They are elements, usually in the form of buttons, which invite the user to take some type of action such as ‘Buy Now’ or ‘Sign Up’. They sound pretty simple, but there are some considerations to be made when designing.

First and foremost, with any call to action element, it needs to be absolutely clear and obvious that the user can interact with it. Buttons are expected to have certain styling, such as a clearly defined area or a feeling of depth.

We can further help distinguish call to action elements using various methods. Use color, size, detail and plenty of white space to your advantage and to further highlight the element.

Make use of direct wording on the buttons to encourage action and create a sense of urgency. Clear, concise language will not only promote action but it will be obvious to the user what to expect upon interacting with the element.

We also need to make it as easy as possible for the user to take action by providing multiple opportunities for them to do so. A prominent call to action element should be included early in the design, with further instances throughout the page.

It is important however, to maintain a good balance. We do not want to overwhelm the user and make them feel pressured in any way. Too many call to action elements will seem pushy and may have the opposite effect of what we want. Two to three is probably a good number to aim for.

The Z Layout

The ‘Z Layout’ has been discussed on Webdesigntuts+ previously, but it is worth mentioning again as it applies perfectly to landing pages for leading users to action.

The ‘Z Layout’ is a simple, but effective web page layout that directs the user through various points on a page and eventually leads to a call to action element. This layout is a perfect way to implement AIDA principles, leading the user through each step in turn and finally presenting the call to action at the end.

An advantage of this layout is that it is very adaptable and can be utilized in many different ways. The structure of the ‘Z’ shape is not rigid and is able to expand and contract to encompass different forms of content. Therefore, you'll often see examples of this layout that can look markedly different from each other.

Here are some examples of the ‘Z’ layout in action. See if you can spot the intended path.


Conclusion

Knowing the theory behind AIDA principles and how to execute each step through design can be very valuable knowledge for a web designer.

The individual techniques discussed above are all relatively simple and commonplace within web design, but it is a different skill entirely to be able to combine them in such a way to create effective, goal-orientated web pages.

If this article has sparked interest in AIDA, check out the accompanying Premium tutorial Designing a Landing Page Using AIDA Principles..

Thanks for reading!

Advertisement