Latest / ThinkInsideTheSquare / [105] Good Design Advice That Makes Bad Websites

Transcript

[105] Good Design Advice That Makes Bad Websites · ThinkInsideTheSquare

• 0:00
  SPEAKER_00: I have heard some terrible website design advice over the years.
• 0:05
  SPEAKER_00: I've also heard some pretty good advice, too, for general design, but doesn't translate to a website.
• 0:11
  SPEAKER_00: And that's what I want to talk about in this episode.
• 0:13
  SPEAKER_00: Just because there's some great advice out there when it comes to design that you'll hear from clients, from well-respected designers, from other sources of information that you truly trust, not every piece of design advice can translate to a solid rule that should be followed for your website.
• 0:30
  SPEAKER_00: Honestly, breaking some of these rules is how we create some of the best content out there on the internet.
• 0:35
  SPEAKER_00: So that's what I'm covering in this episode today.
• 0:37
  SPEAKER_00: I'm Becca from Inside the Square.
• 0:39
  SPEAKER_00: This is Think Inside the Square episode 105, where I'm talking about good design advice that makes for a terrible website.
• 0:47
  SPEAKER_00: For a transcript of this episode, along with the links to any resources that I'll mention, visit inside the square.co forward slash podcast.
• 0:54
  SPEAKER_00: I also want to mention the term Squarespace is a trademark of Squarespace Incorporated.
• 0:59
  SPEAKER_00: This content, it's not affiliated with Squarespace Incorporated.
• 1:02
  SPEAKER_00: This is just my opinion, Becca from Inside the Square as a Squarespace designer, and what I wanted to share with you.
• 1:08
  SPEAKER_00: All right, so let's get into it.
• 1:10
  SPEAKER_00: Good design advice that turns into terrible website design advice.
• 1:15
  SPEAKER_00: Let's start with one of the classics.
• 1:17
  SPEAKER_00: Everything important needs to be above the fold.
• 1:20
  SPEAKER_00: Now, if you're unfamiliar with that phrase, the fold is the bottom of your screen before someone starts to scroll through the content of your website.
• 1:27
  SPEAKER_00: And I understand where that advice is coming from.
• 1:30
  SPEAKER_00: You want people to know immediately where they are, what this website is about, what you should do next.
• 1:35
  SPEAKER_00: That is a good goal to have.
• 1:38
  SPEAKER_00: But somewhere along the way, that became fit the entire business into the very first section of the screen.
• 1:44
  SPEAKER_00: So now we'll have a headline and a subheadline and some paragraph text and a button, maybe two buttons, animated graphic, a little badge that says, as seen in all of this, fighting for attention in the first few thousand pixels.
• 1:56
  SPEAKER_00: Then the client says, make the headline bigger.
• 1:59
  SPEAKER_00: Fantastic.
• 2:00
  SPEAKER_00: That's exactly what we want to hear as a designer, right?
• 2:02
  SPEAKER_00: Now here's where that good idea gets lost in the conversation.
• 2:06
  SPEAKER_00: If someone gets all the information they need right there, the very beginning of the page, they're not going to scroll.
• 2:12
  SPEAKER_00: They're not intrigued enough to keep scrolling, to keep discovering, to learn even more, to dig deeper.
• 2:18
  SPEAKER_00: We need to inspire and inform in that very first section, but what we really need to do is pique their interest.
• 2:25
  SPEAKER_00: Scrolling is not a failure of design, it's a normal part of the internet.
• 2:30
  SPEAKER_00: Now that doesn't mean that you should hide the most important information, you know, halfway down a 10,000 pixel homepage, okay?
• 2:38
  SPEAKER_00: It just means the first section of your site has a very specific job.
• 2:43
  SPEAKER_00: Establish relevance, inspire, intrigue, give someone a reason to keep going.
• 2:48
  SPEAKER_00: Sometimes it's just because they want to read what's next.
• 2:51
  SPEAKER_00: So when you're designing a hero section, instead of asking, how much can I fit up here?
• 2:56
  SPEAKER_00: What you should be asking is what will get people inspired to explore more.
• 3:01
  SPEAKER_00: You might find yourself deleting quite a few things, and that's okay, because I think this is a good design rule to break.
• 3:07
  SPEAKER_00: So let's move on to the second design rule that I think is a great rule to break.
• 3:11
  SPEAKER_00: And this is the concept that people don't read anymore.
• 3:14
  SPEAKER_00: We just scan for information.
• 3:16
  SPEAKER_00: This is the design rule that says headlines should be short.
• 3:19
  SPEAKER_00: Everything should have bullet points.
• 3:21
  SPEAKER_00: Paragraphs are a design from 2008.
• 3:25
  SPEAKER_00: That design principle, I don't think it applies to everything.
• 3:28
  SPEAKER_00: But I want to be super clear here.
• 3:30
  SPEAKER_00: I am a self-professed scanner.
• 3:32
  SPEAKER_00: If you send me an email with bullet points, I love it.
• 3:35
  SPEAKER_00: I will rarely read an entire paragraph sitting in my inbox.
• 3:39
  SPEAKER_00: But I definitely will read a paragraph if I'm going to invest a lot of money or time into something.
• 3:45
  SPEAKER_00: So let's think about that.
• 3:46
  SPEAKER_00: If you're building a website for someone who's selling socks, for example, you're not going to need a 20,000-word essay about how awesome these socks are.
• 3:54
  SPEAKER_00: I want a few bullet points to assure me that they're made out of good quality materials, they're made in a way that matches my aligns with my values and my morals, and that they're not going to fall off the second I start walking or wear them inside my boots.
• 4:07
  SPEAKER_00: Okay.
• 4:08
  SPEAKER_00: But if I'm going to be investing in a mastermind or asking you to invest more than$5,000 in a website design, chances are you're going to want to read something.
• 4:18
  SPEAKER_00: Okay.
• 4:19
  SPEAKER_00: You're not going to want bullet points.
• 4:20
  SPEAKER_00: You probably will read a paragraph.
• 4:22
  SPEAKER_00: Shocking, I know.
• 4:24
  SPEAKER_00: So when we design around the assumption that nobody reads, we can end up removing the exact information that someone needs to make a decision.
• 4:32
  SPEAKER_00: So I want you to think about that.
• 4:34
  SPEAKER_00: And I don't think that people don't read, make scannable content should be the goal of any website design.
• 4:41
  SPEAKER_00: You need to apply the context of what that website is there to do.
• 4:45
  SPEAKER_00: Is it there to inspire, to inform, to get someone to make a purchase immediately, or to get someone to consider investing a hefty amount of money or time into something.
• 4:55
  SPEAKER_00: That's going to change the length of the words on the page, the length of the content that you're presenting to someone.
• 5:01
  SPEAKER_00: So that, my friend, is a good design rule that I very commonly break, especially for the bigger clients that I work with.
• 5:08
  SPEAKER_00: Now I do want to be clear here: making content easy to scan is not just making content short.
• 5:15
  SPEAKER_00: Headings are helpful, short paragraphs are helpful, clear labels are helpful, bullet points are helpful, all of those contribute to the overall goal of a website.
• 5:24
  SPEAKER_00: But sometimes the most helpful thing that you can do is give someone a good explanation.
• 5:30
  SPEAKER_00: Now, if I do have a client who gives me a gigantic paragraph of content that we need to put on the website, I'm talking 20 sentences all stuck together.
• 5:38
  SPEAKER_00: I will absolutely use line breaks to separate that.
• 5:41
  SPEAKER_00: I'll use poll quotes to give good attention to certain segments that people might catch while scanning, but I'm still going to put all of that content on the website.
• 5:50
  SPEAKER_00: That's where I take the principal rule of people don't read, we scan, and turn it into something that fits the context and the content that I'm designing around.
• 5:59
  SPEAKER_00: So if you're ever presented with a large amount of content from a client, first things first, make sure that the information is useful.
• 6:06
  SPEAKER_00: And if all of the content they're giving you is deemed useful, then ask if you have organized it well.
• 6:12
  SPEAKER_00: Because sometimes the problem isn't the amount of content, it's the way we designers present it.
• 6:18
  SPEAKER_00: All right, this next design principle that I want to talk about is one that I really struggle to understand as a junior designer.
• 6:25
  SPEAKER_00: And I've only in the last, oh gosh, like 10 years or so, really started to understand what this actually means.
• 6:32
  SPEAKER_00: And the design concept is that everything needs to be consistent.
• 6:36
  SPEAKER_00: But the issue here is I used to think that consistency meant repetition.
• 6:42
  SPEAKER_00: Consistency can still mean variety.
• 6:45
  SPEAKER_00: And here's what I mean.
• 6:46
  SPEAKER_00: I might upset some designers with this hot take here, but stick with me here for just a minute, okay?
• 6:51
  SPEAKER_00: So consistency, it is a good thing, but it can make a website very dull and very boring.
• 6:57
  SPEAKER_00: I used to think that I needed to have two, maybe three layouts for pages on a website, and I would just repeat those over and over again to make a good design.
• 7:05
  SPEAKER_00: That's not the case.
• 7:06
  SPEAKER_00: We need consistency in typography, we need consistency in color scheme, consistency in image style, and consistency in the tone of voice of the content that's there on the website.
• 7:18
  SPEAKER_00: But we don't need to repeat the same layouts over and over.
• 7:21
  SPEAKER_00: I'm talking text left, image right, and then image right, text left.
• 7:26
  SPEAKER_00: Wait, I said the same thing.
• 7:27
  SPEAKER_00: Hang on.
• 7:27
  SPEAKER_00: Text left, image right, then text right, image left, then text left, image right.
• 7:32
  SPEAKER_00: You get what I'm trying to say here, right?
• 7:34
  SPEAKER_00: Then for a wild card, we'll throw in three images with text on top in the middle.
• 7:38
  SPEAKER_00: That is the kind of consistency that we don't need to have on a website because it's going to look so repetitive over time.
• 7:46
  SPEAKER_00: That is some junior designer stuff that I used to create.
• 7:49
  SPEAKER_00: And I think I lost the core or didn't understand the core message here, okay?
• 7:54
  SPEAKER_00: So consistency is about rhythm.
• 7:57
  SPEAKER_00: It's about having sets of things that go together.
• 8:00
  SPEAKER_00: The variety is where the design really matters.
• 8:03
  SPEAKER_00: So again, typography, colors, image style, that's all fantastic.
• 8:07
  SPEAKER_00: But image ratio, mix it up.
• 8:10
  SPEAKER_00: Layout concepts, you can absolutely change those.
• 8:13
  SPEAKER_00: Find consistency in the core cohesive details to bring these creative layouts together.
• 8:19
  SPEAKER_00: But you don't need to make every single page on a website follow the exact same formula.
• 8:24
  SPEAKER_00: That is how you make a website that looks boring and outdate it.
• 8:28
  SPEAKER_00: So I'll say it one more time.
• 8:29
  SPEAKER_00: Consistency is a good thing, but consistency is not repetition.
• 8:33
  SPEAKER_00: And I think keep it consistent is a design principle or a rule that we should absolutely break.
• 8:40
  SPEAKER_00: All right, the next design rule that I want to talk about is make your call to action stand out.
• 8:45
  SPEAKER_00: Okay, yes, it absolutely should.
• 8:47
  SPEAKER_00: I'm completely on board with that, but I think a lot of people kind of take that advice a little too far.
• 8:53
  SPEAKER_00: Someone hears that your button should stand out, so they make every button bright orange, and they decide every section needs a button, and they add one to the navigation, and then a floating button at the bottom of the screen, and then there's a pop-up, and then there's a button inside the pop-up, and now the website is shouting at you from every direction, and you don't know which one of those bright orange buttons to pick next.
• 9:14
  SPEAKER_00: When everything is trying to grab your attention, nothing is.
• 9:18
  SPEAKER_00: That is a visual hierarchy problem, but it's also a strategy problem, because deciding what color a button should be, that's not nearly as important as deciding the main action for someone to take.
• 9:31
  SPEAKER_00: Not every section on a website needs to ask for a commitment, needs to ask someone to take action to get to the next thing.
• 9:38
  SPEAKER_00: Sometimes the text link can be enough if you've really got to have it.
• 9:41
  SPEAKER_00: But here's a little exercise that I like to do.
• 9:43
  SPEAKER_00: Stick with me here.
• 9:44
  SPEAKER_00: Think about a page on your website right now and pretend that you can only have one, one call to action.
• 9:51
  SPEAKER_00: What would it be and where would you put it?
• 9:53
  SPEAKER_00: And what would someone need to know before clicking on it?
• 9:56
  SPEAKER_00: Now, I'm not saying you're only allowed one button per page, but I'm saying that you need to force yourself to choose one main call to action to add that emphasis.
• 10:07
  SPEAKER_00: That is an intentional decision.
• 10:09
  SPEAKER_00: Now, yes, you can have additional content on the page, but you're not adding them just because you read some stat that says increase calls to conversion increases conversions.
• 10:18
  SPEAKER_00: You're adding these additional buttons here, but you're not going to design them to distract from the main call to action of the page.
• 10:25
  SPEAKER_00: So next time you design something, or think of something you've just designed, relate it to the main call to action, the main purpose of that page, and make sure that that part is what stands out.
• 10:36
  SPEAKER_00: And there are 20 competing things on this site distracting anyone from taking that individual action.
• 10:42
  SPEAKER_00: Now, this next design principle, it's a personal pet peeve of mine.
• 10:46
  SPEAKER_00: So I apologize if this accidentally turns into a mini rant.
• 10:49
  SPEAKER_00: I'll try to make sure that it doesn't.
• 10:51
  SPEAKER_00: But the guiding design principle that we have heard from a lot of different people in the web design community and design in general is that a website should be interactive.
• 11:00
  SPEAKER_00: There needs to be some kind of movement.
• 11:03
  SPEAKER_00: Animations, unexpected details, little things that'll make a website feel different and feel more welcoming and interactive to the person.
• 11:12
  SPEAKER_00: I'm sure we have all visited a website where we start to scroll, and as we scroll down the page, headlines show up, and then a paragraph comes in, and then a button will fly in from the left, and an image will fade up and rotate, and all of these things start to happen so that by the time you reach the bottom of the page, you feel like you've caught 80,000 different objects.
• 11:29
  SPEAKER_00: I cannot stand those kind of websites because you know what I'm doing?
• 11:34
  SPEAKER_00: I'm focusing on what elements happening next, how the screen is moving, and I'm barely reading the content.
• 11:41
  SPEAKER_00: I'm not understanding what I need to do next.
• 11:43
  SPEAKER_00: Rather than focus on what the call to action should be or where I should be taking my adventure here, I'm just focused on everything that's happening on the screen.
• 11:52
  SPEAKER_00: It's practically like watching a movie unfold as you scroll, rather than understanding what the content is.
• 11:59
  SPEAKER_00: I think that there are way too many animations and unexpected details that distract from the content on the site.
• 12:06
  SPEAKER_00: And as a designer, I generally advise my clients away from those.
• 12:10
  SPEAKER_00: Loading animations are fun.
• 12:12
  SPEAKER_00: Having little buttons that wiggle on a hover, who doesn't love a good hover effect?
• 12:16
  SPEAKER_00: But if I'm looking at a website that has 500 different things animating and moving, trying to get me to figure out what to click on, it stresses me out so much.
• 12:26
  SPEAKER_00: Do you remember the busy world of Richard Scary?
• 12:29
  SPEAKER_00: Now, if that's trademarked, which it probably is, please be aware, not associated or affiliated with the publisher, the author, any of that fun stuff.
• 12:36
  SPEAKER_00: But I'm talking about that little intro where you go to busy town and there's stuff happening all the time.
• 12:41
  SPEAKER_00: Those kind of websites, I rarely will actually convert on those websites, even if they're offering like the coolest course I could find or the best ever jacket for living up here in the Pacific Northwest where I live.
• 12:54
  SPEAKER_00: If I need a new winter jacket, I am absolutely not going to stay on a website that has 15 moving things before I've even clicked into something to see if the jacket is waterproof.
• 13:04
  SPEAKER_00: Okay, that was a little bit of a tangent, and I apologize.
• 13:07
  SPEAKER_00: But the truth is, I do think these interactions belong on a website.
• 13:11
  SPEAKER_00: I do think that subtle animations can be an excellent addition.
• 13:15
  SPEAKER_00: One of the designers that I work closely with is working on a blooming Lotus Lottie file in the background of a website, which is a fantastic evolution for the brand that they're working on.
• 13:25
  SPEAKER_00: But that is not an animation that's going to distract me from the call to action on the site.
• 13:30
  SPEAKER_00: It's not going to stop me from reading the content.
• 13:32
  SPEAKER_00: It's not that I have to wait for all this information to reveal as I'm scrolling down the page.
• 13:37
  SPEAKER_00: That is a high-quality interaction.
• 13:40
  SPEAKER_00: Not everything needs to move, not everything needs an animation.
• 13:44
  SPEAKER_00: These unexpected details don't have to add motion to a site.
• 13:48
  SPEAKER_00: Those can end up distracting people.
• 13:49
  SPEAKER_00: And I want to make sure that people who visit the websites I design, they're not distracted.
• 13:54
  SPEAKER_00: They're inspired to take the action that my client wants them to take.
• 13:58
  SPEAKER_00: All of these design rules that I used to follow as a junior designer, those rules can be broken and they can be broken in a way that still makes a website really unique and really useful to the client who hired me to create it.
• 14:12
  SPEAKER_00: So no more memorizing rules.
• 14:13
  SPEAKER_00: Let's forget about that.
• 14:15
  SPEAKER_00: We're going to focus on making better decisions.
• 14:18
  SPEAKER_00: I also want to think about the core principle behind these rules because I don't want us to completely dismiss the advice we've been given from people who've been designing a lot longer than we have.
• 14:28
  SPEAKER_00: Okay?
• 14:29
  SPEAKER_00: A lot of these golden rules of design are founded around the main principle that we can still follow to this day.
• 14:35
  SPEAKER_00: Our goal as website designers is to create something out there on the internet that inspires, that informs, and that is unique to our clients.
• 14:44
  SPEAKER_00: That's the whole goal here of everything I do inside the square.
• 14:47
  SPEAKER_00: Help you make a website that's uniquely yours.
• 14:49
  SPEAKER_00: I hope you enjoyed this episode.
• 14:51
  SPEAKER_00: Thanks for hanging out with me this week.
• 14:52
  SPEAKER_00: I'm Becca from Inside the Square.
• 14:54
  SPEAKER_00: This is episode 105, and I've got some exciting things happening here with my own website and my own business, and I'll definitely be sharing them here on next week's episode.
• 15:04
  SPEAKER_00: So please be sure to tune in.
• 15:06
  SPEAKER_00: You can find a transcript at insidesquare.co forward slash podcast.
• 15:10
  SPEAKER_00: And if you could do me a favor, wherever you happen to be listening to this episode, give it a like, give it a comment, share it with your friends.
• 15:16
  SPEAKER_00: I'd love to have your support.
• 15:18
  SPEAKER_00: Thank you so much for tuning in, and most importantly, have fun with your Squarespace website.
• 15:23
  SPEAKER_00: Bye for now.