 Hi everyone, thanks for coming. My name's Lewis Neiman. I'm a designer and a front-end developer I work for wonder crowd, but I actually work from the UK office, and we're called wonder root in case that confuses you I've been working on Drupal core for maybe two or three years I haven't really done much else apart from that in Contrib because I'm not really a module developer I am I actually don't have full project access to create full country projects in Drupal at all. Yeah, it's a little bit embarrassing. Maybe I don't know and I Also, I also worked a little bit on Drupal at all. I contributed to the Drupal 7 upgrade and a few other things But this presentation is about Drupal and how we design the experience of using Drupal Now Drupal is designed to be a very flexible and powerful tool But with that flexibility You kind of lose some expectations of how it's supposed to be used and who's using it and you kind of you sacrifice some control over the user experience And I kind of want to talk about the problems that we face when we design a product like Drupal That's open source and built by a community and I want to talk about how we are solving those problems in Drupal So what do we do when we try and design an experience and how do we know when we're successful? It's it's difficult because an experience is really how you feel. It's not. Um, it's not easy to measure But um, you know when it's bad you can you can sense that you can taste it kind of like food And it's it's more than just being just having something that's possible and understandable and even usable Because if you think about everything you've done in your life is possible, but it's not necessarily enjoyable There are some things in life that you do That are very painful But you still do them. I don't know if this image translates over very well to the American audience Is that an equivalent of a terrible? Airline network here Spirit, okay. It's good. Good advice to me so a bad user experience can make us feel very frustrated and quite helpless and Unsure of our own abilities and humans can get very overwhelmed very easily and instead of blaming the tools that they have in front of them They just tend to blame themselves So there are certain factors that can affect the experience of using Drupal especially when you do when you're designing the the user interface One factor is intimidation I see it very easy to feel that when looking at something without touching it that it feels very complicated and you can feel out of your depth and You can feel like you just don't have the skills to to complete the task in front of you Inconsistency is another problem If you expect something to happen and then something else completely different happens unexpected you You tend to become very unsure of your actions. You tend to become very unsure of what you're doing You lose a lot of confidence in yourself instead of losing confidence in the tools and Another problem is with every feature and every function that we add to our products We increase the chances of inconsistency and we increase complexity So why is user experience important to Drupal? Well, number one is the clients because they're the ones that pay us to be here And they're the ones that pay to help develop and use Drupal And in the long run if clients have to live with something that they're not happy with then it builds up a lot of negative emotions and It's not just for the solution that they're using It's you know negative emotions about Drupal and negative emotions about the people who put them in that situation And and the thing is that people talk people talk about Drupal They talk about Drupal behind its back and we know this because Drupal doesn't have a very strong reputation for being usable products But as well as clients We have to think about site builders because at one point before we became developers and we got to know Drupal a little bit better We're all just site builders at one point just clicking around Trying to add things using the interface And when you are a beginner you don't necessarily want an expert's tool. You want to have a simple tool Something that you can just get through and just get it working to complete the basic tasks And you don't want to have to learn every single every single intricate part of the system when you're starting out You want just enough to get by and sometimes the problem is that Drupal Enough to get by feels a little bit like this Which is you know, it's it's a problem because every Every site builder or every potential developer that we lose because of a bad experience We're losing someone who can help make Drupal better So these bad experiences They reflect badly on us. I think as a community and Drupal has a reputation of requiring a special knowledge and special skills Which is a shame because it feels quite exclusive from the outside But we all know being here and I know that Drupal is a very inclusive and very friendly community So I hope in some way that we've Agreed or we agree with each other ux is in some way important to Drupal and by improving the user experience It will make a big impact on Drupal's future So who is responsible for the ux of Drupal? Is it designers? Core developers Contrib module developers or site builders Yes it's not a It's not a question. It is all of us everyone is Everyone is responsible for the end users experience The designers they can identify usability problems and they can run research studies and they can define new conventions Core developers can and try not to laugh They can build the framework that's usable and extendable by others Contrib developers use and extend that framework and that's a really important point because there is no Drupal install Well, maybe there's one or two But there aren't many Drupal installs that are run without Contrib modules and the way they affect the user interface affects their experience and Site builders they have the ultimate responsibility because they plug all these let Lego blocks together and they build the final product that the client uses So they have that final responsibility But it doesn't stop there because the client is in the position to feedback from their perspective And we can use that feedback to provide new insights and improve Drupal even further So so the good news is that Drupal's UX is progressing it is getting better Well, the problem is that as the UX progresses the expectations also start to move ahead of us So we're always trying to catch up So let's look a little bit about how Drupal's core experience has evolved over the past few years So this is Drupal 6 out of the box. It didn't have an admin theme It didn't have a persistent navigation And it was quite tricky to use without knowing the right cocktail of contra modules to install To make it usable which is tough if you're new because you might not even know what a module is or how to install it Drupal 7 was a big step forward Had its first dedicated admin theme Which means we could really shape and tweak the the way we use Drupal from an admin's point of view So that was a big step forward And in Drupal 8 we've taken that and we've moved it on even further And I'm going to come back and talk about the work we've done in Drupal 8 But I also want to talk about Drupal's contrib experience and how How the contrib modules affect the experience of using Drupal as well So so this is panels It's it's an interesting Design I suppose because it reuses a lot of components already exist within Drupal core You can see where it defines the context over there near the top It has the name of the context and it has some buttons that you press that goes in a table by default Pretty much all the data we have in Drupal gets displayed into a table. That's just a default option and there's no We haven't really explored a lot of opportunities to find the correct ways to display different kinds of information Larry. Yes Is it? Oh Is there any is an AV guy here you think so you get to enjoy the dog pictures why I try and sort this out Same oh So there any different I've got them all on this on this screen here. Oh That would I if I drag it over will that help oh Here oh Thanks, I Didn't expect to have to learn this right now This is a pain and has everyone here use panels. Can they use their imagination? I? think It might just be better for me to try and Try and describe and maybe if make every guy turns up and he can help me out so So imagine the panels interface what you actually have along the top is a row of tabs Horizontally and with under them you have another row of tabs and I think at the top of the page you have some tabs anyway, it's a It's a bit of a confusing interface and along the side you have them vertical tabs And you actually have vertical tabs within vertical tabs within vertical tabs now I think the concept of vertical tabs got introduced At some point in D7 it was very exciting But I think the point I'm trying to make is that components that exist already in core can be misused or they can be abused in Certain ways because we don't provide the right guidance So this isn't really a knock on the people who develop Panels it's really like there's a problem there that we don't provide the right guidance for contra developers Still kind of washed out. So this is rules if they've used rules. I'll describe it to you and very powerful very flexible module But it is really just one big form. It's really kind of undesigned. There's not a lot of it There's not a lot of theming going on there Which is a you know it's a bit of a shame But also it's a lot of work to try and design something from scratch So maybe there are different ways maybe in Drupal 8 The Drupal 8 version of rules where we can we can help and try and improve the design and Views I want you know, I hope hopefully you've all used views It's a good example because technically right now it's in Drupal 8 It's in core But it feels different to every other page and every other interface in core because it defines its own UI Conventions and they don't get used anywhere else So when you're using views you have to learn all these new new UI conventions that you wouldn't use anywhere else on the system So it's a problem because we don't have that many designers who contribute to Drupal So we don't have the ability to pair up designers with contra developers to help them get to give them advice and help them Improve the UI. We just don't have the manpower. So that's one big problem. I Also wanted to quickly talk about the UX improvements we've made in Drupal 8 so we introduced and redesigned a brand new toolbar that allows you to drill in to the menu tree and It helps you get around the interface a lot quicker But also it's been designed with Moa devices in mind so you can navigate the admin interface on a Moa device really easily We've added a filter on the module page to allow you to find the modules that you want to modify or enable really quickly which is a which is a great improvement because The amount of time you spend scrolling around to try and search for the modules We probably saved months of people's lives for every developer We've also redesigned the content creation page. You can see well, maybe you can't see sorry. Oh Thanks, you can see along the left-hand side. We have all the essential fields for the content type They're they're all in one column and then the non essential Information about the node is on the right hand side and it's optional So you can get straight through the essential stuff and the other stuff doesn't get in your way It's a much better experience We also have a WYSIWYG a WYSIWYG in core, which is amazing I think the first time I did this presentation It was just a non-drupal people and they're like why is that amazing, but they don't understand So, I mean it is actually it is actually really good because It is not just CK that's a dumped into core and the spark team have actually spent a lot of time Tweaking the plug-ins what you can do you can add images And you can add a basic link and you can align images and that's really nice to have that Configuration out of the box because it's the kind of stuff you have to do for almost every client. So it's really nice We've also added the quick edit module, which allows you to well as content creators to To find the content that they want to edit and they can edit it right there and then they don't have to Change pages. They don't have to change context. They can see what they want to edit But they can see what they want to edit they can change it and they can hit save and it's done, which is I mean as controversial as that might be It is a big improvement because it just it just removes another step and another barrier. So In a similar way to we there in a similar way that we make design changes to Contrib modules and we also make it in the same way for core We kind of make UX improvements on a modular level and an issue per issue basis now This is both good and bad because it means that we can make very detailed changes But we can't really see an overview of how all these different changes come together and how they affect the general experience of using Drupal This is how Drupal 8 looked after a few years of development There was a lot of inconsistency that was introduced over several iterations and several issues And this is what happens when you develop and design in separate silos on an issue per issue basis So this is another problem and how do we deal with this? So Frank Tamara wrote this amazing book called the shape of design. It's actually free available online So I really suggest if you haven't read it to go and check it out And he uses this really nice metaphor for the design process of a painter because when you're painting You sit very close up and you make the perfect tiny brushstrokes So you can see what you're doing in perfect detail and this is great because you can make everything perfect But after that you take a step back and you look at how that change is affected the whole piece Now we're very good at working on something in a lot of detail in design work But something we're not very good at yet in the Drupal community is taking that step back and seeing how the design changes Have influenced the entire experience So over the past year and a half I think we've been working on a a style guide for the seventh theme and the seventh theme is the default admin theme that ships with core Now this style guide had Had several objectives one was Consistency to core and contrived modules which we've never had before we wanted the ability to make changes and see how that reflects the entire experience both in core and contrived It also had to be accessible and mobile friendly This is harder than it sounds because obviously we have a great focus on accessibility Throughout Drupal, but we've never really had the concept of using the interface on a mobile device and Some of the early work I did in Drupal 8 was to try and make the mobile The interface better on mobile devices and it's really tough to take something that wasn't even considering mobile And just try and hammer it into a smaller space. It was really tough Another thing we wanted to do is try and evolve the theme because in the past few years Mobile operating systems have kind of changed the boundaries of how you am of visual aesthetics and graphical user interfaces So by comparison Drupal felt a little bit dated So it was a good opportunity to try and bring it up to date a little bit make it feel a little bit more modern But I also had to reflect Drupal's brand principles Now Drupal already has brand principles that were defined from the Drupal 7 UX work and the Drupal org redesign so we reinterpreted them and We evolved the aesthetics based on these principles. I Take it this doesn't show very well either Just about okay, so Drupal has to be clear direct and concise so we interpreted that as using a lot of crisp lines and solid color and Just the right amount of white space in between all the elements But Drupal also has to be calming. I mean, it's not always calming, but it should try and be calming, right? So we use a lot of this desaturated turns and a lot of rounded corners to emulate, you know softer edges and safer objects Drupal also has to feel natural. It shouldn't feel inhuman or machine-like So we use a lot of organic forms in the icon set that we designed to use with Drupal 8 and also in the tight phases that we choose Everything is rounded as well in the same way But Drupal also has to be friendly So we we found particular points in the interface to add just a little bit of color here and there not too much So you can kind of see if you look at how the interface stands now that we've evolved the original visual language of the seventh theme And I kind of see it as more of an evolution. I don't see it as a completely new theme I think it still has the same principles of the seventh theme if they're just evolved slightly So we're still working on this We still haven't finished and we've been spending a lot of time on it And if you're around on Friday, please do come along and Try and help out because believe me you don't need to you know You don't need to be special to contribute to core I haven't done anything in contrary before and I find a way to contribute So please do come down So the seventh style guide it looks very nice and we you know, we updated their settings and it works on mobile But beyond that there's a lot of potential to improve the overall experience of using Drupal We're gonna try and go out there and look at Contrib and try and standardize it a little bit more try and find UI patterns that exist and pull them into core and pull them into the style guide so Module like all of Contrib modules can reuse these patterns is have to have having to redesign their own or Having to design their own interfaces We also want to figure out the best way to document the style guide I really want to turn the style guide into a living Document that people can that Contrib and core developers can use To improve the design of the interfaces they built And a good example of that is the iOS 7 design resources It has design principles and it has guidelines as well as examples of how the UI elements work Here's an example of the date picker. It shows you what it looks like. It tells you what it's for important And also links off to how how you implement it and it links off to the API The Ubuntu design guidelines. They're really good as well. It contains UI patterns and building blocks And offers guidance depending on what kind of audience you're talking to whether it's commercial or Community or if it's a user or a developer. It's really interesting So turns out Drupal has User interface guidelines hands up if you knew they existed Hands up if you ever use them Yeah, one person every time I've given this presentation. There was no hands up Thank you so What I want to do in the future obviously there's a lot of improvements to make there because it's not well used or not well known I Kind of want to create our own mini bootstrap and I kind of want to create a Visual API that can be easily reused now whether you choose to use Twitter bootstrap or whether you don't like it or For your someone else who hates it And I still think there's a lot to learn from it because it is really popular And I think it's popular because it's so easy to use I really want to find and build the same thing for us in Drupal and I just think it's It's so well documented and it shows you exactly what you need to know And I think there's so many lessons that you can learn from it So hopefully I think over time we can build the same kind of useful tool For the admin interface for developers of core bear of Drupal core and of Contrib So at the beginning of the presentation, I asked who is responsible for the experience of using Drupal And I said it's up to the designers and the developers who work on core To build the tools that are usable and extendable So as you can see with we're still working on that But the rest of it is up to Contrib module developers and site builders. The rest is up to everyone else Thank you. I'm sorry about the The projector, please do tell us what you think about that. Please leave feedback on the site or If you have any feedback about presentation, please come find me or please talk to me on Twitter Does anyone have any questions? That's also fine So just to go on what you said about getting people at the sprints Sign up as a mentor if you've worked on core if you'd like to or if you're competent developer We have a booth in the export area to the left of the mechanical bolt Do some paired programming and get other people involved in core as well. Thanks. Thanks a lot Eric If there are no other questions and please tweet me or find me later or find me at the sprints We can talk then. Thanks