 There's a couple of people outside. We're going to get started here in about one minute. I want to give a quick update. All the recordings are going to be on WordPress TV. So we're recording this. And if you miss something in this one or another workshop that you wanted to do, you can check that out on there. And our next speaker I'm pleased to introduce is Lisa. Gizmo. All right, I got it. So Lisa is a Gizmo creative factory. Or is Gizmo creative factory with 18 years in print, web, and email design, and 13 years in business. She's worked with big and small agencies alike, creating print working websites for craft, clear channel, all state, and many corporations and organizations. Instead of just putting out fires, she's now building robust WordPress sites and training clients on WordPress management. Please introduce Lisa. Thank you. Hopefully you guys can hear me. I feel like I should be saying something much more momentous in this space. So hopefully this will work out for everybody. Also, just as a little bit of introduction to me, I've been doing websites since 1996, which means straight HTML, no CSS, no PHP, no WordPress. And I realize, hold, that makes me so. I'll just say I was like five when I started instead of anything else. The thing about starting out with websites like that back then, they weren't even necessarily brochureware. They were just straight-up websites. You were happy that there was actually a presence online that someone could find. As we grow, as things change, obviously we've changed quite a bit, and there still are certainly brochureware sites out there. Believe me, I have clients who love that, who think that a home and about page, a contact page, is more than enough. The interesting thing is, as sites age, as all these new sites come up, and we're talking about larger sites, even something through a size of, say, an Amazon site.com, they kind of turn into, I kind of liken them to centipedes that keep growing more and more legs. And they just keep growing and growing, and that becomes a little unwieldy. And not only that, but also rather ugly at the end of the day. So planning your site, making sure that it is easy for the user at the end of the day, is something that is so important, not only from the design perspective, but also from your strategic planning of your content, your navigation, all of these pieces coming together. So that's what we're going to be talking about today. And I always kind of look at Apple as kind of one of the easy ones to say, good design. You can find everything that you want. You want to buy an iPhone? You want to get support? You can probably find it right off the bat. On the other hand, there are sites like this. Now, Ling's Cars is regularly on the ugliest sites on the internet with good cause. And this does not even really show you the true horror that's there, because there's a lot of blinking and flashing and things moving, like that little chicken walks around. Now, this works for him. This works for him really well. But this is an extreme example. And not all of us can take things to this level and still work well, which is why we're here today, hopefully finding some middle ground. Now, whenever I discuss user interaction, user experience design, it's always the unfun stuff. It's the stuff that my clients just are like, oh, god, we have to do this. Can we get to design and talk about colors and all this fun stuff? And it really is not the fun stuff. It's fun to me, but I have a strange idea of fun. So as I said, we're past these brochureware sites. And there's a number of things that really go into planning your website. And these things, at the end of the day, don't just die. Just like with a print piece, you're done. You printed 50,000 pieces. You're done. A website is a living, breathing thing. So these things are constantly changing. And they should always be on top of your mind. First off, content strategy. It's more than what you'll say. I will get deeper into all these things. Navigation, it definitely can get strategic. You can't necessarily just say about us, contact page, those kinds of things. Site maps, this may be a new concept to some of you. Maybe an old one. I'll be showing some samples of these things. Essentially, it's a flowchart of everything that lives on your website. And to me, especially when you get into larger sites, e-commerce sites, it's something that's incredibly important just so you know what's going on. Functionality, I like this phrase. I don't know. It's really like a business MBA phrase. Like phased functionality aligned with business objectives. It's all of the functionality that you need if it needs to be phased over time because there's so much work to be done possibly. And aligned with what you're actually doing at the end of the day, are you getting new contacts? Are you making a sale? All these kinds of things. Wireframes. Wireframes essentially are what lives on every single page. It's not the design, although some people take it to that level, but it literally is what's on every single page of your website. And it probably could be one of the more tedious things. And then prototypes, which are somewhat newer. A lot of us are used to taking Photoshop, bringing it to WordPress, integrating it. The newer phrase is design in the browser where designers are actually creating the code themselves. Creating functional pieces that someone can actually click on is incredibly powerful and important. So some of the foundations of user experience design. And I say this kind of laughingly because it's something that if you've been around in the web industry, you've probably been doing this for a long time. But now that there's all these bootcamps, and it's very funny because it's the thing that we've been doing, but now we have some really formalized language, business language that makes it a little more approachable for everyone else. So first off, the who. You can create personas for each of the audiences that you have. I think the easiest way for me to share it is like a nonprofit. They have staff, volunteers, constituents, employees, all these different types of people. They all have different demographics. So they're going to approach the website very differently. And then their needs. Are they going to find exactly what they need themselves quickly? And then their behavior once they get to the site, are they going to fill out a contact form, whatever it may be, did you make it easy for them? Creating these personas to kind of map out who your customer is, who your audience is at the end of the day is incredibly key. And they can actually be a person. It can be. This person is 35 years old and male. And whatever it may be, he likes video games. So he may be more likely to respond to this sort of navigation as opposed to this navigation, et cetera. Then the why, their goals, your goal at the end of the day. Do you want them to make a sale? Do you want to make a sale? Do you want them to fill out a contact form, all of these types of things? What do they want when they get there? And what do you want them to do once they get there? And will they find that path? And then how, which actually is the path? Is it e-commerce? Is it that contact form? What do they actually need? What does your website need in order to make this happen? And that's a really basic level of user experience. But it can give you something to definitely think about as you think about who your customer is and what they're really doing there and how you bring them deeper into the site. So the why, make the business case for it. You can test processes, especially in e-commerce. I feel like this is incredibly important because a lot of us may just install Card 66 or WooCommerce or something like that. Know it already has a sales page and this page and then that page. But you really want to think about other pieces of it. Are they leaving that page? Where did they go? Is the website smart enough to know they've left? You want to bring them back into the funnel, the sales funnel. What happens after the sale, those kinds of things, which may be more of like a MailChimp thing where they get an email afterwards, thinking of further purchase and then maybe encouraging them to purchase more. You can test out all of these hypotheses and processes. Testing content. I feel like this is one of the best things about WordPress and why I got into it to begin with is that you can change up your content on the fly. You can see if it works. You can maybe test different things. You can bring your clients in, if you're a web designer, a web developer, you can bring your clients in quickly and get their feedback on it because they're at the end of the day, the ones who own the website. You can also iterate quickly, which is such a huge thing these days, just getting it off the ground. So you're not spending ages in design process or we think that this is going to work. No, we can actually test it out and see. And user experience design nowadays should really be starting early in the process, as early as you can make it happen. I feel like that was one of the things that I could never actually figure out was why I was just brought in at the end of the day to pretty up whatever the programming was, which is really not the way to do it because you're leaving out so much more, but now as design user experience is being recognized more and more as an incredibly important part of this. The earlier you start it, the better off you'll be to have a really strong product at the end of the day that not only functions, but looks good. And then designing the browser, which I say kind of tongue in cheek if not every designer wants to code and not every coder should be designing, but sometimes if you have the ability and if you can create something and code it quickly enough, and I find I get quicker over time, you can actually make your ideas happen. So something to keep in mind. So going deeper into these things. Content strategy. Again, it goes back to the user. It's not about you. It's not, you know, I love me and you should love me too. It really is about what they're there for, what you can provide for them. And good content of course, you know, these things are, I think have been around for ages, but up-to-date, user-centric, useful, findable, all of those things. Navigation. I feel like this is my favorite part of things and it's something that is kind of always in flux because there's always best practices and then they change as things change, as design trends change. Balancing your site like a pyramid if you are doing like drop-down menus and things like that, just kind of the flow of information instead of just having one heavy section that may be all about whatever it may be. It's good to be shallow these days, less than three clicks to get wherever you need to be. Naming still based on keyword phrases. So you don't really want to say about us. You really want to say about Acme company, whatever it may be. You really want to put that in the URL in the title. You can of course change up the menu item, you know. One of the great things about WordPress. And forums, if you do have forums, which some of my clients actually do, if they're pushing low quality content, you know you have folks who are just kind of throwing up whatever, you may consider wanting to put that on a subdomain so that it doesn't bring down the value of everything that's going on on your particular site, your blog. And then this is a newer one to me at least is cleaning up your tags. If someone does actually link off to one of your tags, whatever it may be. But they're very, you know, it's browser versus internet explorer versus Safari or something like that. They may link to only one of them and miss out on all of the rest of the content. So just keeping clean tags. Half the time I do think that I don't really use tags as well as I should. Maybe that should be a talk. And then sight map to wireframe. And I will give a lot of examples of this. Visualizing your structure and how the users will react to it. I think that this probably makes the most sense in e-commerce sites where you actually are working through. This is how a sale will happen. This is what will happen if the sale is actually abandoned or if they just leave their cards but they stay on the site. What will actually happen? It's important to me to keep all of these things in mind, say you actually have related items they can purchase. Different things like that. There's other opportunities for upselling, stuff like that. Also, there's an opportunity here to think about what's interlinked between your pages and to give your own site more link juice, as it were. And then just consistency. I actually, a few years ago, worked on a website for a nonprofit where one of the marketing managers actually said that the navigation should be different on every page. And I'm not entirely sure what that meant because it sounded like the biggest mess I've ever heard of. And it got shut down very quickly but it's just one of those things I feel like it has to be reiterated at times, consistency, making it easy for people to find what they need. So examples. There's so many ways you can do site maps and wireframes, there's tools for them which I will share at the very end. I'm flying through this talk. But like I said, it's a flow chart. You don't necessarily have to do it this way. You can actually have, do it in Excel. You can use one of the other tools that's out there, like this. And this probably is a very heavy site but it's also one that has changed quite a bit over the years. Post-it notes, my favorite. I think it's just an easy way to kind of move things around without, and to really see it out there. And if you have a team, you can leave it up and they can kind of make changes to it which could be good or bad. Showing kind of process and where things link. I think this becomes more obvious with like mobile just because you can see what pops up where it shows up, just making it simpler. There's a million versions to it. This is just making it easier for the designer which I appreciate. Then we get to, and actually, sorry, these are wireframes. With wireframes, I know that there are people who believe you should actually have it basically designed in the wireframe and I feel like that's just nailing it down too much. In these, there's still enough room to make changes, to figure out what you want. And I think a lot of the reasoning behind having wireframes is just seeing what content lives there and what you want to say and maybe point off to another page if they want to contact or you want the contact form on the sidebar or something like that. It's just giving as much opportunity for the user to find what they need to get there. Much more formalized, e-commerce version. This is one that actually is a number of years old but it kind of gives you an idea. This is an e-commerce site that was actually done in Magento which is a tool that I will never pick up again. And if you've worked in it, you know exactly what I mean. But it's a good e-commerce system so hey, it is what it is. This is just really simple but also and actually one of the things that I love about site maps is if you are working with a client you can point out content that needs to come and when it's due, things like that. This is phase for down the line, whatever it may be. It kind of gives them reminders because I think that's probably like my issue number one for most of my clients is just making sure that they actually fulfill the content. I don't know why it's such a difficult thing. But as the site changes and grows, I think it's an incredibly important tool and I think it's one that's just kind of overload. So as an example, super simple went to, this is like the homepage for the site. Which is super, super simple and does not really show at the end of the day this is how it ended up. And it's actually changed since then because this was like 2011 so. Honestly, it just guides your process and your progress and gives you something to work from. I think one of the other big things about this about site maps and wireframes and figuring out your functionality, not only is it easier to actually figure out what your functionality is so that the client knows that, okay, we need these pieces, we need this e-commerce piece, we need to add in all of these different things. It maps it out so super simply. Here's another one. This is also a little bit older one. This is a nonprofit one. And the reason I like this one is really it gives a few different menu options. There's the home and login, et cetera, across the top that basically everyone can use. But on the left, which may or may not be super obvious, it has all of the different demographics who actually use the students, faculty, and staff, et cetera. And then down below are some of the more miscellaneous things that you may find like volunteer, different stuff like that. And then of course at the very bottom there's the privacy policy and all that kind of stuff. But it just made it that much easier to get everybody on the same page. They could find exactly what they needed because they saw their name right there. This is also a site that's been around for a while and it's split off into like Mondolees and a few other different languages. But there's the version across the top and then down the left-hand side there actually is a submenu that changes depending on which section that you're in. Again, it's a very simple site but you find exactly what you need right off the bat. Something that I'm always kind of fascinated by are mega menus. I don't think that they always have a lot of use in simpler sites but it's something that can actually make your navigation much more visual and much more effective if people see exactly what they need as opposed to trying to read it. This is a little bit older version of it but VW site, you find exactly how much the car cost. Highlights gallery, you know, specs for everything that you need right off the bat. Porsche, you can tell I'm more of a car person than anything. You can find exactly the kind of car that you want even if you can't tell exactly what the name was you can see the little picture of it and go straight to it. And Amazon, I share somewhat apprehensively because the interesting thing and they do use mega menus I think rather well. Amazon is still one of those sites that even though I have a prime membership I cannot find half the stuff that's in my prime membership without actually just searching for it. So it's a really weird site to me in some ways. Like you should be able to find every last thing but I feel like every last thing is there but I'm just not quite getting it. The thing is when you get to a site of this size I feel like you're gonna spend like 98% of your time trying to finesse your navigation and make it work and I'm sure that it changes on a daily basis and probably daily depending on who you are as a user. But it's another option just to throw out there to take a look at, see how they're organizing things. Sometimes I feel like you have to look at some of the bigger guys just to see what's possible and then you sometimes have to break those rules as well. Tools and actually these slides will be up on SlideShare and the link is at the end so no need to necessarily write them all down but some of the ones that I really like and these are all online tools. Most of them have free trials up there. Power mapper, slick plan. For wireframes I love Go Mockingbird and Balsamic and then for ones that actually do both of them UX pin and Gliffy. But also and I think it's still around Jumpchart actually does an export into WordPress which I've heard at other word camps that people loved it so it's an option. And then prototyping tools. Sketch, it's kind of a big one. Genesis Sandbox is a starter theme. Foundation, hot glue, Marvel app. Just ways to get sure design basically in function and it's not even necessarily your design but it's just checking out the functionality and making sure that it works on that level that you need. And then mobile, it's funny I started doing this talk maybe I don't know a few years ago and back then it was the next thing is mobile and now mobile's everything. So it's kind of funny how it changes in a way. What really doesn't change even though you may have worked it out on your desktop. The tablets, mobile, et cetera. You may have a theme from Theme Forest or whatever it may be that works out a lot of this stuff but obviously things that work on a tablet don't necessarily work on a phone. I feel like fat finger or is it fat thumb syndrome is huge even sometimes on the Apple site. I try and hit something and I still can't do it and I'm like, seriously why am I having I'm on an iPhone, I'm on Apple site. Why am I having so many problems with this? I feel like some of these things are what kill it for me which is why I don't end up making as many e-commerce purchases as I probably could. At the end of the day it's keeping it simple. One column themes are big. Still, if somebody wants to read something they'll read it but how much do they really want to read on a mobile phone, whatever it may be? Like I said, the buttons, that's a big thing for me so it just bugs the heck out of me. And as with any site it's just making it easy on the user at the end of the day. And I can't remember, I wish I had written it down but there are actually tools out there where you can get like a five minute recorded. You don't see the person but it's just your site is sent out to some random person and I don't know, they probably get paid for it or something but you can actually get feedback on how just a random person approaches this site. I'll try and tweet that out on my gizmo design so later I'll look for it. There are so many ways to test things and it doesn't necessarily mean that you have to have your mom look at it but just making it so that the person can actually get to what they're looking for means a world of difference. These are some older versions too and I think I was just showing these basically because it bugs the heck out of me that there are still so many sites that are still not mobile and not only is Google pinging you for this but this is the kind of thing that you see at the end of the day instead of having nice big buttons in a clear order from us or read this kind of stuff you get these itty bitty little pages of text and it just makes me run away. So don't do that, get yourself into mobile. Same thing here and these are all opportunities to grow your buttons to a certain size to make things really stand out because you may find at the end of the day that mobile may be your best place. So there's a ton of people on iPhones, it better look great for people on iPhones and they better be able to grab every last thing. These are some examples of wireframes for mobile which again it's kind of like designing for several devices at the end of the day instead of just one and here are some mobile tools especially for prototyping. I feel like prototyping is even bigger on the mobile end than it is on desktop but gives you some options and that's it and I feel like I flew through that so I'm not sure how many minutes I got left. Woo, so any questions or did I just overload you with a bunch of stuff? At the time when we built that actually there was no mobile consideration to do which was great, I missed those days. God, that's a very good question. Sometimes these days either they end up in the same menu which doesn't really feel like it works very well but sometimes they're just pushed down depending on what it is. One of the things that I love to use and I don't think, no actually they do have a version is crazyegg.com and I know that Google Analytics has a version of it too where basically you can see heat maps of where people click and they certainly do have that for mobile and I find that that's incredibly important too and that's probably something I should be adding to this talk is the testing it because your assumptions are not necessarily what's real for the user. I know I have a food travel blog client who they actually have a little map that has little points for every single place that they've been in the world and where the posts are and they recently said we hate this. It's stupid, nobody clicks on it, we don't want this. I threw on crazyegg and it did a heat map of where people clicked and everybody clicked on that map. So at the end of the day it's like you may hate it but apparently the user is finding some real purpose in this and maybe it's just a point of making it larger or making it look a little different to you but at the end of the day you aren't that person. So that may be a good test is crazyegg like C-R-A-Z-Y-E-G-G dot com. Yeah, it's just as strange as it sounds and I do know that Google Analytics has a version of it but it always crashes for me so unless you have a much better connection or something because usually when you go in there you can see one particular page. Yeah, that's the interesting thing is at the end of the day your assumptions usually are not correct even if you are the vaulted designer and you know best the users usually respond to something much different so. And anybody else has any answers for multiple menus, that would be great. Yeah, it definitely is not your typical 10 to 15 pager site. It tends to be those, I mean I would say at least 10,000 and honestly, and maybe that's more out here I'm from Chicago so you guys have much higher budgets I think I would do. Usually at this point when you are talking about these things it's because there's a redesign and what's currently there is just not working. And definitely if you are a designer line item that out because it's an incredibly important piece of it and I know for years I've just said hey it's okay it's part of the process of building a website but nowadays there's just so much more to it and like I said before there are verifiable like business processes with this you can see a verifiable result from changing your site up using the content strategy and changing up the navigation and the design working in a certain way that it's a completely different ball game I think it just kind of in a way verifies everything that we've been thinking and as we've been building it so. A lot of what I do on my own is usually and that's like the million dollar question literally. A lot of what I do is on my own is smaller projects or smaller sites definitely. Usually it's when I'm working for agencies and the funny thing is actually one of the agencies that I work with they're really seeing the need for this because they were torn between hiring a front end developer and then finding someone who actually is really versed in UX and that and they find that the UX is much more profitable and more interesting to them than anything else because you really are guiding the project you're not just letting somebody say okay we want an about page and you're gonna put the CEO's picture on it and that's the end of day. It's like no this actually is what you need. I think you can just better position yourself. So I'm sure that there are but I don't know them off. Yeah, ooh that's a good question. There actually are a few plugins and I can't remember them off hand. I probably should tweet those up as well. It's not something I do as often as I probably should. I'm usually more the and I do this much more in my own sites that I have is just okay I'm just gonna hit the button and see what happens and kind of mess with it. Yeah that's a very good question. If anybody else has A, B testing tools then throw out there. Yes, oh I'm sorry. And I completely forgot all of their questions. So yes that's anybody else? No that's a good question. I mean for me it's just a, sorry? Oh sorry it's basically mobile scrolling if it's how do you determine that on desktop versus mobile. I think for me it's just an annoyance point. Like I said I feel like you don't necessarily know what you don't know and so the user at the end of the day maybe the best is the best person to answer that. I don't know I feel like I don't know if there are there probably are answers out there like if you do three thumb scrolls that's the end of the thing I don't feel like even if somebody really loves your content they're necessarily going to hit every last ounce of it which is probably why there are those go to next page, go to next page annoying articles that have like 20 pages for like a article that has zero content to it so that may be my best answer, test everything. Did I get you everybody? Oh we still have five minutes so I don't need to talk I can sing and that'll get you out of here really fast but yeah I'm good. You can find me on Twitter gizmo design like I said I'm gonna be tweeting out I'm gonna find you the names of those AB testing tools and also the other tool that I completely forgot about that I'm sure that I will remember at some point but I'll be tweeting those out and I love to see people's comments and all that kind of stuff so that would be fabulous. Also there's an old version of this up on slideshare at slideshare.com slash gizmo design I'm gonna put up the new one right after the talk so yes thank you, thank you Santiago, you're great.