May 12, 2004 | View Comments (21) | Category: Design Critiques
Summary: A design critique of the Method Products website.
3 weeks ago I promised Mark that I would write in greater detail why I felt that the Method Products, Inc. homepage lacked that “professional look” that can be difficult to attain. I also have not done a design critique on a commercial site before in detail.
Not trying to bombard everyone with design critiques, but this one had to be done as I try to keep my word. In any case, I think that many people will find this site to be very well done, but for me it fell short in a couple of areas.
I browse at 1600x1200 so there are some design elements that may bother me that might not bother you. But the designer chose a liquid design so I offer no apologies.
On most sites there usually isn't a need to have navigation standout. People visit sites for the content and not too look at the navigation. However, when the navigation is needed, it's nice to quickly know where you are supposed to go. In this case I think the site's navigation has some flaws.
First, there is no “home” link, but that is not the issue. The issue becomes that the global navigation is on the right side of the screen while the “home” link (the logo) is on the left side of the screen. Users who finally get comfortable with the navigation being on the right can get disoriented for a couple of seconds until the realize they must go to the left side of the screen to get back to the homepage. I would suggest placing the logo and navigation together and placing a tagline in the emptyspace that is the result of the movement.
The IA gets considerably worse once you view the products section. There is a separate navigation system in each corner of the website!
Secondly, the navigation does not inform you of where you are in the site. The header of the page tells you what section, but since the global navigation is in the top-right corner and the sub-navigation is in the bottom-left corner, I think it is necessary to highlight what section you are currently located. It's hard enough to figure out on my own which navigation to use.
Thirdly, the navigation just looks “cheap” to me (this is that professional look part). You have a site with some beautiful imagery, yet the navigation seems to have been an afterthought (both IA wise and design wise). I know that imagery is not needed for navigation and text is good to use because of usability issues, but the aesthetics of the navigation (global and sub) really take away from the professionalism of the site. Mix in Didier's Navigation Matrix (or whatever) and I believe the site would look a lot better and would feel consistently professional all around.
In my opinion this is copy done right. Each section has about 2-3 short paragraphs that simply get to the point.
I like the selection of colors in every section. No shame using a color for each section of a website especially when it adds so much value to the page. Smart move making the logo a neutral gray as it will stay consistent throughout the site. Even the navigation changes to the color of the site, which could be good or bad depending on the color. For example, on this page the navigation is difficult to read due to the white background.
Quite simply, I feel this is where the site excels. It's interesting to take note that in the images for the homepage sections (with the exception of one) the product does not take precendence, but you can see the theme throughout all of them. Imagery to the rescue.
Like the navigation, the typography fails to help the site with that “professional look”. Or maybe the content should be vertically centered. I don't know, but there is something bothers me about it. I do think Arial would work better here as its shape and smoothness remind me more of the method products than Verdana does. Of course users of Linux, MacOSX and Windows ClearType will have smooth fonts so the Verdana may come off a bit better than it does for me. However, I still feel that arial would serve the job better.
In some cases the color of the text is hard to read do the background colors of the site. On the Where to Buy page, the text is either white or black on a grayish background. Bad selection in my opinion.
IA and typography are what keep this site from being special to me. The images and colors help to provide balance although it seems this might have been the only issues the designer was focused on.
Trackback URL: http://9rules.com/cgi-bin/mt/mt-tb.cgi/238
Well if you look at this page the images on the bottom-left do reflect the navigation on the bottom-right, but only one part of the navigation. There is two parts to the bottom-left navigation and since there is no visited links at work you don't know what product pages you have already visited.
After Andrei's thing on Trebuchet the other day I am finding typeface is just a preference I suppose.
And yes, almost all the pages could be used as the homepage, but if I start on the products page for example, how am I to know there even is a homepage? Remember the home section of the site has 5 subsections on its own and the only way I can get to it (and those 5 subsections) is to click on the logo. I think that is bad IA.
Scrivs (http://www.9rules.com/whitespace/)
I concur. :)
However, I only agree with you on the fact that the lower sub navigation could use some work as well as the contrast issue with a couple of the colors they chose.
The font looks good as verdana. It helps keep a uniform style. They have done a very good job being consistent with their image. If you didn't notice, the method logo is kind of a variation of verdana.
As Mark said, the home issue isn't really that big of a deal. But the sub navagation is. Many sites place contact links and such in the footer of the page, and I think the sub navigation in method's case is easily confused with these type of footer links. Maybe if they used a lighter variation of the main color for the background of the the sub navigation it would set things off a little bit. Then maybe they could use that same lighter variation to set a bg color for the active link of the main navigation.
Jason Marble
Whew, I'm behind you with the nav and typography.
When the site was mentioned in Signal vs. Noise a while back (received kudos for goody copy) my first reaction was 'good copy, nice images, too bad the typeface lets them down'.
While typeface is hard to knock because of it's limitations, for me it's the combo of the 'naked' navigation at the top together with the copy that 'lets me down'. I wonder if a little sprucing up would do some good... lets see...
...Huh. I was going to say that we could have some fun with user style sheets, but nary a hook to hang a style on... Oh well...
Mike P. (http://www.fiftyfoureleven.com.com/sandbox/weblog/)
This has nothing to do w/Method, but is everything here turning a lite shade of pink / lavendar, or are my eyes just getting old and tired?
Mark (http://www.lightpierce.com/ltshdw)
Here? I haven't changed a thing my friend. Its your eyes.
Scrivs (http://www.9rules.com/whitespace/)
Couldn't agree more - the navigation does need some review. It is almost there but it lacks a few details that make it that much more.
Ian McFarlan
Regarding the top-right nav, it would look a lot better if the text-underline was removed, don't you think? After that, I guess I would remove the tables, remove the spacer gifs, add a DOCtype, yadda yadda yadda...
Your bud Mike of Phark and I are in agreement that multiple links on a page that all go to the same place is very annoying.
hass (http://hass.spikehost.net)
What bothers me is that the layout is all messed up in Firefox unless the browser window is at a high resolution - the text doesn't appear next to the picture, instead it gets pushed down vertically. Makes it look strange. I didn't even realize it wasn't supposed to look like this until nobody else mentioned it, so I thought to try it out with a maximized browser window, and then with IE.
Jennifer Grucza (http://jennifergrucza.com)
Of course users of Linux, MacOSX and Windows ClearType will have smooth fonts so the Verdana may come off a bit better than it does for me.
Heh. Out of curiosity, then, just what are you using? :]
eric (http://gideondesign.com)
The box I am on now is Windows 2003 Server with two 21" CRTs. ClearType doesn't like CRTs.
Scrivs (http://www.9rules.com/whitespace/)
just turn on font smoothing... I think it's medium for CRTs.... or maybe 2003 doesnt have that?
JC (http://thelionsweb.com/weblog)
Different monitors, different OS(plural), different resolutions, for me at 1024 by 768 I choose ClearType on my 17" CRT with XP, but it took a little getting used to...See?
hass (http://hass.spikehost.net)
I didn't say fonts look bad, just not as good with the technologies mentioned above. ClearType gives me headaches on CRTs...everything looks blurry. Anyways, back to the discussion...
Scrivs (http://www.9rules.com/whitespace/)
Right, sorry for the OT. You did a nice, concise critique Scrivs, it's hard for me to knock a site that has big, colorful, clear images that load fast. If I had vision problems I bet I'd feel exactly the opposite. And if I were a young child, I'd want to drink the pretty product.
hass (http://hass.spikehost.net)
Paul,
You can use ClearType on CRT's you just need to put a little more effort into it. ClearType that is automatically enabled in the appearance tab is originally meant for LCD screens giving it quite a heavy antialiasing. I actually think it looks nice, but many people I have turned on to the technology think it looks a little blurry as you say.
Fortunately, Microsoft has made ClearType customizable. They call it the ClearType Tuner.
Link > http://www.microsoft.com/typography/cleartype/tuner/1.htm
You can then take your settings on a lower antialiased level making it much less blurry and more smooth on CRTs. Today I was just doing some testing of a site I am working on with Virtual PC and Windows 2000 on Mac OS X, and it looked horrible. I wish I could find some way to have everyone see the beautiful fonts that I see. The annoying thing is that MS, in all their infinite wisdom, left ClearType off by default. Almost 90 percent of Windows XP users with LCD screens have no idea what it is until I turn it on for them. How sad.
Josh (http://www.thescenicroute.org)
Ah, you are very right Josh. It can be used! Thank you very much. Time to go post this on Forever Geek.
Scrivs (http://www.9rules.com/whitespace/)
Thanks, Josh, really great info! Made me cringe to have to open IE to download it though!
hass (http://hass.spikehost.net)
Hey, Glad you guys found it useful. Hass, Don't you use IE for site testing purposes anyway?
Josh Bryant (http://www.thescenicroute.org)
Thanks, Josh... I passed it out to everyone in my office who's using XP.
Worked particularly nicely for my coworker who misses his home g4 imac so much that he used DarkBlue's instructions for giving XP an OSX skin... but the full cleartype was a little too blurry on his CRTs.
JC (http://thelionsweb.com/weblog)
Keep track of comments to all entries with the Comments Feed
©2003-06 9rules, Inc. | Thoughts Feed | Notes Feed
Amazon Stores: Powertools | Jewelry | Books | Health | Landscaping | Kitchen | Movies
#1
Thanks for following up on that critique Paul.
I agree that the site blows out at higher resolutions, and perhaps they would've been better off going with a fixed size.
The fact they don't have an actual spelled out "home" link is not an issue, because if you surf through the site, I think it could be argued that 90% percent of those pages could serve as a home page. Initially in your post, you even had a link to their products page, referring to it as the homepage.
I would think that they spent a gooble of money on those photos. If I were the Method man having to sign the photographer's check, I too would want those photos highlighted on the front page - so why not have them serve as a navigation element? The links on the bottom left are just the text version of the bottom right.
I think Arial is boring for a site like method. Given the apparent overuse of Trebuchet, Verdana is a choice I can live with.
I do agree that a bit more contrast on the "where to buy" page would be nice.
Mark (http://www.lightpierce.com/ltshdw)