Graphique Communications Design

10. Being a Messy Marvin
Always be selective when it comes to the content on your site. Be organized and logical in the manner in which you present the information. Try not to force feed too many details on your homepage. Use a grid to lay items out and stick to that grid on all pages.

9. Requiring GPS to Navigate Your Site
Keep navigation simple, direct and logical as your visitors move from one page to the next. The general rule is to always keep your navigation in the same place and on bigger sites only change the side navigation from section to section.

8. Forcing Customers to “Do it Your Way”
Make the route from first click to sale easy and unencumbered. Is it really necessary for them to have to set up an account prior to making a purchase? Put yourself in the place of the site shopper or user.

7. Avoiding Change and Being Boring
No one wants to see the same thing over and over and over again. Create new ways to engage your customers/users while developing exciting and fresh new ways to keep their attention. And make sure to let your visitors know when you have new content. You can accomplish this through email, social media, RSS feeds, etc.

6. Looking Like the Guy Down the Street
It’s important to know what your competition is doing and how they are ‘dressing’, but you don’t want to be exactly the same. Be sure something about your site makes you stand out and differentiates you from the rest of the pack.

5. It All Looks Like Fine Print
Understand the needs of your customers and tailor your site accordingly. Make it easy to read (large enough type) or less jarring (softer, subtler color palette). Do your homework to get it right. If your target audience tends to be retirees, shoot for larger type. You get the idea.

4. Don’t Forget About the Metrics
Take advantage of all the analytic tools that are available. If you are investing in a new SEO campaign, review Google Analytics to understand where your traffic is coming from and what words they are using to find you.

3. Only Designing for One Browser
With all the various internet browsers that are out there, it is critical that you verify that your site functions properly across all of them. What looks great on Internet Explorer 8.0 may not be so hot on Firefox, Chrome and Safari. Those three browsers together account for more than 60% of the browsers used today.

2. Not Securing Your Domain and a Few Variations Just in Case
Don’t let a competitor steal some of your traffic because you didn’t secure your domain and several variations (ie. .net, .info or .org). It’s inexpensive to buy several different domains and redirect traffic to your preferred URL.

1. Not Getting Help from Someone who ‘Knows’
You’re the expert on your product or service, not on website development or search engine optimization. Enlist the help of a person or team that ‘does this for a living’. In the end, you will get much better ROI in a much shorter time frame.

Comments

A new twist on an old element of website navigation.

How well a website is navigated by the end-user is ultimately the truest test of its success. In my day-to-day travels around the internet I find too often you get some pretty horrible uses of drop-down menus. Mistakenly, web designers often feel the only way to provide navigation to a website with ‘deep content’ is to have drop-down menus that often go 2-3 levels deep. This may have been a by-product of slow, page-load times due to low bandwidth. End-users didn’t have the patience to wait for a page to load only to find out what they want is still a few clicks away. Now that broadband use is so prevalent and search sites like Google and Bing are often the fastest way to get direct access to content, web designers are using the drop-down less and less.

If you study modern website navigation you’ll find that many sites still need this navigation element, they just use it differently. Amazon uses it sparingly to allow you to ‘browse’ if needed, but a seasoned Amazon shopper will go straight to the search box. Other forward thinking web designers have taken a new approach, using what many in the industry have dubbed the ‘Mega Drop-Down’. This new approach provides more navigation options for the users, and options are  often organized in groups to emphasize connections among items. Like it’s predecessor, the aim of the mega drop-down is to provide a tool for digging into the sections of the website in a clever and tidy way.

A simple example can be found on the website developed for Aviary.com, an online software company. The menu here creates a graphical way for users to differentiate several online product offerings. For me, it promotes discovery as well.

Last years redesign of the White House website also gave us a good use of the mega drop-down. A very simple execution that gives the website a more modern feel and lets the public find information on what is ultimately a very content-rich website.

A more complex example can be found at the Porsche North America website. You can see in the example below that the web designer has created a useful navigation tool for the entire Porsche line of cars. It becomes a way to see the entire structure at a glance without ever having to click to a new page.

One of the the most advanced uses of the mega drop-down can be found at the Phillips USA website. Considering the diversity of their product line, a hybrid-style menu like this was a genius move and very forward thinking in its application. While it does use Flash to achieve this effect, it manages to keep the user engaged with simple, icon-driven menus to drive you through the product lines quickly. Below, you can see the home page before you click and then the menu that comes up after.

So the drop-down menu is not dead. Web designers have found situational uses for it that create functionality for delving into deep website content. Drop-down menus do in fact organize content into small, uncluttered elements, but if not done correctly, they can be just as bad as a messy layout. Use them wisely and your customers will thank you for it!

There are a few more examples listed below to further illustrate best practices in drop-down menu design. Feel free to provide your own example links in the comments.

Food Network - http://www.foodnetwork.com
Action Envelope - http://www.actionenvelope.com
Samsung USA - http://www.samsung.com/us/
Boxee TV - http://www.boxee.tv

Comments