Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improved notification display #879

Open
kevincoleman opened this issue Sep 3, 2019 · 6 comments
Open

Improved notification display #879

kevincoleman opened this issue Sep 3, 2019 · 6 comments

Comments

@kevincoleman
Copy link
Contributor

@kevincoleman kevincoleman commented Sep 3, 2019

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.

@anoek

This comment has been minimized.

Copy link
Member

@anoek anoek commented Sep 4, 2019

👍 I'm definitely open to exploring some UI/UX improvements for notifications.

@kevincoleman

This comment has been minimized.

Copy link
Contributor Author

@kevincoleman kevincoleman commented Oct 25, 2019

Image

Notifications stack up on mobile.

Probably should just pick one way to display.

@kevincoleman

This comment has been minimized.

Copy link
Contributor Author

@kevincoleman kevincoleman commented Oct 25, 2019

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

This comment has been minimized.

Copy link
Contributor Author

@kevincoleman kevincoleman commented Oct 25, 2019

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.

@anoek anoek added this to UI/UX QoL in Issue organization Nov 5, 2019
@BHydden

This comment has been minimized.

Copy link
Contributor

@BHydden BHydden commented Nov 10, 2019

This discussion has been reignited in the forums.

@kevincoleman

This comment has been minimized.

Copy link
Contributor Author

@kevincoleman kevincoleman commented Nov 30, 2019

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
3 participants
You can’t perform that action at this time.