 All right, so my name is Mike Herschel. I've been doing Drupal for about six years. I kind of do a whole bunch of stuff with Drupal, including a little bit of development, a little bit of site building, a lot of theming, but I'm really passionate about user experience and usability. So we're gonna get into some of that right now, and it's gonna be a whole bunch of real-world examples, modules, and techniques to use, and a little bit of theory at the end, just to fill up some time. So have you guys ever, has everybody seen this? This is, I think, probably in two or three slides this Drupal cons. So for you guys in the back, you have those lines at the bottom there are other content management systems, and that huge death line where everybody's committing suicide, that's Drupal. So Drupal is, it's honestly not as bad as when this was initially drawn. We're gonna go into a little bit of history there, here. I actually installed Drupal 4.7 just so I could get the screenshot. So this is 4.7, 5.3, you can see Garland, Drupal 6, there's really no difference here. Drupal 6, though, when that came out, they contribute modules. There's a lot of really good modules that you can do to make that a lot better. We're not gonna talk about it, but just be aware of admin menu, admin module, admin themes, and vertical tabs. Going into Drupal 7, there was an initiative called D7UX, and you can see the goals right here. Make the most frequent tasks easy, less frequent tasks achievable, designed for the 8%, that's my favorite. And D7UX has, it made a huge difference with Drupal 7. Drupal 7, in my opinion, is a lot better. The admin toolbar overlay, which a lot of people hate including me because it's slow as molasses, but it's really useful to people who don't need to be flying around. Contextual links are amazing. Go shortcut, stashboard, blah, blah, blah. Well, so this is actually a real quote. So, real usability depends on you, the developer. You can make Drupal really, really stuck through bad decisions, poor planning, poor workflow. And then when you're, and users see it, they think that Drupal sucks, but it's not Drupal, it's you. Or the developer who do that, not you. So, I'm kind of organizing these slides into three or four tenants of usability. So this is the first one right here. Reduce the short term memory load. So this is Dory from Finding Nemo, played by Ellen DeGeneres. All right, so we're gonna start with some low hanging fruit right here. But this is one of my pet peeves. So, you know, you type in your awesome website, .com slash user, you log in and it goes to your user page. And you know, what's the first thing that you do? You navigate somewhere else. No one needs to be at the user page, send them somewhere else. You know, you can use rules to kind of make it, make it more complicated depending on where they were. You can do the same thing with the login redirect module if you want something a little bit more lightweight. You know, do it. Who here uses the core dashboard? I want hands. I see like maybe three, you know? So, this is probably the most underappreciated piece of Drupal core maybe, I don't know. It's actually not that bad. And you can customize, you can customize it with use and with use bulk operations. And that just goes a long way for your content editors. I'm not gonna demo this here because it's pretty basic. The next step up from that is Workbench. I bet, who here has used Workbench? A lot of people. And it's a very popular module. It's dashboard on steroids. And it does a little bit of everything including the workflow, moderation, content revisioning which I think is really awesome. We're not gonna demo that either because it's too complicated for right now. That's a whole other presentation. So, another really simple pennant is to simplify, to get rid of the stuff that you're not using. So, the easiest thing to do is just to take away permissions. When I deliver a website, even if it's too like a small mama pop shop for a brochure website, you can give them the admin account but make sure the account that they use has reduced permission. So, they don't see all these options with your many item, your path auto and all that type of stuff. And take away the buttons up there. Like I mean, have you guys seen that before when you go into it? Yeah, there's a flash button up there, you know. Better formats is pretty awesome. Who uses better formats module? All right, so that's really good. So, for those of you who are not and didn't know the better formats module, you can set defaults and limit your input formats per field on your content type. So, what that means is if you limit it to one input format, that is going to remove that whole text dropdown that your content administrators, your content editors, don't know what the heck it is. You know, what's the difference between filtered HTML, full HTML, and whatever else you might have in there. They're really not gonna know that. So, I'm not gonna demo it, but it's all right. So, I didn't even know about this module. Until I put it in this presentation. I was building a website for my work and the person who's gonna be working on this is very, you know, a little bit elderly, not very technical, you know, super nice. You know, she makes great cookies. And so, you know, I enabled revisioning and I wanted to remove that revision comment box because, you know, not that many people use that. And so, I found this great module that does a little bit of everything. And if you look in here, you can take away the revision log. You can take away to author information, the path, the publishing options, comments, the cancel button. All of this is really great to take away the crap that you don't need. And this is probably my favorite module right here, FieldGroup. This module is so awesome, I'm pulling. It's pretty awesome. I'm actually gonna demo this module. You can see these awesome graphics here. So, live demos pretty much always fail. So, just bear with me here. So, I have this, I have this, was it content type set up right here? Cleverly called FieldGroup, miscellaneous demo. And if you look at the fields in here, it does a lot of really cool things here. So, by default, right now I have it, I have it set to horizontal tabs. So, it's a separate module. In Drupal 6, this was included with CTK when you downloaded it. In Drupal 7, you have to download it separately because that's in core. But so, you enable the module, just like any other module, and it gives you an option for FieldGroup Center. And so, it has a whole bunch of really cool options for you, you know, to field sets, vertical tabs, horizontal tabs, multi-page, which is awesome, and accordions. So, if you're gonna, right now we have it set to horizontal tabs. So, you can kind of see what I'm doing here. It's, if you break your content up in a logical way, your user will thank you, and they'll be able to get to stuff a little bit quicker. Going into multi-page, multi-page group. And I'm gonna set this to multi-page. You're gonna see how awesome this is right here. Move submit button to the last page, yes. Here's something of course. So, this is so awesome right here, which is why I had the awesome graphic go around right here. So, it uses JavaScript to do this. It doesn't actually split the form up. It's just any type of, you know, crazy, you can actually just use this JavaScript. You can navigate to the next page, next page, and then you have the submit button at the bottom, you have the previous page. So, this is really good for workflow. You know, when I discovered this, I immediately retrofitted one of my sites with this, and it's just pretty awesome, so. Everybody here uses the shortcuts for, right? And because it's on by default. So, there's this module called shortcut for role. Can anyone tell me what this does? I was just, yeah. So, you can assign the shortcuts for role. So, this is another one of those kind of little I don't know, I wouldn't call it stupid modules, but like, it's an awesome module that's like very lightweight and honestly, my opinion, this stuff function I should be in core. But so, it does what it does. I'm not gonna demo it because it's pretty obvious, but if you give people a little item that they can click on, I mean that's obviously very useful. Consistent pattern, consistent pattern show here. So, this is another one of these little not stupid modules. So, this kind of goes into a little bit of that jubilee stuff that G's showed in that video, which was pretty awesome. So, it basically splits up to save and publish. You know, I mean, there's nothing really else to explain about that. This right here is awesome. Oh, no, I thought I made that awesome. So, nevermind, this isn't awesome. Who here uses ViewsUI at a basic settings? All right, this is awesome because you guys are just gonna learn some really cool here. So, what this allows you to do is it allows the editor, or the content editor, to easily edit the header, footer, empty text of a view. So, you guys know when you're editing a view right here, like, you know, you have to go into your header. You have to add a global text area. You have to say something like this, you know, it's to this rocks. And you can set your text format, all that good stuff, apply. So, can you imagine walking a user through that, you know, through this views interface, which, you know, even though it's better than it used to be, it's still enormously complex, there's a solution to this. So, what I'm gonna do is I'm gonna go under View here, Structure Views, and this module puts this little tab up here called Editable Basic Settings. And so, I'm gonna say, well, I want my editable field to be the header. And I want to enable this on the test view page right here. And I'm gonna save this. Let's navigate to that view. This view, by the way, is a tribute to the best all-time rock and roll guitar set, right? Should say yes first. So, what it does is it puts on this edit tab right here. This is something else that really, this type of usability should be in core. So, this rocks, you know, I can edit this, right? And I have the wissy way, you know, all that good stuff. That's pretty cool, you know? Just so you guys know. Thank you. Thank you. And the person to be thanking right here is the fellow who wrote it, which I don't have that down, but with that guys here, I'll buy you a beer. Who? Jonah Ellison. If you guys see Jonah Ellison, I don't know if he's at Drupalcon, buy him a beer, because he's awesome, so. All right, let's get back to this. Ooh, no. So, we got one more. Oh, here we go. Views bulk operations. So, who here has not used these bulk operations? Couple, all right. So, I'll do a quick demo. So, what VBO for those in the know, is that it allows you to put, it puts checkboxes next to your views items, and then you can do things with those selected. So, this is a regular module that you download, all that good stuff. So, let's edit this view right here. To do that, you just, I think I have the module enabled. Yeah, bulk operations content right here. You add a field called bulk operations content, and it asks you a bunch of different questions right here. Well, what actions do you want to enable right here? Let's check makes sticky, even though stuff's already published. So, let's save that view and hopefully everything works. So, now I have a checkbox next to each of these notes, and I can make content sticky and execute it there. That's not sure? Yes. So, this is the type of stuff that you can put into your dashboards, right? Into the core dashboard, into your workbench views. Bulk operations is pretty cool. And as bulk operations is moving into a core interface, which to me is awesome. What else we got here? Freaking awesome. So, all right, so this is something right here that in my opinion is pretty amazing. So, when you're developing your views and you have a list of rows, you can actually put contextual filters on each of these rows. So, I was looking for a way to do this and I started Googling and I was trying to write some type of pre-process thing. And then I found this reference to a comment somewhere that this is included with views. I just had never seen it. So, I looked and sure enough, it was there. So, let's, let me take out the bulk operations thing right here. So, in order to do this right here, you have to add your fields that you want to appear in that menu, let's say edit, and maybe delete. And then you want to exclude them from your display so it doesn't actually show up in the display. And then add one more field, contextual links, global contextual links. And I'll ask you what fields do you want to have show up in those contextual links or the ones we just added? All right, so now look at this. That is pretty cool for your own user, right? Thank you. And you can thank all the views developers for that because that's included with views. You guys can go home and do that right now. It's pretty awesome. Let's get back to this thing. Handling errors and undoes. Here's some more awesome stuff. I'm gonna, you guys should have counted how many times I'm using that word. So field validation and client-side validation. Who here has used these two modules, one or the other? We got a couple, that's pretty cool. So I'm gonna throw a demo of this in a second. So field validation, it does exactly what you think it does. It allows you to set validation rules for your fields and allows you to use regular expressions, different rules, and there's a whole similar rule that you can do. Client-side validation goes a little bit, it goes on top of that, and it puts in a little bit of JavaScript on the page where if you screw it up, if you screw up your input or something like that, it'll notify you before you hit the submit button, which to me is pretty, pretty amazing, awesome. I have these two modules enabled and let me kind of show you about client-side validation right here. I have a couple modules enabled because it comes with the slew of modules here. So I have a content type in here called field validation demo. That's very creative. So go to manage fields and so I have a title in here and I have a text field that says, that's labeled as CMS of choice. So I'm gonna hit this little validate. This little link up here is no validation rule. So let's go ahead and add one. You can see all these options in here. You have a words, blacklist, date range, emails, length, match against another field, must be empty, regex, PHP. I'm gonna select specific values because it's easy. I'm gonna call this rule must be Drupal, all right? We're gonna call it Drupal and then lowercase Drupal. And I can see, you can set the customer message, you know. You must, so let's go ahead and add that right there so you can see it in action since you probably already know exactly what it's gonna do. So field validation demo, let's type in a title here. Content management system, I must use Drupal. So I'm gonna choose Drupal here and let's see if it lets me see it, of course it will. And there it is. So that's obviously a very powerful module there to validate your input. So you shouldn't be receiving any type of bad data anymore now that you know the success, you know. So client-side validation. I have a, what do you call it, a content type set up right here called every field. There's a module called every field. So I'm gonna add content and I'll show you some options are in there. So say like, it has every field in here, an integer. So if I type in the letter A, look at that. Look at this little JavaScript right here. It immediately tells me, decimal, is that a valid decimal? No. So I mean that's, it's pretty awesome, you know. There's no screwing around with this, you know. You're not gonna fool it. So this has a whole bunch of really great, awesome options in here, a client-side validation in here. And so you have validate fields on submit, validate fields on blur, which is when it gets out of focus. On key up, there's a whole bunch of different really customizable options in here. I use this on every site that I build. All right, so this is super easy right here. By default, well, it's not enabled by default, but when I create a content type, I always select create new revisions. And this has saved my butt several times, you know, people screwing stuff up and, you know, just revert and with that, it's the diff module. You guys, who here uses a diff module with revisions? That's pretty cool. So I think that was maybe half of the idea. So the diff module will just show you the difference, which is, I mean, how great is that? It's super easy. So I've gotten into the holy grail. This is pretty cool. I'm guessing you guys probably, who here doesn't, isn't familiar with Spark? Got a couple. So Spark is a distribution of Drupal, Drupal 7, and it's meant as kind of a testing inaction of Drupal 8's usability, you know? So you'll have all those, a lot of that cool stuff that you've seen in that video during the Drees Note is available for Drupal 7. And a lot of it is getting a little bit mature now and some of it's ready for use. And what a lot of people don't know is that you can actually take out, you can download the modules, the edit module, and you can, and another thing that you can do is you can just take, you know, download Spark, take the library, the CK editor, library, module, edit module out of Spark, you know, because they may have some custom patches or something in there, and dump them in retrofit your old Drupal sites, which is, to me, another really cool thing. So let's go ahead and see if I have this enabled. I don't think I do right now. So I'm gonna enable the edit module right here. This is just taken out of Spark and dumped into the sites on module structure. And I also have the CK editor, the new CK editor, version 4.whatever installed, wait for this to happen. And what's gonna happen is you're gonna see a lot of that stuff that was in the video is gonna be enabled right now. So it creates this little block right here called inplace edit operations. And you can put this block in different places and there's methods to put it up in the toolbar and stuff like that. So I can hit this button right here. And now I can just type that's easy. Who would not want this on their website? Probably some people, but. I mean, there's really nothing else to demo with this. Oh yeah, you can see, I have way too many buttons enabled here. But I don't see a flash button, so that's something. And I also have my text form that you can take out of that stuff. You have some tutorials, that's some client-side validation, but I already have two routes. Forget about that. That would be some type of bug. So it's really important to make this extra effort. And this is something that I think if you didn't, at least I mentioned it during today's keynote, I'm sure I mentioned it before, that your content editors and your Drupal end users, the people who are actually using Drupal, they're becoming the decision makers. That people are gonna look to them and say, well, do you like this or don't you like that? And that's really important. Don't make a Drupal site that sucks. Let's see what you've got going on here. This is awesome. So get into your user set. So this is more theory, but this is really important. This is actually how I discovered that. Node form settings module. What is your user doing? Pretend you're this person that's gonna be doing this work, and even better yet, do some of this work. Work on that person's job for a little bit. And that's called eating your own dog food. And you as the developer, you're gonna see, well, hey, this person has to copy and paste this value twice. This person has to do this in this method. If I use field groups, it's gonna make a lot more sense. And you're gonna find ways, and you're gonna come up with problems that you don't even know, that you don't have a solution for. But at that point, at least you know there's a problem and you can find a solution. Do usability testing. There's so many articles on the internet on how to do quick and easy and cheap usability testing. And I think that's pretty awesome. So I put this up right here, so you guys can all take a picture of it. So anybody who's just kind of interested, these are all the modules that I covered right here, so I'm gonna leave this up for a second. I think I'm doing kind of fast, but that's all right. Time's up, let's go. So what I really want you guys to take away from this is almost that last slide. To get into your user set, to find out the problems. If you find the problem, chances are there's a module for that, and that's gonna be, knowing is half the battle. You guys ever watched GI Joe? That's the, yeah, I'm gonna switch this here. My slides will be up too. So I'm over a little bit quicker than I thought it was here, but you guys have any questions and any problems or anything like that, or any modules that I haven't mentioned? Go ahead, you. Cool, so this gentleman said he's playing with CK editor add-ons, and there's source code highlighting and a bunch of really cool options. And you? If you're dealing with sites with a lot of images and your project managers want to upload a lot of images, how would you do that? All at once, not one at a time. Oh, and there's a couple different modules for that. One is called pull-up load. I believe that's a JavaScript library, PLUP load. There's another module that uses some type of flash plug-in. I think that's called bulk image junk load. And then there's another one that uses the HTML5, you call attribute, when you're choosing files, it allows it to select multiple files. Now in order to use that, you have to use Chrome. The easiest thing to do to choose between those is, number one, Google multiple image upload drupal. And you're gonna see a couple different options. I personally like the HTML5 version because I'm not using IE, so that's just me. Go ahead. I just wanted to give a shout out to the override node options module. It does a lot of the skin stuff to remove the revisions and path and other things like that. Well, what module was that? Override node options. Override node? Yeah. Cool. So the override node options, I know I'm not too familiar with that. I'll play with that. Go ahead. I was wondering if you could tell us a little bit about how Spark works with workbench revisioning. Like, is it seamless? Is it not really there yet? My, you know, to tell you the truth, I would test it before actually deploying that if you're relying on the revisions. My understanding is that that is working though. That's the type of stuff I would test before. Yeah. All right, because that's obviously a true version. Hey, thanks a lot. When you were demoing the multiple page set up in the field group module, do you know whether or not all of the fields for all of the pages are rendered and then hidden? Because you said it was done with JS or are things grabbed in AJAX as needed? They are rendered and then in... Okay. If you'd be the source you can see them. How are you doing? Pretty good. Awesome, awesome. Tell me three. Awesome. Awesome, awesome. I was wondering if you have worked at all with the conditional fields module as far as having... So I have two levels of users and one of them needs to have fields that appear based on the choice of another field. So I have used conditional fields before and it works just as advertised. And so basically what conditional fields is is you select one option and depending on that option it will show you another input form or whatever. So you want to limit that based on the user role or something like that? No, actually I just lately have had problems with it saving things like if changes are made and they go back to the page. I was wondering if there were other options that you've mentioned working on workflow steps. So I was wondering if you could show me that. I honestly don't know of any others off the top of my head. Okay, so thank you. You're welcome. How are you doing? Just referring for views, order, do you use any... What much do you use? Do you use like node queue or... Oh, so draggable views and node queue are the two. I personally like node queue a little bit more especially when you have age at the bottom. If it's just a small view, maybe four or five, something like that draggable views I think works pretty well. So I'm gonna say in a node queue even though there is different interfaces and stuff. Go ahead. Hi, so you say that you use this module frequently. My question is how do you sell these to the client when they always come and say, oh, by the way, I work by you, it's a little bit tight. I mean, you just have to say this is gonna save you time in the end. Your clients, I would think, would be asking for this type of stuff. You know, as far as selling it to them, just say, hey, listen, do you want this person complaining to you or do you want them to be happy? That's all I got there. Are you done? Do you have any tips for previews which are not awesome in the interval? Very, very quick answer, no. I saw that DA is gonna do it well during that keynote. And that's something I didn't know and I shed a tear of happiness when I saw that. Something that we've done before is use revisions with revision moderation and they can basically have an unpublished revision and they can use that as a preview. Oh, that's actually a really good idea. There's so many ways to do things. I just have a module shout out to field collections and reference dialogue. They're both great options. They kind of are sometimes you have to kind of pro and con between them depending on your situation. But it's a great way if you have a really complicated content type and a lot of different fields and you wanna break that up a little bit. The reference dialogue module is also great for sharing little components of fields between different content types. Cool, thank you. I'm gonna have to look at those too. Do you have any recommendations for out-of-the-box ways to make CK Editor insert CSS classes instead of inline styles when you use all those terrible buttons that are on it? No, so actually, I have a way that I do on the site in Drupal 6. There is, I don't even know what it's called, but I'd have to kind of get into it a little bit. But there is a dropdown where you can define your classes of your fans and dibs within CK Editor. I know it's possible because I've done it. I remember, I did it in Drupal 6 and it was kind of a pain in the butt by I've done it recently in Drupal 7 and it was a lot easier. It's on the, once you go into the configuration of CK Editor, it's on like maybe the next to last tab to get exactly what it's called. So maybe that'll help you. All right, thank you. Thanks. I have an announcement here, by the way. So you guys heard of all the horrible tornadoes in Oklahoma. There's actually something that you can do to help out about it. There's a code sprint that's tonight at the Coders Lounge in the Double Tree Hotel. And they're gonna be working to help the victims and emergency responders on the ground. And they're gonna develop a website that's gonna coordinate the transportation and help dealing with housing issues. They're gonna organize four teams with the goal of creating apps that will help these problems and that will guide people to our website portal. So basically right now there's logistics problems that technology can solve. And Drupal has done similar things like this before I know that the company at Development Seed used Drupal to develop a cool map of the hate earthquake when that happened. So they're gonna be doing this tonight. And my understanding is it's gonna be kind of an online type thing, but it's for obviously a very good cause because that was all the trash together. So anybody who's interested in that go help out. You're probably looking for the help. Any other questions or good? I do not. But what I do have is I have a hashtag. It's Drupal, the number four, okay. And it starts at 730 tonight at the Coders Lounge in the Double Tree Hotel. And once again the hashtag, if you want to search for that, is hashtag Drupal the number four, okay. So that's all I got. Thank you. All right, now go create some awesome websites.