UI/UX - keep navigation simple and standard
complete
Thibault de Changy
Too many elements are disturbing the user experience by not using standard good practices.
Read explanations on the custom screenshots.
NB: this subject is probably hard to find since people look mostly for lacking "features", but stay assured that enhancing these little UI/UX elements will give a far smarter feeling.
+ I would also link this subject to the cross-platform limitation stated here : "Lack of standardization between mobile and desktop" @ https://feedback.clickup.com/feature-requests/p/lack-of-standardization-between-mobile-and-desktop
Log In
Thibault de Changy
Thanks for the latest update adding the "Simple" layout (copied from Notion? :-D). This is probably closer to what I expected, especially for the open/close sidebar button.
To be more complete here, I would say that the closed sidebar should have the option to display its small version (icons only). This simple mode doesn't have it. Take the (probably perfect) Gmail UI for this case, it uses a folded sidebar which can be hovered to display the names after the icons if needed. Moreover, the open/close icon has its own place near the logo. It's simple, clear, efficient.
Hold this in mind until you get time back for it.
Brendan W
complete
We released our brand new Simple Layout I recommend trying!
It comes with a brand new design and simplified user experience.
Check it out here:
Feel free to make a new Canny post if you have any feedback for us.
Andy Johnston
Adding my own comments to the call for UI improvement. Good features, but way too much repetition, and poor text hierarchy. I'm longing for Marie Conde to wave her influence over this horribly cluttered office.
Example 1 - The inbox.
This is where I should go for a quick overview of what I have to do. But, I find it barely readable in practice.
What do I need to see? Project title, task, and date due/progress/priority.
Why are dates written as full strings including the year repeated again and again? I am already informed above these tasks what the month is. I find it pretty easy to guess what the year is, and I certainly don't need told what century we're in, and not again and again for every task's beginning and end date! I find it extremely hard to get a quick sense of what I am looking at. Even dates written in alphabetic style would be easy. Like 7th Jul - 8th Aug. If the month is written above, does it need to be on the task as well?
My lists are named by project title. In this view, it is very hard to see the list title easily. The space title is most prominent and ends up repeated to a nauseating level. I have a long list of tasks but it's hard for me to quickly see which projects they relate to. I rarely add project names to my task titles because this would also be unnecessary duplication.
Please redesign this page so that the principle information is clearly visible and extraneous information and repetition is removed.
Rudolf Nanne
Yes, I totally agree. ClickUp is certainly the best PM tool when it comes to features, but it also definitely needs improvement on the user interface. Just search for "UI" between the Canny feature requests and see how many posts can be merged with this post.
I came across this recent interesting article. It would be good if CU could take a similar approach.
John R Crowley Jr
I'm new here and it seems that there are so many scattered places / features to access the work I have to do. I haven't thought through how to organize the UX of this software to accomplish my workflow but it just seems like they throw features out without much thought to UX workflow. Maybe they should hire top talent UX designers to think this through.We all work the same yet we all work different. Maybe access to everything in one place and then give us the ability to create our own custom workflow.
Pierre Becher
I notice little UX improvements frequently.
Why not move the tags and dependency settings to the top bar next to priority (which is also some sort of tag)? The current arrangement adds complexity by adding another navigation layer which does not add any value in my opinion.
Lee Fuhr
Fwiw, I heartily disagree with most of this UI feedback.
Also, you might prefer the other layout (I do), see attached.
Thibault de Changy
Here is my custom CSS (using the clever Amino CSS plugin for chrome) if it might help speed up some-one's job :
UPDATE : 2019 12 12 - fixed icon position with new classes and better compatibility
/
Menus Top + Left - add Shadow for better visibility
/.cu2-views-bar__container,
.cu-left-sidebar {
box-shadow: hsla(0, 0%, 0%, 0.06) 0px 4px 8px 0px;
}
/
Left-Left menu (icons bar)
/.cu2-spaces-bar {
z-index: 751;
box-shadow: hsla(0, 0%, 0%, 0.06) 0px 4px 8px 0px;
background-color: hsl(216, 16%, 20%) !important;
}
/* Left menu > toggle button - unable to set above Left-Left menu
.cu2-sidebar__toggle {
z-index: 800;
}
*/
/
Update shadows "per row"
/.cu-task-row__container {
box-shadow: 0 4px 8px 0 rgba(0,0,0, 0.06);
}
/
Sidebar BG
/.cu-dashboard-table__scroll {
background-color: hsl(225, 25%, 96%);
}
/
- Titles > color
/.cu2-project-list-bar .cu2-project-list-bar__expanding {
color: #bcc0c7;
}
.cu2-project-list-bar-item__link-text {
color: #fff;
}
/
- bottom elements (Goals etc)
/.cu2-spaces-bar__expanding {
color: #7c828d;
}
/
Sub-sidebar BG
/.cu2-sidebar .cu2-sidebar__body,
.cu2-sidebar .nav-category__header {
background-color: hsl(216, 16%, 84%);
}
/
- icons
/.nav-menu__toggle_cog,
.sidebar-section__plus {
fill: #343434;
}
.sidebar-section__search {
stroke: #343434;
}
/
Open/Close button for Sub-sidebar > set normated position
//
- top-bar > padding to give place for sidebar's button
/.cu2-views-bar .cu2-views-bar__container {
padding: 0 25px 0 36px;
}
/
- button @ open sidebar
/.cu-left-sidebar__container .cu-left-sidebar__toggle {
/
margin-left: 310px;
/right: -30px;
background-color: rgb(123, 104, 238);
}
.cu-left-sidebar__container .cu-left-sidebar__toggle {
fill: #fff;
}
/
Open/Close button for Sidebar > set normated position
/.cu2-spaces-bar__spaces .cu2-project-list-bar__row.ng-star-inserted {
margin-top: 40px !important;
}
.layout-size_default .cu2-project-list-bar__pin,
.layout-size_default .cu2-spaces-bar_v2 .cu2-project-list-bar__label,
.cu2-project-list-bar .cu-search-input {
margin-top: -80px;
}
.ng-star-inserted .cu2-project-list-bar__scrollable {
flex-grow: 1;
margin-top: 50px;
}
Thibault de Changy
Thx for the new Layout styles (https://docs.clickup.com/en/articles/3390554-changing-the-dashboard?__s=obtdwbfv88zrdcgywzmb), the "Modern" style looks promising.
However I still wait for better respect to standard navigation as stated above.
NB : My custom CSS becomes hard to maintain du to the different layout styles.