 of welcoming to word camp Raleigh, Alyssa Hurr. This is the best session that's going to start at two on five today. Probably one of the better ones for the camp. Not as good as the one that happens at 4.30 though. Everybody, who has not seen Field of Dreams, the movie Field of Dreams? If you've not seen it, there's a line that's in it that everybody knows. Well, web design, product design, it's kind of the same thing. If you build it, it will come. But they won't necessarily always like it. User experience is pretty important. Making sites, making apps, making plugins that work well for your users is important to get the most utility out of it. And Alyssa will take us through a discussion of how to make the worst product. Alright, thanks Ray. Better introduction than I could have done myself. It was the best one you got right at two on five. So that is not my presentation. This is the ultimate guide to building the worst product. So, hopefully everybody in this room has some kind of stake in making the internet a better place. Whether you're a developer, a designer, a writer, an Ezio Wiz, a user of the internet, anything, you have a stake in this. So there are five rules. I'm going to go over. Real quick that are the things that you have to remember if you want to build the worst product out there. The worst website, worst app, anything. Rule number one, ignore the user. These people do not matter. Really you're the one that has to spend hours and hours of your time making this thing work and so you're the primary person that matters in the whole process of building the thing. So the people who come later just don't even worry about it. Rule number two, work alone. It's really important you do not meet other people who have similar jobs to you. If you're on a team, just hold yourself away. Work from home. Do not answer the phone. That's also very important. No Slack, no message boards. It's a hard thing when you have people interrupting your thought process. You're in the flow and it's disruptive. You're never going to get anything done if you have people bothering you all the time. The third rule is to ship it final, fast and final. You get paid more per hour if you do it really, really, really quick and it's just out the door. So really it's a good thing to quote high and come in really low. The lower you come in it's way better. You want to get it out the door as quickly as you can without having any kind of time for something to go wrong before you've said goodbye. The fourth rule is don't collect feedback from anybody. As soon as somebody looks at it and they find something that's wrong with it, just slam the door in their face. You don't want to be influenced. After all, you are the primary person that matters in the whole process. So if somebody doesn't agree with you, then that's too bad for them. The fifth rule, never think about it again. After you ship it, it's done. You spend that time on it and it doesn't matter anymore. You can move on to the next project and after all, you're not using it so it doesn't matter because you are the most important person in the process. So these are obviously facetious rules. My name is Lisa. I'm the CEO and Creative Director of Unity Digital Agency. We're here in North Carolina. My passion really is making the world a better place and doing that through the internet. I work, I guess me and my team work on websites for community-driven organizations, nonprofits, B corporations, people that really have a stake in their community and we want to support them. So the users really are the most important people. The people who are going to be using the websites that you're building, your clients, all these people are really important. So your role as a developer or as a designer really is in helping to elevate their message and get their message out there and helping them out. So that's really what I'm passionate about. I'm a developer. I've been a developer way longer than it looks. For over 20 years I've been hacking away at the computer. I taught myself HTML and CSS in the mid-90s and I never really expected that I would be here. I don't have any degrees in anything related to coding. I have a master's degree in library science and that's the closest that I can get to saying that I have a degree in anything related because it is so related. It's information organization. I'm a total nerd for a million hats, for data, for making really elegant systems. I'm also a mom and a business owner and I just have a million hats and I'm always being pulled in a ton of different directions so I'm a little scattered. But what I want to talk to you guys today about is about user experience and why user experience is really important specifically for developers but for everybody that has a role in making the internet. I'm out of order. First of all, what is UX? Yes. Everybody knows that. Great. Well, maybe not everybody. User experience. UX is such a buzzword these days and it's the kind of thing that I think some people just may roll their eyes at. But it is very important for everybody to understand fundamentally what is meant by user experience. This is not just design. This is not just graphic design or information architecture. It's really about how people use what you are creating. So this is everybody. This is not just people that can use a mouse. This is not just people who can read. This is everybody. And as the internet is changing, as technology is changing, user experience is changing too. It's not just about a computer anymore. With VR, I loved this image because I can only imagine what she's seeing right now. She's just like, ugh. The developer who created whatever game or whatever world she's in right now, they created this experience for this person. And that's what we're all doing when we're building the web. We're creating experiences for people. So why does it matter? Why are we all here right now? It's really because we as content creators, as designers, as developers, we don't have the same perspective as everybody else. We're all really diverse. We all have different experiences. And that comes across in how we're using the internet. And how we're building it. All of my experiences that I've had have led up to the way that I go about building a website. And the way that I approach using websites. I get really frustrated when I'm using a website. And as a developer I know the way that it should work and then it doesn't. And then I have no way of like doing anything about it. It just makes me furious. I bought this new phone like a year ago. Maybe not even that long ago. And it's from Motorola. And so I was on the Lenovo website and I was trying to get this and it was like a deal. It was only available that one day. And I remember I think first I tried to, I think I was just like adding the thing to my cart. And this is like Lenovo.com. Not to like call them out or anything. But so I think I was buying two phones. I added it to my cart. I went to check out and you know what a website looks like when there's no CSS. It's just a white page with lines of text across. And that's what I saw after I checked out. And I'm like I don't even know if that worked. I have no idea if my order went through. So I did it again. Well it turns out I just bought four phones. I tried to get in touch with their tech support and then they couldn't find my order based on my order number. It was a total disaster. I ended up walking out of there with two phones for half the price of what I was going to pay anyway. So it was in the end net good for me. Maybe not for them. But that was a big loss for that. Not a huge loss. It was just two phones. But it was kind of a big loss for the company. You know if they because they had this terrible user experience for me they lost money because of my transaction. So UX matters for all of our sanity for everybody who uses the internet. It matters for the bottom line for businesses. And it's I will argue about it all day with people. I'll just move on. So the first five rules that I started with obviously were facetious. I don't believe in any of that. So I'm presenting a set of new rules that are kind of based on the old ones. Rule number one is get to know your end users. So because you're not the only person on the planet and because everybody has different perspectives it's important to know who are the people that we are trying to get to use this thing. If you're trying to get your message out there you need to understand the variety of perspectives that people have. So a process that we like to do at the beginning of one of our projects is we call it the ecosystem analysis. And we kind of get an idea of from our client's perspective what kind of it's not really competition but it's where do they fall in their own ecosystem. From there we can understand the types of experiences that their users and their customers are accustomed to and how can we make our client's website better than all of those others but also fit within what's expected. So we also like to create personas of the users that are customers I guess of our customers. Can somebody tell us what a persona is? Yeah so I heard archetype and just to get it on mic what you said hopefully I can remember it's a kind of character that you create that represents a group of users so might be somebody who's 12 who has overbearing parents and how are they going to use this thing that you're building or writing or designing or whatever. And so having this like person that you've created and they're just this character this archetypal person of they're not it's not like one person you're picking out it's like who you can define everything from their age, gender, income level, personality, race, disability I mean everything and you can give them a name and a photo and this is the person that you're referring to this is your ideal user you might have a few but as you're making decisions throughout the whole process you can refer back to that one person instead of thinking about how would I approach this as a user you can take yourself a little bit outside of your own head and think about how does this user approach this issue and they become a real person through defining them through these personas that you create so this really helps in terms of like I mentioned just a second ago getting out of your own head I think a lot of times as developers or people who are working in this industry we get really hung up on how we ourselves approach problems so the second rule communicate with your team this even if you are a freelancer and you don't have a team you presumably know people in your industry or you are totally isolated maybe you could get on Stack Overflow or something but so communication is really important one of the things that we do at our team and I'm pretty sure most places that have people in the group together would be to create opportunities for everybody to check in together early and often about a project so the earlier on in a process that developers involved in coming up with the design of a website or really understanding how this thing is going to get used the better you are able to come up with like you understand why there might be a barrier in a certain place as a developer like why do I have to do it that way that's a question that I learned a lot with developers coming in at the end of a process after the whole website has been built not built designed and decided on and then it's handed off to these developers and developers are like well that's stupid why would you do it that way it's so helpful to really get past that point of bringing everybody into the room together to figure it out from the beginning together so developers have an opportunity to share with strategists and designers to say this is really not a very good way of approaching this problem from my experience here's a better way but if there's something where somebody in strategy or design has determined really for our target audience we need to do it this way then the developer can understand early on oh okay I get it I wouldn't want to do it this way if it was me but because we're building it for this other group then I guess I've got a little bit extra time to figure out a way to solve that problem rather than it just being dumped on their desk and like oh gosh how long did you give me to figure this problem out because that's not enough time if you've got a month while people are designing it then you can figure out maybe some research time in there to get the answer that you're looking for so then as you're going through the project to be able to check in everything changes from the beginning of the project to the middle to the end there's always something the clients can come back and say that oh gosh we actually needed this yesterday but we might need this other whole part of the website there's the opportunity for to have these check-ins to be able to say well you know there's this change that the client wants but maybe there's this other way that we can approach that maybe there's another way that like a developer could come in and be like well you know it's not as big of an issue as they think we can do that or actually that sounds like something that we could do but actually it's going to be like a hundred more hours so that's not really possible at this time so it's the kind of thing where for project managers for designers for strategists to be able and developers to be able to communicate it's just crucial number three is to make time for internal testing and this involves everything from browser testing if it's something like speed testing like if you're testing on devices that are connected over wifi versus like 3G or something you know it's just important to know in the way that people are going to be using whatever you're building does having them connect to it differently interfere with the process so accessibility testing I didn't even say that but it's so important and I'm just thrilled that there's been talks today already about accessibility is something I'm really passionate about so the internal testing you're able to as the developer if you're working on the product yourself and you're building it I always develop in Chrome and I have the hardest time making myself open up those other browsers but you have to so emulation doesn't cut it all the time I use browser stack it's like a pretty good emulator actually but being able to test across all those browsers different screen sizes all of that also it's really nice when you have somebody on your team that you can say hey can you look at this too so if you don't really know other team members then that can hurt this process too so if you have other people on your team that you can say like to the designer who designed the website maybe if they get a chance to look at it so really I know that it's always really it's a hard balance with that what I was saying earlier coming in under budget but it's so important to schedule time for testing this and making sure multiple eyes are on it not just your own so we always like to have this internal testing before we send it out then rule number four is recruiting test users and gathering feedback so a lot of times your clients might be able to be your test user but not all the time your clients clients or customers might be completely different from them they might be as different from them as you are from your client so we've been running into a problem recently with one of our clients where we didn't we didn't do this we should have the gathering feedback needs to be a very organized process you want to communicate to the people who are testing it exactly what you want them to tell you because otherwise they won't they will just say like I tested it okay and it doesn't work what were you using you know so we have one where these kids are uploading photos through the website and the website's not rotating like if you upload a photo from your iPhone and it's like a vertical photo and you take it it's uploading sideways okay so we've determined that's obviously an issue so now we've got these users who are testing it and I think my suspicion is that they know that this is a problem that the photos are sideways so they're uploading them they're going into their computer rotating photos saving them uploading them saying this picture didn't rotate the way it's supposed to we haven't communicated that it's a very sensitive behavior if you rotate a photo and save it the orientation has been saved inside that images metadata it knows that it's supposed to be whatever you saved it as if you take a picture and it's vertical there's no I wish I could test it there's no way for you haven't edited it it's just a raw image with that metadata of it's supposed to be sideways but it's actually it's wonky but then so anyway I'm rambling so we needed to communicate to our users to these testers okay here's how we want you to test it everything else the way that you do it is great because we want to know that like under different situations in different browsers all these things but it's important to have those parameters and it's important for how they're testing but it's also important for them to have parameters for how they're sending you feedback so sometimes it can be hard if you have a small community or your clients have a small community for getting those test users there are resources out there can't think of them off the top of my head but there are resources online for you to say test this and I think you just pay a little bit and then you get people to test it and give you feedback it's helpful so the fifth rule follow up after launch when you're done with it it's not over I really hate to break it to you but even with all the testing in the world it's not going to be perfect and you're going to have to touch it again so if you finish a website and you hand deliver it to your client you say it's done they think it's done you're presenting the expectation to them that it's fine well so a few months go by they notice some things a little bit weird with it but they think well they're done with it I mean they said it was done so I guess this is just how it is it's just kind of weird but I'll live with it so they're not super happy if you come back out of the blue and you're like hey how are things going like everything good anything I can help you with like that'll make me feel good to know that you've been thinking about it knowing if you can keep up with things like hey Gutenberg's happening your clients are really happy that you've come back and said there's this thing happening it's coming soon we care about you we care about your website we want to make sure that it doesn't just break so here's what we want to do for you really that process of valuing your customers and really valuing that their website after a year maybe isn't working as well as it was when it was first launched that's so normal and so really following up with them and knowing and communicating to them as you're launching and as time goes by that there are ways that you can still help and that errors are expected it's just the way things are as servers get updated as plugins get updated and maybe your user maybe your customer clicks the update button but they do it in a way that maybe they didn't update WordPress first and they updated the plugins and everything breaks or whatever it's just how it is we're all here to help so I really love questions because I don't like to feel like I'm speaking to an empty room so anyway I really appreciate you guys coming today but are there any questions about user experience development anything like that do you normally have things like task oriented steps or recordings or something so it's a process that we're definitely working on I think it's what has been helpful for us in the past is to have a spreadsheet where there's columns that allow them to they know that they have to look for a specific thing when they're testing to be able to see that like okay this is where I put this issue so having something like that like a google sheet can be helpful okay did you say delicious brains was doing that nice in your website proposals do you include as a line item testing yes we do we don't actually put it as a line item in our proposals we don't want to make people think it's optional but it is in the scope of work and so we'll have it just as a non-negotiable there's going to be testing so we always include that we do have a warranty we also include as a non-negotiable a 30 day post launch check-in where it's sort of the post mortem although I hate that word where we as a team internally debrief about a project and then 30 days after launch we have that client debriefing where it's like okay well here's how do we do like let's go over the process where do we kind of fall down what went really well are there any kind of experiences that you're having with it after training we always include training as well and so if you know 30 days in they still can't figure out well how do I like delete a category or something you know we just didn't go over it then we can talk about it then so it's really helpful to have that 30 days time period I think yeah yeah yeah yeah yeah yeah yes how much does she charge yeah yeah the mom check I like that I haven't yeah I remember when my mom was saying something about I don't know it was something like her email wasn't working and it was yeah yeah it's funny yes 11 oh got to yeah yeah no I have one it's mine and my husband's okay that was going to be amazing I'm a little disappointed you're not yeah yeah yeah yeah yes developer tools has throttling and you can change yeah any other questions okay well I don't know what happened there my dad when I was a kid in the 80s we had an Apple too but my own computer when my dad like gave me my own computer it was like Windows 98 kind of thing I built my own computer in college for fun it had lights in it I cut out the side of the box and like put LEDs in there it was cool it was actually really nerdy but it was cool yes okay everybody has been going through this hamburger menu what is your take on the hamburger menu in what context okay so we use it on mobile I don't want to hide things from users but on mobile I mean I've kind of gotten used to it as being like it's gotten to be more universally understood maybe as like a menu icon but I can't think of anything better I'm also not that kind of designer that would be able to like invent something off the top of my head that would be better I saw a hand over yeah you had testing as a non-negotiable I'm noticing finally people are coming back after two or three website integration for you know build balance do you ever get any big questions like what the heck is this in here so why is this the first time I'm hearing this why didn't you know pass the agency yeah and it usually has to do with accessibility I don't understand why that's important but it's a good moment for educating them about it yeah accessibility yeah so 20% of the population has a disability and so even and a lot of them aren't visible disabilities so you never know and that's a big percent of people to make feel alienated this is the most diverse minority group and so it's as it's really it's about sensitivity best practices in accessibility overlap with best practices in SEO it's like killing two birds with one stone when you do things the proper way in terms of the markup and it's it's really about making the internet open to everyone is being in work press you know we're all really I'm very passionate about open source I don't think that you can have open source without including accessibility inside that where it's about openness yeah yeah it's a legal thing too but I don't want that to be like the thing that everyone it's just you have to because of legal reasons you have to because of ethical reasons yes well there are a lot I have probably six different like bookmarklets in chrome that let you test different things there's I don't I haven't found one tool that I like for every to hit like every test if you came to the accessibility talk earlier today axe was mentioned AXE it's it's really good I use that I use Wave I really like the tote it's it's totally TOTA11Y bookmarklet that gives you it actually is like a visual representation of like what a screen reader would say it's like the screen reader wand it's not perfect but it's good for like the first pass but then using the I have a Mac and so I use ChromeVox as a voiceover testing not voiceover what's it called screen reader thank you screen reader testing then I also use voiceover that's why that word was in my head voiceover on Mac to do testing I have a Windows computer in the office that I have not yet set up in V in V access on but I will and so doing all of those it takes a long time but that's why we build it into the scope of work back there first yes I Lexi can answer that maybe oh it was medium.com I think blue shirt you had question do you present a new contract to address anything that broke is not really the client's fault for instance we're doing security update and word press we shoot at this site it breaks we go over there and they say hey guys it's not working right so I mean as a developer do you offer a new contract to fix that or do you just handle that because you feel it's irresponsible so it falls within our 30 day warranty but yes so in our contract it there's a section about word press is open software we are not responsible for you know after 30 days it's not our it's not our responsibility so it would be a separate contract if somebody came back and said hey this isn't working anymore it's like well things change so and we didn't touch it so it wasn't our fault that it broke it was working when we last touched it when you're doing your teaching do you ever go over like here's a list of good plugins to use under these situations that we can say aren't going to break your site because we used them on any number of projects no but I really like that idea so there's whenever we build a website we do it from beginning to end we put all of the content in we're building custom themes and including all of the plugins that we use on all not depending on the functionality needs but I like the idea of including a list of like don't install this yeah I saw a hand over here and then there's one back there too I don't know yes we do it screen share and I've gotten pressure to standardize it and make sure that it's like a video or something that's replicable because a lot of times it's like this is how you copy and paste this is where you click publish it's pretty standard stuff but then there's always that like for this content type that we built out here's how you do it and here's how you add all the custom things into it I think that we need to be doing a mix of no but I should yeah I should be recording those and saving them and sharing it yes I'm always striving to improve oh yes it really depends on their needs and so we have some clients who have very set like all of the pages it'll be like there's seven templates or something and like all of their content will fit into one of these we'll build that out with ACF Advanced Custom Fields Pro usually then if it's kind of like if there aren't custom post types it's all pages but they kind of want to have flexible layout then we'll go to the page builders I'm trying to stay away from the page builders a little bit just as I think it's my bias as a developer though where I don't like the way that they're built so I don't want to use it but again I'm not the end user so what does it matter what I like Advanced Custom Fields oh the Troy Dean plugin cool is that a paid plugin so outside of the page builders are there any popular plugins that you would I don't know if I'm allowed to on camera I got an answer for that at least it will be at the happiness bar it's if there's any plugins that I would recommend steering clear of how do I get my copy text from remote clients first yes yes or at least in conjunction with I don't like to go into development into the build without that my own personal process is putting the content in and then building it I mean there's always going to be something they'll agree in the design to being this like oh yeah this is a short section we don't need a whole lot there and then they'll give you two pages so it's easier to design and it's less like hair pulling when you've got their content first how do you yeah so we'll have we create like a site map and say like these are the pages and we do that in conjunction with them based on you know their industry what they might already have a website and like what works on their current website what are we keeping what are we getting rid of and what's new but then after that then it's yeah it's homework or they can pay us yeah there's a hand back there somewhere no okay you mentioned that you do content entry as part of the project I'm sure that accessibility is part of that so you're thinking about accessibility through the project but then you hand the project off to a client and I was curious about what are some of the effective ways of preparing a client in regards to accessibility after the fact yeah so I teach the clients about heading levels and alt tags and that's kind of all I go over but you were at the accessibility talk earlier right so there's this new plug-in that NC State has developed that looks amazing that lets you test or lets your clients test the accessibility of their content and so you don't have to control over that one big block of content after you hand off the website this thing looks amazing so I'm going to be putting that on all of our websites yeah I'm glad you mentioned that yeah it's really cool I don't remember thank you NC State Accessibility Helper it works with the github update or plug-in where any plugins that are hosted on github rather than the wordpress plug-in repository it can automatically be updated through that any other questions well I really appreciate you all coming today, thank you for sitting through this and I'll be at the happiness bar