Latest / ThinkInsideTheSquare / 50: An Overview of UX & UI for Squarespace

Transcript

50: An Overview of UX & UI for Squarespace · ThinkInsideTheSquare

• 0:11
  Speaker 1: Understanding the roles of basic user experience and user interface design is really important for anyone creating a Squarespace website.
• 0:19
  Speaker 1: If you consider yourself a designer, a developer or a do-it-yourselfer like me, this episode of Think Inside the Square will help you understand the core principles of both UX and UI design so you can create a Squarespace website that people will love to visit.
• 0:34
  Speaker 1: Welcome to Think Inside the Square, a podcast full of tips and tricks to help you create a website that you're proud of.
• 0:39
  Speaker 1: I'm your host, becca Harpain, squarespace expert and educator and creator of InsideTheSquareco.
• 0:44
  Speaker 1: In this episode, we're going to be talking about UX and UI design, what they are, how they work together and what you, as a Squarespace user, can do to incorporate the principles of both into the amazing website that you create.
• 0:58
  Speaker 1: For a transcript of this episode, along with the links to any resources mentioned, visit InsideTheSquareco.
• 1:04
  Speaker 1: Forward slash podcast.
• 1:05
  Speaker 1: The term Squarespace is a trademark of Squarespace Incorporated.
• 1:08
  Speaker 1: This content is not affiliated with Squarespace Incorporated.
• 1:11
  Speaker 1: I'm going to be using some tech terms in this episode, so I want to start things off by defining them to make sure we're on the same page before we dig into the details.
• 1:20
  Speaker 1: Starting with UX or user experience.
• 1:23
  Speaker 1: Designing a quality user experience means exploring everything from the layout and the navigation to the content and functionality of your website.
• 1:32
  Speaker 1: Good UX design means that your website is easy to use, it's enjoyable and it's intuitive.
• 1:38
  Speaker 1: The user interface, or UI, refers to the visual elements of a website, like the colors and the fonts that you choose.
• 1:45
  Speaker 1: Good UI design means that your website is nice to look at, the content is accessible and the design aligns with your brand identity.
• 1:53
  Speaker 1: Ui is really a subset of UX.
• 1:56
  Speaker 1: It's an important part of the user experience.
• 1:58
  Speaker 1: It's so important that it gets its own acronym.
• 2:01
  Speaker 1: Many large companies out there have hired experts in both of those fields both UX and UI experts to create a cohesive website experience that really aligns with their own brand.
• 2:12
  Speaker 1: But most of the Squarespace-ers that I work with on a daily basis are the do-it-yourselfers like me, so we need to understand the core principles of both UX and UI to create a great website that people love to visit.
• 2:24
  Speaker 1: In this episode, I'm going to be sharing the three core principles that I use when thinking about the UX and UI of every website that I create.
• 2:32
  Speaker 1: Now, if you're more of a visual learner, I've got some resources in the show notes for you at insidethesquareco forward slash podcast, but I'm confident that this audio-only format is going to be totally fine for you.
• 2:43
  Speaker 1: Understanding these core principles of UX and UI and how it relates to your Squarespace design, let's go ahead and dig in, starting with UX, the user experience.
• 2:53
  Speaker 1: The internet is full of opinions and if you Google core principles of UX design or best UX design, you're going to find a lot of articles out there.
• 3:03
  Speaker 1: Plenty of articles have the five most important things, the 12 most important things.
• 3:08
  Speaker 1: I wouldn't be surprised if there's a large company out there that has a 300-point checklist for all of the things that they consider important for their own UX design, the user experience they want to create.
• 3:19
  Speaker 1: But if you distill all of that information down to its foundation, the core, most critical part of a UX approach for any website, including a Squarespace website, is a clear purpose.
• 3:31
  Speaker 1: This is the foundation of high quality UX design.
• 3:34
  Speaker 1: Is the purpose of this part of your website clear?
• 3:38
  Speaker 1: Is it clear that the purpose of this button is to buy the thing?
• 3:41
  Speaker 1: Is it clear that this section of the site is here to explain what the services are?
• 3:45
  Speaker 1: Every aspect of your Squarespace website, from the links in your main navigation to the call to action inside a button should have a clear purpose.
• 3:54
  Speaker 1: I don't think there's any point in the user experience where they should have a level of uncomfortable mystery.
• 4:00
  Speaker 1: Now let me explain what I mean by that.
• 4:02
  Speaker 1: Maybe you have a lead magnet where it's a quiz and people answer questions and they'll get a result based on that answer.
• 4:08
  Speaker 1: That could be a fun, unexpected surprise and a user experience that guides them to what service they need to hire you for or what product they need to purchase.
• 4:17
  Speaker 1: That's not the kind of mystery I'm talking about.
• 4:19
  Speaker 1: I'm talking about the mystery where they click on a link on your website and it takes them to a page where they have no idea what's going on.
• 4:26
  Speaker 1: They don't understand why that link went to that page or what they're supposed to do once they get there.
• 4:32
  Speaker 1: Again, the foundation of high quality user experience is to make sure that everything on your website has a clear purpose.
• 4:40
  Speaker 1: For some parts of your website, this is going to be really obvious and an easy thing to answer.
• 4:45
  Speaker 1: You have a form and the button at the bottom of the form says submit.
• 4:48
  Speaker 1: You know what happens when you click that button.
• 4:50
  Speaker 1: The purpose of that button is to submit the form.
• 4:53
  Speaker 1: That is a very clear user experience, and there's no question of what's going to happen here.
• 4:57
  Speaker 1: It's your job as the website designer to make sure that that level of clarity is present for every element of your website.
• 5:06
  Speaker 1: Now, how do you go about that?
• 5:07
  Speaker 1: One of the easiest ways to do that is to align the content of your website with the desired outcome.
• 5:13
  Speaker 1: There are plenty of reasons for people to visit a website.
• 5:15
  Speaker 1: Maybe they want to purchase a product, they want to learn about something, they want to hire you for a service.
• 5:22
  Speaker 1: As the website designer, you can create an experience for each one of those users, to guide them to exactly what they need to do, and making sure that everything on your website has a clear purpose means they're much more likely to engage and interact with a part of your website that will drive them to that desired outcome.
• 5:40
  Speaker 1: Once you've established that clear purpose for all of the elements of your website that foundational aspect of your user experience the next level is to have an organized structure to your content.
• 5:52
  Speaker 1: I don't just mean where you have the content on the page, but I mean where the content lives in the website.
• 5:59
  Speaker 1: Here's another example for you, related to a company that offers three different services.
• 6:03
  Speaker 1: Would it make more sense to list all three of those services in your main navigation, or is it better to have a services option that's a drop down so they can click onto each one?
• 6:13
  Speaker 1: Or is it better to have a services page that lists all three of the services on an individual page?
• 6:19
  Speaker 1: Now, the right answer to that question completely depends upon the actual user experience you're trying to create.
• 6:26
  Speaker 1: That's going to be unique for the business you're building the website for.
• 6:29
  Speaker 1: Let's pick apart this example just a little bit more.
• 6:32
  Speaker 1: Let's say each one of those services is drastically different.
• 6:35
  Speaker 1: Maybe listing all three of them in the main navigation is a great idea, but what if this particular website also has a blog and also has a podcast and also has free downloads?
• 6:47
  Speaker 1: That would become a really cluttered navigation.
• 6:49
  Speaker 1: So in that case, the services dropdown might be a better user experience for someone visiting the website for the very first time.
• 6:56
  Speaker 1: And what if all three of those services are very closely related and they could apply to people at different parts of the customer journey?
• 7:04
  Speaker 1: Maybe having a single services page that lists each one of those services could be really helpful for the person visiting the website to identify what part of the customer journey they're at, so they know which service to purchase.
• 7:17
  Speaker 1: Seeing all three of them next to each other on a page could be a great user experience.
• 7:22
  Speaker 1: It's your job as the UX designer to make sure that the person who is looking for information can easily find what they need.
• 7:29
  Speaker 1: It's also important to clearly organize the content of every individual page in your Squarespace website.
• 7:35
  Speaker 1: This is where we're going to lean a little bit more into the UI or the user interface design.
• 7:39
  Speaker 1: Now you can create all kinds of unique layouts in Squarespace, especially using a fluid engine section.
• 7:45
  Speaker 1: We have the ability to drag and drop content blocks around and create any structure we want to.
• 7:50
  Speaker 1: But creating a clear visual hierarchy will help users understand the importance of different elements of a website.
• 7:57
  Speaker 1: Headings, subheadings and body text should all be visually distinct and help guide users to the most important information first.
• 8:05
  Speaker 1: Many people using the internet today will quickly scan a page to try and identify which aspect of a website they really need to focus on.
• 8:13
  Speaker 1: Using large heading fonts and smaller paragraph text can help guide people to the right section where they can dig into more information.
• 8:20
  Speaker 1: This visual hierarchy is a very important aspect of user interface design and thus user experience.
• 8:27
  Speaker 1: Now, visual hierarchy isn't just about the size of a font or colors, but it's also about space.
• 8:33
  Speaker 1: Reducing space between sections of content can show that they're related.
• 8:37
  Speaker 1: Increasing space between sections of content creates a visual distinction, so using size and space and alignment all of this can help you create a visual hierarchy to organize your site content, directing people to where they need to go.
• 8:52
  Speaker 1: There are many more UX and UI principles that you can find with a little bit of Googling, and again, I'll list some of my favorite resources in the show notes for this episode.
• 9:00
  Speaker 1: But there's one more core principle that I want to discuss in this episode, and that's consistency.
• 9:06
  Speaker 1: Maintaining consistency in your design is an important part of the user experience.
• 9:11
  Speaker 1: Now, consistency doesn't mean that you need to make every page look the same, but establishing where things are so they're easy to use and navigate can be really important.
• 9:20
  Speaker 1: In regards to UX, keeping your menu in the same spot on every page is a great example of consistency.
• 9:27
  Speaker 1: If people know that the button on the top right-hand side of the screen is what they're supposed to click to contact you, don't change it on a page.
• 9:34
  Speaker 1: Leave it the same.
• 9:35
  Speaker 1: Make sure that they know the top right-hand side of the screen is how they're supposed to reach.
• 9:39
  Speaker 1: You.
• 9:40
  Speaker 1: Keep that level of consistency to create a good user experience.
• 9:45
  Speaker 1: Now, in regards to UI using the same fonts for all of your headings great example of consistency.
• 9:50
  Speaker 1: Using the same image style and similar iconography again great examples of consistency in your user interface design.
• 9:57
  Speaker 1: Now, if you use a set of icons on your site and some of them kind of look like a sketch and others are colorful clip art and some are solid black and white outlines, that's what I like to refer to as a hot mess.
• 10:10
  Speaker 1: That is bad UI design.
• 10:12
  Speaker 1: There's no consistency and it can look unprofessional and be a little disorienting.
• 10:17
  Speaker 1: Now, sketch style icons are great, clip art style can be a fun throwback, and I myself I'm partial to monoline iconography.
• 10:25
  Speaker 1: None of those are bad.
• 10:27
  Speaker 1: It's the inconsistency of combining all of those styles together that can be tough to look at.
• 10:33
  Speaker 1: So what can you, the Squarespace website creator, what can you do to create a consistent user interface design?
• 10:39
  Speaker 1: Squarespace can help a lot with this Consistency in your design.
• 10:43
  Speaker 1: Elements like heading fonts, paragraph fonts, buttons and even forms will help users understand how to interact with your site.
• 10:51
  Speaker 1: Version 7.1 of Squarespace has us assign one main font family for headings and another for paragraph fonts.
• 10:57
  Speaker 1: We have a form style that will be consistent across our entire site.
• 11:01
  Speaker 1: The program is built to help us maintain a consistent UI design.
• 11:05
  Speaker 1: However, some designers do consider these settings to be a little limiting.
• 11:11
  Speaker 1: A lot of people like to add an accent font that's cohesive for a brand and that's okay.
• 11:16
  Speaker 1: With a little custom code, you can go for it.
• 11:19
  Speaker 1: Just make sure that you don't go too overboard, because if your fancy font is difficult to read, it can undermine your UX foundation of a clear purpose.
• 11:28
  Speaker 1: If you need to use a pretty accent font, make sure that it's legible on all screens, including small ones, and make sure it's an accent.
• 11:37
  Speaker 1: It's not being used to clearly define the purpose of a section on your site.
• 11:41
  Speaker 1: Using a hard-to-read font for an important label can really diminish the quality and usability of your design.
• 11:47
  Speaker 1: Now consistency brings me to a topic that I do have to rant about for a second.
• 11:52
  Speaker 1: Bear with me here.
• 11:52
  Speaker 1: I'm very passionate about this.
• 11:54
  Speaker 1: Do not use a custom cursor.
• 11:56
  Speaker 1: I don't care if you saw one on a website.
• 11:59
  Speaker 1: It was so out of the ordinary that you fell in love with it.
• 12:01
  Speaker 1: Custom cursors can be inconsistent, disorienting and difficult to use.
• 12:07
  Speaker 1: It can be really difficult to understand where you're actually clicking on the screen when you use a custom cursor.
• 12:13
  Speaker 1: The arrow has been around for such a long time that when you customize it, it can be very disorienting to people who are trying to interact with your website.
• 12:21
  Speaker 1: Now you can get creative with your cursor and I have a fantastic example for you, linked in the show notes.
• 12:27
  Speaker 1: This is a website a friend of mine created for a public speaker, and behind the cursor on the website is a spotlight effect.
• 12:34
  Speaker 1: It subtly illuminates the content behind the cursor with this little circle of adjusted brightness.
• 12:40
  Speaker 1: It's different, it's unique, it's in line with the brand identity for this client and it's still a cursor.
• 12:46
  Speaker 1: I know what I'm clicking on when I use it.
• 12:48
  Speaker 1: It's a great example about how you can be creative and innovative without being confusing or disorienting your audience.
• 12:55
  Speaker 1: You're still creating a great user experience.
• 12:58
  Speaker 1: Okay, I feel a little better after that rant.
• 13:01
  Speaker 1: Let me get back to my list here the core principles of UX and UI.
• 13:04
  Speaker 1: We started this episode by talking about the foundation of quality UX design, and that is identifying a clear purpose.
• 13:14
  Speaker 1: If the purpose of the content of your site is clear, you're doing a great job.
• 13:18
  Speaker 1: Now the next layer on top of that foundation was the organization.
• 13:22
  Speaker 1: The organization refers to the structure of your site and where content is, but also how that content is displayed, how you've created visual hierarchy to create a user experience that will guide someone to the information they need to see.
• 13:37
  Speaker 1: Now the final layer, the top layer here, was consistency.
• 13:41
  Speaker 1: Consistency in your design is incredibly important for a high-quality user experience.
• 13:45
  Speaker 1: Now, I'm not saying that every page on your website needs to have the exact same layout.
• 13:50
  Speaker 1: That's horribly boring.
• 13:51
  Speaker 1: What I'm saying is that you need to create a level of consistency with the user interface.
• 13:56
  Speaker 1: Use the same font styles for your headings, the same iconography styles across all pages.
• 14:01
  Speaker 1: Even maintaining a consistent language throughout your site will create a sense of familiarity and a high-quality user experience.
• 14:08
  Speaker 1: If you're a designer, a developer or a do-it-yourselfer like me, understanding these three core principles of basic user experience and user interface design are incredibly important.
• 14:20
  Speaker 1: When creating a Squarespace website, we can utilize the tools provided by Squarespace and then embellish our site with some creative codes to build something that is truly unique while still meeting the needs of our audience.
• 14:32
  Speaker 1: Quality, ux and UI is all about finding the perfect balance between functionality and aesthetics, so that your website visitors enjoy the user experience.
• 14:42
  Speaker 1: I hope you found this overview helpful.
• 14:45
  Speaker 1: This is just the tip of the iceberg, my friend, of all the amazing things that you can learn about creating a quality user experience in a website.
• 14:53
  Speaker 1: Inside the show notes for this episode, I have listed some of my favorite resources about UX and UI, and you should definitely check those out if you'd like to learn more.
• 15:01
  Speaker 1: But before you head on over to my blog to check those out, I do have a favor to ask.
• 15:05
  Speaker 1: I don't have an advertising budget, but I do have an awesome community, so I'd like to ask you to share this podcast with your friends.
• 15:13
  Speaker 1: If you know someone who's ready to build their first website or they want to become a full-time Squarespace designer, I'd really appreciate your help in finding new fans.
• 15:22
  Speaker 1: So please share this episode with a friend, post about it on social, or do both.
• 15:26
  Speaker 1: Thank you so much for your support and for tuning in and, most importantly, have fun with your Squarespace website.
• 15:32
  Speaker 1: Bye for now, thank you.