A Better Experience for Content Editors / DrupalCon North America 2021

can i start yep perfect hello and welcome to a better experience for content editors my name is sasha eckenberger i'm a senior ux designer at unic based in zurich switzerland and i'm in the drobo community for over eight years now i'm one of the lead designers of the drupal design system in claro and i'm also the creator of the admin the chin admin theme so um you can find me at sasha ek on twitter drupal.org and everything social and yeah let's get started so this is the agenda for today first i will talk a bit about the interface then which modules can help you improving the experience for content editors then we have a section where i want to talk about quick wins things you can easily adapt to your sites and make a huge impact for content editors what's next for chin claro and so on and finally some key takeaways from this session today so let's talk about the interface this is a quote where i came across a lot in like on the internet but also in meetups uh more front-end oriented meetups like cheyes meetups and so on um a lot of people ask me like oh does it still exist referring to drupal or it's ugly or it's complicated or it looks and feels outdated but i think in the keynote today we already showed you that we're on a good path to solve this issue with claro as well with an accessibility first theme as clarity is and a lot of the things which goes into claro and beyond the stable release but today um for the interface we will focus on the chin admin theme which you also heard in the keynote and how this theme can make an impact for content editors and your whole overall experience in general so this is how chin looks like as you can see out of the box it uses quite a different experience or like it has a toolbar on the left we have like certain pieces of content like the filters and the uh the note overview here like the list of content or on different sections uh we have a top section which has if you go here you can see like the sidebar which is highlighted like the vertical navigation approach we have sticky actions so we always have like this clear call to actions on on each administration interface page and if we go to the node edit form this is basically the heart of the chin admin theme so this is the most important part of chin and this is also where it most sends out in comparison to all other themes so as you can see here um we have like a top bar which is like a sticky action bar so like the save preview published and like all the state's content editor needs um are always sticky and on hand so when we did some research and some interviews with content editors um you know like the single most requested feature was that the safe and preview button are always on hand because if you build let's say like a page with paragraphs and you have a lot of them with previews and it's a very long note edit form um and they just want to change some small stuff on the notes they have to scroll down to the ends to save it and that's not really a good ux pattern um next up we have like this region like this content region which also looks like a content region and it's inspired um by you know like word process processors like word google docs and so on so you have like this white paper view in the middle of the screen where all your content belongs then we have a sidebar and this time it also looks like a cyborg it's attached to the right and you have all the things you already know from the sidebar in there it's just like visually nicer pair to the end of the screen so um chin has a lot of settings um i think we hit some boundaries here with you know like providing you with settings you can change the accent color so blue is the default but you can go whatever color you like so we have a preset of colors which should all be accessible but if you click on the white at the end we might want to change that at some point you can set up your own accent color um you know to appeal more to your branding for example you can also change the focus color um which is like this green outlined line which you know from from claro and in chin you basically can change that if you like to and we also have like an increased contrast mode like a high contrast mode which is experimental um this needs a lot of work and another like a lot of love in the future but it's also already there as an experimental feature if you don't like the vertical navigation approach qin has you know has it covered you can also use this more modern horizontal toolbar uh which is this single line toolbar or you could also go with the i call it legacy toolbar or like the classic toolbar as you know it as it is today um so we have like three different toolbar options um as mentioned in the keynote we also have a dark mode this is also experimental but it also works quite nicely with a lot of modules already so there might some bugs there might some modules which aren't fully supported yet um but i think like a lot of modules work already quite nice with this um now talking about high contrast mode and and you know like the accent color maybe also like the toolbar options these are all user preferences right so chin has this um a nice feature where we basically you can allow users to override certain settings so you can set dark mode for your user but not for the general user you can set increased contrast for your user or you can also set another accent color if you don't like blue or if you just have other requirements so you can basically override all the settings from chin with for all the different users so some branding examples just from some certain projects we which are basically like life um so this is a multi-vendor marketplace uh for safety equipment and as you can see the back end is branded uh you know like for for the suppress brand um that was easily done just like upload the logo to the chin settings and set the the main color or like the main branding color set the toolbar style and your go you know you're done and it already looks quite integrated to their ci cd with just you know some simple steps and some clicks in the backend let's skip that so this is another example as you can see here we have red as the main color we have the logo on the top left and you can even further improve that if you use for example the chin login which is uh you know like a module which is or basically like the main goal was if you if you're running a headless site to provide the content that is a nice login and all the chin settings also apply to this login form so you have the same logo you have the same branding colors and everything appear here so it's it's nicely integrated in the whole system um you can download chin at drupal.org slash project plus gin um yeah you can already download it and install it it works already well you can support the development you can contribute in the issue queue please test it and you know like please create issues if you found any issues and if you feel so you can also buy me a beer and support the work at the other link you see um this is a slide i just added five minutes ago because there was a question in the keynote as well chin has the problem with paragraphs if the drag handles fixed and back ported up to drupal 8.8 so if you use chain you don't need to patch core anymore good moving to the helpful module section so to improve the user experience um and also like keep in mind this is not a final list these are just some example modules i usually like to use um so it's rather a small collection of modules and not like a final list um but i think we all agree that the admin toolbar module is a must-have um it provides some sub-modules or um like it it provides sub-menus um for you know like the top level menu points um it also has like the admin toolbar extras toolbar sub module which you can enable which provides you even more sub sub module uh sub menus and it's just way easier for content editors to navigate through the drupal ui when they have like sub items the next thing is coffee even through the admin toolbar has a quick search feature as well now um i still rely to coffee most of the time just because it's very nicely integrated with chin and you can quickly search for what you need so if you're not so familiar with the ui especially in the beginning if you onboard new content additives this can be very handy to find the features you look for the field group module is also one of the modules which every drupal site you use you can group related content together so you can clean up basically the clutter in the ui um it's a very powerful module it's very easy to use and you can chunk basically your content into pieces and make it more appealing to the content editors so media library this is already here in core you just need to enable it it provides your its own widget which nicely integrates um in the whole drupal ui and um there's basically no need anymore for media entity browser drop zone js there are a lot of different widgets available as i like it especially if you use the patch uh which is you know like on the left side as you can see which basically provides content added as a drag and drop functionality in the add or select media overlay so this is a very nice feature which was very often required by like our content editors of of sites we we create for you know like for companies um so that's definitely something you should check out as well um layout paragraphs can also enhance um just like it's a field plug-in for paragraphs it's basically the bridge between layout builder and paragraphs but you can basically build in the normal node edit form your own layouts and have a drag and drop functionality for paragraphs so it's quite handy um but it's not for all type of users because you need to have like a visual flair to create pages but you have if you have those content editors this can make a very uh great differentiation the inline entity form um is also quite handy if you need to you know if you have like a content type which uh you know relates to other content types or you want to include parts of it or build up relations to other entities this can make a very powerful differentiation in terms of you know like directly inline editing other nodes or other content pieces well that leads to the entity browser which has also like a preview functionality instead of just using like a normal reference field this can also make a visual differentiation and you can also style it nicely so that uh for example like person teaser look nice in the back end and you can already see that that you know it's it's a person you're referencing to or what like every other content type and of course chin login just as a supplemental module just for this seamless experience and as i mentioned before if you if you don't plan to use the login in the front end for for you know like the customers users and if you have a headless site then this module provides you a very nice login and integrates nicely with chin the newest addition to this list was the was chin layout builder uh jin lb this module um so this helps with integrating the layout builder nicely within chin and you know like also that it works with all the customization options of chin you can check that out at chin underscore lb here are some more helpful modules autosave is very a very good feature which helps also like this anxiety of searching the safe button um content lock is one of one good example responsive preview if you have a you know like a driven environment where you want to have like a responsive preview for content you're creating this is a very nice module as well um if you want to go another route and use gutenberg instead of paragraphs then gutenberg and gene gutenberg have you covered um and yeah as i mentioned before like this list is just like not the ending it's just like some modules which are very very good options to improve your experience good let's talk about some quick wins so how can we improve the experience for content editors with the least amount of effort you know because small things can make a huge difference sometimes right so for example this is something i come across very often when i see drupal sites people don't like to create custom admin views um for example in in the example you can see here uh we created a view for persons uh to list all the diff like the content type persons uh that you have an overview of all the persons and also show a picture um you know like of each individual so you can better recognize all the different people which are listed there this can be implemented very easy um in you know in the view like in the views section um and can make a very big impact for content editors i think this is the best quick queen you can use is use ajax for admin views to just make it more appeal modern like the whole drupal interface you can just check on all admin pages uh in in you know for its views they use ajax button um and it instantly feels way more quicker and more interactive for the content editor to use the ui group elements together with the field group module so you know as you can see here you can use tabs horizontal tabs you can use vertical tabs you can use accordions field sets custom elements you can use all kind of elements with the field group module to group things together and also to clean up the ui for content editors and make it more appealing to them field descriptions this is a board tool we have but i often see a lot of fields which might not be um you know like that clear to the content editor what they need to put in so here we have the metric system sorry folks um but if you would put the the height in in meters or centimeters or whatever uh you know like measurement you wouldn't know that if you don't put like a description and this leads to the next one sorry um also to use like suffix and prefixes for fields um so the content editor really knows what he like what the system wants for an information from him so this is really really like to get a clear context what the system expects um for the ck editor um you should use the ck editor css feature um so you can provide all the front and styling for the ck editor in the back end and without that you don't have the real what you see is what you get experience at all so in your frontend theme you can use or you can add these two lines secure editor on this underscore style sheets and add the the destination to the style um clear the cache and then your your your frontend styles uh will appear in in the visibility editor like in the ck editor if you want to do adjustments or changes to the to the chin theme you can also add like the chin dash custom css file you can place that in your public folder and so there is basically no need for a sub theme if you just have some small adjustments you want to do to chin um if you want to do like template uh overrides or whatever then of course you would have to create a sub theme but if it's just minor stylings things you want to add then basically you can use the ching custom css feature if your site is using paragraphs and a lot of sites are just use the icon feature of paragraphs for content editors so it's way easier for them to recognize which which paragraph they add to a content type if they have like this uh like if they have a meaningful icon of course icon needs to be meaningful otherwise it's just like um you know um an item which which doesn't have any meaning and and this is not really a good ui again but if you have meaningful icons this can also make a big impact for the user um use the experimental widgets in paragraphs um especially in chin um there is this new styling if you use the experimental plugin of paragraphs so the whole drag-and-drop experience is a bit different than than usual you can try it out in just switching to the experimental field plugin and paragraphs previews so if you set up your content type and your paragraphs field you can also say to use a preview of the paragraph in the experimental widget um you can inject your own css file in the backend and do some styling improvements and then you already have like a nicely visual overview of different paragraph types in the backend which is also not a lot of work but can also make a huge difference if you use layout paragraphs the module which we had a look at before then you basically have like the rendering of the actual paragraph in the backend so you have the the real preview from the front end as mentioned before this is really cool but it also uses a lot of space so always be aware that it's more effort to implement and it might not be worth it for everybody but if you have more visual appealing content editors it's it's uh it's worth it i did put together a small repo so at this url you can download a small instance of drupal 9 running with gin and you know like a lot of the modules you saw and already a bit configured so you can use that as a reference or as a starting point if you want to have a look at that so let's have a brief outlook what's next so most of this stuff uh i listed here you already saw in the keynote but maybe just as a repetition uh this one for sure you didn't saw it um uh chin is currently in an alpha state um other modules would already have a better release or maybe an rc release at this state but we want to make things perfect so this is the better one roadmap there are some issues which need review or need work and yeah i hope that we can release a better one as soon as possible then the most important issue i want to mention that once again is getting cleros stable without having cleros table we can also not provide china stable because you know like chin relies on claro as a base beam so getting claro stable is very important and also uh later today you can help us with uh you know with this task to review some open tickets or work on some tickets that we can move on to get clarostable the content editor role also mentioned in the keynote this is a crucial piece for content editors in the future so if we have a dedicated role for them we can also customize some features specifically for content editors because currently a lot of features are very agnostic to building sites and not managing sites and this will be a key part of changing that experience for content editors and of course the same story here the content creation menu proposal if you haven't heard of that or didn't have a look at it go to this issue we need feedback on our proposal because this will also be a key part of improving the experience for content editors in the future and making the life easier for them especially and yeah i also created this ticket um yeah if we if we think um this should be in core as well as default uh there is one issue we would have to need work on to make this happen but yeah there is also a ticket for that to make the a checks for views as default for the admin pages good so let's let's round it up like the free learnings or key takeaways from this talk uh from today i think we cannot say that um you know like enough but side building is very crucial i think the site builder has a very important role in your organization or like the site builders depending on the size of your organization um because we have to embrace basically what these people are doing because the site builder is in charge of building a great user experience for content editors and the second thing is don't overdo it like you know like the the modules and grouping elements together is great um but always keep in mind when building a site or when you do site building on your site like would you would you like to use it yourself um is it something you you're proud of and and which is very clear to certain person to use it um if you don't know how to use it then for certain the content that you won't know it either and as a summary the experience is king so a good user experience will help with adoption so that's why the first point was you know like that that site builders are crucial um because basically they're also functioning as ux experts at some point um because if you're building a site which content address editors don't like or don't love uh to edit their content in or managing their content in the adaption of drupal will also not take on you know because this is very crucial how you build the sites is how the content editors will perceive drupal and also will help in the future with the adaption of drupal that's it thank you very much so any questions thank you sasha there were uh several questions that people were pointing uh posting in the q a section uh i don't know if you can look over in there sure i'll sort that for popular questions so um josh uh wait it just changed so enrique asked does the moderation states from the workflow module draft peer review publish be included at the top of the edition form of a note in the ctr region of the form um currently it stays in the sidebar in in the right region uh but yeah this is for sure something we could think on working on um but yeah as it is as of now it's in the sniper available on the right side um the second question is from josh you showed off a custom login page for chin can you also create it a default landing page after login such as i want to tell users about updates expected downtime etc um currently that's not possible no but we could create a module which basically empowers that feature jacob asks are customizations possible for different environments to serve as another option for environment indicator um yeah you could do that with the chin custom css file as it's in the public folder and not in your you know like in your version history at least currently not you could provide overrides um for environments but you can also use the environment indicator module uh which also helps you you know like providing this functionality um then there is another question are there issues projects out there to blend current oops current disconnect between node add and layout builder um yeah as i mentioned for claro there is the claro underscore lb module and for chin there is the chin on the square lb module which basically provides to connect the dots between the admin theme and layout builder but as mentioned in the keynote this might change over time as you know like first in claro we will improve how layout builder is integrated and next up will be a chin as well so the next question is do i need to do anything to get chin to support layout paragraphs i just tried tried it and my content paragraphs are no longer nesting underneath the layer paragraphs um no you you can or the only thing you need is to configure layout paragraphs the module itself um you can have free floating paragraphs you can have paragraphs in in you know like in layouts but from a chin perspective there is no or like zero configuration needed um there's so many questions um so i would just keep on going if they chop the video they do but hopefully we can get some extra in all right um key difference between chin and claro that's a good question um so the difference is uh chin is a contrib project um like everybody can contribute to like claro is in core of course um but chin um like the main goal of chin is to improve like the experience around content editing and but also chin provides or serves as an ideation platform for clara as well just because of persons are interconnected between these two projects chin is based on the foundation of claro uh so you know and we already backported some of the features from chin back to claro as well so there is always discussions about things we want or might want to include in the future in claro as well but chin might just be at the edge when it comes to features of course um there is another question do you have good code example with layout paragraphs i wasn't able to make it work properly i see it usable for simpler use cases only um and no as in as in chronologist translations yes asynchronous translations are basically like an open ticket for that uh in the issue queue for layout paragraphs but i can also provide you with uh you know like the basic configuration of layout paragraphs in the uh you know like in the repo uh which i shared like a link to so this demo repo i can quickly set that up and you know like update the repo so you have an example um chin only works with drupal 9 no jin works with drupal 8.8 onwards so it's feature complete from drupal 8.8 until 9.2 so yeah triple 8.8 and newer is is available um those chain works with sightstudio cms to be honest i don't know side studio cms so i cannot tell you uh for that question sorry good um do you recommend any distributions that combine chin and some of these modules and configuration out of the box there are a lot of distributions which are currently working to integrate chin so that the first distribution was open social to adapt chin there was also the first sponsor of the project which helps the project going on um i know that there are a lot of other distributions uh currently uh evaluating to to use chin as their default backhand theme um and yeah but i cannot recommend you any distribution because it depends on your use case right distributions always have like a different use case and depending on that you will choose your distribution good do we have other questions does chin login integrate well with tfa module um it should but give it a try and if it doesn't then create an issue in the the chin login issue queue um are all these examples and tools for drupal 8 and 9 yes like all the modules i showed should be compatible with drupal 8 and 9 so which also will help you with upgrading from eight to nine if you would you know like like to start using one or the other module um so yeah that should also be possible what percentage of clara goes into chin that's a very good question uh the other way around how many percentage of chin goes into clara would also be a nice question um but yeah so like the whole um foundation um as i mentioned is is based on on clara it's also based on the same design system right uh because uh you know that's that's quite obvious but just like the whole layout and the approach of having the different toolbars and so on is is is quite different uh from chin to claro especially if you're in the node edit form you will recognize it constantly that we're talking about something completely different here but you will always see that you know like chin comes from claro or inherits a lot of the styling like the focus ring on content elements a lot of the accessibility improvements and so on so they're quite interconnected at this point good i hope i didn't forget any question otherwise maybe just write it in the chat quickly so can maybe also answer a question from there and if there aren't any questions anymore then i want to thank you again that you joined this session and yeah if you have further question you can also ping me on the drupal chat or on twitter or drupal.org of course and thank you sasha i think you fit quite a bit in there good job cool thanks a lot you

Channel: Drupal Association

Views: 301

Rating: 4.7142859 out of 5

Keywords: drupalcon, drupal

Id: mi78p6CxMuQ

Length: 36min 51sec (2211 seconds)

Published: Fri May 28 2021