 This is the design panel where we have a bunch of WordPress designers here today, some of which code, some of which design. So we're going to really dig into processes and tools that we use and best practices of design. So I'll introduce myself first. I am a partner and creative director at Green Melon Media. My team is here. We've got Mickey and Chantel. Oh, Ashley's not here. Oh, Ashley. And Susanna. And we have a studio in Marietta just right off the square. Let's see. We do more than just web. We do branding, print design, content strategy, SEO, and social media management. Let's see. When I'm not hanging out with these guys here, I'm hanging out with my husband and my dog in Marietta. We have Jill Anderson. Jill has been a freelancer for over 13 years. She works mainly with other creatives and has a passion for creating beautiful and innovative websites. She focuses on clear positioning and positive user experiences. She loves typography, code, and all things WordPress. She lives in the Atlanta suburbs with her husband and her five-year-old son and her cat, Peanut, who is also the chief paperweight. Tom Tortorici is, he does design, writing, marketing, and messaging for both web and print. He tries hard to approach things from the vision of the visitor rather than the actual designer. There are two very different things. He's taught graphic design as well as strategic copywriting. At home, Tom has a wife and three cats and also a vast collection of media, communications, and computing devices from the late 1800s until now. Cliff Seal is the senior UX engineer at Pardot, a Salesforce company. He's passionate about keeping people at the heart of UX. He will design, code, and research to make that happen. He also happens to be the resident WordPress developer. There's Ashley. He also is the co-founder of multiple profitable side projects such as Evermore and TuneDig. He co-organizes a meet-up called AMUX, which is focused for local UXers. He lives with his wife, April, and I believe that's her birthday today. He can be found around Atlanta. He can be found at a concert, cycling around the city, or playing guitar. I also have a cat. Am I the only one without a cat? We had to give my cat a one. I'm going to go through some questions and we're going to answer them. Not everybody is obligated to answer. We'll just jump around as we go. If you have any questions, jot them down because we'll have some Q&A time at the end. I want to make sure to get everyone's questions as we can. We'll start with the first one. Why is it that you like designing for WordPress? Is it the interface? Is it the backend dashboard? It's nice having a starting point rather than starting from scratch. It's nice that the more we know, the more we can do. And it's nice that there's a lot of flexibility that's going to work. Well, it's for the video. I like using WordPress just because it empowers clients to be able to update their sites. So why not use it here? Maybe just leave it on the table. Just give it a try. Yeah, and I agree. Yeah, please. Speak up. If you can just shut it, that'd be great. Okay, so let's talk about when we're actually working with clients. You sit down with a client, discovery, meeting, what have you. What questions are you asking them to really get inside their brains? Because design can go so many different ways, right? And just because you have a vision doesn't mean the client shares that vision. So how do you really get that out of them? I start by asking about product features and competitive benefits, but I ask the client to answer from their customer's point of view rather than their own internal point of view as an employee, and that kind of shifts the mindset to make them understand that the website is for customers, not for them, and very often the gems that come out of those conversations end up driving the direction of the website. I like to ask about goals and budget ahead of time so that we can map it to what do you want to accomplish, because I really like hearing how people can actually set out business goals and try to map things together. Surprisingly, a lot of times you'll ask people to come up with, give me one or two actual business goals for whatever you're trying to design, and they struggle to come up with an actual goal, which means that there's no success criteria, which means it really doesn't matter if you do a good job at all, which is tough. Whereas with most people, if you can ask them a few times to be pestering on that question, you can eventually get them to map it to a specific goal, and I feel like that really then you get to focus on the visitor and you can channel it into something that helps. I agree with Tom and Cliff, of course. I also like to ask what's the number one action you want your viewer to take? You can definitely keep that in mind with the design. That leads to a question about, a lot of this comes into play with messaging as well. There's a balance between good design and good messaging and actually having that call to action somewhere where people will actually see it and act and convert. How do you see the balance of messaging and design when creating a WordPress website? I feel like messaging really just needs to come first and also realize that there are early stage buyers who maybe don't need a lot of information. They just want the highlights and then there are later stage buyers who want to dig a little bit deeper. So if we offer messaging starting out with early stage buyers, getting the important messages in headlines at the top of the homepage and that in turn kind of determines priority and sequence, accompanying headlines and text and I think good design makes that all seamless. You made an interesting point. Messaging should come before design. And we always find that messaging is the biggest bottleneck in our process. If you rely on the client to present content, it could take any number of months, right? It's just impossible to really guarantee that that's going to happen quickly. So working messaging at the forefront, then that's super important. Any other thoughts on messaging? I think it's important when you first visit a site that it says who you are, what you do, why it matters. Getting that out there. They did a good job of critiquing that at the last panel. If you guys were in that panel in the large room about do you have spinach in your teeth? Just really the first thing that you see when you come to the website, do you know in 30 seconds exactly what you do? And that's so important and it's so easy to forget if you uncover their goals and what you want that key action to be, it's important to make sure that that is at the forefront of the design through the whole process and not to forget that. That's the whole reason you're doing this for them. That's a good point. In fact, your main banner headline really should get across what you do and why specifically people should be interested and hopefully get some keywords in. So that's a lot to fit into a brief headline but that's part of the challenge. But there are a lot of companies, they've got websites from the client's point of view. They know what they do so sometimes they'll start getting into benefits whereas somebody, an outsider, will look at and say, okay, what do you do? And if you really look at a lot of websites, it's not that clear and even just putting what you do in the logo isn't even quite enough because if you look where your eye lands on the page, it doesn't land in the periphery, it lands a little further in. So the eye can really skip right over the logo and not even see what you do if the only place you have that is in the logo. So it really has to be in that first headline. Well good, I'm curious what each of your web processes or what each of your design processes is. Everybody follows something different. They start from a different platform. You know, what exactly do you do from the beginning of the design and into development as well if that's, you know, you go there. Also, I do a lot less of that whole process nowadays but especially when I did and when I've run larger projects, I like starting with those, let's write down business goals and let's have them so that we can always come back to them and everyone agrees to them and they're written down and they're there in their final and if anybody needs to change it, let's come back and make sure everybody still agrees on it before we go forward and kind of work out from there and get messaging as a big part of it. But I like to say, like, we talked about knowing what the site is about very quickly. So a couple of nerd stats. So in a tenth of a second, the human brain judges what it's looking at and we've seen that in web studies and so people are immediately kind of making a snap judgment about whether something is worthwhile purely based on what they're taking in visually before they even start to, like, consume that information. And then within about ten seconds, they're usually making a decision as to whether to keep reading or not. And really the goal, especially if you're selling something, especially if you're selling a tool, you want people envisioning their problem being solved with you as the solution within those ten seconds and then the rest of it is just captivating people. So to me, most of the design process centers around getting people involved in that vision and figuring out how we can get people there and then the rest of it kind of falls into place because to me, most of the design process is getting rid of the things that you think are important because they're actually not and then helping focus on the person that you're actually selling things to you. Everything kind of falls into place eventually. There's nothing worse than when a client asks for everything to stand out. We want this to stand out, but what about the site bar? But what about this? And you have to make sure you bring in force that the goal of the site is this main message and getting that refined. Process. I actually start with a questionnaire with my clients and then I make them fill that out and then we have a kickoff call for everything. I find that when I have clients actually write out their own feelings and ideas about things, it kind of sticks with them. Yeah, kind of that idea that once you state it, you know, they're going to follow that. And they think a lot more when they're writing rather than just spitting out ideas. It's good to collect those, but when you have them in writing, it's so much more concrete to them. Yeah, and I like the part of them filling out this questionnaire beforehand and then I was talking about it. I get a lot from that actually talking to the client about what it is they want to achieve. That's where I start. I'll approach that question in a different way. Say after the discovery and initial selling points are determined, I'd start with the process with an outline with the various pages, the sections or layers on each page and the elements in each section. And spell that all out and then prepare all the copy, prepare the images and then building the site to start from the top of the outline and start building down and since all that prep work is done, that process actually goes pretty easy. I'm with you. We do something similar. We always start following discovery and our questionnaire that we do as well. We always do a site map outlining the navigation so that the client agrees on right then and there exactly what pages are going to be on the site and there's no surprises down the road. And that's really important is, you know, making sure that things are approved as you go through. It just makes it so much easier. You don't want to get to the end and all of a sudden have so many changes to make because the client was unaware of exactly what was leading up to this design. I was just curious what boards you used to create the mock-ups or did that design like you were talking about. I know there was Basalmic, some people used whiteboards Photoshop examples templates. I actually used Illustrator for my mock-ups because I come from a print background to find that program easier to use than Photoshop. Yeah, I start my we use a program or an app called SlickPlan to do our site maps. That's prior to wireframing. And SlickPlan is really slick. It helps you lay out exactly the hierarchy and a flow chart of what pages are on the site and you can add little notes stating what features are going to be on that page. So it helps you really think through the flow of the site and usability in general because it's so important to think about usability before, you know, really getting into design. And then once the site maps approved we'll do wireframing and I use Illustrator as well for wireframing. I try Balsamic and I'm just handicapped in it. I'm so comfortable in Illustrator that I'm able to move things around so much quicker and more free. So I default back to my programs just because it's my comfort zone. I don't know if you have any other wireframing tools. The best tool is the one you have with you. Yeah, it's paper and pen. That'll work or whenever I feel like pulling up at that time. I do tend to use, at this point, a sketch for almost everything. It's no better than any of the other tools. It's just, I learned it this year. So now I try to use it. Challenge. Sure. Those are my tools. Those are our tools to use internally. We've floated around a little bit. I used to do site maps in Illustrator. I would just draw my boxes and then Slip Plans changed my life in that way. The neat thing about Slip Plans is once the client approves it, you can export it into PDF, send it to them. The notes can be little annotations in a PDF. But once they approve it, you can export it right into WordPress and it keeps that page structure for you. So that's a really nice feature. And from there... So it'll actually create these pages based on? With the notes. The notes that are in the Slip Plan that you put in there with features, you can actually become the body copy on those pages, which you'll have to go in and obviously flush out into the more thought out copy and features. But it's a really good starting point and helps you get all of your thoughts and work with it. We do pay for it. There's free version. Free version of Plus 5. Starting at $6.99 a month. Yeah, and you've got a limit on your number of websites. Slip Plan.com. They do not pay for it. I'm like the bigger sponsor, Slip Plan, for a design panel. They're totally transparent. AOLize their website. See exactly what... Good, yeah, there you go. Everything's up front. They do say that if you're selling services, the first thing that somebody will look at is pricing, so keep that in mind as well. I mean if you have a service oriented or product oriented website, pricing's going to be the first thing to click on. If it's service oriented, they'll probably go to your About page first. So just key things to make sure are in your site map as you're going through it. And that's what you think about when you site map. Exactly what pages need to be involved in order to accomplish the goal that we define. Any other questions? Okay, so we talked about tools, which is actually going to be my next question. So plugins. So plugins that make your design life easier or there's a loaded question because there's so many options. But I don't know, design. Is there anything that you use to help you in that? Design rather than functionality. Or functionality. US, you know. I mean backup buddy for backup. Search and replace can come in real handy. Simple 301 redirects can come in handy. I have a couple of kind of boilerplate themes that I can start with that include major frameworks like Bootstrap and things like that. So even if I'm not building out a whole site or application in Bootstrap, to me it's very helpful. That's kind of a nerd. It's easy for me to code my way to a design most of the time. So I end up kind of building it that way. So with front end frameworks, I can easily kind of build out layouts and get a pretty high fidelity idea that I can build out kind of a mock that way. And so that's kind of the way I can step into design and do it a little bit different. But I have a much less refined process than professionals. But a lot of people do that. They're designing in the browser now. I fear for Photoshop in the design world that it's always going to be there for photography. But so many people just design in the browser. There's the whole mobile first approach as well where you think about how it's going to be viewed on a mobile device before it gets to a full desktop screen. We're seeing that 50% plus of the visitors on some of our sites are mobile users now. So it's so important to be mobile responsive and to think about how things are going to bend and flex on a mobile device. But for plugins, I know there's and you're going to have to help me, Mickey. There's one when we're designing a site you can put a coming soon. Ultimate coming soon page and others. If it's a new site. If it's a brand new site starting from scratch we'll do a nice ultimate coming soon where if you're logged in you see the site. If you're not logged in like everybody else in the world it's a coming soon page which is an easy flip. I'm also using that as a maintenance right now. These people are going to take down the current site before a day. There's also a maintenance option you can do on that site. One plugin that I'll use too that helps the users is custom health boxes. And you can put those into the admins of the user season. You can even embed YouTube videos of how to use the features of WordPress and stuff. So that's been really helpful. I've seen some things like that. Custom health box I believe. Is that right? If you do a search on that it should come up. The title of the actual plugin that I use is a little bit longer now. I can't recall it right now. I have a question. So on that note I'm curious if any of the folks on the panel need to test driven UX development? Some AB testing. Any particular things to test whether or not certain things that they're putting out are performing the way that they expect? We just did a deep dive into AB testing plugins. I'm not going to be able to recall any of the ones we looked at. There are AB testing plugins out there that allow you to change. It's more the color of the button one will see a red button one that blends nicely with the site and see exactly how users are reacting and which ones they click on and then obviously go towards the one that has a better performance. It's really fairly simple. Crazy Egg. There's also heat mapping. I don't know if you're familiar with what a heat map looks like. Is it a plugin? Crazy Egg is what we've used and it's a plugin that allows you to track where the user is clicking most frequently and it uses a heat overlay to show the red areas are obviously where they click the most. That's how, other than analytics it's another good way of seeing exactly how something navigates the site what they click on. Crazy Egg? Crazy Egg. Crazy Egg. So that's a good one. There's another one called mouse flow that's ridiculously full featured. Look it will take videos of people on a site and different things. It's kind of crazy. Mouth flow. Not of the people of mouse. So you can see where people are going. Watch the light on your camera guys. No, there's a point. My wife doesn't know. You said mouse flow. Mouse flow. And they have a free one too. Another one we use sometimes. We use studio press for most of our themes. The Genesis framework and things like Genesis visual hook guide. There's a lot of hooks you can use in Genesis to just stick content places. It can be confusing if you're aware where a hook is going to land and it'll just expose them all on the front of your site and label them all pretty ugly. But then you say, oh it's going to go here and you can use that to help build things out. Yeah, and I think Russell that was he asked that question right. I think you were also talking about maybe testing a design before you deploy it and it's a really good option for everybody. It's called PEEK. I think it's from usertesting.com. So basically you can do one or two a month for free but you basically just pay a stranger to go through your site and look at it and tell you what is this site about? What do I want to click on now? I'm going to click around. Just people who are trained to talk through things. It's extraordinarily helpful either for an existing site or for people who are trying to figure out if the design is actually accomplishing what you're trying to do. I had them look through one of my sites and what I was hoping to hear was that they would look at it and know what was going on and instead they were kind of like I don't care. So I'm going to click around and I don't really know what's going on. It was very helpful feedback and you can get it from multiple people so you can kind of get the concept that gives you really honest feedback. It's a really helpful way to kind of point out some issues that you might have. What was your goal? Peek. Peek.usertesting.com There you go. Even at like usertesting.com you can just go and upload it in a jpeg, like a screenshot of your home page and you just ask people what is the site about? See if they can figure it out quickly. It's really useful for making sure your main message is going fast quickly. I like that. Any other? I have a different question specifically for Cliff. I'm noticing this kind of change from home pages with sliders on them and all this craziness about the goal to kind of what you see up in front of you which Cliff by the way did a great job of working at the land site. Thank you. Thanks. What is the more quirky image kind of above the fold and kind of a more still home page and you see this kind of trend where there's like a button in the middle and this big image. Can you just talk about that for the specific kind of trend and web developments and kind of where we're going with that so I think in general the move from because sliders have now been replaced with ridiculously huge images all over your home page so it's a new fad in a different day. The intention I think in getting there is what we were mentioning earlier about being able to quickly parse what a website is about so images can tell you a lot more subconsciously much more quickly and so the big image is more about setting context that you don't really have time to read so if it's done correctly an image can tell you how something should feel or how you should feel about it or how you should approach what you're about to read specifically with this website one of the things I wanted to do with this banner image which I made was to kind of set an idea for people especially who hadn't been at WordCamp before or who were worried that it was very developer centric to try to give basically a non-text way of saying it's not all about that it's a little bit more casual you can kind of bring whatever tools you have with you it's not all about code and so even though we could do that in copy in theory like using a powerful image one way or another is kind of a helpful way to push people in the right direction and so I think it's also very impactful for websites that are not like this for people's faces or you see them doing something on a good website it's making you feel a certain way before you start reading the copy and figuring out what you're interested in but is that counter what he was saying or what you were discussing earlier about the messaging this messaging action headline exactly for finishing this absolutely headline the main message is should be the first thing they say what you do and what sets you apart what I find with the big visuals are yes it's setting a tone and a feeling but I'm not sure yet where we're going what it's about I mean it's just setting the tone I think it's the combination of those are conflicting views I mean if you first look at the banner you can't tell what the company does or why they do it why they stand out then basically we haven't accomplished what we're supposed to just combining the two like a nice large image with text on top of it I don't think those are in conflict at all one's a subtle way to get to your messaging a little bit more quickly if you do either one of those wrong you've kind of messed up the messaging totally which is why stock imagery and things like that is difficult because if you've got great messaging and then like four business guys high-fiving it's such a weird tone I don't think they're in conflict at all they go together Cliff had mentioned big banner images I mean they're great they're impactful but something I mentioned yesterday that I'd really still like to see a little bit of the content underneath peeking out and it's kind of a visual cue to keep scrolling otherwise people see that banner image and they might not be sure well maybe there's something else maybe I'll just click the back button I don't know you know it's a very quick decision is that something keeping mine too let me go with her first in a way we've got the logo here we understand it's word camp etc but for SEO would you label the image in some way for it to be searched or where else do we have you know if you want to get the message in if you got it in the image then you've got to have it someplace else don't use this as an example for what you should do this is an exception right everyone who's coming to word camp already knows that they're coming to word camp so I had a lot of freedom in not having to convince anyone to go to word camp we sold out tickets in like seven seconds right so don't use this as an example you're right good point well when we were doing the websites the other day the fast the other one guy had his logo the information about mass fishing and stuff was in the logo well it didn't show up in the Firefox browser so he really I told him he needed to get that message in the copy before the photo because of the way it was loaded in that browser yeah it's important to do cross browser testing you know anybody who once you get the website program to a point where it's in testing mode test it in IE, Firefox Chrome, Safari Opera you know just keep on testing it and making sure it's mobile responsive and reacting the way it should it might have been the internet too yeah it might have been the internet as far as SEO is whatever you load in an image into the media gallery you can also put the title there you can see the titles actually pop it up and that's not as big a deal okay let me go with him real quick just because we do a lot of seniors and people who are not very internet savvy and design going towards large clear buttons very simplistic layouts is that one is that here to stay and two are there best practices and guidelines according to like a you know American Disabilities Act and people who have vision trouble to access websites is there any sort of information out there if there are people thinking about that senior it's a real good question but it might be a little bit too specific for what we're talking about today session about accessibility you missed it it was a good talk I mean certainly tool tips because a blind person that looks like can be read to them and if there's no titles on the images then the image is just blank you know same with Google Google can't read an image but it can read the text that's associated with the image properly naming your images there's a title when you upload that image you just make sure you get it in there and it's hard to always think about it because you're going a mile a minute throwing images up and resizing them and you know at the end of the day it's a good thing to double track yes it's just real quick I'm a Mac user and I'm talking about cross browser cross browser testing and I haven't been able to test on internet explorer a long time yeah is there like a tool for Mac that you can use I use browser stack yeah that's right I use hangouts to mickey browser stack is it ietester.com that'll give you all the versions downloads you can do a remote desktop or whatever with ietester you can download for windows I know that will let you test old versions but I'm not sure I don't really help Mac users you can get a remote one I think it's a virtual machine yeah so maybe you should explain that right so like you can download a virtual machine that'll run on your computer and it's just like a windows computer in its own little thing and ietester gives you all the packages so you don't have to spend money on windows right also don't try what they're talking about unless you have a pretty modern computer because that's basically downloading and running a computer inside your computer and if your existing computer can't run the computer that's there it certainly can't run too at the same time oh wait for one more computer I think you said it eight times we're almost there but if you can check out parallels I think that's what I use at home parallels for the Mac you can get parallels from Mac and then go to and get the free windows thing that he was talking about you had a peanut butter and jelly sandwich it's a bit of a resources strain and at one point browser testing ietester would give you browsers back for three months so that's useful too it's kind of less of an issue like WordPress and the frameworks that we use like it sounds bad but I'll probably launch websites without browser testing just because I know the framework works I know the sites we're using in WordPress so I'm just used to it working everywhere if you're an IE it's your own problem they're killing it anyway they're killing it anyway we're changing the name mobiletest.me is a good one for checking the local devices actually what is the plugin that we use in Chrome for viewing resolution view resizer it's a Google Chrome extension it gives you all the different options for screensets to resize I don't think it's on here oh it is on here, is that it? it's one, I think it's that if we get to test or something it has to reload the site so the wifi holds up there's also responsivetest.net which will test it all in a different response testtest.net yeah there's DevTools has a lot of it this little extension up here that actually just had the name of and I've already lost it view port resizer I can click each resolution and get it all the way down and that is mobile we're in this sorry it's your site I actually have every one of your sites pulled up it could have been anyone of you one other thing to keep in mind is not only different browser widths but also different browser depths a full banner image that looks great on a desktop might get cut off half way in a laptop, especially if you've got several toolbars open so you gotta consider that too you might not see even the entire banner or like the problem we had with this site where we added too many menu items on accident and the expanded menu overflowed the height of a normal mobile browser and then disabled you from being able to do anything else so yeah that's a good thing to ask for yeah like when you when it was in mobile and you expand the menu and it dropped down so there were like 47 things in there one time and it was impossible to get to any of them could you click scroll there's tons of pop-ups that do that so wrong and you're just like ok I'm closing the browser and do anything let me get Jason hi two part question because I just thought of another question have you seen any kind of trends for navigation such as sticky headers or any other kind of navigation trends that you might see you know for mobile and for desktop and then we just touched on it the below the fold myth is that a myth how much weight do you put into that and I've read people much more than me it doesn't really matter because we kind of strain it to scroll target but a lot of minds say everything needs to be above the fold but it's hard to do when there's so many different device sizes and screen sizes I want to hear what your opinions are on that people do scroll but I think probably the most important factor is to have such a killer headline initial banner image is that you make them want to look more and yes people will scroll if you engage them and if your banner doesn't take up your full depth yeah I think my response would be people are naturally scrolling so much more now because of mobile devices and they're just used to that motion so they're getting trained to scroll so it's becoming less of an issue with the above the fold it's about training our clients that that's no longer quite as valid the fold is dead like where is the fold cannot determine what that's going to be with all the devices out there but having said that still items above the fold have more visibility than they just do it's still a consideration but the Green Mellon site alone our website alone has over a thousand different resolutions that view our site yeah and so it's difficult to actually define where that line is anymore but of course the top, the header area is going to get the most eye traffic right and I didn't think that at this point we're probably more used to scrolling than doing a lot of clicking which brings up another issue that I've thought about lately is we set up all our navigation menu items drop down menu items all nice and neat but when you go to a site how many of those do you really click you know so I'm thinking that well one thing actually one statistic I read that number of pages per visit is like 1.3 or 2.5 which is terrible so I'm thinking that you really need to include promotion for your important pages right on your home pages people scroll have a teaser maybe a headline a visual to point out your most important pages because we really can't depend on people going through our top navigation we've got to promote those more important pages not only to get more page views and draw the visitor in but for the sake of analytics to get more page views per visit and you know how I approach that because I think about that during wire framing kind of see it as a puzzle and I look at the site map which has already been approved and I think about what the most important messaging pieces are and I lay them out whether I whiteboard it or I just write it in my sketchbook and those become my puzzle pieces and it's all about getting them to assemble in a way where there's a hierarchy of importance from header you know throughout the copy and that's the you know that's I then present several different wire frame options 2, 3 with the puzzle arranged in a different way and that's where you can maybe do some of that user testing as well you know like where are we are we really taking in what the sites about at that point so since we're talking about menus and navigation I'm curious if you guys have any tips partially from design partially from first setting up menus so that they're expandable by the client because we'll run into that a lot where the menu you know look perfect with next number of menu items but then when they want to go add 2 or 3 more it kind of breaks the design and the flow of the site I did not have an answer to that how about the menu are we going to turn off the menu feature now as well on the back end okay once once we should have two different layers of nav menus and one could be products and others could be you know website features one of the things that we've been using is the mega menus and then you've got tons of space and you can also create different columns one of the sites that I did recently had six different columns you can put the links, product links so you've got tons of space there keep in mind that if they only used the first two columns then there's going to be a lot of more white space there but I mean it's something that kind of got a nail down in the site map exactly I think it's also about educating the client that they don't need that many choices I'd like to tell my client please no more than seven items seven is a luck that's why we site map first yeah well it also brings up in mobile the little hamburger icon which is a solution for designers and developers but it's a terrible idea for users because it basically buries your content I don't know what the solution is I'm just writing about it yeah and what they're saying is having the word menu rather than the hamburger icon is usually better because it's pretty clear what that is didn't they test that though and say it didn't matter think about it this way I've never seen a test in which the word menu didn't perform as well or better than the hamburger icon so you'll see now a lot of new sites that are being designed and published are moving away from it they're adding the word menu to an icon they're replacing it they're changing the icon to make a little bit more sense they're moving away from that icon in general it's a helpful thing Facebook have this they've moved away from it they're putting words next to it and they're the people who started it too Facebook started that bad and then they stopped doing it what, the hamburger? Brad had a question what do you think the biggest UX problem we have to deal with today is too much content there's a balance and this is also top of my head but there's a balance between SEO and having a copy heavy site that has keywords in there 350 words per page plus to get Google to understand what that page is about and a tasteful light white space design so finding that balance is tricky and I think it's a challenge with as copywriters come in wanting to really stuff those keywords in there to get rankings if you want them to be clean and succinct of course that question in another way when people come to your home page they have a nice home page experience but if the first page they land on is an internal page a plain WordPress text page is not very inviting so I think in these days that all your major product pages or landing pages should be set up like home pages it's not a coder but it's why I use Divi, a page builder theme it's pretty easy to create one home page, duplicate it swap out the copy and now I've got a nice home page look for all my major major product pages much richer experience not only for people who come into that page for us but for anybody looks at a plain text page just is not pretty and not inviting I have not used it I haven't had a need with my clients but how does that work on a mobile? it consolidates into a hierarchy instead of a a lot of the doesn't it just totally obliterate the site behind if you have a program like WD does it will take the main menu items and list only the main menu items you could have like the sub menu collapse when you tap on it explain again why what is the advantage of the mega major you can hover over and get a lot more detailed links you don't have to do as many click throughs to get to what you want that's more for our users and people who know exactly what they're looking for and you want to see a lot more details as opposed to a channel where it's just a drop down it's just a word or three words yeah our mega menu expands out into a hierarchy rather than trying to break and blow out luck and write we use a plugin called uber menu for our mega menus uber menu and it performs pretty well you have to tweak it obviously to get it visually how you want it but I want to go back to Brad's question he asked about big UX problems that we're facing so my day job is with a huge software company so I design software for people who pay for it or who pay for access but websites or software to me the biggest issue is as designers we have an entire we have entirely failed to communicate to other people what our job is important how to empathize with people how to understand their perspective like so nerding for just a second there's a thing called the illusion of explanatory depth that people have which it's this they see websites and so basically they feel like they know how to create a website that will do what they're trying to do people figure this out because they ask people who ride bicycles if they can explain how a bicycle worked and people started to because they thought that they could and they realized they had no idea this is what people do with websites and so the problem is most of the way that we come in and try to convince people as designers that they're wrong is by just being like you're wrong also I'm right right and we take this perspective of like you don't really understand where I'm coming from I'm not going to listen to you you should listen to me and whatever but it's much better when you learn how to communicate with people why you're doing what you're doing because they will give you insights that you don't have and the reason you don't have those insights is because you're not building a level of communication with people so they can be honest and try to figure out how to talk and so like as designers it's the communication gap between what we do and the people that we're working with to accomplish something we failed at that horribly the internet is full of designers being jerks and clients and about the people that they're designing for and it's funny sometimes but there's very few people working on actually making the communication happen so do you think you can do that through users does that solve the problem or strangers I do that by not being a jerk quite honestly like I have to work on it I have to not be a jerk when I say stuff and I have to work on communicating with people and letting them be comfortable asking questions and setting a context where they feel comfortable talking about things that they don't understand I think that's like the biggest component of it it's just taking that approach when you talk there's actually a good book about that by Montera Designs a Job one of the book reports where's the book Cliske gonna write it Cliske gonna write it the second one's really about that design is a job I haven't read his second one but it's really about like that one's good too but it's more it's less from like what you do as a designer yeah design is a job one of the book reports design advice clip you need to do a session about modeling one of us can pretend to be the client and then you tell us how we should talk to them and it's about it's doing research and knowing the statistics there's so many times where the client turns to you and says well what do you think you know and you can say well visually we like this but there can be statistics there's data behind why it's better so knowing that information in order to communicate it to the client gives you know validity to the conversation who question what you do guys I think we need to wrap up here they're going to want to start coming in for the next session so real quick tell us each where we can find you online and I'll go to your sites as you just go through Jill okay Tom tortoiseeink.com and Cliff there's a lot of alley green yeah and green melon media so thanks guys so much thank you