Some banners remain on screen all the time, others will pop over for a short period of time. However, on the web, a banner should always be present on screen requiring an animation between the two.
COLOURS
1. Warning Used to help Movers avoid error situations. Consists of a description of potential errors. It should provide a recommended next step.
2. Error Shown when something goes wrong, or when the user is denied access. This should also provide recommended next steps, or a path forward.
3. Obstruction Shown when there is an obsruction. Not an error from the users part but an obstruction in the system such as when a class or session is full.
4. Authentication Allows the user to verify their identity.
5. Success/Confirmation Provides a positive response to user actions
6. Promotion/Offer Used to provide Movers with an offer, promotion or action to improve their experience.
WARNING MESSAGE
Warning messages appear before we request the user to take action. If the warning comes before an action, clearly communicate what will happen if the they proceed. It should always provide a recommended next step.
ERROR MESSAGE
Error messages let the user know that something has gone wrong after they've tried to do something. Explain the problem and provide the user with a next step. Keep the message simple and direct, and avoid confusing the user with technical details. If it's our fault, own up to it.
OBSTRUCTION MESSAGE
These are less aggressive ways of displaying an error in the system or a block in the product. These more often than not have no action required.
AUTHENTICATION MESSAGE
These are pureply for the purpose of an identification or authentification issue.
CONFIRMATION MESSAGE
These are used for confirmations, alerts, and acknowledgments that require minimal user interaction. This banner will generally appear only for a short time after the succesful actioned is preformed.
OFFER MESSAGE
Offer or promotional mesages are used to give the user an additional feature or treat for using the product. A standard banner for this would be the invite a friend feature.
On the web, only if there is no other relevant banner is the offer shown. The offer banner is not used in the app where a feature card is used instead.
RESPONSIVE STRUCTURE
When using banners on smaller browser width or mobile, the banner text may stack. Keep the icon on the left and centered vertcially. The action must be on it's own line when the entire message wraps to a second line. Allow a small padding between message and action. Whatever screen size, a banner will always span 100% of the page width, however the content should never be displayed wider than 1200px.
