GitHub notifications: tweaking the redesign

Here is my take on the GitHub redesign

I spend my days on GitHub. One of the screens I use the most is the Notifications area, that got redesigned just a few days ago.

As with every redesign, some people love it, some people hate it. When trying the new interface a few weeks ago, I wasn’t happy with some of the changes. I voiced my feedback to the team and moved back to the old interface. That old interface is now gone, so I’ll have to get used to the new one. That won’t stop me from making a few changes to better fit my workflow, though :)

The new interface introduces a lot of new information to the page. It brings details forward and makes things prettier with more icons. Some details were previously only available when moving your mouse over elements or when clicking through.

Adding additional information comes at a price though. The more you add, the harder it becomes to quickly skim through the page.

For reference, here is how the old Notifications page looked like:

(not my own Notifications, I didn’t think to make a screenshot before we lost access)

I would ignore the top of the left sidebar, as the total numbers gave me no useful information. I did use the bottom left sidebar to switch between repositories.

The largest area had all the information you needed:

  • The repository as card title
  • I could quickly skim through all issue / PR titles as well as their status (with a large icon).
  • As I was scrolling down, the checkmark to mark notifications as read was under my mouse so I could dismiss the notifications I didn’t want to open.

Let’s now look at the new Notifications:

There is a lot of information here, and the main area is larger.

  • The whitespace between the titles and the information on the right is bigger, making it more difficult to go from one area to the other.
  • The action icons are hidden by default, and only appear when moving your mouse over them.
  • A lot of new information was added, that I don’t personally use, adding noise to the page.
  • The repository is mentioned for each issue, even when you sort by repository, and it’s as big as the title, thus making it more difficult to skim through titles.
  • The issue / PR icons are smaller and get lost in the noise of the other symbols around them.
  • You don’t get more information about a PR in a tooltip when moving your mouse over its title.

Let’s try to fix this! :)

I’ll start by using the filters at the top to show me less information:

It’s not enough though. I’ve consequently added custom styles (using the Stylus browser extension) to address all the items on the list above. Here is the end result:

  • I’ve removed a lot of elements from the page.
  • I’ve made some existing elements stand out, either by making them always visible or bigger.
  • I’ve made the main container smaller so titles and action buttons are closer.

This is not perfect by any means, and I’m no CSS expert, but it will do for now. I suspect GitHub will keep iterating on that screen, and maybe some of my optimizations won’t be necessary in a few weeks ¯_(ツ)_/¯

If you’re interested in doing something similar, here is the CSS I used:

/********
 * An optimized version of the GitHub notifications screen.
 * Version 1.0.0
 * Author: Jeremy Herve
 * Author URI: https://jeremy.hu/
*********/

/* I never "select all" notifications at once */
.js-check-all-container div div.mx-0 .flex-items-center {
    display: none !important;
}

/* Hide elements I don't need */
li.notifications-list-item .js-notification-bulk-action-check-item,
li.notifications-list-item .notification-list-item-unread-indicator,
nav.notification-navigation hr:first-child,
nav.notification-navigation div.py-2,
.js-notification-sidebar-filters,
a.notification-list-item-link .m-0.f6 {
    display:none !important; 
}

/* Bigger Issue / PR icons */
li.notifications-list-item a.notification-list-item-link svg {
    width: 100%;
    height: auto;
}

/*
 * Action icons should always be visible,
 * and should be closer to the titles
 */
li.notifications-list-item.notification-unread ul.notification-list-item-actions {
    display: flex !important;
    margin-right: 25em !important;
}

/* Style those action icons so they look pretty */
li.notifications-list-item .notification-list-item-actions .btn {
    color: #586069 !important;
    background: transparent !important;
    border: 0 !important;
}

/* Notification time should always be visible */
.js-navigation-container li.notifications-list-item .notification-list-item-hide-on-hover,
.notifications-list li.notifications-list-item .notification-list-item-hide-on-hover {
    visibility: visible !important;
}

Let me know what you think, or if you have more tips to improve things!