So I am going to be talking about 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 and other is actually a lot of former dreamless here.

Think.

Okay, Yeah.

I was kind of expecting some noise.

Um, and I had a stint as a print designer.

I've started doing a little bit of Web design me, But my background is primarily as, ah, softer developer, um, 10 forward consulting in medicine.

I also have a talking to somebody.

We have some guidance stickers because were named for the bar in the enterprise.

So if anybody wants the guidance sticker combined me afterwards 10 forward we primarily work with, start up.

So a lot of times, they don't have ah budget for a designer or for us to do any kind of in house design and sew.

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've read the second book of the store.

My archive in one day.

If anybody's a Brandon Sanderson fan.

Yeah, it's, ah, 1088 pages.

I took a day off of work when I got it because I knew I wouldn't be able to put it down.

Right.

So we're gonna get a real website from 1996.

Ray, right.

Pretty attractive.

Uh, 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.

Uh, this is like a congressional website.

So who thinks that this is well designed?

Okay, okay.

I mean, this this look is kind of, like coming back a little bit, God forbid, but, uh, right.

I mean, most of us look at this and we realized, Yeah, this could partly 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 we 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 matter Maur that we're building works well, so usability is a big one.

Um, 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 was a study from Stanford University.

They had 10 different categories, and they ask people to rank the categories by which one they felt gave them the most trusting a website on first visit, 46% of people said the visual design was the most important.

That was the category that had the most votes.

Functionality was only 8%.

So especially when we're first coming to this site.

We don't really care about work, so 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 some of your thinking.

Okay, I'll buy it.

I'm listening.

You have to say this climber.

Of course, there are always exceptions, right?

So everything I'm gonna talk about today are sort of broad guidelines, depending on the cider applications, target demographics, the intended use.

You know, these are not going to necessarily apply, but they've found so news.

The norm group was a tone with you, X.

And they revisited some of their major findings from, like, 10 years ago.

20 years ago to see does is this still truth Uzi 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 gonna speak pretty fast cause I have a lot of things I want to get out and I don't have a ton of time.

Um, but you can pull along, I have my slides up online, and I'll have a link at the bottom.

It'll have it later.

So yeah.

All right.

So first we're gonna look at words and how we think about text as like, a visual element than images.

When do we use them?

what kind of 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 logical perspective?

All right.

First, we want to make speech.

Visual.

So there was a 28 to 2008 eye tracking study, and they found that visitors only read 20% of text contact on content on average.

So how can we improve that?

First, we want to make sure that our text can breathe so length again, depending on what state 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 and 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 the site it is.

But going longer than 100 people start.

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 typefaces, um, is not 1.4 pixels Auriemma's.

It's 1.4 times the font size of the element 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 air too close, people just read straight across.

If they're too far away, people get to the end that 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.

Um, 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 gonna talk about that a little bit later.

But like White Space is your friend, it is not wasted right and then has to be eligible.

So contrast.

Um, there's a great Web site that I always check all of my color combinations on its Web aimed out or did they have a contrast wrecker?

And it checks with the W keg standards, making sure that it's it's complaint with accessible standards.

And this is important because you, because you can read something, doesn't mean that everyone can read it right.

I think about one in 10 people in the U.

S 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 continents to just make sure it's the contrast is good.

Size 16 pixels is the browser de felt 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 typeface.

So we just redesigned.

We're redesigning our site and some of our text.

We actually put the default 20 because it just tends to be a smaller, more condensed typeface.

So who could read this?

Oh, come on, I want your eyesight.

I clearly could not read that and then leave here, right?

And this stew 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 2000 people only read about 20% of text content.

Um, we we lose people very quickly when it's a text of you page and so making sure that they're able to scan through everything will allow us to keep people longer.

And I want to talk about this a little bit later in the presentation.

Some ways to do this highlight key content using subheds.

And this that that was really interesting.

We actually read faster when Tex 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 or all lower case, it actually takes us, you know, split seconds longer, to be able to process that content below this 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.

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 key words at the top, so I could look 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 subhead.

So maybe I see.

Okay, I know a little bit about people standing websites, but maybe there's something new in here that I don't know about.

So I'm gonna skim through the subheds.

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 funds or somebody different typefaces that we can use.

Um, and it's it's easy, especially for, like, clients that we work with me.

Look what we want, like six different typefaces.

No, not gonna do that.

And here's why.

Uh, we usually pick like two or three.

So maybe we have one typeface that's dedicated to our headers and some headers, and one that's for body text colors again.

So 2 to 3.

And the reason for this is because when you have too many typefaces or too many colors are, brain instinctively assumes that it's an ad and we just completely skipped 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 Texas probably bigger and then your simpler ones for the body text, which is probably gonna 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 you still look like.

And when I look at that site, 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 knave isn't kind of an unusual spot.

That's not where I would instinctively go to look for navigation.

I assume that all of those squares at the bottom were ads because all of typefaces, the colors are all different font sizes, all different, and those are actually just like pages on the site.

They're like programs that the church has.

So this is a better example, like every time that I go to this light, it just kind of like this is just nice.

It's very clear the navigation is we're expected to be.

It's clear what Paige I'm on.

I know what pattern I know.

What a glance what pattern this site is using to disseminate information and a big thing that I'm gonna 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.

Recap quick.

So we want to think about speech as a visual element within a website or application.

So give it plenty breathing room.

Make sure it's legible.

Make it scannable so the people can skip around to what they're interested in and keep it simple.

Not too many colors are too many typefaces, all right.

We want to use our images appropriately and really, I don't think there's any situation where this image is not appropriate, but that's another conversation.

So Icon's ah company that's actually called user testing, which is a little too on the nose.

But they studied 190 icons and 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 exit.

You know, icons like that that are unique to a specific application.

If they didn't have a label on Lee, 34% of people knew what it was going to do.