 All right Welcome to this session today. We'll talk about the next dribble admin UI improvements So another session about the admin UI, right? I think Christine and I both talked a lot in recent years about the admin UI and we will still try to continue doing so So my name is Sasha Eckenberger. I'm a senior product designer at GitLab I'm one of the design maintainers of Claro and the Drupal design system And I'm also the creator of the Chinat main theme which you might know Hi, I'm Cristina Tramillas. I work at Lulavot as a senior front-end developer and I'm also core UX maintainer and also This is long Provisional core front-end Framework manager Okay, so why are we here? basically We want to empower site builders To give the best solution we can't control what people is going to build But we can help people build the best one and provide them with the best tools or the best first the starting point All these started a while ago we started with research like a lot of time ago months ago and This is not just about the navigation which is you probably already heard about that It's about the whole making the whole UI better. So We first needed to the identify who were we Working for or which people was out there We came up with three main personas the site administrator the site builder and the content editor and Content editor content manager colleague, whatever content user content related user Each of them have completely different tasks. So we need to define what we need to solve and for whom In Drupal core, we have the content editor There is the proposal to also have the content manager This helps us provide the specific solutions that are different from the site builders that we we already have a The admin role by default by default But we actually have the option to have other things that are in the standard profile Targeted to different users different personas, sorry so We came up with a map for each of these personas We this is quite a standard on the UI research wall We came up with behaviors frustrations and motivations for each of these three main Personas so this is the I'm not going to read all that But this is a proof that we work on this This is us we call it administrator because We this shouldn't happen with but it's kind of tied to Drupal core roles somehow So do we have the admin role then we don't have the site builder role But we also work as the site builder because actually doesn't make a lot of sense to have a site builder role Because you are actually building the site and it's sometimes you either have the site builder an admin hat or It's not needed, but the tasks and Goals for the site builder are usually completely different to the ones for the site administrator And that's why we wanted to keep them separated and obviously the content editor we call him or this person Content editor, but it also can be content manager content author. So as you can see we can They are actually completely different roles in a lot of sites But we needed to have like a content in general user Something else that we did where user journeys Basically is where you start and what's your goal? The fun part here is that every time that you want to start in Drupal you end up in the slash user You've been in Drupal for five minutes. So yeah, that's where dashboard comes. But anyway This is basically we came up with different workflows and where each where each of them started Like if you want to create a content type, where do you start if you want to theme something? Probably how many themeers in the room? Okay, how is the experience of going to create a new build mode then go to the Know that it form and yeah, okay So these kind of things if we didn't just focused on the on the content authors or whatever we kind of did that for all the all the users We did other research. We did the card sorting. Not sure if he any of you participated This card sorting the goal for this was trying to come up with Better information architecture to see how people grouped things from the current administration menu and we also did the several user tests With a navigation but also for project browser and we collaborated with University of Minnesota and we learned a lot So I'm gonna start talking about Navigation modernization because it's the thing that We've been working more late in and I'm Personally more involved So some of the previous work that happened here and it related to this is all the work related to the information architecture Everybody knows what's information architecture? Somebody doesn't know it Okay, so well basically is trying to organize like the the manual Items in a way that they make sense for for the users where there is also another proposal for a new menu that it's great It's called content creation manual. It's not for creating content, but it's basically related to content. You will see now Before that there was a lot of research also done for the admin UI and JavaScript modernization initiative another long sentence also the clado and the newly out inside the admin and Whatever modernization initiative and also a lot of stuff happening the gene admin thing that he Sasha has been implementing a lot of stuff and testing a lot of stuff already there Why do we want to make all these changes? For our starting point, we don't want the same menu for content users and for site administrators or Site builders for example, it doesn't make sense. They don't want the first the the main important Places that they're going to click are not the same We don't have Second-level navigation in or its own tumult for the navigation in core I've seen I've said that several times, but more than 70% of the site install I'm in toolbar and if you don't install that why Basically the core tool bar if you put that on the left It has you can go to the lower levels, but there is an issue to solve that but We're trying to Solve that because we also have too much space when it's on a vertical mode meeting on on the On the left. It's not the designs are not up to date We have accessibility problems and for these front-end developers still uses jQuery so this is This has years like really a lot of years This mock-up that we came up like a long time ago, but that's what that this is what we envision like probably Amsterdam 2019 we wait before that. Yeah, so we kind of try to have this left stuff With all the things in there and the things that we were thinking that would make sense at that time so All the work that we are doing has a lot of parts all the research that I've been Telling it just this part a starting point the information architecture. It's a work in progress also the designs are actually we're trying to Work on the administration navigation and at the same time test everything and iterate on top of that Meaning that we're going to need designs and user tests and front-end development all the time and also the back end It's actually something that just started right now Defining what the features that need to be built and everything that we're going to iterate on top of tests all the time And that's a goal So in the information architecture perspective We have these Issues from 2016 it's been there for a long time and if Rick I think you're here. Hi. She opened this issue. She's been Okay, so the card saw thing that I was telling you about the goal was actually to try to Put together cards Basically that each card had a name of a link on the menu and we asked for people to actually put the cards together And give a name to the cards and this is basically If you see at the top the those are the cards that were grouped together so in here we kind of found several groups that were working together and Groups things that make sense for people. It was really interesting But the problem that we had here is that this survey was open for both for content editors and Experience users and a lot of the content editors didn't even understand What the naming or what are the links in there? There was a buff this week About Drupalisms because there's a lot of people that isn't starting in Drupal and have no idea but some of the names like Bill modes we were saying before we have form bone for modes view modes display modes You get it So Basically There is not the title here perfect This is the survey this is the the results of the of the survey Basically We try to map the customizations for the toolbar and the customizations for the Administration menu itself and now the new content creation menu that I was talking about We're basically trying so as you all might know as a content user when you log into Drupal You see all these It is so now you don't see any more the link at the top links if you don't have access to one of the child issues Items but still it doesn't make a lot of sense for a lot of users to have like appearance in there or to see like They actually if you go with Drupal core You only have the content and you have to click the content in what else you have you maybe have a Structure and you have to navigate to at the menu like its menu navigate them to the menu and at the menu Doesn't make a lot of sense for content users So we decided that we would try to take The few links that make sense for the content editor and create this new menu so basically a Lot of people might be interested for example on creating people creating new users and have a list of users or maybe a few parts of the configuration a few parts of the structure and with that create a new menu and The idea was basically Have this manage content and also this link to create content and this is something that we've been implementing on the On the new toolbar or the new navigation that we're working. So the designs This is the initial designs that we Worked on we it's the left sidebar. We researched a lot on why we needed to have that on the left It's a change believe me It is really strange at the beginning when you're navigating with this new thing on the left that is white You're missing the black thing on top. It's like I'm locked in I'm not locked in that's why I would love to have a lot of feedback from you because it's Really important to be sure that all the community it's gets on board with that one of the things that we try It is to change bookmarks Instead of shortcuts and this is basically an administration menu and the collapse on the bottom separating the help and the user menu at the bottom This is the content menu We created these top create fast way to for users to create stuff and then link into Blocks files content whatever and Since we have all these why not open it to custom manuals also to live to make an easy way For people to customize whatever is on the line on the left sidebar how many distributions don't have their own menus So it should be easy for people to actually add menus in here So those are the initial designs that we started from we've done like a lot of iterations on top of that plus user tests and whatever and This is something that it's closer to what we have right now You will see that we don't only have this left navigation We also have that top bar in there and the reason is because we found out that we were missing We started to look for integrations with existing toolbar and we were seeing that a lot of stuff It's just doesn't work on the left. It doesn't work You might want to have like environment indicator You might want to have the collapse button people didn't find the collapse button at the bottom So We are still working on that. So this is the thing. This is work in progress This is not final, but we are thinking in a way that we can actually Move into having this contextual top thing that it might change from the front end to the back end And as you can see here, this is a note that it form and you don't have the local tasks We are thinking on moving them at the top. This is just an initial design This is not the final for sure, but you don't see the sidebar. This is something that gene also Has been working on. This is actually a suggestion coming from gene. They have been testing that for a long time This is just an initial design, but this is the idea is to have this top around there and Yeah, basically, this is the idea so what we've been doing so far is also working on the Vulkan we created this prototype you you start we started Testing this prototype. They were hard-coded links in tweak and now we actually have to make those Links real menus or real things that people can actually work with that so We are actually answering these questions. So if you have thoughts come to the ball later today or Please jump into the admin UI Channel because we want feedback from everybody. We want to ask Answer for example, are the menus placed as blocks and will people be able to rearrange things? How do we manage these blocks? Do we like? Open the door to put anything in there This is true for people will do whatever they want. So let's be realistic who has permissions to put stuff in there Do we want to limit? What can be placed through an API on some way or just open it as blocks? From the existing things that we have in code right now Should we remove on the admin menu itself? Should we remove the content top item if we actually end up having this content creation menu or If people don't enable the content creation menu, should we just keep the content that is as it did right now? Should we rename the shortcuts to bookmarks because it's actually been proven on the on the user test that it's better for a lot of users because it open another door because bookmarks, it's more like user focused and shortcuts and not so We have a lot of stuff like for example, what do we do with the help and The content creation module for example, is it actually going to be provided by the toolbar is something completely independent? How do items go under the create which items go in there all the content types? How many people has more than 20 content types then add to their yet taxonomies blocks users media Entities, so how do we manage the amount of things because the goal is that it's a Short or a quick way to get to create content. So we need to discuss how to manage that who had who can do something in there for example Should the submenu so we have two submenu's in this create thing over there. So All these questions We actually did a lot of use well, we've actually done usability test several rounds of usability tests The first one was in this August from here One of the most controversial things that we discovered and we tested that on the second round was that We were using a split buttons to keep the Main link and then a split button to actually open the submenu and PN user were super confused with that They kept clicking on the link to actually open the submenu They weren't expecting on a left side bar to actually have like a Split button to click on the on the on the carrot or the arrow itself. So we Among other things This is one of the most important thing that we we had to change In this second round, we actually test this change and all the users were really happy with that We want another feedback that we Gather from from there is that we didn't have enough distinction from the left side bar from the rest of the The things because we were testing with olivero and everything is super wide and there wasn't enough distinction So those are the things that we are working on with redesign and such as going to talk a lot a little bit more about that and Here we are going to do a lot of user tests If you're willing to come to the contribution from room, we will love it because we just started Testing the mobile that we implemented and we want to see what people think about that All right. Thank you Christina So I Want to quickly talk about some of the things Which you know if you're very familiar with chin a lot of the stuff you already saw in the mock-ups is you know Might be familiar to you as a user of the chin admin theme, right? So speaking of the new navigation we actually had You know like the RC 7 release last week and it actually introduced like this new You now have a fourth option, you know So you have a new option you can enable that if you upgrade to RC 7 in chin and then you can test out the new navigation The new toolbar we're working on It looks like this So we have like the left side navigation like we had as a default for a long time in chin but this time like you know like with the Restructured menus with like this flyout navigation. So it's way easier more compact You can easily navigate through things and of course in the nature of chin We already implemented the new navigation, you know to make it work with like the accent colors With dark mode and so on right So whenever you use the chin admin theme, please update to the latest RC and test this new navigation would really like to get feedback on and if you're on Claro as you know Christina mentioned you can just install the Drupal slash navigation module Because there's like a dedicated module where you can use it with Claro as well But in chin we have directly integrated it. So you don't there's no need for an extra module All right Let's talk about some of the layout changes You know Christine already showed you some of the layout changes were like, you know proposing or working on So it has been a very long time I just saw that we proposed this in 2019 that we want to do a layout redesign so You might have to understand then when we when we started working on Claro in the beginning At least both Christine and I had a vision how Claro should look like But there were a lot of Problems in in doing so because we had like, you know, we had so many things on the roadmap, right? We want to make it Perfect from the beginning, you know like from terms of accessibility In terms of how we structure things, you know, like the code needed to change So basically the first iteration of Claro was we we took seven and we just you know Implemented the new design system we created on top of it and then we added like all the accessibility Improvements and everything on it But there was always this plan in mind that this is not the end state of Claro, right? Because we want to do more So we proposed this meta like the layout redesign and it had some designs on it And basically also this might look very familiar to chin users Because we're want to bring back like, you know, like the best bits of chin But maybe in just them a bit more refined version than what we have today, right? Because you can always think of the Chiname of being like, you know an experimental theme not in terms of that It's unstable, but we want to try out things, right? We want to gather feedback We want to iterate on things so, you know getting in out there as quickly as possible as for core on the other hand We want to have a rock solid solution, right? Because it's in core So we need to have like to meet like all the the gates were aiming for So here in this screenshot you can see We have like you know, like a very similar layout to chin We also have like this top bar which Christina before mentioned where we have like where we have a place where we Let me go to the next slide where we actually have a place for modules or at least in our vision And this is still you know, like a proposal we're working on so it's a draft But we have like this place where modules can opt-in to place items, you know, so you might have your let's say You're on the content edit page, right? And you have a module which maybe is only Hooking into the node edit form, right? You have like a you know There are like preview modules where you can preview like a note in a Mobile overlay or on a tablet view and these things are maybe only for the the node edit form, right? So we want to have to provide like a place where we can you know, like provide modules a way to hook into things Another example would be you know, like the environment indicator module for example, you know could Perfectly hook into that or any other module you can think of like double or other modules, right? I'm speaking of like changes we want to do is like, you know, like local tasks Vertical tabs these are all like navigation elements, right? It's a different way to navigate through the admin UI And we also want to do some changes there, you know, we Christina mentioned it. We want to move some stuff Maybe out, you know, like making the layout a bit more dense when we can remove some things Which might not be necessary anymore in in a future UI So I'm talking about these things, you know, we have like local task And then we have you know, like other local tasks, which are like a second level which You know might not be the best thing to have like tabs in tabs Right And then we have local actions Which are just at the top of the page, but then when you're actually building content, you know, if let's say you're In the manage phase, you know, you're adding fields and then the safe button is just at the bottom of the page So it's not easily reachable, right? Especially if you're a content editor for example, you know on the know that it form You want to just do a tiny small change on your site You have to scroll down all the way to the button to save it, right? So in chain we solve that in having like this sticky bar at the top So, you know, like the local actions are always visible and and you know, you have like actionable items So that's something we're looking into as well Yeah, so here you can see the example of the managed display, right where you can Basically, you can like add something or you can, you know, the safe button is not visible because it's somewhere at the bottom So all those things we can maybe improve and provide like a better way how we can outline them So I think another great part of the team admin theme is the customization layer and this is not that We invented that because it was actually like, you know I had a lot of discussions or we had a lot of discussions that we want to do that with Claro in the beginning And this actually was like the beginning of the Chinat main theme as such because like the version one acts was basically Claro just with like accent color So you could you know, it was just like a form where you could choose the accent color and that's it The rest was Clara, right? And yeah, eventually it evolved a bit into its own thing because you know, we had like the first thing was the accent color We had, you know, you might be familiar with this. So you have like Different colors to choose from as a starting point and then you can also set your own color, you know, if you're fancy You know to make the admin UI experience more tailored to your DXP or to your client or to your agency, you name it, right? So some examples, you know, this is the Chinat main theme But you know, here we have like some different colors and you know, it's something very easily, right? We had some hurdles that we cannot proceed with this with core. One was that we don't Expose for example CSS free variables because you know, like this opens the door to make this way easier Than ever before, right? And we're actually also using this technique in Chin by the way But it's not the only one out there, right? Because like, you know, Olivero Looking at you Mike has also something very similar, right? Because Olivero already shipped with like having like, you know, like the ability to change the accent color, right? So the foundation is in core already But there are some things we need to do and It's being worked on. So, you know, like there's like a proposal to add like a theme Colors YAML files so you could you know easily define your custom colors and then, you know, your theme can pick it up or like work with it So providing like a solid base how we can do that So you you can potentially also use this technique in your own frontend themes or in your distributions or whatever you're building, right? So yeah, that's something else which is still in progress, but you know, we're close in finishing that And then there are other changes, right? I think Gin is famous for having like this dark mode and This was also something we want to bring to core at some point, right? It was always part of at least the road map But yeah, we didn't get to it just of yet, but you know So you can enable like a dark mode and then, you know, you can use it I think the key part about customization is that we also being able to expose them on the user level Because you know, I think like having an accent color having like enabling dark mode and stuff like that needs to be tailored to the user So there's another issue about that. Do you want to step in? All right And then there's even more right, I mean There are several issues about this and I think we we You know, we heard you as users of the M in UI when we rolled out like Claro You know, there was a lot of feedback that it doesn't feel as dense as the seventh theme before for example, right? Because of all the accessibility changes we made everything grew a bit, you know You know like bigger target points for buttons, for example stuff like that And why not providing like a you know a user-facing setting where you can actually change the layout density, right? Something we already have in chin Because we wanted to try this out, right and again with CSS free variables You can easily implement something like that So for example, you have like here the content list and then when you enable, you know a more compact mode You know the strings This is not the most compact, but you can change it Now if you do a comparison with seven you can actually see that we fit even more content in than seven did before So I think the argument of not being dense is a bit relate unrelated at this point But it's something we want to push for core, right? Because it currently solely lives in chin and we need to make that happen So this was the issue I talked about about the spacing in Clara You know, it pushes a lot of the content down I think another great improvement we did to counter this was we we changed like the bulk actions You know, there were always Duplicated at the top and at the bottom of the page and we concealer, you know, we we combined them into one Contextual thing. So if you're on your Drupal versions like 10.1 onwards if you select like multiple items in the content list for example or the media library, you know like this Contextual navigation pops up where you can have like local tasks to easily modify multiple ones, you know, like bulk Edit or modify or delete stuff. So there are a lot of ways how we can improve that, right? I always have to feeling you want to step in and say something I feel the pressure Field UI right, you know, Laurie talked about this earlier This week, you know, this this is a great enhancement, right? It's also part of the admin UI because it's part of the you know, the user experience and in you know, like Creating this new Better way in in creating content, you know being faster being able to see like context information on Field reuse for example, you know creating groups, you know Creating groups was there before but we you know everybody or almost everybody use it So why not bring it to core, right? Or having like more contextual information on something, you know, like providing maybe a more visual Appearance to select the fields to make it easier for you know, like site builders To actually choose what they what they try to do, right? And then there's layout builder, you know, it's a very powerful tool But sometimes you need to enable like a dozen of modules to enhance it because the out of the box experience might not be The greatest let's put it that way, you know I don't want to be too harsh But you need to have like a lot of companion modules to make it work for your specific use case Most likely, right? So there's a meta issue something We which was added like quite recently to to you know, like improve like the editorial experience as a whole and Why is this necessary? I mean we could see that in you know, like the pitch-berg initiative Because you know the stuff which got founded there was related to layout builder or even to you know Like other principles, which is totally fine. You're like Gutenberg You know like paragraphs layer paragraphs, you know, there are a lot of great tools out there And you know, you can have like multiple ways to build it But the goal here is to improve the out of the box experience we have with Drupal, you know Because it's it's a feedback we always get is that you know the out of the you know If you're like a newcomer to Drupal It might be overwhelming because you install Drupal and then it doesn't a lot out of the box And you don't know that you need to install admin toolbar and you know a bunch of modules And then you're like, why is it that way? Right? We know that if you're long in in the community and worked with Drupal It's an easy thing to add all those modules as ever in a first glance, right? So we want to try to improve like the out of the box experience Speaking of improving the out of the box experience and there's also dashboard, you know, you might be familiar with this You know, this is like back in the Drupal 7 Space we had a dashboard and we want to make a return for the dashboard But this time not that one size fits all solution But more a tailored experience for you know, like a more customized experience to these different personas Christina showed you earlier on right because they all have different needs and we want to incorporate that, you know I presented like this mock-up and I was not much thought about that like two or three years ago at the Drupal con And then, you know, we were like in talks if we actually Should make an initiative out of it to bring it back to Drupal But more on a on a personalized experience level right because I think again Christina said Most users land on the user page and there's nothing on it You know, you're just lost there and then you navigate away from it So It might be like a nice improvement to have like a you know a quick glance of what's going on in each side You know, you see maybe security updates. You see unpublished content. You see stuff. You need to review as a content editor Translations, you know all those things can be in a single hop Alright Yeah, I think we can skip that I already talked about, you know that that we Needs to take that into consideration of the different personas we have and the different needs they have You know that some might need to have like shortcuts It also needs to be a customized experience and then we can throw in maybe layout builder So you're able to actually fully control have full control over that new dashboard and you know Like adding your own blocks for maybe your modules or you know, you're just your user experience You want to build for you use case Want to add something here? Yeah, we're also trying to talk we saw in our plans We want to talk also with distributions and to see like to be able not just distribution So but also like big modules that have been Can't provide really interesting things in here like for example, we'll talk manager or things like that Yeah, I'm for the For the proposed implementation as of now, you know, we would have like maybe two Default dashboards tailored to those personas or like, you know to the to the user roles basically But then as I mentioned, you could enable maybe layout builder And then you have like the the full flashed experience where you can customize it tailored to your needs All right, so there's actually a lot going on in this space There's also like a slack channel called dashboard Christian actually worked on this get a project where he Already, you know, like implemented a lot of those things I talked about so you can you know, check that out at this link And you're also welcome to join the slack channel because there's a lot happening currently in there I'm talking about more of different slack channels later on All right We don't have time we skip that Well, I will mention that in the initiative keynote after the lunch break, so we skip it for now And then I will talk about that later on all right the important part because We need more people. I think everybody who stands there or here where I am says that but we actually need more people We need more designers front-enders back-enders. We need researchers. We need all kind of you know, you name it We need just more people working on all those initiatives, right basically So there's a plan issue where like a lot of the things we talked about today are like, you know like outlined as a plan and It's a good starting point to look into this to see what's going on Another good thing might be to you know join one of the slack channels We have so you can go to Drupal org slash join slack if you're nuts in in the group in the official Drupal slack channel And then we have topic-based slack channels like admin UI field UX, you know a preview dashboard and so on And most of them have like weekly meetings or bi-weekly meetings Most of time it's in text form so you can you know easily join there Reach out there if you have questions or you know if you have skills and want to bring you in and The most important part we have a birth of a feather room 201 2.1 at 4 15 later this afternoon where we discuss like you know What we're gonna do with the navigation And then right after that we have another session about the chin admin theme You know where we can discuss things for the chin admin theme and we might need some more time for the administration So there might be some overlay and wait and there is right after this There is lauri session about the page building thing Yes, which is in a couple of minutes. So With that said 10 it's at half past 10 half half past 11. Yeah, a couple of minutes 15 minutes All right. Well, that's it for this session today. I want to thank christina Um, I want to thank everybody which is here if you have any questions. Let us know. Thank you