Design Improvement: Navigation and Layout

[rafaelconde]

The current state

I believe there are important UI elements and basic structure that could be improved:

• Overall padding, structure, a well defined grid system.
• Give more focus to the New Post button – it's probably one of the most used actions.
• Offer a better solution to Know your place in the app, and navigate easily through the app's tree.
• Right now the Hamburger icon, is not very good at communicating its meaning, and a bit redundant since the sidebar it invokes takes such a small footprint.
• Somehow I think it needs some visual polish and a friendlier, more human mood.

A suggestion

• Let's keep the Sidebar always visible and make it more useful.
• Let's introduce breadcrumbs in the Title, making it easier to navigate and know your place.
• Let's adapt the Content to the context, so the New Post button can change to Publish if the user is in the editor for example.

Obvious omission is the Search and Command bar, still thinking about that one.

Thoughts?

[cassiozen]

I think these are beautiful.

Inside collections, do you think it would work to have a button to switch between the card view and this list view you suggested?

[rafaelconde]

Honestly, what is the advantage of a card in that context?
Showing a post's image? I wonder :)

[cedricdelpoux]

The list view looks great in preview mod. I hope something similar will be implemented.

[biilmann]

Beautiful - feels clean and simple. Love the visuals.

Some thoughts on specific details and usability that we should address:

Sidebar

I like having a sidebar when in navigation mode rather than a drawer, and I think it makes sense that the editorial workflow board lives somewhere. There's a few issues:

Projects is probably a confusing name (it's more like Work in progress or Editorial Workflow or something along those lines.

If Projects is a link, shouldn't Collections also be a link (which doesn't make sense) since it looks exactly the same?

I would love to have little "Add new" buttons next to each collection like Wordpress does it. It's such a core action for users that I think saving the step of opening a dropdown and picking what you want to add is worth it...

Listing

I like this a lot and agree that for most collections cards doesn't seems to match the way we browse content. The main collection types that would benefit from a cards based view are collections heavily based on photos. For example for a website of a photographer or artists, a list of "Works" with just the "title" as the main identifier is a lot less useful than a card based grid with the images visual.

How to handle searching and filtering will be important here...

Main navigation

Love getting a breadcrumb in there!

I prefer always having the "New entry" button visible and making clear that it's a dropdown when there's more than 1 collection.

Here's a really typical flow for content editors:

The design team hands over the final site with placeholders for most of the content, now go in and do data entry for all the content.

If there's no "Add new" in the top bar, the flow becomes:

1. Click add new
2. Pick the type
3. Do data entry
4. Click publish
5. Figure out how to get back to a state where I can add something new (Click home, logo, breadcrumb for my collection - need to think)
6. Click add new
7. Pick the type
8. etc...

This is such a common flow that we should make sure to remove step 5.

[rafaelconde]

Regarding Sidebar

If Projects is a link, shouldn't Collections also be a link (which doesn't make sense) since it looks exactly the same?

Absolutely

Regarding Listing

The main collection types that would benefit from a cards based view are collections heavily based on photos.

Regarding Main navigation

I prefer always having the "New entry" button visible and making clear that it's a dropdown when there's more than 1 collection.

And about that scenario, I see something more along these lines – this is the screen the user would see after hitting Publish:

And also something important that maybe it was not clear just from the mockups.
The New Post button is not a dropdown forcing the user to select a collection first, it goes straight into the editor, in which the dropdown to select the Collection is the first field the user sees and the only one in blue.

Thoughts?

[cassiozen]

👏 Love it

[rafaelconde]

Also, given the Open Source nature of this project, I've decided to Open Source the Design as well.
Everyone is welcome to contribute 👋

https://www.figma.com/file/N3E88guK9a2Z3OmevEN54yEi/netlify-cms

[biilmann]

I would still really like to get little "Add" buttons in for collections where editors are allowed to create new entries in the sidebar.

Going into the CMS to add a new entry is probably the number 1 user-story we have to consider. So I would really like to have it be a click operation instead of having to find the right collection type in a dropdown first.

[rafaelconde]

I have some doubts regarding the label "Add", or even a Plus icon next to it, as it is not obvious that it means "New post under this collection".

So I went with the icon that we already have on the New Post button in the navigation bar, hopefully translating that association Icon->Meaning.

As always, available in Figma.
https://www.figma.com/file/N3E88guK9a2Z3OmevEN54yEi/netlify-cms

[erquhart]

@rafaelconde how would you see the design based on discussions around the latest UI update? Any changes?

Adding this issue to the 1.0 milestone. Most notable aspects:

• Sortable list interface for entries/search
• Putting a user in the right place after saving a post