How to Display Occasional Announcements on a Website?

Question

I’d like to add an announcement banner or an element with the same functionality (e.g. alert, button) to a website to notify users about an upcoming survey. It should contain a call for participation, an additional link to the survey site and should only be displayed temporarily (while the survey is running). Currently, there is no space used for any kind of announcement on the website therefore I’d like to find a solution for positioning that’s less intrusive but gets attention at the same time to have users sign up for the survey.

Here is an outdated question targeting the same topic:
Alerting visitors to a website of a current event (e.g. breaking news)

And here is a set of possible solutions:

Do you have any further ideas on how to display an announcement or even best practices to share?

Answer 1

Great question!

This is a very common design pattern and it's one that sites screw up all the time (IMO!). Usually the objective is:

1. Ensure the user sees the notification.
2. Allow the user to get on with using the site smoothly after that.
3. Don't p*ss off your users.

This seems simple, but implementations often break the objectives! For example:

• Model pop-up box - I hate this solution. (a) it's unnecessarily intrusive; (b) users associate popups with bad emotions because of popup ads; (c) users may arrive at a site hoping to do one thing (e.g. buy something) and suddenly they encounter a wall which hides the site and forces them to look at something first. None of these lead to a positive feeling for the user. So this accomplishes objective #1, but fails objective #3 and partially fails #2.

• Notification on the side. This accomplishes #2 and #3 but mostly fails #1, since users typically read sites from the top-left of the window downwards.

A solution which accomplishes all 3 is:

Here:

• The notification is conspicuous because it's top-center where the user's visual flow starts => objective #1.

• The use of color and/or framing (shadow, outline) distinguishes it from other content. There are other techniques (fade/expand/parallax in) which may assist in highlighting also => objective #1

• It is placed inside the normal layout of the page, so the user will feel familiar with the site. => objective #2 and #3

• It's placed at the top of user flow, so they can simply scan down and keep doing what they normally do => objective #2 and #3

• It has a 'dismiss' button which is useful for the user because they can dismiss the notification and get on with work, and useful to you because you can measure the click and know that the user saw the notification. Also, users who feel irritated by the notification can "do something about it" and eradicate it => objective #2 and #3

Hope that helps.