 Okay, so, is there only, is there like, only English speaking here, doesn't speak French at all? Okay, only one. Okay, so here's the language. Alright, so how to make content management enjoyable for your customers? Before I start, I present myself. I'm Jean-François Quentin from the company Q1. We are sponsored this year. This is actually the first year we sponsor something, so we're really proud of that. I worked for Q1 for maybe seven years now, and I've been working with Drupal more than ten years ago. I started very early. So, yeah, and we were two in the company. There's the other guy called Christiano, he's my partner, and we're both singers. So I'm doing the front end part, he's doing the back end part, so we work this way. So, why am I doing this? So, when I do my interview with my clients, when I show them the work, I just did, for them, let's say, there's a $30,000 project, and I'm really proud of the work for them, and I want to show them how it works and how to manage their content. I see to them, I teach them how it works, and sometimes they really, really like it. Sometimes they don't. And I wonder how I make these experiences more enjoyable and how they could have fun in their vehicles. So, I have a little disclaimer to do. Everything that I would say today is coming from my own perspective, from my own experiences. So, if you have anything to say during the presentation or maybe after, I have something to share, something that you wish, and you want to add something to my presentation, I'll be glad. This is why we're here. So, I'll be talking about the forms, the Drupal forms, the dashboard, all of the Apollocks, the escalator, the teams, and the layout tools. Some subject will be repeated because a lot of people already talk about interior and everything. I will talk about those things again. It will be kind of trivial because I will just talk about the experience, the perspective of the customer. So, at the end, it's not too technical, there is some code, but not much. So, the lining form, the first thing, it's the very first experience of the customer. They enter this stage, which is two fields, essentially, with a submit button. And I think that if you don't take care of it, it can be really, really rough. And you miss the opportunity to make something really better to provide the wallet link. So, I think you should don't miss your chance. This is the item, it's part of the team. It's essentially always the same team. There is the panel there, the two fields, and got some descriptions. Well, I mean, it's very functional. It works. We get used to those little things. When you work at DuPole, it's always the same thing. So, if we don't ask the question how to make it better. Actually, in UMAMI, the profile that comes with the corner, I think they do their best to make it enjoyable. But at the end, I don't find it really real. It's not super. I mean, if you have to use this form, like every day of your life, or maybe once a week, I mean, it would be nice to have something very well done. So, I look for something that I found really beautiful. And there is this Weight Watcher form. So, it does pretty much the same thing as WordPress. It gets you to a page where they remove all the context of the website. They keep the team, but they remove all the context of the website. And they just focus on the essential things. So, we don't have, like, unnecessarily description under the fields. There is this little hide and show password. The persistent login widget. And you actually have the same links there. You have the sign-in button, the link under the form. It's intelligent to put it there, because if you want to login, you don't necessarily want to create an account. If this is the only way that you have to create an account on the website, I think there is a event problem there. So, yeah, they did it right, I think. And if you want to do this kind of things, there's too much that I think you should use. There's the new password module for the little password name, the little I. But it's only in the core, so don't mind about that. It's going to be here soon. There's the persistent login module as well, which is really easy to implement as well. And if you want to do the little part under the subject button, there's some code following you. You don't have to, but I think it's a really intelligent way to work this form of part. Because if you want to add the sign-in button outside another greeting, that's on the top, like it used to be. And I'm not saying that just because I'm going to be fancy or anything. I think it's an intelligent way to place your elements in this page part. So, if you want to login every day and the sign-in button is super huge, it's kind of redundant for no reason. So, let's say you just want to do the same thing. You go in your team file, dot team, and the line eight and nine. You read the description there. And I would like people to do this. I mean, sure, it's going to be really easy for you. But for those who don't really know how to manage this, I put the code there. I'll just explain it briefly. Okay, so the line eight and nine, you read the description, the unnecessary description. After that, there's the label on the top of the field. I'm going to put it inside the placeholder. So, I'll shoot the function later. I'll just put it there like that. I call it function. And then after the forward password, to make it follow the form, you just have to use the wait attribute. And finally, for the registered button, outside of the form, you just put it in a suffix. And the suffix only requires HTML, so you have to render it first. So, it's really simple to do. And yeah, this is my function. I found maybe on the site where it would work something. Yeah, so that's it if you want to do the same thing. Okay, now I'm logged in, now look. The thing is that you're right in the page like that most of the time. So, there's nothing really going on there. You've been remembered for maybe, I don't know, 20 days. Okay, so this is the information I got. You have this little Mac and Y bar, which can be confusing at first, if you've never used a Jumbal website. So, I don't think it's really interesting. It feels like, and I keep the same thing as the normal. The same analogy of the house. It feels empty. It's an empty entryway. Nothing to put my code on. There's no error. There's no rat form. There's nothing like that. It's really strict. So, it kind of feels strange. And if you let your user going on this page and just say, oh, it's the default behavior in Jumbal, I really, really don't like this answer because most of the time they will say, ah, okay, I mean, it doesn't feel finished. So, I would say that you should redirect the user to somewhere. And we all know about the larger destination. I'll just explain it. Let's say you want to go in the car and they ask you to, let's say, line it first if you want to process it to your chair. So, you just send the user to the login page. You put in the address bar destination and they go like this. So, this redirection is logical and it should be this way. You shouldn't change it. But after that, let's say you just want to login in your website. Should you show it in the front page? I guess that's an idea. But the thing is that you kind of lose an opportunity to do something. I mean, okay, I'm not there. I see the front page. I know it. Okay. And there's still this black and white bar sometimes. They all have access to this bar there. So, they will have maybe access to a little thing up there on the top right. With their name, they'll have to click. I mean, it's not very effective, I think. So, should you redirect them to the structure in the admin content page? Well, yeah, I guess. But it's not very nice and you send them to a team that is right now. It's the team set by default and it's great. It's all, I don't think it's the best solution. So, I think we should use the dashboard. And when we did QA, we made a little module that creates a page that we usually use. So, it's really simple to do. It's just a page. I mean, nothing really fancy there. But still, here's the example that I caused to the SCA. We have a lot of things that we can put in there. So, let's say, okay, sure, we put some user, some recent information about the user. And if he wants to change his password or anything, we put the links there. On the right, we can have call to action as the important things that you want your user to. Let's say, you want him to subscribe or buy a membership or anything like that. I think it's the place to bring your customer to. And by customer, I say the user is going to be in this kind of place. You have your quick links. You can have a list of the last 20 links. There's such a thing in your website. And on the left, you can have other links that you can provide them. So, I think it's a very interesting way to show your user how to use your website. Let's say he wants to create content every time he likes it. Instead of bringing there and playing with the data, I think you should just put some links there. It's going to be really easy for him to work with the interface. It's much more productive and it's understandable. And you can keep it very well. So, I think it's a very good idea. And I'll just show you. Really great how to do this module. Again, I know a lot of you know how to do it. And it's very simple. So, here's the structure of the lab. And you just create a lab with a path. You'll want to change the permission of the content access. Because it's not going to be a good thing. But you have to take care of this. I like to have a tweak template in which you'll have to manage everything. By experience, this page doesn't change a lot. And I understand that I just showed you the example. I could possibly see it, which changed a lot. It wasn't even an example. But most of the little links create a new content. It's always the same. And you can definitely add a tweak file with hard-coded HTML inside of it. And it's going to work really fine for the user. And you'll find it really interesting. I promise you. So, you create your controller. And then you put all the dynamic content in there. And then you send it back to your tweak. Like I did here. I think that's what I just created in the module. And you put your content there. So, it's a very simple version of what I showed you before. You have the name, the email, and the lack of content. And everything's there. I mean, it doesn't need anything else than that. And honestly, every client that I showed this kind of interface, he really loved it. So, I think it's a good idea. And if you don't like custom module like that, you can still have a module with the remote.org, the low-control handling dashboard. It's been released the last few weeks, as long as June and January last year. So, they did a lot. But still, it's working fine. The forms. So, there's this thing from the right form when you're entering in any forms, in any node form on the same interface. So, there's this bar on the right. And there's a lot of things in there. And most of the time, my customers are looking at that. And I understand. They have to pass through a learning curve. They have to understand how Google works and how things are working. So, after that, I mean, after they understand what's in there, if you can remove the non-important stuff or the thing that they never use or you don't even use them in the website as a prototype for a front page, just in the cursor. Yeah. So, if you don't use it, I think you should just remove this function. You just remove this part. You won't see it. And it won't affect anything. Just remove them. The other information, it's really rare that they have to play with that. If they have to, it's all right. It's there and they'll use it. It's perfect. But if they don't use it, it's confusing for them. You are LIS. If you have to add a node on your website, okay, I understand that it's always a good thing to add it to your URL. But most of the time, it's not necessary. Don't take care of it dynamically and it will just work on it. The common settings, it depends on the content type you want to create and the options to be selected. The menu settings, it is nice to have there because you can manage it in other places. So I think you just have to remove this. And the revision part, this part is so confusing for a lot of people. I think none of my clients use it. So I understand that if it's really, really useful for people, they should keep it. But honestly, from my experience, they don't necessarily need it. So just get rid of them. And you can embrace as well the right column. You can put some rid of the field and put them in the right column. So they don't... It's a pollution for your main form. So it's going to shrink the form. It's going to be more concise. And then after, I think it's going to be more principal. Some lines of code. So this is doing what I just showed you here. If you want to put some fields on the right side, it's really simple to just create a module or add this to something else, another existing module. And you just make your field. You take the idea of your field, you assign a group, and you'll just have to create a new group. So the only important thing is that you create a new group attribute here. Or the group, your detail. And set it to events. If you want to set it to events, you will think that it's something else. So people, the team set it below. And this book here, the formulter, this one is for a note add. But you'll have to do it as well for a note add. That's why I put it at the line a little bit. So both functions are important. Again, that would be the way. So there are some things that I like, some things that I don't. I really like the format option here, there. Most of the time, I kind of forward that to explain this feature to my customers. And then when I show it back to them, it's like, I see stars in their eyes and it's like, oh my God, that's a very, very good feature. Because if you do cutting base from, let's say, Word, and there's a lot of pollution that aren't consistent. And the layout is like broken in the busy week and they don't understand why the behavior is a little bit tough. They'll understand because of this feature. So they'll see that there's a lot of things to see. And they have to think it. So this is very useful. And after you have the little TX next to it, which strips the style, always interesting for them. And the source option is, yeah, I think it's interesting, but if you could just remove it from their interface, it would be better because they don't think it's an option to do a decode there. I don't think it is. You should just provide more complex way to manage the reality. They want to do some complex stuff like paragraphs. On the right, you have the styles. So this is a very quick way to do things. You just create your style sheet. You have little styles in your style sheet. Then after in the configuration of the busy week, you just put, let's say, okay, I have a style for the link. I just put it there. It's going to be nice and really quick. But the user, they see that, they don't really understand. There's a weird part about this. They have to click on the link to be able to add a style for the link. And if they click on the paragraph, they won't see the style anymore and they won't understand exactly how it works. I know it's logical for us to understand what's going on there, but for them, it's confusing, really, really confusing. And I don't really appreciate that for a second reason. When you put your style sheet inside the busy week, they will embed the style of the element inside this part here. And sometimes the padding is so huge, it's not very user friendly. So the body field, the label, sorry, not there. If the user actually uses this function, it's really cool, but at the same time, I think there's a problem with this part. It's really interesting because when you want to show the body, you want to display this field, you have the option to show whether it's trimmed or you take it somewhere. So this part is really, really interesting, but if they never use it, I think it's confusing for them this function, they click on it, it makes the field appearing, and yeah, so if you don't use it, just get rid of it. And the part on the bottom, so this part is, for me, it's just pollution because they will see it once and let it say they read it, okay, they understand it, and it's there all the time, it makes the user scroll so much. So I don't really like it personally. If you want to restrict the format for the user, there's a module called Formats, and you just configure it, so it's, let's say, full HTML, something like that, and it's going to be sent for the rest of this part here. I think you should, again, remove it in CSS or something like that. The white concept is also something very confusing for the customer. They only understand why it's there when you're dragging a drag and drop function, so it's not really useful most of the time. Again, it's my personal experiences, but they never use it. You don't have the drag and drop without this length that toggles it, so you can change your value. So would your users require an accessible interface? Yeah, my whole presentation right now doesn't hit with accessibility at all, so if you're trying as a speciality, you should keep everything that is inside the order because it works very well with accessibility, as in when you create a field group, when you create, like, radios, it grabs it inside something like a field set or something, and it's important for accessibility reasons, but you have to keep it back and it's like a pain in the ass but I understand why it's there, but again, if your customer doesn't need it, the tricks I say today is for the people who doesn't need it. Okay, so HTML5, validation. Visual is most of the time a serial for me. Let's say right now I didn't fill out the field, so I want to correct my error, but it scrolls to the field and it doesn't show the label, so I have to scroll a little bit more to show what's going on here, and now I can see it, and sometimes the validation is inside something wrapped in JavaScript and you don't even see this tooltip here, so if you can, I mean, I understand that sometimes the forms are really complex and you don't want to take care of HTML5 validation in JavaScript validation, I mean, you can rely on HTML5 validation, it's fine, but I don't think it's perfect for the usability of the thing. It's much more interesting to use the JavaScript library to do those kind of things. If you can, you should try this. If you can't, it's no problem, but I understand it's kind of annoying for some time, and I heard it a lot that my clients were saying to me, I understand why I have to fill a field, I don't understand what fields I have to edit, and we have to be more comprehensive with these kind of people, so I just tried to find solutions for that. So you can, yeah, you should strip everything inside your form, you can do something a lot more concise. I understand all the right part. I did remove the right column because in my example I didn't need it, but after it I stripped almost the half of the form. So I think it's more concise and more pleasant to work with. So the admin teams also are important for your customers to like their platform. So, yeah, the default is 7, it works very well, we handle it, we get used to the tools, it's really nice, but it's also very great, great white and a little bit of blue and yeah, it's a little nice looking. So if you want to change to something else, there's admin amount, it's kind of the same thing, but maybe more gray. I don't know, I couldn't say. But, yeah, maybe the bar up there is totally gray and not black and white. Anyways, and you have the material admin team. I tried it and honestly I didn't like it. I really love the way that there is a very specific way to think about the design there. There's rules from the material design and there is things. So the thing is that it adds some place. So it's really nice because you have a new team to show to your customer and they're happy because there's a lot of colors, they kind of know a bit the material team because there's the tools of showing some of them. But at the end, if you have to do more clicks to do the same thing, I don't think it's sufficient. So let's say the operation button here, you have to click on it and then select edit instead of just clicking on edit. So, personally I didn't really like it. And there's slide road course. There is a bit of wide space, I see for this example, because those are all the same page that I'm showing. So we see here the part down there. We see like a six line of content and you don't see an icon in Cairo. So there's a bit of improvement to be done but there's a very clear, specific way to manage the design in Cairo. This is the first time the community provides some strict rules and I'm really happy to see it. So it will be the course soon and it's part of a bigger project that will lead to someday a backend, a GS student backend. So, yeah, I'm really looking forward to the future. Okay, so my last part is about the form widgets. It's nothing really fancy and most of you already know this part because a lot of people talk about it. I won't show the paragraph I will do a little demo for the two last option and the two last bullet. The paragraph in my entity form everybody uses it now. So I mean, if you have to know make your specific layout, you just want the customer to fill the forms and it will show in a very specific way. I mean, everybody uses paragraphs. Let's say a lot of people use this paragraph and there's the layout builder that you will be able to learn before. I don't know if it's going to play. I think it will. Yeah, so if some of you haven't seen the tool, a full example of the tool is something she makes and I will comment the thing. So you just have to activate the layout. It's very simple to do and yeah, so you go in your contact app and you just manage the display and you will select the option there. You just want to use the layout builder. You have two options. I just took the first one for the example here. You manage your layout there. So you can do columns, you can do a lot of things. Very interesting things you can format here. It would be really easy but there's still some limits to this interface. You will see it in like a second. So you can choose here on the right column. Maybe the tool isn't done yet. They have to do some more than that. But you know, it would be nice to manage the rate points on the column there. I think it takes the one that you configure in your team which is a very interesting way to do it because it's more dynamic but sometimes you want to manage it more to a more customer way to do it. So it's not very good. So you set your layout there and you have your menu. I didn't do it because I didn't want to take too much time and I didn't want to do that work like most of the presentation today. So this is the layout. And for those of you who haven't seen BitEmber it's a WordPress tool very, very there's a big hype about this tool. It's very interesting to know what you are. I may not like it so much but it's really really nice. Very interesting tool. So you can edit your content and create a content basically. So you set it now on your interface I always like this one. This one is honestly I think it's a very useful tool the only critic that I have is the way you use it. The way it's meant to be embedded in in Google. So you have your basic fields on the right, your titles and everything the things that we all know from any those from the right side. And you have every field that you have. Let's say you have tags, an image or a paragraph from anything it will be shown in the more sense. So the weird part about it is let's say I have a required field in the more settings and I don't feel it I can't say because there's an HTML5 validation out there and it won't but I don't really know why because like I said earlier it won't show it to me. So I mean the tool is great it's great for maybe editing instead of with the way you have this it's amazing if I could use it only for editing let's say the body it would be amazing and then I could go back and forth and continue editing my node I think it would be the best way to implement this but yeah this is my only critic because it's really nice to see you like such you know this kind it's amazing so this is the end of my presentation I'll end it right there because I think we were a little late so let's see if you have some questions