We have all visited great websites, and we have all visited terrible websites, and have a good sense to what users are expecting in delivering a terrific user experience. The primary design decisions are centered around the site's: (1) look and feel; (2) competition; (3) usability; (4) site navigation; (5) headers and footers; (6) home page; (7) interior page layout; (8) content/SEO goals; (9) templates; and (10) social elements. We will discuss best practices for each below.
Look and Feel. Here, we are talking about the graphics, colors and mood your site creates. Such look and feel should be consistent with your brand. So, the color scheme should match your logo and other marketing materials. And, use graphics that are most consistent with your brand image and desired demographics (e.g., photos of teens, if you are targeting teens). In addition, I am always of a fan of keep a site clean and uncluttered, doing more with less. And, keep in mind, B2C sites are designed differently than B2B sites. And, even within B2C, best practices for e-commerce sites are different than content sites or social networking sites. So, plan accordingly for your industry.
Competition. You can't launch any website without first studying the key competitors in the marketplace to know what you are up against. So, as an example, if you are launching an online video portal website, what are users used to seeing from sites like YouTube, Hulu, Netflix and Vimeo. And, not only offering the core set of features and functionalities that these sites offer, but how are you improving on such experience to distance yourself from the competition, and emphasizing such key differentiators within your design.
Usability. If a user can't easily and quickly find what they are looking for from a website, they typically get frustrated and move on to the next site. To me, this element is the most important element in any website design. As an example, Craig's List is not a pretty website by any means, but at least it is easy to use, which satisfies the needs of millions of users. So, make sure your users can find what they are looking for easily and quickly in your website design, within one click from the home page, where possible.
Navigation. There are major navigation buttons, typically at the top of the page, including deep links therefrom as you scroll over the tab. And, there are sub-navigation buttons, typically below major navigation buttons. The major navigation buttons should most simply summarize the major content areas of your website. For example, at iExplore, we had a "Trip Finder" tab to find trips, a "Guides" tab to research destinations, a "Community" tab to engage with other travelers, and a "Deals" tab for special travel offers. These were the four primary areas of our website. In addition, we had deep links therefrom, to assist with one click navigation from our home page. As, an example, when you scrolled over the "Trip Finder" major navigation tab, the user could easily and quickly drill down to "Africa Trips", "Europe Trips", and "Asia Trips". Sub-navigation tabs should be used for other important areas of your site, typically determined by key marketing objectives of the company. These could include tabs like "Our Newsletter", "Our Blog", "Special Offers" or other important pages you think are important for your users to know about.
Beyond the content areas of your site, you need to incorporate other key elements into your major or sub navigation tabs, including "Contact Us" and "About Us" as two most expected tabs from any website. I am also a fan of using a wayfinder bar, so the client knows where they are within the navigation of a site, from any page therein (e.g., Home > Trip Finder > Asia Trips > China Trips). And, in all cases make sure your site includes a Site Map page, for users that need help navigating the site (and for the additional SEO benefits site maps provide).
Header/Footer. The header is the top of every page on your website, and typically includes your main navigation buttons. This is very valuable real estate, above the fold (within initial screen view) from any page a user is looking at. Sometimes web publishers use areas of their header to publish advertising, or add website analytics tracking codes. The key with your header is understanding that not all users enter your website from the home page. Most likely, users are entering your site from an interior page indexed by Google. So, use your header for the most important elements of your site that you want all users to know about, as it is often their first introduction to your site. The footer is the bottom of every page on your website, and typically includes business or legal related links like "About Us", "Contact Us", "News", "Terms & Conditions", and "Privacy Policy" (which should be clearly stated on all websites). So, think through which elements are most important for your headers (above the fold) and which elements are most important for your footers (below the fold).
Home Page. A user needs to understand your business as quickly as possible from your home page. To me, that typically includes a simple one-sentence description of your business front and center. And, more often these days, that includes a prominently featured brand video for your business. So, don't over clutter your home page with a lot of unnecessary clutter. Make sure your corporate messaging is clearly understandable within the first five seconds after a user lands on your website. In addition, whatever core site functionaly that drives revenues for your business should also be front and center. As an example, on Expedia's website, their Air/Car/Hotel Search Engine is prominently featured, as it is the core of their business.
Interior Page Layout. As for interior page layout, there a lot of ways to design a page. You could have one column, two columns or three columns, depending on your needs. The number of columns is typically driven by business needs (e.g., showing related links to the page you are on) and advertising needs (e.g., making room for advertisements to be published on your site). As an example, on iExplore's "Guide" page for Egypt, we would have a left column including a table of contents for the Guide (e.g., When to Go, What to See, Geography, Climate, Culture, Photos, Videos), and our right column would publish advertising. Figure out the needs of your business, and plan your interior page design accordingly.
Content/SEO Goals. Website content can only be consumed in small amounts. So, I recommend only a few paragraphs of content on each page, above the fold where you can. Users simply won't read long pages of dense content online, as they would in a printed newspaper or book. So, keep your content messaging short and sweet. And, if you need lots of content for whatever reason, break it into digestible amounts on separate pages. But, more importantly, content is king for getting you indexed in the search engines. The more content pages you can publish, the better it is for getting lots of pages into Google's index and driving free traffic for your website. So, as part of this, make sure you put as much attention into the code of your page (e.g,. title tags, photos tags, content density of keywords, metatags), as you do into the content itself.
Templates. Design your website in a way that it can easily be re-skinned for third parties. For example, iExplore not only ran their own website, they also ran the adventure travel websites for Expedia, Travelocity, National Geographic, Discovery Channel, Lonely Planet, Fodors and Frommers. Each of these strategic affiliates required iExplore to publish such sites in their respective look and feels, and with their headers and footers, for a seemless user experience. So, if affiliates could be important to your marketing efforts, make sure your website is built in a way that it can easily be re-skinned and templated per the needs of your partners.
Social Elements. Socially-driven functionality has become mandatory in any site design these days. This not only includes links to your blog, Twitter page and Facebook page, this includes incorporating the ability for social sharing within the actual user experience. So, when a user sees something they think their friends will like, then can easily email it, or post it to their own Twitter and Facebook pages, to get that viral buzz growing for your business. And, more sites these days are including the "Feedback" buttons on the left side of all pages, to get real time feedback from their users, to help improve their user experience.
My recommendation is to engage a website designer that has a proven track record of success and is up to speed on all the current user expectations. Make sure to look at their portfolio of sites, to see if you think they are nicely designed. And, be sure to ask to speak to their references, to see how the design process went, including listening to guidance, providing valuable input, hitting desired timeline and hitting desired budget. There are many good design firms out there, including Doejo here in Chicago. But, let's be clear: not all designers are created equal. You have to do your home work to save a lot of unnecessary heartache and wasted redesign expenses down the road.
But, more important than anything is doing a lot of focus groups and consumer usability testing early in your design process, to make sure users "get it" and understand how to use your site, as intended. I will tackle usability testing in my next lesson.
For future posts, please follow me at: www.twitter.com/georgedeeb
Popular (All Time)
Popular (30) Days
Tags
