Feb 24 2010

The AIDA Marketing Model in Web Design

Advertisement

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.

Apple's iPad

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.

Trendex Home

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.

Lairdesign

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.

Glenilen Farm

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.

Apple's iPad

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

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.

Apple's iPad

Apple's iPad

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.

SitePoint's Book Page

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.

WPWebHost

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

Staple Web Design

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.

Further Reading

About the Author

Comments and Discussions
  • Jacques van Heerden, 24 February 2010

    Haha WOW. Ironic that I was explaining the Principle in a interview a few minutes ago.

    Thanks for the Article, you summed it up well.

    Cheers
    J

  • chopeh, 24 February 2010

    Nice. Very neatly applies to web design :)

  • Jordan Walker, 24 February 2010

    Very true are those concepts in creating effective websites.

  • Martin Risgaard, 24 February 2010

    Suprising that one of the simplest and basic marketing models are so overlooked when designing websites.

    All websites should be designed with AIDA in mind. If you fail at either one your site will fail. Period.

    (note to self: ‘Action’ CAN be that people read the content of a website = success measure: Time spent on site)

  • Tom - Airopia, 24 February 2010

    I think that this also shows the importance of using simplicity in web design.

  • NJ Web Designs, 24 February 2010

    Interesting.. Excellent and detailed write-up.
    Thanks for sharing.

  • paris vega, 24 February 2010

    Great info. I’m adding this to my web design process. Thanks.

  • Ben, 24 February 2010

    A very simplistic, but well written piece. Serves as a good reminder to veterans of the industry, but a layperson reading will benefit greatly from reading.

    Great stuff.

  • Paul Baarn, 24 February 2010

    Excellent article. So many sites would benefit from another look through AIDA glasses. I think there are many more options than mentioned here, but it’s a good start. It inspires me to think about those other options. Thanks.

  • DesignFellow, 25 February 2010

    Great post..
    This AIDA is explained clearly in the “Smashing Book”
    Oh… I forgot to say..
    The chapter is available free to download as pdf.
    Give a try..
    Chapter 7: Design To Sell — Increasing Conversion Rates
    http://media.smashingmagazine.com/cdn_smash/pdfs/sm-book-chapter7.pdf
    ;-)

    • Louis, 25 February 2010

      Interesting — I didn’t know AIDA was discussed in the Smashing Book. I’ve been meaning to get a copy of the book, but I have way too many things to read as it stands, so I haven’t gotten around to it.

  • Calgary Web Design, 25 February 2010

    This is a thoughtful and informative article and you substantiate it with some great examples. Thank you!

  • Modern interiors, 26 February 2010

    Great article, and also relevant.

  • Alex fresh, 26 February 2010

    Wow this is a great bit of marketing info that I need. I am starting my business soon and I am definitely going to use this marketing model in my marketing strategy.

    Alex

  • Morchione, 26 February 2010

    This is lame.

  • Pagello, 26 February 2010

    Another Idiot Do Anal?

  • Andy Staple, 26 February 2010

    Great article, and thanks for adding us in the article. I’m still working on that as well, to find good click through rates and continue to expand on this model.

  • Jens Kelch, 27 February 2010

    Thanks for this great article. I will def use them in my design process.

  • Manuel Pineault, 27 February 2010

    I like how Alec Baldwin explains the AIDA method as well (3:00):

    http://www.youtube.com/watch?v=TROhlThs9qY

  • Carlyn Skorski, 12 March 2010

    The truth is that press release can fetch you lightning fast result in traffic,signup,revenue, pretty much anything, but only if executed proper way-and that isn’t to tough to do, KISS method works perfectly with press releases. Thanks for the value!

  • Marco, 02 April 2010

    I have a good wine pick everyday for ya: <a href=”http://www.goodwinepick.com”>Daily Good Wine Picks</a>

  • Gregory Despain, 02 April 2010

    WOW! These are some sexy pictures! Thank you for sharing.. I’ll be back soon!

  • Dannie S., 07 April 2010

    I hate the Lairdesign copy. You can cut out the “… where the” Make it “We even consider the color of the tea!”

  • Willy Wiza, 16 April 2010

    Good topics, it open my eye , thanks

  • event marketing, 17 April 2010

    Awesome post! Look forward to reading your upcoming post. Keep them coming! Internet Marketing Consultant

  • Christopher Adams, 21 April 2010

    Nice article, Like the visuals. Very practical guidelines for marketing.
    - The Social Tech Guy

  • Jaqueline Seal, 22 April 2010

    I always enjoy reading intelligent articles by an author who is definately knowledgeable on their chosen subject. I’ll be following this thread with much interest. Keep up the great work, see you next time

  • nirmik, 23 April 2010

    cool design

  • Hipolito M. Wiseman, 24 April 2010

    I totally agree with Barbara’s comment. Thanks for discussing such an informative article with all of us. I’ve bookmarked your blog will come back for a re-read again. Keep up the great work.

  • Indian Recipes, 18 May 2010

    wonderful article, Thank you so much for introducing AIDA to us. We have implemented this in a few of our client sites and they are very happy with the outcome. We are very satisfied with the work done as well.

  • EngulfTech, 16 June 2010

    This is very informative mapping of web design and AIDA

  • Julian Krispel-Samsel, 24 June 2010

    I can’t believe it. I just looked at designzillas website, and they seemed to have copied your article completely, with the only difference being to change a couple of words and some examples to one of their portfolio-sites, they also use the ipads website as illustration and have the same headings as you do in this article! And they call themselves professional. Wtf? Some people are really taking the piss.

  • Ha Odgen, 27 June 2010

    like your site will visit again

  • Kelso, 05 August 2010

    AWESOME article.. and very nice site design.. are you using a theme?

    I’ve never personally hard of AIDA method.. is this your own methodology?

    • Nick Young, 17 September 2010

      AIDA was a model described by Elmo Lewis in 1898. :)

  • bayilik, 11 August 2010

    Hi, Great infos for my researching lesson. How can I improve myself in this subject? What is your preference? Thanks.

  • Denis, 24 September 2010

    Hello, I liked this article very mush. Thanks a lot!

    So I translated it to russian. You can find it here : http://zloi.kz/blog/show/5.html

  • Cordell Summy, 12 October 2010

    It depends on how you look at it and where you’re coming from on the subject really. Ultimately beauty is in the eye of the beholder, but Now i am with you on this one.

  • Devin Lerman, 12 November 2010

    think about ever decide genuinely nonsense, you guys a little of your info I would think about it.

  • Ana Patras, 17 November 2010

    simple, clear, direct, very effective. congrats!

  • Janiece Llanas, 18 January 2011

    Good design is often good by some, but to other people, it’s garbage. Trust us, we’ve encountered our share of varying beliefs on our very own design work…

  • Alan, 15 February 2011

    I believe that the AIDA approach in marketing is the strongest marketing that you’ll experience, at least once it’s tuned up.

    You mention that, in website design, that you can get attention around the graphics, or pictures.

    I’d suggest that you use this very carefully. Pictures can distract from the words that sell. I’ve seen some websites with real eyecatching pictures, and the response rates of those landing pages went through the floor . . . simply because eyeballs stayed on the pictures and didn’t go to the words.

    A good picture on a website SUPPORTS the words in the background. It supports the thought you want the reader to have.

    A picture that stands out distracts from what you want the reader to see and think. A picture does not say BUY THIS, only words do. So use the picture to enhance the words and make the words the attention getter.

    I’ve proven this over and over and over by picking up the pieces of websites that have little or no conversion of viewer into sales, or signups.

  • plombier, 02 August 2011

    Nice read. I found your blog on facebook and i have your page saved on my personal read list!
    I’m a fan of your site. Keep up the good work

  • Comparateur de Mutuelle, 17 October 2012

    Yes, very nice article ! I was on the Designzillas article before yours, it is just unbelievable ! But anyway, thnk you for your great explanations.

  • saroj, 23 November 2012

    Very nicely explain

  • Karachi foods, 30 November 2012

    I found your blog great..

search form
 
image description image description