Best Web Image - Web Usability and Design

Menu Stacking, This Menu is Not For You

Robert Campbell — Sat, 07 Nov 2009 15:56:12 +0000

So what is menu stacking you ask. Menu stacking is the design concept of having one horizontal menu stacked on top of another. These separate menus often address different target groups or needs, and can run anywhere from just two menus to eight. I say eight only because I have actually caught a website doing this. There is no real limit to the confusion though, and it is not uncommon to find sites with at least three menus stacked on top of each other.

Menu stacking is a bad idea, and to me reflects poor planning in regards to site hierarchy along with the poor planning for visitors needs. To visitors unfamiliar with a website, menu stacking creates frustration, confusion, and potentially sales.

Examples of Menu Stacking

First, a couple of popular websites that use menu stacking to show for example. The first one is from Direct TV, they have stacked five different menus all in the header. It’s really only four levels high, but there are five menus within those four levels.

A little user testing on this site reveals visitors trying to use menu 4, as it appears to be the main menu. This works for new members, but unfortunately for their registered members, menu 4 does not disappear after logging in.

This issue is compounded because after logging in, the site displays all of the menu 4’s content in the members area left sidebar. When two prominent menus are displayed to a visitor, the common expectation is that these two menus link to different services or content. In this case they do not, and it creates confusion for a visitor.

Direct TV could even be losing out on Pay Per View sales here. With so much emphasis on menu 4 the users may not notice menu 3, and this is where the Pay Per View ordering takes place under What’s on TV. For registered members, menu 4 needs to go.

Another issue with this websites navigation is that it is not completely clear to a visitor what menu they should use. Menu 4 does seem to be the obvious initial choice, but there are other justifiable menu options for a non-member. Should the new visitor use the menu 4, or should they use menu 2 and register? The menu is confusing, and that orange order now button…order what? Registered menus in no way need menu 1 or 4. Why are they forced to filter out those menus?

Another example of a menu stacked is one from my favorite magazine, Scientific America. Sadly, my opinion is that they should stick to making magazines.

This site has two stacked menus followed by a typical blog, more/main content section, which in a way acts as a third menu stacked. This particular screenshot was comical to me. I was planning on taking the screenshot of the drop down from the top menu covering up the menu below it. I did manage to do that, but by good timing a popup appeared on top of that blocking my navigation and their content. Looking at that popup, I am also wondering how many visitors to the website are already subscribers. I’m betting a high percentage.

In Scientific America’s website the two stacked menus is almost bearable at first look. The content does seem to be divided, but unfortunately again for this site, they make the mistake of using drop down menus. Don’t get me wrong here, drop down menus are good, but they are very very bad when used directly over another menu. Please don’t do this to your own site.

I Have a Ton of Content Though

So if you were to use the argument that you have a ton of content, and that all those menus really are required may I suggest looking at a few sites that handle this issue beautifully:

The White House – Yahoo has indexed at least 60,000 pages of content on this site. They have one menu in header.
MySpace – Over 2,000,000 pages indexed, powered by Google (another example), one menu in the header.
WordPress – Nearly 1,000,000 pages indexed, one menu.

These are huge sites that are easily controlled by visitors using just one navigation menu starting on their home page. What about sidebars you ask? Sidebars are great because it’s all found in one spot, the sidebar. You can also make them very long if you have a ton of content too:)

MyBlogLog Fans! Help me break 500 members by please joining BWI's Community. I'm just a few away.

Easy Way to Make Sure Google Likes Your Blog Post Descriptions

Robert Campbell — Thu, 05 Nov 2009 14:00:01 +0000

I’ve recently wrote a couple of posts about writing post descriptions, A Blog Description Google Seems to Like and Your Description Sucks. If you read those, you should know by now that a custom description doesn’t always get used by Google. Sometimes Google just doesn’t care for your description, and uses the content it feels is best for the snippet they display.

Well, here is an easy way to make sure Google is using your description, use Google Alerts.

Google Alerts

If you have an account with Google it’s as simple as logging in and clicking on Alerts. Then just set one up where it searches blogs for your domain or blog title. I have one set up simply searching for Best Web Image. Once a week I get an email from Google with all my posts, and guess what is included with those posts? The descriptions that Google uses in its search results. Don’t see a description you like? Then login to your blog, and make the fix.

MyBlogLog Fans! Help me break 500 members by please joining BWI's Community. I'm just a few away.

Tags Show What Visitors Like

Robert Campbell — Wed, 04 Nov 2009 19:40:29 +0000

If you are a blogger, know that post tags could be your best friend when it comes to identifying what your readers want more of. Some of you may initially be thinking that is what tag clouds do, but it’s not. Tag clouds show what the blogger likes, not what the readers like. Having a tag cloud, in my book, is like asking someone to pick a card out of a deck that is manipulated to force a known pick.

Having a list of tags that do not indicate popularity by size or order, offer insight to what your readers really want to see more of. On this site it appears that you want to see more usability tips, web design tips, and Google. The tags have spoken.

Related, Categories, and Post Tags

If you take the time to look underneath this post you will find my blue gray box designed to keep my visitors a little longer.

On top I have a new feature I am very proud of, the Just Posted link. It displays my latest blog post throughout the site. The next is the Related Posts. Using related posts on a blog is a well known feature to keep the visitors a little longer. I used to limit this to just five, but noticed it worked better when I increased the list to ten. This feature sometimes turns into popular posts if I do not have any posts related.

The next part of this is my Category, and my Post Tags links. Using Google Analytics I found gold pouring out from the tag pages. If you have tags displayed on your blog and use Google Analytics, just look up your content and filter for “/tags/”.

I also looked for popular category pages as well, but they just didn’t seem to be as revealing. They were clicked less, and page views after didn’t engage the visitor as much. Post tags however, were very revealing, and it was no shocker that visitors to my website wanted more usability and web design tips. They were not clicking those tags because the words were huge like in a tag cloud. They were clicking them because they wanted more on that topic.

How to Display Tags Using WordPress

If you are not already displaying post tags on your WordPress blog, here is how. First you will need to make sure you are actually submitting the important tags for the post after writing your post. This is found under the heading Post Tags right underneath your category tags in the right column.

The code to insert in your single.php file (your post display page on WordPress) is as follows: . I personally use: for this blog.

If you are not displaying them now give it a try, and if you already are check out your new resource of killer content ideas.

MyBlogLog Fans! Help me break 500 members by please joining BWI's Community. I'm just a few away.

Images are In Charge of Your Linking Title

Robert Campbell — Tue, 03 Nov 2009 18:17:02 +0000

Firefox and Microsoft Internet Explorer handle the title attribute for images differently. Now before you IE bashers jump on this please take the time to read this to the end. Firefox messes this up as well. Here are some of the problems, and my simple partial solution.

Also, within this post I often refer to the mouse over popup. If you are unfamiliar with what I mean by that, simply hover your mouse over my logo in the top left. Within a second or two you should see a small window display “Best Web Image – Web Usability and Design”. That is what I am talking about.

Image Attributes Put Into Use

If you use this as an example:

Firefox will display the image, and define the alt attribute as BWI Banner. A mouse hovering over will reveal no information about the image. If you use Microsoft Internet Explorer you will get the image, and a mouse over will reveal the alt text of BWI Banner. This reflects on how IE still (in version 8.0) tries to fix “errors” in code.

Using the alt attribute alone should not display anything on a mouse over, but IE is guessing that the author forgot to include a title attribute for the image, so it uses the alt attribute. What if you don’t want alt text to popup on a hover? Don’t use the required alt attribute? That’s bad news for text browsers.

Make sure you always use the alt attribute with an image. The alt is a W3C required attribute for the image tag.

If you use this as an example:

Both FF and IE will display the title attribute on mouse over. Everything worked as planned.

Now the Linking

What happens to the image alt and title attributes when stuck within an anchor, image? I can say this…AAARRRRRGGGG!

If you use this as an example:

Firefox will use the title attribute of the anchor, as the parent tag should. IE however, ignores the anchor title, and uses the image alt attribute. That simply makes me want to pull my hair out.

Now this is where I go really nuts….

If you use this as an example:

In this case both FF and IE ignore the parent title attribute, and use the image title for some reason. This is basically why I title this post the way I did. For some reason both browsers, FF and IE, treat the image title attribute with more weight than a parent title attribute. Also, for those of you that constantly bash IE, this makes a good example of FF not handling hierarchy consistently. FF gives priority to the anchor title when the image has no title, but then takes it way when the image does.

Partial Solution

Not happy with how any of this is being handled, I say use the alt and title attribute for all of your images. This will give a consistent effect regardless of browser type. They will display the mouse over popup, and if put inside an anchor tag will display as planned/titled as well. If you don’t want the mouse over popup on an image don’t use an alt or title attribute, but know you are creating accessibility problems for some of your users.

MyBlogLog Fans! Help me break 500 members by please joining BWI's Community. I'm just a few away.

How Green are Your Affiliations and What Does It Reflect

Robert Campbell — Mon, 02 Nov 2009 19:04:39 +0000

Doing a little digging around on McAfee’s website today, I came across a pretty cool feature they have for website owners. It can also be used by anyone if you simply curious of how safe a website is.

The service is McAfee’s SiteAdvisor. The service basically reports if the site analyzed has any known problems or complaints. It shows how many times a site has been reported for spam, if it has adware, if it has popups, and items of that nature. What I really found interesting though, was it Green Affiliation report.

Green Affiliation

The Green Affiliation report made by McAfee shows what safe sites that the site tested links to. See Best Web Image’s report. It doesn’t show all sites, but it does give you a pretty good quick analysis.

I found this report interesting because in a way, it really reflects a website. What did I get out of this in regards to BestWebImage.com? I’m not referencing other usability or design sources enough. I tried this for a few other websites that I have, and they had much better “reflections”.

Improving My Affiliation to Reduce the Bounce

Finding this site, and seeing this reflection of BWI turns out to be fantastic timing for me. One of the primary objectives I have for BWI this month is to reduce the bounce rate. By adding more resources I could improve how new readers engage with this site, and reduce the bounce at the same time.

MyBlogLog Fans! Help me break 500 members by please joining BWI's Community. I'm just a few away.

This is just a quick post to remind everyone that my discount price for the Web Usability and Design Analysis ends today! The regular price is $29.95, and the discounted price is just $19.95. Learn how to improve your websites function, forms, navigation, design, and a whole lot more!

If you wake up early on Saturday the 31st, you may have an opportunity then as well. It all depends on how early I wake up!

MyBlogLog Fans! Help me break 500 members by please joining BWI's Community. I'm just a few away.

A Blog Description Google Seems to Like

Robert Campbell — Wed, 28 Oct 2009 18:16:56 +0000

Over the past couple of years I’ve made a few posts about how to write a description meta tag. One of them, Your Description Sucks is about making sure that you write a good one, or Google will just use your content on what they think is best. The second one is, Google Wants You to Be More Specific, and that was the one that made me change how I do my own. The end results? A few days later Google was caching my posts with minutes.

Google Loves Structured Data

Google loves structured data so for this site, I give it to them a few different ways. The first way, is by site structure with the proper use of heading tags. My site is nicely outlined by heading tags, making BWI as the H1 tag, page titles as the H2 tags, and the heading tags within a post as H3 tags. Here is a popular post I did on how to use heading tags.

The second way is by using RDF’s. I mention how to use this in the Google Wants You to Be More Specific post as well. I use it to price out my analysis.

The third way, and the way that it seems to be really helping is the how to on my descriptions for posts.

Here is an example of my description tag:

The tag first displays the description I have custom written for the post, it then displays when I published it, and also mentions the number of comments. Google seems to love this, and I am guessing it could have something to do with the published date. No more worrying about who posted this comment first. I clearly clarify it. It also gives Google user a little more insight to the post by displaying the number of comments.

How I Do It

I know many of you swear by the SEO Pack plugin for WordPress. I don’t use it. Instead, I customized the header myself. The only real advantage I see to having the SEO Pack plugin is that it automatically adds your canonicol information. The canonicol information basically says, this is the original content. Well my descriptions says that, and here is how I do it.

When creating a post in WordPress, you will find the Excerpt field right below where you type in the post. This is where I type in my brief description. I do not add the time stamp or comments here. How could I yet?

What I have done is permanently edited the header file so when a post page is required it makes my custom description.

if ( is_single() )
$description = “post_excerpt, Published: $post->post_date, Visitor Comments: $post->comment_count\” />
“;

I then echo $description where I want it. It’s all nice and structured, consistent, and even has the potential to add more information like the author. Anyone else have a blog post description that Google seems to love?

MyBlogLog Fans! Help me break 500 members by please joining BWI's Community. I'm just a few away.

Manage Intelligence Alerts with Google Analytics

Robert Campbell — Tue, 27 Oct 2009 22:42:04 +0000

Another Google Analytics post, but this one is to announce a cool new feature that Google added. Located right underneath the Dashboard on your analytics report you will now find, Intelligence Alerts. Easily watch, and optionally get emailed if your important target numbers or goals are not performing as planned.

Like custom reports you can create your own alerts, but Google has already made several of them for you to copy into your own reports.

Templates that Google has already created:

Total visits decreases by more than 50.0%
Unique visitors decreases by more than 50.0%
Total page views decreases by more than 50.0%
Average bounce rate increases by more than 50.0%
Average time on site decreases by more than 50.0%
Percent new visitors decreases by more than 50.0%
Goal conversion rate decreases by more than 50.0%

The alerts can be adjusted by sensitivity, and display in a bar graph below your regular line graph.

I haven’t had enough time to really give it a try yet, but I see one immediate advantage. It can help you stay focused on site goals. An example of this would be setting your goal conversion rate for an alert. If it goes below the ratio you determine it will send you an email. Hey! Time to wake up! You are not converting this week! Not sure if they are actually allowing custom messages yet though.

Doing some quick testing of the alerts I found you can customize the alerts pretty aggressively. Having it email you the alert is also an option.

This will make it tough for other analytics software companies to compete with. Simply hardcore, powerful analytics, and at that wonderful price of free ninety free!

MyBlogLog Fans! Help me break 500 members by please joining BWI's Community. I'm just a few away.

How Not to Brag About Zero Comments

Robert Campbell — Tue, 27 Oct 2009 18:26:56 +0000

So you just wrote a new post on your WordPress Blog, and it has a whopping zero comments so far. Like bragging about it? I don’t. I also don’t like search engines like Google caching 10 counts of the word comment. If there are no comments, I say, why brag about it. Fortunately, WordPress lets you easily customize this in your templates.

Comment Template Tag

The comment template tag used in your WordPress site appears something like this: comments_popup_link(’0 Comments, ‘1 Comment’, ‘% Comments’)

There are actually five parameters for this tag. The first is what to display when there are zero comments, the second is if there is one comment, and the third is what to say if there is more than one comment. The last two parameters are to identify what CSS class it is, and to display if comments are even allowed. The percentage character needs to be left in there. It indicates the number of comments.

For this sites home page I use: comments_popup_link(’‘, ‘1 Comment’, ‘% Comments’) to display comment count on the home page. Zero comments on the post? You get zero notification because I leave that parameter blank. See example below.

Getting Original

To spice up the actual posts pages, I try to give it a little flare to encourage comments. To edit yours, open the file single.php in your template folder, and look for the tag comment_number(). This works just like comment_popup_link() in regards to parameters. If you don’t find either one, you can always add it.

On my posts I use: comments_number(’Be the first to comment!‘, ‘One comment so far. You are next!’, ‘% Comments – Post Yours’ )

It’s just a little spice to help encourage those comments.

MyBlogLog Fans! Help me break 500 members by please joining BWI's Community. I'm just a few away.

Best Web Image - Web Usability and Design

Menu Stacking, This Menu is Not For You

Examples of Menu Stacking

I Have a Ton of Content Though

Related Posts

Easy Way to Make Sure Google Likes Your Blog Post Descriptions

Google Alerts

Related Posts

Tags Show What Visitors Like

Related, Categories, and Post Tags

How to Display Tags Using WordPress

Related Posts

Images are In Charge of Your Linking Title

Image Attributes Put Into Use

Now the Linking

Partial Solution

Related Posts

How Green are Your Affiliations and What Does It Reflect

Green Affiliation

Improving My Affiliation to Reduce the Bounce

Related Posts

Popular Posts and Pages on BWI for October 2009

Popular Posts

Last Day to Order Web Analysis at the Discounted Price

Related Posts

A Blog Description Google Seems to Like

Google Loves Structured Data

How I Do It

Related Posts

Manage Intelligence Alerts with Google Analytics

Related Posts

How Not to Brag About Zero Comments

Comment Template Tag

Getting Original

Related Posts