 Okay, so welcome everybody. My name is Heather Neff. I am a graphic and web designer who works strictly on Squarespace web design, but I came to this by working for years in the e-commerce industry up in Boston. My background is all in graphics, fine art, and user interface design. And through the use of doing tons and tons of custom user interface design in Photoshop, I became really interested in user experience design. And over the year, I became a user experience designer as well. So I got about 19 years of experience, and I run my own company called Neff Creative here in Asheville. So I'm going to get right into this because we only have 45 minutes today. So what is user experience? So I'm going to read this so I can define it for you. User experience design, or UX, or customer experience is the process of enhancing the customer's satisfaction by improving the usability, accessibility, and pleasure provided in the interaction between the customer and your website. Depending on how your website or software is designed, the user experience can range from delightful to downright frustrating. So this graphic I saw a few years ago really summed up what I do. This also kind of explains that you can design and have an experience outside the digital realm in any type of format. So again, this kind of really explains how a user experience designer might think they should design something, and then the users tell them how they really should be designing something. A great example of being a user experience designer is when I talk about being a customer at a restaurant. I can go as a user experience designer into a physical restaurant, and I get seated, and I eat, and I have a whole enjoyable meal. And what I'm actually doing is secretly critiquing every single aspect of it, from the waitstaff to the major D to how clean the bathrooms are. All of these little experiences add up to how I would have a positive, a neutral, or a negative experience with a restaurant. And then that, it actually affects how I might come back to the restaurant and enjoy it again, or I might go online and leave them a one-star review. So everything you do in life, every app that you interact with, every website you interact with, can be either a negative, a neutral, or a very positive experience. And what we're trying to do today is to make sure that anything that you're designing is going to be a very overwhelmingly positive experience for your customers and your clients. So as user experience designers, our main job is to make sure that everything is really intuitive, it makes sense, everything works, everything loads quickly, and you want to be the voice of your customers. So I pretend to be the customer, put myself in their shoes, and I walk myself through your forms to sign up for your software, or whatever it might be for your service. And I want to make sure that I advocate for them and their needs and what they're trying to do, and make sure that everything is easy for them. So I'm also going to explain first what the difference is between a user interface designer versus a user experience designer. UI or user interface design means that you're either a graphic or web designer, and you're actually building out the branding, the colors, the fonts, everything on the interface. You're in charge of making how it looks and how it feels. Now a user experience designer usually starts one step before that with wireframing out each of the applications screens or the websites, so you know what the site structure and the architecture is going to look like and how things are going to flow. These particular job titles can be two different people, or it can be the same person. I happen to be a UI UX designer, so as again my background is in user interface design. I learned about how people expect navigation to flow, where things should be, how to design better buttons, and all about ADA compliancy, so I take my user interface design skills and also do user experience design. So UX designers will work in programs such as InVision, Sketch, or Adobe XD, and what we do is we create bare bone prototypes that would have no branding, no color, because that way no one's focusing on things that they shouldn't be focusing on. What we want to do is actually mock up each screen as bare as possible, and then hyperlink buttons and links within each of the screens, and then create an actual interactive prototype that you can then upload and share with colleagues and everyone can see how the application website is going to function before we actually even begin programming or coding anything, which is a really good time saving way and also a cost effective way to design everything you might be working on. So design the website for the user, not for the company. Make everything easy for them. So the goal of a user experience designer is truly to make it super easy to do business with your company. My job is to evaluate different ways that we can remove obstacles and to speed up the process and make it super easy for you to do business with us. For one example, I used to do contracts as a freelancer and I would send someone PDF and they would have to print it out and sign it, and then they would have to take a picture or they would find out, they would have to put it in the mail and snail back the contract and I said this is ridiculous, this is way too time consuming, it's hard for them to do. So now I use software that of course allows them to just type their name in and hit submit and then it sends a PDF to both parties of the contract and that made it easier for them to do business with me. So that's an example of kind of speeding up the process and making sure that how can you make it easier for people to do business with you and your company. So my motto is don't make them think. So people don't really actually read the internet, they don't actually comprehend the internet. So when they're going through your website, they're scanning, they're doing stuff, but they're not really really focusing on the details. You might have spent a lot of time on a paragraph that really explains what you do, but they're not actually reading it. So you want to keep your site to be answering questions in a way, but bullet point them out, make them super super simple. You want to make sure your site loads fast of course, we're going to get a lot into that because it's the number one thing we have to worry about. Your site's responsive. This is a no brainer now to have a tablet and mobile friendly. You want to have intuitive navigation. You want to make sure that every single folder and drop down makes sense, that it's labeled properly and the titles of the pages are going to lead them to where they are. You're using common language. You're not using some type of specific industry term to you, but something that everyone would understand. You want to make sure that you're using professional graphic designers or web designers that we're going to make a very beautiful branded website. You don't want to have anything that looks not so good. ADA or Americans with Disability Act. You want to be as ADA compliant as possible and we'll get into the specifics of that. You also want to have really clear call to actions right now. Google's changed over to how they like to have buttons labeled. They used to have read more or learn more. Now they're looking for a really specific thing for the user. What they want to do is tell the user what's going to be on the other side of that link. I want you to revise and think about all the buttons and text links you have on your website to evaluate them to say does it make sense to the user what they're going to get when they click through because Google's trying to avoid higher balance rates off pages. Customer service. We're also going to get into it a lot today because customer service is a really big problem for a lot of companies. I really encourage you to make sure it's easy to find that the customer service is timely and it goes way and above the normal average customer service. That's crucial for user experience. When you're also designing forms I want to make sure you have thank you pages. Have your contact again once you say thank you for contacting us if you need to reach out. Here's our information and do a custom thank you page. You also want to just be timely with your follow up to your clients. This is this basic business being kind of timely with your leads and then also you can set up within a newsletter program automated drip campaigns which means they drip out over time. You can go into a program and set up emails that have like a welcome message that are triggered within like say within an hour of them signing up or if 24 hours you have a welcome message that either has an incentive to come shopping or to come back or thank you for joining our group or so thrilled would you like to join our Facebook you know that kind of stuff. So you can set up a bunch of different drip campaigns and that's a really good way to stay in touch with your customers over time without actually really having to do much after you set them up and kind of put them into action. So I do a lot of user experience design audits. This means I can do it on any WordPress site or any platform it doesn't matter which platform and when I'm doing these audits I ask these questions to the owners and also to myself about who are your competitors. You got to do your competitor research to see who else is in your field what their websites are doing what kind of language they're using in the industry what kind of success that they seem to be having within their websites and then how do you differentiate yourself from these people. You want to make sure that your marketing messages have really strong indicators of why you're either different or better or what your performance is going to be from them and then also you want to think about the pain points that people have. The reason why people actually start a search is they have these micro moments of I have an issue of a question. I need some answers. They go online and they google you and what you want to do is make sure that you're giving the answers to their questions before they even ask them. So when they land on your page you're offering all kinds of information either in an FAQ and you basically want to solve any type of question that might be asked before they even ask it. And you also want to figure out from your customers what might be their goals and try to figure out how can you solve any of these goals in the website and then also making sure that you test your forms and any other type of integrated software, third party stuff to make sure it works. I've seen people hurry up and throw up a contact form and a month later they realized they never checked and tried out and tested their contact form and it wasn't working and then you know that could be a really thing that you forget and don't even realize for a year or something and you want to make sure that all your forms are tested on different browsers and you test everything on different browsers because software has a tendency to not work sometimes if you're not aware of it that's a huge user experience problem. So you also at this time want to determine your marketing goals for the website. So I usually talk to the owners and I ask about what do you want them to be doing here? Do you want them to sign up for a newsletter? Are you trying to make a purchase? What action do you want them to perform and then make sure that you guide them to do that action and also you want to make sure that how do you want to do business with your customers? This is a good question like do you prefer to get a phone call or would you rather have them fill out a form? Would you rather be emailed? And then once you have that preference you should really probably make your call to actions that preference so that you're doing business with your clients the way that you prefer. And then also when you're doing these marketing goals you can review your Google Analytics and also kind of get a good sense of where people might be abandoning your website and see what pages are probably not converting very well and using this analytics you can also come up with what's called user personas. So user personas are these fictional characters. So you kind of know your audience already. You guys have probably been in business for a while or you know your industry pretty well and you know kind of clients. Your analytics will also tell you what the demographics of your customers are, what age group, what gender they might be, income levels where they live. And what you can also do is kind of basically put these user personas together that would be fictional characters that you would have different problems that they might want to solve and how they might want to be solved. And so that way you can actually walk yourself through and say this person might come in through an app and they might just want to have time savings is a big thing. So you figure out different ways to work with these characters to make sure you're answering all the different things that you could possibly dream up in different ways that are problems. And that leads you into journey mapping. Journey mapping is literally a physical illustration, a timeline of events. So you want to say from the very first search in Google where they're looking at your title tags and your metadata, how are they actually getting into your website? You can look at analytics to see where they're landing, where they're coming in, what kind of keywords they've been using to find you, and then marking this as an actual physical map that shows you where they come in and which points. This also will allow you to find out where you're kind of dropping the ball and where you're like not supporting your clients very well and it gives you an opportunity to say hey we should contact these people at the three week point here because that's when their trial ends and we're not doing that. You know we should really reach out to them personally. And again you want to make sure you have this relationship with them that hopefully lasts forever. And what are you doing to retain your clients? This is something a lot of people don't think about is when at the end of the sale they just let it drop and they don't come back. You want to make sure that you kind of stay in touch with your clients and keep them on as brand advocates then become the word of mouth people who love you and talk about you as you know they are had such a great experience with your company. So UX designers make technology more accessible which means they make the web easier for people of different ages, nationalities levels of education and their physical and mental disabilities. So what is accessibility? Broadly speaking when we say that a site is accessible we mean that the site's content is available and its functionality can be operated by literally anyone. As developers it's easy to assume that all users can see and use a keyboard or mouse or touchscreen and they can interact with your page and contact the same way you do. This can lead to an experience that works well for some people but creates issues that range from simple annoyances to show stoppers for others. So Google has an entire accessibility department for ADA compliance within them. One of their lead developers is a man who has been blind since birth and I've watched videos of how he checks his emails. And if you've never seen anyone actually use a screen reader it's absolutely fascinating. I've never seen anything like it. It is different than what you think it's going to be. Let's put it that way. So this is what we're going to get into is ADA compliancy and these are the guidelines for having the basics of what you want for your website. So web content accessibility guidelines the WCAG. That link actually brings you to the 38 requirements that you have to have if you truly want to be ADA compliant with your website. It's extremely technical. There's a lot to it. And so I highly recommend checking out that link when you get a chance. This presentation by the way is also available on my website and I will give you the URL at the very beginning of it. And anyway, so when you get through this ADA compliant list you'll see that I pulled out the ones that you guys can do right now to your website to be very aware, to be as basic compliant as possible. You want to make sure that you create alt tags for all of your images, your videos and audio files. With the alt tags you also want to make sure that you are doing justice to that so you're using SEO keywords within your alt tags and that you're also paying attention to what is in the image so you have to describe what's happening for a blind person and what actually is that photograph. So you want to combine SEO tags with some type of description. You also want to have closed captioning for all your videos and that's kind of important. Also no text and images. One of the things you want to make sure when you're doing web design is that text within an image is not search engine friendly anyway so anything that's in an image is not going to help your SEO. If it's also text within an image a screen reader can't read it so it's not ADA compliant to have any type of text within your images. Also when you have a lot of text and images and you happen to have it responsive that same image with a lot of text will not become very easy to read on a mobile device. You also want to have high enough contrast within any of your website a lot of people have color blindness and they just can't see very well or the low visibility issues so having a high enough contrast especially in your buttons that will show white text against a dark background is crucial. You want to have really clean code. You want everything to work. You want the website to be keyboard accessible and again you want to make sure their text is at least 16 point font or bigger. There's a lot of people who can't see very well and you want to make sure you don't go below that so keep that in mind. These are just the basics for ADA compliance. Again that link at the top will give you all 38 crucial. Hold the questions to the end if you can. What you're also seeing here on the right is the Wave Accessibility Tool. I discovered this about six months ago and it's been really interesting to use. What you do is you go to this URL at the bottom the Wave.WebAim.org and you can punch in your URL and it will actually give this really comprehensive tool that will tell you if you're you have enough high contrast. It will tell you if you have alt tags or if you're missing alt tags and you think you do. I went to my website and I was like of course I have the alt tags and I was like oh I put that image. I totally forgot to put the alt tag in there. I was busy and I didn't catch it. So it's a really great tool that will also help you find any type of errors that they might have and what to do about them and it also will show you like if you skip from H1 to H3. I didn't know that that was an 80 day client. You want to make sure you stay in order for your H1, H2 and H3. That's a good insider tip that they actually care about that kind of stuff and Google by the way will actually really promote you better in the engines if you are doing ADA compliance. So you want to make sure that your site is following these guidelines because they like it when you're nice to blind and deaf people. So there is now a sense of urgency to prioritize user experience both for mobile and desktop user and for some degree abandon traditional SEO practices. While some tactics may still be effective such as building internal external links, satisfying visitors now takes priority. So Facebook and Google have both declared over the last year that the user's experience trumps every other type of thing that you can be doing because they just don't care what you might be selling or offering or what services you might be providing if the user is not having a very good time trying to find your website or use your website. So doing user experience design for search engines we're going to be talking a lot today about speed as it's the number one priority for Google. The first experience that a customer will probably have with your website is waiting for it to load on your mobile device. So how long does it take for them to sit there when they punch in your URL and if it's longer than three seconds you're basically going to have a bounce rate of about 50%. So we're going to be working a lot on how to speed up your website because that's literally the number one thing you guys should all be worrying about. The next thing of course Google cares about is having good design which means that it's responsive, that it's mobile friendly, that it's SEOed, it's got intuitive navigation, you're using really plain language and you're labeling everything very properly especially your forms so it's very clear on what you want to do, forms are a big deal. You want to have really clear call to actions and you also want to make sure that you're kind of kind of guiding your customers through the website so that they know what to do next. You want to make sure everything just seems like intuitive what you want to do. For images again you want to make sure they're been SEOed so the name of the JPEG has been taken into consideration so that you have the keyword inside the JPEG so like wordpressdesigner.jpg. You also want to make sure that alt tag is again ADA compliant and also SEOed and you want to make sure you optimize it. So I'm a graphics expert. If anyone needs like additional information on how to optimize images for the web I gave it a graphics lightning talk yesterday. If you'd like to see that presentation or talk to me about how to do that come see me after. Again you want to be Americans with disability act compliant. So I call these roadblocks and time wasters. There's a lot of them on the internet. You guys are very familiar with them. On the example on the left here you can see that the little arrows are pointing to the fact that these are required so this contact form required me to leave a message to the person and it also required me to do math. That's one of my biggest pet peeves is when you require me to do something that's obnoxious. So I don't care how many street signs I have to choose that kind of stuff or if there's a car and a picture. Those captures and that kind of stuff are huge time wasters and people will actually abandon and leave if they're just like frustrated because you're sucking up their time and time is the most valuable thing that we all have. So the other example is the chat. This particular example says it's required to do your first name, last name, email and initial question and you start typing your name, your last name, your email and you start typing in your question and you might know what happens next. You hit enter and you get a chat person on the phone or on the line and then you have to explain everything all over again. It's kind of like when you go to the doctor and you fill out all those forms and you sit there in the waiting room for 20 minutes and you have to fill out all this information and you know that information is not going to be actually presented or understood as soon as you get into the office. So therefore you're repeating yourself again and you're doing all this stuff and it's like if you call any insurance company you have this very frustrating time going through, you know, trying to speak into the phone and which choice you want. You start getting frustrated, you start getting frustrated. All you want is a human being at the end of the day because this is a nightmare. So you want to fix that. So using chat this is a true story. I had a third party integration that wasn't working, the software was having an issue. I decided to get on to their website and they had a tech support chat. I started chatting with their tech support and I was really upset at the time. I was emotional and I was trying to gain sympathy so they would do some stuff for me and I was, you know, I spent about two minutes probably talking to this person and then I realized I'm not talking to a person. I'm talking to a chat pod and that really frustrated me and I was really upset and I felt really duped and I said this is not cool, you know, and I said to myself we should actually as designers be responsible for that feeling that people have that either you're talking to a chat bot or you're talking to a human. So as designers out there when you're doing chat bots and you're dealing with chat, make sure you understand that AI is a little bit different than a human and that we should be aware of how to make that clear to the customer. So GDPR is a big deal because a year ago Europe put into these privacy policy acts into effect which affects everybody and right now California has also been in effect with their AB 375 laws for privacy that basically starts becoming a user experience problem for us designers because what we have to do now instead of just having a pop-up grab an email which was simple to grab emails back in the day we could make all these wonderful email lists now we actually have to ask our clients and ourselves do we want to become GDPR compliant? Do we want to be aware that AB 375 is actually in effect right now and right now there's two other states that are also following these laws so we have to as designers and developers and all of our clients ask ourselves these questions that are hard because what happens with the user experience is negative. It becomes this kind of like pain in the butt thing and it's a huge pain in the butt. So what we have to do is ask them for their permission and then we have to decide as the marketing team what kind of marketing are we going to be doing? Are we going to be doing just newsletters and that's it forever? Or maybe we might be taking their email address and using that as a maybe a geo targeted ad in Nashville. You don't know. We might also want to send them a postcard in the mail. How many different ways are we going to be contacting this customer? So to be compliant now we have to offer them all these different marketing permissions. So you actually have to have a box that's no longer allowed to be a pop-up at this time. You have to have some direct HTML that has this kind of choice. Then you have to explain everything and be super transparent and this is kind of a big problem because people are now having to say yes I'd like to check off your email newsletter and okay maybe I want Facebook ads. I'm not really sure. I don't know. I don't want postcards. So they have to then choose and then you have to manage those lists. So every single newsletter list that you have now has to be segmented so that you don't abuse this because these are strong privacy laws that are laws. And then of course this also causes the problem of double opt-in. So as soon as you become compliant you're now asking them to have to get an email that says yes I would really like to be on your list. So multiple times now they're being asked to approve that yes you want to join their list. And when I was talking to a lawyer about GDPR compliance she said if you can now's a really good time to start planning this. You'd rather probably do as much as you can legally to show that you're trying really hard to get permission because the privacy laws are only going to get stricter and the United States is going to follow suit behind Europe. So it's something to consider at this time. Also you need to tag these cookie pop-ups and notifications on your website which again are a noxious little thing. I'm sure you see them all the time now it's because everyone's GDPR compliant usually at the bottom and you have to X them out saying yes all right fine cookies. And that's kind of a pain in the butt and again it's a user experience thing. So think long and hard before you become GDPR compliant. It's a thing to consider. So I'm going to do a couple of case studies. Mailchimp. I've been with Mailchimp for probably ten years solid doing newsletter design and I had a customer just only just two months ago ask me to go sign up for them and they were they just wanted to collect email addresses at this time. They weren't really quite ready to do any marketing but they wanted to put it on their new website that we were designing for them. And I said sure what's the email that you want the account under and they said info and I said oh fantastic. So I went and signed up for Mailchimp for them. Mailchimp automatically sends a confirmation email while that confirmation email didn't go anywhere because they actually hadn't set up their forwarding address for that yet. So I'm kind of stuck in this loop where I can't really confirm the account right. It's a simple problem. So what do I do as I go on to Mailchimp looking for customer service. I cannot find an email. I cannot find a phone number. I cannot find a chat. There is literally nothing you can do to contact Mailchimp. So I got clever and I said let me go try Facebook. On Facebook you can't even message them. There's not even a way to contact them on social media. So the only way I thought cleverly I could do is I could comment into one of their posts and so that's what I did. I said hey I need to talk to somebody about signing up a new customer with you and they said you got to pay for that. That's ten bucks. You got to go to tech support and you got to pay for it. And I said okay. I'm just trying to get you some business here but alright so I wind up having this has taken me days to figure all this out in time like 45 minutes here an hour here trying to talk to the client. I finally get a hold of tech support and I say to tech support can you please just resend the link to this address and they said well no we can't do that. They actually have to e-mails from that info address so that we confirm that it's real. The owner of the email the domain sent an e-mail out hey I'm the CEO we just don't have it set up yet can you please resend the link. Mailchimp said nope we're not going to do that security reason sorry can't help you. So my client said I am not going to use you thank you very much for being so unfriendly adorable user experience and I was feeling really bad because here I am saying Mailchimp's great well I have decided that Mailchimp does sometimes suck and so therefore I'm putting them in my presentation as a way not to do customer service. So another large company that I was dealing with this spring as I was doing user experience and I was writing this presentation was that Lanzen sent me a catalog in the mail and it had a 40% coupon which had a pin which I thought was curious and as a developer I was like oh I'm sure they're doing analytics to see where I am and I took this 40% coupon and I went online and I added a couple things to my cart and then I had to measure something I got busy I went back to work I forgot about it few days later I was like I should go check out I went to check out and the coupon has expired so as a e-commerce background I knew if I talked to customer service there's a good chance they might be able to offer me another coupon so I chatted in with customer service and they were great they were like oh sure here's a 40% coupon for the rest of the month and I was like wow awesome I got all this time to shop and stuff and I was like I literally typed into chat I am so simply thrilled with your services you know and I went back online and here I am shopping but now I have a month so I said okay I got a little time so let's go see what else I can find and switch out some stuff and I started changing my mind and changing things in my cart and as I'm shopping around I noticed that there's a 50% coupon on the website that day and then I said hey that's not cool I want 50% not 40% why didn't they tell me so I got the 50% coupon in my cart and I'm ready to check out and I go get this pin and the pin thing is a link that launches and the link launches a box that has an error and I was like gosh I have to go and chat in with the text before I get it again so I contacted customer service and I told them that the pin wasn't working they were able to give me the pin and I was able to check out so a week later the stuff comes and I'm thrilled everything is great so for one item I decided I want to make a return so I called them to see if I could switch something else and get the return taken care of and when I was on the phone with them I decided you know what I'm going to tell them you guys are making my UX presentation and this is why this coupon deal here and the pin didn't work and by the way and as I was chatting with this person on tech support actually I was on the phone with her she said just to let you know we're not allowed to give out coupons and our company is so big and the web development company or the website of things they change the website like daily we have no idea what the coupons are online and she's like so we can't possibly understand what is going on because it's just too much just too many customer service reps the website constantly changes and it's kind of an issue and I said well it's really interesting to show that a big company like Landsend has a UX problem because they're too big to communicate internally and that to me seems like a really no brainer for them to figure out a way for customer service agents to know what's going on on their own website. So now we're going to get into speed. I'm obsessed with speed. Speed like I said is the number one thing you want to do so the average time it takes right now to fully load a mobile landing page is 22 seconds yet because it's our abandon if a mobile site takes longer than 3 seconds to load and that's a big problem. So Google and Google Dev Tools which I read a lot has said that basically you're losing a ton of traffic very quickly. What slows down your website? Images are the number one killer. Any type of large killer by image will slow down your website considerably. Third party integration so something like Instagram when you go ping Instagram to load it on your website or feed it has to actually go talk to Instagram and get your latest posts and then display it on your website. That takes about one second of load time just to do that. So you want to make sure that any type of third party integration is that you keep an eye on them and you test them. You also maybe not put them on the homepage but maybe internal pages. Videos take a long time to load as well as they are full of, you know, they're large file sizes. Tons of crazy content as well so I can't tell you how many times you go into a website and you have a left column a right column and the middle column is full of stuff and you got advertisements and you got gifs and you got everything and you know those types of websites. There's just too much overwhelm going on for the user anyway in the first place. The second thing that happens is that it takes a longer time to load if you're trying to pull in a ton of different things and that leads me to fonts. So web fonts are great because they are going to be installed in every browser but if you're using like a custom font built into your system that you want to choose a specific font all those fonts actually need to be loaded by the browsers and they can actually add load time. So if you have two fonts that you're using custom within the website that's probably good but if you go over two you're getting three, four, five different h1, h2, three tags or different fonts that you're having custom that's actually going to drag down your load time quite considerably. One of the things I was doing is researching that too many plugins can also do the same thing. So WordPress developers should be careful of how many plugins especially on the homepage that you're using there actually is a plugin for your plugin as well to tell how your plugins are doing. So how to test your site speeds are actually a very important thing here. If you go to any of these links these are companies that will help analyze your website and site speed. So all you have to do is go to these URLs, type in your URL and about 30 seconds later it will analyze how fast your site is and it will also give you a ton of information on how to speed it up. Usually there's a lot of issues around JavaScript and HTTP and different things that are technical that are going to be slowing down your site but images are usually the number one thing you're going to see and they're going to offer a ways to compress and then tell you that you need to compress it by a certain amount of percentage. My favorite one is gtmetrics.com that seems to be the best one to use for accuracy because each speed test is going to give you different results. It's surprisingly how different they are. Some sites say that my site loads in 1.5 seconds and I'm like, ooh, it was super fast. Then I go over to Google and they're like, Google's like, no, that's 10 seconds. I'm like, what? That doesn't make any sense. Google tends to be the one who tells you that you're doing really, really bad. For whatever reason they take your JavaScript, they take your technical stuff and they said it's really, really slow. So just be mindful that not all of them are the accurate. So gtmetrics seems to be the most accurate in my opinion and you can also determine within these tests where you're testing from. So the speed from Canada or from New York is going to be different because the servers are going to be different. The bottom one here is actually, I think, with Google's mobile site testing speed. This one will probably give you a really slow score no matter what you do. Just a heads up on that, but they're trying to tell you that your mobile site speed can also be tested separately from your actual desktop speed. You also want to make sure you benchmark all of your site speed tests by taking a screenshot and then putting those in a folder and then going back and tweaking, let's say you're optimizing your images, you remove a video, you hit save, run it again, see your next speed result and then take another screenshot so you can compare each individual thing that you do because I can't tell you how much like one little thing you do can completely solve an issue or it can make it worse. So make sure that you benchmark everything you do. And you definitely want to make sure your site loads in four seconds or less. I mentioned the other day that GT metrics had a feature where it'll alert you if something's loading really slow. Do you know if that's the case? I thought that sounded really cool. Yeah, it sounds like it's perfect. Yeah, I'm sure it does. Yeah, that's cool. Okay, so how to speed up your site. Again, optimizing your images is the number one thing you want to be doing. You don't want to use a program that doesn't allow you to optimize images. You want to make sure you use professional design software that you can see the kilobytes as you export your JPEGs or PNGs. You also probably would like to use SVG files for the smallest of KBs that you can possibly get. You want to make sure you do run any of your JPEGs or PNGs through compressor.io or tinyping.com. There's also a Wordpress plugin that will help compress your images as well. You can lazy load your images and your videos. You can reduce all third-party integrations. You can also really get better hosting and servers. That's a huge problem as well. If you do that, they can actually speed up your site. That plugin for your plugins is at the bottom here. The URL is the plugin that will tell you how your plugins might be dragging down your time. This link for crazyegg.com's blog is 20 tips on how to speed up your website. These 20 tips actually are very technical. They get into asking for different HTTP calls or actually all kinds of technical developer stuff that is way above my pay grade, but I want you guys to know that there's some really great articles as developers of your website. So, lazy loading images. You guys are probably all, you know, you're familiar with this. As you usually see it on e-commerce sites or sites that have lots and lots of images, what you see is a little gray box that says camp coming soon or something to that effect. As you scroll down, the images instantly flip over into the graphic and it shows up. That's called lazy loading. It means that basically all the images below the fold aren't even loading until you need them. A lot of times, since people don't actually scroll down, they don't need to load a lot of those images and that's what in practice a lot of people do, especially on e-commerce, to make sure that their sites load much faster. You can do the same thing with your videos, which is like an on-click, so only calling in the video as soon as the person's actually ready to watch the video, so you're not loading and wasting their time if they're not actually going to watch the video on a site. That's really good for sites that have multiple videos. There's also this WordPress plugin to help with that. It will improve your page load times and increase your Google page score. So images, again, I'm a graphics expert and I really like talking about how to speed up your website using graphics. So this is the basics. Raster versus vector. Raster images are pixel-based images that are usually photographs and they tend to have a lot more information. Vector are math-based shapes and lines that are created in a program such as Adobe Illustrator that are going to be scalable and not have any resolution attached to them. So the basics of image file types are really important to understand if you're trying to make a better user experience for speeding things up. So JPEGs are great. Everyone's fairly familiar with them. They're universally accepted everywhere. GIFs or GIFs are great for animation. This actually is a GIF, but it's a GIF of an SVG animation. PNGs are great for transparency. So that's basically what the format you need if you're going to have a different image. So the background color can change behind an image. You got to use a PNG for that. PDF stands for Portable Document Format, which is a printable, emailable, downloadable file that you put up on your website for different reasons. Also, when you're working with graphic designers, a PDF can also be a vector-based illustrator file. So keep that in mind that if you get a PDF from a graphic designer, that could actually be all kind of vector graphics and be editable in Illustrator itself. TIFs are the best quality for going to print. You want to make sure that all things in print are in CMYK format. Again, see me if you want to get into print versus web images. But for the basics, you want to make sure that you never upload a CMYK format of JPEG to the web. The colors will get all screwed up. There's also a new format of images called WebPimages. I was diving into Google DevTools trying to speed up my website and learn all about site speed. And what I found is that Google is working on their own image format called WebPimages. WebPimages is something that they're saying will actually be a conversion tool that they're using to take your JPEGs, to take your JPEGs. And what they do is they compress them by 30% and call them any WebPimages. So they're being used by Google right now to serve up pretty much websites and their services faster. The problem with them right now is that they're not all browser compatible. So you need to program and fall back images if you're trying to do this. And just kind of keep an eye on that. I think it's going to be something that comes into play soon for everybody. Scalable vector graphics. Again, it's a vector graphic. So it's an illustrator based line art math work that's scalable to any up and down. And this can be much smaller in size. It also can be larger in size depending on how complicated your vectors are. So really complicated vectors such as infographic can be too large to export. But you want to keep your SVGs for logos. I highly recommend that your logo file is an SVG file. If your logo file right now is a JPEG or a PNG, you want to convert it to SVG so that when you pinch on your phone and you zoom in, it's super crisp. It's going to actually be the vector artwork online. And it's not going to be pixel based. So every retina display is going to look amazing. As you're exporting from illustrator your SVG codes, you can actually hit the code button at the bottom. And this will actually pop open a window like this. And that shows you that it opens a text box. And within this text box is some XML code with some CSS. And this is actually what, if you take this code block and you put it on your website, it will be displaying a logo. So you can, it's great for icons. It's great for logos. And it's a really good way to actually using codes to display images, which is kind of cool. It looks like magic. I really like it. So a little bit about mobile user experience. You want to, when I'm doing a mobile website, I also, of course, do your mobile site. And I make sure when I go to your mobile site that it looks good. It's functioning. It's fast. One of the things you want to make sure is that, again, text on images here is going to be really important. So when you do have a text on an image, your mobile site is really going to show you if it's readable or not. So if you do happen to be doing social media advertisements and that kind of thing and you know it's going to be on mobile, you want to make sure your fonts are really clean and easy to read and it's simple. Social media sites like Facebook, if you're running Instagram ads or Facebook ads will optimize your image for you. If you're using a program like Canva, it doesn't matter what the resolution is because you're going to be uploading it into Facebook for your ads. But you want to make sure that when you're exporting anything for the web that you're definitely controlling the size files of your size for that, especially for making sure it looks good and loads fast on mobile. And also when you're testing your mobile site, you want to actually make sure that your emails and your phone numbers are popping open. So a lot of times when I test someone's emails, they formatted it with like a dot between it or it's not formatted correctly, it won't actually pop open a phone to call or it won't pop open an email to email them. Right now I just noticed that they changed some stuff with phone numbers. Back in the day you could have the area code and the phone number and it would just work, you could tap out it would load. The other day I realized that my client's site wasn't working and I knew it used to be. And I was wondering why. So I found out, I looked it up, and now I have to have a TEL colon the phone number. And I have to add that as a link and that is new. So go back and make sure that all your phone numbers and all your emails are actually going to be touch friendly so that they actually do what they're supposed to be doing. Okay, so there's some software once you've launched your website. You got your website launched and you're in business. There's some software that can actually give you some really great tips and tools on how to fix it and make it a better user experience. One is called Hotjar, the other one is called Crazy Egg. They both do kind of similar stuff. This is called a heat map and a heat map actually tracks people's views of the website so you can see where they click and where they're hovering and where they're actually looking. It gives you some great analytics on that. They do session recordings. It actually captures people's mouse movements. It's a true story. I had been using Hotjar for a while and I was going back to their session recordings and I was watching them and then I realized I'm watching myself work on my website and I was like, huh, this is so cool. That's what I did. Here I am. I could tell because I was logging into the website and so it was kind of a really easy way to see how people actually move around on your site. They also offer surveys. I took a screenshot of this when I was surfing the web and a survey popped up from Hotjar and said, hello. How can we improve this page? Is there anything missing or not working? And actually the e-commerce site that I was on, I said, there's something wrong with this website. There's something that's being hidden right now. The button's not working right. It's like the text isn't formatting right. So I took the time and I wrote them a couple sentences and I hit enter and I said, hey, I'm being a good user experience designer and helping them out. So you can actually ask the public feedback directly saying, hey, is this working? How would you improve this? I highly recommend AB testing and talking to your clients and even better yet asking people to test your site before you launch it and see where they might have issues or questions and answering those questions and fix those issues before you launch. Ethics in UX is a big topic for me. I've been listening to Mike Montario. He's a UX designer, a graphic designer, a web designer and he is an amazing guy. He's also very funny but he's also really serious. And I wanted to take a little bit of this time today to kind of really talk about the user experience that we have using social media and the responsibility of designers. Do I have any designers in here? Anyone? Couple designers? Good. So our responsibility as designers goes well and beyond just making a website that works and it's nice for people. Mike says we need to fear the consequences of our work more than we love the cleverness of our ideas. And one of the examples that he gives is a sad story but I think it's a story that I'd like to acknowledge and also make people here aware of how important as designers and developers what we do actually affects people's lives directly. So as a user experience designer what we're trying to do is make lives even better but we can also make them a lot worse. In this case example, Facebook in 2014 had set some settings in the back end for privacy and you could control different things and this young girl named Bobby Duncan who was 23 year old student at the University of Austin, UT Austin. She was for her own reasons not come out of the closet yet and she had decided that she would like to sing and join the queer choir at this college and she had spent a lot of time making sure that her privacy settings were set so she had these walls that she had put in place to make sure that no one else would know what's going on with her life especially her family for her own reasons. Her family was not accepting of the situation as she knew that. So by no malice at all but the choir director had set the group to public and he was very excited to have her join and immediately added her to the group without asking her permission and they don't need her permission because Facebook didn't need that type of thing in the settings at the time. And more importantly Facebook did not consider that these settings that she had would be overrided by the group's settings. So all of her permissions she spent all this time setting up, all the privacy that she sent up was overridden by one single decision that someone made in the back end. When they did that and this choir the person in charge of the choir added her to the group without any malice of his own because he's out and very proud of his group and as he should be. This is a group of young kids that want to sing and be known. So he adds her to the group and what does Facebook do it announces that Bobby Duncan has now joined the queer course at UT in Halston. And then alerts her all of her friends and family to the situation. Her father sees this and writes a very nasty anti-gay message back to the public he basically says he's going to disown her. It starts ruining her life and she almost commits, tries to commit suicide. So whoever was at Facebook didn't quite think things through and these types of decisions are what user experiences are supposed to do. We're supposed to consider the ramifications of our actions and we're in charge, we are the gatekeepers of every single thing that we let out to the world. So as designers we either have the ethical responsibility of saying sure I'll work for you gun company and design that next gun or the next bomb or the next website that sells these things. And so as user experience designers and as developers and as designers the toughest decisions we have sometimes are do we listen to our gut instinct that says maybe that decision from the CEO kind of goes against what I think is good, I think that might be spanning people I'm not really sure if I feel really good about that but I don't want to speak up because my job's on the line, I have a mortgage to pay. But the truth in the matter is as designers and developers we actually are really responsible for people's lives and how those things can be detrimental or improving people's lives so we want to make sure you think through everything we design and every app that we build so that we're responsible for what we put out into the world. So another example is this is Facebook promised interruption free service and what they've done in the last I don't know six months to a year is they allowed in role ad advertisements to come in. You all might be familiar with them when you're watching a video in 10 seconds in another video starts in the middle of it as an advertisement that's called an in role ad. I as a Facebook advertiser and designer I've been running Facebook ads and I was running an ad for my company and I was just doing it here locally just Facebook and Instagram. When a client alerted to me that they saw me in a game and I was like what do you mean in a game? He's like well my computer at work was talking to software and that software and our partnerships with Facebook and I'm pretty sure that the game I was in was advertising Nef Creative and I said that's really interesting so I got into the settings and I got deep into the settings and what low and behold did I find out that I was allowing Facebook to put my ad in one of those in role ads and I was like horrified that I would be one of those horrible annoying UX nightmare type things where my ad would be coming up and interrupting someone's video and I was watching a video the other day and I was really getting into it and I was like emotional and I was going to cry and all of a sudden there was an Amazon Prime ad and I was like oh god I hate these things right so what do we try to do? We click away and say nope I'm not going to listen I'm going to tell Facebook I don't like these things but most of the time because we know it's only 10 seconds we just sit through it and we put up with it. But advertising if you guys have anybody who's managing your Facebook ads or if you personally do Facebook ads for companies make sure you dig into those settings and turn that off so that you're not contributing to somebody's negative experience with the video because if we all tell Facebook we don't like that they will stop doing it. And so kind of summing up here giving a positive user experience remains one of the strongest factors of retaining users. Bad reviews last forever on the internet so it's the most important thing you can do for your business. I want to make sure that you guys know that user experience's job is to go from the very beginning from when you first look in Google to those metadata's that you see all the way to getting that five star review and making sure that that customer has had a fantastic time interacting with your website, with your company, with your customer service. It's everything that you guys do it's the way you present yourself in public, it's your reputation. It is so much to consider and it's something to really go back and say where can I actually improve my user's experience. There's probably something you're thinking about right now that you can do. You want to make a list of things you want to go back and kind of improve everywhere else. I can tell you 100% certain every single website in this room could have better UX. There's better ways to do it. There's better navigation. There's better speed. There's so much more we can always do and if you stop working on your website I highly encourage you to start working on your website again. It's a never-ending job to make it better and to improve it and to think how you can think for your customer and how can you speed it up. So the takeaways for this you don't want to make them think. People also don't think so think for them basically. You want to make sure it's super easy to do business with you again take any roadblocks or time wasters out, try to speed it up so whatever you can do to make it super simple to do business with your company is really important. You want to make sure you answer their questions before they even have them. Again FAQs make sure everything is very clear, very concise. You're using plain language again you want to guide them through the website and make sure that they know exactly where to go next and if you don't feel like that's happening in your website so evaluate it. Think about how you can guide people through and also be very responsive in your time so that if someone wants customer service it's done in a timely manner. When you want customer service or tech support you kind of need it right then and there. When you're looking for help you don't want to wait for a 24-hour response. You want to be able to do it nights and weekends sometimes go daddy's here this weekend. I have a lot of experience with their customer service and I can actually say that I actually really enjoy their customer service. They've really helped me out and they've been really really really good. Again Mailchimp not so great with their customer service so you want to make sure that your customer service is really good because it's so important how people feel about your company. You know you judge and you create these kind of emotional responses to websites and you have these kind of judgments that you make on companies and customer service can actually make or break how you feel about a company. Also use an email signature. I know how many times I work with new clients and I'm in branding and I do a lot of logo design and a lot of startups a lot of business and I say make sure you have your contact information in your email. One of the things that a lot of companies don't do is they don't control and have a standardized email across the board. One of my biggest pet peeves is when you have rogue emails with random quotes in them or they're using comic sans and it makes you look very unprofessional. So if a company with lots of different people try to make sure that you guys have a consistent professional email signature. And also you want to design for Google. You want to be sure that you work on your speed. Speed is absolutely crucial. That's the number one thing that you're being judged on and the number one thing because the first user experience again is waiting around for your site to load and how long does it take on your mobile phone is the number one thing that Google is actually judging your website on now. You want to make sure your site is SEO'd of course and Americans with Disability Act compliant. Again there's 38 different things you've got to do but it is very important. You want to make sure you're doing your job on that and it will help you in the search engines if you become ADA compliant as well. You want to also make sure your branding and logos and everything else is designed very consistently and professionally and that you're watching how many fonts you install on your browsers. Highly suggesting that you use web fonts as a Friday I was driving home I was on the phone I was reading an article on my phone. What happens is that as I'm reading about maybe three seconds in the entire thing jumps I don't know if you guys have ever noticed that when everything just kind of reformats on you. Well the font loaded and it changed everything and I lost where I was reading and it was a very negative experience because like oh darn it where was I you know I was in the middle of something here and that font loading screwed it all up so be careful about how many fonts you use and what kind of you know how that affects your design and you want to balance that so that it is good and designed and custom and branded but don't go crazy on the custom fonts keep the web fonts you know the safe web fonts that can actually help with your load time and also your users experience as well. So now we're going to get into questions. Anyone have questions? Yes sir. So on the web fonts, so yeah keeping it to a couple is great. Are safe web fonts, if you're in a web building for example and some of the websites that they have are all of those considered safe or is it a little safe? You can go for Arianna but you can go for something else are they safe because they're available? That's a very good question. So for the audience the question is kind of like how do you know which fonts are really web safe? Is that kind of the question? Well as you go to a daddy web builder for example and you can choose the font. So usually web safe fonts are only what's installed in a browser so there's only about five like I actually had a slide that I removed that actually showed all the web fonts that you have. The idea is that if you google this you can see that there's about five or six actual web safe fonts and they're really basic. They are like Georgia, Ariel, Times New Roman. There's a secondary list that's a lot longer that includes Comic Sans. It's the only one I would actually not advise you to ever use. But when you're looking at something that is a little bit more custom all of those need to be installed by browsers. It doesn't matter which one it is and some browsers might have already installed it on your machine but every user is going to be different. So we are wanting to make sure that no matter what that you test your site and also realize that these fonts can add up time. So just try to use as many web safe fonts as you can for maybe the body and then only use custom ones for maybe like one H1. I actually use the same font throughout my website because I'm so obsessed with making sure my site speed is under four seconds that I removed all of them but one and so I use different variants of that same font. So the font families inside, you can have bold, you can have italic, all that kind of stuff but it is when it's installing that font and installing all of the different family within that font face. I'm trying to remember what I use. Gosh, pop quiz on which font. It's Lotto, L-A-T-O. That's my favorite right now. So I use Lotto all over nef-creative.com everywhere. So I decided for site speed that I would choose one font, I would install one and I would keep it to one. And there's so many places that the font shows up, right? So there's literally like probably 20 different styles that you have to make sure that you apply that same font to. I mean it's the even the smaller text, the default text in your newsletter sign up, we respect your privacy as a font. We have H1s, H2s, H3s, we have body tags. Everything needs to be determined on what type of font you're going to choose if it's going to be web safe or it's going to be a custom one. Again what I did is I turned everything into one font. I'm trying really, really hard to make sure that my site loads because I'm the user experience designer. I'm going to make sure my site's going to load fast because that's what I do for a living is basically make sure that your site loads fast. So I opted as a graphic designer to choose my favorite font to install one. So it's up to you on how you want to do that. But just make sure you test your website, go back to those links, see if the font usually they don't add too much time but everything adds up. It's kind of like a game of how much stuff can I add before I break it. And so we all wanted to like pick and choose what kind of puzzle pieces are going to have different effects. Graphics are a big problem but you got to have them obviously. You got to look good. Again look into scalable vector graphics for everything because this can be down to like 5 kilobytes. My scalable vector graphic logo on the website is 5 kilobytes. That's crazy small. It's also high definition. So if you zoom on it, it's crisp and clear on any Retina device and that's exactly what you'd be doing for all of your graphics if it can be an icon or a logo. Again, photography and photos cannot be SVGs. They just really aren't compatible because they're too complex. Also when you're doing with something like an infographic, infographics can be super complex and you don't really want them to be an SVG file because they actually can be like a 1 megabyte SVG file as well. So be careful with that. It doesn't guarantee that it's a low image size just because it is scalable or vector graphic. Any other questions? Oh yes, let me go back to that. So it is this bottom link here. WC for WordCamp-UX. So if you go to this, you'll get all the slides today that will have everything in here and you can do all the research that you need. And also see me after if you have questions about optimizing images. And I use Photoshop and Adobe InDesign and Illustrator all the time too. So I'm kind of a graphic nerd so if you guys have any specific exportation images, I can also send you the graphics talk I had from yesterday, the lightning talk as well. So it's a great day after and I think we're all wrapped up here with an hour. So thank you guys for your time today and I appreciate you coming out.