 Okay, so hello, thanks for coming. I don't think there will be any translations But if there's any wording I use in English that is harder to understand then just raise your hand and ask me I don't mind. I am I stopping trying to explain it in a simpler way And also my mother's here. She speaks pretty good Spanish. So maybe you can ask her to translate any terms that I Don't get across very well Anyway, um, so my name is Lewis Neiman. I'm a front-end developer and I'm a designer. I work Why live in Switzerland, but I work for a company in the UK the UK office of wonder crowd I'm very happy to be here. I'm very happy to support the Local community and I'm really glad that wonder crowd were happy to support me and pay for my flights to come here so Thanks a lot to them so I I'm the maintainer of the seven theme in Drupal the admin theme that ships when you install Drupal and Last week I became the maintainer for all the CSS in Drupal and when I When I agreed and I accepted the maintainer position and the commit was made after that And I thought maybe I should check and see what I'm getting myself into So I had a look and they're actually a hundred and forty five CSS files in Drupal a and there's about 13,836 lines So quite a lot and then I thought maybe this wasn't such a good idea To accept this this maintain the ship role, I guess and then I ran all of Drupal eight CSS through a code quality linting tool and Has about eight hundred and forty six errors in it and then I then I knew that it was a bad idea to accept This but I'm not going to talk about CSS really today I'm talking about the way we design the experience of using Drupal and and how we How we design that user experience and Drupal is a very flexible and a very powerful tool But with that you have so much flexibility that you don't really have any expectations about how someone will use it And you don't really have a lot of control over how the end user Will use Drupal? So it becomes very difficult to design for it because there are some problems that you wouldn't get when you're designing Or product where it kind of stays the same and you kind of have the expectations of how people will use it So when I'm When I'm talking about experience design I mean in particular like the way you know people experienced using the software and it's a very difficult thing To manage because it's not something that you can test There's no graph that shows how good an experience is and it's kind of built up of them feelings and You can't really measure feelings in that way But you know when they're good and you know when they're bad Like you when you taste something you know if it's good or bad You can't measure it really on a scale and it's not it's not just enough to make Drupal Possible and understandable and usable it has to be better than that because Everything that you do in your life everything that you've done has been possible and understandable and usable Like for example if you took a taxi through Bogota this morning to get here You know it was possible. You knew how to do it But it doesn't mean that you had a good experience so that you enjoyed doing it and at Wonderkraut we have a We have this these principles of how we design and the first thing you do is you make it usable the second thing you do is you make it useful after that you make it desirable and If you can you make it delightful And these are the kind of things that we struggle with doing in Drupal when we're designing it and I'm gonna talk about that a bit more so When you have a bad user experience, it's very easy for a user to feel overwhelmed like they am They very they're very frustrated. They feel very helpless. They feel very unsure of their own abilities to use That's all they're trying to use and It's very easy to feel intimidated by software and it's very easy to feel like that. You're not you're not good enough to use it or you don't have the right skills to use it and Inconsistency is also a big problem because if you expect something to happen But then something completely different happens You just lose confidence in yourself and you lose confidence in the tool you're using and you become very unsure about how to use it and The problem is that every feature and that we add to our products We increase the the complexity and we increase the ability or the potential for inconsistency Which is a big problem with Drupal? Which I'll come to So why is Drupal's user experience important? Well, it's important for two reasons the first one is about the clients because they're the one who pays money to work with Drupal and you know It means we're able to be here and it means We get to work with Drupal every day And in the long run if a client has a negative experience using Drupal, they build up a lot of negative emotions And they start feeling very bad about the tool they're using and they feel quite bad about Drupal And they feel quite bad about the people who put them in the situation Well, they don't feel great, you know about using the product that they use And the thing is that people talk they talk to each other a lot Clients talk to each other all the time and we know this because we know that Drupal has a reputation for being difficult to use or Not very usable The other reason is site builders and So at one point we're all just you know site builders if we're developers and we're clicking around Building, you know using Drupal to build the sites who want to build Before people will learn to code and so everyone starts out being a site builder at some point So it's really important to build a good experience for them as well And sometimes you just want to be able to use the tool and get it working and you know do what you want it to do You don't want to have to learn every part of the system where every how everything works. You just want to know enough to do what you want to do and One of the problems that we have with Drupal is like the amount that you need to know to know enough is kind of feels a bit like this And this is really tough for Drupal because there are so many new Alternatives nowadays, there's loads of products out there that are really good The experience is really good to use and that's all the user sees they only see the stuff that's in front of them And how they use it they on they can't compare the code quality of Drupal how flexible is they just know how easy it is to use and These bad experiences of people using Drupal they kind of reflect back on us as a community and Drupal has a reputation of requiring special knowledge or you know, you have to know the right things in order to use it Which is a shame because you know instead of being exclusive the Drupal community is very inclusive very welcoming very friendly and the software doesn't always reflect that at all so I Think it's kind of obvious or at least I convinced you that the UX of Drupal was really important And if we improve the user experience of using Drupal and it's going to make a big difference in the future for how Drupal is used so Who is responsible for Drupal's user experience? Does anyone know so having ideas? Is it designers? core developers module developers or site builders Does anyone know? Yeah, so it's it's all of us. It's a trick question, but no very no very clever one so the designers have a really important responsibility because they They research and they find problems with Drupal and they can solve those problems and they can define new conventions And then the core developers who work on Drupal core They can they can implement this framework that's usable and it's extendable by other people The module developers they have to use and extend their framework and how they use and extend Drupal is really important because there isn't a Drupal installation out there doesn't have some extra modules installed and They're part of the experience of using Drupal. They're not separate when once they're installed They're part of the same experience. So keeping them consistent and keeping them together is really important and then the site builders and They have the the biggest responsibility because their job is to take all the different Lego blocks and plug them together and to make an experience that's usable by the by the client So they have the final responsibility over everyone else but on top of that the client also has the ability to feed back and To give their perspective and to give their insights and so they can help improve Drupal as well So there's you know, there's good news I'm not just trying to be really negative about Drupal's user experience is making progress and it's getting better but one of the problems is that The expectations of what a good experience is is also improving as well So as we're trying to fix our own problems, we have to keep moving forward to keep up with the expectations of new users So I wanted to go over just a quick short history of the past few years and how Drupal's core experience has improved So this is Drupal 6. I don't know a long time ago I think I first started using Drupal in Drupal 6 and it didn't have like a custom design for the admin interface It used the same theme that you'd have on on the front of the site Which wasn't geared towards you know configuring and creating content And it didn't have really any usability to it You had to go and install these modules and you had to know the right modules that you had to install In order to make it easy to use and if you start using Drupal from the beginning You don't even know what a module is and you don't even know where to go to find one and to install one So there are loads of problems with them Drupal 6 and I think originally we did some am usability testing and The results were terrible And it was you know Drupal was meant to be a CMS But no one no one user could find that content once they made it so it was really clear Like it became really obvious to the whole community that there were big problems with Drupal's user experience in Drupal 6 So in Drupal 7 it improved a lot. We designed a custom admin theme I say we I wasn't involved then I only became involved during Drupal 8 but We designed a custom admin theme that was built for managing content And configuring the site so this was a big improvement by itself and then in Drupal 8 We've taken that and we've expanded on it and we've evolved it even further But I want to come back to these improvements in a little bit because I want to talk about Drupal's Contra experience as well because that's an important part of the entire experience of using Drupal So this is a screenshot of a module called it's called panels And so one of the things that we tend to do In Drupal is we display information in tables if there's any information at all It gets displayed in a table up here like this So you have a list of contexts and even if they have just a label and some buttons Put it in a table and that's pretty much what we do all over the place in Drupal Just all information is listed in a table even if it's not the correct or most appropriate way to display the information Something else that we added in Drupal 7 is this component called vertical tabs where you can You can split up information based on these tabs on the on the left-hand side and everyone was really excited about this idea You know we got this new component We can use it to show the right information and make it easy to find But what panels does is it kind of takes like a vertical tab and then inside of it It puts more vertical tabs and inside of that it puts even more vertical tabs And then along the right-hand side over here and they have also horizontal tabs and It's really hard to tell if you click on these what changes over here. Is this relevant to that bit? I mean you don't really know and my point is that it's really easy to take these UI conventions that we have user interface conventions And then just push them to the point where they don't work anymore and you kind of push them to the point where they break And this is another module called context and this one and they decided the module developer decided that in order to do What they wanted to do with the module they had to develop their own custom UI So they built this user interface from scratch And you can see like it has vertical tabs a little bit and then it has the These buttons on the side and it doesn't really work that well But it's very difficult if you if you need to have a custom interface Because the stuff that you will gives you isn't enough Then there's a lot of work to do and there aren't many designers in the community to help you So you have to figure it out and by yourself This is a module called rules and rules is a very complicated It's a very powerful module you can do a lot with it, but there there is really no design to it It's just a big long form and everything And so there isn't really any design done at all on it And this is because the module developers don't have a lot of support from designers in the community So they kind of have to just leave it as it is And they can't really do a lot of work to improve the design and make it easier to understand and make it easier to use Views is another really good example because it's part of Drupal right now. It's part of Drupal core But it still feels completely different to the rest of Drupal because it has all its own conventions And it has its own ways of using it which you have to learn to use views And then you never use those lessons that you've learned ever again in the rest of Drupal And so these are the kind of inconsistency problems that we have So we have like all these modules that have different designs But we need to make the modules feel like they're all Drupal. They need to feel like they're part of the same experience But the biggest problem is is that we have very few designers contributing to Drupal Like really a handful probably under under 10 So we can't get all these designs that go and sit with all the module developers and help them Ensure that the interface is well designed and it's consistent. We just don't have those numbers So I'm just gonna go through some of the improvements that we've made to the user experience in Drupal 8 which is in the in the past few years So we completely redesigned the installation screen This is probably the first like really big issue that I worked on in Drupal and It's not something that you see very often It's not something that you'd use every day, but it is the first thing that people see So it's really important that we show them like a good first impression and it looks friendly and easy to use Because once they have that first expectation set it kind of changes how they use Drupal what they expect from it We also redesigned the toolbar in Drupal 8 so it's completely rewritten from the one in Drupal 7 and you can get around a lot easier by collapsing and the the menu items and then you can It's also completely mobile friendly So it works just as well on tablet and mobile devices as it does in desktop So it's redesigned to work on everything We also redesigned the module page If you want to find a module now, you can just type it in and it will show up and filter the rest of the modules In previous versions, you just had to scroll up and down and look for it unless you you knew the right modules to Install to make it easier So I think overall in terms of man hours of developers the number of times that they have to do this We're probably saving like days and days of time of people scrolling up and down So that was a really good improvement to put into Drupal 8 We also completely redesigned the content creation page so you can see a lot of the secondary information Is moved over to the right-hand side and this is information that isn't as important as Your content so you have like a straight line here of all the content that you need to place in and the secondary Information on the right-hand side you can kind of ignore it if you want to it's not required I mean this was a really good improvement because we found that We found that if we had a long list of all the content then every user thought they had to fill it out that it was important So that's why we made the change to move it to the right-hand side We also have a WYSIWYG editor in Cornell, which is amazing It only took you know 10 years to put a WYSIWYG editor into Drupal But look you can make things bold and italic now. It's amazing But we also implemented some basic widgets to add links And another widget to add an image So the configuration the basic configuration of the WYSIWYG out of the box when you install it is was actually pretty good And that's really good to have out of the box because you know every client asks these kind of things in every project So it's great to have this baseline of settings so you can You can just use it straight away out of the box We also added this new module called the quick edit module and what it lets you do is it lets you Modify your content in the page when you're looking at it So you can change any of the text on this page and you hit save and it's saved already So you don't have to go to the back of the site To change your content and you can see exactly how it's going to look before you hit save and this is a you know Obviously really good improvement. It's like magic And it's something that's tested really well and it is a really important feature to have something else that we've done is we've redesigned the block placement page And so now you can add as many blocks of many types as you want to Drupal So we kind of have to rebuild the the design of the page so it's supported Adding as many as you want so you don't just drag them around anymore You can add if you want to add more than one breadcrum block to a page you can so That's a big functional improvement, but we had to improve the design and change the design So it supported this do functionality so Kind of like the way that we design The modules we also have the same problem in inside Drupal core Because all the improvements that we make are separate. They're meeting completely separate issues And they're made in separate modules as well. It's all modular And what we don't have is this overview of how these changes and these improvements actually affect the entire experience and how they affect each other And this is maybe the biggest problem is we're very good at making changes, but we're not too good at the overview So after maybe three or four years of Drupal 8 development And this is a screenshot of them the buttons We had in the seventh theme and you can see that we have like five different styles of buttons and none of them look Any good and The problem was that all these buttons are being added in separate issues and no one was looking at them together and saying You know, these don't look right together. They don't match up and so it was even really basic stuff like this that we were struggling to get right So this designer called Frank Chimero. He wrote this amazing book about Design and what he thinks design is and how he thinks it works called the shape of design And he had this and this metaphor for how you use design kind of like a painter So when you're painting And you're making, you know brushstrokes you get very close to the canvas So, you know, you're making you're making the detailed brushstrokes and you're making the right colors and you're making the right choices But after you make those changes and you change the canvas you want to have a step back and you want to see about how those How those brushstrokes have affected the entire canvas not just a small part you're looking at So we're quite good at doing the tiny brushstrokes in Drupal making those changes But from a design point of view, we're not too good at the stepping back and looking at looking at the entire canvas So these are what this is one of the big problems that we had to solve during Drupal 8 and This isn't something that you can fix with issues or patches. You have to change how the community works together and how they work so About two years ago and we started work on a style guide for the seventh theme, which is the admin theme And the idea behind this although a few objectives behind the the style guide one was to add consistency to core and Contrib modules like I said, it's really important that they're part of the same experience Another one or another two work for it to be accessible because Drupal has a very high standard for accessibility And it had to be mobile friendly, which was Which was a big thing because Drupal had no concept of working on mobile devices or any other devices apart from a desktop computer So that was a big change We also kind of wanted to update the visuals of Drupal Because in the past few years the mobile operating systems have kind of pushed forward, you know Expectations for how things look and how things work and the expectations are much higher So we wanted we wanted to update Drupal so it felt more modern So Drupal already has some brand principles about you know, how it should feel and how it should be and which we developed during The Drupal 7 cycle when we first designed the admin theme So what we did when we were designing the style guide is we took We took those principles and we reinterpreted them so we could base the visuals of the style guide on these principles So the first one is that Drupal must be clear and direct and concise So some of the way we display information now is that we have like we have strong colors and very crisp lines in Certain places to emphasize the right and the right information And we also use like just the right amount of spacing between everything so it's really clear like The separation between different information The other principle is that Drupal must be calming. I mean, it's it's not always calming, but it should try and be calming So what and we have is a lot of rounded corners And you see in the buttons here and on the edges of the of the modal windows Everything is kind of rounded to make it feel less sharp and less dangerous Another principle is that Drupal fit should feel kind of natural It should kind of feel like it's built by people not built by machines So you can see in the choices that we've made for the M for the typefaces They all have like they're quite soft and rounded corners, and they're not very straight and exact And but also in the the icon set that we designed to use for Drupal 8 and there are no sharp edges They're all rounded corners So it doesn't look like it's been cut by a machine. It looks like it's been made or by a person It feels more natural Another thing is that Drupal should try and feel friendly So we found different points where we could add like bits of right color just here and there just a little bit So it's not too overwhelming, but it just gives it a little bit more Like it kind of feels a little bit more happier So when you put it all together, you can kind of see that it looks completely different Well, not completely it looks slightly different to how it did before but it's not completely different So it's not a brand new theme. It's just kind of an evolution. So it's a slightly Evolved design, but not a completely new design so that's kind of where we're at when we We redesigned the seventh theme and we produced a style guide and then we implemented these new designs of visuals in Drupal But that doesn't solve every problem So moving forward beyond that we had to think about ways we could use a style guide To solve these problems and to improve the overall experience and not just make it look a bit nicer So the next thing we try to do is go out and try and standardize the contributed modules the way that you know the way people are doing things differently and In all the different modules that you can install So we went out we talked to Maintainers of modules and we try and find The you are components that they've made themselves because they need it and we're trying to bring those things into The seventh theme so then everyone can use the same components together and they don't have to write them themselves So one example is this and we have this tooltip that appears and When you hover over the the favorite button in Drupal and what we're doing is where we're making this Reusable so anyone can use this tooltip Anywhere in any element they want and not just have it in this situation another example is this and This the spinner that appears in the middle of views pages Which doesn't appear anywhere else in Drupal. It's just a views thing that it's the only one that does it and it just overrides the the normal spinner Just in this situation, which is which is weird and but the views needed that way So what we did is we created an issue So now you can when you when you have a spinner you can choose that you want a full-screen option So it means that any module or any page can use this if they need to and it's not just a views thing that views Doesn't its own it becomes a toolset or part of the toolset that module developers can use to make their pages easier to use Another example is that we added to the seventh theme is that these layout classes So what you can do if you're a developer is you can add these classes to? the output of your of your module So if you want to be able to lay things out on the page You know if you want to have like half a column here column there or like a third and two-thirds You can do that without having to write any of your own CSS You can just add these classes and then we take care of the rest in the theme And then it keeps it more consistent and it makes it easier for module developers They don't have to figure out these problems for themselves Another example and we added like helper classes and styles to make it easier to emphasize information on the pages So if you want to make Some text on your on your module page Bigger like a heading you can use these like heading B classes heading C heading D To make it look like a header without actually using The header tags because you should only use them in the right places for accessibility And or you just write your own CSS to make it bigger which makes it inconsistent with all the other modules So this is a really useful toolset for being able to you know make important information bigger and without having to do the work yourself Another quick quick example are these color classes So you can now add these classes in your markup if you want to show this on you It's like goods happened or something bad has happened You don't have to go and add those colors yourself You can just use them straight from the seventh theme and then you know the colors are the same across the whole of Drupal because you're just using these classes again and Beyond that we want to develop guidelines for how to use the style guide And this is probably the most important part that we're working on because this is what we use to tell Developers how to use the different parts of the style guide and how to make it and or when to use them You know when to use the right components in this situation or when to use them in this situation So some examples of some interface guidelines that exist already and the one that was released for iOS 7 by Apple was really good and it has a lot of emphasis on transitions and animations because that's important in iOS 7 But it also has the guidelines about how to use and when to use them and it also has like a catalog of all the different Components you can use so in this example here It tells you you know what what it is and it shows you what it looks like and then it tells you when you should use it And then it has a link directly to And the documentation of how you would implement it in code So it makes it really easy for developers to find out what they should use and when they should use it And then they can just click on the link to find out how to use it This is the the branding guidelines for Ubuntu and these ones are really good because they have a listing of all the different components and the patterns that you can use and What they also do is they give you special advice if you're aiming at a commercial customer if you're aiming at a member of the community or if you're aiming the design at a developer if you're aiming at someone who creates content so Drupal actually has its own user interface guidelines Hands up if you've ever heard of it No, no one's ever used it. Yeah, so this is usually a big problem And I think every time I've given this presentation one person has put their hand up and I've given it quite a few times And so there's clearly a problem here about how we write the standards and the guidelines or how we promote it And we make it available to the developers And so what I've done is I've taken some inspiration from Twitter Bootstrap, which is a User interface framework for developers and it makes it very easy for them to add their own Or to create their own UI without writing any code And I'm not saying that you should use it or it's the best thing to use But there's loads of things you can learn from it because it's really popular And the reason why it's so popular is because it makes it so easy to use So it becomes really easy to know like how to use all the different components that are in the framework So we looked at this a lot for some inspiration And we came up with a plan for the seventh theme which is basically to take all the styling and split them up into their separate components And we've done that now and Then the second step of the plan was to document all of these files and all these components and using a tool or language I guess called KSS and that stands for Canile style sheets and all you do is you put comments in the styling files And you describe the different components that are contained within those files and you give advice about how they should be used and then you this tool passes these Or reads these comments and it creates a style guide out of it And this is a basic example of how it can look and this is kind of a proof of concept for what we can do But we still need to put all the comments into into Drupal and into the style sheets So that's pretty much all the work that we've got up to you so far in Drupal 8 At the beginning I asked the question who is responsible for the the Usability of Drupal and I said that it's up to the designers who are involved in Drupal and the developers to build a framework That makes it easy to use and extend and I also said that it's up to the module developers And help the site builders to take those tools and to build the final projects around it Because they have the responsibility at the end for the air For the final product So in the end it's just it's up to everyone else and we've done that's all the work we've done so far But the rest of it is kind of up to everyone else Thank you. I think we have about 15 minutes. So does anyone have any questions? Yes If you want to use bootstrap in Drupal Do you mean like for the front or for the for the back idea for the admin interface or for the front of the site? Sure. Okay. Um, so there is a theme that implements Twitter bootstrap for Drupal 7 and if you want to use that theme for Drupal 8 you have to wait for it to be Upgraded which will take a while because The theme system in Drupal 8 is still unstable So my recommendation would be to just use bootstrap and make your own theme To implement the classes here and there and don't rely on the base theme or don't rely on Drupal too much Yeah, add the classes where you want to and if you if you want to do that now, that's what I recommend at the moment, yes loads and there are loads of pitfalls because There's still loads of changes to the markup in Drupal and to this the styling in Drupal So my advice is to copy all the templates that create the markup into your theme and Remove all the styling from Drupal 8 and just you know use bootstrap or use your own because all that stuff will change And if you upgrade You'll break stuff because those files will change. So if you don't rely on them at all Then you'll be safer and I forgot to repeat what the question was for the recording and it was Can I use bootstrap now in Drupal 8? Right? Okay Question was in Spanish Okay He didn't want to do extra work Yeah Okay, I guess he's the guy who asked the questions in here Is he? Sure. Okay. Thanks. Any other questions? Yes Yeah, wow. Okay. That's a big question. So the question was Drupal is more decoupled now and you're able to use services to just you know use The content from Drupal and pull it wherever you want and but there are certain problems with that still I don't know if I'm the best person to ask that but I remember that there's an issue to improve How messaging works? I think like to add an event in JavaScript where you can say like messages should appear in this area in JavaScript But I don't know if that Helps you or situation particular and maybe we can talk about it a little bit more afterwards in detail and then I can have a Bit more of a think but off the top of my head. I'm not sure. Oh, yeah completely. Yeah Okay. Yeah, maybe I can help you write an issue For you know to bring to the issue queue so you can suggest that other people can look at it There's one. Okay, brilliant Yeah, it would be a big issue. You're right Does anyone else have any questions? Yes Why was the dashboard module removed? Okay, so there were a few modules that were removed in Drupal 8 and Those are ones that were had very specific functionality. They did very certain things that you could recreate using And modules are more like tools So in a project that I've worked on recently we've we had some more custom requirements for the dashboard So we didn't use dashboard module. We used them panels to build custom dashboards for everyone and The dashboard module wouldn't let you do that So some of the decisions are basically based on like if there's a module that you can download that will do this better Then we should remove the module that does it in a very simple way in core I'm trying to think of a few other examples of Modules that were removed, but I can't think of them off top of my head, but that's the logic behind it really like try and make Their less modules, but with the modules that you have you can do more with them. Does anyone else have any questions? Yeah, mom do you want to translate great? Yeah Okay, brilliant question. So the question is how if you're a designer and you want to get involved Contribute to Drupal. How do you do that? And I should have really said that at some point already so we have a So there are many IOC rooms that people use to communicate and in Drupal and there's Drupal dash contribute But there's also Drupal dashed usability and that's where all the designers tend to discuss and talk and you can talk to a lot of the designers who are already involved in Drupal And but also there's a there's a group on groups of Drupal.org and called usability where we post updates on Usability changes in Drupal and how you can get involved And that's another way to do it and one of the best ways to do it I think is to come to a sprints at an event and Either a DrupalCon or a smaller event where there are mentors who are available to help and There's a lot of variety of the kind of sprints you can do you don't have to know Coding you don't have to know like if you even know just CSS nothing else There's still loads of things you can do and it's all about finding the right people to talk to at the sprints And there are those people there who can help you like match up with the right people and find people who can help you get Involved and have you get started? Thanks. Yeah, and there'll be a recording. I guess so we can translate it later if that helps And the sprints as well Thanks a lot. Yeah, and this this Thursday Tomorrow there's gonna be a sprint all day I'm not sure where it is if it's in this building or another building But there'll be loads people there who can help out and help people who are new get started Any other questions? Okay. Thank you very much If you want to know a little bit more and you can ask me questions on Twitter And there are tags for the style guide issues and front-end issues and the the website of the book by Frank Tamaro I mentioned is shape of design book.com and you can go to the website and you can download it for free and you can Read it online Which is is a brilliant book and if you like the pictures of the dogs that I had in the presentation The website is mensweardog.tumblr.com and that's usually the question I get asked more than anything else Okay, maybe next time my Spanish will be better, but thank you. Thanks for coming