 Hey, welcome everyone. I'm gonna talk today about the admin UX study that I've been working on and hopefully Talk a little bit as well about what content editors want Drupal content editors that is Just to introduce myself. My name is Suzanne Dargacheva and I work at Evolving Web. We're a Drupal agency up in Montreal and I do lots of Drupal things I've been working with Drupal for about 12 years Now this is my 21st Drupal con I Go around teaching teams of people how to use Drupal and I'm on the board of the Drupal Association and I'm going to talk to you today about some of the fun stuff I've been doing with Drupal in terms of UX The passion project for me Obligatory promo I work at an awesome web agency Evolving Web if you like Canada you want to work with us We're always looking for for folks to work with and Yeah, just let me know So about a year ago. I was of course down in Drupal con Nashville and Talking to some some people working on new designs for the admin UI and talking to some other folks in the Drupal community who are really passionate about UX and doing UX research and it seemed like we should put these things together and so We decided okay, we should do some we should do some work here We should launch a UX study for the Drupal admin UI. We should actually do user user research and user Testing to see how content editors and other Administrators are using Drupal and and put that to to good use since a new admin UI was in the works for for Drupal 8 and A lot of you probably heard about this admin UI initiative, right? You've been hearing about this this thing coming down the line Very exciting so So we decided we had to do something we have to do some kind of a study But when you're doing UX, it's it's important to ask the right questions So it's one thing to just go out there and do all the research You know you can get really excited about about user experience and for those of you who have done user experience work before You'll know that there's lots of techniques that you can use you can go and do Surveys you can do card sorts you can get people to scribble things on on sticky notes and put them up on walls You can go and actually test users and watch them you can gather data in all kinds of ways But before you start you should really ask some questions about what problems you're trying to solve And I'd like to say that we did this perfectly and we asked all the right questions I don't think we did the first time we necessarily met but This is sort of what what we've gathered over the last over the last year So in starting out a UX project like ideally at the beginning you start to ask You know what are the business goals? We're trying to solve and what do the users what do the users want? And what's the overlap between the two and then how can we create great experiences that are strategic and actually? Make users happy and and achieve the goals So it's interesting with Drupal because of course Drupal's an open-source project And we usually think about business goals as being like business goals like goals that businesses have but Drupal has Business goals as well, right? So so one of the first questions to ask is kind of like what are what are we trying to achieve with Drupal? What are we trying to facilitate? Like what's the point of making a better admin UI? Like why why do we even want that? and there's lots of reasons of course because Drupal's used for lots of things and And and so, you know, you might want a better admin UI for Drupal You might want Drupal to look better when you Log in and edit content just because you want someone to select Drupal So some of you maybe hands up if you've ever created a demo for Ever had to do a client demo or you've ever showed somebody the Drupal admin UI like hey look This is this Drupal thing. I'm working on this is what it looks like to edit a node, right? So sometimes you're trying to convince them someone that Drupal's great and then you you're showing them the admin UI You just want to impress them and I know sometimes I've done this and then I kind of go in and with my inspect tools and Change the change the CSS or hide things to make it look to make it look nicer just to just to take a great screenshot Come on some of you have done this Sometimes you want to help organizations adopt Drupal. So this is always a big challenge, right? Some of you probably work I know some of you work for like higher ed Some of you work for large large enterprises and you don't just have one content editor to convince You actually want a whole team of people to edit content and you want to convince them that Drupal's great and like oh, yeah Let's let's adopt it for more and more of our projects. So that's another another reason Another goal we're trying to achieve We want Drupal to be a genuinely good tool for editing different kinds of content. So structured content We want it to be easy for people to go in and edit edit content That's like traditional Drupal content like you know news and events and courses and publications and stuff like that And then we also want Drupal to be a good tool for editing marketing style content So I know I know I've heard a lot about other content management tools out there like Wordpress and The work they're doing to try and make it easier to create kind of marketing landing pages And so we're kind of competing with that and we want to provide great tools for for creating For marketers for digital marketers We also want to build powerful functionality with Drupal So we want to enable that through the admin interface and some people are using Drupal as a content hub right, so anyone here using Drupal is like a back-end for Anyone here like want to use Drupal as a back-end and build some fancy Gatsby stuff on the front-end. Yeah, this is like the cool new thing So it'd be great if if Drupal If Drupal was good at that, you know if Drupal was a good tool as a as a back-end And when content editors are editing content and then it's going to be published somewhere else It would be nice if that was an intuitive experience as well So there's all these goals and a lot of them are overlapping But that's sort of what we're trying to achieve and some of these you know, maybe maybe we need to prioritize them, right? But that's kind of where we're headed At the same time users have goals too So we're trying to build build Drupal for it for users, but there's not just one user So I'm kind of talking about content editors and I've already said that that's that's kind of the the Target here, but there's all kinds of other editors in Drupal, right? There's the the content editors, but there's also sighted men people with a bit more expertise Who are able to configure Drupal? There's developers who use the Drupal admin UI too and then the evaluators who are maybe just looking at it from Looking at it during a demo. So different different types of users and who are we actually building Drupal for? and I would argue that over the years of Over the many years of Drupal development most of the focus has been more on the Developers and maybe the sighted men's right so like Drupal's a tool built by developers and a lot of developers are using it and If if you're thinking about the experience of the admin UI You're kind of thinking of your own experience and the challenge here is that the admin UI for Drupal as a developer It's the exact same UI that you get as a content editor Except that as a content editor you might have fewer permissions and more restrictions on what you can do Right, so it's a an interface that we're really familiar with as developers that we're trying to make Easier for these other other types of users and so that's why we decided As a group as a UX study to focus on content editors and to help them with the things that are the most Their top priority so the things that they're doing like, you know, just previewing publishing content using a content approval workflow Using images reusing images Translating content all these types of tasks like how can we make that experience really great and focus on the content editor's needs? And this is this challenge that I'm speaking to that content editor experience has overlapped with site site administrator experience and site building and developing the whole website so Saying that we're going to launch UX study like I said, there's many research techniques we can employ Lots of lots of different things we can do we could spend years on this, right? There's there's so many so many ways to gather information about what users want and and how they're currently using Drupal so one of the easiest things to do as As a UX research technique is to do is to launch a survey And so that's a good place to start to just gather information about how current users are are using are using a Drupal and We we started with that So we launched a survey asked a bunch of questions just about tasks that tasks that users are doing tasks that content editors are doing and We tried to do this to figure out what users wanted and we got back a few clear answers and Some of these things like the modern UI trees talked to you this morning a Refresh kind of look that really modernizes the the admin UI that message came back loud and clear Simplifying some of the complexity was another one better media management Something else that you've seen is already already progressed a lot in the last year improvements to the whizzy big editor and things like auto save and then another thing that came through loud and clear was that a Lot of content editors found that the interface was just too complex and they needed something that was simplified So that was the survey we did also a card sort anyone here has done a card sort before this is sort of where you figure out Tasks that users have to do how they logically group them together and we did this and found that actually the way that the Navigation and the admin UI is currently structured really reflects how content editors are thinking about How their tasks are organized so the result here is maybe not so interesting because it basically says yeah We're doing the right thing the way we currently organized the back end of the the way we currently organized the administration Menu makes sense So then we launched into a more in-depth some more in-depth UX techniques And we launched a comparative usability testing study and the reason that we did a comparative testing Is because it's a lot of work to to create new wireframes and at this time There are new wireframes being developed for the new admin UI for Drupal 8 And we thought oh we could test those wireframes But you know what should the wireframes be exactly it wasn't super well defined And so doing a comparative study of some existing content management systems other than Drupal kind of gathering some ideas seemed like an easy way to Get get some feedback from users about things that work and things that don't work in terms of the admin UI so the setup was was to create some sample content that users could start with an article and run through a script of You know go ahead and create this content using a content management system set up a draft add some Styling and then Give us your impressions and we ran through this script using for content management system none of which was Drupal So we were just looking at like what do other content management systems? How do they how do they work how do users interact with them? What are things that work? Well, what are things that we want to avoid? And this is to inform the design process for for Drupal So we use for a contentful WordPress with with Gutenberg, which you might have heard of the new Editing tool for WordPress Squarespace and craft CMS so all of these we picked them because they're they're fairly different the UI that's provided And so it was a enough variety to get some some good ideas We looked at Content editing so We we found some specific things. I'll give you I'll give you a little bit of information about each one But kind of go through quickly so one thing that Contentful has in the editing UI is that they don't have a whizzy wig editor like we do in Drupal there's a an editor for creating markdown and And you content editors did find this a little off-putting. I think some developers might prefer this this interface But it did kind of It was kind of hard for content editors to use We also noticed that the labels were really important. So for example with with contentful There were a couple labels on description and body fields that didn't seem to quite make sense to users So for for a developer, you know, you might realize that a label is just a label But for a content editor, they were really confused by just subtle differences in in the field field labels and the on the right here, this is a craft CMS and Crafts CMS has a UI with little buttons at the bottom for adding different kinds of components content components to the page Kind of similar to what we have in Drupal if you install the paragraphs module and people found this really intuitive We also yeah, we also did this we also studied how people are using Gutenberg So you might have heard of WordPress Gutenberg has anyone heard of this? It got a lot of it got a lot of press negative and positive And and people really genuinely loved this interface people got really excited like oh You can add things and they instantly look great on the page Has this instant preview quality that I think goes over really well But what we found was that when people were trying to achieve a certain goal like trying to get something to look a certain way Trying to add an image in a certain place You know, it's pretty it's pretty It can be pretty limiting actually the the interface and while it looks great when you create it The the content editors were assuming that what looks great in this instant preview on the back end Actually would would look the same on the front end and that's that's just not the case. So with with Gutenberg You're not actually Editing with a live preview. You're editing in an interface that makes your content look a certain way And then when you actually go to publish that content, it'll use whatever theme You have installed on the front end of your site. So well, it's a great editing experience. It's not necessarily the most Predictable experience. So that predictability was really something that Content editors were value valuing I as a Kind of well, I wouldn't call myself a designer But when I when I have to design things, I always assume that simplicity is really important And one thing we noticed with this this interface This is from Squarespace is that the interface for adding content components in Squarespace has this really simple little plus button at the bottom You see that button plus button way down on the lower right hand corner Yeah, so the content editors in our study didn't find that either and the fact that it doesn't have a label is kind of convenient So one thing we are struggling with in Drupal always is like what do we call things? Do we call things blocks? Do we call things paragraphs? Do we call things components? Do we call things sections? There's all these names for things and all the good names are taken And so I'm I'm always like well, why do we have to have a name? Let's just put a plus symbol Which doesn't work so well for accessibility and apparently it doesn't work so well just for being able to find the thing so Again labels are really important Preview is another important aspect of content editing even in a really simple workflow And one thing that we found that worked really well was the see the cross-CMF interface for preview So this is a side-by-side style of preview where you have a form on the left a preview on the right and kind of a In this case really like an instant preview where you see what it's going to look like as you're editing and people found this really intuitive So it was definitely something that That was successful in this in the study publication workflow is a challenge so If you're having to go and take content and draft it and get it published and maybe go through approvals And then maybe create another draft or delete content archive it this can be kind of complicated to communicate through a through a an interface and There what I noticed in the study was that there was a lot of anxiety around it like content editors were always concerned in Wanting to make sure that their content was actually saved so it was concerned that they were going to lose their content and and and so getting this interface right seemed like a really important thing and One thing we noticed is that putting all the buttons together having kind of a single place where you can manage the status and Update the status was important. So just that proximity was important and The users in the study seem to find work the WordPress UI, which is the one on the right Easier to use so it kind of puts everything in one spot in the top right-hand corner I'd say that one of the clearest messages we can't we got in the in our research was that users love auto-save Which is something I think that has been a long-standing Feature request in the Drupal issue queue. There is a node open for this feature and So we definitely heard that loud and clear confirmed that users love auto-save. They'd love to hit save They love to make sure their content is saved and be reassured that yes, you know It's not going to be lost when you're clicking away So we we took all this data and we had some takeaways One one big thing that we learned was that Users were not didn't necessarily prioritize simplicity above all else I think sometimes in design we want to design the simplest thing but these content editors They were all experienced content editors and they they Understood that to have more functionality and more complexity in terms of the content model You'd need to have some more complexity in the UI So they weren't necessarily looking for the simplest possible interface But they wanted it to be as complex as needed for the for the content for the task at hand Editors really like a interface that speaks to them that has terminology that speaks to them So the the contentful interface There were a few things about it that were pretty technical like some technical language when the users were first logging in and that Definitely was something that caused it anxiety. So having Just some cues in there that this interface is designed for content editors Really made a big difference Editors do want to be able to see and edit html. This is what they want as a site builder This is usually like what I do not want So I say maybe this is a little bit at odds with With business goals in some cases But just that was something that a lot of them brought up and kind of assuming that in with the Particularly with the WordPress editor a lot of content editors said they assume They would be able to edit the html which kind of got my heart racing a bit Editors want to know the status of their content They want to be reassured that they that they know that content is saved and they know if it's published or not And that that totally makes sense. Maybe it's kind of obvious, but it's a big priority for them So this was one one study we did and we kind of had some takeaways We had kind of some takeaways from that and one of the takeaways was that we should design a content editor role that this would enable us to design an interface that worked a little bit better for content editors and Also encourage site builders to design for the content editor right to restrict permissions for content editors So that they're not overwhelmed with too much too too many options And so we launched a survey Actually for site builders to ask what kind of content editor role they would You know default content editor role in Drupal they would want And what would help them and so we we got some results from that and basically the results were yes content editor role out of the box in Drupal would be great and No a content editor shouldn't be able to do too much just edit content that came across loud and clear and Having some kind of content manager role. We had ambiguous results. So the first step We're kind of suggesting that content editor role is sufficient So what what's next there's some short-term improvements that kind of came out of the the study so far Creating the content editor role setting up autosave a few other a few other Smaller things and then one big thing modernizing the admin UI Which you heard about this morning And this is exciting because it's a project that's underway that Christina who's in the crowd there has a hard at work at with some other designers in the community and There's a design actually Built out quite built out and that's being in the process of you know Transforming seven into a new theme called Clara. Very exciting that this is actually underway So but there's some other there's some other next steps so other next steps is Kind of defining a little bit more what kind of problem we want to solve in terms of Content editing UI like are we building a content editing UI that's supposed to be best for structured content or more flexible? kind of landing page style content or both and so one of my next steps as part of the the UX study is doing a second stage of Comparative testing looking more at creating Content beyond just articles, but actually you know How do how would a content editor create a landing page and kind of running through a similar process? Comparing other content management systems, but also Drupal So also looking like how do how would someone create this with the the layout builder? Or how would someone create this with paragraphs and what works what works best and what can we learn from that? There's also some admin UI wireframes, which I'll just show very very briefly So there will eventually be a more redesigned Admin UI for Drupal 8 that goes beyond just refreshing the look and feel and actually change the UX So that's another project in the future There's work to be done also for to improve the UX for Site admins and site builders and developers so going beyond just what content editors can do like how can we make? the experience better for other types of users and I already have lots of ideas about that But user testing has not has not been done So some takeaways We've done a bunch of research now. It's been a it's been a year we did some studies we did some user testing and Doing both was really valuable. So it's really valuable to have data I think a lot of people in the Drupal community, you know, they're developers. They love looking at results But doing the qualitative research and getting that feedback from actual users watching them use use Content management systems watching them use Drupal. This is really valuable and in terms of Improving the UX of an open-source project. I think we can look a lot at the I Think we can get a lot done by making iterative improvements So just saying oh we have to redesign the whole thing the whole experience This is hard to get done in an open-source community where you have to rally volunteers to do things so iterative solutions making Small improvements like adding a content editor role. This seems like it's going to be easier to to get done so these improvements or these suggestions are kind of easier to pass on to To teams who are actually going to implement the changes Okay, so I know you're all excited now. I showed you a bunch of UX study stuff and some of you are like Really want to get into UX and you want to help out? I can just tell I can sense the energy in the room Nervous laughter. Yeah Talking to you. I'm talking to you. So if you want to get involved This is a great way to get involved if you're not necessarily someone who wants to learn how to write code or Or contribute in that way if you want to contribute by running usability tests or by participating in a test We have ways for you to get involved. So this Friday at the contributions print We're going to be working on some testing and running some tests. So if you'd like to get involved There's a going to be a an admin UI table there. I hope there's like a couple tables actually and we're going to be running some testing so there's a Survey link you can sign up for there the bitly link To participate in testing either on Friday or later on By a video conference and we do have a slack channel on the Drupal slack admin UI And we have meetings on Wednesdays and you can get involved doing working on the UX testing But also as a front-end developer because the Clara project is looking for front-end developers So if that's your thing then please please please get in touch with us. Oh Yes, and thank you to Christina who's here and Antonella for helping with this project and to all of you future Contributor who are going to help out I have an obligatory slide in here to promote some trainings. I'm doing but I'm going to skip that and You should evaluate this session on Go by going to that link. So thank you all for coming And I think I have 90 I have 90 sec 90 seconds left for quick Questions people who are quick on their feet or who have comment Anyone anyone? Yes Come up to the mic This may not be in 90 second question But just wondering how do you account for the fact that the experience of a content editor with Drupal depends so heavily On the builder and the admin of the site and how they've structured Yeah, so part of the challenge is Providing the right tools for site builders to create like encouraging them to create experience a better experience for content editors. It's definitely part of the challenge and So that that goes along with like if the now that layout builders in in core and You know, how can we make sure that that experience is good because it is a core thing And then also if people start people are obviously using paragraphs for everything. So how do you? Make that interface maybe better Just some ideas. Yeah Kind of building on that question Do you have any resources you would recommend to give to developers that are working on building the interface like that? I have a whole I have a whole slide deck. I can I'm gonna send you there's so many things you can do To test but basically yeah creating good good labels for all of your content types and your fields is a good place to start Limiting permissions that content editors have actually testing just taking the time to test yourself in a simple way Watching like as you're doing training for site editors watching them and then Mahina Justin based on what they do There's a lot of modules you can add to provide like better widgets and things for certain types of fields