All right, we're going to go ahead and get started. Thanks for coming. Last session of the day. It's a tough one.
It's a tough one, so I appreciate it. I'm not going to take the full hour, so get excited about that. We will have time for questions, but yeah, so people can head out early if you want to.
That's my gift to you on the first day. All right, so we're going to talk about how to make your website not ugly. And I always like to point out at the beginning, it's not how to make it beautiful. It's more than we can cover in the time we have.
But you can make it not ugly, right? We're aiming for mediocrity here. So first, a little bit about me. I'm Hilary Sos-Crazzi.
I'm based in the States, and I work at Red Canary, which is a cybersecurity company. Did anyone here develop a pandemic hobby? A couple people? Yeah? Mine was plants.
So I have 62 plants in my apartment. I'm not allowed to buy anymore. That's what my partner says. All right, so this is a real website from 1996. It's pretty snazzy, right?
This was a congressional website. This was a US congressperson's website in 1996. So who here would call this a well-designed website? No hands, great. This came back for a hot minute as an aesthetic, and so I gave this talk once, and everyone was like, oh, that looks really cool. No, no.
That's wrong. It doesn't. So the point of this, the reason I bring this up at the beginning is to show that maybe you can't articulate what you don't like about it or what you would change, but you can recognize that we can do better than this, right? So why do we care about this at all?
Why are we talking about UI UX design in the first place? A couple of main reasons. Usability. is a big one, right? Design informs the functionality.
How does it work? How do I engage with this platform? Credibility.
There's a study from Stanford University. It said that they gave people a bunch of categories and they said, which one of these categories most impacts a website's credibility for you? 46% of people said visual design. So almost half.
The number of people who said that the functionality made that give them the most credibility was only 8%. So especially at the beginning, we care a lot about how something looks, more than how it works. And the last one is interest, right? If we build something, we want people to engage with it. Studies range all over on this, but anywhere from 10 seconds to 50 milliseconds to capture someone's interest when they first visit our application or our website.
It's not a lot of time, so we have to make the most of it. Quick disclaimer. There's always exceptions, right? So we're going to be going over really high-level best practices, but depending on, you know, your target demographics, the purpose of what you're building, right, these are general rules.
They're not going to work in every single scenario in the same way. One thing to keep in mind, though, is that while some of the, you know, studies that I use as resources for this presentation might feel kind of old or dated, It turns out that the way we engage with the internet really doesn't change. Designs change, but human behavior, it takes a lot to change that.
And so the good news is that when you learn some of this stuff, it really does persist for a long time. So it's not like every single year you have to learn all of these new things because we really aren't changing that drastically how we interact with websites. So what are we going to look at today?
First, we're going to talk about words. How do we make... Are text content visible?
Think of it as a visual element. Images. When do we use images and icons appropriately?
And then design from a larger perspective. So thinking about design logically, the same way we would when we're writing our code. So first, words.
There is an eye-tracking study, and it found that visitors only read 20% of text content. That is not a lot. So how can we make that better?
Let your text breathe. This is probably my biggest issue that I see with a lot of sites, is trying to cram too much text into too small of a place. So what are some of the characteristics that go along with that?
Line length. So we read fastest at about 100 characters. We prefer 50 to 60. So really anywhere in between 50 to 100, we're probably fine.
One of the websites that I use a lot as an example is the New York Times, because their website... is literally meant for you to consume large chunks of content, right? That's how they make money.
Their line length, for example, doesn't go above 74 characters. How do we do this? So who here is familiar with the CH unit of measurement in CSS? Just a couple people. Yeah, I didn't know about this either until fairly recently.
It's now supported by all major browsers and multiple versions of those browsers. And it's basically a way to say, okay, instead of this many pixels wide or this percentage wide, I literally want it to be this many. characters wide.
So you can do width 76ch. If you're using a typeface that doesn't have every single letter the same width, it defaults to the width of whatever the zero glyph is in that typeface. So you might end up with 76 characters or 72, but it aims to get around 74. Having line links that fit into this dimension also really helps with reading comprehension. So there's a lot of studies about how the shorter sentences are, the less that we're trying to process all at once and keeping our short-term memory, the more that we understand. So there's multiple benefits to doing this.
Line height. So I usually go for 1.4. Browser default, again, is 1.2. I think that's still a little squished. Again, depends on your typeface.
New York Times, again, to bring them up, their line height evaluates to about 1.5. So. Key thing, don't go under the browser default for really any of these.
Those defaults were picked for a reason, and they should be kind of the baseline that we're looking for. Line height is another one that can also help with reading comprehension, not just for the general public, but also when we're thinking about people who have dyslexia or low vision. Having more of that separation between lines makes a big difference.
And then padding. right? So keeping space around, this is especially true if we're talking about columns. If your columns are too close together, we literally read across, well, let's see, from your perspective, read across them, right? And if we have them too far apart, we get to the bottom and we just keep going down.
We don't know to come back up to the top and read the rest. So this is especially true when we're thinking about a column layout. And one thing I want to point out before I move on, actually, is so I mentioned, you know, this can help with reading comprehension or dyslexia or low While this talk doesn't directly address accessibility, a lot of these best practices have accessible considerations.
If we make it look better, typically it's also easier for people with accessibility concerns to consume that content as well. So, it's a win-win. Here's an example of what we don't want to do. Right? I think this one's pretty obvious.
It's really squished together. So the bottom, like the... the characters that are dipping down, your Gs, your Ys are touching your T's and your I's from the next line. It's really long.
Like we literally don't even get to the end before our brain is just like I'm done. I'm over it. This is what they actually do. So we can see there's a lot of spacing. They've got margins on the paragraphs.
It's just there it really has like I just think of it as breathing room, right? You see this and it's just like you relax a little bit. Right, we want to make sure that our text is legible. So a lot of this plays into legibility, but specifically I'm talking about our colors, right? Don't put yellow on a white background.
You might think, oh, I don't do that, but you'd be amazed how many times it happens, especially when people have like the photograph as like their banner image and then there's text over the top or it's a video and it's changing. I see that all the time and it's just the worst because half the time you can't read it. But this is an easy thing to check.
And again, this plays into accessibility. So this is webaim.org. They have a contrast checker.
Has little sliders so you can see exactly when it passes these standards for what type of element. And you can also get a link directly to that to send to someone that maybe you're having a discussion with about colors, whether it's a designer or a client or your boss. And you can say, look, if we just go a little bit darker or a little bit lighter, then everyone can read it, whether they have low vision, color blindness, et cetera. Another big one is text size. So again, we talked about browser defaults a little bit ago with the line height.
The browser default is 16 for a reason. And again, depending on your typeface, there might be room for adjustment here, right? So when I redid my last company's marketing site, we actually put the default to 18 because it was just a font that was generally smaller than the ones that come with browsers.
So we moved that one up to 18. Typically, I'd say you're safer going bigger than smaller. One thing to think about, too, with this is that in the next 20 years, they've projected that one in five people is going to be 60 years or older. So again... that tends to come with vision issues and we want to think like how can the most people possible engage with our content in the easiest way possible. So let's look at some examples.
So who can read that? A couple people. Yeah, I would love your eyes.
I clearly can't do that. There's not enough contrast here, right? Maybe we can read it, but we kind of have to work at it, and it does not help with scanning, which we're going to get into in a little bit.
Here's another example. We've darkened it a little bit on the second paragraph, right? That's easier to read. Okay.
This is the one that actually passes those color contrast standards. And now kind of seeing them all next to each other, contrasting them. Never thought of that until just now.
I don't know why. But we can see, right, even if you're able to read the top one, the bottom one is so much easier. And that's really what we're trying to do here is just make it easy for everyone. I don't know, was anybody in the talk about the science behind UI that was right before? Okay, so if you weren't there, he talked a lot about cognitive load.
And that's something we focus here too, is how do we lessen cognitive load? Like when you're going somewhere, especially if you have a specific task you're trying to accomplish, you don't want to think about it. And so how do we make people not have to think about it?
Making our text scannable. So I brought this up a little bit ago. There's so many studies that show people only read 20% of content or 25% of content.
It's not that much. So how do we kind of give people what they want? We can highlight our key content. We do that in a number of ways. Subheads is a big one.
And this I thought was really interesting researching this talk. We read faster when there's a mix of uppercase and lowercase letters. So sometimes there's a, you know, like design pattern that all your headers are uppercase. Well, it's probably fine because it's larger text.
But we actually... comprehend it more quickly when we have that mix of lowercase and uppercase. Bulleted lists are great.
They really are. I feel like we don't use some of these core HTML elements enough. And they really do help with comprehension and helping us to be able to skim through the content to find exactly what we're looking for. And then who's heard of the first two words rule?
Cool. Nobody. Okay.
So... This is referring to the idea that we reliably only read the first 11 characters of an element, which comes to about two words. So that's true for links, that's true for headers, that's true for list items, right?
We're not just scanning vertically, we're also scanning horizontally and seeing, like, is this something that I'm interested in? Does this meet my need? Is this going to get me where I want to go? And so when, you know, this sphere is a little bit more into, like... Writing the content than just displaying the content.
We don't always have control over that but something to keep in mind Is that those first two words? Have an outsized impact Than the rest of the sentence or the phrase on whether or not we are going to stick with it This is a blog about UX And I stripped out all of their formatting so it's kind of just a big chunk of text, right? It's we're not even entirely sure what it's about You have to read every single piece to figure out what's going on.
There's really no ability to scan on this. This is what it actually looked like on their website. And so we have the bolded headline. It's right there. It's very prominent.
We see the keywords that also give us an indicator. Okay, is this a topic that I'm actually interested in? Are they covering it from an angle that I'm interested in?
We have sort of like a mission or a... like a summary statement at the very top that again is pulled out and bigger, it's visually distinguishable, and we have subheads. And so maybe I come to this and I'm like, okay, yeah, I know a lot about scanning.
I just want to see if they have anything new that I haven't heard before. And so I'm going to go through those subheads and look for one that catches my eye that maybe brings up a topic or a concept that I'm not familiar with. Adding this formatting, and none of this is fancy, right? This is all pretty straightforward. It's using those HTML elements, but it makes such a big difference in how we're able to engage with the content.
Last part about thinking of speech as a visual construct is kind of thinking about how are we decorating it. We just talked about that one. We're really not doing anything fancy. We're not bringing in a bunch of colors, and that's a good thing. We want to limit our number of typefaces.
Two or three usually is all you want. One for main body text, usually a serif, because... It's easier for you to read serifs at small font sizes, and then maybe a sans-serif or something distinguishable for your headers and subheaders. Limit your colors. And again, this is where we can sometimes run into conflict with designers or product people or marketers who are like, oh, but our logo has five colors.
We need to use all five colors. We really don't. We really don't, though. And the reason why is because we are trained to recognize a large number of typefaces and a large number of colors as indicating ads. And so we just don't look there.
Right. We're very good at filtering out things we don't want, arguably too good, as we learned in that talk before. And so we want to make sure that people aren't inadvertently filtering out content that is relevant for them. So we'll take an example of someone who doesn't do this very well. I smudged out their name because I'm not trying to shame anybody here.
And honestly, their website is much better now. They've done a good job. But this is what it looked like for a while. And when I first went to this page, I assumed all of those boxes on the bottom that are the same size, all of different colors, different images, different typefaces, different colors for the typefaces, I thought those were all ads for something. I was like, oh, it's kind of weird a church has ads, but I don't know, I got to make money somehow.
But no, those are like programs for the church. But your brain just instinctively starts to move past it because we associate that pattern with advertising and we associate advertising with something that's useless, that we don't care about. And you can see the contrast here with this one. It's very simple.
It's very consistent. There's clear patterns, right? The headers are blue. Subheaders are this like amber-orange color.
They have the serif for their body text. They have sans serif for their headers. Everything just follows this same pattern, and it's a simple pattern.
So we don't have to work to navigate this page the way that we do with the other one. And that's really the key thing that we're looking for here. If the choice is between being innovative or being predictable, 99% of the time, we just want to be predictable, right?
So let's recap quick the first part of what we've talked about. We want to think about our speech, our text content as being this visual element, right? Not just a written element. And we do that by making sure there's plenty of breathing room around it so people are following the flow of the text the way we intend, and they're able to comprehend it all, make sure that it's legible, so it's...
Large enough font size and also our color contrast passes those standards so that everyone can read it. Make sure that we can scan through the content, not just treating it as one single item, but instead a piece that has multiple items within it. And then also keeping it simple. Not too many colors and not too many typefaces. All right, images.
We want to use our images appropriately. So how do we do that? Icons are the bane of my existence.
We're going to talk about why. Icons should always have a label. This is a rule, not the exception. And I feel like a lot of times we treat this more as an exception. There are very few universal icons.
There just aren't that many. And they change over time. And they're culture specific. And they're context specific, which means that they're just kind of a bad time if there's not a label. This company tested 190 different icons with people and asked them, okay, when you see this icon and you click it, what is going to happen?
Open-ended question. Asked them what they would do. Unique icons that didn't have a label. Only 34% of people accurately predicted what would happen if they clicked it. More generic icons without a label.
So it includes things like your mailbox icon or your hamburger menu or your save icon, you know, these ones that we consider more universal. 60% of people accurately guessed. So almost half still got it wrong. When they added a label, 88%, which means 1 in 10 still guessed wrong, even with a label. It's just not good.
They're just not predictable. The best places you can use icons are accompanying other elements, right? So navigation, having icons, or your list, or indicating some kind of, you know, trying to convey additional information that's not necessarily necessary, or information that you can find another way as well. But when there's just an icon and we're expecting people to inherently know what's going to happen, most of the times they're going to get it wrong. And that's really frustrating for people.
Right? Like if we can't find something or if we think we, you know, if you're looking around at a website you've never been to before and it's kind of confusing, it's a little chaotic, and you're like, I just want to see what's on my cart. And you see a cart icon and you're like, oh, thank God. And you click the cart icon. And instead it takes you to like a list of shopping carts you could buy?
That'd be very frustrating. Why would you do that? Everyone knows that the cart icon is supposed to go to your cart. But what if it doesn't? Or what if in a different place it doesn't?
You know, it's just... There really aren't that many universal icons, I think is the key here. And somebody, you know, in this talk, the other you mentioned, we have the camera icon with like a lens that we use for camera, but most people use their phones. Like in 20 years, how many people are going to use cameras with lenses? Or the floppy disk is still used for save?
That's not a thing anymore, you know? And so then are we going to get a new save icon? Are we going to switch something else? It just, there's too much room for error.
And then we want to avoid icons that have conflicting meanings. So we've talked about, okay, what if people just aren't sure what the meaning is at all? But what if there are icons that are going to have multiple different meanings or multiple icons that have the same meaning?
We're going to look at an example of that. So think fast. What icon would you pick if you wanted to indicate clicking it would share your page? Just think in your head, okay?
These are all icons that have been used in software. to mean share. Some of them are real weird. Some of them I don't understand why they thought that this was a good idea.
But that's part of the problem, right? Is this kind of design element inherently subjective? And I remember someone once said, oh, if I'm using an icon, I go around everyone in my office and I find at least 10 people and I ask them, what does this icon mean? And they have to all get it right. And I'm like, great, but that's your office.
You're still within the culture of your office, you're within the context of your office, that doesn't mean your neighbor down the street or someone in a different country or someone whose language isn't the same as yours is gonna make that same connection. Somebody also said when I've given this talk, they're like, oh, well, what if we put hover text over the icon? We don't have room for a label, but what if you put the label in a hover?
Like, okay, well, you can't hover on mobile, so that's out. And also that's creating extra work for the user. I want to just be able to get where I'm going as quickly as possible with as few errors as possible.
And icons are the opposite of allowing me to do that. Photos and graphics. So a lot of times stakeholders will sometimes say, oh, this page is so boring.
Can we just can we add an image? That's actually making it worse most of the time. There's a couple of exceptions that we'll talk about. But adding images for the sake of images actually decreases the user experience. So how many people have heard of banner blindness?
A couple more people. So this is the concept that in the early days of the internet, all websites had that big ad right at the top, right? The horizontal ad, and it was often like flashing, and there might be sounds, and it was super obnoxious. And after a while, that pattern became ingrained in our behavior, and we just stopped looking there.
We were blind. to that section of the website because experience had taught us that it was useless. It's subconsciously ignoring something that at first glance appears to be an advertisement.
And so now, as we have developed that pattern, advertisers have caught on and they've shifted where they put their ads. How many people are reading an article and then there's just an ad in the middle of the text and it says, like, scroll to keep reading? Do you look at that ad or do you just know the appropriate amount to scroll quickly to get back to the text?
Yeah, I see some people laughing because we do. Right? We figured out that one and now we're like, okay, this isn't worth my time.
The issue with this is that people will sometimes put actual valuable content in those same places and we don't even see it because we have been trained to ignore it. So we want to make sure that we aren't putting our photos and graphics in places where they're likely to be ignored or to increase this idea of any graphic is useless. So how do we do that?
Integrate it with our content. This can be anything from, instead of having like text block, image, text block, we could have, you know, like New York Times says again, they'll have like the image takes up the full width of the page and then there's text. Or it cuts out into the text a little bit and then there's the image. So finding ways that we can make it clear this is part of our content instead of next to our content.
Making sure they're informative and relevant. to the content itself. So this goes back to my first point, just adding an image to have an image actually detracts from the overall design and the way that we perceive that design. Interestingly, We are first drawn to plain text when we're looking at a page and then to faces. And so if you have, you know, a event page about, you know, some national holiday and you just throw a picture of the flag on there, like, it's not necessarily adding a whole lot to that.
And then it just, it creates a distraction from the actual content, which is when, where, what's happening, how do I register? So images are best used sparingly. Let's see what happens if you follow none of these rules.
So I have to say, quick caveat, she's actually done super well for herself with this website. That is in spite of it, right? This is the exception that proves the rule.
But it took me forever to figure out what she was even offering. Like what was even the service being something with cars. What was even the service being provided here?
It's a lot. There's a lot going on. And especially if you're talking about somebody who has attention issues or ADHD or focus issues. Again, colorblind.
Like this is very hard content to consume. This, on the other hand, we see that idea of integration with the content. So the image is clearly relevant to the topic. It's about bottles on the beach. And it's a picture of a bottle.
on the beach. The title is overlaying the image. So, again, it gives us a sense that they are together. We inherently have to look at the image to read the full title.
And it's simple. So, it's not triggering that thought that it's an ad. Right? There's no text, you know, it's just, this is kind of, if we're going to do it, one of the ways that we want to do it. Integrate with the content.
Keep it simple. You might think this is a little boring. Break-lay I think it's a little boring. It's like, okay, again, it's a story about bottles on the beach.
Do we need a picture of a bottle on the beach? Like, we know what a bottle on the beach looks like. But it's better to underwhelm somebody than to overwhelm them.
So again, quick recap. We want to think about our speech as a visual element on our page, and actually as a series of visual elements instead of sort of one big block of text. We want to use our images appropriately.
Do we use icons without a label? No! Yes! You take nothing else away from this talk.
That's the one. And if we're going to use photos or graphics, we want to make sure that they're relevant to the content, they're integrated with the content, and they're not in those traditional places that we expect to find advertisements. Last section, looking at design from a larger perspective, how do we approach it logically?
Patterns are your best friend. So this talk arose because I was working at a consulting company and a lot of times we had clients who couldn't afford or didn't want to pay for full-scale design. So that meant they were like, okay, here are my branding colors, here's my logo, you know, here are a couple of adjectives, go. And I had some colleagues who just made these atrocious pages and I would tell them that but I couldn't explain.
why. I just said, I know it's bad. I know that your text should be narrower, but I didn't have the data to back it up. And so a lot of this came out of me finding the data and being like, look, I was right because we read fast.
It's 74 characters, you know. But when you have that, then you're able to make improvements to fix and improve your product. And most importantly to me as an Aries who's an identical twin, win arguments.
So patterns. Patterns are your best friend. Again, we've talked about, right, we don't need to be innovative, we need to be predictable. And patterns are nothing if not predictable when done well.
Alternate between small, medium, and wide. That can be true for columns, that can be true for rows, that can be true for, you know, squares that we have in a grid. Just find that alter reading and stick it with it. Consistency is more important than originality.
There's I don't know how many billions of websites out there, right? Just pick one that you like. Use it as an inspiration. We don't have to reinvent the wheel here.
So here's an example of someone who did not use any patterns and did not approach the website very logically. It's actually one of my favorite bars in Madison where I live. It's not great. It's not great. They have some text underlined.
They have some text in green. They have some text that's green and underlined. I don't know what here is a link.
There's also stuff that's blue. and there's stuff that's black. Some of it's bolded, some of it's not.
Can I click those pictures? Turns out I can. How would I know that? It's just it just it just hurts it hurts They again have also improved this since then and they keep a link to their old one just for fun So we're making progress right as a as a industry.
We're making progress. It's all great Here's an example of a very pattern dependent Website very few colors right it's mostly just so shades of blue You can tell, like, after taking just a second or two to look at this image, you can immediately discern what's going on. So you can see, okay, there's the name of the typeface, and then I see an example.
Name of the typeface, see an example. Name of the typeface, see an example. The filter is on the side, right?
We have the same size header. We do have those icons, but they're mostly decorative. They're not really telling us much because they have a label.
They mostly, I think, serve to differentiate visually between the labels, but they're not actually giving us necessary information. You can come here having never used Google Fonts and pretty quickly figure out what's going on, how to use it, and find what you're looking for. And that's kind of the goal that generally we're always looking for.
It's clear, it's predictable. It's really not meant to be eye-catching, right? That's not something that people are like, oh, well, yeah, but if I make it really usable, it's kind of boring. Boring's great, right? Most of the time, we really don't need, with exceptions, We really don't need to be doing something that's like breaking the boundaries of web design, right?
We just need something people can use and not hate. We need something that's not ugly. Who here has heard of progressive disclosure? A couple people?
Okay. So progressive disclosure is essentially the idea that we don't shove all the information in front of somebody at the same time. We instead make it easy for them to find what they're looking for. So we disclose the information progressively. F-shaped reading pattern.
How many people have heard of this one? A couple more. There are multiple ways of consuming content online now.
This was kind of the first one that they identified, but it's still the dominant one and it's the default one. So we're going to talk about it. So here's what this looks like.
The red is where I spend the most time. Yellow is less time. Blue is even less time. And then the gray is where we're not looking at all. So you can see in these examples, there's literally an F shape to how we consume content.
Some of these, it's a little bit more like an E, or like this one on the... Let's see, what side is that? Right side?
The one on the right side looks almost like layers. And so this is what we now call like a birthday cake pattern of scanning. But they all kind of start in that general same place, right? Right at the top. And interestingly, for languages that you consume the opposite direction, so left, right, right to left, it's that same pattern.
It's just flipped. And so again, we've talked about some things are very cultural dependent, like icons, colors can be very culturally dependent. This sort of core human behavior of how we consume content on the web is pretty universal. Like I said, more recent research has shown that this is not the only pattern that we're using to consume content.
So I mentioned the birthday cake. There's the E where we kind of read, jump down, read, jump down, read. But the F shape is the default. So if you don't use some of the practices that we've been talking about today to kind of guide your user through the content the way that you intend, this is what they're going to default to. And it's one of those chicken and the egg, right?
Because knowing that this is a pattern, we kind of build to that pattern. So that reinforces the pattern. And so it just kind of continues on.
Top to bottom, important to less important, right? This is why our H1s go down to our H6. We expect that the most important content in terms of relevancy, in terms of telling us if this is something we care about or not, we expect that to be at the top. There was a study that found that 156% more people saw the top of the fold, if you will, like before the scroll, than saw post the scroll.
And again, all of this kind of plays into itself, right? We talked about how we have to build credibility. We talked about how interest is like 10 seconds to 50 milliseconds.
Scrolling is effort, right? We are lazy people when we are online. Scrolling is effort.
We don't want to put effort in. If we're not drawn in at the top part, we're not going to take the effort to find our mouse or our trackpad and scroll. We're just not going to. And so that, again, plays into this F shape, right?
Where that top piece there is where we spend the most time, and it's typically where we go first. Towards the top so keeping that in mind when we're arranging elements on our pages And then avoid putting content in those strictional ad areas, right? So like I talked about.
There's sometimes... I have encountered this perception that white space is bad or white space is wasted. Well, if we need everything important to be up at the top, then should we put everything up at the top and just fill the entire screen? No.
Because we're not going to look there, right? As we saw. So, again, New York Times, meant to be read, often very content heavy, which tends to trim people off.
So, how are they working to ensure that people stick around and read the whole thing? Well, one of the ways they do that is embracing white space. There's a lot of white space here.
It ensures that your eyes first go to that bold head at the top, because there's kind of nothing else to look at. And so this isn't following the F shape. They used to follow the F shape very, very deliberately. They've kind of moved to more of this middle.
one, but that's because they're guiding you. And so those patterns that we talked about come a lot less into play when someone has a clear path to navigate the content. So we go to the top, we scroll through, there's nothing to distract us, there's nothing here that remotely looks like an advertisement. So the places that we're traditionally not looking anyway, up at that top where the banner is, and then kind of off to the side if we're looking at that F-shaped pattern, that's fine.
Because there's nothing there anyway. You know exactly how they want you to navigate this page, and that makes it a lot easier for you to do so. You're not making decisions, you're just kind of following a path that they've set out.
Consistency. This is a huge one. Links and buttons, right?
If your button always has a border, it should always have a border. If your links are always, you know, purple, they should always be purple. If your forms always have placeholder text or always have labels, you should always have labels and always have placeholder text. And actually, your forms should always have labels because that's also an accessibility thing, but it's a whole other talk. Alert messages, right?
If it's a good alert message, it should always look the same. If it's a bad alert message, that should be a different pattern. We want to be consistent with all of these things because, again, Having to think about what something means or what it might do detracts from the experience. Guessing wrong, right?
If your success message on the page is read for some reason, I'm probably not going to read it. I'm going to assume that I did something bad or my thing didn't save and I want to try to do it again. And then I end up with like, you know, 15 plushies instead of one because I thought that it didn't go through. It's not a true story, but that would be really, really sad if that happened.
It's been a long day, y'all. Just really being consistent, right? Teach people one pattern and stick to it. And so then they're not constantly having to reorient themselves as they go through different sections of your website. Or maybe, you know, like Jill's page is all like this way and Jane's page is all like this way.
And so if you're on Jill's page, you're like, oh, I see what's going on. And then you go to Jane's and you're like, wait, what is going on? Or vice versa, right? So having consistent patterns, making sure everyone that's working on the project knows what those patterns are and can follow them using those design libraries, it makes everything better, honestly, for everybody. So pop quiz, which of the elements here can you click on?
Yeah, a lot of shrugging because we don't know, right? It could be the green, it could be the underline. It could be both.
Maybe the underline is a link that takes you away and the green is like a popover. But you don't know until you try to click it. And that ambiguity, that uncertainty, that unpredictability drives us nuts.
Makes for a very frustrating experience. And oftentimes we won't do anything because we don't want to do the wrong thing. And lastly, talking about functionality.
So... When we think about design, I think there's this tendency to think, oh, it's all visual, it's all the front end, it's all just making it pretty. But design and functionality really go hand in hand. Bugs matter as much as beauty, right? You could have a website that follows all of these rules and guidelines, it's easy to use, it's very well maintained, you know, it's pretty, it has nice colors, everything's very consistent, and then you try to take an action and you get an error page, right?
You need both. It's not just one or the other. The back end can impact the front end.
So I work as a full stack developer. When I'm thinking, you know, if I have a new table that I'm building, one of the things I'm thinking about is, okay, how are we probably displaying this to the user? What is some data we might need to collect?
What are some columns we might want to cache they'll need? You know, how do we want to, do we want to store the data? Is it date time? Do we want to store it? Like, how are we going to use this?
And that's going to impact how I set up the architecture to a certain extent, and also how I set up, I'm a Rubyist, so how I set up, like, my model in my class. with the methods that we might need to then pull into the front end. So I really like this quote, design is where science and art break even. I think there's this tendency to think of design, like web design as being a very creative field, and it is, but so is backend programming.
There's a lot of creativity to that as well. And just like with backend, we think a lot about logic, design and the front end also has a lot of logic that plays into how we set it up and the decisions that we make. So a quick final recap. We talked about how do we think about words, about our text content, not as just being language, but as being this element that we can control on the page and make decisions about. We do that by making sure that there's lots of room around it so that we can actually read the content and engage with it, make sure that it's legible so that our color contrast is high enough, our typeface is large enough, make sure we can scan through the content instead of treating it as one monolithic block.
And then keeping it simple. So not too many colors, not too many decorations. Our images. Do we use icons without a label?
Oh, a little more enthusiasm, please. Do we use icons without a label? Hey!
And then we want to use our photos and graphics in a way that's integrated with the content, not in those traditional ad areas, and that actually adds something to the content instead of just being an image for the sake of being an image. And when we think about our design, we want to do it in a logical manner. So knowing that those patterns exist, and how can we either use that to our advantage or kind of reshape the user's experience so that they're following the pattern we want them to use.
Progressive disclosure. We're not dumping all of the options, all of the information in front of them at once. Instead, we're doing it in a logical way that they can progress through the workflows that they're interested in without getting overwhelmed or missing important steps.
Being consistent. Buttons all look the same. Alerts all look the same.
Tables all look the same. Because then we're engaging with the content that's in those tables or those forms instead of the design of the form or the table. And then making sure that it all works, right?
That there aren't bugs, that people can successfully submit the form so that the actions they want to take, they're able to take. Not only they're able to find them, but they're able to execute them successfully. And then I have some citations.
And that's it. Thanks for coming. We have time. Like I said, I promised I would end early.
So if anyone has some questions, I'm happy to answer them. Otherwise, if y'all are like conference out for the day and just want to jet, that's great too. So does anyone have any questions? And I will wait. I'm not, I'm very cool with awkward silence.
Okay, cool. Thanks for coming. Oh, we have one.
Sorry, hold off. We have one. Okay, so is there an obvious or guideline for doing layouts?
Honestly, the biggest thing is keeping it simple. And I think a lot about thinking about it as a grid of either thirds or quarters, right? Or halves. So really like, okay, maybe this section here, we have three columns, and then the section below, we have two, the one below is one wide one that goes all the way across, and you can just kind of repeat that. Because the thing is, again, most of the time, users are interested in the content, not, they are directly, consciously, they're consciously interested in the content, not the layout.
So I'm pretty unlikely to notice if like... oh, they're following a 3-2-1 pattern with their columns on this page. That's probably not even something I'm going to be aware of because that's not really what I'm interested in.
I'm interested in the content. And so I think just really being simple, following similar patterns, alternating again between that small, medium, and wide, and really you could just find another website that does something very similar and kind of copy it, honestly. Because you're going to have your own content, you're going to have your own audience.
But if you're like, oh, I really like how they set this up, just do the same thing, right? I mean... Half the websites are build-up templates anyway, so just kind of make your own.
Yeah. Yeah. Yeah. Yeah.
Yeah, so the question is what about pages that have interactivity on them? And so there's a couple ways to do this. The specific question was about tables, and I will get to that.
But I want to real quick use this time, because I've got a mic, to vent about carousels. Which are super unusable. And no one clicks through them. Very rarely.
There are certain times where they work. So, for example, like a streaming service on a mobile app. You will actually go through and look for it.
But that's like the one exception. So, generally, I would say interactivity is kind of a use it if you really need to, but otherwise, you know, kind of avoid it. For tables where there's a lot of columns, I think there are multiple ways to do this.
Honestly, I think the biggest thing... is telling someone how to interact with it if it's not intuitive. Even if it is intuitive, right? Because it might be intuitive to you, but it's not to the user.
And so, we had a table, for example, I think this is a pretty common practice where on smaller screens, you could scroll through to see the rest of the columns. And I think that's a fine pattern as long as you tell the person. So, like, what we did was as soon as that scrolling function turned on, there was a little info box that said, hey, there are, you know, 20 columns on this table to see the rest.
Scroll to the right. Just to make it so that no one is confused about how they interact with it. And I think with filtering, I think there's a lot of ways to do it. I think typically we put filters above a table or to the...
Let's see, to the left? Is that your left? That's your left.
You could put them to the right, but we kind of want to follow those existing patterns that other sites are using. Like we would never put our filters under the table. Because no one's gonna think to look for it there. So a lot of it is general placement as much as it is like the specificities of the individual element.
So if that helps. Anyone else? Yeah. I mean, the name of the rule is technically, yeah, how many characters is it?
One, two, three, five, eight. Oh, it's a little bit, it's like 12. That would be cool though, wouldn't it? I guess if you did two-word rule, eight, oh, that's 11, right?
Did I do math right on that? I think I did. I'm not sure.
Anyway. Yeah. That is a bummer.
Yeah. Okay. Cool.
Thanks for coming.