Improve The Overall UX

[austincondiff]

Problem

The UI lacks the polish and UX necessary to give developers more confidence that Netlify CMS is the right CMS for their project and is as robust as other similar CMS’s.

Motivation

In the time I have used Netlify CMS for my projects, I have identified several key areas the UI needs attention. If I am going to invest my time and future projects in this CMS, I’d like to share some of these areas of improvement.

Solution

From an outsiders perspective I have created a few mockups showing what I believe the Netlify CMS UI should look like in order to give users a much better experience. They highlight the following improvements

• Use of space
• Navigation
• Contextual awareness
• Icons
• Typography

Invision Prototype
https://invis.io/3ATIRBHKW9F#/380522637_Login_-_Custom_Logo

You'll see in these mockups that I've organized the navigation and combined it with collections moving the search bar at the top in the toolbar. We are now including additional columns which we would easily be configurable in config.yml. I also provided useful links in the navigation that pertain to the website you are working on. This makes it much easier to get around if need be. I've added icons to each collection that can be configurable as well. I am utilizing the full width of the viewport contrary to the pixel limit that we enforce in our layout today.

Moving on to the editor view, I also am taking full advantage of the browser width, fixing the editor to the left. I am conserving vertical space by keeping the inputs concise yet easily readable. In the toolbar I have included a language toggle so that we are better able to support translations in our websites content creation process.

You will also notice that I included the following additions which I am happy to create individual issues for these if need be

• Multi-language support
• Column configuration for each collection
• Edit config.yml right in Netlify CMS via Settings tab (we can already make markdown changes, why not config.yml as well?
• Specific site settings configurable in config.yml such as navigation, footer, social, etc that do not belong in it's own collection
• Breaking Media out of a dialog when browsing from main UI (not from a image or file widget)

Otherwise, we are keeping much the same. I just cleaned up the layout to support a cleaner, more intentional aesthetic that focuses on content.

I will update this issue as I create more screens. I figured I could at least get a dialog going to see if we might be able to make a concept like this a reality. Feedback is certainly welcome.

Edit
I have created a sandbox to illustrate this in action...
https://codesandbox.io/embed/netlify-cms-editor-design-j1cg3

[andrevandal]

I loved it!
How do you see mobile version?

[austincondiff]

Without first doing a mockup, I'd imagine something like this.

Just zoomed in but you get the idea. When I get a moment, I will do a mockup for mobile.

[erquhart]

This is absolutely fantastic, awesome work @austincondiff!!

[austincondiff]

Thanks @erquhart! Let me know if I can help in any way if this is a direction you want to head in. Love what you guys are doing! 👍🏻

[austincondiff]

Because you can only see a limited number of widgets in these mockups, here is a comp showing how more widgets would look including the following:

• String / Text
• Date
• Image / File
• Markdown
• List
• Object

I think this saves a lot of space and makes things much easier to read. It adds much needed controls such as expand/collapse all for lists and moves the "add new" button to the bottom of the list so the user doesn't have to scroll to the top of the list every time they need to add new items.

[d4rekanguok]

Wow @austincondiff, these designs are fantastic. My only grip is that the expand / close state of the list & object widgets are too subtle, on a quick scan it's hard to tell which list item is being open & which was not.

It also would be nice to see how the image widget handles multiple images. I imagine the action buttons (remove image, replace image) would have to be placed somewhere else.

[austincondiff]

Thanks @d4rekanguok. I've updated my comment above to include a widget with multiple images.

Here are some different states for that multiple image widget just to give you an idea

Default

Hover

Drag

Action hover

Does anyone else feel the same way about the expanded/closed state of list items within the list widget being too subtle? Personally, I think it is pretty apparent, but I'd be interested to know if anyone else is of the same opinion.

[tomrutgers]

@austincondiff I'm going to have to agree with @d4rekanguok. Lists with nested objects etc can get pretty crazy so I think we need to make it pretty explicit what's nested where.

[austincondiff]

@tomrutgers I've made a more complex example to demonstrate how it would nest.

This gives us more room to nest items. I think it is pretty clear while allowing more vertical screen real-estate for user content. We could get creative with sticky field labels to make it clear where you are if that helps.

[d4rekanguok]

@erquhart when you have the time, would it be possible to give a bit more in depth feedback on the design here?

I think the open/close state is still too subtle, but I love the overall improvements... @austincondiff are you working on a PR for this?

[tomrutgers]

@austincondiff Here's a quick mockup of what I mean by a bit more explicit. Obviously it needs the same love and attention you've put into your designs, but hopefully this will help the discussion. (cc @d4rekanguok)

[austincondiff]

@tomrutgers I appreciate your mockup. Here is my feedback. I see that you have added each field into it's own containing box. While that might seem like it might make things more apparent, in my experience it tends to muddy up the design and can cause more confusion than clarity. The tendency is to put boxes within boxes to reinforce hierarchy of information, but that isn't always the best way to convey a sense of hierarchy. When we use boxes within boxes it increases the users cognitive load and also increases the amount of space required for the user to review to consume the same amount of information.

Check this out https://www.youtube.com/watch?v=5BbVixE0BSA

In this design, you would need to count twice as many lines to the left, for example, to identify how deep you are in the hierarchy, which can be confusing.

In my opinion informational hierarchy is pretty clear in my design. It makes more sense when looking at it in place rather than on GitHub. It also would make sense as the user is creating and interacting with their content especially with use of subtle animation cues. Context is everything. If we are trying to make things even more apparent we might take a look at other ways to do that other than nesting our inputs into boxes in my opinion.

I never illustrated this but what would you think about darkening or thickening the left line of the active item in my design? We could also play with hover states as well.

[tomrutgers]

@austincondiff Right, I get what you're saying. I do agree that more boxes within boxes are not the answer to our challenge at hand. Consider my mockup as part of the discussion instead of what I think should be our final solution 😉.

With the mockup I am looking for a way to isolate parts of the content so the hierarchy is more apparent when a list item is expanded. I considered having some kind of background for the expanded item, but that might clutter things even more. A darkened or thickened line might help, though I do feel like making a bit more room (hence the extra margins) for the item you're working on can indeed help. I do love your minimal approach, but I feel like some extra help focussing is needed here and there.

[austincondiff]

Maybe something like this??

[austincondiff]

Further indention would also make things more apparent

I personally feel this disrupts the flow of the design perhaps in a negative way. I could be convinced otherwise though 😉

[austincondiff]

When I designed this, I played with the location of the line. It felt much better when the arrow indicating the list item is expanded pointed to the line as opposed to when the line lined up with the "Post" label like so...

[tomrutgers]

Agreed. I like the thickened line. I get why there isn't a line between "post" and "related post" but somehow I think that an expanded item should feel more like a separated block. Definitely on the right track, and you pretty much nailed it with everything else so far!

[austincondiff]

@d4rekanguok I can work on a PR but I am not currently. I'd like to make a POC first to see how it feels. This can have a big impact into how subtle the expanded state is depending on how it is executed. I am thinking I am getting this feedback as a result of me not being able to demonstrate how I envision this behaving. Let me make a quick sandbox and we can play with a few things if it still doesn't feel like it does the job.

@tomrutgers Nothing is set in stone. I am happy to help get this to a point where we are all happy with it. I would like to get others unbiased feedback as well to validate this concern. Maybe once we have this POC done we can do a little testing.

[austincondiff]

@d4rekanguok @tomrutgers This isn't perfect by any means but it should give you an idea as to how this concept feels when interacting with it.

Here's the sandbox
https://codesandbox.io/embed/netlify-cms-editor-design-j1cg3

There is a lot here so take your time running through it. It also works great on mobile. I will continue working on this POC as I get time, but this should at least move the conversation forward.

[rmcsharry]

@austincondiff I echo the other positive comments, this is super! Great UX.

I think it's correct with the vertical line and having it inline with the > arrow (not indented like the earlier example). I am undecided on whether it should be thick, but...

Perhaps the expanded item could use colour to help distinguish it further?

In the same way that when you edit a single field, the field is highlighted. So follows the same aesthetic? eg:

[austincondiff]

Thanks @rmcsharry. Love the thought. I considered this as a possibility. In this design color is used to indicate action. Because the line is colored, it decreases the prominence of the focused field. Also, what happens when there are multiple items expanded? In my opinion the repetition would lessen the value this effect has.

After doing this sandbox, I am pretty confident that this affordance is clear enough, especially after validating this with several people I’ve shown it to. I am happy to look further into it though if need be.

[rmcsharry]

@austincondiff Good points both of which I agree with (prominence and multiple open expands). So probably not a good idea...or risk ending up down the Rabbit Hole! I think what you have is already a massive improvement so kudos :)

[austincondiff]

I believe I have found a way to make everyone happy and also make the interaction feel more natural. When hovering over the list header, I highlight the left border and make it a bit thicker. When you click on the list context menu and mousing over delete, I highlight the same border in red which tells the user exactly what will be deleted. Check it out for yourself in the sandbox here: https://codesandbox.io/embed/netlify-cms-editor-design-j1cg3

Thoughts?

[rmcsharry]

@austincondiff Me likey. A lot! Such a creative use of hover makes me feel sorry for touch screen users. ;)

[erquhart]

We're showing a lot of things at once, that's the core problem. We're trying to solve it by making boundaries and hierarchy clear yet subtle. What if we tried showing less things instead?

Using your sandbox as an example:

1. The Features section shows a list of unopened features
2. When a specific feature in the list is clicked:
   1. the name/title/identifier for that list item is added next to Features as a breadcrumb, eg. Features > Specific Feature
   2. the clicked feature expands to show its content
   3. the other features in the list are no longer visible
   4. some sort of back/close functionality closes the list item and goes back to the list
   5. if the feature itself contains a list, those list items would work the same, and a clicked item would be added to the breadcrumbs next to Featured

Thoughts?

[austincondiff]

@erquhart Thanks for the thoughts and feedback. I think it is pretty important to be able to see and edit multiple list items at once. In some use-cases it is important to reference data in other list items to create content for new list items. The idea you have presented, if I am understanding correctly in my opinion, is a little constrictive as far as what you can see at once.

How would this concept work when lists are within lists? I might assume you would add to the breadcrumb. This might be even more confusing because there is no positional context, it must be in reference to the breadcrumbs. Also, what if the list only contained booleans and images? How would the breadcrumbs work then? Just playing devils advocate and thinking about this from all angles.

I am personally pretty happy with how the sandbox turned out but I am open to looking at other ideas if you wanted to fork this.

@d4rekanguok @tomrutgers I am curious, what are your thoughts of the sandbox? Particularly the highlight of the line on hover of the header or delete actions to indicate the row in question. I know you have expressed this concern before but does this make hierarchy clear enough?

[timmysmalls]

Hope this issue doesn't go silent. This would really make a huge difference in how people perceive Netlify CMS. As awesome as I think it is, most clients are still a bit iffy on the whole thing. It doesn't look as polished as the likes of WordPress, or Strapi, and that makes a big difference. I'd love to help out here if necessary. I can't design like you guys do, so I'm not even gonna try, but once you settle on a design you want to go with, I can help implement the HTML/CSS/React code.

[austincondiff]

@timmysmalls, I agree with you 100%. If there’s anyone that’s going to take on the likes of WordPress, it’s Netlify because they also drive the deployment process. But I’ll have to say as you had mentioned, with full respect to all those who have contributed towards this project, this CMS needs to be far more intuitive, in terms of the feature set it offers and in the UX. I really like the things they are doing over at tinacms.org. For example in-site editing. I love the site-builder experience while having the power of a CMS. I’ve brought this up before and I’ll bring it up again, in order for most enterprise customers to get on board, there needs to be user roles and permission or it all falls on it’s face. There also needs to be things like site-level settings, menus, etc that are abstracted away from the traditional collections model. There needs to be multilingual support. This project definitely has potential and I am willing as well to help out, but in order for me to invest any more of my time into this, I need to see that this can turn into something that can be adopted by both eager developers wanting to try the latest and greatest and by enterprise customers alike. Right now I have a hard time seeing that when user permissions is off the table just because GitHub doesn’t have support for them. Change my mind and I’m all in! 🙂

[renestalder]

@austincondiff I just want to say how much I appreciate your work here as the UI is the single biggest barrier of Netlify CMS to use it for all use cases (especially outside English speaking and technical audiences).

That said, if you need help, be it with design, front-end or accessibility, I'm glad to help. Accessibility is especially important to me, so I would really like to help test with screen readers and fix potential issues.

[mrdotkg]

The UX Project for v3 that tracks integration of Awesome UI suggested by @austincondiff was last updated a few months back.

We would like to know

• When are we launching?
• Where are we now?
• How can we help?

Thanks a ton!

[erquhart]

@mrdotkg the status hasn't really changed. The UI rewrite effort was spearheaded by @austincondiff, initially aided by a few others. Austin completed an enormous amount of product, design, and implementation work (plus UI docs in storybook), but the task is bigger still. There's no roadmap for all of this, he sort of brought the vision. Anyone looking to take it further is welcome, but will need similar skills and tenacity as this will continue to be a community led effort as things currently stand.

@bachmannn you're not wrong - theming would be the ideal approach. That said, while I haven't built the v3-ui-redesign branch, the packages directory compared to the main branch are roughly equal weight, so I'm not certain these changes being implemented as the new core would actually hurt.

[AbdallahAbis]

Any intentions of implement design any time soon? I would love to be one of the contributors.

[erezrokah]

Hi @AbdallahAbis, not much had changed since @erquhart last comment. If you'd like to have a look at the code it's in https://github.com/netlify/netlify-cms/tree/v3-ui-redesign

[timbomckay]

Has this UX effort been abandoned or just too many other issues/features to address first.

[erezrokah]

Hi @timbomckay, this UX effort not currently being work on.

Other contributors have a take a more incremental approach, see #5729 as an example.

[airtonix]

@martinjagodic Please put this on your radar ❤️

[tomrutgers]

@airtonix It definitely is. Austin already joined the Decap discord and discussions are being held there

[pxrpl]

how can i apply this to my site

[martinjagodic]

@pxrpl you can't because this feature is still in development.

[DannieBGoode]

This proposal is amazing and it's a pity it has been ignored for 4 years :-/

[martinjagodic]

@DannieBGoode I agree, but it's a complex situation. Are you willing to contribute to moving this forward? If yes, please join the #ux channel on our Discord server.

[Daniel-Mendes]

PS: Working on it
https://github.com/Daniel-Mendes/decap-cms/tree/next

[DannieBGoode]

PS: Working on it https://github.com/Daniel-Mendes/decap-cms/tree/next

that looks amazing!

[Daniel-Mendes]

Working on porting all stories !!

[Daniel-Mendes]

Working on Header AppBar

[travolgi]

How can I contribute to the development of this ux? it's really fantastic :)

[layout-ch]

Any news regarding that? Would be amazing...

[Daniel-Mendes]

Any news regarding that? Would be amazing...

You can follow the progress in the ux discord channel