Hubspot, author of WebSite Grader, sponsored a webinar with Paul Gillin, author of The New Influences - A Marketers Guide to the New Social Media.

Here is a story of business engagement. Engaging the audience and developing a conversation.

I asked a simple question of the presenter, which was asked and answered by the speaker during the webinar. Nothing spectacular here yet.

Then the speaker offered to look over my blog and offer suggestions after the webinar. I took him up on it and he followed through. Mike Volpe, VP of Marketing over at HubSpot provided substantial suggestions. Many are on my to-do list.

Mike also referenced a few articles on the HubSpot blog so I spent a bit of time reading and found many useful articles. This exceeded my expectations of the benefit of joining the webinar, as did Mike’s email that included eight suggestions for my blog.

So, as a way of showing my appreciation, I would like to offer a few suggestions on how to improve the usability of the HubSpot blog. I willingly admit that I do not yet practice all of these suggestions here at www.jbspartners.com .

---

 

Let’s Start the Overhaul Recommendations for HubSpot’s blog

One of the important factors of good usability is predictability or accurately indicating what is ahead. This dictates a common-sense order of events. Order and relative position are themes you will find illustrated as you read on.

Click the thumbnail below to see a full size screen shot of the HubSpot blog page that is being reviewed. Opens a new page.

 

Promotion

Digg, StumbleUpon, del.icio.us and reddit are valuable tools to help spread the word about quality articles. Below is a snap shot of a HubSpot blog title with social bookmarking links.

How can this be improved?

Could the social media text links be shifted down and placed on the same row as the Digg flag, instead of on top of the Digg flag? Stacking them leaves a large amount of blank white space to the right of the Digg flag, which is often restful, but not needed here. The post title is quite lost because it is placed so close to these links and graphics.

And for the posts that have not been Dugg, still move the social bookmarking links away from the title.

In fact…

Could you move these links to the bottom of the article? I might feel more genuine about voting for you after I have read the article. Why make me scroll back up to the top of the page to click the link? Move the social media links to the bottom of the article.

 

Byline

Who is the author? Introductions generally come before conversation. Place the byline at the top of the post instead of the bottom of the post. If the blog post is low on graphics, add an avatar or a photograph of the author as well. This kind of personalization is helpful when you meet the author in person or see the same photo elsewhere on the web, even in the comments below.

Date

When was the post written? Please don’t make me scroll down to the bottom to search for a date that is presented in tiny, faded font. Readers care. Information does expire. Don’t be afraid. Trust your readers. Include the date at the top . Many subjects on the Internet are date/time sensitive. Get this information out in front of the article.

Comments

Same as above. Honor your commenters by placing the comment author’s name and the date above the comment. Those that comment are often a part of a community. They will be looking to see if others that they know have commented. Books and newspapers place the author name before the text.

Place the commenters name first and date (and time information if needed) after the name.

A long column of comment text is boring. Instead, modify your comment styling to alternate the background color of every comment. This adds a bit of visual interest, breaks up the column into readable chunks, and aids the reader that is scanning the page. We know that readers scan, this change will make that easier.

This is a sample of alternating comment colors taken from www.cameronolthuis.com

 

Displaying the number of comments at the start of the comments section further enhances usability by providing the user with information about what is ahead. Nine comments is very different from 256 comments.

This is a sample taken from www.copyblogger.com

 

The HubSpot blog authors are very proactive about commenting on the blog comments. :loud applause: This encourages the sense of community that results in more comments.

Readers are interested in what the author has to say and who the author is. They also want to see if the author is reading and responding to posts. Uniquely style the comments of the author. Choose another background color, add a one pixel boarder, or what ever works with your style.

This example is taken from www.pearsonified.com Chris is the author. Here he uses bright red next to his comment.

 

Day of the Week

Providing the day of the week, month, date, year and time of the post might be too much information. I vote to remove the “Wednesday” portion of the date. Do not eliminate the year.

Spacing

Evenly spacing everything gives equal importance to everything. This does not provide the visual queues to aid the reader and provide good usability. Add extra blank lines before new areas of the post. At the end of the article add a blank line. An orange colored “Comments” title is very helpful. Give it some room by adding a blank line above it.

After the comments section, add a blank line before the comment form.

Remember to place related things near each other. Even in this blog post that you are reading, the bolded title “Spacing” that begins this section is nearer to the text about spacing than the text above which is about the Day of the Week or even the text below which is about the Comment Form.

Comment Forms

The button says “Post Comment”. “Post” is a technical term. Let’s be more welcoming and friendly. Try; Leave a comment, Leave a reply, add a comment.

The captchka is regrettably necessary. The explanatory text could be placed next to the text box and the word “code” could be replaced with the word “text”. Nothing wrong with adding a please here either, since this requires an extra effort of the visitor.

 

Required Fields

There are asterisks by the required fields. Many visitors are new to blogs as well as commenting. The form should make it as clear and easy as possible for them to participate. Add required field explanation text so that visitors can see what is expected of them before they see an error message and leave.

Email Notification

I always appreciate the ability to subscribe or to be emailed when there are comments made to a post that I have commented on. Great idea. This develops the feeling of engagement and starting a conversation. However, using the term “someone” is less supportive of this objective. What is being offered here is the ability to “Notify me of follow up comments via e-mail” So, we could just say that.

 

---

 

Quick Summary

2. Social Book Marking tags belong at the bottom of a post
3. Bylines belong at the top of a post, along with the date
4. The comment author name and date of the comment should appear before the comment
5. Alternate the styling of comments
6. Provide unique styling of the blog author’s comments
7. Display the number of comments at the top of the comments section
8. Keep day/date/time information simple
9. Space related content near each other
10. Space unrelated things apart from each other
11. Explain required fields
12. Email notification is awesome

 

---

 

Two questions?

1) What did I miss?

2) Why would you do something different?

I look forward to reading your comments.

If you would like to learn more about styling your comments in WordPress specifically one place to read is here - http://www.pearsonified.com/2007/11/professional_stylish_comments_for_blogs.php

If you like this article, click on the little green “Share This” icon below. It will help you share the article in the manner of your choosing. There are two tabs and lots of Social Bookmarking choices for you as well as “email a friend”.

“You are here” indicators. We get this phrase from maps, according to Steve Krug, who was the keynote speaker last night at the Usability Professional Association (UPA) Boston meeting, held at Olin College of Engineering.

Chris Hass, chapter President and Usability Consultant at Bentley College presided over the meeting and quickly introduced Steve Krug, author of the best seller Don’t Make Me Think .

The two magical points;

1. Effective “You are here” indicators
2. Prominent Page Titles

That my friends is the core message. You can go home now, as long as you are not disappointed. If you are, then stick around for a little more detail. Steve anticipated the same disappointment, and we all stuck around.

You are Here

Ways to highlight the current location in the primary navigation are numerous. You can make the text

• Bolder
• Larger
• Change the color
• Reverse the background
• Indent
• Italicize
• Underline - and there are many more options to fit your needs

However, designers love “design subtleties”. This is what they are most proud of. And the users, well they miss them every time. Steve was clear that designers “have to be louder than you like to be, because the visitors move so fast.”

We need to help visitors navigate. “You are here” helps people navigate. Steve mentioned that visitors who give up on the navigation and instead click in the content area to find what they need are disappointed 99% of the time and leave the site. Much better odds with the navigation.

Tabs are a recommended interface for primary navigation and StumbleUpon was offered as a very good example. Pretty clear that we are on the home page in this image.

Notice that the tab is the same color as the page.
There is no line between the tab and the page content.
The Home tab is also the most visually prominent tab.

This makes a compelling case for making your “at state” tab the same color as your primary background.

It was also suggested to be sure to include a Home page button with the primary navigation. Kind of surprised me, but ok. It does make it clear that here is the navigation scheme and similar looking links are primary navigation. Relying on logo clicking to get Home is not good enough.

Including a Home button also draws the visitor’s eye to the navigation at the start.

Another suggestion, make the active tab a little taller than the rest, a little bigger or consider bolding the font.

Consistency does not trump Clarity. Consistency is not always best. Shocking but true. Be flexible and be clear.

Text Links

There is an implied social contract with text links. The visitor sees the link and figures where it will take them. If it does not, you have broken the contract.

Steve implored that, “the text link has to deliver what you promised, they have to be what they say they are.” Otherwise you violate the social contract with the user. The most likely outcome is their immediate departure.

Page Titles

Prominent, well placed page titles is the second point.

They should always be at the top of the content space.
The text of the primary navigation should closely match the page title.
Page titles should be bigger, bolder and prominently located, though they need not be biggest.

Useful Tips

Feel free to break the navigation into two sections simply by adding 10 pixels or so of space.

The type face of your navigation should resize along with the body text.

Contrast is more important than type size for legibility. Good to know.

Steve recommends using the three differen sized A’s icon for visitors to resize the type themselves. This will become more accepted and valued over time.

Bread crumb navigation should include the current page, but the current page should not be clickable.
For example, In the following navigation scheme,

Mens > Boots > Walking > Brown

if you are on the Brown page, Brown should not be clickable.
This is similar to the Home page link not being active when you are on the Home page.

The best pointer for “at state” navigation is the sideways triangle pointing at the text.

A couple of sites that do all of this quite well,

www.harlem.org - continue clicking on the photo for more information

www.scottmccloud.com - very clear where you are

In addition to great information, I met some wonderful folks and am encouraged to visit again after my first UPA meeting. An impressive group of people. Thanks all. Oh, and Steve has a certain fascination with boxfish. A yellow rectilinear form found under water.

Chris Hass, Jim Spencer and Steve Krug at UPA Boston meeting
Three more photos here; http://www.flickr.com/photos/jbspartners/

Please click on the green button below to share this article.

Please leave a question or comment about this article and include a favorite usability tip.

Where is your primary navigation?

Is it across the top, down the left side or down the right side?

There are valid reasons for all three locations. Locating your navigation on the left is by far the most popular position, but it is not right for every web site.

Eye-tracking studies show that visitors begin looking at your web site in the top left corner. Because of this, the top left corner is considered the most valuable real estate on the page. Down the left side is also very valuable.

Your purpose determines where you place your primary navigation.

Selling Ads

If you are primarily selling ads, put your ads in the top left corner where they will get clicked on. Move your navigation to another location.

Branding

If branding is a critical component of your web presence, then be sure that your logo is in the top left corner.

Content focused

If your content is king, don’t put your navigation on the left, instead put it on the right or across the top.

Playing it safe

Most visitors expect to find the navigation down the left side.

Primary navigation on the top or the right is best

Placing interesting content in the most valuable real estate engages the visitor and they will want to read on, no matter where your primary navigation is located.

Why did you choose to place your primary navigation where it is?