Web Design Usability Checklist - Center for Lydteknik

Web Design Usability Checklist © 2012 by Holger Lagerfeldt Version 1.5

Minimize Friction - Maximize Business If you are designing a website for your small business or sole proprietorship, following this article will: • • • • •

Lead to more sales by reducing interface friction for your customers Improve overall customer satisfaction with your service Increase the likelihood of being recommended online Make your website search engine friendly in a non-manipulative way Reduce the amount of time you spend on answering emails or telephone calls

I have used my own companies www.popmusic.dk and www.onlinemastering.dk as examples of how to implement these tips.

Customer Is King Structure your website according to the needs of your customers. The needs of your customers do not always follow the internal structure of how you have organized your products or services in your business. Imagine your potential customer, Jack, is visiting your website for the first time. Jack does not know or care about what makes sense from an internal perspective of your business. Jack is only interested in finding the information he needs in a manner which to him is speedy and logical. In this and any following situations ask yourself: What does Jack want right now? Jack does not want to go through a fancy splash page or sit through a presentation video. Go straight to the index page instead. Here is a problematic example:

The three unskippable introductory pages of www.gradolabs.com Grado Labs makes high quality headphones for hi-fi enthusiasts and professional audio engineers. However, at the time of writing, every time Jack visits their website he is forced to click through three introductory pages: a message from the founder, a pop-up request

for liking Grado on Facebook, and a warning message. Accessing the actual product page requires yet another click. Closing the pop-up instead of clicking the enter button will force Jack to start over. Once Jack has successfully located the page for the headphones, he is presented with a range of series, each containing several products. The series have names such as “Professional”, “Statement”, “Reference”, “Prestige” and “In-Ear”. While one or two of the names are easy to decode for Jack, the others are not. This is an example of structuring according to the internal classification needs of the company, not the customer. Jack will probably never understand the difference between a Statement and a Prestige headphone, and may leave feeling confused and annoyed instead of deciding to buy something. The solution is not to add additional information about the product series, but to re-think the presentation, based on how customers search for and categorize information.

First Impressions Count The index page, a.k.a. the home page, should immediately provide Jack with two answers: • The purpose of the website. • The current page is the home page. The index page should also contain news items, but this should be secondary to regular contents. The news segment should contain a time of last update. Relevant news items make your website look alive, and as a bonus it will cause Google to spider your website more often.

The index page of www.popmusic.dk

In a few seconds Jack will be able to deduce the following important information: A: I am on the home page of the website. B: This is the website of Danish producer and engineer Holger Lagerfeldt. C: This is some of the stuff I can get. There is more info in the top navigation or hyperlinks. D: This business looks operational - as long as the activity happened recently. E: There has been recent activity.

Top Navigation Contents should dominate a website. Navigation should be minimized, but it should never be obscure or ambiguous. Navigation should be placed in the top left or top center of the page. The top logo should be visible on all pages and link to the index page. Though selfreferencing page links should be avoided, this is an exception. All other links, including the top navigation, should not self-reference. The current page should be clearly highlighted in the top navigation so Jack always knows where he is.

The top logo should link to the index page from all pages Do not use meta navigation links, i.e. links that scroll to places on the same page. The exception is a “Go to top” link at the bottom of very long pages. However, very long pages should be avoided.

Hypertext When used sparingly, hypertext is an intuitive and search engine friendly way of navigating using linkable text. It is often provided as an alternative to using the top navigation. Only the most important words or short sentences carrying actual information should be hypertext, and not irrelevant phrases such as “click here”. If hypertext leads to an external website or opens an email client, such an action should be clear. Linkable text should have logical colors or underscoring for linkable/visited/active states. There is more information about link behavior later in this article.

Use meaningful hypertext, in this case linking to top navigation pages

Iterative Design and Layout Try removing design elements one at a time. If it works just as well without an element, remove it permanently. Iterative design is a cyclic, incremental process. Reduce the file size of pictures by using web-optimized JPEG compression or GIF for most design elements. Both Jack and search engines prefer websites that load quickly. Use space or color variations to separate information instead of using heavy divider lines or boxes all the time. Use grouping of elements to create coherence. Check that the layout works well on popular mobile devices. This also means avoiding Adobe Flash or having an HTML alternative. Be wary of graphical navigation, since it does not scale well. Consider making a separate design for small mobile devices.

Popmusic.dk on an iPhone is fine, but not perfect due to the small top navigation

Grado has overlapping pictures, navigation and text, making it hard to read and navigate Check that the layout does not break completely using font sizes +1 and +2. Jack may have a high resolution monitor with zoomed text, or bad eyesight. Never use superfluous and visually disturbing elements such as visitor counters, website tracker badges, etc.

Text Layout Like all people, Jack does not read websites - he only scans them for information. Use short segments and lots of subheaders to improve readability. Use bullet lists as an efficient way of reducing unnecessary text. Much like newspaper articles, text on a website should begin with the conclusion and follow up with the details. However, online text should be at least 50% shorter than the printed equivalent. Always use left justified text for improved readability. Remember to check for typos and have a professional proofreader like www.wordsru.com check your website, especially if your native language is not English.

Writing Style Use direct and specific language. I am addressing you directly in this article instead of using indirect wording. Just like with Jack, this allows you to take in the information in a more direct way and it helps me establish a connection to you. I am also writing in the first person. This is an easy way of establishing a sense of trust and personal branding. If you use this method, then make sure your full name is easily found on the website, including on the index page.

If you have a short biography, or CV on your website I recommend that you write it in the third person, which is the traditional method.

Make It Personal You are an integral part of your business. Without you, there is no business. Capitalize on this and see it as a strength, not a weakness. Brand your website with your name, picture and relevant biographical information. It shows that you stand by your business and service with all of your person. Put an email contact link on every page and write your full address and telephone number on the contact page.

Left, top: Your full name should appear on the home page and contact page Left, bottom: Have an email link on all pages as well as a detailed contact page Right: Adding a picture and relevant career information will establish trust and confidence

Link List Maintain a useful and relevant link list or FAQ page. Jack will appreciate it and be more likely to bookmark your website for future reference or recommend your website on forums or social media. The highest scoring landing page of Popmusic.dk is not the index page, but the link page due to the high number of forum referrals and search engine hits.

Link Behavior Do not use pop-up windows and do not open links in new windows unless it is reference material to be used simultaneously with your website. Opening new windows makes standard browser navigation and accurate browser history impossible.

Incoming Links and URLs Incoming links from banner ads, forum signatures and other sites should link directly to the page for the advertised or relevant product in order to capitalize on the click-through with a minimum of friction. Use permanent, easy to read, and logical URLs to maintain incoming traffic from referring websites. It is easier to remember, easier to copy+paste and more search engine friendly.

Navigational Icons Icons can be hard to decipher and should rarely substitute text. The use of national flags for changing the website language is an accepted exception to this rule. An icon with an accompanying text describing only the function of the icon has no practical purpose since the icon could be removed completely instead.

HTML Tags Check out how your website is previewed in various search engines and on social websites. The page title should contain the page name followed by a brief and relevant description of the page contents. The two should be separated by a vertical divider line. Online Mastering | Audio Mastering - CD and Download The title of the index page of Online Mastering.dk Mastering FAQ | Download Mixing Tips PDF. Red Book, ISRC The title of the mastering FAQ page of Online Mastering.dk

The title tag and description tag determine how your website is previewed. This screenshot is from Facebook.com Use no more than 65 characters including spaces, or the title could be cropped. The title will also appear in the top of the browser window and in bookmarks. The description meta tag is important for search engines and websites such as Facebook. It should contain a minimum of 50 characters and a maximum of 160 characters including spaces. Both the title and description tags should use relevant and specific words that appear in the body text of the accompanying page, but do not overthink it.

Images or image links containing words should have an “alt attribute” added, describing the function of the picture or the exact words of the graphics. This is done for image fail and search engine optimization reasons and does not apply to pure design elements. Some browsers do not display the alternative text if the source image is too small.

Downloadable Files Multimedia files and any other downloadable contents such as PDF files should have its file format specified and/or an official and easily recognizable icon attached. This is especially important with mobile devices, since Jack will be quite annoyed by inadvertently downloading a large and potentially unreadable multimedia file.

Add an official icon or specify the file format for multimedia and documents

Background Audio and Sound Effects Never start automatic playback of any type of audio on a webpage. Jack does not like to be startled while surfing for information, so music should always be an active choice. While it can seem counterintuitive, this is especially true if you are designing a website related to audio engineering or music. Automatic playback could interfere with other audio being played back or cause sudden damage to a professional sound system that has been turned up.

Search Box Websites with lots of contents should contain a search function placed in the upper right corner of all pages. The search box should have at least 20 visible characters before scrolling. If your website is very small then skip the search box.

Favicon A Favicon is a 16 x 16 pixel icon in the .ico format which accompanies the URL or title of your website in the browser. Most professional websites use a Favicon. It helps brand your logo and makes it easier for Jack to locate your website on his busy list of bookmarks.

The Favicon appears next to the URL in the address field

Not using a Favicon makes your website look more anonymous

Testimonials and References A satisfied customer is the best advertisement. Ask for permission to put testimonials by satisfied customers on your website. A testimonial has the most impact when it is by a named and pictured person. Link back to your satisfied customerʼs website as a courtesy, and it will also enable Jack to check out the background of your other customers.

Potential customers often rely on the opinions of existing customers

Social Website Integration Integrate social website functions into your website and it will: • • • •

Enable you to communicate in alternative ways with existing and potential customers Enable existing customers to show their enthusiasm for your business Enable friends and family to show their support for your business Enable everybody to share interesting information found on your website

Add “like” and “share” buttons for the most popular social websites such as Facebook and Twitter. For the best results you should be present and active on the social websites you choose to integrate and use them to cross-promote your website.

Social website buttons from Facebook, Twitter, LinkedIn and Google+

Browser Compatibility Check that your website layout and all features work in the major browsers such as Firefox, Safari and Chrome. Also check the compatibility with popular mobile devices.

Inspiration The tips in this article are based on years of studies and research by myself and some very talented people. I have been greatly inspired by the following: The usability philosophies and studies of Jakob Nielsen. Check out his low tech website www.useit.com for some great articles. The book GUI Bloopers 2.0 by Jeff Johnson, available from www.amazon.com The e-book Save The Pixel by Ben Hunt, available from his website: www.savethepixel.org The many articles and guides on www.smashingmagazine.com - a website for professional web designers. The courses and the book Kreativitet der sælger (Creativity That Sells) by Carsten Lynge, available in Danish. The e-book SEO 2.0 by Mikkel deMib, available in Danish from: http://seo.demib.dk/ My wife, who apart from being an excellent cook, has an MA in Communication Studies. My father, who taught me to never give up - and my mother, who always believed in me. Karma.