Banners get their roots from advertising. They are inspired by real-life banners and are translated into the world of UX to land users to desired end goals.

In my relatively short but exciting design career, I’ve been asked to design persuasion banners at multiple stages. The usual feedback is: make it more attractive and eye-catching.

Banners are extroverts!

Think of the way extroverts seek attention all the time 💁‍♀️. Being one myself, I can totally imagine multiple banners popping up and fighting for attention on a page. Sometimes there are just so many of them screaming for clicks, that it becomes confusing and chaotic for the users who are left wondering which ones they really need in their lives.

The focus on shouting ‘Me, Me, Me!’ that is happening from the perspective of the banner doesn’t help. The life of these poor banners is not easy.

They are often the shiniest element on the page. They also get the most clicks, which is why they are used, overused, and abused on digital platforms.

Let’s deconstruct their existence and find a methodological approach in their type and placement so that they can provide value for the user and the provider.

Anatomy of a Banner

1.Visuals: A banner will usually have an image or a stylistic element complementing the basic idea of what it is communicating.

2.Container: This is the outlining box that holds all the elements and is often created in vivid or contrasting colors to catch the user’s attention.

3.Text: A banner’s text contains a short message that is very specific to a user's actions. The text should be short and to the point.

4.Call to Action: This could be a button, link, or icon inviting the user to perform the activity.

Types of Banners

Banners can be mainly of two types — actionable and informational. Both these types could have further subtypes depending on the context of their usage.

Actionable:

• Time-based: Offerings that use time or a limited offer as the motivating factor for the user. Creating a FOMO is what these kinds of banners encash upon. Eg: Hurry only 2 left! Deal of the Day, 11 min to avail the discount!
• Login / Signup Persuasions: Benefits like cash, discount, wallet points, etc. aim to tempt the user into signing up with the platform. Signing up is like a window into the soul of the user, and gives us access to their preferences. This data helps in optimizing recommendations and personalizations for every profile.
• Inspiration-based: Providing users with exciting information that aligns with their interests/search would nudge them into exploring that idea. For eg. Wouldn’t Game of Thrones fans be thrilled with the idea of visiting Ireland if they knew it was shot there.
• Offer-based Persuasion: Using attractive pricing, discounts, and payment options is one of the book's oldest tricks to make a user transact online.

Informational:

• Status Based: Gives users status feedback on their effort. Telling them if their task is completed/failed /or is in process.
• Highlighting USPs: Convincing users why they are the best in the industry.

Things to keep in mind while Designing Banners

1.Banner Placement:

Banners are interruptive, but their level of interruption should match the level of importance. You want to place them where they are noticeable while not disturbing the journey. For some users, the drama of these banners might be too much so they should have an option to dismiss them.

Here is a tool that I often use to see how a user’s eyes would navigate on the page and place my elements accordingly: https://vas.3m.com/

2.Making them stand out :

You can explore and experiment with gradients, colors, Motion bold typography, visuals: add imagery via icons or relevant Illustration to keep it interesting. The idea is to break the pattern from the surroundings in which this is placed.

3.Design for Scalability :

Imagine in how many ways it will be used by the developer after it’s designed. Use creatives that work in different aspect ratios and dimensions. Design for breakpoints. Account for all the edge cases that might be.

Visualizing what comes next after clicking on the banner is even more crucial than the banner itself.

4.Banner Blindness :

Stacking banners one below the other or inundating the space with too many, leads to none of them having a desirable impact. The creator should be very careful on how they use these charismatic elements and when they need to introduce these pushes.

5.Abuse and Overuse :

If the same banner is running on the landing page all the time, consider if you just need to include that information on the page permanently. Try to think out of that box. literally!

Keeping it relevant: Information presented to someone who is not interested is often perceived as noisy and unnecessary — use personalization data to provide relevant banners.

The word “persuasion” is often associated with manipulation, trickery, and especially for a designer, the use of dark patterns. It’s earned itself a bit of a reputation. Try not to do the same.

Conclusion

To sum up this episode of beauty and the beast, the takeaway is that banners are not bandaids for thoughtless and confused communication.

So the next time your Project Manager comes up with a requirement for a persuasive banner — ask yourself, is it really required? Think of all other innovative ways of conveying the same information or just curate a banner keeping the above points in mind. Hope this helps in your creation process.