Gitter desktop UI redesign
Problem to solve
I'm trying to look at Gitter from a heuristic standpoint and simplify as well as modernize the UI, as Gitter's UI is busy and there are a lot of potentially unnecessary controls.
Some problems I see:
- The global nav bar contains elements which are not global (room info).
- The left side bar has a vertical tab bar within it which makes it busy.
- The UI forces users to click around to find things (conversations, people, search, tabs).
- Buttons to expand/collapse the side bars are odd and take up space.
- The tabs in the right sidebar are not obvious.
- The way Gitter handles @mentions could be better.
- Message actions are hidden in overflow menu.
There are still other usability issues that could be addressed as well.
Todo
Components:
-
Right toolbar -
Global header -
Search panel
-
-
Room header -
Left-menu -
Show all chat actions (no submenu), https://gitlab.com/gitlab-org/gitter/webapp/-/issues/2148
Order to tackle:
Looking at the stepped designs, it looks like we can tackle it in this order:
- Right-toolbar
- Left-menu step 1
- Chat header and Global nav step 1
- Left menu step 2 and Global nav step 2
Then we can tackle these:
- https://gitlab.com/gitlab-org/gitter/webapp/-/issues/2431
- https://gitlab.com/gitlab-org/gitter/webapp/-/issues/646
- https://gitlab.com/gitlab-org/gitter/webapp/-/issues/2148 but probably want to use Vue.js in the main message feed before we do this upgrade
-- https://gitlab.com/gitlab-org/gitter/webapp/-/issues/2500#note_342207029
Edited by 🤖 GitLab Bot 🤖