Looking to improve your search engine rankings? Watch this brief video to learn a few quick tips from Metropolis.
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
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
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
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.
5-Step Web Design Process
February 8th, 2010
I’m constantly asked what my process is for web site design. There’s actually a lot of thought that should go into a new design, before the “design” actually happens. This usually involves a lot of listening to the client, and a bit of research on our own.
Brand Definition
Before starting the design, it is important that everyone on the redesign team understands your brand. Because brands evolve over time, this is also a great opportunity for self rediscovery. Brand is perception. And every outward message and image shapes perception, from your tagline to the person who answers the phone. Once you discover what your brand is the next step is to mold it into what you want it to be.
Target Audiences
An open discussion with your team of managers, marketers, and salespeople will tell us not only who you target, but by what percentages. We are interested in who your target audiences are now, but also who you would like them to be moving forward.
Content
What is a customer looking for when they come to you? Do they know what they’re looking for? Prioritize your content on the site, specifically on the home page. Different coding techniques allow you to present information in a variety of ways. Let the content define the presentation. Create a site map to clearly organize the site’s architecture and content.
Wireframes
The design process begins with a home page content map, most likely in a wireframe form. It will determine the relative importance of each element on the home page, but won’t necessarily determine the look and feel of that page. A visual hierarchy of all elements, including the navigation, will ensure ease of use. Additional wireframe templates should be created as-needed.
Design
Once the wireframes have been approved, the layout and design can commence. The designs should answer all of your requirements in a usable and visually interesting way. The layout, each message and every color, font, and image should be used to engage your audiences so that they follow the appropriate “calls to action.
Additionally, the goal is to have your site reach out and guide a user to the content within the site, and not just be a presentation of options and information. The site’s navigation has to be intuitive and actionable, so that users can easily access the information they need.
The design won’t answer your needs if you don’t take the time to figure out the questions up front. On a recent call with a client, she told me they didn’t know how to determine what should be on the home page. I asked her, “What do your customers ask for over the phone? Give them that on your website.”
Are Your Branding Strategies and Website Design on the Same Page?
May 14th, 2009
Prospects and even current clients judge your website when making a buying decision. It could be their first impression or their information source for your news. If your website doesn’t match your brand and marketing strategy, you may be losing customers.
Put your website to a test to see if it matches your messaging. Here’s how:
- Does your latest sales/marketing brochure design (or even your business card) match your website design? Are the colors the same? Are the fonts the same? How about dots versus dashes between phone numbers? Do they convey a consistent message about your company, product/services?
- Ask someone who is unfamiliar with your company/product to read your homepage and reply with a quick summary of your messaging and how to contact you. Was this person able to easily identify your targeted message, reach you and receive a reply?
- Ask a salesperson or company spokesperson to use your homepage and present it’s content to you as if you know nothing about the company. Does the homepage really match your elevator pitch and have a compelling call-to-action?
- Make a list of 5 adjectives that describe your targeted audience. If your list includes young, hip, trendy, swank… be sure to have contempo images and slick technology like Flash animation.
In summary, everything you put in front of a customer should have a consistent message. Every ad, every brochure, your website, corporate identity elements, etc. An integrated campaign works wonders when designed professionally by a single designer or agency.
Content is king. Keeping your website updated with fresh, high-quality, informative content positions you as an expert in your field. People want to do business with experts. Moreover, keep your information current. An outdated news page makes one wonder if you are still in business. New content also provides protein for search engine spiders.
A website that is designed with all of your marketing activities in mind will reinforce trust in your capabilities, increases sales and build your brand online.
PS. Don’t have time to put your website to the test? I’ll do it for you. Send me your url.
Subscribe to the blog.