A website’s ease of use can make or break an online experience. Having strong website usability is directly correlated to the success of the site. The more solid the website foundation, the better it can be scaled, too. Usability ease must be planned first, using tools like a website map, an asset inventory list, and wireframes. These tools will help dictate healthy website development or optimization. Think of usability as putting all the pieces of the website puzzle together to make online marketing (and visitors) click.
Mapping out a website map
A website map is a list of pages that will be accessible to website visitors. It also visualizes a hierarchy that will help a designer manage all the criteria that will be part of the website.
Some website maps are as simple as a list of typed pages and subpages in a Word document, whereas other website maps are more visual with boxes. Either way, a map simply maps out the important pages to ensure that website development includes all of the important pages, in the right order. Sometimes pages are broken out by top navigation (the pages seen in the navigation bar at all times), sub-navigation (pages that live under top navigation pages), utilities (like login links that are normally in the top right corner of a website), and footer links (like a privacy policy at the bottom of the page that is not important to show prominently, but must live on the website). People on a website need to easily know where to go, how get back to previously visited pages, and browse the site. A good user experience means that when people visit your website, they know what to do, where to go, and how to navigate back to other pages they previously visited. Following is a simple website map:
Website Map Example: Simple List of Top Navigation and Sub-Navigation for a Small Site
Home
Blog
About
Services
Building the Website
Search engine marketing
Copywriting
Marketing strategy
Training/education
Press/news
Hot off the press
Press releases
Testimonials
Shop
Contact
Member login (in the top right corner)
Privacy policy (in footer)
Site map (text with links of all pages in website footer)
Listing all the pages of a website helps a developer know what they are building and gives an artist a clear idea of what must be included in the navigation, which they design into the mockups of the web pages. Website mapping helps build a consensus if there are multiple decision makers in the design process, ensures all pages that must be included are part of the design/ development, and helps organize how all the pages will fit together (with top navigation and sub-navigation).
The website map is where the architecture of a website begins. Next comes identifying what the pages will have in them (content, technologies, calls to action). Then comes wireframing. Once the blueprint of a website is set, the pieces start to come together.
Usability tip: There is an unspoken usability rule that the logo on a website always clicks through to the home page. Many web users expect that clicking on the logo will guide them back to home, so make sure this functionality exists.
Asset inventory list
Once important website pages are listed and their order is determined, the next step is making sure all the important assets are included where they’ll count. Assets can include anything from previous media coverage, descriptive sales copy, taglines, e-mail sign-up, and demonstration videos. It is very important to know what assets will be part of the website so they are designed into the wireframe (see below) and eventually included in the website.
Making a list of assets creates clarity of all the tools that can be used on the website, ensuring nothing important is left out, especially sales-worthy items. If there is a video that introduces the company or an e-mail list sign-up that must be included in the website, make sure space is allocated for it. This step also helps identify areas that are missing. For example, if there is no one at your organization qualified to write website copy, then you may need to hire a copywriter.
Wonderful wireframing
While there is a lot of software out there to help build a website, the most useful first step in website development may be to fire up a word processor or grab a yellow legal pad to sketch out a blueprint of the layout of each page. The most valuable marketing real estate is what is on your computer screen. Your website’s home page and all subsequent pages need to be architected in a way that puts your best foot forward and makes critical actions visible. The more professional a website design/development company is, the more likely it is that they will use wireframes before they begin the coding of a website.
If you really want to make your web designer’s job easy and have already listed the features you want, along with layout and design elements, you can try to create a preliminary wireframe to visually show what you want and where.
Just as the name implies, a wireframe shows the basic architecture, or “bones,” of a site, minus the skin (see Figure 3.2). There is plenty of free software to help you wireframe (do a Google search for “wireframe tools”).
Things to note to support the wireframing process include:
– Create a menu of navigation items from your website map. Will that navigation be horizontal across the page or vertical down the right or left side?
– Show calls to action (“Learn More”, “Buy Now” ).
– Include an e-mail list opt-in. E-mail management companies provide code that webmasters can embed into the site to capture e-mail sign-ups and feed the names right into your database. If this is an asset that you want included, make sure it is in the wireframe.
– Make a decision about social media widgets. Do you want to have icons for Facebook, Twitter, LinkedIn, and other social media networks on the site?
– If there is an e-commerce component to your website, have this designed into the wireframe.
Note: The wireframe will not normally look pretty. Think of it as a digital napkin sketch, with just enough detail to get the placement ideas across.
Color is not included in a wireframe. The reason for this is to keep the focus on architecture and components, not get into a conversation over how light or dark the blue in an image should be. A wireframe is a conversation starter to make sure that before design and coding begin, all of the important pieces of a web puzzle are included. You or your web designer and programmer are virtually guaranteed to change it. A wireframe helps focus structure, organization, and placement.
Decide which features must be present at launch. If some items need to be put into a Phase Two or Three, note this. Don’t be afraid to think big! It’s better to design a website with room to grow, rather than having to redesign it every time a new function is added – this is what scalability is all about. For example, even if starting a blog isn’t in today’s game plan, it might be a good idea to leave space in the layout to include it later.
For strong usability, think about the things you want this website to accomplish. Here are some sample questions:
– What do I want my first-time visitors to do first?
– What do I want my repeat visitors to do first?
– How do I inspire them to keep coming back?
– What is my primary marketing goal (leads signups, branding, positioning, etc.)?
Usability constraints for optimal creativity and results
To help the creative process as you work to create ease in which visitors use your website, imagine your site appearing on a mobile device to determine your top three usability musts. To employ usability best practices, ask yourself what the website would look like on an iPhone. What has to be seen? Constraints, whether they involve a haiku, a screenplay, or the challenge of cramming a full website onto a tiny screen, force people to be creative. Given the limitations of a 3.5-inch screen, what are the most important information points, features, or functionality that must be included? Whatever these features turn out to be, they must be very visible on the website.
Place calls to action above the fold
All opening information must be visible on the page with no scrolling needed. The top right corner of a site frequently emerges in tests as the best place for a call to action. Amazon uses the rotating box in the top center of their site to showcase products, which also works well as an attention-getter. By enhancing your website with obvious calls to action and intuitive navigation, you will improve user experience. Calls to action can include:
– Making a phone call
– Encouraging visitors to join an e-mail list
– Promoting a discount deal (the fewer clicks needed to purchase, the better)
– Filling out a contact form
– Don’t Get Cute
It is not helpful to devise new lingo for standard web sections (for instance, instead of “Contact Us,” you label the link “Smoke Signals” or “Hailing Frequencies”). Such moves will make site navigation difficult and alienate most users. Speak to them in an easy-to-comprehend way.
Keep usability strong: Plan for testing
Before a web design concept moves into full coding, it might be wise to test any proposed website basics on a small subset of clients or prospective customers first. Tracked web results will validate or nullify some of the initial creative designs. There can be a huge difference between what people say and what they do, so make sure data is from live user web tracking, not from a chatty, opinionated focus group.
Whether your website is launching from the ground up or making simple optimizations, plan to include postlaunch usability testing. There are a number of free tools to help ensure the best user experience. Below are a couple of them:
– HubSpot’s Website Grader (http://websitegrader.com/) will produce a free website grade report that gives an overall score based on items like how easy your website language is, the use of images on your website, and whether or not you have a blog on the site. Website Grader even allows you to factor in competitive sites to see how well your site ranks against theirs. This report can help give you user experience optimization ideas.
– Google Analytics (http://www.google.com/analytics/) is a free website statistics service that can be built into the website from day one to track traffic, where people click, how they are funneled through the sales process, and more. Google Analytics also has a Site Overlay tool that “overlays” the percentage of clicks per page of the site to see the top places people click. With the Site Overlay tool, you can easily find ways to improve user experience, simply by making top-clicked areas higher or more visible to increase actions.
Software tools will give you ideas on how to make continual improvements on user-focused design. You can use these tools before a redesign to help map out optimizations or after web work to track and continually improve the site.
Remember that the best designers of a website are the users. Sometimes the best usability measurement comes in showing your website to someone who has not used it before but is in your target market. Ask this person to take a series of steps (buy a product, navigate your site, etc.), and then sit back and watch. You can learn a lot by silently observing people use your site. Whether you use technology or live usability studies, listen to what you are told so you can do better. A customer who calls to ask for information that’s on your site has just handed you a nugget of information gold for free. Whatever they need isn’t easily found, and needs to be more prominent.
Other Usability Notes
– Remember KISS: Keep It Simple, Silly—no welcome letters or music.
– Be conventional, because conventions work. Consistency is key.
– Cut the clutter. Busy overwhelms visitors.
– Design the website to move vertically, not horizontally.
– Create a visual hierarchy. This is like having a North Star that continually serves as a high-level guide to get visitors to where they want to go.
– Design your site so that every page is self-evident (where am I and why am I here?).
– Make navigation easy. If something is hard to use, visitors won’t use it.
– Make clickable items obviously clickable. Designers can include buttons that look raised to create this feel.
– Try breadcrumbs. This is a usability design/development technique that leaves “crumbs” at the top of the page that allow visitors to easily find their way back. Example: Home > Snowboard > Snowboards > Beginner-Intermediate > Women’s
– Use color. Green means “go,” which is the best color for your sign-up or buy button. Red can also be a good attention-getter if used sparingly (it can also be seen as a warning color).
