 I'm saying this is a UX feedback session that we're doing today. My name is Suzanne Degacheva, and I work at Evolving Web, a Drupal agency in Montreal. I do a lot of Drupal trainings. I'm on the board of the Drupal Association, and in general, I love doing Drupal. I've been doing it for many years. And I also just mentioned I work with a really fun team in Montreal, so if anyone wants to move to Canada, yes, we are hiring. So for the last few days, I've been hanging out in the Netherlands. I've done a lot of cycling here. For those of you who live here, I'm very impressed with your cycling infrastructure. I have a few UX-related observations. First of all, I love the signage for cyclists. I love those little triangles that tell you who is supposed to yield to who. I've never seen this before. It's a great experience cycling around. I love the little baskets for your litter and your trash, so it really gamifies picking up garbage. I think this is a great user experience. On the negative side, I'm still not sure what to do when I bike up to one of these buttons, and I don't know if every time I hit it, I feel like I keep hitting it and nothing happens. So some of them are going to have to explain this to me. But overall, great UX experience so far. Recently I've been doing a lot of UX work, running UX workshops with clients, doing research, and even doing a bit of contribution in the Drupal community, doing some user studies on how people use different parts of the Drupal admin UI, which has been really fun. And I find that a lot of times on projects, there is no person in charge of UX. So even though UX has become more and more important over the years, I think we see it more and more as a requirement for projects, it's still something that's not always the biggest priority. And I think sometimes it's hard for developers, you know, for the ones doing the build, if we're the ones working on the project, or if we're the UI designers and we've put already energy into a project, sometimes it's hard to listen to UX feedback and so we don't ask. So sometimes it's because we don't have time, or sometimes it's because we don't have, you know, a budget for that, but sometimes I think those are just excuses and we just don't want to ask for the feedback. And I think that part of the problem too is that when we ask for feedback, sometimes all we get is this like long list of things to do and it's not always the most constructive or useful. So what I'm going to talk about today is actually a technique for asking for feedback and giving feedback. And I'm just going to talk about it for a short time and then we're actually going to practice it and we're going to give UX feedback on a couple of projects, a couple of interfaces. So this technique that I'm talking about, it's very simple. Whether you're a designer, developer, project manager, or end user, whether you're the one giving feedback or the one receiving the feedback, you can use this. So you can actually use this technique in client reviews or internal demos. We actually use it as part of a regular meetup that we run where anybody can come and present an interface and get feedback on whatever they're working on. So if you are interested in running similar meetups, I would love to talk to you about it and share my experiences. So these are just some photos of the meetups. So it all starts with a demo or a walkthrough. That's kind of step zero in the process. The purpose of the demo when you're asking for feedback is to show. So if you're trying to solicit feedback from someone, I see a lot of demos where there's a lot of talking and explaining going on. And when you're asking for feedback, it's better to show what you're working on and not taking time to explain or kind of defend. And a lot of times when you're a developer presenting something you've worked on, you've already put a lot of time into it. So the instinct is to say, oh, yeah, but it's not quite finished yet. Or, yeah, it's supposed to work like this. It's better to set the scene by talking about maybe what the user is trying to achieve with your interface to give that context. But long explanations and narratives tend to kind of bias the type of feedback you get. Then after the demo, when people are actually giving the feedback, I find it really useful to give this feedback in three rounds. So step two is after the demo, the feedback givers, the audience today that's going to be all of you, you start with a round of descriptive keywords. And this is the part that people usually leave out. This is really key to set the scene. So when you first see an interface, you know, you're brand new, you're having an experience for the first time, before you start giving positive feedback or negative feedback, before you start using a lot of adjectives to describe what you see, it's really useful to take this time to just give a neutral kind of description, a few words that describe what you've seen. And the purpose is that it helps us as the audience kind of understand what we've seen without jumping into those positives and negatives and really set the scene, set the context. And it helps us put ourselves into the shoes of the user. So think about that. So if you're working on a project, you know, your developer is presenting something, you're trying to give feedback, think first about like, what is this interface for? Let's just, let's try and describe it before we start criticizing or praising. So the next phase is the easy one, positive feedback. It's fun to give positive feedback. This seems like kind of an obvious one. But the truth is that it's really important to take time to give positive feedback first. As soon as you've given a significant amount of positive feedback, you feel much more comfortable giving the critical feedback, the negative feedback, the more useful kind of questioning and poking at things. So positive feedback first is super important. It's also good to get those thoughts flowing about an interface. So taking that time to give positive feedback, getting more enthusiasm. And then of course, whoever is presenting this interface needs to hear that positive feedback too, because they put a lot of work in, they need that positive reinforcement to keep their energy going. And then the last step, this is the really valuable stuff, the critical feedback. So critical feedback can take many forms. So it's not just saying, I don't like this, this doesn't work, this sucks. We don't have to just say critical feedback in this way. A lot of critical feedback can be pulling in examples from other interfaces. We can ask questions. So one of the best forms of critical feedback is somebody demos a product or an interface to you and you ask them questions like, oh, is it supposed to do this or does it work like that? Or did you think about adding this feature? Asking those questions can be the most useful thing. And unlike user testing where all the feedback you're collecting, it sort of feels more scientific with user testing. You know, you're testing with actual real users. In a feedback session like this, where you're getting feedback maybe from your peers, your colleagues, or just random people that gathered in a room to see an interface, the people giving the feedback aren't necessarily your users. And they haven't used the interface necessarily themselves. They're watching a demo. So all the critical feedback you take, if you're the one collecting the feedback, you have to take it all with a big grain of salt and put it through the filter of, are these criticisms, are these suggestions actually going to help my users? And so the most important thing for the feedback taker to do is to actually take notes and listen. So this is the hardest part. So if you're implementing this kind of feedback technique and you're asking for feedback in this way, a lot of times when you're doing this demo, it becomes a conversation where you ask for feedback, people say, oh, I don't like this. You should change that color. This is not accessible and it becomes a debate or an argument or a conversation. And it's much more useful to just listen to all the feedback, record it all, and then go through it in a rational way and kind of see, does this make sense for my product? Does this make sense for my users? What is the most important feedback to implement? OK, so demo time. So I promised a UX feedback session. So we're going to do two demos. I'm going to start with one where I'm actually going to do a demo of an interface that you might have seen before. You might have some feedback on. And then Sasha is going to come up and do a second demo. So we have, I hope, time for two demos today. And then if you want, you can give feedback on this feedback session, which is going to be super meta. OK, so usually I get other people up here to do the demos, but I had a lack of volunteers today, so I'm doing this demo myself. OK, so probably most of you have been to Drupal.org, but I'm guessing that a lot of you have never been to the community section. The community section is a relatively new section of Drupal.org, and its audience is new users, people who are maybe new to the community. They're new to Drupal, and maybe they're looking for help or support, and they've heard that Drupal, like, you come for the code, stay for the community. So they've come to this page. And maybe I'm someone in the community, and I'm looking for help with a problem. Like, I've started to install and use Drupal, but I'm having trouble learning it on my own, and I'm trying to get over that famous Drupal learning curve. So I come here, I see there's community groups. I look around, trying to figure out some of the terminology. Maybe I think, oh, yeah, like an event could be useful. Non-profit Drupal, maybe my website is for a non-profit organization, so maybe I'm going to start looking at that link. If I open it up, it kind of takes me to this other section. I keep scrolling down the page. I want help installing Drupal. There's a lot of links here. I want to connect with members of the Drupal community. That seems kind of relevant to what I want to do. And I keep scrolling down, and can't find what you're looking for. So maybe that's me. It's more links. So I see some recent posts, so maybe that's going to be interesting to help me kind of get some context for what this is for. And then there's other blogs and things. So maybe I'll open up the community blog and start to read through that. OK, so I'm looking for more information about some specific way to get involved. And I think the most relevant thing is probably this section here. I want to connect with members of the Drupal community. So I start to dig into these links. So that's the demo. So then it's useful when you're doing a demo to actually ask for the specific feedback that you want, maybe, like what aspects of this interface could use the most input. So I think there's clearly a lot of links here. So I want feedback on what content do you think would be most useful to the users of this page and how that content could be maybe better prioritized. But any input on how this could be better or what could be valuable here would be useful. OK, so I've got these two boxes, which are apparently microphones, so if you're lucky enough to be down on the ground floor, you can grab a microphone. And the first round of feedback that we're going to give on this community page is about just what you saw. So neutral words to describe what I've just demoed. So who wants to start? Hands up. Can I speak to this? OK, so I saw a list of various groups of people, kind of how the community is organized in different ways. And I also saw some Q&A type of details elements or accordion to answer like probably most common questions of like for people who are looking for ways to contribute or participate in the community. OK, great. Who else? He did too, got a job. Oh, there's someone. He said, I saw a lot of links and a lot of text. Anyone else? I think I saw you were unsure what you're looking for. Anything else? Keywords you would use to describe this page. Yes, over there. OK, if you're not familiar, that's hard to understand what it means. So that's starting to get into negative feedback. So once you hear some negative feedback, you know it's a sign that maybe it's been well described. So we thought we heard in terms of the first round of feedback, there's a lot of links, a lot of information. It's something for the community. OK, so let's move on actually to the positive feedback. So what do we like about this page? What are positive things? What are things that you think this interface does well? I like that you were talking to the user, like find your place. So the language was direct to them. Another positive feedback. Hands up. Yes, Laura? So I like the fact that there was kind of call to action if you didn't find yet what you wanted. So there was a way to provide feedback and ask questions in the end. Joseph? I like that. I think I saw the sections that described what I'm looking for in a certain situation. So I think it's helpful that I kind of read the context where I'm in myself. So, yeah, like I want to help get help installing Drupal. I want to contribute. So it's kind of directly speaks to myself. OK, so from the first person, that's great. OK, we need a couple more positive feedback. Who else hasn't spoken yet? There in the green. It doesn't get very technical when you get on the website. It isn't solely for developers. It's also for other people. So if you go a little bit up, you'll see other communities you can participate in. It's not only for developers. Yes, in the front row. I like that you could flip open and close the boxes so you don't go to another page and then to another page. So you stay on the same page. Anything else? I can't see super well. Put your hands way up. Yes, over here. The content standpoint, I like that when you click on community and the navigation, you come to the page and it states right at the top what the philosophy is of the community. And then quickly, you see the different community groups. And if there's not something there that you want, you can go to groups Drupal work. So I think as a user from the navigation standpoint, this is delivering on what I would expect to see from the navigation. OK, great. So I can tell everyone's bursting with critical feedback that they want to unleash. So that's the whole point. So now we can open it up to questions, suggestions, critical feedback, things that you wish could be better. And I'm going to take notes and watch the recording later. Yes. OK, sorry for my English. Can you please scroll down to find your place? OK, so I'd like if you open one group, open please. Yes, and open another group. So I'd like if you open one, we close which was opened before. Right. George. It'd be cool if it had a contextual search at the top. I want to dot, dot, dot, you type it in and it would just bring it to where it was. Plus, there's a reference to groups.druple.org and I'm not exactly sure how current that is. If anyone still uses that or not. That's very positive negative feedback, George. Anyone else? Yes, Laurie? Just kind of thinking of myself when I started contributing to something and if I would have seen this as the first thing, I don't really know if it would have helped me in any way to participate because of like, I don't think any of these things really was what I wanted to do. I kind of just wanted to go to an event and like learn about Drupal more. Like, I would feel that there's a lot of information being given to me that I don't know what it means. Like, for example, the first group that I see is community working group. It's like, what is that? Is that something I have to know about? And if I'm really new to the community, maybe it's not really something you have to understand at that point as the first thing. So I feel like that there's probably, like, I feel like this is structured in a way, which is like the way that people who are very familiar with the community would think about this rather than from the point of view of someone who is really new to the community and just have to learn the very basics at first. So I think there's a lot of great information here, but I think the audience is probably a little bit different than what we are targeting here. I would say if the user isn't a technical person, they could use something that was maybe used on commercial sites like for feedback, like some sort of dialogue box, like a chat box, where you can leave a question. If you don't find what you're looking for on that page, you know, just give your email address and a question and somebody can get back to you later on. There's no interaction with the person coming to the page and not immediate anyway. I mean, it's similar to your search thing, like, you know, what are you doing on the page, like, search for Sansa's answer? Malip? Well, there's a lot of text on there, but the problem is that I can't build a mental model, how it's actually organized. So there's a community behind RuPaul. When I'm new to that, I don't even know that. So I need to have, like, an image or something how to visualize what actually happens here. So that would be, this one would be the next page for me as a new one. I do like the text itself. I do like the content which is on there, which makes a lot of sense given that you're a RuPaul person already. You see that it's up to date. You see that there is, like, Slack mentioned and so forth. You have the stack exchange links. Everything is fine. But for somebody who's coming new to this and wants to get involved with the community, it would probably make more sense to have, like, the next most recent event that is coming up, like a DrupalCon, like a camp, like something close to you, or what's the fastest way to get in contact. And that would be something like a chat to open up directly and just not, like, force people into some sign up ways or force them to figure out where they have to go for themselves. Great. Okay. One more feedback right there. Just behind you. Thank you. There's a lot of text on the page, which is, like, okay, because that's what it's meant to do, but I think the line length is quite long. Like, I found my eyes was zigzagging quite a lot to read it because it was taken up the full width of the page. So a max width on, like, the paragraph or something would make the line length more comfortable and maybe encourage people to, like, actually read everything on there rather than get tired. Okay. Amazing. Thank you for all the feedback. That's super useful. I'll give yourselves a round of applause. You just did some great consulting work there for the Drupal Association, maybe. Okay, so we're gonna do second demo. You wanna come up here? Sasha. So next demo, Sasha's gonna show us some work that he's been doing. Yes, so I wanted to share with you some of the work we did on the Admin UI. So basically beyond Clara, we're also working on new stuff. My name is Sasha Ekenberger. I work on the Drupal Admin UI and JavaScript Modernization Initiative and in the past couple of weeks, I started to basically on wireframes or, well, they're more than wireframes now, but just like what will be next for the Admin UI beyond Clara, basically. So there's a big warning on that. So the screens I will show you now, basically just a handful of people have seen them. So not a lot, part of the community has seen this. So basically, I think it's less than five people. So this is really, really highly work in progress. So basically, these are things we came along when we designed Clara, things we had in mind or things we wanna change for the future. And I quickly wanna show you one of the screens and give like, or getting like feedback, a first feedback on what you think about it. So just to give you like a quick intro why I wanna show you this. So basically, this is how the layout currently looks like. So this is a stripped down or like a wireframe of Clara. We have all the regions as you know them. So we have like the settings and the node form and we have a toolbar and everything here. But when we designed Clara, basically we restricted ourself to taking seven and make it more like a refresh with the newly crafted design system. But we won't stop there. So basically we want to do a lot of more changes in the future. And for that we need to change the layout a bit. So basically this is where this comes in. So we have, or potentially could have a new toolbar and the toolbar lives on the left side on the screen or on the right side if you're an RTL user. So this would be the toolbar on the left. Then we have a new cyber region because there isn't any cyber region now. So we would have to create that. This would be for settings but currently we only have like this settings sidebar but it's not a real one in the node edit form. But this could also be potentially be used in other regions throughout the UI in general. So this would be the cyber on the right. And one thing Christina and I came around quite a lot is and like one of the things I struggled the most with in Drupal is the safe button in the node edit form. So basically if you use the node edit form with paragraphs and you have them all expanded you always have to scroll a lot or like a very long time until you reach the safe button and you can save your change but maybe your change is at the first two content pieces. So this would be like a proposal to have like a sticky bar where you could have like a basically like a call to action which could also be always in the context of your UI you're looking at. So in this example like a safe button so you always have it on hand to do your action. And I just did quickly basically like adapting the design system we crafted into the wireframes you saw. So this was done like in the last couple of days just to show you basically how this potentially could look like. And I'm really looking forward to your feedback as I said so almost nobody saw this yet. So it's really like you're the first one who see this and I think we also have a lot of things in mind which isn't showcased yet on this particular design and also there is a lot of work to be done. And yeah, I'm just looking forward for your feedback and the second part of the feedback which will be really valuable for us would also be what are the most pain points for you in the current UI? So basically that we can gather all the feedback of what's your pain point with the current UI that we can basically improve these parts as well for the next generation UI. Okay, so Sasha's gonna stay here while we give feedback. I guess the cubes are still out there. So the first thing we need is a summary of what we just saw. Where are the cubes? So yeah, we saw a general admin UI that's pretty recognizable these days. Oh, sorry, is it hereable? So you have the standard sidebar that you see a lot. General descriptions, I'm trying to think of more. There were some more hands down here. You wanna toss the ball down? I saw a transformation from a wire frame to a change depicted in the actual edit screen of moving the save button from the far right corner to closer to the edit space. It's very precise. Isabel. For me, it looks familiar. Like, if you already use it through ball, you will not get lost. But the changes that I see is like, thank you. Like, we miss it that point. Maybe there are, I mean, it's not a big change, but they are very useful I think. Okay, any other descriptors? Yes? I see clearly admin toolbar, first edit section, and secondary edit section, and a call to action. Added second call to action, yeah. I could also see that their toolbar on the left side is expandable and collapsible. And there's a more action select link on the top right side of the page. And there's presumably a more link next to that. Okay, let's go to some positive feedback. What do you like about what you see? I want some new people who hasn't said anything yet. Actually, there will be positive and suggest one suggest. Just stick to the positive for now. You can come back to the negative later. I just suggest, no, not negative. Okay, okay, so I really like the position of safe button because I'm really hating where it is now, but this, I really like, so. Who else? Right there behind you, some. It's a clean design and more modern. You have a very clear separation of concerns, so it's very clear what part is for actions, what part is content editing, what part is saving. So I like that it's very structured and very clear that's separation of how to use it. Over here in the blue, oh. You get a nice reorganization of elements that are needed and the bringing out of elements, you know, bringing them up out of the depths, so to speak. The save button and the preview button and the publish is a nice reorganization without completely estranging what came before. Antonella? Oh, you are. Okay. Who else has got positive feedback? Oh, way back there. Someone can throw that far. Yeah, I just wanted to say, I really like it. I think it's a really customer facing initiative here as well. And we can see, I mean, the example Sasha just showed this is something that I can imagine that some of the others really struggle and that's just a really positive thing. So overall, I really like it. Thanks you. Okay, we're ready. So more critical feedback suggestions. Okay, okay, okay. Okay. You could do your, it was mid-throw, so I think Laurie can give us positive feedback first, sorry. So something that I like is that the layers are very clearly visible, which also helps separate the different groups of things. So for example, the content on the left is one layer and we could have additional layers on that region as well. Layers. Okay, kick off the criticisms and the suggestions. You wanna hear them? Yes, if we're talking not just about save and preview buttons, actually I really hate the sidebar with settings, menus setting, you understand. It's really too difficult to me to find some fields here and actually I'm in shock when they're appearing meta text with one million buttons. So my suggestion is to put search button, search field like we have on the filter field, like we have on modules or user permissions. So it will help to find information, few fields we really need. Okay, a filter for finding the fields. Okay, great. In the red back there. Okay, so this all looks great, but one of the first things is like, I think it's not too brave maybe because it all looks familiar, but as the one guy said, the settings sidebar, I don't think we are using it every time we edit a node. So maybe it could be like collapsible with some button on the top bar. And the top bar looks great. It would be great if we could add some field over there. Like in content moderation, we have some states of the node published. So if we would have that possibility to add some fields there, it would be great. Thank you. Okay, people next to you. Somebody who hasn't said something yet. I've said something positive, something negative, but not necessarily negative, but it's a lot like WordPress. So what we've been saying some people, it's very familiar, which is not a bad thing, but WordPress is very simple and Drupal backend is very complex. So what I'm not seeing in here is the central bit with the content. This is very simple, but I have maybe in my career of 13 years, maybe seen four sites that are this simple. So the center part, I'm not seeing a way to group content or to handle different kinds of fields. It's just one content field, but that never happens with the central part of a Drupal site. So I think that's the most important part you need to focus on and the filtering is one way to solve it, but the middle part is the most complex part of it and that gets the least attention in this wireframe. Okay, a couple more people. I wouldn't put a view and a preview option on the same page. They seem kind of redundant. I really think that delete should be a button and not a tab and that somehow renders the whole bar optional. Okay, and I think we have time for two very quick comments. To me, it's not clear if you changed the published field, whether it happened immediately or you need to save after. Because I think the grouping in that top bar obviously save and preview will happen immediately. So you think publish would as well, but does it? Anyway. And in red, I don't see, here. Yeah. I also thought when I saw it about the WordPress, I think it looks too similar. I would do something more unique, something more, or yeah, something, not a clone. And the save and the preview as well in the above, also I found it a bit strange because I don't know, I think it's a bit weird save and then you put that data. So I think I would put it down after the fields. Okay, thanks everyone for your feedback. That was great. And I see a team of people here who have been contributing to this. So I'm sure your feedback was very helpful. Yes, if you want to contribute more, people should come, right? Yes, just a side note. So this was just one screen we have more to share. Come on Wednesday, 9 a.m. in room Q103. So, thank you. And thanks everyone for coming today. I hope this was helpful. I hope you can take this and go implement something similar in your own UX processes. And if you want to talk more about UX with me and get ideas for starting a meetup like this, come talk to me, I'd love to chat. I just put a bunch of stuff together.