Navigating Navigation October 27th, 2010

Website navigation needs to be simple, easy to use, and intuitive — you don’t want your viewers to have trouble finding their way around. When navigation is too complex, they often tend to abandon the site altogether, which can result in negative sales or marketing for your brand. A good website navigation design can help keep these visitors on your site.

One of the first steps in website design is deciding on a method of navigation that reinforces and does not distract from your site’s purpose, CTA (call to action), or product. There are numerous types of website navigation to choose from, and it can be difficult to know if you are choosing the right one for your site. In this guide, I’ll cover some of the most popular methods of navigation to make this decision a little easier.

Types of Website Navigation

If your site is on the smaller side… Standard Navigation Bar
If you want to display a lot of navigation information at once… Mega Menu
If you’d like your navigation to be more graphic… jQuery Script Navigation

Standard Navigation Bar

A standard navigation bar is the type of navigation you are probably most familiar with. It’s what most websites use for displaying a small amount of information. A standard navigation usually appears horizontally across a page or vertically in a sidebar. Links usually feature a “roll-over” state, wherein the appearance of a link will change when a visitor holds his or her mouse over it. Sometimes, a drop-down navigation is incorporated to allow related links to be shown alongside (or under) a main link. Standard navigation bars are usually constant across all pages of a site, and allow a visitor to quickly access information without a change in the interface. This is the most “expected” type of navigation; there’s something to be said for immediate understanding.

Pros:
Doesn’t take up much real-estate on a page
Offers a compact use of space

Cons:
Doesn’t allow for extensive navigation
Visitors may become confused or frustrated by drop-down animations
Some drop-down animations may not be cross-browser compatible

Example:
Marathon Physical Therapy
Marathon Physical Therapy

Mega Menu Navigation

A large drop-down/popup menu allows for a huge amount of sub pages to be displayed along with additional information or design elements. Commonly used in retail or with companies with larger service offerings. Mega menus can be designed to act almost as sites-within-sites.

Pros:
Lots of links are shown at once for easy reference
Can include other text or even images
Eliminates need for a third level of navigation

Cons:
Menu can become too big, and can actually be larger than the user’s browser

Example:
Altran Control Solutions
Altran Control Solutions

jQuery Script Navigation

A light-weight, cross-browser alternative to Flash animations, jQuery is a JavaScript library that interacts easily with the code on your site. It allows for images to be added to your navigation without sacrificing load time. jQuery can be used to create many kinds of animated navigations that pair text with images, expanding upon categories or showing multiple subjects of links. To learn more about the wide world of jQuery, read our blog post on the subject.

jQuery is commonly used to create sliding navigations. These can look like embedded slideshows (with moving images and/or text) or can dynamically expand an otherwise standard-looking sidebar navigation (called an accordion slider). An accordion navigation features a group of sub-navigation links that are hidden in a collapsible panel. This sub-navigation is revealed upon roll-over or click of a main navigation link. Usually, only one panel is allowed to open at a time, but this can be modified to allow multiple to open at once.

Pros:
Can add interest and movement to a site
Can give a page a simple and effective “upgrade” with included animation
Keeps information easily accessible, without the need for scrolling

Cons:
Could hide information that should be displayed constantly
Care must be taken to assure cross-browser compatibility

Example:
US Pavement
US Pavement

If your site has a more unique structure (if it has many pages-within-pages, or if you’d like your visitors to be able to find specific information quickly) there are other types of navigation available to you. As always, we can help you decide what type of navigation is right for you, whatever your unique needs may be.

Extreme Marketing through Social Media May 11th, 2009

Social Media Targets AudiencesEveryone knows social media tools like Twitter, Facebook and blogs can drive traffic to your site and help build your brand. And nowadays, every marketing conversation has some component of social media. Last month, my team stepped away from the fodder and physically DID something – face to face.

On April 29th, Metropolis Creative engaged hundreds of marketers through social media by having an Extreme Website Makeover party . This was our most successful marketing effort to date (I founded the company in 1999). We harnessed the power of social media, partnerships, networking and free booze into one brand building and socially engaging campaign that stirred a contagious buzz (before, during and after the event). Nearly 150 marketing professionals came off-line to shake hands and interact by using more than 140 characters.

The campaign served its purpose of strengthening the Metropolis brand, engaging face to face interaction, and also was a helpful experiment in demonstrating how to plan, deliver and measure a social marketing campaign.

Social Media Reach

The campaign’s impact, influence and reach were measured by these tools:

Congrats to American Public Television for being awarded the Website Makeover winner and props co-sponsors SHIFT Communications and RatePoint.

[youtube=http://www.youtube.com/watch?v=wiMvdt4OvKE]
Ready for Extreme Website Makeover 2010! But how can Metropolis make it more extreme…?

An Extreme Website Makeover Event in Boston — Move That Mouse! March 29th, 2009

Extreme Website Makeover BostonSo what’s the connection between a website and a party? Consider your website as your brand ambassador — your host/hostess — smartly dressed but not over flashy. The overall theme is decidedly trendy but not so funky that it will become dated tomorrow. Can people find you (the host) and your location? (Note how many times this week you can’t find a phone # on a website). Then there’s content, your community and the conversation. Plan ahead. Match your theme to your attendees.

Join your peers and industry leaders Wednesday, April 29th from 6:00 – 8:30 PM at 28 Degrees in Boston to see what site deserves an Extreme Website Makeover!

I promise not to shout MOVE THAT MOUSE! But, I will do a before and after presentation to show how the winning website has:

• Branding — serves as a brand ambassador — a party host per say!
• SEO features — keywords and design to attract and wow a crowd
• Call to action — lead capture tools; ways to draw an audience
• A RSVP or more info spot
• Means to get the buzz into the community

These aren’t just nice things to have in a good web site design, they are required. So why do so many web sites fail? Why are so many parties boring? Because web technology, search, and social networking have rapidly changed the overall marketing and community landscape.

Keeping up with the latest technology requires constant effort. For example, when you scroll down a page, you move away from the navigation bar. To solve this usability issue on our blog, we found a nav bar that follows you down the page. Although there are multiple solutions for this, we chose one that has a smooth sliding movement — like a Travolta move (on most current browsers) and stays in a fixed position on older browsers.

“Search” is the hip party term for all things relating to Search Engine Optimization. Making your site searchable goes much deeper than just getting found. With concerted effort and smart design, you can get your company cataloged, linked to, and talked about. Searchability really is key. This can be done by carefully planning the hierarchy of content, and by using keyword-rich typography as a design element. Good design firms optimize the back-end code for search and include unique keywords on page titles. Extraneous code is separated from the main pages to allow for easier indexing of content by search engines. (See some upcoming trends on the Search Engine Journal blog.)

Social Networking blends both technology and search into an additional network of interactivity and community. (Read Bob Cargill’s post: Five Important Questions to Ask Yourself Before You Use Social Media) To start with, social networking helps your company on a brand loyalty level. Customers who “belong” will not only promote your brand, but will protect it as well through blogging, comments on other blogs, and recommendations. Social networking is also viral. So the more people who are in your network, the faster (exponentially) you are able to broadcast your message. And social networking offers opt-in subscription models to ensure that people who want to hear from you never miss your message.

Usability is often overlooked in favor of fitting all the “right” content on the page. Of course you have a lot to say, but you need to show restraint in your message. Say only what you need to in order to get the desired response. Other usability factors include section titles, navigation options, and e-commerce paths. Make it easy and quick for your users. Give them a positive experience so they talk about you and come back for more. Note to self: When is our next party?

Call-to-Action — What are you trying to get your site visitor to do? Buy a product? Download a demo? Sign up for a mailing list? Call you on the phone? Whatever it is, it should be everywhere and prominent. Stay focused on the call-to-action. The purpose of your web site may not actually be to educate the user about your product, but to get them to buy it. Educate only as much as you need to achieve that goal.

You’ll see what I’m talking about on April 29th. One lucky organization will be selected for a homepage redesign, social media PR makeover and email marketing offer. In front of a partying crowd of marketers, social media makers and my peers, I’ll show you a quick before and after presentation. Complete with gratis martinis and tasty apps. Networking and tweeting is optional! Sign up here!