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.

Microsoft — You’ve Got My Attention September 22nd, 2010

I was duly impressed this evening. Brett Brewer, the GM of Microsoft Live Labs put on a kick-ass demonstration of Microsoft’s latest web browsing technologies. The event was hosted by MITX, and was held at Fidelity’s Center for Applied Technology (who knew Fidelity even had a center for applied technology?) It was a beautiful venue with environmentally-friendly decor mixed with high-tech gadgets.

Microsoft is bucking the system with Live Labs. Their approach is almost like a web-browsing bill of rights. Brett repeatedly voiced his dissatisfaction with how data is provided online, and how poor online image quality is. The reason for his impatience is because Microsoft has found a way to solve this with three products ready for prime time now; Pivot, Seadragon, and Photosynth.

Pivot lets a user view large quantities of data in a useful and easy to understand way. Pivot can dynamically display data according to any number of criteria, and it does so in real-time, without having to wait for loading bars, or placeholder image blocks. Check out this introductory video.

Seadragon, (or Zoom.It as it is now called) eliminates the need for low-res, crappy quality images on the web. Every image online can be super high-resolution. Sound like a dream come true? It does this by loading only the data needed at each magnification level. See it work on their website. Goodbye 100px thumbnails!

Photosynth digitally stitches separate photos together to create a seamless scene where you can rotate, advance into, or zoom out of. The complex software identifies the hard corners in the photos and them lines them up. It even warps areas that are wrapping around corners. And it displays online in real-time as if it were a pre-made zoom or pan.

See all three of these technologies presented in this demo:

While Microsoft’s Silverlight plugin enables and enhances these tools, some of them can also be incorporated without a plug-in via their API and AJAX. And it does it all in real-time over the Internet. Microsoft is helping us rethink the way we use the Internet and data online in a positive and proactive way. Big brother, now I’m watching you.

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!

Wait — Intel is doing what? October 22nd, 2008

Yes, I’m still on the innovation kick – but this time, with feeling. I just attended the Mobile Internet World in Boston and had the pleasure of listening to Anand Chandrasekher’s keynote. I don’t know what’s more impressive — the underlying messages that wireless technology, personalized online experiences, and innovative usability are the fates of the future, or that Intel is behind this. This clip is about way more than just new technology, which we know Intel is good at. Heck – even Apple uses their chips.

[youtube=http://www.youtube.com/watch?v=HrzeiUvDZog]

This video serves as a tease, or a dare for the telecom companies to get their networks up to the task, while Intel and others beef up the processing power of our handheld devices (note I didn’t say phones.)

Who needs a pushbutton kitchen? I want a bluetooth one. Ready, set….. go.