Advertisement
Design Theory

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!

Related Posts
  • Web Design
    Interface
    How to Become a Conversion-Centered DesignerUnbounce
    So you want to be a landing page template designer? You may think you have it easy - after all, landing page templates are just a single page. That’s much easier than designing a full-on website. But the rules of design change quite a bit when building conversion-centered landing pages.Read More…
  • Web Design
    Applications and Tools
    The ThemeForest Author’s Guide to Unbounce TemplatesUnbounce preview
    In this tutorial I'm going to introduce you to Unbounce, a tool for building campaign-specific landing pages. We'll walk through the anatomy of various types of landing page, go through the tool’s features, then cover what’s needed to sell your own Unbounce templates on Themeforest.Read More…
  • Business
    Marketing
    A Smart Guide to Landing Page OptimizationLanding page optimization
    Landing pages are a great way to convert your website traffic into users, email subscribers, or customer leads. In this smart guide to landing page optimization, learn how to apply proven strategies that will help you convert a higher percentage of your site visitors.Read More…
  • Web Design
    User Experience
    Best Practices for Designing Effective Banner AdsAd effective retina
    If you’ve ever been online — which, if you’re reading this, I assume you have — you’ve probably encountered a banner advertisement or two. These typically come in the form of a prominent image on the page, although the exact size, positioning and content can differ drastically.Read More…
  • Web Design
    Design Theory
    Building Visual Hierarchy into Your DesignsDsfd hierarchy visual retina
    It’s important to remember that hierarchy has not only to do with content and the words that you have on a page. The imagery you include in your designs, from photos through to icons, buttons and any other visual elements other than text, has a big impact on the hierarchy and perception of your website.Read More…
  • Business
    Marketing
    How to Optimize Your Landing Page for Conversion2 preview optimize landing pages for conversion
    Landing pages are the equivalent of your sales team in the online world. As such, you can use landing pages to generate new leads, for example to gather email addresses or Facebook likes. Landing pages are also used to sell products and are often referred to as sales pages. In the real world you'd make your sales team more effective by giving them sales training, or injecting them with a dose of motivation such as a performance-based bonus. Online, to make your landing page more effective, you optimize. That involves tweaking every element of your landing page to give you the best possible chance of making sales. An effective landing page is made up of three key elements: attractive design, compelling copy, and optimization. In this tutorial, we'll look at how to optimize your landing page to maximize conversions. That said, all three elements of effective landing pages overlap and interact, so this tutorial will also touch on landing page design and copy.Read More…