Online-go.com: Improved notification display

[kevincoleman]

The display of notifications could be optimized for a better user experience. This, of course, is up for discussion first and foremost. Things I’ve noticed that could improve:

• notifications display in multiple places
• notifications appear an a location that’s fairly UI-blocking, depending on how many there are
• notifications are not formatting in a very mobile friendly way
• notifications have linked text as the main action (could be improved with clear buttons, icons, &c.

I’ll be revisiting this issue with screenshots shortly.

I’d be happy to spearhead this effort with UI mock-ups aiming at solving these problems, if you’re open to it.

Edit:
Here are some next steps I identified further down in the conversation here. I could use some help on some of them, as I’m not as familiar with the inner workings of the app yet. If nobody disagrees, I think we could treat them like action items:

• [ ] catalog the types of notifications we have/want Spreadsheet
• [ ] catalog users’ concerns Spreadsheet, Forum thread
• [ ] create a working draft of an ideal user experience that serves both needs well and is extensible
• [ ] follow up here to talk implementation details before attempting to write it.

[anoek]

:+1: I'm definitely open to exploring some UI/UX improvements for notifications.

[kevincoleman]

Notifications stack up on mobile.

Probably should just pick one way to display.

[kevincoleman]

So I haven’t done a lot of research yet, but it seems to me that we might get a good response to adding an icon with a number badge near the top right, Facebook-style. My reasoning is that many notifications are not immediately actionable for a normal user just logging on to make moves.

Toaster style notifications are strong because they’re highly visible and accessible, but weak because they’re UI-blocking and don’t stack well.

Menu-style notifications are strong because they’re non-UI-blocking and they stack well, but they’re not as visible at first.

I suggest we tackle this by thinking about what types of notifications go best in each place.

The main type of notifications I see are the “announcement” style. They’re something users likely didn’t ask for but which benefit from high visibility. These properties actually make them feel a lot like ads. It would probably be best to manage these kinds of notifications in a way that puts the user first, so they don’t feel spammed. Some ideas might be: move these notifications to the aforementioned menu location; allow users to customize what notification types they see; limit the amount of time these kinds of notifications show.

Other types of helpful notifications might be: it’s your move, friend requests, game start/end/invite, chat-related, and others, I expect. Most of these seem like they could also easily go in the menu.

We may still get some value from toaster style notifications for things that are immediately urgent. Things like “You have only 1 minute left to play in X game” (when that game is not the game showing on screen. I would expect all toaster notifications to go away in under 60 or 30 seconds.

The main benefits:

• Increase use trust by helping them feel less spammed
• Stop blocking the UI whenever possible
• Help users triage notifications more efficiently to complete all that are actionable more completely
• others?

Potential drawbacks:

• decreased exposure for current toaster notifications because they’re no longer as visible
• users could turn off notifications that we want them to see in order to encourage community activity
• others?

[kevincoleman]

And by “add a menu with a badge” I mean “better utilize the menu & badge”

This also sets us up for using that badge number on a PWA or native app icon.

[BHydden]

This discussion has been reignited in the forums.

[kevincoleman]

That seems good—this needs discussion before we implement. As with any feature set, though, it needs a certain level of executive decision when we move forward. So far I’ve seen great management of this app’s feature set, so I have high confidence.

It seems like what needs to happen is:

• catalog the types of notifications we have/want
• catalog users’ concerns
• create a working draft of an ideal user experience that serves both needs well and is extensible
• follow up here to talk implementation details before attempting to write it.

I’ll try my best to start organizing this data so we can move forward responsibly.

[kevincoleman]

What’s going on here? This looks like a notification, but can’t even be dismissed?

[BHydden]

There were complaints that when the letterbox style notifications were dismissed from the top-right, there was no way to recover their information if it was desired later.
For the duration of a notification's life, it is also permanently at the top of the "Games" and "Home" pages so that after the pop-up notification has been dismissed, the link can still be accessed.

[BHydden]

It's a temporary workaround for the inadequacies of our current system, and probably doesn't need to be included in the upgrades we're discussing here, so long as their function is retained in a more ideal implementation.

[kevincoleman]

Hm. This feels like a step backward. I get that in the case where people care about those notifications they could want better persistence, but removing the ability to dismiss them at all is a poor solution as it creates a more frustrating UX for people who don’t want them. It moves these notifications firmly from the “sort of spammy notification” class to the “I paid for no advertising what is this about” class.

While I can see that it might not need a more permanent fix this second, I definitely recommend we implement something more elegant here.

[kevincoleman]

If nobody here has any objections, I’d like to donate a little time toward creating some UI mockups of how I envision a more elegant solution working. I’ll document my process, and of course it will be up for discussion before we collectively make any big decisions.

Sound good?

[BHydden]

Please do ❤️

[anoek]

Awesome, looking forward to them @kevincoleman!

[yewang]

I suggest getting rid of the "pop-up" style notifications altogether.

They are redundant with the banner at the top of the home screen.

Alternatively, put these notifications along with the other notifications (e.g., for friend requests, game challenges, etc.) that are already hidden inside the drop-down menu.

[kevincoleman]

I just updated the issue description with a checklist of acceptance criteria. I also started spreadsheets for the first two items, as I think we need to consider all the cases methodically. Before I dive into trying to mock up a solution I thought it would be prudent to ask for your eyes on those sheets. I want the method to feel very data-informed, so we know why we decide what we decide in each case.

On those spreadsheets, feel free to use the comment feature to strike up discussion on each particular item. This is a pretty big issue, so discussing all its details in a single thread (like here) would get messy fast.

[BHydden]

Some new features / functionality have been added regarding notification blocking, but a total notification upgrade is probably still worth looking into 🙂

https://github.com/online-go/online-go.com/pull/1423