 Good morning everyone. How are you doing today after all the social activities yesterday? All good? Cool. Welcome to our session on designing the future of the Drupal admin UI. So my name is Sasha Eckenberger. I'm a designer at UNIC Swiss company in Zurich. I'm Sasha Eckenberger on all social media so yeah just follow me everywhere. If you have a hard time to pronounce my last name it's quite easy it's Ek and Burger. So yes. Hi everybody. Hi to the new ones here. I'm Cristina Tomillas. I'm a frontend developer at Lulavod. You can find me on Drupal.org as a screener. Your turn. Hi I'm Archita. I've been working in Drupal for four years. I am a UX designer with security. What are you doing? So we are going to talk a little bit about initiative in general. Also we're going to talk about claros that probably something it's the reason why a lot of you are here today. We are going to talk about the design system. Sorry we are designers so that's mandatory. We are going to show you some things some new things that we are working on. You can take photos but just be sure that it's work in progress you will see later. Also we are going to ask to you if you want to come and join us and help us and some data later. So let's start with the initiative. The first thing is why did we start? I'm pretty sure all of you are aware of the why. So the Drupal administration actually wasn't refreshed for years. It's not that it goes a bad design. It's just that it goes like eight years old or something like that. Even Drupal 7 was using 7 and Drupal 8 was using 7. So yeah it was the time to to make a change there. So that's why this initiative started. It goes initially the JavaScript modernization initiative and later the admin UI and we came together and created the whole initiative. So more or less about the initiative it has three main parts. One is the the JavaScript modernization. The other is the design one and also there's the user research that was mostly happening at the beginning like with Suzanne that is there and a lot of other people. And the three parts it was a little bit complicated because each of us were working on completely different things and we had to come together and try to find goals that were kind of less similar but each of us made stuff that get into core and we were trying to make things better like for example the new design system, the new editorial role. So those are all of them things that are working progress. So in the short term we are planning on updating the existing admin UI. So it means that we are replacing 7 with a new clatter theme but it's going to be the same admin UI so far. In the longer term the goal is to completely change the UI. It's going to go to be step by step probably and when I say completely change the UI it's not that it's going to be like something to make pancakes or something like that. It's going to be a UI for managing content. It's just that we are trying to think big and trying to change the layout on these things but you know you can't completely change someone's interface from one day to another. So it's going to be a longer term. Good. So Claro, who has heard of Claro so far? Who has used Claro? Who is still using it? Good. So I'm happy to announce that we have over a thousand sites already using Claro. So that's quite a lot. So for the few people who have never seen it it looks like this. So basically everything you know from 7 is in the same place as it was before. We just refreshed it with the design system as Christina said before. We have all the same regions but we had to take a lot of consideration in the design. So basically adding layers to give more depth for different elements or also making some elements bigger more room more white space. I know a lot of people don't like that maybe but we might have something in hand later for that. Then we have yeah you see I just go through some designs so you can see everything is still there where it used to be. It was just basically us trying to adapt the design system as quickly as possible to the administration UI. One important thing was that we make them the mobile experience better. So what do I mean by that? So basically just like making sure that all the elements are like have enough room to click so you don't accidentally click something you don't want to. Also like increasing the text size so it's easier to read on mobile for example. But I think the most important thing for Clara was accessibility. So we did a lot for accessibility and not only in the front end so we started quite early in the process. So when we started to design or redesign component by component we already took in accessibility maintainers and other people to that we already have like the first iteration for the design from an accessibility point of view that we have like an improvement to what we had before. One of the things which took us a while to figure out how we want to do it was basically like the focus for elements. So by implementing it the way we currently have it like with this green outline which is basically just like a color which is only used for focusing an element. So this gave us quite a good feedback from all the accessibility maintainers and also in our tests. Then we also increased the contrast so to be compliant with like standards like WCHE 2.0 or 2.1 we increased all the contrast for all the different elements like the text and also like contrast for input elements and so on. And there was also quite a huge involvement to improve the experience when you're basically like in Windows High Contrast mode for example. So there was like a short demo on Drees Note if you have seen that. So here you can see like a bunch of components where we like explored how the focus ring that's basically what we call it could potentially work like and like most of those elements are already implemented in that way. Okay so how we did get here? So we started like a long time ago and we have our first version of Clado around February and then we launched the first alpha release when we had the few components like batons, fields and several things and I gotta say they were the first version because we've been iterating on that for several months. We launched the 5th, the 5th alpha like in September and after that the goal was going on experimental theme in Drupal core. It means that we needed to have a better release done before the code freeze for the 8.8 version of Drupal and we had to reach a specific goals before that in with enough time to have this better release and then getting the core committers and project the product managers and also the framework release managers and everybody reviewing it with enough time to say yes we approve it and we will make to Drupal core but it was really hard the last few weeks because all the feedback came at the same time and we were late so it's been to say that rough which last two weeks before that and now that we are experimental theme in Drupal core if you are using Drupal 8.8 you still can use the country module theme if you are using 8.8 it's in Drupal core as experimental you have to enable it and our big goal here for Claro is getting as a default onion theme at some point for Drupal 9 but first we need to reach the stable release before and ideally with more time this time for that we have a roadmap. The roadmap had several beta blockers that we reached at the end so and after that we have several boxes with several kind of features that we need to have down before we reach stable so we have new features we have a lot of accessibility issues that we need to fix a few UX improvement design improvements also some technical depth that we had to move from previous issues and try to break the issues and made them smaller to get that done right now we have like nine box but it doesn't mean that it stays like that if you please can try Claro and if you find something please report that into Drupal core because the sooner that we get the box the sooner we can start working on them add them here and get it done before the stable one and a part of that we have several features that are should have or could have like for example changing the the font size and these kind of things that will be really cool but there are a lot of other things that are more important right now so that's more or less the roadmap that we have ahead of us and that's what we need to do before getting into a stable release and we need your help for that so please test Claro and report the box we wanted to have a comprehensive Drupal design system basically a single source of truth where all the elements are grouped and collected for anyone in the future to come back and help us and work with us on it some characteristics some traits of the design system we've built very fresh very accessible like Sasha rightly said that accessibility was our primary concern it is absolutely user friendly and is robust it has a strong foundation and it has the potential to evolve over time foundation has color typography and space in our design system we have we modular scale has several implications we chose this as it we plan to move towards variable fonts and fluid typography in the future so setting one base value which is 16 pixels helps us calculate all other by multiplying it by 1.1 to 5 we are using system fonts for this all the colors the bright bold colors you see here they all achieve triple a access accessibility modular scale for this as well this is very well documented in the specifications of Figma we are working on Figma in the future we plan to make a style guide but for now everything is on Figma the design design system has a collection of components and it it has all the use cases of components where we have everything from radio buttons to drop downs and everything else based on seven seven refresh we came up with components that were already there and would work as a fallback right now we're focusing on coming up and building and designing components that are needed for claro and also for the next generation ui for example this one one is a drop down that we used for refresh and the other which also has jits we planned to do that in the future in the new admin ui exact so story of a button yeah christine now we want to jump in and talk on the story of the button you got me here okay um you might say button is bad on me what does it have it just have some text and something maybe a background maybe a border in there well it actually can be wrong it can be square it can have several colors it can have icons it can not have borders it should be accessible so we've probably tried five fifty seventy versions so we've had for sure at least twenty final versions like the one this this is final okay final two okay no final final two three yeah so and actually we had some of them committed and then we had to well do some changes on there so we've had several um iterations on there and that's the bad thing that's not the only button so you see here we have the default button we have the primary button then we have this super cool secondary button but where can we use it so we have a lot of um things to take into account here we are going to change some things in the future not I'm sure ten more buttons I'm not sure but that's not all we also have messages in Drupal Goren it's like a message is a message what what's wrong with that well um you can have a lot of variations on that um you can have really long messages and really short messages and you can have the three messages together you maybe can have a new message which is the status one you maybe want to have uh something small on the left you maybe want to line messages you maybe have I don't know there are a lot of options but the most important thing is that you want that you want the message to be seen by the person that is using your interface so the final messages that we got in are a little bit different so these those are the messages that we have right now the first time that we saw that it goes like oh black messages are you sure we have a super white and clean space that's actually how how many of you know what clado means are you here you know what's clado okay come on yeah say light well light or that has more space clado is a Spanish word for light or lighter or something like that so yeah that's the thing and the messages are super dark so yeah it goes quite a shock at the beginning but it really worked and a lot of people actually gave good feedback of that we might still need to change some things like maybe I've got some several things but as we stated this we are planning on iterating on iterating on all the designs and everything so if you have something to say about that please just come to us say what's the problem that you're finding and we will make this better want to jump in or I can continue okay so we have also several new components on clado things that weren't there before that for example another button so as you can see the most important thing here is the red one on the bottom that is the delayed one what's the history behind it so the thing is that it's not a button it doesn't have the markup of a button so it can't look like a button on an accessibility point of view in several other ways because it is not a button right now maybe on a future javascript ui it could be something that actually have an action on the same page but right now this is a delete action that takes you to another page so that's a link that's not a button but that's a button it's with the buttons so we had to come up with several components like for example the beijer and these kind of things we also introduced a new component that it's cart I think it's a most used component on most of the design systems that you can see but we didn't have it so we actually created it and it's used on the appearance page so you can check it there um the action uh the icon uh link it's a new kind of button we are basing uh part of the design on something that goes already there which is the quick quick edit but we're probably going to use it somewhere else no spoilers yet so you will see some new components that we are planning to put in are the the chips you can take the photo now if you want so probably the range input and several things so the the idea here is that we are going to introduce new features and new components by the time so it's not all at the same time um there do you want to come up with this one okay so the specifications for that are um everywhere you can check it uh uh on figman everywhere okay so um um everybody can check it uh on figma you just have to go and check the link we are using a really um new like from the last year's collaborative tool for design uh we are planning to use um a style right online at style right at some point we really need to have this conversation but for so far all the specs are on figma or on the issues that we create on claro so what's figma um figma is like google docs for designers that's the easier way of explaining it for us was like a completely new change and that's something that led us um work together from people from all over the world different time zones and it was super easy so if you want to see what's a designer's party it more or less look like that so you can actually steal someone's idea and make it like it's yours and make it better so design party you can check the designs here that's a url uh it's public to anybody you can actually see it if you are logged in figma you can actually um check the color check the phone sizes and check everything and if you are a designer just come to us and ask for permissions we'll let you play with everything and please help us because we really need designers so come and join the party so we now saw a lot of things you might already saw in a while right so like everything which is um basically like implemented or in one way or the other into claro um but now i want to show you basically just like an outlook of what's beyond that so what we are also working on so while working on claro and also the design system in particularly we came across a lot of small things we wanted to change but we weren't able to because we had to restrict ourselves because we didn't want to change too much for claro um that was for one fact that a lot of more people need to be like bring in to do these changes and on the other hand it takes a lot of more effort and time to roll out these changes um so the proposed layout changes here um is basically this is just like a stripped down wireframe of how claro looks today like the node edit form and now we have like several things like this sidebar on the right with the settings which is actually not the sidebar it's part of the content and also we have a toolbar on the top uh which can also be limiting so we were thinking why not rearranging things and make them in one way or the other better um so basically like having different new regions and different new elements to work on um so the sidebar for sure can be basically like collapsed and expanded as you also see on other cms's i mean it's not a pattern that we invented it's out there for quite a while um so this would be like the the new toolbar concept that we could potentially as i said like this is all highly um work in progress and maybe we work on it maybe we will just you know screw it and do something else it's just like something we were thinking of um so potentially it could be that the sidebar is on the left and for rtl user it would be then on the right um and so on um there is this new sidebar region uh which is this here which can contain all the settings so this is not maybe limited to the node edit form so this could also be potentially be used in other places in the admin UI just to concentrate settings in basically uh one column or one place um but i think the most striking one would be the sticky action bar um so basically like having a fixed header or a fixed element which gives you always like a clear call to action so if we take this node edit form as an example you would always have the safe button on hand so you don't have to scroll like i don't know like a lot to get to the safe button if you just wanted to change the first element uh on the node form for example so just like providing uh more feasible options um so i did some design markups in the past couple of weeks and also these two guys gave some feedback and so we we did some small iteration but this is really a work in progress you can take pictures but you know just it won't be there in any time soon just saying that um so this could be basically like an overview page with like a table of content so like having uh content in there so it's familiar but it looks a bit different it has a call to action on the top to create new content uh everything is a bit more compact but still um in a nice way shown um like the node edit form with more depth with more clear separation of different elements like the sidebar the content the sticky bar at the top and then maybe a potential implementation of the new toolbar now you're saying blue isn't your color there's too much spacing or too less spacing or whatever um we get the points um so something we're also taking into consideration but which was basically just like out of reach for claro um which could also potentially be there in the future or like personalization options so if you don't like blue you might change just the accent color to something else like red or green or you name it just something else for example like these could be colors you might use or might want to use maybe not maybe others um then it could potentially look like this or maybe like this if you like orange or red maybe pink yeah you get it like having more personalization options also like spacing settings so one of the feedback for claro was that we were using too much white space so seven was more compact that's actually true but there is also a reason behind it there's already like an issue on drupal.org um were like there were like things proposed how we consult that so this could also be potentially like a setting in the future in the ui so you can reduce it um the same goes for um motion so if the new ui has more like interactive like interactiveness um then we could also provide a reduced motion setting um like from an accessibility point of view or you just dislike everything like being nicely animated and transitions um also even going even further and making like high contrast as a setting so that you don't have to force your system into high contrast mode but you can force the ui into high contrast mode improved rtl support um so i did this mockup so i use google transit don't blame me if there is anything wrong on this one here um but as you can see so this could also be potentially like a setting so you can set the whole admin ui to rtl and then you have everything in the floor you're used to right so like the cyber moves to the right and so on so there are many many many options possible and i think we discussed um all the three of us and also with uh other bunch of people we discussed a lot of possibilities we wanted to do but we restrict ourselves for now um but there's one more thing i mean it wouldn't be 2019 without showing this right so why not having a dark mode right why not just having a dark mode well the implementation is not that easy as i just say why not having it takes a lot of effort to do it but this could also be potentially like a change in the future so if your whole operating system is in dark mode why not having automatically the ui in dark mode or making a setting that you can turn it on or off and also here we could have accent colors so which match your system or your preferences so this is all exciting at least for me as a designer doing a dark mode is always exciting because it's a trend and i really like dark interfaces but we have to keep in mind that this was all highly experimental and we're just like started figuring out what we want to do in the next couple of months and years so it's a long way to go but we were just like quite passionate about you know just showing you that we have something else in mind that just like the claro is basically the end so it's just a start okay here's where you come in so we really like to have people testing claro helping claro getting involved it's not so you can help in a lot of ways if you're a designer or you know a designer that knows a little bit of trooper league will be great even if they don't know trooper please come and help if you want to help on issues um recently because it's an experimental core right now in trooper in core you just have to go to the issue queue to the from trooper core check claro theme as a component that's a url if it's easier for you and find four issues that are active and need gorg or just reveal them or i don't know few issues because you found the bug or something so designers please come and join the design party and those are the slag channels where you can actually join to do both slag um we have the separate party for designers and then all the rest of the people are welcome into the other one unless you want to come and rest pink or black or something else um actually the admin UI a lot of things are discussed also about design and how to implement things so everybody's welcome anywhere um you can join the admin UI ask for permissions for figma the the admin UI design and ask for permissions for figma the admin UI channel and just jump in and ask for help or whatever so we meet every wednesday at two two and a half in europe uh in central europe um the chats are usually the the meetings are usually chat only so if you are working and doing something else you can just follow it say hi i'm here just laughing or something like that and just read what's going on and uh yeah that's it that they are just chat only so anybody can just jump in uh they're in english but since it's uh written so anybody that it's not proof that english can also help and please come to the um uh springs tomorrow or today they will be on the tables also on the springs um say how you want to contribute we will meet people also writing documentation and i don't know whatever you feel you want to help just come in there and we'll figure out good so um let's summarize what we saw um we have a thousand sites or more using claro um you can insert insert it as a as a contract module or uh it will be as available as an experimental theme in drupal core so just use it and give feedback find box and other things everything is welcome just make sure you test it um accessibility is important and will be important for everything we do in the future um so this is really like the foundation of the work we've done for the design system for claro and also for everything we do in the future and there is new stuff in the murk so claro is not the end so uh there's a lot of things to come and a lot of things to fix and a lot of things to figure out how we potentially can do it and implement it and yeah just be excited about it and help us together to build it um yes so one important thing to say um all the gifts were treated safely and nicely so no gift were harmed during this presentation just as a little site note so uh thank you very much um we're now here for questions if anybody has questions thank you yeah that's probably so this might be sorry this might be uh the beginning in the weeds a little bit but for example on the uh with the error messaging uh all of us have encountered uh errors that go down page down page you know this this long has there been any thought to you know restricting them and they'd be having it expand over the click so that you don't get lost in the error so so messages history okay so um well even going further in time so before that we uh did a lot of research and one of the goals we we didn't go that far on the explanation of the three parts of the initiative but on the ux part we defined actually um so several things come from there like for example we ideally in the future will have how to save and this kind of thing so a lot of things can happen there and one of them was our goal was to solve mainly um content outdoor uh editors problems all right so very few times an editor is going to see this huge message so that's a main goal so when we actually decided what was the best um design for messages we're taking into account the length of the messages so you as an editor not as a side builder you're not going to see that huge messages we had several proposals where actually the messages could be toggled what's the problem there it's the structure of the data of the messages how what at what point do you actually crowd cut the message three lines four lines at a certain point do you let the system define what's the title because that's one thing that we actually discussed on our ux meeting let's give the messages a title but it's like a lot of messages don't come even from the database or something like that so you won't never have a message as something so it was super difficult to actually define that and where do you cut the messages you define that for desktops then for mobiles then for so we ended up just saying okay these messages right now are they going to have a limit because of course we need that long messages on on for site builders but for content editors right now that's enough it doesn't mean that it can't be improved that's actually one of the points to improve the time so hi there hi i'm just just a short point on that i think actually dealing with the length of the messages is also a task for actually working on the text because we have lots of text ui text that is way too long so the question would rather be to make the text to show that it works but the other question i had because i really like the fact that you want to look into the toolbar as well would that also be the moment to actually rearrange the toolbar because we have some 3.7 legacy still in there like the content page where media items need to live on the content page and other content is under structure so put that the right moment to say okay let's change that as well so um this is also a really long conversation and we already have this conversation so the thing here is that don't touch my drupal is usually a point that a lot of things a lot of people is going to say to you if i'm used to something i don't touch my drupal don't change me the things from where i'm used to get them so yes um some of the conclusions that came from the the study that we made on the ux ux side of the of the initiative is that um you end up with a completely different uh toolbar when you are a content editor and a lot of things are inside the the content tab but then there are some things inside the structure and sometimes some things inside the configuration so yes ideally we should change the information architecture of the toolbar but where do we place that limit are we actually focusing ourselves on site builders which is people that is going to work for one three months two years on a site after that content authors are the ones that are going to live with that drupal site so we're really so one of the proposals was actually having separate menus and have a different role a new role for site for content authors content editors i think we ended up with a name so yeah the thing is that one of the proposals that we were talking is maybe we just move some stuff inside the content tab and then configure differently the other tabs so maybe first thing what the structure what goes inside the structure what goes inside configuration and so on so yes that ideally should happen i don't know when because you don't want to break the also probably in a country module first and then i don't know it's it's on the ideas issue queue if you want is we want to jump in please go into ideas issue queue is um drupal well it's project drupal daja daja ideas so just look for um uh what's the name of the issue don't remember well it's we'll try to find that there so it's uh it's in there already so you jump in and propose anything and get involved if you want to help there great talk uh will uh will it be uh compatible with internet explorer 11 i know i know it's bad but it will still be supported for like six years instead but and uh like uh related to that uh what are the techniques used are the is it already in css grid and css variables or whatever you want to call them do you want like you mean like the new stuff you saw yeah the the new cloud theme is it is it built with a grid for instance it's not built yet so oh it's still to be defined yeah yeah so um yes it's fine so uh claro is in drupal core so it will comply with all the core standards so yes it will be available will it will comply with uh i11 yes um yeah maybe lori can say no about the grids uh well you want to jump in it's not that we are using grids it's just that so about about uh is this about the browser support policy so we have a new browser support policy in 8.8 which drops um uh very old browser like like such as firefox 25 which is probably from 2013 uh which you can install on your most recent mac and uh so we do support the browsers in fact and we do have now a browser support policy that we comply with and uh about the grid we are not using css grid and we're using flexbox instead and we are using the css custom properties but and we use post css for providing a backwards compatibility layer to i11 or a polyfill it's yeah that's what we do and in future when we drop support for i11 we can get rid of that post css plugin and use the css custom properties the way they are supposed to be used so so i know you're using big mouth now for all the design and i see all the activity in big mouth there's a lot of comments and then you're also talking about having a like a style guide that's separate um and i heard that like yesterday tim plunkett was mentioning in his talk about maybe having a different way of integrate better integrating the design process into drupal.org i'm wondering if you have any thoughts about what would be a what what's needed there so are you mentioning uh the report that's our workflow or in general just in general like what's what's missing from the current design process to uh make the work of the design maybe more visible or more integrated with the rest of the so the design system ideally will be completely separated from cladrum and it's not that it it is just for cladrum in theory for the new javascript or let's figure out what's going to happen there but then anything that it's going to touch the aminui in theory is going to follow this um design system the thing is that it will ideally be online and accessible we haven't had this conversation yet so there's an issue uh on it goes on cladrum so now it's going to be on on the core issues about using storybook that was the first idea we really don't know what's going to be the end of that the final solution so we haven't figured it out how to integrate with drupal.org and conversation is going on any more questions so uh focus on accessibility is obviously very important uh color contrast you mentioned specifically but then you also mentioned in the future you're going to give people a tool to change the colors and they may unwittingly break all that hard work and it might not even be done by a conscientious engineer or designer they may have like some CEOs that over them saying make it fit the brand guidelines and are you going to give them any tools to push back against that like like like with password strength where you say this isn't secure enough you could have one saying if you do that you're going to scare people I see you're a little bit um are you following the color issue on ideas I will be in okay there's an issue so there's an issue right now on the ideas issue queue about deprecating the color color module um it's not that we don't want people to change the colors is that probably colors is not the way the way that color the color module is letting you change anything it's not the best way to actually have variations in color for a palette like let's for example let people change the color for the bottom and you have a brand uh policy that says those are my four colors that I want to use right now the color module don't let you just choose between four of them it just gives you the whole spectrum for color so you can have the anything there so yes ideally ideally there should be this tool i'm not sure if based on color or an evolution of that because it's not only us also the new frontend theme olivero is going to use something like that so um um it's going to happen how we still don't know how extensive has your user research been your user testing and so on okay so um there we had several um steps there uh um you want to answer you want okay so um yeah there's several people here that were involved um so we did the first survey uh i think two three hundred people answered the survey so what were the main point pain points on the coven ui after that we did a card sorting uh yes the card sorting uh where we actually were trying to figure out what should be the information architect that we were mentioning before um it turned it turned it out that people were actually answering uh with the same structure that they know right now from Drupal so it really wasn't really useful and after that we made several tests on the current ui to see um what was the the best layout because we had several proposals uh in the past that were close to kutemberg and right now it's not exactly the best way of changing the current new ui so far so um that's more or less what we did so mainly from the survey that's most of the um information that we have good thank you again and we're around just ping us if you have any more questions thank you