logo

drewdevault.com

[mirror] blog and personal website of Drew DeVault git clone https://hacktivis.me/git/mirror/drewdevault.com.git

GitHub-notifications.md (4827B)

    

  1. ---
  2. date: 2020-03-13
  3. title: "GitHub's new notifications: a case of regressive design"
  4. layout: post
  5. ---
  7. *Disclaimer: I am the founder of a company which competes with GitHub. However,
  8. I still use tools like GitHub, GitLab, and so on, as part of regular
  9. contributions to projects all over the FOSS ecosystem. I don't dislike GitHub,
  10. and I use it frequently in my daily workflow.*
  12. GitHub is rolling out a new notifications UI. A few weeks ago, I started seeing
  13. the option to try it. Yesterday, I received a warning that the old UI will soon
  14. be deprecated. At this pace, I would not be surprised to see the new UI become
  15. mandatory in a week or two. I'm usually optimistic about trying out new
  16. features, but this change worried me right away. I still maintain a few projects
  17. on GitHub, and I frequently contribute to many projects there. Using the
  18. notification page to review these projects is a ritual I usually conduct several
  19. times throughout the workday. So, I held my breath and tried it out.
  21. The new UI looks a lot more powerful initially. The whole page is used to
  22. present your notifications, and there are a lot more buttons to click, many of
  23. them with cute emojis to quickly convey meaning. The page is updated in
  24. real-time, so as you interact with the rest of the website your notifications
  25. page in the other tab will be updated accordingly.
  27. Let's stop and review my workflow using the *old* UI. I drew this beautiful
  28. graphic up in GIMP to demonstrate:
  30. ![](https://cmpwn.com/system/media_attachments/files/000/659/354/original/d9abc4befe1a074c.png)
  32. I open the page, then fix my eyes on the notification titles. I move my mouse to
  33. the right, and while reading titles I move the mouse down, clicking to mark any
  34. notifications as read that I don't need to look at, and watching in my
  35. peripheral vision to see that the mouse hits its mark over the next button. The
  36. notifications are grouped by repository, so I can read the name of the repo then
  37. review all of its notifications in one go. The page is fairly narrow, so reading
  38. the titles usually leads my eyes naturally into reading any other information I
  39. might need, like the avatars of participants or age of the notification.
  41. I made an equally beautiful picture for the new UI[^1]:
  43. ![](https://cmpwn.com/system/media_attachments/files/000/659/353/original/b15f20de0ae35cd3.png)
  45. [^1]: Both of these pictures were sent to GitHub as feedback on the feature, three weeks ago.
  47. This one is a lot harder to scan quickly or get into your muscle memory. The
  48. title of the notification no longer stands out, as it's the same size as the
  49. name of the repo that was affected. They're no longer grouped by repo, either,
  50. so I have to read both every time to get the full context. I then have to move
  51. my eyes *all the way* across the page to review any of those other details,
  52. through vast fields of whitespace, where I can easily lose my place and end up
  53. on a different row.
  55. Once I've decided what to do with it, I have to move my mouse over the row, and
  56. wait for the action buttons to appear. They were invisible a second ago, so I
  57. have to move my mouse again to get closer to the target. Clicking it will mark
  58. it as read. Then, because I have it filtered to unread (because "all"
  59. notifications is really _all_ notifications, and there's no "new" notifications
  60. like the old UI had), the row disappears, making it difficult to undo if it was
  61. a mistake. Then I heave my eyes to the left again to read the next one.
  63. This page is updated in real-time. In the old UI, after I had marked everything
  64. as read that I didn't need to look at, I would middle click on each remaining
  65. notification to open it in a new tab. On the new real-time page, as soon as the
  66. other tab loads, the notification I clicked disappears (again, because I have it
  67. filtered to "unread"). This isn't immediate, though — it takes at least as
  68. long as it takes for the new tab to load. Scanning the list and middle-clicking
  69. every other message becomes a Sisyphean task.
  71. And the giant sticky header that follows you around! A whole 160 pixels, 14% of
  72. my vertical space, is devoted to a new header which shows up on the next page
  73. when I follow through a notification. And it's implemented with JavaScript and
  74. done in a bizzare way, so writing a user style to get rid of it was rather
  75. difficult.
  77. Aside: I tried adding a custom filter to show only pull requests, but it seems
  78. to silently fail, and I just see all of my notifications when I use it.
  80. ---
  82. Anyway, we're probably stuck with this. Now that they've announced the imminent
  83. removal of the old UI, we can probably assume that this feature is on the
  84. non-stop release train. Negative feedback almost never leads to cancelling the
  85. roll-out of a change, because the team's pride is on the line.
  87. I haven't spoken to anyone who likes the new UI. Do you?