 Hey everyone, my name is Kyle Evans, and I am a developer at a company called Range We're WordPress design and development shop We do some VIP work and also just some other Work mostly like a company needs a website. We design it and then make it work You can That's a photo of me in case you didn't know what I look like you can follow me at scuba kyle if you're on Twitter I never really post anything, but I read things and if you ever need to if you want to like mention me or I'll post the slides after this. There's a few links and stuff. So you may want to just know that also I have the Twitter handle scuba kyle because I've been using that since like I was a Teenager when I first like got certified a scuba dive And I don't really scuba dive that often so like it's kind of weird that I'm Say hey, I'm scuba kyle. Oh, yeah, you're scuba diver. Well. Yeah, I did like Used to so if you have any like suggestions for a better username for me You can also tweet those at me But this is actually a photo of like my first open water ocean dive when I came out of the water You can see that I am happy that I survived and also that I am learning that I don't need any equipment to breathe outside The water I'm still breathing on my regulator, but I don't dive that often, but I did actually go diving Like two weekends ago with my dad I'm moving soon. And so he wanted to take like a father's son Weekend dive trip. So we went to Panama City, which you can kind of see barely on the coast right there and so this is our first time to kind of go diving in a few years and We went diving on a Saturday and a Sunday and the Sunday was the first time that I'd ever gotten seasick in my life and It was pretty miserable like and I wasn't even that bad Seasick, but I think it was just kind of the perfect conditions to get seasick it was this I think photo was on The Saturday dive and then the Sunday dives the waves were like much worse It wasn't like, you know, king crab fishing where the waves are coming on the board and we're like trying to survive But it was just we were trying not, you know, not to be sick And also I it was like really hot. It was really sunny I put on my wetsuit kind of too early and then just got overheated. I think and and It was also if you've never been diving before on like a little boat They go out to you know a couple of miles offshore go to a shipwreck or something The dive master jumps in the water and ties the anchor line to a ship or to a bridge then or whatever the wreck is or The dive site is and then he comes up and gives you details the visibility that kind of stuff and on this boat We actually had a dive master in training who Was like a new scuba diver period like he he Got his equipment ready and stood up and his tank fell like alphas his vest that you know straps you to your tank and Yeah, I don't know if you've ever been scuba diving, but your tank is kind of like the essential piece of equipment You're taking a regulator and so when they dove in to go tie up to the ship They the current was so bad the waves were so bad it pushed the boat forward and pushed them forward and They couldn't tie on in time And so they had a surface and they both surface them like Opposites of the Gulf I think and so then the dive captain had to go or the captain of the boat had to go Pick them up and then kind of reset wait for another dive So all this time I had my wetsuit on I was getting hot and getting sick and the dive I heard the captain was telling like war stories of people getting sick on his boat, which didn't really help But he said last week this guy had never been seasick before it got seasick on my boat right here He kind of said it proud to which is kind of weird He said yeah, he got sick on my boat for the first time He said now he's able to empathize with people who get seasick and and then I immediately started to think about when I was in when I was a teenager and went on a like a deep-sea fishing trip with some friends and One of my friends got was seasick the whole time Like spit the whole time in the bathroom Broke the toilet got the captain mad at him and it was hilarious Like we all thought it was like really funny for some reason because we were just teenage jerks, I guess But now I was thinking back of that like that he was having like a legit Miserable experience right there because I'm not even that bad seasick and I'm having a miserable experience And that's what a lot of times we think about what empathy is is being able to Understand and share the feelings of someone else and a lot of times it takes like an experience for us to really be able to empathize with someone But it doesn't need to be a shared experience or at least a One-for-one shared experience like I didn't have to get seasick to understand that my friend was miserable I could have just seen on his face that he was miserable and been a decent human being and felt bad for him and Said I was a teenager and laughed at him But if he also is a skill that can be worked on And it can be a skill that you can actually Get better at and be a more empathetic person either by not being a teenager anymore or just by working on it and being able to identify with people as human beings better and It doesn't always have to be like an emotional thing like empathy We're usually connecting with someone's emotions, but it doesn't have to be this emotional thing that you're having like you know a really like Emotional connection with someone or you don't necessarily have to have an emotional connection with someone to fill empathy You can you can fill it on a more or understand it on a more intellectual Basis like you can I haven't experienced that but I can I can kind of understand why you're experiencing that or I can Know that you're experiencing this reaction and sometimes that's important and so In this talk, it's it's kind of a maybe a weird maybe empathy is kind of a big word You know for this kind of talk But I wanted to talk about how our development decisions affect other people and because a lot of times we as developers kind of hold a big We can hold kind of You know the responsibility to make pretty big decisions that kind of affect people and they're not like affecting people like making people have like Extreme joy or extreme sadness although you can create things products that make people have extreme frustration or Kind of just happy like to be able to use your product But I think it's important that we're able to empathize with a few different people So that we can see how the decisions we make will affect their happiness level when they use our products or when they experience our code the first kind of Group of people I want to talk about so I think that it's important that we empathize with our users and these people When I say users, I mean the people who are ultimately going to view whatever product that you're creating whatever product or service I'm in agency work where we're doing client work. We're building websites for Businesses and other people. So the users are the people who are visiting their websites And it's important to know like this is kind of a big group because it can be anybody And if you're like a plug-in developer or theme developer, like it could be an even bigger group of people who are going to experience your product in some way But it's important that we know that our audience can be diverse and our audience can be very different from ourselves And so like one of the things the the audience the users the people can be can use different devices and browsers than us it's really easy for us to kind of if you're a certain maybe like If you're always buying like the new a new computer or a new phone and that kind of stuff It's really easy for us to kind of get into a bubble and where all of our products like work really well the things that we're using work really well we have We're using the latest version of Chrome. We're using like big monitors and that kind of stuff But not everyone, you know has that luxury not everyone is using like a nice phone or a big monitor I was at an agency a few years ago In which the designer I was working with and I both had fairly large monitors that we plugged our laptops in into and We were working on this one website and we of course was making it responsive But it was something in which it had to like kind of a big hero image at the home page That really kind of it really mattered about what kind of real estate your screen had And so I made a lot of work to like kind of get a lot of the the phone sizes the tablet sizes And I was kind of basing it on with and I kind of like stupidly I guess forgot about height until We were in the meeting to kind of pitch the site to the client and my project manager had the site up on her computer Which was had like different settings than my computer and then was projected on you know Something like this which kind of distorted the resolution again And so the vertical space was totally different like she had the width But she just had like I don't too many toolbars or like her her dock like I had hide my dock her dock was up And so the vertical width suddenly was like oh no vertical with right and then so the client like the designer immediately noticed And I felt kind of bad that I did this to his beautiful design And then the client kind of noticed and we're like yeah, we'll fix that but So consider that that people have and use different devices than you do and we'll have Yeah, one of the the best kind of tools to use is browser stack Because you don't have probably all the devices that people use And so browser stack is just a really great way to pull up different browsers in different operating systems And that's really beneficial for you to like if you know that some of your audience is going to be using Windows XP You can actually load Windows XP if you don't have an Android you don't have an iPhone You can actually load an iPhone or Android emulator And so I usually use this and then I work with a guy who uses Android and then message him to pull up the phone the website on his phone Yeah browser stack really awesome tool People have slower internet than you do and You know, I think this is really important that we we empathize with people who are going to pull up your website on a Mobile device or a mobile device on a really bad connection or just a slow Wi-Fi Or slow internet like on a desktop computer You can have You can have like a really good server setup You could do everything right about optimizing your CSS and JavaScript and optimizing how the images are saved and resized And pulled from the server so the server can be like super fast giving you the images And then you can be on a really nice internet speed and be retrieving the resources from your website really fast And you can kind of get into this zone where you're working on a website for a while and not realizing how much Like how much resources are actually pulling into the site and how slow it can be for some people One of the cool things I like to do And that's a problem because sometimes our dev and our staging environments are kind of ideal environments They're ideal environments on the server. They're ideal environments for how we're using them and how we're pulling them up on our computer one cool thing I like to use is Most of you maybe are familiar with the like Google's web inspector of Firefox as a similar thing and Safari even and I think Even Internet Explorer. They a lot of times will have dev tools One cool thing is this Right over there the little phone icon you can click that and it actually brings up like the site how it will look on a certain types of Devices it's not like a true emulator, but it can like it'll send the website It'll tell the website. It's an iPhone or an Android and so if the website is sending mobile only content The server is sending mobile only content or For you know any specific device you'll get that But one of the cool things about this is that area up there the network Section where you can actually throw it all your own speed and you can see what your website will how your website will look if you Are on a 3g connection or or whatever? And so even if you you know pull out your phone and turn Wi-Fi off and pull it up You may still like live in a nice area that you have good connection So you can throw out all your speed and see how miserable people will be viewing your website And then you can also use the timeline and the dev tools is you can record how fast they're going And another cool thing is the Google page speed you can actually get You can run your site through Google's page speed and get a lot of statistics about it and see where it ranks and how Google like grades it and sees because not only does it affect People pulling up your website. It affects how Google kind of considers how good your website is And so that's important to but mostly you don't want to make people mad People have different accessibility needs than you do this one maybe is like really easy to forget about and This one sometimes you like really have to put accessibility needs and kind of you know intentionally think about these things There's actually a talk going on right now about accessibility. So you should have just been in that But you can watch it on WordPress TV later or look it up There's a lot of cool WordPress related accessibility Tools out there on the make dot wordpress.org. There's a whole accessibility section They have a lot of resources some plugins that you can use and some tools to see how Accessible your website is and so this is people who are using screen readers like people with vision disabilities or Other types that aren't experiencing the web like most people are And finally people speak different languages than you do And this is this is huge for plugin developers and theme developers who were wanting to sell or distribute their themes for a lot of people to use If you're like me and client work It's easy to forget about this because I you know if I build a website for some company in Birmingham like they're not Gonna translate their website probably but the I do make an I make an intentional I make an intentional to actually still do all the internationalization things properly like if I ever Put strings of text and like a functions file or in PHP Make sure that those are escape properly or run through the internationalization Functions properly so that they can be translated and the reason I think it's important to do this Even if you're working on a site that's not gonna be translated is one that site may eventually be translated They may say hey, you know what? We want to be translated in Spanish as well And another thing is is you get really good practice Because I've been kind of doing this since I really started working in WordPress full-time and then Like a few months ago. I realized I was doing like half of it wrong And so it's really important that So I've been kind of glad that I've been doing it You know since the beginning so that I can kind of practice and refine and make sure that it's it's good So that whenever I do create something that needs to be translated it can and One really there's a lot of tools on make.wordpress.org and the WordPress codex for this to show the right functions and stuff to use But this is a really cool The WordPress internationalization test I encourage you to take it if you just Google WordPress internationalization test You should find it or you can write down that super long URL But this will actually like really challenge you to see like are you doing it right? Are you using the right functions? Are you using are you do things right if you don't know with like the internationalization function? I forgot like the technical term, but it's it if you ever see like the underscore underscore parentheses Like that means like the string can be translated or the underscore E parentheses or underscore X and that kind of stuff So this test is super cool. You can learn things through the test as well So the next group of people I think it's super important to empathize with is our clients And these are the people who are building the product for and these are the people like for me It's the it's going to be the content editors of the website that I'm creating The the people the owner the small business owner or the person in the large organization who is in charge of updating their website And I think this is probably the most important is that we understand How they're going to be using the website and this is important because Developers become UI and UX designers here unless you work with a designer or you some of you may be a designer developer combo But I I work with a designer who designs a beautiful front-end like what the website is going to look like and then I take that Website and I have to make decisions based on What goes into the header dot PHP what goes into a sidebar? What's going to be a widget? What's going to be a custom post type? What's going to be? Metadata associated with a custom post type or a page or a post and so all of those decisions are like user experience decisions If you make a decision based on like this is going to be a new post type Or this is just going to be a page and the user is going to have to type in and the page a certain way for it to Display a proper way or the user is going to have to use these short codes that might break if there's any other security Update, you know, you have you make these decisions because like using short codes might be a Worst user experience than having like custom fields and so a lot of times when we We we get a design maybe from my perspective We look at what we're going to do or you have a project in mind You're thinking about how to make it a lot of times we ask what is easiest what's the easiest path to get this out or We could ask what is best for the client and sometimes those are two totally different things So for example, you may be wondering You know if you have a design you have a design in mind that has a sidebar But that sidebar changes on every single page You may think yeah, it's a sidebar technically is a sidebar and I can just create another sidebar I can create a widget to go into that sidebar It's a sidebar, but if then you're gonna have to do all kinds of rules like use the widget logic plug-in and hyphen the The WordPress conditional tags and that widget logic plug-in that only like developers kind of know and understand That's not something a content editor really understands and so maybe it's best to create a Some meta boxes that will go Into like each page that controls the sidebar or maybe it's wiser to install a plug-in That has more of a dynamic sidebar situation that a content editor is able to edit an update The decisions we make here determines whether people It's easy for people to use WordPress You can ask a lot of people Is WordPress easy to use like people who are just creating blogs and websites and you can get a lot of different answers And that's a lot of times that's up to us as developers of plugins the developers of their custom websites Whether they think WordPress is easy or they think WordPress is hard So we kind of have a lot of power in that a lot of responsibility So I think it's Important to ask where would the client expect to update something would they expect to go into a sidebar section? Do they know that widget area did what they expect like okay? This is something on this page. I expect to if I want to edit something on the home page I expect to edit the home page and so maybe it's best to put some meta boxes on the home page And so they can say hey, I'm editing this because it's on the home page. I'm gonna edit the home page And you can do a lot of cool things like conditional Meta boxes that only load on certain post types and certain even certain pages or certain things Pat was in here earlier talking a lot about events custom fields and even that has some a lot of conditional Tags that you can use or conditional arguments you can use a lot of times we When we think about where would this go we we need to know the difference between what would how would I want this? And what is best for the client? And I think this is kind of the difference between Treat others as you would like to be treated and treat others as you think they would like to be treated Because again people are different and maybe your client is different and someone who's working in WordPress as a Content editor is making a lot of different decisions than you are So I think in client work It's important that we kind of listen to our clients listen to where they're having problems what kind of support requests they're putting in It's easy for us to kind of get into it Maybe it's easy for me to get into a developer bubble to where in most of the WordPress people I'm interacting with our other WordPress developers and It's hard to like remember what it was like when I first started just using WordPress when I started a blog And and WordPress being you know powering like what 24% of the web right now There are a lot of people using WordPress who are not like developers who are not like me There's even developers who are not like me I last night I was eating with some friends and They're asking me about the conference and about work one said what is what is WordPress and the other is Oh WordPress is a blog and I have one and I was thinking yeah, that's not telling you Yeah, okay. Let's go with that So people have yeah people have different kind of expectations and things so I think it's also really important that because we're making a lot of user experience and user interface Decisions is important for us to kind of unless you have a designer who's like building designing back in as well I've never kind of see that in agency work But I think it's important that we we read blogs and read articles and listen to podcasts about user experience and user interface and One cool just like one out of many, but I just I kind of really like this website. It's called user onboarding You can find it at user on board calm and the guy just takes Onboarding experiences like you'll sign up for whatever the kind of the latest product is and then take screenshots and comment about them so his latest one was about Apple music the new Apple music and it's really kind of funny because yeah You kind of identify with it like the frustrations he goes through and he tries to go through it as is like just a general user So one just one example of I think bad user experience that I see a lot in agency work is Like ID fields ID fields are like fields when you just when you need to save an ID in the database And so you think okay Well, I'll just put a field here like I'll put in a meta box or a widget or somewhere Just type in the ID fields. They're super easy to make but they're also super terrible like really terrible for user experience Imagine if your phone like if you had to add a favorites to your phone list You first had to go to a completely different view and then scroll to like a random part on that page and see this long string of Text that didn't mean anything to you and find like a integer in that string of text Identify that integer and then copy it and go to another piece of page a lot of times when we we just put an ID field That's what we're asking of whoever it is that's going to update the page or the content We asked them to go to another part of the website to mouse over or to click on something to identify the ID in the URL Copy it and go back to another page and paste it in and I've seen this a lot of sites where like people expect other developers to be updating them and they're still annoying because like I Think it's better to to go ahead and create Metaboxes that are you can save the ID it's still great to save an ID But create meta boxes to help you find the page that you need And again like events custom fields is a is a good like user experience Like I know there's some problems maybe with people have with how they save the data especially repeatable fields and stuff like that, but there's other Metabox plugins and Metabox classes that you can use like cmv2 and other things like that But I think it's it's it's good to create good meta boxes It's good. You need to create good fields for users to type into or just like the content So finally I think that we need to empathize with future developers We need to identify with the people who are going to touch our code later after we're done with it and this slide could also be called pity future developers and and This this is important because you may be the future developer of your next project or you're the project that you're working on You know, it's kind of a common thing to like say as a developer Is that look at a code that you wrote? Six months ago or three months ago or last week and think what was I thinking that's terrible? I'm the worst developer ever And so just know like if you can't like have empathy towards You know some other person who's going to touch your code later at least think about yourself and what you're going to do and have to do and And also know that if whenever you're you're you have to go into someone else's code You and you're kind of judging that code or making fun of that code or seeing that code like Just know that whatever project you are working on you are you are going to be the past developer of that project and someone else Is going to look at your code and make fun of you So like don't I think it's just like kind of tacky to publicly shame bad code Unless it's like a super public thing and you just need to like publicly if there's a situation Which is a public thing you need to publicly call someone out but there's the difference between that and like Shaming people and making fun of people for writing bad code because we most of us have been there. We've written bad code And so just know like maybe empathize with past developers as well But know that People other people are going to have to touch your code and so Make it a good experience trying to make them not be frustrated And make it easy for them to know what's going on One of the best things to do is to have an idea and follow some coding standards And there's some WordPress coding standards there But coding standards just allows like it gives kind of a structure a guideline of how we should be writing code and Workpress, and it's good if you ever want to contribute to core That you're gonna need to know the WordPress coding standards anyway, but it's good to It's good to go open a new project or open a project that someone else has made and kind of be familiar with it And not get too lost in it There's a lot of other resources about coding standards a lot on WordPress.tv about coding standards There's even my co-worker Devon Vincent. He spoke in Miami. I think in June That's on WordPress TV you can see and finally comment your code and Comment your code wisely and smartly like if you have an if statement that says, you know If is true is true Then don't put a comment that says if this is true like yeah done like That's but maybe comment why you're doing something not necessarily what it's doing. I think PHP doc blocks are really good at the top of functions that describe what that whole function is doing and why you know What that whole function is there for and then inside the function comment Why you're doing certain things instead of so like common sense like I got into I worked one place when I was a teenager and They had commenting standards like you know for every X line of code. There just needs to be one line of comments But then that kind of got crazy because I was commenting like You know, this is an if statement but just make make sure you're commenting wisely and smartly not just Putting comments because you think you should comment put comments because you think someone is going to open this What are they going to think what are they going to want to know they're not going to want to know This is an if statement. They're going to know want to know why this if statement is there why this function is there Why is this an array? So comment your code wisely? And finally, I think it's important to empathize through diversity to get to know Different people from different backgrounds and different You know, don't don't stay in the developer bubble You know word camps are a really great place to do this because you get to meet all kinds of people Who are going to different tracks than you are who are going to develop designer tracks are going to like the business tracks and the all-users tracks So get to know people who are using WordPress in different ways than you are get to know people who are using it To blog and to create Websites and manage websites so you can see their frustrations and the things that they really enjoy you know, it's easy like I I I start to think like oh, should I use advanced custom fields or not or and I think that there's all these problems with the earth there's a potential problems with storing the data and Being able to retrieve that data in search certain situations, but then you talk to a user They love it best goes advanced custom fields. They don't think about all of that And so I'd either need to like I can use that or create something like better that still provides the same user experience or similar user experience Follow people on on Twitter who are different than you who have different opinions about WordPress or Drupal or Jumla or whatever You know, I follow some people who care about things. I really don't care about I Really like I don't know if it's kind of bad as a developer But I I didn't I haven't gotten into that whole PHP like seven and version argument But I follow people who do and so I'm kind of like up to date on that I can see like where they're coming from and What they're worth they're talking about and you can also you know see how people with Accessibility needs are using WordPress and people are just different. I think in general in life. It's good to have some diversity and No people interact with people with a different background because then you become Not only a better developer and a better employer or employee, but also a better human being which is it's nice to work with good human beings and So yeah, that's kind of empathetic Development or this talk. Does anybody have any comments or questions? Yeah Right. Yeah Yeah, that's a great question. I think I Yeah, I think For some things like creating good meta boxes Then you if like you're under time pressure and just install a good plug-in if you don't have time to like really make The plug-in like what or make the meta boxes what you want Yeah, I think There are a lot of time issues I I don't know how to really answer that quite I don't know if there's a priority that I have Yeah, is anybody kind of have like a priority? Putting like user flows and user stories in comments and Kind of also mentioned. I like to mention of where where it's broken And then for where where it was broken and then why I put that particular like if statement Because we're a lot of time at this for checking if something exists or or helping to Clean that code up and make it better. But if we put the comments in I think that's I mean commenting Is my probably my top priority? Yeah, even even saying what a function is or like where a function is somewhere else in your project Is more important than putting a doc doc block, but just what does this function do where where else are you using it? Yeah, some of my favorite commenting from like plugins. They'll show like if there's a function that's being called by a Like being added to a filter or an action and they'll put like what priority that is and So if I see that function, I say I want something above or below it I can see the priority or even remove that and know where it is Yeah, commenting. I think it's super important. I think too like Just you know doing your best and like trying to improve and maybe part of that is like allowing for more time And and as you improve being able to raise your prices that you are allowed more time Because those things I think are important and Yeah, I think yeah, any other questions Showing them the value That's a big part of Yeah Yeah, I think that's big a lot of times we may think of like You know and I'm I'm spending a little more time trying to do this thing the right way And how much time is that going to save on the long term? And so it takes a little more time up front But it can save more time and even if it doesn't if you get in the habit of doing that all the time You're gonna like eventually save more time, but it's also about not just saving time but saving Frustration and you know, there's other things to consider versus a time versus time constraint yeah, I I Haven't really I try to Give a lot of documentation to the client and the former agency. I was and even here. I think we try to Teach like have a training when we bring it in and saying like here's kind of where you're thinking But you know, I haven't brought them in at the beginning Mm-hmm. Oh nice We I've done that before like creating a content site like since just creating like bear post types and I'm sawing some plugins that we know like they're gonna be it will commerce or whatever and getting lying them to you Yeah, so that's interesting. Yeah, that's a good idea Right Yeah, we did that so that Where are you sorry because we saw that In the design phase there was a lot of interaction with the designer and the client and then The design phase would be approved and then there would be kind of this gap of like the developer working on a project And you know, we wanted to the project managers really wanted to stay communicate because they want to empathize with the client Like they want to stay in communication But we didn't want to like necessarily give them our staging site because they'd be changing stuff So we that was one of the solutions was to provide a content site So they had something to do besides bug us You know, they had something to do to like put in content and that's yeah That's a cool thing that you can test to see how they're working with the admin. Yeah Yeah, that's that's a good consideration for sure It's always like good when you see something like that in a panic time of like That person thought about this that the person was so smart and it's even better when that person was you So anything else? All right, cool. Thanks