online-go / online-go.com

Source code for the Online-Go.com web interface
https://online-go.com/
GNU Affero General Public License v3.0
1.24k stars 345 forks source link

Improved notification display #879

Open kevincoleman opened 5 years ago

kevincoleman commented 5 years ago

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:

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:

anoek commented 5 years ago

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

kevincoleman commented 4 years ago

Image

Notifications stack up on mobile.

Probably should just pick one way to display.

kevincoleman commented 4 years ago

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:

Potential drawbacks:

kevincoleman commented 4 years ago

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 commented 4 years ago

This discussion has been reignited in the forums.

kevincoleman commented 4 years ago

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:

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

kevincoleman commented 4 years ago

Screen Shot 2019-12-20 at 11 37 20 PM

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

BHydden commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

Please do ❤️

anoek commented 4 years ago

Awesome, looking forward to them @kevincoleman!

yewang commented 4 years ago

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 commented 3 years ago

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 commented 3 years ago

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

github-actions[bot] commented 1 year ago

This issue has been marked stale and will be closed soon without further activity. To keep the issue open, please respond to the comment to keep the discussion going.

BHydden commented 1 year ago

A new notification system will be needed at some point, and repeating all this discussion at that time will be redundant. Better to keep this open until that time I think.