Executive Summary: Use the same name or descriptive text in the URL, example and description of your product. Keep related design elements in a similar palette and nearer each other than to unrelated design elements. Use words instead of numbers in URLs.

WebPageAdvisor Has No Design Yet

WebPageAdvisor’s behind the scenes information gathering and reporting engine are now running on Drupal.  The website and blog are also built on Drupal, but we have no design yet.  And none of this is visible to the public yet for that very reason – no design yet.

Professional Drupal Themes

After receiving a couple of very solid referrals to Top Notch Themes I decided to focus my efforts on their website to find a suitable theme.  They really have got their act together from a coding, quality, design, SEO and Drupal point of view.  And the site is easy to get around, unlike most other theme sites.

I am very appreciative of the quality of the themes and am very close to purchasing one.  I emailed the company and here I would like to offer a few suggestions based on my experience as a shopper today.

What are We Talking About?

I know it is a weakness, but after looking at themes for a few weeks, I really wanted to show a short list of themes to my colleagues and see what they had to say.

Sending someone a link is often a beautiful thing, but not always.  Here is a quick run down of a few things that happened and a suggested remedy.

Where is the Drupal Theme?

My colleagues are mostly available over Instant Messaging, which has it’s limits.  I contacted a friend and sent over a few links to Top Notch Themes for consideration.

Go Green Theme Display Page found at http://www.topnotchthemes.com/theme/1027

The first reply was about the Wood Flooring. Yikes, there is no wood flooring in any of the themes I was considering. Ah, but Top Notch Theme’s header has an image of wood in it. Well, once I understood what was going on, I could see that it was a simple mistake to look at the entire web page, instead of the content area.

Now, looking at the image above, there are three different potential descriptors for the information that I am specifically interested in discussing with my colleagues. I didn’t know how to be clear.

1. The Page URL – http://www.topnotchthemes.com/theme/1027 which includes information on this specific theme.
2. The Title in the Theme itself. In this case, the Title is “Nodes of Six”
3. The Theme name. In this case, the Theme name is “Go Green”

The Theme examples are in the first column. See the white page images.  These screen shots expand on a click and provide valuable information.

In the second column, in black, is information about this theme, including the price, description and even a live site using a customized version of this theme.  Great stuff.

Lower on the page is marketing and other information that is not unique to this theme and then the footer.

One Name Is Simpler Than Three

Really simply, lets reduce the potential for confusion by tieing these three items together.  It is easy, just make them all the same name

1. Page URL becomes http://www.topnotchthemes.com/theme/go-green
2. Theme Title becomes Go Green
3. Theme Name remains Go Green

Now if I ask someone to look for the Go Green theme we have a stunningly better chance of looking at the same theme.

Bonus Points

Sense of Place –

The “wood floor” issue has many potential answers, including ignoring the issue as a one off misunderstanding.  The contrast between the wood and the gradient colors below is sufficient to communicate that they are different.  The header is distinct from the page content in an appealing way.

Alternatively, a sub-header could be added.   For example, below the current header and above the two columns an additional sub-header the width of the two columns could be added.  The text in this sub-header could simply be the theme name. “The Go Green Theme”.  This would further indicate that both columns provide information about the same theme.

SEO -

I don’t sell themes, but a theme name might be a search term used by a business owner like me. Maybe not. But it is a lot more likely than a search for 1027.  In addition to the usability benefits discussed above I think there are SEO benefits to be had by switching the page name from a number to the theme name.

You could take it even further by using go-green-premium-drupal-theme as the file name.  Not that Top Notch Themes needs any SEO help with a Tool bar Page Rank of 8 and hundreds of thousands of inbound links. Yowza.  That is a lot of positive votes people.

Association -

Generally design elements that are related are near each other. Like a couple that is dating.  Unrelated things are not near each other.  Like a teenager and their parents (just kidding).  In this two column design, the two columns are nearer to the header than they are to each other.

Furthermore, the first column tends to be white, while the second column is always black.  Another post here explains the reasons for my dislike of white text on a black background.  In the light spectrum, black and white are at opposite ends.  It is for this reason that using black and white columns does not naturally communicate a relationship between the two colors/columns.  Black and white connote contrast.

Bringing the columns closer to each other and converting the second  (black) column to a white background with white text could create a strong visual relationship between the theme and the theme’s descriptive information.

Beautiful Icons -

Above the quantity sold number, there is a row of five beautiful icons.  I am not smart enough to know what each one means, so I hovered over them in the hopes that a tool tip would appear.  Thankfully a tool tip did appear for those links that are live. Naturally, for those links that are not live there was no tool tip.  In addition they are dimmed, making it hard to make out the symbol and guess the meaning.

I would still be wondering what a few of the icons might mean if I had not hopped around different themes and found live icons and hovered over them all.

Summary

I am looking forward to learning more Drupal and expect to be buying a Top Notch Theme this week after getting a few more questions answered.

Usability testing and experience are one thing.  Sometimes a fresh pair of eyes without a vested interest can see and consider design and other elements in a new and helpful light. I trust that this information proves helpful to Top Notch Themes, because I think their work is going to be very helpful to me.

Include your comments below.  Is there a benefit to using one theme name rather than three?

Shameless Plug

If you think this type of review, combined with a report containing information related to your domain name, social media penetration, SEO, design, in-bound links, meta data, analytics, validation, readability, page load speed and more would help your website or blog reach new heights, please contact WebPageAdvisor today.

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

Black Text on a white background.

White text on a black background is hard to read

White text on a black background.

You read black text in newspapers, books, magazines and online.
High contrast is good. Grey text on a grey background is not so good.

Black is Cool

But you want to be different and cool. Black is cool. More black is cooler.
Great idea, let’s make the website black. Cool.

Black text on a white background is easy to read

Well, the black font is now invisible on the black website.  Woops!
No problem, we can change the font to white. Now it is highly visible and there is lots of contrast.
Problem solved.

Black Background and White Text is not Cool

Here is where I disagree. Readability just took a huge nose dive.
Don’t believe me?
See is believing.

See the images above, or for a more immersive experience visit the link below and read to the bottom of the page. And then click the link in the text.  http://www.ironicsans.com/owmyeyes/
I suggest that your eyes will send out a sigh of relief after switching from the black background to the white background.

One Solution

If you really want a dark website, produce a dark design.  But create a main body text box and place the text on a white or even light grey background.

Readability: The ease with which most people can read text.

Readability Factors:

Low contrast results in poor readability

Contrast – difference in brightness and color between the font and the background. Black font on white is best

Line Height – the space between lines of text. Too close and it is hard to read.

Letter Spacing – the space between the letters. Too much and too little makes it harder to read.

Line Length – Number of words on a line. Very common error. Best is 10 to 14 words per line.

Text formatting improves readability, right side. from Cameron Moll

Formatting – The position of text relative to surrounding text.  Related text near. Unrelated text further away.

To improve the readability of your website consider the benefits of black text on a white background and review your line height, letter spacing, line length and formatting for the best readability possible.

Are you a fan of black websites or do you find them hard to read?

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

Constant Contact, a Massachusetts company which provides a rich set of email marketing and related services to over 250,000 customers worldwide, offers partner programs to help grow clients small businesses.  After having lunch with Gail Goodman, CEO, in October 2006, I decided to enroll in their Business Partner program.

As a business partner, I look for clients who would find the Constant Contact services compelling and help them get set up and running. Clients then manage their campaigns themselves and turn to Constant Contact for support when needed.

Recently, I received an email from Sue Sokoloski, Director of Channel Marketing.  Sue invited me to participate in a usability study of their Business Partner Console, their online marketing software.

I was immediately interested and looked forward to seeing how a firm like Constant Contact went about testing a website’s usability. I had visions of rows of testers with cameras trained on them, performing eye tracking.

Sue met me at their Waltham, Mass. Offices, and we settled into a conference room.  Two programmers joined us and connected the laptop to a projector.

We talked initially about my business, the types of clients I serve, what level of service I provide and what tasks I most commonly complete in the Business Partner Console.
The rest of the time was spent answering questions and clicking around the new Partner Console.

I was asked to complete a task and we would talk about what I was looking for, what I expected and what I found. The discussion then shifted to how to better meet partners’ expectations.

This kind of testing requires a lot of knowledge because each Business Partner operates differently and may have different high-level goals. Balancing all of these needs in one interface is challenging.

Naming was a considerable focus. Naming links accurately lends credibility and predictability to a website. We are all more likely to click on a link if we think we know where it will take us. The opposite is also true.

We covered a lot of interesting topics, such as clarity in multi-layered customer environments, position of columns for ease of use, target demographics, and appropriate font size.  It seemed like the team was really listening and interested to hear my thoughts on using the new Partner Console. The hour and a half session was friendly and very constructive. Sue had a variety of questions and tasks for me to complete and we worked through each of them.

I am grateful to have had the opportunity to provide usability consulting to optimize the new Partner Console and look forward to seeing it live. Of course if I am invited to return for another consultation, I would be delighted to.
As we said our good byes, I asked, How did you come to select me? Was it because of the work that I do. Sue confirmed that it was.

If you want to learn more about Constant Contact or consider becoming a Business Partner, click here – – http://cli.gs/ConstantContact

If you enjoyed this article, you may also enjoy this article over on http://www.jbspartners.com/blog/usability/upa-boston-offers-page-titles-and-you-are-here-best-practices-from-steve-krug

Have you had experiences with usability testing?  What was your experience like?

I would love to speak with you about reviewing your site. Please visit the Contact Us page and fill out the form so that I can contact you.

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

Mr. Whitley first asked me to review one of his new web design projects in the Spring of 2008. He was so pleased with the results that he wrote an entire blog article on the subject and recommended my services to everyone.

Mr. Whitley tells the story better than I could. Here is his story of why a web page advisor is needed.

http://www.voiceoftech.com/swhitley/?p=538

This was just the bump I needed to take a smoldering idea and turn it into this web site.

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.