If it’s time (or long overdue) to evaluate your website, you may be wondering what really matters in the design and content of your website. If you’ve thought, “hey, a web design checklist would be super nice,” well, you’re in luck! Feast your eyes below.
The truth is, web design is complex and there are many, many variables that affect whether or not you can label your site as “effective.” A basic web design checklist will probably not cover all your specific needs. After all, your target audience, the industry you’re in, what your website’s goals are, and a host of other factors will all affect your website’s effectiveness.
However, at the most basic level, there are fundamental key usability and content development elements that all websites should employ at some level. That what this web design checklist is designed to do: help you target the most critical and fundamental key elements to good website design.
See below the checklist for more in-depth descriptions of each of the fifty key elements.
Branding and Homepage
As simple as it sounds, the most important thing a website needs to communicate is what the website does. There should be clear indications (through text, images, etc.) about what the site is. Is it a news site? A blog? An e-commerce site? Some combination? What industry is it? Mortgages? Pharmaceutics? If a viewer can’t tell within three seconds what the site is, they will probably leave.
Your visitors will want to know what they can do with the site. Can they buy stuff or just read news? Can they comment and post reviews? Can they play games or just learn about them? Visitors also want to know how large the site is. When you walk in a department store, you can get a sense of scale. When you “walk into” a website, it’s sometimes difficult to tell how large it is. Help viewers know if there is a lot to offer by giving them clearly marked sections of the site.
#3: Starting Point
Strangely enough, some websites are hard to figure out where to start. Give your visitors a focal point (or a couple focal points). Don’t let them guess where they need to click first. Visitors have a specific reason for going to your site, so make sure they know where to begin. If they start down the wrong path, you may lose them forever.
#4: Visual Appeal
Aesthetics matter! As much as we would all like to believe that all visitors care about is is the content, it’s not true. The visual appeal of a website has been repeatedly proven to make websites seem more credible. People also believe that the website works better (even if it doesn’t!) if the website looks nice.
You have total control over your website’s personality. How do you want it to present itself? Informal? Serious? Fun? Excited? Professional? Funny? Every word, image, and color you choose will impact the personality. Keep the personality consistent in your headings, colors, and word choice throughout the entire site. This is an important branding consideration.
#6: Color Scheme
Run your color scheme by a professional designer. Or, at least ask several people what they think (and you can’t ask your spouse or mother!) You shouldn’t have more than 3 or 4 colors dominating your design and all the colors should match. Also, recognize that about 9% of all men have some form of colorblindness, so you may need to accommodate for that, depending on your content.
#7: Site ID
A Site ID is, more or less, a logo. Your site should have a clear ID–visitors should know the name of the site, no matter what page they land on. Site IDs are most commonly placed in the upper left-hand corner of every page. In most cases, you won’t want to break this common convention. Also, your site ID should link back to your homepage.
Taglines are short, pithy phrases that tell visitors what your site is all about. A tagline IS NOT just a company slogan. While taglines can function as a slogan, they need to do more than just state something nice. Taglines need to tell users what the website/company does and why people should be there and not somewhere else. So, a website that sells baby furniture should NOT have a tagline that says, “Because Your Baby Matters.” That might be a nice slogan, but it could be used for a women’s clinic, a pediatric office, or a diaper company. A better tagline for a baby furniture company would say something like this: “Furniture almost as Cute As Your Baby.” Taglines should be between 3 and 8 words.
#9: Welcome Blurb
Similar to a tagline, a welcome blurb quickly (in a sentence or two, or even simple phrases) should elaborate on the tagline. “We don’t just sell baby furniture. We well sell the cutest stuff out there.” DO NOT let your welcome blurb turn into “Happy Talk” (See #29). Welcome blurbs are not always necessary, but they can help clarify the purpose of a website. And they should be very short.
#10: Ability to Satisfice
The term “satisfice” means to make a good decision after quickly making an assessment of the best decision. Visitors should be able to look at your homepage, scan it within a few seconds, and feel confident about clicking the right thing. Visitors won’t necessarily click on the first thing they see, but they won’t spend a lot of time weighing all their options. They’ll satisfice. So make sure that your important links are easy to find and understand.
Utilities are links or pieces of your website that don’t affect the page structure/navigation of your website, but are important for visitors to feel comfortable on your site. Utilities are often things like shopping bags, search bars, member logins, A-Z indexes, site maps, and so forth. They are almost always in the upper-right of a website, so don’t break that convention. Your visitors will be happy knowing where to find that information.
Noise refers to the amount of stuff on a page in relation to the amount of white (empty) space. People don’t like visual noise. In fact, noise is so aesthetically unpleasing that people tend to think websites (and the comapies who produce them) aren’t credible if they appear busy. Remember: white space is good. Don’t be afraid to make your design simple.
#13: Peer Comparison
Chances are, your visitor has been to your competitors’ websites. You should get a feel for what others are doing what you think is a good idea. Sure, you want to be different than your competitors, but that doesn’t mean that everything your competitors is doing is bad. Make sure that you are fitting in with your industry conventions and providing your visitors what they need and expect.
#14: A Way Home
I always tell my students: don’t let your website feel like IKEA (or a hospital)! When we walk into most buildings, we know where we are in relation to the front door–IKEA and hospitals are the exception. There is nothing more frustrating than feeling lost. If visitors don’t know how to get back to the homepage, they’ll probably just leave. (If only that were a luxury we could have in IKEA–you can’t just leave until you find the door!
If your website is larger than 15 – 20 pages, you really should have a search bar. Research has shown that about 50% of all web users expect a search bar, and go to it almost immediately on any new site they visit. Don’t count out half of your visitors because you don’t have a search bar. Simple, small sites can get away with not having one.
#16: Page Grouping
The way you group your pages is important. If you sell leather gloves, will you put them under “lawn and garden” or “automotive”? Or both? Make sure the way you group your information is consistent with industry norms and customer expectations.
#17: Organization/Visual Hierarchy
Websites should be organized by importance. Is the most important thing the most obvious? Largest? Highest on the page? Is anything important “below the fold”? (Meaning, is it below the bottom of the monitor, where visitors will have to scroll to see it?)
#18: Section Titles (Menu Links)
Sections are the main links on your homepage. The wording of those sections is crucial. Come up with very clear menu link names. Sometimes there is a tendency to be really cute or funny with the section names. But, trust me, people will be annoyed by them the second they realize that they don’t understand where the link will take them.
#19: “You Are Here” Indicators
Visitors need to know, at all times, where they are in the site. If a visitor is on the “Contact Us” page, then the Contact Us link needs to have some visual indicator that that is the page they are on. The page link shouldn’t link (to itself) and it might be a different color or have a little icon next to it. Something. There should be an indicator that the visitor is on that specific page.
Especially for websites that have hundreds (or even thousands of pages), it is crucial that visitors know how to link backwards. Do you ever go to a webpage and say to yourself, “I don’t remember what I clicked to get here, and now I can’t find the page I was on!”? Well, so have your visitors. Don’t let them do it on your website. Give them links that show the path to where they’re at (Home > Lawn & Garden > Tools > Power Tools).
Nesting has to do with the way your pages link to each other in an organized path. You have your main menu links, for example, which lead to pages with more links, etc. Often, you’ll use drop-down menus to nest linked pages. It is critical to a strong website that your pages are nested in a way that makes sense to your visitors. People who come to your site need to know exactly the path to follow to get them where they need to go; if pages aren’t carefully nested, your visitors will likely get lost and frustrated.
#22: Pathway Pages
Related to nesting, sites that use drop-down menus should have pathway pages. Pathway pages are pages that are one step away from the homepage (typically link from the main menu) and then provide “pathways” to other sections. If, for example, you are a grocery store, you might have a link from the homepage that says “Deli.” That would link to a pathway page that provides six more categories: cheese, meats, sandwhiches, salads, soups, and party trays. Strong pathway pages tend to use good images that link to the next sections and they make navigation smooth.
Clickability refers to whether or not items that are a link appear clickable (and vice versa). Often, visitors will see things (like images or headlines) and assume that they are a link when they really aren’t. Be conscious of what might appear like a link but isn’t and what is a link but doesn’t appear to be. If you want people to click on things, make the links look like links by changing colors, underlining, or directing attention to them.
#24: Meaningful Links (Internal)
Users should know exactly where a link is going to take them, so the words you use to link within your site are critical. Don’t get to funny, cute, or fancy with the terms. A link that says “explore” isn’t really that helpful. “Online Store” would be better.
#25: Meaningful Links (External)
Just like in #24, links that link outside of your site need to use specific words to clarify where the visitor will be sent. When you say “click here for more information,” visitors don’t understand where they will be going. Rather, say something like “visit the Hogle Zoo’s website for more information” to let them know exactly what they are linking to.
#26: Audience Adaptation
Know your audience. This is one of most important things you can do for your website. Understand who they are, where they are from, how old they are, what their interests are, what their expectations are, what their internet knowledge is, and so forth. This knowledge will affect your design aesthetic, word choice, images, technology, social media, and so forth. Spend the time to research, interview, and conduct case studies with people who are likely to use your website then adapt ALL your content to them.
#27: Tone, Style, and Voice
Your tone, style, and voice will be affected by who you determine your audience is. But don’t go about determining these without thoughtful consideration. Remember that your website functions like a conversational robot: your visitors will ask it questions, and they expect those questions to be answered, but in an appropriate conversational tone. Is your tone serious or funny? Are you trying to alleviate concerns (like with a return policy) or get people excited (about the upcoming fair)? Will your headings be in third person (“How to Return Your Merchandise”) or in first person, as a question (“How Do I Return Stuff I Don’t Want?”) Every word choice matters and all the words and tone should be consistent throughout the entire site.
All content needs to be up-to-date. Nobody likes going to a website that is out-dated (and remember that in internet years, anything over a year old seems outdated). If you have a copyright date in your footer, make sure it is the current year. If you have news articles, make sure they happened within the year. Don’t leave old promotions, coupons, or other ads on your site. Keep the content fresh and keep making changes to entice your visitors to come back.
#29: Page Names
Every page should have a name. When someone clicks on a link called “Women’s Shoes,” they expect to be taken to a page that is named such. Don’t let your visitors guess if they clicked on the right link: show them by naming, with a large heading, the page they are one. This gives reassurance and confidence. Make all page names match the link name that took visitors there.
#30: Happy Talk
“Happy Talk” is a term that web usability guru Steve Krug uses to describe text that blabbers on about the organization, especially on the homepage. Think about it: if you go to a plumber’s website, and on the homepage there are six paragraphs explaining how their service is great and they’ve been in business for 35 years, and it is a family-owned company, and blah, blah, blah, would you read it? Maybe, but not if it was written in six paragraphs. You need to be credible, but you can’t write a bunch of text thinking that people will actually read it. Most will not. And the text ends up making your page seem busy, which in turn makes it lose credibility (see #12).
If your website uses a blog or updates news on a regular basis, pay very close attention to the headlines. You want to grab attention, so think of phrases that will actually get people to read the content. Check out CNN.com or ESPN.com to see how they have mastered this.
Content needs to be organized into clear chunks. When you have pages that have multiple paragraphs, be sure to separate them with headings. And don’t make your headings “float.” In other words, don’t leave equal space above and below the heading (which makes them not look like headings, but rather comments between paragraphs). Make your headings flush against the paragraph below it without extra space. The extra space goes above.
Typefaces are important for readability and for site personality. But don’t go crazy with them. Most websites use a sans serif font (like Helvetica, Arial, or Century Gothic) for the content. You might want a different font for the headings. But don’t use a font that most people wouldn’t have on their personal computers and don’t use more than two fonts for your entire website (with the exception of your logo’s font, which would count as a third).
This might seem like a no-brainer, but make sure that your content is relevant to your audience. If you are a pharmaceutical company, you don’t need a photo gallery of the national parks close to your business. The content won’t seem to mesh with your site’s purpose, and visitors will find it strange, annoying, and unprofessional. Only put on content that visitor’s likely came to the site for in the first place.
#35: Content Length
Be careful of content overload. Remember that people skim and satisfice. If you put too much text or too many images, people will fill lost in the amount of content. And, as a result, they won’t read any of it. Give information in chunks, in short sentences and phrases. Too much information on a website ends up being no information at all–because no one will read it.
#36: Linked Documents
Sometimes an easy way to not create pages is to have your visitors link to PDFs and Word documents. But this can be annoying, since people have to download them and many visitors are wary to download anything from the web. You should give your visitors the option to download PDFs (like for a brochure) if they want, but also try to provide all content in text on the site itself as well.
All sentences should be short and to the point. For most commercial and non-profit websites, you want your text to be written at a six-grade reading level. This doesn’t mean to write like a sixth-grader, but rather it should be written so that just about anybody could read it.
#38: Grammar, Mechanics, and Spelling
Don’t have any errors! If this isn’t your strong suit, hire someone to edit your pages. Nothing looks more unprofessional than errors.
Use punctuation sparingly on websites. Websites aren’t typically the place for fancy prose, which requires a lot of semicolons, colons, and dashes. Also, exclamation points are usually annoying, so avoid them as well.
#40: Lists and/or Tables
Remember that people read quickly. Tables and lists are good ways to separate, chunk, and shorten content. When you have a lot of a paragraphs, see if you can actually put the content into a list or table. People are much more likely to read it if it is.
#41: Image Appropriateness
Images should be attractive, cropped appropriately, and fir the brand of your website. Only use pictures that you have permission to use and make sure they’re not being used to be used. All photos should have a distinct purpose. With that in mind, almost all web pages can be enhanced with a picture on it.
#42: Image Resolution
All images should be 72 pixels per inch. This is a low-resolution file size that loads fast on the web. If you are loading images straight from your digital camera, chances are they are 300 pixels per inch. If your site is full of a bunch of high resolution photos, it will load very slow. And most visitors won’t wait more than three seconds for a page to load. That’s right, THREE seconds!
#43: Image Alt Text
“Alt Text” is text that describes your image when someone rolls their mouse over the image. Alt text is critically important for visually impaired users who use screen readers to tell them what’s on a page. Screen readers can read text just fine—but they struggle seeing what in a photograph. If you give a clear description of what’s in the photo, you’re helping those individuals out. Plus, alt text is great for SEO because it helps Google know what’s in the photo, too.
#44: Image File Names
Similar to alt text, all photos ought to have a file name that describes what’s in the photo. If you pull a photograph from your cell phone or digital camera, it’s likely named something like IMG0321.jpg or DSM1298.jpg. Those file names are useless to your users and to search engines. But if you name your file Backpackers-In-Uintah-Mountains-Utah.jpg, Google knows what the image is if someone types in “Backpakers in Utah” into the search bar.
#45: Effective Icons
Many websites nowadays use icons to help their users get to where they need to go. There are icons for online banking, for applying for loans, for downloading files, for making purchases, and so forth. Using icons is great for simplifying your website, reducing text, and making it easier for repeat users to navigate your site. Just be sure that your icons are easy to understand and that they don’t confuse your reader.
#46: Image Relevance
Make sure your images are directly related to the content and focus of your website. Oh, sure, that photograph of the eagle flying over Lake Yellowstone is beautiful, but what does it have to do with your pharmaceutical business?
Sometimes it’s good to caption photos to clarify exactly what’s happening in an image. Written much longer than alt text, captions can describe actions that people are doing or they can set the context for an event. If your picture could use a caption, stick one in!
Infographics and other charts and diagrams can be incredibly useful for websites. Do you explain any complex process on your site (like, say, how to buy a home) with a bunch of text? Yuck! You’ll freak your users out. Give them an infographic that clarifies and simplifies the process.
#49: Video Descriptions
Videos can be good, but they work differently than text and visuals. If you look at text or a picture, you can scroll and make quick decisions. You can look at a picture and see it its relevant to you. But with a video, you’re sort of stuck watching it for at least several seconds (if not several minutes) before you can tell if the video matters to you. It will help your users if you tell them the content of the video before they click the play button and get annoyed that it wasn’t what they were looking for.
#50: Video Content
As is the case with any media on your website, make sure videos are relevant and that the content reflects the brand and purpose of your website. Don’t include videos just to include videos. Make them relevant, professional, and useful. And remember: most people don’t actually like to watch a lot of videos on a website. They should be used sparingly.