Day 5: The Journey of a Thousand Miles
Over the past four days, we've taken a good look at a web design trend that continues to be hot. There are still many web sites out there that could easily take advantage of this IA/design element. Mega menus aren't particularly complex; they just require some planning, consideration of users and their habits, and careful testing.
Throughout this, we've discussed mega menus mostly from an information architecture and visual design perspective. This was done on purpose. While it may seem to some that the hard part is programming the mega menu and implementing it on the web site, that's actually fairly straightforward. It's not easy, per se, but it's not complex. The complexity comes in the planning and design stages.
The next step is to implement the code, which is going to use JavaScript. Specifically, all of this is much easier to do with jQuery, a JavaScript library. There are a lot of jQuery packages that will help programmers implement their designs, and in my opinion, there's absolutely no sense in reinventing the wheel. (I'd rather spend the time going on to create new wheels, or maybe to drive in the car I've made out of all the wheels I've implemented.) I tend to use Joel Birch's superfish, but there are a lot out there, as 1stwebdesigner has taken the time to enumerate. While implementing the code, just make sure to stick to the plan and, if there are any changes to be made, try to go back to the planning stage and rework the diagrams rather than just continue to modify the code. Often reworked code can begin to produce unexpected behaviors, which increases the cost of implementation due to testing and debugging.
2011 looks to be an exciting time for mega menus. As mega menus become more popular, designers will be pushing the boundaries. As long as they stay within the guiding principle -- increase usability by providing visually intuitive ways to display organized content -- then the results should be interesting and educational. Personally, I can't wait to see what people come up with.
Friday, December 31, 2010
Thursday, December 30, 2010
Five Things About ... Mega Menus (Day 4)
Day 4: Learning By Example ... of What Not to Do
There's a lot to be learned from sites that incorporate the design elements you need. Good examples teach you how others have addressed them, but bad examples can often teach you more by showing you the traps in which designers can fall. Let's look at four examples and talk about some ways they can be improved.
Before we start, I want to point out that these are not horrible examples of mega menus. I deliberately looked for things that were off by one or two points in order to keep this blog post focused.
Epicurious
Site: http://www.epicurious.com/
Description: The addition of the content on the right hand side is a way to really focus users on a particular concept (Epicurious is obviously really heavily promoting their healthy articles). While it's not strictly within the guidelines of well-designed mega menus, it's a good example of bending the rules to accomplish a particular purpose. Ad inventory has increasingly found its way into the mega menu, but if done judiciously and thoughtfully, it can work. In this case, it does.
What is actually the issue here is the lack of headers in the left column. All of the links are of equal weight, which provides no tangible benefit to users. Mega menus should provide to users short cuts to understanding the site. This one doesn't.
Fix: Utilize more space and add headers here. Take a look at the site metrics, figure out where users typically go, and then make those sections easy to find and easy to navigate to. Not all pages are created equal, so don't make your users have to deduce the correct choice. Show them.
Juniper Networks
Site: http://www.juniper.net/
Description: The content is fine, there's just too much of it. A mega menu must be quick and easy to browse. Users need to visually process the information without spending a lot of time reading prose. They're not focusing on a specific topic that Juniper wants to emphasize (as with the Epicurious site), and those links are intended to remain there. The descriptions add no inherent value, so they're not necessary. Also, mega menus, by nature, appear when users move the mouse over a link. When users move the mouse away, the mega menus disappear. There is no functional need for the close button. And remember, if it doesn't add value, get rid of it!
Fix: It's simple, really. Just remove the descriptions (including the Learn More link), create regular links for those four items, put them under a category heading, and remove the close button.
Accenture
Site: http://www.accenture.com/
Description: Without headers, users can't easily compartmentalize this list. It could just as easily be a simple drop down menu, except Accenture then added "Client Successes" and "Overview of all Industries" at the bottom. There's no hierarchy here, and users are left to simply browse, thereby minimizing the increased usability that a properly designed mega menu is supposed to provide.
Fix: I'd start over from the beginning and go through the content planning process again. Get the IA diagram out and start creating smart, user-focused categories for these links to fall into. Once that's created, add visual design elements designed to emphasize the hierarchy.
Oracle
Site: http://www.oracle.com/
Description: My major concern with Oracle's mega menu is their use of font qualities. It seems that there are headers there because the text is bolded and a point or two larger than the second-level text. But there is a series of links at the top of the right column that are either links masquerading as headers or headers with no sub-level content. This speaks to a structure that's not completely consistent, which is reflected in the visual design.
Fix: They're clearly links to major section, but without knowing their complete information architecture, the easiest fix would be to create a couple of categories for those links and move them under those headers.
There's a lot to be learned from sites that incorporate the design elements you need. Good examples teach you how others have addressed them, but bad examples can often teach you more by showing you the traps in which designers can fall. Let's look at four examples and talk about some ways they can be improved.
Before we start, I want to point out that these are not horrible examples of mega menus. I deliberately looked for things that were off by one or two points in order to keep this blog post focused.
Epicurious
Site: http://www.epicurious.com/
Description: The addition of the content on the right hand side is a way to really focus users on a particular concept (Epicurious is obviously really heavily promoting their healthy articles). While it's not strictly within the guidelines of well-designed mega menus, it's a good example of bending the rules to accomplish a particular purpose. Ad inventory has increasingly found its way into the mega menu, but if done judiciously and thoughtfully, it can work. In this case, it does.
What is actually the issue here is the lack of headers in the left column. All of the links are of equal weight, which provides no tangible benefit to users. Mega menus should provide to users short cuts to understanding the site. This one doesn't.
Fix: Utilize more space and add headers here. Take a look at the site metrics, figure out where users typically go, and then make those sections easy to find and easy to navigate to. Not all pages are created equal, so don't make your users have to deduce the correct choice. Show them.
Juniper Networks
Site: http://www.juniper.net/
Description: The content is fine, there's just too much of it. A mega menu must be quick and easy to browse. Users need to visually process the information without spending a lot of time reading prose. They're not focusing on a specific topic that Juniper wants to emphasize (as with the Epicurious site), and those links are intended to remain there. The descriptions add no inherent value, so they're not necessary. Also, mega menus, by nature, appear when users move the mouse over a link. When users move the mouse away, the mega menus disappear. There is no functional need for the close button. And remember, if it doesn't add value, get rid of it!
Fix: It's simple, really. Just remove the descriptions (including the Learn More link), create regular links for those four items, put them under a category heading, and remove the close button.
Accenture
Site: http://www.accenture.com/
Description: Without headers, users can't easily compartmentalize this list. It could just as easily be a simple drop down menu, except Accenture then added "Client Successes" and "Overview of all Industries" at the bottom. There's no hierarchy here, and users are left to simply browse, thereby minimizing the increased usability that a properly designed mega menu is supposed to provide.
Fix: I'd start over from the beginning and go through the content planning process again. Get the IA diagram out and start creating smart, user-focused categories for these links to fall into. Once that's created, add visual design elements designed to emphasize the hierarchy.
Oracle
Site: http://www.oracle.com/
Description: My major concern with Oracle's mega menu is their use of font qualities. It seems that there are headers there because the text is bolded and a point or two larger than the second-level text. But there is a series of links at the top of the right column that are either links masquerading as headers or headers with no sub-level content. This speaks to a structure that's not completely consistent, which is reflected in the visual design.
Fix: They're clearly links to major section, but without knowing their complete information architecture, the easiest fix would be to create a couple of categories for those links and move them under those headers.
Monday, December 27, 2010
Five Things About ... Mega Menus (Day 3)
Day 3: The Importance of Visual Elements
One of the most interesting things I learned in my Humans, Computers, and Cognition class is that visual pre-processing is a powerful cognitive tool. When we see something, our brains are already processing it without our conscious awareness, whether it be drawing likenesses or comparing differences to things we already know, gathering data based on patterns, looking for threats, and so on. Within milliseconds, our subconscious minds have already made some very basic deductions about what we've seen.
Savvy designers can use this tendency to better inform their work. The best designs are truly "intuitive", which means that someone has presented the data in such a way that end-users quickly and easily make the deductions that the designer intends for them to make. For instance, by using an orange background to indicate action-oriented buttons on a web site, a designer is training end-users to understand that if they want to do something, they should quickly (often subconsciously) scan the web page for anything orange. Another example is a tag cloud. The most popular tags are in a larger font size, making it very easy for end-users to find them.
All of these concepts are present when thinking about mega menus.
Here are some guidelines to think about as you consider which visual elements you need to include in your mega menu:
Color theory is far too broad a topic to go into much detail here, but it's also a significant component to effective visual elements, so we have to address some part of it. The principle behind color theory is that, particular to a culture, colors have meaning and can impact users' perceptions. Red is associated with passion, whether it's love or hate. Blue is associated with calmness. Knowing what colors mean allows a designer the ability to influence the users' emotional state and preconceived notions, and we can make that work for us in mega menus.
The Use of Fonts
The heavy use of typography to convey meaning waxes and wanes in popularity, but it's currently riding an all-time high in the world of web design. Typography can be used to draw attention to specific items, to highlight important concepts, and to organize otherwise complex collections of links. In essence, all the rules about typography that influence a web site also applies to the mega menu. Keep things simple, keep them readable, and understand why you've chosen a particular font, size, or style.
The Use of Headers
Headers keep content visually organized by implying a hierarchy. Users must be able to quickly and easily understand what defines a particular category. These labels are the first place that users scan to determine whether a grouping contains the type of content for which they're looking. Headers are often larger than the content links under them, and headers of the same size are readily understood to be peers within the hierarchy.
As labels, headers must be descriptive without being wordy. They are the one word or short phrase description of an entire category, and it's important to be precise. If a category contains cars, motorcycles, and trucks, then the category should be labeled "vehicles". It's one word, it's descriptive, and it's easily understood. Which brings up a good point: be careful about being too clever with headers. An unhelpful label reduces the usability of a mega menu. No user wants to struggle to decrypt a pun or understand industry-specific slang, and no web site owner should want to alienate any potential visitors.
Finally, from a code perspective, consider the judicial use of HTML header tags. Not only do they keep content orderly, they're effective for use in search engines.
The Use of Graphics
The use of graphics is one of the most powerful and easiest to abuse visual element available to the mega menu. If properly applied, they can add value. Graphics can add visual interest, can help users understand the point or purpose of the content, and can draw the eye and thereby highlight important content. However, if improperly applied, large graphics can add too much size to the mega menu, thereby making it slow and unwieldy; inaccurate or misleading graphics can give the wrong impression of the content; and too many graphics can create clutter.
Unless your web site focused on something visually distinctive, it's most often best not to use graphics. Let users do quick scans of the content, and focus on a quick, responsive mega menu. But the concept is there if you should need it. Just use caution.
The Use of Space
Space is an interesting concept. It covers several tactical decisions you can make, so this section is much more of a smorgasbord of design elements.
Space, while important, is often ignored because web sites want to convey as much information as possible all the time. It's important to struggle against that all too natural instinct. Too much content creates a sense of clutter and can overwhelm users, making them less likely to stay at the site. Users have a very short attention span, and if they can't find what they want immediately, they will move on. Content that they actually do want to see may be overlooked or ignored because there's just too much going on. Negative space -- space with no content or art -- can help create a sense of orderliness that encourages users to stay and look for what they need.
We're most accustomed to reading lists of things on a web page in columns, not rows. When creating your mega menu, try to stick with links arranged vertically. Of course, this sometimes means that a link will be too long for the column it's in and will wrap to the next line. Visually distinguish that those two lines belong together by either using bullet points or further indenting the second line.
And another point: avoid a lot of prose. The point of a mega menu is to provide quick and easy ways to find content. Forcing users to read a lot of content defeats the purpose.
Design, Test, Refine
Finally, the key to good design is to realize that no single person can create something in a vacuum that is usable by everyone. Usability is as much an individual process as well as a group trend. The thoughtful designer will put together a proposed mega menu and then test, test, test! Mega menus must be useful; therefore, test it with a series of users and let them tell you whether it is. If your web site has the budget for it, conduct usability testing with actual users. If you don't have a budget for it, don't skip the testing, just ask people in different departments to take on the role of an actual user. Either way, designers must ask for and receive feedback (positive or negative) from users and then refine their designs with that feedback in mind in order to ensure that the mega menu is usable.
All set? Great. Tomorrow, we're going to look at how to do it wrong. There's a lot to be gained by learning from others' mistakes.
One of the most interesting things I learned in my Humans, Computers, and Cognition class is that visual pre-processing is a powerful cognitive tool. When we see something, our brains are already processing it without our conscious awareness, whether it be drawing likenesses or comparing differences to things we already know, gathering data based on patterns, looking for threats, and so on. Within milliseconds, our subconscious minds have already made some very basic deductions about what we've seen.
Savvy designers can use this tendency to better inform their work. The best designs are truly "intuitive", which means that someone has presented the data in such a way that end-users quickly and easily make the deductions that the designer intends for them to make. For instance, by using an orange background to indicate action-oriented buttons on a web site, a designer is training end-users to understand that if they want to do something, they should quickly (often subconsciously) scan the web page for anything orange. Another example is a tag cloud. The most popular tags are in a larger font size, making it very easy for end-users to find them.
All of these concepts are present when thinking about mega menus.
Here are some guidelines to think about as you consider which visual elements you need to include in your mega menu:
- The Use of Colors
- The Use of Fonts
- The Use of Headers
- The Use of Graphics
- The Use of Space
Color theory is far too broad a topic to go into much detail here, but it's also a significant component to effective visual elements, so we have to address some part of it. The principle behind color theory is that, particular to a culture, colors have meaning and can impact users' perceptions. Red is associated with passion, whether it's love or hate. Blue is associated with calmness. Knowing what colors mean allows a designer the ability to influence the users' emotional state and preconceived notions, and we can make that work for us in mega menus.
The Use of Fonts
The heavy use of typography to convey meaning waxes and wanes in popularity, but it's currently riding an all-time high in the world of web design. Typography can be used to draw attention to specific items, to highlight important concepts, and to organize otherwise complex collections of links. In essence, all the rules about typography that influence a web site also applies to the mega menu. Keep things simple, keep them readable, and understand why you've chosen a particular font, size, or style.
The Use of Headers
Headers keep content visually organized by implying a hierarchy. Users must be able to quickly and easily understand what defines a particular category. These labels are the first place that users scan to determine whether a grouping contains the type of content for which they're looking. Headers are often larger than the content links under them, and headers of the same size are readily understood to be peers within the hierarchy.
As labels, headers must be descriptive without being wordy. They are the one word or short phrase description of an entire category, and it's important to be precise. If a category contains cars, motorcycles, and trucks, then the category should be labeled "vehicles". It's one word, it's descriptive, and it's easily understood. Which brings up a good point: be careful about being too clever with headers. An unhelpful label reduces the usability of a mega menu. No user wants to struggle to decrypt a pun or understand industry-specific slang, and no web site owner should want to alienate any potential visitors.
Finally, from a code perspective, consider the judicial use of HTML header tags. Not only do they keep content orderly, they're effective for use in search engines.
The Use of Graphics
The use of graphics is one of the most powerful and easiest to abuse visual element available to the mega menu. If properly applied, they can add value. Graphics can add visual interest, can help users understand the point or purpose of the content, and can draw the eye and thereby highlight important content. However, if improperly applied, large graphics can add too much size to the mega menu, thereby making it slow and unwieldy; inaccurate or misleading graphics can give the wrong impression of the content; and too many graphics can create clutter.
Unless your web site focused on something visually distinctive, it's most often best not to use graphics. Let users do quick scans of the content, and focus on a quick, responsive mega menu. But the concept is there if you should need it. Just use caution.
The Use of Space
Space is an interesting concept. It covers several tactical decisions you can make, so this section is much more of a smorgasbord of design elements.
Space, while important, is often ignored because web sites want to convey as much information as possible all the time. It's important to struggle against that all too natural instinct. Too much content creates a sense of clutter and can overwhelm users, making them less likely to stay at the site. Users have a very short attention span, and if they can't find what they want immediately, they will move on. Content that they actually do want to see may be overlooked or ignored because there's just too much going on. Negative space -- space with no content or art -- can help create a sense of orderliness that encourages users to stay and look for what they need.
We're most accustomed to reading lists of things on a web page in columns, not rows. When creating your mega menu, try to stick with links arranged vertically. Of course, this sometimes means that a link will be too long for the column it's in and will wrap to the next line. Visually distinguish that those two lines belong together by either using bullet points or further indenting the second line.
And another point: avoid a lot of prose. The point of a mega menu is to provide quick and easy ways to find content. Forcing users to read a lot of content defeats the purpose.
Design, Test, Refine
Finally, the key to good design is to realize that no single person can create something in a vacuum that is usable by everyone. Usability is as much an individual process as well as a group trend. The thoughtful designer will put together a proposed mega menu and then test, test, test! Mega menus must be useful; therefore, test it with a series of users and let them tell you whether it is. If your web site has the budget for it, conduct usability testing with actual users. If you don't have a budget for it, don't skip the testing, just ask people in different departments to take on the role of an actual user. Either way, designers must ask for and receive feedback (positive or negative) from users and then refine their designs with that feedback in mind in order to ensure that the mega menu is usable.
All set? Great. Tomorrow, we're going to look at how to do it wrong. There's a lot to be gained by learning from others' mistakes.
Five Things About ... Mega Menus (Day 2)
Yesterday, we talked about figuring out whether your web site needed a mega menu. Installing a mega menu when one's not needed can negatively impact usability, so it's an important question to answer. So now that you've decided it's something you need, let's get started.
Day 2: Structure the Content
Once you've determined that mega menus are a design element that will increase the usability of your web site, how do you go about creating one? It's not enough to simply add a mega menu to each link in the primary navigation and then add all of the secondary pages or categories to them. Frankly, it's not enough to "simply" do anything. I'm a big fan of the scientific method. The best way to figure out what to put in a mega menu is to use your metrics to determine site usage, and then to organize your content with that usage pattern in mind.
You are keeping metrics for your web site, right?
Metrics-Driven Decisions
Let's go ahead and assume that yes, you have a series of metrics that make sense and help you understand general trends and direction on your web site. Even the simplest of metrics will help us figure out what content to put on our mega menus if we use a little deductive reasoning. Being able to productively use metrics only takes three things, after all:
Organizing Your Content
The biggest challenge is one of value; a mega menu should create value by increasing web site usability. One of the foundations of the principle of mega menus, as you'll recall from yesterday's post, is that it must provide visually intuitive ways to display organize content. Simply showing a list of links is not enough. There must be a purpose behind them, and the organization must be logical, thoughtful, and straightforward.
Before determining what gets shown on a mega menu, consulting an information architecture diagram (or it's little brother, the site map) will be helpful. All pages should be enumerated, categories at each level should be delineated, and the relationships between all of them should be clearly mapped out. A diagramming tool like Visio or Omnigraffle is helpful for this process.
Once everything is laid out, highlight pages with the highest number of page hits. At its most basic, an IA diagram with popular pages highlighted will show off the sections that are of the most interest to users.
Getting more sophisticated, and if there's a lot of interest in this, consider heat map analysis. This will require more metrics than just page hits, as the paths users take through the web site will be considered. Pages with the most hits are destinations and should be marked in a bright red. Pages with fewer hits are marked in successively "cooler" colors, moving from red, orange, yellow, green, and blue.
The visualization provided by cross-referencing metrics like page hits with an IA diagram is a great tool in determining what content will be shown on the mega menu. Categories will start defining themselves based on user traffic. It may be that new sets can be drawn around groups of pages. Or, maybe the current IA, with its categories and hierarchy, will prove to be exactly what's needed.
Putting It Together
A mega menu appears when users highlight a link in the primary navigation. So using those links as the starting point, create a new diagram with the mega menu hierarchy in mind. While many are tempted to skip the diagramming step, I find that a little planning prevents a lot of code re-writing (a much more expensive task) later. The top of each hierarchy should be the primary links, and in each should be a set of categories, sub-categories, or landing pages. Unless the web site is very small or shallow (in which case, ask again whether a mega menu is truly needed), don't clutter the mega menu by including every page. In fact, always lean towards minimalism and high impact. In other words, what is the least amount of content you can get away with that will still increase the usability of the web site the most.
That's it for this section. The input to this section is the answer to the question, and the output is a mega menu diagram that is logically built out of data and evidence. With that in hand, we move on to the next part: visual elements.
Day 2: Structure the Content
Once you've determined that mega menus are a design element that will increase the usability of your web site, how do you go about creating one? It's not enough to simply add a mega menu to each link in the primary navigation and then add all of the secondary pages or categories to them. Frankly, it's not enough to "simply" do anything. I'm a big fan of the scientific method. The best way to figure out what to put in a mega menu is to use your metrics to determine site usage, and then to organize your content with that usage pattern in mind.
You are keeping metrics for your web site, right?
Metrics-Driven Decisions
Let's go ahead and assume that yes, you have a series of metrics that make sense and help you understand general trends and direction on your web site. Even the simplest of metrics will help us figure out what content to put on our mega menus if we use a little deductive reasoning. Being able to productively use metrics only takes three things, after all:
- An understanding of the purpose or goal of your web site.
- One or more questions to ask about your web site that relates to that purpose.
- One or more tools to track the answers to the question(s) you've asked.
Organizing Your Content
The biggest challenge is one of value; a mega menu should create value by increasing web site usability. One of the foundations of the principle of mega menus, as you'll recall from yesterday's post, is that it must provide visually intuitive ways to display organize content. Simply showing a list of links is not enough. There must be a purpose behind them, and the organization must be logical, thoughtful, and straightforward.
Before determining what gets shown on a mega menu, consulting an information architecture diagram (or it's little brother, the site map) will be helpful. All pages should be enumerated, categories at each level should be delineated, and the relationships between all of them should be clearly mapped out. A diagramming tool like Visio or Omnigraffle is helpful for this process.
Once everything is laid out, highlight pages with the highest number of page hits. At its most basic, an IA diagram with popular pages highlighted will show off the sections that are of the most interest to users.
Getting more sophisticated, and if there's a lot of interest in this, consider heat map analysis. This will require more metrics than just page hits, as the paths users take through the web site will be considered. Pages with the most hits are destinations and should be marked in a bright red. Pages with fewer hits are marked in successively "cooler" colors, moving from red, orange, yellow, green, and blue.
The visualization provided by cross-referencing metrics like page hits with an IA diagram is a great tool in determining what content will be shown on the mega menu. Categories will start defining themselves based on user traffic. It may be that new sets can be drawn around groups of pages. Or, maybe the current IA, with its categories and hierarchy, will prove to be exactly what's needed.
Putting It Together
A mega menu appears when users highlight a link in the primary navigation. So using those links as the starting point, create a new diagram with the mega menu hierarchy in mind. While many are tempted to skip the diagramming step, I find that a little planning prevents a lot of code re-writing (a much more expensive task) later. The top of each hierarchy should be the primary links, and in each should be a set of categories, sub-categories, or landing pages. Unless the web site is very small or shallow (in which case, ask again whether a mega menu is truly needed), don't clutter the mega menu by including every page. In fact, always lean towards minimalism and high impact. In other words, what is the least amount of content you can get away with that will still increase the usability of the web site the most.
That's it for this section. The input to this section is the answer to the question, and the output is a mega menu diagram that is logically built out of data and evidence. With that in hand, we move on to the next part: visual elements.
Five Things About ... Mega Menus (Day 1)
Mega menus have been around for years, but their popularity really took off in March 2008 when in Jakob Nielsen, usability's own champion against the forces of bad design, declared that mega menus "tested well enough that [he] want to encourage its wider use." Ever since, large web sites have implemented some stunning examples of the design element. And following closely behind, there have been several different sites that do a great job of rounding up some of the best examples on the web. So go there if you want to see what can be done with mega menus. Here, we're going to focus on the specifics of how and why to bring this design element into your web site.
Day 1: Determine Whether It's Useful
Planning before implementation -- it's such an important but often over-looked concept. In this case, you have to determine whether or not you even need a mega menu. One of my biggest pet peeves is designers who blindly follow current trends and add design elements simply because they're popular. Good design comes from understanding the reasons behind these elements and applying them when and where appropriate.
In the case of mega menus, the guiding principle is one of usability. Mega menus must:
So before thinking about adding it to your web site, ask yourself these questions:
Even large web sites may not need to use mega menus. Web sites where users should navigate a structured hierarchy in order to find their content wouldn't find a significant benefit with sophisticated mega menus. Strangely enough, mega menus aren't necessarily useful when there are too many options. When all of these many, many items are equal, what would you highlight, and what would it mean to those items that you didn't highlight? Examples of both concepts can be seen at Amazon or eBay.
So, if you answer yes to at least three of these questions, then it's safe to consider using mega menus on your web site. In the end, all web design is about usability; web sites that are not usable are not useful and serve no purpose.
Join us again tomorrow as we figure out where to go next.
Day 1: Determine Whether It's Useful
Planning before implementation -- it's such an important but often over-looked concept. In this case, you have to determine whether or not you even need a mega menu. One of my biggest pet peeves is designers who blindly follow current trends and add design elements simply because they're popular. Good design comes from understanding the reasons behind these elements and applying them when and where appropriate.
In the case of mega menus, the guiding principle is one of usability. Mega menus must:
- Provide visually intuitive ways to display organized content.
- Make it easier and faster for users to find what they need.
So before thinking about adding it to your web site, ask yourself these questions:
- Does my web site have a large number of unique pages (> 50) of content?
- Is the primary navigation composed of a large number of categories (> 7)?
- Is the site's information architecture complex enough that my users are unable to find relevant content?
- Do I have content that is important to the site but buried deeply in the hierarchy?
- Is my search feature returning too many results?
Even large web sites may not need to use mega menus. Web sites where users should navigate a structured hierarchy in order to find their content wouldn't find a significant benefit with sophisticated mega menus. Strangely enough, mega menus aren't necessarily useful when there are too many options. When all of these many, many items are equal, what would you highlight, and what would it mean to those items that you didn't highlight? Examples of both concepts can be seen at Amazon or eBay.
So, if you answer yes to at least three of these questions, then it's safe to consider using mega menus on your web site. In the end, all web design is about usability; web sites that are not usable are not useful and serve no purpose.
Join us again tomorrow as we figure out where to go next.
Wednesday, December 22, 2010
Happy Holidays!
Happy holidays to everyone. Safe travels, be well, and enjoy this festive time of the year.
Tuesday, December 21, 2010
DreamForce Thoughts
Pivotal's cloud expert, Malcolm Hawker, visited DreamForce 2010 recently and came back with these thoughts:
One of the last sessions at DreamForce was hosted by the Professional Services group of salesforce.com. That discussion highlighted those areas where salesforce.com is hearing the most demand from it's clients for support from third-party consulting companies. Here is the list:
Sales Cloud
One of the last sessions at DreamForce was hosted by the Professional Services group of salesforce.com. That discussion highlighted those areas where salesforce.com is hearing the most demand from it's clients for support from third-party consulting companies. Here is the list:
Sales Cloud
- Enabling Master Data Management (MDM) solutions within SFDC.
- Implementing Jigsaw contact database and similar sales contact db's
- Building solutions to improve sales Territory Management & Lead Assignment
- Building solutions to impove Quoting
- Building Partner Relationship Management (PRM) solutions to capture partner leads, registering partners, etc.
- Implementing Service Cloud software
- Penetrating the 75k salesforce.com customers using sfdc for sales/marketing but not for call center support.
- Defining business strategies for migrating apps to the cloud, including conducting Application Portfolio Assessments (define the 'as is' and 'to be' in the cloud).
- Defining Enterprise Solution Architectures for the new cloud-enabled technology org.
- Defining Enterprise Technology Processes / Governance for life in the Cloud.
Monday, December 20, 2010
Pivotal Awarded for the Quality of Its Information Management Solutions
Just last month, Pivotal was awarded the “Most Innovative Solution” for 2010 at IntegrationNext, Pervasive Software’s annual data integration summit. We were recognized above more than 30 other companies nominated for awards at the Pervasive event, including some of the worlds largest IT consulting, software, and business service companies. Needless to say, we're quite proud of our team and their ability to architect and implement high quality solutions for very technical data problems. The full press release has more details.
Along those same lines, our very own Malcolm Hawker speaks with Pervasive's Jeff Kaplan to discuss the information management solution we created for Neustar. Read more and watch the full video at Pivotal IT Leverages Pervasive's Technology to Create an Integrated Approach to Data Quality.
Along those same lines, our very own Malcolm Hawker speaks with Pervasive's Jeff Kaplan to discuss the information management solution we created for Neustar. Read more and watch the full video at Pivotal IT Leverages Pervasive's Technology to Create an Integrated Approach to Data Quality.
Subscribe to:
Posts (Atom)