Web App - How to grab the user's attention no matter what! (notifications)

Question

I'm working on a web application that, among other things, receives orders for a business. There's a page where the orders are listed, and it is refreshed at fixed intervals so that the list shown on-screen is up to date.

However, there will be many cases where the user of this web application will not be paying attention to the browser window (it could be minimized), perhaps because this person is busy dealing with workmates, things that happen in the business, or using other software on the same PC (maybe 1 or 2 other applications, desktop ones). This user might be using a software that takes the whole screen for itself, and our web application needs to get the user's attention when new orders arrive, even when all the situations described before are happening.

I've talked with potential users and they've told me that something like Avast's update notification would be ideal - that is, a notification that grabs the user's attention through both visual and auditory means, and that is overlayed on top of everything currently on-screen.

However, something like Avast's update notification is not possible in a web environment, to my understanding. The idea I had was the following, combining 3 techniques:

• First, a sound alert will be played each time new orders arrive.
• Immediately after that, the browser window will be given focus using JavaScript (e.g.: window.focus();).
• Following that, a JavaScript alert() will be triggered, with a short message indicating that new orders have arrived, and that the user should pay attention to/read the list of incoming orders in the page.

From a technical standpoint, said approach faces problems regarding browser and operating system behaviour.

• Each browser behaves differently regarding the techniques I mentioned. For example, while Chrome and Internet Explorer can be brought on top of all other windows through alert() and/or window.focus(), Firefox won't even do as much as having its task bar icon blink.
• Each operating system might also behave differently.

Now, while the solution to this problem needs to be cross-browser and cross-system (which is a technical issue, and not a user experience one), it is part of the problem as a whole, which I do believe is a user experience problem: How to get the user's attention no matter what. Sounds alone won't be enough; a business can be quite chaotic, and sound alerts can go ignored. A visual element that stays on-screen until the user reacts is essential.

How would you handle this scenario?

P.S: If you told me it's an issue with the user itself who isn't paying attention to the system in use, I'd agree to a degree, but there's not much that can be done with the user itself, so the web application must try to cooperate in this regard.

Answer 1

What Google Messenger and Facebook Chat do, which causes me to rush to the webpage like some kind of chat-deprived zombie, is they have the webpage icon flash in my task bar. This Stack shows you how to do that. Edit: HTML5 Notifications are looking more attractive than JS.

The reason this grabs my attention (and is strong from a UX point of view) is that it's a very strange thing happening that not many websites do. A flashing icon is very out-of-the-ordinary, so for all realistic purposes, the user will be drawn to figure out what the heck is wrong with their webpage/icon/etc.

Aside from the aforementioned App solution, you could also use a commercial API to send your clients a text message every time they get an order. A free and similar solution would be to send them an email every time they get an order.

---

The most important thing is to not drown your clients in liquid updates. I have no idea what your service is, but unless it's sending your clients updates so infrequently that your updates aren't annoying, or that the "orders" being described via update are so insanely massive they warrant instant notification (like an Apache helicopter or a yacht being sold), you should cautiously approach the grounds of borderline forcing your client's attention.

No one likes those who are self-centered. The most important thing is making the update push appropriate for the end-product. While yes, it's true that letting your clients know "Hey guys! You sold another $1.50 wholesale T-shirt! That makes 3,960 of them today!! Click me to close this notification" might seem like a good idea on paper, in reality, it would get annoying very quickly.

Answer 2

You can't plant a tree in Australia while in France.

What you are asking here is the same as asking:

I have two rooms on two different floors; Only one room has a telephone installed; How can I make the telephone ring in the other room.

In other words:

A web app functionality is limited to the scope in which it is implemented (the browser). You have no control of the user OS, nor of their machine.

From a UX point of view, this is not a web-app problem, not even a desktop-app, this is an OS problem.

If the device used is a personal computer, and clearly your context analysis involves users using applications outside the browser window, your system should really be considered on the OS level rather than on the browser level.

To answer your question directly: This is not achievable from within a web app. You have to look into lower-level solutions, such as a text message or a notification application on the host machine.

Set the user on fire

Regardless the solution chosen, the only way I can see you grabbing the attention of the user no matter what is if every time a new order arrives you set the user on fire so the user must take action to put the fire off. There's no practical solution to "not matter what" problems.

Answer 3

One possible solution is to make a small notification app that you have to install/authentificate (like Dropbox or Evernote and so on). In that case you can overcome all the webapp limitations. Need extra work though.

Answer 4

Although it's still in it's infancy and not supported on all browsers, a combination of HTML5 desktop notifications and sounds could achieve this in certain browsers.

HTML5 Notifications

Javascript Sounds on Events

Answer 5

Well, an OS-level notification app could be a good solution, but sadly it's not within the current project scope/budget. Besides, we'd have to do something that is cross-platform, or stick to "Windows-only".

There is free/libre and cross-platform software that could get the job done. Requiring to install software doesn’t work in every case, of course, but in this case it looks like you have some control over the users (i.e. you can tell them to install something).

So why not use XMPP? Send a notification for every order.

There are free/libre clients for every system (desktop, mobile, even for web pages). And the users (resp. the businesses) have full control on how they want to be informed (pop-up, sound, …).

I think it’s important that not all available communication channels try to get the users’ attention on the same time, otherwise it will get really annoying (web page blinking, smartphone vibrating, sound alerts).

Thanks to the (typically built-in) priority and presence information system it’s easy to always send the notification to the place where the user currently is active (XMPP servers handle this automatically):

1. Is the user active on the order web page? If yes, send a notification to the web client (i.e. refresh the page). If not …
2. Is the user active on the computer at all? If yes, send a notification to the desktop client. If not …
3. Send a notification to the mobile client.

Set a custom sound for the mobile notification, so the users won’t think it’s an unimportant SMS/Mail/Social network notification/etc. (for immediate reaction, even on the toilet!).

I assume the system will know when a user reacted to a notification, so it can be automatically determined if the notification was successful. If the system can’t determine it, you’d need the users to confirm every notification manually (e.g. by checkmarking it on the web page) resp. the clients to do it automatically as soon as the users opened a new message, depending on where the notification was sent to.

---

If the notification is really important, have a look at the following XMPP extensions:

• XEP-0224: Attention: get the attention of a user (a nudge):

  Even though a client might be available (as stated in the most recent presence stanza), the user this client belongs to might not be focused on the client currently. Presence Obtained via Kinesthetic Excitation (POKE) defines a method for a physical test of user presence. Since this requires special hardware that cannot be assumed to be available, this XEP defines a software-only implementation where no direct feedback is expected. This feature is known as 'nudge' or 'buzz' in some non-XMPP IM protocols.

• XEP-0132: Presence Obtained via Kinesthetic Excitation (POKE): check if a user is physically present (requires additional hardware, of course):

  XMPP Core and XMPP IM define methods for exchanging information about a person's network availability via the XML <presence/> stanza. In general, such presence information is generated only when a person initiates interaction with a client, although it can be generated programmatically through features such as auto-away. However, sometimes a user is present in the vicinity of a client but is not actively engaged with the client interface. In such circumstances, it would be helpful to have a mechanism that is sometimes referred to as <presence type='probe-irl'/>: the ability to invoke a real-life means of determining the physical presence of the user. This document defines just such a mechanism.