How to Make Your Website Not Ugly - Hilary Stohs-Krause | JSConf Hawaii 2019

all right so I am going to be talking how to make your website not ugly which I think everyone can agree is a good thing yeah okay all right so a little bit about me I'm a former journalist I know there's actually a lot of former journalists here think okay yeah I was kind of expecting some noise and I had a stint as a print designer I've started doing a little bit of web design but my background is primarily as a software developer ten-forward consulting and medicine I also have a second to somebody we have some Guinan stickers because we're named for the bar in the enterprise so if anybody wants the guidance sticker come find me afterwards ten-forward we primarily work with startups so a lot of times they don't have a budget for a designer or for us to do any kind of in-house design and so this talk kind of originated because there was a lot of stuff that I knew we should be doing but we didn't have anyone who had the existing knowledge so I kind of had to figure it out myself and then fun fact I read the second book of the storm white archives in one day if anybody's a Brandon Sanderson fan yeah it's a thousand eighty eight pages I took a day off of work when I got it because I knew I wouldn't be able to put it down all right so we're gonna look at a real website from 1996 Rae right pretty attractive this is a senator's website by the way this isn't just like some kid in their basement like I was making a terrible website this is like a congressional website so who thinks that this is well-designed okay okay I made this this look is kind of like coming back a little bit god forbid but right I mean most of us look at this and we realize yeah this could probably be improved so the point of that is you know more than you think you do right so even if you don't have any design experience or when consider yourself creative you can at least recognize when something could be improved or when it's when it's really not working but why do we care right doesn't it matter more that what we're building works well so usability is a big one it doesn't really matter if everything works well if people don't know how to find it right credibility is another big one so there's a study from Stanford University they had ten different categories and they asked people to rank the categories by which one they felt gave them the most trust in a website on first visit 46% of people said the visual design was the most important that was the the category that had the most votes functionality was only 8% so especially when we're first coming to his site we don't really care how it works is we haven't gotten there yet we want to know we want to be able to trust the website and then interest is the last one so this varies really widely depending on what study you look at but it seems that it's from about 10 seconds to 50 milliseconds is how long we have to convince someone to stay on the site before they bounce so maybe you're thinking okay I'll buy it I'm listening see we have to say disclaimer of course there are always exceptions right so everything I'm going to talk about today are sort of broad guidelines depending on the site or applications target demographics the intended use you know these are not going to necessarily apply but they found in Sonya sonoran group does a ton with UX and they revisited some of their major findings from like ten years ago twenty years ago to see does is this still truth Suzy still holed up and they found that usability guidelines tend to be very durable so the idea being that design trends and patterns definitely change over time but human behavior does not as anyone who has dated an ill-suited partner knows all too well so a lot to cover I'm going to speak pretty fast because I have a lot of things I want to get out and I don't have a ton of time but you can follow along I have my slides up online and I'll have a link at the bottom and I'll have it later so yeah all right so first we're going to look at words and how we think about text as like a visual element then images when do we use them what kind do we use how do we use them in the right way and then design as kind of an overall picture how do we think about design from a lot Cole perspective alright first we want to make speech visual so there was his 28 2008 eye tracking study and they found that visitors only read 20% of text context on content on average so how can we improve that first we want to make sure that our text can breathe so lengths again depending on what study you look at there's a lot of different opinions about this but broadly speaking people prefer my links that are shorter so 50 60 characters per line but they actually read faster at longer links so the New York Times for example which I use them for a lot of examples in here I mean they're a site that's literally meant for people to be reading giant blocks of text and they keep their line length at right around like 75 so kind of anywhere between 60 and 100 is fine again depending on what part of a site it is but going longer than 100 people start to they don't follow all the way to the end of the line line height we usually do about 1.4 again this depends on what your typeface is this is not 1.4 pixels or EMS it's 1.4 times the font size of the element and that tends to you know again generally speaking that works really well and then padding so we do at least like 15 pixels because especially if you have like columns of text if the columns are too close people just read straight across if they're too far away people get to the end they don't know where they're supposed to go next so just making sure that you have ample space around your text so that it it's easy to follow the flow of what you're trying to do so here's an example of maybe not how to do it but you know the lines are really close together you can see that the text from the different lines are actually touching each other it's really wide I just look at this and I immediately want to go check out something else and here's how they actually do it so this again is from The Times so there's plenty of spacing but it doesn't feel like there are gaps we can see that long column of white on the side we're going to talk about that a little bit later but like white spaces your friend it is not wasted all right and then it has to be legible so contrast there's a great website that I always check all of my color combinations on its web a morgue they have a contrast checker and it checks with the wk standard so making sure that it's it's compliant with accessible standards and this is important because just because you can read something doesn't mean that everyone can read it right I think about 1 in 10 people in the US have some kind of disability and that's a lot of people and so a very easy way to make it easier for folks to consume your content is to just make sure that it's the contrast is good size 16 pixel is as a browser default for a reason especially as we have an aging population who maybe is having you know vision issues like it's really important that your text is not too small and again this depends on the type face so we just redesigned we're redesigning our site and some of our text we actually put the default at 20 because it just tends to be a smaller more condensed typeface so who can read this oh come on I want your eyesight and I clearly could not read that and then we've here right and this still would not pass those those standards for accessibility but it's way better all right so then we want to make our text scannable so like we said earlier that study from 2008 people only read about 20% of text content we lose people very quickly when it's a text heavy page and so making sure that they are able to scan through everything will allow us to keep people longer and I'm going to talk about this a little bit later in the presentation some ways to do this highlight the key content using subheads and this I thought was really interesting we actually read faster when text has a mix of uppercase and lowercase letters and it's not because that inherently is easier to read we're just trained to read that and so when we see all caps are all lowercase it actually takes us you know split seconds longer to be able to process that content well it would list another great way to do it so this is the site where I just kind of stripped out a lot of their styling and if I come here I just see a giant block of text I don't really know what it's about I have to I know that I have to invest at least a few minutes to figure out what they're even talking about to see if I'm interested in it and this is what it actually looks like so we can see it's very clear what the title is right that grabs my attention immediately they have keywords at the top so I can look at the keywords and see okay am i interested in this is this worth my time they pull out the first paragraph and make it bigger they have sub heads so maybe I see okay I know a little bit about people scanning websites but maybe there's something new in here that I don't know about so I'm gonna skim through the sub heads see if one catches my eye oh I didn't know about you know this new study let me read that paragraph all right keep decoration to a minimum so this is something that I think is is it's more attempting to not do this as there are so many different you know like google fonts or so many different free typefaces that we can use and it's it's easy especially for like clients that we work with to be like oh we want like six different typefaces no not gonna do that and here's why we usually pick like two or three so maybe we have one typeface that's dedicated to our headers and sub headers and one that's for body text color is again so two to three and the reason for this is because when you have too many typefaces or too many colors our brain instinctively assumes that it's an ad and we just completely skip that we don't even look at that content we just skip it completely so again kind of using more complex fonts or typefaces for the headers where the text is probably bigger and then your simpler ones for the body text which is probably going to be a little bit smaller so I'm not making fun of this website and actually felt much better about using this example in this presentation because I saw that they redesigned it and it's much better now but this is what it used to look like and when I look at that site right first of all I don't know where to go because there's a lot of different elements that are competing for my attention the nav isn't kind of an unusual spot that's not where I would instinctively go to look for navigation I assumed that all of those squares at the bottom were ads because they all have different typefaces the colors are all different font sizes all different and those are actually just like pages on this site there like programs that the church has so this is a better example like every time that I go to this slide I just kind of like yes this is just nice it's very clear the navigation is where I expect it to be it's clear what page I'm on I know what pattern I know at a glance what pattern this site is using to disseminate information and a big thing that I'm going to talk about is how you want to make people learn one pattern and stick to it right we want to make using our application or website as painless as possible okay we recap quick so we want to think about speech as a visual element within a website or application so give it plenty of breathing room make sure it's legible make it scannable so that people can skip around to what they're interested in and keep it simple not so many colors or too many typefaces alright we want to use our images appropriately and early I don't think there's any situation where this image is not appropriate but that's another conversation so icons a company that's actually called user testing which is a little too on the nose but they studied 190 icons in 2015 and they asked people what they asked people to predict what would happen when they clicked on a particular icon so they found that if they gave them icons that were unique to an application so for example Twitter has the little like feather thing that you click if you want to write a message that one everybody knows but exempt you know icons like that that are unique to a specific application if they did have a label only 34% of people knew what it was going to do so that's like a third of people so 66 or some people guess wrong if they use more generic Universal icons again without a label 60 percent of people guess what it was going to do correctly and if they put a label on those more generic icons than 80 percent of people got it right but that's still you know one-fifth people didn't know it was going to happen when they click that icon so the idea is kind of there are maybe three like truly Universal icons it just doesn't exist and especially if you have an application that is used by an international audience I mean you just you cannot assume that people know what something is going to do so yeah labels are the rule not the exception they work best often in a navigation or a menu setting that's kind of again where we expect them as well or if they're if you use them for decoration not as part of the actual like functionality and then avoiding icons with conflicting meanings so I want everyone to think what icon would you choose to mean share just give people a second okay these are all icons that have been used in software to mean sure they all look completely different from each other some of them I really don't understand why they went that particular route but that just kind of goes to show right there there really are very few Universal icons and you know some people have come up to me after this talking like well what if we put hover text on it well hover text doesn't work on mobile for one and also that is creating extra work for the user right we want to make it easy for people to interact with our content so if I have to admit if I have to put invisible work into understanding how something works I'm already just you know irate by that experience and not really having a good time with it all right so then images who has heard of banner blindness a couple people okay so this is back in the days when I was building my Buffy the Vampire Slayer website and pretty much all sites had that like flashing rectangular ad right at the top if you remember that that was so ubiquitous that we started to instinctively ignore that section and we'll see that again in a little bit we just literally don't even look there now kind of realizing this this banner blindness people have started to put their ads elsewhere right so how many times when you're reading through like a news article and then it says like content continues after the ad and there's just an ad right in the middle of the text right that's kind of the new one of the new patterns but we skip that too you know I find that I notice what that is and I just don't even look at it I just skip down to the rest of the text so we we adjust for the patterns of ad placements so this ties into you know basic UX because you want to be aware of that right so don't put key content in these areas that we expect to be ads because we literally don't see them we just skip right past it make sure that your images are integrating images or graphics are integrated with your content right so if if something is clearly a stock photo that brings down credibility if it seems not related to the content we again kind of assume it's an ad and it's just distracting so so news a Norman group they found that the first thing that users are drawn to on a website is actually plain text then faces so if you have like one of our clients had a blog and they kept wanting us to put more images into their blog just for the sake of having you but it's like all we just want to break up the text let's put some images in and we had to come back and argue like just getting a random stock image of a flag like actually detracts from your content right that makes it look more like an ad that doesn't mean people want to read it so making sure that our images are informative and/or relevant right so maybe it's a picture of the company team or someone using the app or like a workflow image you know something that is actually related to the text that ties it together instead of being distracting people have maybe seen this before this one's pretty popular they have also redone their website a little bit if you go to links cars.com it's a little better I stuck with the old one because it's worse and also because they now have a little graphic on the top that says that even with that terrible website they're still like the number one best-selling car dealer in the UK which is true there's like very successful but I think they you know this is the exception that proves the rule it's just very distracting I'm not entirely sure what they're doing because you don't really see any cars here so yeah maybe maybe not where we want to go on the other hand this kind of takes off all those boxes right the content it might be a stock image but at least it's very related to the content of the article it's integrated directly because we have the title going over the image so we can see that they are connected they are part of the same thing not like a standalone where we might expect you to be an ad and it's simple its effective alright so another recap we want to think about speech from a visual perspective right so how do we make sure that we can read it that it has enough space that it's easy for people to to connect with we want to use our images appropriately so icons should like seriously always have a label one thing I like to do if I'm gonna use an icon especially a unique icon for an application is I go around to everyone in my office show them the icon ask them you know within the context of the appliques and if they don't all give me the correct answer then I don't use it I go back to the drawing board alright seven to ten I'm going to think illogically about our design this thing we we think logically about anything else that we do so patterns patterns are your best friend if you are so for example something that happens a lot in our office is we have an existing site that maybe we had a designer come and do and we use a template or you know whatever the case is and the client wants to add a new page and so we end up building that page from scratch and we just base it off the existing design so we look at what are the patterns that we've been using already right do we have a certain kind of column that we like to use do we have like color banners that go all the way across that we can use one thing that our a designer friend of mine said once was like there are literally a billion websites so just find one you like and kind of copy it because for the most part what we're doing you know again this is where that's sort of like well not all websites if you're building something that that needs to have a unique design it needs to be really trendy and eye-catching like obviously you want to do something unique but in the most kit in most cases we just want something that looks good so quality Trump's originality in most cases find something that works use it as a model right just focus on the patterns I'm making sure everything is consistent right that idea of like teaching our user one pattern sticking to it so that it's very easy for them to navigate through the site or application find what they're looking for so this is actually one of my favorite bars in Madison this is our old site they got a new one but they keep a link to that keep the old one up for like nostalgia but this was their real website until maybe a year ago and it's completely useless right I know nothing about the bar I have no idea how all those st. Patty's Day pictures are because they've been up there forever weird things are highlighted weird things are bolded they have multiple colors some things that are underlined aren't actually links it's just kind of a hot mess here on the other hand we have I mean it's this is like just patterns right everything is in patterns we have our columns we have our navigation on the side we can see the filters everything is structured the same the squares are all the same size it's very easy to come to this having never used it before and be able to find what you want alright who's heard of progressive disclosure a couple people okay so progressive disclosure is the idea of not overwhelming users with content but making it easy for them to find what they're looking for so we're gonna talk about some ways to do that who is familiar with the F shape reading pattern more people okay so this is one of those ones I mentioned earlier the durability of usability guidelines and this is one that they went and revisited he goes 20 years later and they found that it's still true so it's this right the red is where we spend the most time looking at a site and then the blue and clears always been the least time so we can see there's this sort of broad F shape so we start in the top I don't know left and right left corner and then we kind of cascade down and again you can see that the intensity of our consumption of content drastically like tapers off the farther down that we get they found that for languages that are flipped from English so where you read the opposite direction the FC pattern is still there it's just flipped kind of like you would expect so this is this is kind of a universal behavior so top to bottom important to less important right they found that in 2014 they found that a hundred and fifty six percent more people see you know sort of like above the fold so in newspapers the above the fold was literally above the fold right if you were holding a physical newspaper in your hands they put the eye-catching stuff at the top because they wanted you to be invested enough that you would bother to actually open the newspaper and that same behavior right human behavior does not change we just ported that behavior over to the web but instead of a fold we have a scroll so it's kind of like before the scroll so 100 see 6 percent more people look at the content before the scroll so what we want to make sure that we are we are drawing people at the top so really getting our our key concepts at the top of the page and then avoid putting content in this traditional ad area so if we go back to look at here right we can see that we don't even look at the top for the most part that whole top section we don't even look at part of that is banner blind as part of that is that we now kind of expect that a navigation is there and we first get to a site we're not necessarily interested in the navigation right we want to figure out well what are they about do I care and if I care then maybe I want to go click for something specific so here's a good example right again from the New York Times so we can see that in that area that we don't look at they just put other stories it's like if we click on those great if we don't not the end of the world they have a nice big title I know exactly what this is about the image is like very relevant to the content I have subheads so I can kind of scroll through see what I'm looking for they understand that you know and you can see there's almost an F on this page right they understand the way that we are going to interact with the content and so they decide with a bunch of whitespace there because we're not looking there anyway like why bother putting something there alright so again with consistency right if there's one thing you leave with today it's a consistency in patterns in design are like your best friend so links and buttons right idea if a button has a shadow one place it should probably have a shadow all the time forms should have the same color if you have like alerts the red should be the same color tables should look the same your header typefaces and size it should be the same and now you know we have some sites where that are very very data heavy so like for the University so they're just literally looking at data from research projects and so tables for like one category you might have like a different color for the header right so that they can use that it as a visual cue to see what they're looking at but otherwise everything is the same because we want to make it again we want to make it easy for people to find what they're looking for so which part of this text do you think is the link is that the green or is it the underlined yeah no one answered because like you have no I'm going unless you click on something is it you know it's the green maybe where you hover and it gives you that sort of weird definition or it wants you to click somewhere else to go somewhere I look at this and I have to stop and think and what I don't want is to think about how the content works I want to you know ideally I'm thinking about the content itself and like you know it's thoughtful and deep and whatever but I don't want to think about how to interact with it so functionality is a part of design the structure so I'm a full site developer so I do beckon in rails and then front-end and on a new project or even if I'm just adding to the architecture of an existing product I think about how the data models can have a direct impact on the user facing implementation so I sit then I think okay what am I likely building out on the front end in the interface that someone's gonna use how can I make sure that I am sort of preparing for that to be a you know like a cooperative misadventure which is like kind of a business phony word but you know what I mean like how can I think about how they work together bugs Trump Beauty right so we saw that 46% of people saying that visual design is the most important for building credibility versus 8% for functionality but if you decide to stay on a site because of the visual design and then the links are all broken in the forms don't submit you're not going to stay anyway right so this I really like this quote design is where science and art break even so the idea that you know I think a lot of people when they hear visual design they think that it's it's not really you know especially if you're more of a back in partner but they think it's not really relevant to what I'm doing right the code is one thing the visual design is another thing but they all fit together and impact each other and if we're aware of that then we can like really build kickass all right final recap so we want to think about our words as a visual construct right how do we make sure that they are able to be read easily and quickly images icons should always have labels photos and graphics should be integrated with the content relevant informative stock images are not your friend because we look at text first that's what we're drawn to then we look at faces random flag pictures are just like whatever and then how do we think about design from a logical perspective right so using patterns and being consistent keeping in mind that F shape reading pattern and how that affects where we put what content being consistent and then of course making sure that it works so some additional information a bunch of citations that you can check out for where I got all this information and that's all I have so thank you [Applause]

Channel: JSConf

Views: 25,615

Keywords: UX, User Experience, Web UX, Design

Id: F4G2i4eS7x0

Length: 28min 3sec (1683 seconds)

Published: Mon Jun 24 2019