Lessons

Lesson Info

Respecting Web Conventions in Landing Page Design

how do you design fans and welcome back I've got a bunch of questions in the discussion forum from you guys in in previous courses, what my hair looks like under the beanie. Well, so what it looks like, it's not usually this long, but it's fun. Alright, respecting web web conventions is really, really important. People come to your landing page with a huge experiential background that creates constraints in their minds with how things should work, how things should function and where things on your landing pages should be. So let's jump into the slides, we'll talk about that in a little bit more detail and then we'll jump to the whiteboard and provide some actual practical examples and also put my beanie back. I felt that the best way to describe to you and to convey the importance of that convention is to read a little bit from this excellent article from Don norman and Jakob Nielsen to usability experts from their website, the Nielsen norman group and the link to this article is righ...

t here on the slide, consistency is one of the most powerful usability principles. When things always behave the same. Users don't have to worry about what will happen. Instead they will know what's going to happen based on earlier experience. Going back to the idea of the experience of the experiential background, the more the user's expectations prove right, the more that they will feel in control of the system and the more they will like it and the more the system breaks user's expectations, the more they will feel insecure Jacob's law of the web user experience states that users spend most of their time on other websites. It's incredibly powerful thing to realize. People will spend the majority of their time on websites other than yours. And during that time they're developing conventions. They're developing expectations with how websites should work and function. This means that they form their expectations for your site based on what's commonly done on most other sites. If you deviate your site will be harder to use and visitors will leave very important components of conventions and how conventions are formed. This is a great book by Don norman the design of everyday things. It's not particularly specific for web design, but a lot of the principles that he speaks about are completely applicable to how we design for the web. And he talks a lot about conventions in that book. I definitely recommend reading it. It's a fantastic read. Oftentimes there's this push and pull between designers and usability experts, web designers and especially if it's your company and your designing your own landing page. You want to be innovative. You want to have things be done differently and be memorable and look unique and that's true. But don't be unique at the cost of a web convention unless unless you're absolutely certain that's your new way of doing it is just as evident to the user that your new scroll bar design or you or your new shopping cart icon is just as evident to the user that it's a shopping cart icon or it's a scrolling bar or that your new way of doing It is so extraordinarily valuable. It provides such an additional lift in brand awareness or in brand engagement that it justifies some level of user frustration. And to be honest, I don't think I can remember one time where I've seen some sort of innovation that was so incredibly useful on the landing page that justified any sort of user frustration. The only way to know this is by actual user testing because by definition, the reason why you want to be innovative is because you feel subjectively that this is going to provide a better user experience. But honestly the only way to know that is with actual user testing, not with your own predictions. Now I want to walk you through a few very common conventions on landing pages. They apply in most cases to dedicated landing pages, but definitely to micro sites into actual websites as well. So let's just do a very primitive drawing of your homepage. Right? Or your landing page. All right, so here's the shell of your landing page, number one, your logo, your site identification is in the upper left hand corner. Okay, That's Convention # one. Don't put it anywhere else. It should. It should always we'll talk about this when we talk about images and we'll talk about information architecture, your logo should always click back to your homepage. Okay, that's that's very important, navigation. Your navigation is across the top of the page, right expands your your primary navigation spans the top of the page nav and you have to have one traveling too right. And your secondary navigation what we call local navigation. If this is an e commerce catalog and then you're on your on specific products page, product filters, local navigation for additional services is going to be on the left hand side of the page. Right. These are conventions that should not be broken if this is e commerce, your shopping cart link is in the upper right hand corner over here. Okay, shopping cart link is in the upper right hand corner utilities such as about us registration login. My account sometimes FAA cues a contact phone number. Perhaps additional utilities that are not primary to the functionality of your site are usually going to be smaller and above the navigation. Okay, now all three of these aspects and also the secondary local navigation might be excluded from dedicated landing pages for specific marketing campaigns. So that would be okay in those cases. But when you do have your navigation, make sure they're in the right spots. Another thing which is really really important to remember and we're gonna talk about this again is any text that you underlined has to be a link. Alright. Underlined text is a link and it leads you to another page. That's another web convention. So don't underline text. That's not a link. The same thing holds true with borders. Any text that has a border around it is a button that also is clickable and it brings you to another page or brings into another area of the site. Animated. Flashy, colorful rectangles. Are advertisements. Okay, So if you have a school, a section like this and it has a lot of color in it and it has some maybe some product images, things like that. Those are gonna be ads. You might have a skyscraper ad like this. Anything that's a hard rectangle that has bright bold colors with a call to action and a button is an advertisement. It might be an internal advertisement. You might be advertising another area of your site. But anything that is formatted in that way is going to be an ad or it's going to be perceived as an ad. So you have a headline. Right? And you have a paragraph of copy that's introducing a feature Of one of your products. And what's typical when you have a two column layout is you'll have some sort of graphic, right that talks about how great your product is or it's a actual screenshot of the software you offer or it's a product image, whatever it may be. That's not clickable unless otherwise mentioned. Okay. Another very important convention is images not clickable unless otherwise specified. Another web convention is large text. Are things that you want me to read first. Okay. This is very straightforward. So this is what the eye goes to first. This is what the eye goes to second and make sure that the bigger the text contains the most important overarching concepts and information. Having site search is very, very important. We're gonna talk about that again. Um if your e commerce, it is critical, crucial that you have a search box, even if you are services, site, if you offer a lot of different services and you have a blog that talks about that that's that's heavily trafficked. You definitely want to have a search box. Your search box should be either in the center of your page. Okay? Or in the upper right hand corner of your nob of your primary nav. Okay, this is the two places where your search box should be and it should be nowhere else. Okay, this is very, very strong web conventions, you don't need to just you don't need to describe to the user what a search box is. All you need to do is you can have the word search in it or you can have the universally accepted Magnifying glass icon for search but it's either in these two locations. That's another very important web convention. Now, let's talk about forms. Okay, forms is another very straightforward one. Another big convention. You have your call to action block, let's say All right. And you have your form field one feel too submit button. Okay, if you do not have an asterisk, those little red asterisks or the word, the actual word required by each field, people do not assume that they're required. Okay, that's another big web convention and it creates a lot of frustration if I fill out a form and click submit and I left one box empty and my form doesn't go through because somehow this was required. That something that creates frustration in the user's mind. Another big web convention, don't forget forms form fields are not required unless indicated to last important web conventions. Free means free, get that straight if you say free trial. Okay, if you say free trial, people do not assume that they're going to have to pay or even enter their credit card to access the trial. Free trial does not mean that you can get a refund in 30 days if you're not happy. Free trial means it's free. Okay, that's a big convention that people oftentimes misunderstand for the sake of marketing but it tends to backfire. Another important concept in landing page design as a very strong convention is let's get our brown will work here. The footer and header sections are clearly demarcated with consistent and distinctive visual styles. Right? So your footer has a different background color and your header section with your nav might also have a different background color. But the point is is that your header section and your footer of the site provide visual cues when you get to the bottom of the page, a visual cue. When you're at the top of the page, the elements contained inside the header and contained inside the fitter do not change. They are consistent, right? That is giving users a sense of orientation. The logo doesn't change. The novel area doesn't change from page to page. However you design it, it must be consistent, consistency is key. We'll talk about that in an election coming up and it's also clearly demarcated in away with different background colors that this is framing the rest of the content on the page. If you don't effectively communicate visually, this is my photo. This is my header. You introduce confusion to the picture, right? You introduced. You introduce an element of uncertainty and that's the type of things you want to always always avoid. So those are a bunch of web conventions that you don't want to ignore. And remember there's no exercise for this lecture. It's just mm hmm. Thinking about how important conventions are there. They conventions take a long time to form. Thousands and thousands of hours go into designing web pages that have become consistent principles. There's a reason why the shop. There's a reason why the shopping cart logo is up here. There's a reason why navigation is always at the top, right? There's a reason why headlines are the things that you read first. There's a reason why images are not clickable. There's a reason why forms have to be labeled as a required field. They these conventions are very deep in a person's mind. They're deep in a person's psyche. We intuitively reflexively feel that this is how they should look. If I add something to my cart, my eyes will dart to the upper right hand corner of the screen to find the checkout process. So don't move it out of there unless you absolutely have to and like we said, unless you know that your new way is as self evident or your new way provides so much additional value that it's okay to cause the frustration, which really there's no such thing. So respect those conventions. Design your pages with those conventions in mind. I'm sure if you think about it, you'll come up with a bunch of different conventions on your own that you've just picked up from searching the web and browsing the web. But as you design your landing pages, always keep in mind to respect those conventions and almost at any cost, do not design things or do not be innovative at the cost of breaking a user's expectations of deviating from the user's experiential background and ultimately defying any of the standardized web conventions. So with that we'll complete this lecture. Thank you very much for sticking with me through this one. And I will see you guys all very soon in the very next lecture