Let's discuss Pimcore's UI

[passioneight]

Seeing Pimcore 11 coming up, it might be a good idea to talk about the look & feel of the UI because it seems like a chance to improve it. Looking forward to your thoughts.

Responsiveness

I feel like it is time for Pimcore to switch to a responsive UI.

I'm not saying Pimcore should work on phones or super small screens but it should work on 12" (and up) without any issues. That is, many clients work on the go - as do developers - which means they are highly limited when working, due to a lack of responsiveness. If you ever tried to work with Pimcore on a notebook or tablet, you'll know what I'm talking about.

I propose switching to a grid and avoid fixed widths. If anything, a min-width should be set, not the width itself. For use cases where the developer needs a specific width, they can still use (S)CSS to change the default styling.

UX

The overall UX in Pimcore has a lot of room for improvement. For example, some tabs can be closed when hovering over a tab and clicking the mouse wheel (e.g., Documents), other tabs cannot be closed this way (e.g., Class Definitions).

I propose sticking to consistent functionality. Obviously, we'll have to identify all differences in functionality first, but I'm pretty sure the community has some examples right up their sleeves.

Editables

Editables are great, yet again, there's a lot that can be improved. For example, an empty WYSIWYG has a dashed border, as long as it is not focused. This helps the user identify the editable quickly. However, once focused or filled with content, the border disappears and only shows up when hovering. Using the light bulb to display all editables shouldn't be necessary. In general, hiding information behind a hover action should be avoided - instead effects for hover and focus should aid the user.

I propose styling the editables independent of their state (filled, empty, hovered, focused, ...), but still having differences in styling (e.g., when (not) hovered or (not) focused).

[rberneder]

Thanks for kicking off the discussion of this previously overlooked topic. Although I find the overall "look" of the Pimcore backend very appealing, but I agree the "feel"-part does not comply with the high quality standards of Pimcore.

Along with responsiveness and support of mobile (touch) devices (tablets), we will face new challenges:

• Finding substitutes/alternative approaches for our beloved drag&drop feature.
• Increase size of non touch friendly small UI components.
• Information unveiled by mouse-over.
• How to deal with Image editor and other non mobile friendly plugins.
  etc.

There are many design systems for backend portals out there (e.g. for VueJS) that can serve as inspiration and as basis for discussions.

We could start off a separate Pimcore UX Branch with some prototypes as backend-less click-dummies. What do you think?

What is the status about the frontend framework switch? Will there be a shift to VueJS / React etc.?

[passioneight]

Yes, there certainly are some challenges to tackle. I also agree that existing solutions can help inspire the actual implementation for Pimcore, though, I wonder why we need to find an alternative for the drag&drop feature, could you elaborate?

As for the suggested branch, I wouldn't mind some input from @dvesh3 @brusch @fashxp or any of the other Pimcore Devs first. Simply, because it really doesn't matter what we are discussing here if Pimcore decides to go for a completely different approach.

I, too, am curious about the future of the frontend framework. Mostly, because ExtJS is not free anymore. Even the community edition has its limits. So, it's most likely to change, but which framework will be used? Answering this question is quite relevant for the functionality of the UI, and is somewhat related to @ChrisB9's comment.

[ChrisB9]

The editables are probably the strongest CMS feature of pimcore but are also the component, that is most confusing for my clients to use. Especially the new Config Modal hiding behind the pencil, which kind of creates a modal-ception feeling. (Sadly, we are in a place, where pimcore is always being compared to WordPress, and with the likes of Elementor etc the usability of editables does have some space for improvements)

And forms, selects etc should all have the same width - for example currently the link editor has a target selection that is longer that its neighboring input fields.

As for extension UI development: The integration of ExtReact or ExtWebComponents (requiring webpack or something like that) would make the development of new forms and fields a lot easier :)

[passioneight]

Yes, people love to compare Pimcore with other CMS and that can be frustrating - especially, when working with smaller clients. However, I think it's a good thing, because this gives us insights into the actual expectations of our clients and might just be what we need to steer Pimcore in the right direction.

I always felt like an approach similar to Elementor would be great and I think Pimcore, too, tends to move in this direction. I could have sworn that I saw an issue about something like this some time ago, but I can't find it at the moment. If I'm not mistaking, it was about GrapesJS. Maybe someone else can find it?

You are talking about this dialog window, right?

I think the inconsistency issue in Pimcore becomes quite obvious when looking at the Advanced tab of the very same dialog:

A quick inspection reveals that the fields actually have the same style, but the max-width (which shouldn't be used anyway), is set to none for the fields in the Advanced-Tab. Using a grid instead of tinkering with the width of these fields would solve those kind of issues. Thanks for this great example!

Regarding ExtJs, I believe Pimcore's going to switch to a different framework (as mentioned in my other comment). Maybe @brusch can shed some light on this?

[passioneight]

Awfully quiet in here. Maybe another suggestion could spark some more motivation: what about using Symfony UX?

One could, for example, create editables using the ux-live-component. I did not get the chance to play around with this yet, but possible advantages are:

1. Separating the template from the model
2. The models are actually services, which should allow us to decorate/extend them (not sure about this one, though)
3. Automatically updating editables without page reload (e.g., doesn't work with manually rendered blocks at the moment)
4. Would potentially allow us to combine pimcore_image and pimcore_video to e.g., pimcore_asset, which can simply handle drag & drop of any kind of asset (obviously, only the most important ones should be supported by default, but custom ones can be added)
5. Possibility to lazyload JS

Ultimately, I see a lot of chances to improve Pimcore's usability with Symfony UX, but for now I'm just brainstorming. If anyone had the pleasure to work with Symfony UX already, please share your experience - and of course: happy to receive any feedback here.

[passioneight]

Thanks for your input, very much appreciated! I tend to disagree though.

To me, being the best is not the same as being good. Don't get me wrong, I love Pimcore, that's why I'm using and trying to improve it. However, I feel like the topics provided in the description of this discussion are more on the major-side of things.

Where is a model bound to a template in Pimcore?

Maybe my choice of words was a bit misleading here.

Most of the editables - if not all of them - have their markup within the PHP file; at least that's what I meant. It would be nice to have the markup separated (i.e., in a template).

Work in Progress for some part, super huge endeavour though. I already made several PR's to refactor Pimcore's core and make the models actual models. Every PR helps though.

Sounds great! Though, I was still refering to editables and am not sure if you are, too.

All in all: Pimcore is working on an ExtJs Replacement with React or Vue or something. No details about that expect an announcement at the last Pimcore Conference. So let's see where the story goes.

Afaik, the Portal Engine uses React, so my best bet is that they'll stick to it.

[dpfaffenbauer]

The beauty about OpenSource is that everyone can contribute, so just do it ;)

[passioneight]

Well, yes, a PR is always a good thing, but I was hoping to have some more feedback (i.e., other ideas for the implementation), so we can go for an approach everyone is satisfied with. Especially, @brusch or his colleagues could tell us if it's even worth the effort, because they might not want to have this feature at all.

[dpfaffenbauer]

be more concrete with ideas and ask Pimcore if they want that, then you can do a PR. It is that easy ;) I think no one really has the time to super duper discuss that in detail.

[SamyMP]

I support @passioneight initiative and I really appreciate Pimcore, but ExtJS is, in my opinion, quiet hard to work with. The learning curve is quite steep. I'm more used to recent front-end solutions such as Vue (which I prefer over React, but really, both are great), but I also undersatnd why ExtJS was chosen to begin with.

I'm happy to hear that an ExtJS replacement is being considered, and I'm looking forward seeing what the UX and UI may become !

[zangab]

The UI indeed looks like one from the last decade.
Imho you need a complete rewrite of the Admin Interface. It's not following basic design principles like putting labels always on top (there was a study that this has a better UX). The style options of the DataObject Fields are also far from beeing inituitive.

Looks like there was no real designer involved thinking about UI or UX. It's kinda disappointing. And of course it's compared to other Frameworks. Storyblok f.e. does a superb job. If a similar framework pops up in the future with some focus on UI/UX I'm sure lots of people will swap.

[SamyMP]

Hi, are there any news on this rework of the UI / ExtJS replacement ?

All in all: Pimcore is working on an ExtJs Replacement with React or Vue or something. No details about that expect an announcement at the last Pimcore Conference. So let's see where the story goes.

@dpfaffenbauer mentioned that in this comment, just asking as I don't see this work on the GitHub repository and I think a lot of people would be willing to help on that 🙂

[passioneight]

@SamyMP this could be of interest for you: #15517 :-)

[starfruitjsc]

Guys, I'm trying to renovate Pimcore Admin, looking for your feedback on this https://demo.corepulse.io/cms/login If you guys love it, I will publish it as a bundle so anyone can use it for free :)

[starfruitjsc]

As I have been using Pimcore for long time, I believe that I can do better than them 😁 at least in term of UI/UX.

[fashxp]

can you please drop me a message via linkedin or <firstname>.<lastname>@pimcore.com

[starfruitjsc]

I can't connect you in Linkedin, so have sent the email. Nice to meet you Christian 👋

[passioneight]

@starfruitjsc lovely! I would love to provide some feedback in the form of issues :-)
For example, I noticed that there are no Cancel buttons in the modals. While they still can be closed using Esc or by clicking on the backdrop, adding a Cancel button would increase accessibility quite a lot.

Could you share some info about your plan to open-source the repository?

[credencys-kevin]

Hi @starfruitjsc Checked your work on UI, Its really awesome work you have done.
Will it be possible for you to share it with me. I wanted to implement it and take it further.

[drietsch]

Hi all! Great conversation going on here. As you probably know by now, we are releasing the preview of Pimcore Studio, the brand new UX/UI of the Pimcore interface, at the Pimcore Inspire Developer Conference 2024 in March 2024. If you are coming to the Inspire, just post your UI questions, that you would like to have discussed. See ya there! Cheers, Dietz 🚀💜

@starfruitjsc: Congrats, cool stuff ;-)

[dpfaffenbauer]

so react js confirmed? 😮

[drietsch]

100% confirmed 👍. Also the previous internal name "Apollo" is replaced by "Pimcore Studio". Initial working previews at the Inspire. Including insights into the UX/UI, Studio API, and (maybe) already early-access to the repo.

[kingjia90]

100% confirmed? ohh.. 😞 no chances for jQuery 4

[drietsch]

Hi @kingjia90, you mentioned jQuery 4 really in the last minute. Thanks so much. And finally it got released a few day's ago. Switching now to this great beast right now. Status: Getting pngfix ready to run. Awesome.

[fashxp]

Hey folks, to continue that discussion, have a look here: https://github.com/orgs/pimcore/discussions/17076