Lessons

Lesson Info

Information Architecture and Accessibility - Landing Page Design Best Practices

how to design fans. And welcome back in previous lectures, we've spoken about the overarching concepts of information architecture and accessibility. Information architecture primarily deals with navigation. Getting that right and accessibility deals a lot with typography, layout and legibility. In this lecture, we're going to dive in and talk about a bunch of practical techniques that you could use to increase the effectiveness of your information architecture and increase the accessibility of your landing pages and website. So let's jump right into the slides. Information Architecture deals with things like how well your content is organized, how easy it is for people to find the things they're looking for. What are the things that you want to make visible above the fold? Where's your navigation? How easy and intuitive is your navigation to use? Can a person always find his way back home and find their way to the previous step in browsing your website. Accessibility deals with how ea...

sy your site is to actually use and read getting feedback from elements that should be giving feedback, providing users with all their options, comfort level and primarily legibility. So let's just jump in and talk about navigation. You gotta get your navigation right if people can't find what they're looking for, they're going to leave right. The two main things are the two main components of navigation are consistency and intuitiveness. Your navigation should always be the same and it should work the same way on every single page. Don't ever change the format or layout of your navigation intuitiveness relates to how well your actual navigation structure within your top categories. You're gonna want to have your subcategories that all relate thematically to the top categories to the top sections. Over here. On the right hand side we have a screenshot of one of our client's websites. And you see there are four primary elements of navigation over here. So you have your primary nav over here on top which is your top sections, you have your search bar, you have local navigation, secondary navigation over there and then you have self selection navigations of top product categories over here. All these different navigational elements on this page have been tested, modified tweaked based on analytics. Over and over again to provide the most intuitive and consistent user experience to help people find what they're looking for. Visitors should always be one click away from home. Right things about web browsing, there's no sense of scale, no sense of direction, there's no sense of location. If you go to the department store, if you walk into Bloomingdale's, you immediately physically get a sense of how big the department store is. You understand location based on what section of the store you're in. There's an up there's a down there's a left, there's a right, there's no sense of those things on the web, Your job with navigation is to provide users as much as possible with a sense of location, a sense of a sense of direction and most importantly an easy way to go back. So here's a screenshot of again, one of our clients sites and as you can see, this is deep into their product offering. There's a lot going on the page. Right? It's busy. There's hundreds of different, they offer tens of thousands of different products and hundreds of different product categories and hundreds of different subsections within each parent category. They should always be one click away from home because that tells the users I'm lost, but I could start again, I could find my way back. I can go home. Right? So clicking on the logo in the upper left hand corner is the most intuitive way. It's a convention. We spoke about that as a convention. That's a way to get people back home. So make sure that you always incorporate that, especially as your site gets bigger and bigger. Good navigation. It tells users where it is, how to find it using parent categories to represent themes below it. Right? You want to always group your things intuitively, some, some people will say that you should only have top level navigation. You shouldn't have dropdowns or fly outs. That's not true. Dropdowns and fly outs are great and you can also use it to create a unique and creative experience. Like we see over here with indo chino custom menswear. If I click under suits, I see a bunch of different products that can go to and they have these nice images that help to enhance that navigational experience. Let's break down all the main elements of persistent and consistent navigation, um, consistent. Is that the format is the same and persistent is that it shows up on every single page of my site. So here's a screenshot of Wayfair, very popular company that sells tons and tons of home related products. So you have the site I. D. In the upper left hand corner, right, that's you're gonna be your typical, that's typically going to be your logo. You have your primary nav which is your top level sections right next to the logo that spans the top of the page. You have your site search, that's another important navigational element. You have utilities, we spoke about that when we talk about conventions above the search box, you have your breadcrumbs and we'll talk about that in a second. You have your page title, you have your product filters, local navigation and you have your foot or navigation. These are all elements of navigation that help users get a sense of orientation, a sense of direction, a sense of where they are and how far they've gone and if they're in the right place to find what they're looking for. These are all things that should basically be consistent across every page of your site. Of course, if it's the checkout process or a key conversion page, you might not have some or all of these elements, but essentially for any primary page of your site, you want to have these elements consistent. Let's just break down and talk a little bit in detail about each one of these. So let's talk a second about your site. Id. Okay. The site name, it's always going to be near the upper left hand corner. That's where your users are going to look for it first. The site I'd also tells me that I'm still on the site. If I'm in Bloomingdale's, I'll know when I'm leaving Bloomingdale's if I walk out into another store, it'll be extremely extremely clear. Your site idea is the main element. Your logo is the main element that tells users I'm still on the site. If I click a social link, I go to facebook, my logo is gone. If I click on another link and I open and I go to a refer site or another blog post, I'm gone. And and the visual cue to the user is that that site I. D. That logo has changed. Right? So it tells people that I'm still on that page. You want your side to always frame the entire page. It's the higher highest level in the hierarchy. It's the page. Title should not be above it. Your navigation should not be above it. It frames the entire page. It frames the entire site, Right. Not only just that page, it frames the entire site. Everything that's beneath it in the hierarchy is all contained inside it. Right? So that's important. It should look like a conventional site ID. Right? So typically it's going to be your logo, It should have a distinctive visual, you could have a tagline. Those are all the conventions of having a good site ID. And like we just said, it should click back to the homepage. Now, let's take a look at primary navigation, which is your top level sections. And over here on Wayfair, here's an image of it being expanded using their fly out menu. So your your main sections are gonna have links to all the main sections of your site. Right? It's not gonna have links to some of the additional utilities. We'll talk about that in a second, but all the main functionality of your site, you wanted to be across that top of the page. Right. Sometimes fix sometimes it scrolls scrolling. Now, it means as I scroll down the page, that top navigation stays always affixed to the top of the page. Right? So that's something to consider as you're designing your Now, there's no one way or the other with that, but the overall location of it is important. Use your sections for grouping so you don't want to have too many uh, primary nav links across the top of your site. Obviously it changes if you're in e commerce or legion, but the main rule of thumb is that they should be easily legible. You don't want to have lots of different primary traveling scrunch to the top of the page that just adds confusion. You want to try to use grouping as much as possible. So have your main categories and then have your subcategories as drop down menus under your primary Nav you are here. Visual indicators are important, right? So if I click on a specific item and I go to that page, if I click on a specific Nav link, there should be some sort of visual distinction. So maybe the background of that nav change colors or it looks like a button was pressed in or just the actual color of the text became a different color. So that's important as well. So people will realize that on a certain page by looking for those you are here indicators. That's another conventional web design. This should be your, your navigational element. Like we said, it should be on every single page except for those key conversion pages. Site search is very important because you're appealing to search dominant users going back to that example of walking into Bloomingdale's, some people will just start browsing themselves. They're gonna look around for those big I'll names and section titles for the different departments within a department store. Some people will actually go find a sales person and ask where are the men's ties. Right? So you're gonna have searched dominant user Jacob Nielsen, we've spoken about him a few times already, he has a lot of groundbreaking research that shows that there are search dominant users that will always go to site search right away without browsing first. So a search box is important because it appeals to the search dominant users just say search or use the magnifying glass icon. You need nothing more. Right? This is universally accepted. People get a box with a magnifying glass at the top of the website is meant for search frame the box right? There's a lot of websites that I've seen and we had an issue with this with a client this past week where their new site had the super minimalist light underlined for their search location and they saw a huge drop off in analytics of people actually using their search box and their their primary conversion method was through the search box. So they were losing revenue and we had to kind of go back to the drawing board to the designers once again this push and pull between designers and usability experts but frame the box that's important border the actual border around the search box. Auto complete is great. If you could use, if you could implement Auto Complete in your search boxes, that is um, will increase conversion rate and very important allow for common spelling errors right. If I'm looking for a vacation package in Guadalajara, I might misspell Guadalajara. So sites with really effective search boxes allow for common misspellings and spelling errors. The utility bar is typically the only thing that will ever ever go across the top of the very, very top of the page even above the logo site I. D. In many cases. So the utilities provide kind of links to areas of the site that aren't part of that main information architecture. They're not your product categories or your service categories there. Additional supporting information. There are things that are important that are used but they're not part of that main body of experience. So things things that would typically go in the utility section include things like sign in register, your shopping cart about us, F. A. Q. S. A site map, directory, store, locator, jobs, order tracking, discussion forums. You know, maybe you'll have a limited time promotion going across the entire top. In a welcome bar, a floating bar at the top. It's it's a common thing. But those are the types of utilities that will go in that section. They should be less visually prominent, significantly less visual prominent than the other navigational elements. They should be much much smaller and out of the way and they should not have any flashy design that call attention to it. They're just there and they should be the only things that will ever ever ever ever go above the logo on the side I. D. Only include the common utilities in the top navigation top of your site. All the other utilities like your site map in most cases and things like that will go in the footer nap. Breadcrumbs. Breadcrumbs are important because they easily give visitors the ability to go back one step or go back home, especially in deep e commerce catalogs. Breadcrumbs are very, very, very important. They don't take up a lot of space. Um there they give users a sense of direction, they give users a sense of orientation because you're gonna bold or highlight that current level and they really are used often by people to navigate back one step or to go back to a product category, page or even go back home, use the chevron, the right chevron indicator between levels. Once again, web conventions, that's what's typically done. That is what you should do with your breadcrumbs. The deeper the hierarchy, the more useful breadcrumbs become. So the deeper you are inside the site map, the further, the further I am down in the hierarchy, the more useful visitors will find your breadcrumbs. So if the bigger the site, the more important it is to implement them page titles. We've spoken about page titles a lot and there's a reason. And that reason is because they are so important and they are sometimes overlooked. Every page should have a page title that frames the content of that specific page. So don't put your page title above your local navigation. That's on the left hand side because that that page title is only specific to what's the content of that specific page. If I click on something else in the local navigation, I might get a different page title and that will be a bad user experience. And if you notice how Wayfair does have the page title above their local navigation, that's because their local navigation is not really going to navigate you to different page sections, it's going to filter out products under the wine racks category. So in fact, Wayfair, the way they have a design is the right way because any time any button that I click to filter products, I'll still be under that category of wine racks. So they're framing all the information using the page title. So the patient accomplishes quite quite a significant amount, the page title. So it should be the largest text on the page. And this is true for legion, this is true for dedicated landing pages and this is true for e commerce, it gives users a subliminal sense of location. Right? We remember we spoke about that idea of being in a department store, I can look for those big um if I'm if I'm searching for gardening tools I can look for the gardening tools, sign. And when I'm there, just the different products and the fact that I'm I I found it gives me a sense of location where I am inside the department store, it's the same thing with the website, a page title gives me a sense of comfort, A sense of location, it puts me at ease, right? I know I'm in the right section. If I'm looking for this specific product for navigation is basically, you know, very, very straightforward, You might have a list of the primary page links, you might have your contact info, right? These are all different types of of conventions and different ways people used for navigation. You have all your additional site utilities, social icons, a newsletter, sign up, you'll have your privacy policies, um your site map, things like that. Right? So you're footer navigation. There's not really too many specific design conventions because people use their footers in lots of different ways. The main thing is that it's consistent, it's on every page and it gives people a way to find all the additional things that they might want to look for um as it relates to your company. Now, let's just spend a couple minutes talking about some of the important accessibility concept that we have not covered yet. In this course contrast, make sure you have lots of it. If you look at that screen on the right, you have a red background and orange button background colors like it's ridiculous. It's that's bad contrast. The buttons barely pop out, right? You have to kind of like, not only is it like hurtful to the eyes to look at it, it's not even clear that those are those are actual buttons, right? So you want to make sure that you have contrast in your background colors and you wanna make sure your text always has enough contrast with its background color and a great tool that you can use to to check this out is go to contrast checker dot com um and you could input a background color in the foreground color and will actually rate the readability based on contrast. Right? So make sure you have lots of contrast feedback things that make things happen should have something happen to it when interacted with. And the most classical examples with a button as you can see in the left hand side, my mouse is moving over the button but nothing is happening. The mouse is not even changing to a pointer. Right? That's bad. There's no feedback. The conventions of this being a button are are being defied. The middle example is not great but better. The button itself doesn't change but my cursor changes to a pointer. Right? So that's better because at least it gives me some sort of feedback that this is a button that's clickable on the right hand side is great. That's the best version where my cursor switches to a pointer and the background color changes indicating that this is a button that could be clicked. Right? So feedback for elements this is the same thing that this is true with text. This is true with navigational buttons, this is true with call to action buttons. Um you could have feedback with with hovering over elements if I have an image that is clickable and my mouse moves over it. I get a background shadow on hover. So using hover effects tastefully help create feedback with things that should have feedback. Once again, it's all With the concept of removing question marks from the user's brain, not making people think making everything as clear and simple as possible. A few quick words on typography. Typography should go unnoticed nine out of 10 times. It shouldn't be something your visitors think about. It shouldn't be that memorable. Right? It should just be there as a medium to communicate. There are some sites that are very topographically oriented where the design is very focused on huge fancy text but for most of us that's just not the case. You want to use sand saref as much as possible serif which is the text that has the little lines on the ends of it like times new roman are actually harder to reach. So if you see this example of Shopify and most sites you're gonna see are using sand saref but that's for a reason, Don't use more than two Font families throughout your site. And if you can use just one font family for your header sub headers, your paragraph should all be one font family at most two font families and there's an example of Admiral, very beautiful, neat page. Big company using just one font family. A few other quick tips of typography avoid excessive capitalization, right? Capitalized sentences are actually harder to read. Right? So they turn visitors off, You might want to do it because it kind of is in your face but avoid excessive capitalization whenever possible, especially don't really ever capitalize a full sentence, even your header ones should be title case, avoid inverse color schemes. So dark backgrounds with light text or actually have been proven harder to read even though you're seeing it more and more now there actually are hard to read. So go with a normal color scheme as much as possible. Lighter background color with darker text, avoid multiple text colors. Same idea. You don't need to make your text to memorable so you might want to have a different color for your headings and then you know a neutral color for the rest of your copy. Maybe one or two accent colors with your text maximum. I would recommend at most one, but I would leave your color for other elements like buttons like imagery and not even incorporate color into your actual text. We said this before. Don't underline text that isn't a link start with 14 point font size increased a few points for an older demographic and that's what you're targeting and 50 to 100 character max line length. This is not talking I'm not talking about paragraphs here. I'm talking about the actual length of your line don't make the length of your line more than 5200 characters because studies have shown that Once you go past kind of like 70 characters, you're making it much, much harder for the user to actually read and then go back and find the next line. Quick exercise to end off this lecture, Steve. Krug Trunk Test, choose a random page on your site and print it out. Hold it at arm's length and squint so you can't see it so clearly. And quickly try to find and circle the following the site name, the logo, the side of the page name the primary Nav. Local secondary nav tur here indicator that shows some sort of visual clue that you're on a specific navigational link and the search box if applicable. That will give you a good sense. The reason why it's called the trunk test is because he has this affinity to the Godfather movies and he imagines you're driving around the trunk blindfolded for an hour and you're you get up and you're dizzy and disoriented and you don't know, you don't know what's going on. So he kind of makes that analogous to just landing somewhere deep on a site and having no idea where you are. You're disoriented. But you could quickly find out all the main important navigational elements like the primary nav in the name of the site. The name of the page to give yourself a sense of direction. So do that trunk test with um I think you'll find with one any page deep in your sight. I think you'll find some really interesting things and then show it to a few friends, coworkers. I think you'll find some interesting results. So, thanks for sticking with me through this one. This is a good one. And I am looking very much forward to seeing you in the next lecture. And I am also excited to see how you implement these concepts of accessibility and information architecture in your own landing pages. And when we go to build our landing page, we're definitely gonna be incorporating those principles. And I will see you guys very soon.