Product Portfolio Usability and Design Improvements

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 colleages 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.