Great User Experience Is By Design: A III Part Series
Part II: Website Blueprint
By Amy Harvey
Principal Software Engineer
IDD, Inc.Â
www.iddnet.com
Previously, we began to discuss the process of designing a great user experience for your websites visitors, which you can read here. This blog will cover the most important steps in the process and key questions you should be asking yourself during each step. Step 1 covered the audience analysis and the importance of identifying your target audience. Step 2 discussed information architecture and the methods to which you should organize your content on your website. In this blog we will be discussing Steps 3-5.
 Navigation and Functional Design
Have you designed your menus, searches, and other navigational elements so that users can get to the information they need, quickly and efficiently?
This step in the process is often done using âwireframesâ â non-graphical or âstick figureâ representations of your vision for the site. (I personally happen to love this step, because it requires no real graphic skills; if you can draw a box, you can make a wireframe!) Wireframes can be hand drawn or created electronically using simple drawing tools within Word, Photoshop, or other software. The tool you use (or, frankly, how âfancyâ it looks at this stage in the game) is not a game-changer; whatâs important is that you are taking the time to draw out your functional concepts before you start worrying about how itâs really going to look. Â
Chicken or Egg? (Home Page or Sub Page?)
It can be hard to figure out where to start with your wireframes. Some people start out with a clear idea of how the siteâs home page is going to be organized, while others prefer to focus first on one or more of the sub-pages where the âmeat and potatoesâ of the content will live. If you've done your homework with the information architecture (see step 2), you should at the very least be able to sketch out a basic âframeworkâ with some top-level menu items to start â then you can assess, refine, and move on to the next level of detail.Â
 QUICK TIP: When roughing out the design at this level, a good initial target might be 3-5 well-thought-out sketches or wireframes showing how users will access the most important pages of your site.
When designing your siteâs navigation, itâs important to make sure that all navigational elements are consistently located on every single page of the site. Why is that so important? Because many of your visitors will come to your website through search engines â they may âlandâ on the site through a deeply nested content page. Many of your visitors might never even visit the home page! So itâs important that they be able to quickly orient themselves on the site and identify all available options and routes, no matter which âdoorâ they happen to have come in through.Â
Itâs also generally a good idea to stick with some of the âtried-and-trueâ conventions for positioning elements that will be common to every page of the site. Some of the most widely used navigational conventions include:
Company logo and tagline â in the top left, with hyperlink back to the siteâs home page.
 Search box â typically found in the top right with âsearchâ button located directly to the right of the text input field.
 Main Menu navigation â usually positioned horizontally along the top of the website, with pull-down submenus and/or secondary navigation located along the left side of the screen.
 Footer Menu â text links at the very bottom of the website that serve as a âmini site mapâ; this area also often includes a copyright statement and links to legal information or policies.
 While it might seem a bit boring to just copy what everyone else is doing, there really is a reason why so many websites use these conventions: because they work! Web users are comfortable with them, and most people have come to expect websites to follow these basic standards. Yes, trends and conventions do change over time, but those changes tend to happen gradually and are usually driven by the âbig playersâ in the industry (think: Apple, Google, and Microsoft). So unless you have a really good reason to deviate from the norm, just make it easy on yourself (and your users!) by putting these elements where people are naturally going to expect to find them.
So what if youâre one of those âcreativeâ types whoâs feeling bummed right about now because I've forbidden you from getting too creative with your labels and navigation? Donât worry! When you get to the graphical design and content development, youâll have lots of opportunities to make the site âuniquely yoursâ in other ways. And youâll come to realize that when the function is seamless for your end users, they can focus on your content â which, after all, is what you really want!
7 is the âMagic Numberâ for Menus
When designing menus, a good rule of thumb is to limit all menus to no longer than seven items long. Why seven? Because research has shown that the average person can only keep about seven items in working memory at any given time. Making your menus longer than this will reduce usersâ ability to distinguish and decide between items. Whether youâre trying to convert your visitors into buyers or believers, the last thing you want to do is overwhelm them with too many choices. If you must create longer menus, find a way to sub-divide or âchunkâ them into related groupings (limiting each group to no more than 7 items, of course!) â then create a visual separation between the groups so that visitors can process the larger categories of options first, then make an appropriate selection from the list that looks like the best match for their needs.
Is the design of your website visually pleasing to your target audience? Does it convey the right tone? Is it consistent with your overall branding goals?
The graphical design is the part that most of us love to think and dream about when planning a website, because itâs the step at which we can really begin to visualize and get excited about how the site will look and feel. But remember that the graphical design must first and foremost support the information architecture and functional / navigational design â which, if you've done your homework correctly, has been drafted earlier in the process (see steps 2 and 3). A website can be stunningly beautiful but totally unusable if it doesn't support the needed functions or speak to the target audience. And jumping right into the graphical design before you've done sufficient planning in the informational and functional areas can cause a lot of wasted time in development.
The graphical design process should include appropriate selection and creation of logos and taglines, fonts, colors, backgrounds, images, and (of course) layout. Keep in mind that colors, fonts, and images can be strategically selected to help convey different messages or even evoke certain feelings from your users. An experienced web graphic designer will know all of these âtricksâ and can help you come up with a web design that speaks to your brand and attracts the user you want.
Are the key text elements on your website conveying your most important messages and goals? Are you speaking directly to your target audience in a language they are comfortable with and understand?
Write at the appropriate level for your audience. Research has shown that writing in simple, easy-to-understand language â builds trust among your users, even those who are highly educated. Keeping the language short, clear, and simple will help visitors understand your message more quickly and easily.
Are you including the right âcalls to actionâ on every page to help users know what the next logical step in the process is?Â
QUICK TIP: The âcall to actionâ (also known as the CTA) isnât always âbuy nowâ â even if you are ultimately trying to sell something to your visitors. Instead, think about how you can lead your users along the âpath to conversionâ in baby steps.Â
Asking them to make the commitment to âbuyâ (or even give contact information) too early in that process can be a turnoff. So maybe once you've captured their interest or attention, youâll need to offer them opportunity to âlearn moreâ and âsee optionsâ before asking them to make the commitment to âbuy.â
Have questions about designing a successful user experience?
 What are your most successful CTA blurbs?