How Content Editors Use the Layout Builder: What the User Research Shows

>> SUZANNE DERGACHEVA:  Well, welcome, everyone.  Thanks for coming to MidCamp, and showing up for the session today.  I'm excited to see so many of you in the room.  I think this is more than we would have had if we'd done this in person.

So today I'm just going to share some research I did last year about the Drupal Layout Builder, and how content editors use it, and I'll just walk you through that.  Like Kathryn said if you have questions feel free to shout them out or put them in the chat.  I'd like this to be as interactive as possible.  Just an introduction.  My name is Suzanne Dergacheva.  I'm one of the cofounders of Evolving Web.  We're a Drupal shop in Montreal.  I'm also a board member of the Drupal association and I love teaching Drupal.  I run a Drupal training program and I also love talking about content strategy in UX and sometimes I get to do UX research and combine all these interests, which is always great.  So sometimes I think in the Drupal community we have a focus on technology, on development.  Drupal is a great product but I feel like recently there's been an exciting trend in having more of a focus on UX, and especially the UX for content editors.  I think this is super important because content editors are often the ones really using Drupal most often.  They're maybe the ones selecting Drupal.  They're using it in their day the day jobs.  Some use it all day long.  So if we can do some things to make their experience better and make them more advocates for Drupal, I think that's a win for everyone.

So why the Layout Builder?  I think the Layout Builder was added to Drupal part of this kind of ongoing trend that we have in websites where designers and site owners want to create web pages that are more visual.  If you read any RFP out there for a new website it always includes something about oh, I want my site to be more visual.  I want to integrate the videos better into the layout.  I want to make the website more engaging.  You always hear these words coming up again and again, and often what these words are trying to capture is that content editors and marketers want to have a way to create marketing material online.  They don't want to just publish content that is very text heavy.

So in designs, we often see these types of pages that are very visual, and have these large kind of marketing components or calls to action on them.  And for years, I was kind of calling these landing pages, like, pages that aren't structured content like news or events or publications.  So I call these landing pages, but recently in a call with a client I called them landing pages and they said, well, actually, we think of all of our pages as being like this.

And so I think these pages are getting more and more pervasive, these kind of pages that are meant to really engage with users, and display many different types of messages.

So how do you identify a page like this?  These are some examples I just have up on the screen.

But if we look at pages that don't have a predictable set of fields, pages that tend to aggregate content from elsewhere, pages that really are trying to get users to take a next step, use a call to action, and really tell a story and convince them of something.

And so these types of pages, often you need more than just a standard set of fields.  You need kind of more of a flexible palette of content components, and so this is another trend that we see these days when we're designing websites is that rather than just designing page by page kind of templates, we're always designing patterns, right?  We design pattern libraries.  We think about these granular elements and then these larger content components that make up pages like this one. 

So now content editors and marketers have this expectation that they'll be able to create landing pages, create marketing pages with whatever content management system they're using and they have these expectations because there's all these CMSs out there, like Wix and Squarespace that promises drag and drop interface for building pages so it starts to be something that users expect when they're building a website.  They don't just want a simple form.  They want something much more flexible and visual to build pages with.  So many of you have probably seen already a demo of the Layout Builder, because it's something that has been    that Drush included in the Drush node the last couple years.  You've probably seen this, right.  This is a quick demo of using the Layout Builder to change the layout of a recipe in the umami demo profile of Drupal 8.

It's showing how to add sections, how to place blocks, so this is what we're talking about when we're talking about the Layout Builder.  But one thing that I've noticed is that this demo is usually used in conjunction with, like, creating a layout for    creating a layout for a content type.  So saying, okay, I want all my content    all my recipe content to look like this.

And it's not always done in a way that shows how you would use the Layout Builder to actually create a landing page, and so in this study that we put together, we decided to focus on this use case of actually using the Layout Builder to create individual pages, rather than building up templates.

I think that the template building experience is usually something that a site builder would use, so you decide in advance, okay, all of my content that's an event or an article or a press release or a publication is all going to look like this.

Whereas this page building experience, you're more starting from scratch.  You're starting without any content on the page, and you're actually using the Layout Builder not just to create the layout, but actually to author the content.

So it's using the Layout Builder almost as a replacement for the normal editing, content editing, experience.

So when we decided to start this UX study, we went through this process, so we tried to do some planning before we just dove in.  We decided to focus on the page building experience.  We also wanted to question our assumptions about what is a good experience, so I think sometimes I've heard all of the ads on every podcast I listen to that Squarespace has this easy drag and drop interface with really easy to use tools, and so sometimes we just assume that one experience is easier to use than another.  And the whole purpose of user experience research and actually doing usability testing is to see if that's true and so we wanted to test the Layout Builder but also to compare it against some other experiences.

So we selected paragraphs and the Gutenberg, WordPress Gutenberg interface.  We decided to compare these three to see how content editors reacted to using those three tools to do the same task, to create a landing page.  So we created a whole script, kind of a test plan, which is, like, who you're going to test.  The script, which is the steps you're going to walk them through and then we set up some demo sites.  So we set up a demo site for the Layout Builder, and the really important thing that we did is we didn't just provide the Layout Builder as is.  We did configure it in advance because this was supposed to be a content editor experience, so we didn't just leave the content editors with no configuration to be a bit more realistic.  We created some block types that they could use to create their layout.

We also set up a Drupal site using Paragraphs, which would provide the same kind of building blocks with paragraph type, and then we set up a WordPress site with Gutenberg enabled where they could do the same thing, and we didn't do any configuration with that one.  We just left it as is.

So we created this script that the participants would run through.  We recruited some participants, existing Drupal editors with different levels of experience, and then we conducted the test.  We did all of it on Zoom so it was really easy to do remotely and we recorded those so we could watch them afterwards.  And then we processed all the results, like, we had this big spreadsheet of notes from our videos, which is what actually takes the most time and then doing the write up, there's a blog post there that you can read.

So we did this comparative study, and the scripts that we had was basically telling authors to go and create this landing page.  We had more detailed instructions than that, but that was the gist of it, so this little screen shot that you see here is just a very simple design that we put together, and then we gave this to the users.

We tested everybody using the Layout Builder, and then some of them, we tested also using WordPress, and some of them we also tested using Paragraphs, and we just did that based on how much time we had available for each one.  Some participants took longer than others, so we tested them with as many platforms as we had time.

So the first thing that we did when we showed them the Layout Builder was just ask for their first impressions, and I think this is really useful whenever you're doing usability studies.  A usability study is not necessarily jump into questions and instructions, but to say what do you think?  Here's the UI.  You can learn a lot just from hearing those very first impressions.

So the first impression that users had when they came here was very consistent, it was like:  Where do I create the content?  So the first thing you'll notice in the Layout Builder is that the UI is really showing you that you can create these sections, so you probably can understand, okay, I can build up a layout, but that seems pretty obvious.

But for content editors, they're focused on maybe like the content part and they want to see some of them that first.  They want to see some indication that this is an interface for them, where they can go and add content.  They don't see content anywhere.

And they also notice things like, okay, add section, add block, there's a lot of pluses here so they don't really seem like buttons.  But overwhelmingly they were just looking for:  How do I add content?

Then everyone was able to carry on to the next step, whether they're thinking okay I've added in a sections I've got some layout here, and now I need to go and add blocks.  So if you look over on the right hand side of this page, this appears when you click add block, and then authors are immediately thinking:  Okay, I want to look for the block that I want to add.  I want to look for the content that speaks to me.  And again they're kind of looking for some text that speaks to them, and if you try and put on the mind set of a content editor, a lot of these terms and labels are going to seem like confusing, like revision ID, what's that?  Default revision, default translation, there's a lot of options here and a lot of options that seem like maybe I'm in the wrong place, this isn't for me.

So it took some prompting.  Some of them kind of missed the big link at the top:  Create custom block, which is what we were trying to have content editors do, so we had already set up in advance block types so they could use to create the images and the calls to action so if you vice president used the Layout Builder before and if you haven't used block types before, we use these largely how a lot of [ Inaudible ] use paragraph types, we use them to create those    the different content components that we wanted to have.

So moving on to block link, actually they had not too hard of a time setting up some blocks to create the layout.  So their layout started to look kind of like the page, which was exciting.  And then part of our script was actually asking them to go and edit the layout, so go back into the layout and move some blocks around, or edit the text, and the really nice thing about the Layout Builder is that as soon as you add content to it, it starts to take the form of the page that you're building.  It starts to look like your end product, and the one biggest piece of feedback that we got here was that once you've created the content, the settings, when you go back into edit, are really around    really built more for a site builder audience than an editor audience, so the link here to configure, move, remove block, again those kind of speak more to site builders than content editors so they were kind of looking for an edit link to edit the content they had just set up.

So we compared Paragraphs to the Layout Builder.  We wanted to kind of walk editors through the same process, but using Paragraphs and if you haven't used Paragraphs before, it also is a tool that a lot of people use for creating landing pages or more visual flexible content type pages.  And how you'd do that is instead of setting up the block type, you would set paragraph type and then allow the editor to choose what paragraph types they want to add one after the next to build up the page.  So they're actually using paragraph types to create a customized form like what you see here, because they're picking what type of content goes one after the other.

And so what you can achieve is very similar.  You could build this page with either tool.  I think what content editors found when we did the study is that with Paragraphs, they didn't have to do as much clicking, so they were just able to add each paragraph type to build up their form, and then fill in the fields, and then that was it, so they didn't have as many steps to add the section, add the block, fill in the little form to add the custom block.  It's quite a few clicks to set up the Layout Builder blocks that users wanted to.

So definitely fewer clicks, but less of a visual experience, so it seemed less like a tool for creating a layout, less of a layout oriented experience, and more of a tool for creating content, so the users in our study mostly had Drupal, a fair amount of Drupal experience, so they were definitely finding Paragraphs much faster to use, just the time spent.  But this was their first time seeing Layout Builder, so we also have to take that into account, so Paragraphs was more familiar but they didn't feel as much like this was the tool for creating the real customized layout.

The other thing that we found with Paragraphs is we did allow users to put content into two columns, a two column layout using Paragraphs and generally the content editors found that a bit confusing and hard to figure out.  Some of them needed prompting to figure out that they could actually use the Paragraphs to create the layout itself.

And then finally we also did a comparison with Gutenberg.  For those of you who haven't seen it there's a little screen shot on the right here.  Gutenberg is this tool build into WordPress kind of to replace the editor experience completely.  And it allows you to create these components under most use.  These are some examples of the types of content you can add to Gutenberg.

And so these are actually built in.  You don't have to set that up, do the configuration in advance, like you would have with other Drupal options.  Like, you don't have to set up block types or paragraph types in this case.  These just come out of the box.

So that seems like a nice thing, although, of course, to have a really flexible, more streamlined experience, it might not be    it might not be the options that you want to provide, so there's always pros and cons there.  But just in terms of the user experience for content editors, what we found is that they did like the experience but they found that a lot of the options when they started adding these content components were hidden, so they didn't necessarily see at first how to customize each one to match the design that they were building.

The other thing we found with Gutenberg is that the interface looks really nice, and users just start to assume that this is how their content is going to look on the front end of the site, but when they save the content, they see that the theme on the front end is actually completely different.  So it's a great experience, but it doesn't necessarily give that predictability that content editors really value.

Okay.

So just a couple more things and then I'm going to go to the questions in the chat and other questions.

So in doing this study, it was really fascinating, really gave us a great view of how content editors see this UI, and really the first impression we had was:  Wow, it took them a long time to figure out how to use Layout Builder.  So it really gave me pause as    in planning Drupal projects, and it really made me question is this really the best tool for creating these landing pages?  So there were definitely some things that we learned so first of all, I just want to reflect on what we learned, and then I want to maybe share some advice about how we can use the Layout Builder more effectively.

So one really important thing we learned is that content editors have a specific workflow when they're creating content and it might not always be our workflow as more like site builders or Drupal experts.  So first of all, we found the content editors usually think about creating a layout first, adding the content in, and then coming back in and editing and maybe being able to style their content.

And when I say "style," I mean maybe like change a link into a button so that tends to be how content editors work.

Limiting the options   

>> Can you repeat that step again real quick, the three?  You said layout first?

>> SUZANNE DERGACHEVA:  Layout first, then, like, creating the layout, putting the content in, and then styling, so styling more like:  I want this to look like a button, or I want that image to be, like, full [ Inaudible ] or something.

>> Thank you.

>> SUZANNE DERGACHEVA:  So they're actually thinking about how the content is going to appear as they build it.  They might    they're creating the content, right?  So it's a different process than what we might have.

Limiting the options will definitely make the Layout Builder easier to use.  I think that's clear.  So there is a module for that, to restrict options for, like, when you look at all the blocks, for example.  So that's an easy one.

Editors really like this layout oriented editing experience, and that's something that Paragraphs wasn't built to do, and also doesn't do as well, and doesn't really give that focus on, so when they're editing, they don't have the impression that Paragraphs is for creating columns and things, even if it can be configured to do that.

And so    and another real takeaways, site builders and editors have really different terms they use, they have different terminology they're familiar with, so you are to think about that.  Even if you want to give editors the Layout Builder, you probably want to    they're going to need some training unless we can manage to give editors a completely different set of labels, things like configure, things like add block, these really are going to prevent first time editors from feeling at ease.  So there's going to be a learning curve there.

And the Layout Builder is complex because it's flexible.  It's more flexible than these other options that we compared it to, because it allows us to define these content components, and then it also allows us to put them into really flexible layouts, so Paragraphs doesn't do all of that, and Gutenberg doesn't do all of that, so there is a complexity that comes with that flexibility, so of course, there's going to be trade offs.

In terms of advice for using Layout Builder, so if you are planning to use Layout Builder for this type of use case, what can you do?  The first step is definitely to create block types, these custom block types thoughtfully and carefully like you're designing them for the content, but then you're also designing them for content editors.  These are the tools that content editors are being given so that's the experience you're creating for them.

Using things like entity browser to create more powerful block types that allow the blocks to reference other content, that's going to be a really powerful tool for your content editors.

Using the Layout Builder for selected content types and not just turning it on everywhere, I think that's something you have to put a lot of thought to.  Limiting the options that you have, that you give to content editors is really key.

And yeah, the Layout Builder restrictions module is one way to do that, just turning that on so that users don't see so many choices.

And the last one is I didn't finish my slide here, but terminology is still really site builder oriented, so make sure that you leave enough time to do training for content editors, because it's not like you can just give them this drag and drop tool and they're going to be happy.  They might be happy for a second.  Then they'll be really sad, and then eventually they'll learn.

So giving them that time and the resources they need to learn are going to be really helpful.

So I have some resources I put in the slides.  I'll put these slides up wherever on the MidCamp site, I'll Tweet it out.  And I do    we're doing a bunch of online training.  I do training, Drupal training, so if you have anyone on your team who needs some training we've got these things coming up and I'm going to just look at the chat because we have a couple minutes for questions.

Oh, my goodness, there's a lot of comments.  Everybody open the chat because there's a lot going on there.

>> Yeah.  You did a great job, by the way.  Thank you very much.

>> SUZANNE DERGACHEVA:  Thanks.

Okay, question:  Are there tools that we should be using to make Layout Builder more intuitive?

Yeah, so the restrictions, Layout Builder restrictions module is one, and then the other one to try is Layout Builder UX.  Doesn't do a lot, but it does some things, around maybe there will be more options added to it with time.

I'm looking for other questions.

Yeah, is the UX study available to take a closer look?

So, yeah, I have in the resources here on evolvingweb.ca, there's a blog post that describes it in a lot more detail with a lot more specific findings so you can check that out just to see more about the process and exactly, there's a lot of quotes from the authors.

Anything else?

Yeah, there's a bunch of modules that are mentioned in the chat, so definitely take time to take a look at that, and does anyone else have, like, if you want to turn your mic on, you can also ask questions.

Oh, here's    go ahead.

>> Hi, Suzanne.

>> SUZANNE DERGACHEVA:  Yeah?

>> I have a question regarding the study.  Did you consider also WordPress page builders options, other than Gutenberg?  Like the ones where you can have a yearly subscription?

>> SUZANNE DERGACHEVA:  Yeah, we looked at doing more, but honestly, it's a lot of work to do all the analysis, so we only had time to do the three options.

But I think that other tool page builders I think would be really interesting to redo the study, so I have the script so if anyone wants to do more comparison, I think it could be really interesting.

>> This is Sadia.  Sorry, go ahead.

My question is, as a trainer, what are you planning to change as a result of your findings?  Obviously you said setting terminology that shared amongst everyone or including [ Inaudible ], what else you're changing.

>> SUZANNE DERGACHEVA:  Yeah, so one thing that's really important I think for me is training content editors once you've built the whole thing is nice but I think showing, like, in the site build process, if you actually train a UX team or content editor team earlier on, you'll find out from them kind of what they need by training them, if you know what I mean, so I think just doing training earlier to show people the Layout Builder will kind of help build a better tool for content editors in the long run, if that makes sense.

>> Sadia:  It does, thank you.

>> This is Fredric.  One statement and one question, and again, great job.  One statement is if you haven't explored Drupal Gutenberg, I did do a project with that, and you can create custom block types.  I think the only down side is that all of that data that is saved is basically just saved into the body field, so if you go that route, just know there's not a lot of flexibility on the fields.  It's all just kind of saved into the body field of Drupal, so that's just something else to consider if you go Gutenberg inside of your Drupal set up.

The question I had was around the use of Layout Builder, I guess the repeated use.  So you mentioned, like, training content editors and site builders is better, especially when launching projects.  Have you seen anything in your research in terms of how often those content editors or those site builders come back and reuse the variations in the layout?  Because I've found it's great when you first set it up you're like I have to this cool tool but once the site is launched and it's existed for a while, all the pre working configuration, you know, isn't used as much because they just want to add or update things that have already existed versus creating a lot of layouts a lot of times.

>> SUZANNE DERGACHEVA:  Yeah, I think it really depends on the type of site.  There's some sites where you set it and forget it so you create these great layouts and nobody ever touches them again except to just edit the text content so nobody is changing the layout itself.  I think that's really common.

I think that where Layout Builder is really the most powerful is when you actually do need to create new pages on the fly that are, like, I have a campaign to launch tomorrow, or, like, I have this new demand from a marketing team, and they've actually created the mockup for how this is supposed to look, and I don't have    not going to write HTML or code, so Layout Builder provides such a flexible tool for those use cases.  But it doesn't mean you can't use Layout Builder for the other use cases.  It just might not be used to its fullest.

But what I do find a lot is that editors want to reuse a layout.  So they created a layout and they kind of want to clone it or they've created all these    they've created content, like, not just one block, but, like, several blocks and then they want to reuse a whole set of things, so that's something that could be useful for them, but Layout Builder doesn't magically solve that problem.

>> KATHRYN CARRUTHERS:  Thank you, Suzanne, this is Kathryn.  We're being kicked out of this room at the end of this minute.  So I'd just like to thank everybody for showing up.  The recording and chat will be available reasonably soon on the MidCamp site, so how can we clap?  If you all turn on your microphones and clap, you can   

>> Yay!

[ Applause ]

>> SUZANNE DERGACHEVA:  Thank you, everyone.