The AIDA Marketing Model in Web Design

By Louis Lazaris

If you’ve been formally educated in marketing, more than likely you’ve learned about a marketing model called AIDA. AIDA is an acronym that represents the different steps involved in selling a product or service. Very often, the principles of AIDA are applied naturally when a useful product or service is being marketed. Being web designers and app developers, however, our personal involvement on a technical level in our own or client projects may deter our efforts to produce a design that correctly implements AIDA.

I’ve only recently come to learn about the AIDA model myself, and I thought it would be an interesting topic to apply directly to the decisions we make in web design. In this article I’ll provide examples with some explanations showing how web and app developers can effectively implement this model for full benefit.

A = Attention

The first step in successfully marketing a product or service is getting attention, that is, getting potential consumers to notice your product. There are a couple of obvious ways this can be done.

Attention Through Strong Imagery

Web development trends have over the years improved to imitate print methods more closely — and for good reason. Principles in print design have been studied and tested for so many years, and have proven to be successful in so many industries. The use of strong imagery to market a product has always been a powerful way to get a potential customer’s attention.

Apple’s marketing department understands the importance of imagery in getting someone’s attention, and they do this quite effectively on the Apple website, shown below.

The extra-large iPad images give the customer a clear picture of the relative size of this new device. Many readers who have browsed the Apple site before will have seen images of the iPhone or other smaller devices, so when they see the size of the iPad image, they’ll immediately understand that this is a larger device.

Of course, not every product or service requires this type of differentiation in image size, but this is a good example of how images can be powerful tools for grabbing attention.

Another excellent example of strong imagery is shown in the image below from Trendex Home, a company that sells tablecloths, placemats, and related items.

The image of the wine glass and the tablecloths can’t be missed, so it successfully gets the reader’s attention.

Of course, both examples shown above do more than just grab attention, which will be discussed later.

Attention Through Strong Typography

Another well-known method of grabbing attention is the use of large headings, utilizing color and whitespace to maximize their effect.

The Lairdesign home page, shown above, makes effective use of strong typography, using a very curious-sounding phrase to grab the user’s attention. The sentence “…where even the colour of the tea is considered!” expresses something important about the company’s view of design, doing so distinctly and beautifully.

Likewise, the Glenilen Farm site places part of their home page’s focus on the phrase “Why not try our delicious handmade cheesecakes”, which, along with the strong imagery, helps grab the hungry shopper’s attention.

I = Interest

The next step in the AIDA model is keeping the interest of the customer. In the previous section, we saw how aesthetic enhancements can be used to get the customer’s attention. But along with that, the customer needs to know how your product or service will help them. In this case, giving a list of features is not enough; you need to express to your users how those features will benefit them.

Let’s consider again the iPad and Trendex Home websites to show how the imagery conveys important benefits that help to keep the customer’s interest.

Interest Through Practical Benefits

Whatever product you’re advertising will likely be something that helps the consumer in some way. Maybe it helps them save time, cut corners, save money, or provides a service that assists them to overcome menial, repetitive tasks. Whatever the benefit is, it needs to be communicated to the customer so they can see exactly how their life or workflow will be helped.

Despite all the negative reviews and comments that have been made about Apple’s new iPad, the Apple marketing department has successfully marketed their new product to its target audience, which is not a tech-savvy audience, as some have incorrectly assumed.

The iPad image on the right displays the New York Times website as the example, which is perfect for the audience that the iPad is geared towards. Nontech-savvy users who want to use a portable device for daily tasks while commuting will immediately see the benefit of the device, not only because of the landscape/portrait potential but for the size and apparent relative ease of carrying the device.

Trendex Home likewise uses their imagery to demonstrate the practical benefits of one of their products. The spilled wine beads neatly on the tablecloth garment, indicating the high quality material used to manufacture their products. Thus, instead of saying “our products are made with high-quality materials”, they’re saying “here’s how our high-quality products help you”, which equates to features plus benefits, as opposed to features alone.

D = Desire

The next step in the AIDA model is desire, which is a natural extension of interest. After you’ve grabbed a consumer’s attention, and obtained their interest, you need to keep that interest going by promoting your product in such a way that they will begin to grow in their desire for it. This is probably the most difficult of any of the steps in the AIDA model, and can encompass a number of different techniques, but I’ll mention a few here that are geared specifically towards web designers.

Desire Through Content Sliders

JavaScript-driven content switchers and image sliders are extremely popular on home pages nowadays, and for good reason. They’re beautiful, accessible, they degrade gracefully, and they help market your products in a non-obtrusive and tasteful manner.

Aesthetics and accessibility, however, should not be the only reasons for including such a feature. This method of displaying content should also be for the purpose of helping to build desire for your products or services. Again, I’ll refer to the Apple website and their marketing of the iPad. The large images we discussed earlier are part of an image switcher that slowly shows the different ways that the iPad is a benefit to its target audience.

After displaying two iPads with content-heavy websites loaded, the next two images show the ease with which the iPad users can access and read email, along with the ability to view and save family photos.

If the user has stuck around this long, they will be visually informed of the email- and photo-related features, helping to build their desire for the product.

Desire Through Organization of Content

Anyone involved in web development in recent years will likely be familiar with SitePoint and their top-quality articles and books on design and development. Each individual SitePoint book page is an excellent example of content that’s organized with the goal of building desire for the product.

Highlighted above are headings that introduce easy-to-read lists of features, customer testimonials, and SitePoint’s competitive pricing (although I personally find that the pricing is better through Amazon, so in this case their claims for the low price are not necessarily accurate).

Similar to SitePoint’s book page, the WordPress hosting page on WPWebHost presents a clean list of features designed to build desire in the consumer.

A = Action

The final step in the AIDA marketing model is getting the user to take action. This is a step that, due to its importance, has been discussed numerous times here on Smashing Magazine and other design blogs, so I won’t go into great detail.

After getting the user’s attention, arousing their interest, and stimulating their desire for your product, they need to have a clear way to take action. Whether it’s to sign up for your service, purchase your product, or download a trial of your app, the visual enticement to take action should be elegant, beautiful, and convenient.

Any quality CSS Gallery today contains numerous examples of websites with home pages and product pages that utilize effectively-placed call-to-action buttons, so be sure to examine some of the patterns and trends used by top design firms when mapping the action processes that users take.

Action Through CTAs

Bonus: S = Satisfaction

Many people have favored adding a fifth letter to the AIDA acronym: “S” for “Satisfaction”. After a product has been correctly marketed through attention, interest, desire, and action, it is up to the product or service provider to maintain and support their products to keep the customers happy and satisfied long after purchase.

Conclusion

The techniques mentioned above, when isolated, are really nothing new in modern web design. Many experienced designers have implemented many, if not all, of these methods. This discussion has attempted to give purpose to some of the decisions we make in design, demonstrating that design should follow a close examination of content and marketing goals.

Using the AIDA marketing model, you can give purpose and direction to all the design and architectural decisions made in your web design projects.

Photo by Bich Tran on Pexels