Wednesday, September 18, 2013

The Good the Bad and the Ugly

Hats off to our teachers for finding some fantastic examples of terrible websites!!
UGLY
http://tectorch.com
My first response YUCK!
Visually unappealing, cluttered, confusing.
In terms of the lecture this week C.R.A.P.H.T.E.D.:
C = Contrast: Not enough contrast in text size, colors, and photo size. It is hard to tell what is most important or what to read first.
R = Repetition: At least the links stay in approximately the same place on this site. Repetition of  page widths is not consistent making the viewer feel like they are jumping around.
A = Alignment: Links are center aligned making them look like text not links. The body text is not consistently aligned. Some of the text is too close to the photo.
P = Proximity: The labels on the products, on the home page, break the rule of proximity. It is questionable which tool the label goes with.
H = Hierarchy: The hierarchy on this website is unclear. The readers eye goes first to "Made by American Workers . . . for the Best TIG Welders"  then to "Home of WeldTec®, Speedway®, i-HEAD®, Heliweld II™ and the original TEC® brand of TIG welding torches". This makes the viewer work too hard to get to the most important part of the website. The branding. Who is this company? The actual name and tag line "TEC Welding Products, Inc. - Quality Tungsten Inert Gas Welding Torches and Accessories - Since 1955" are lost in the confusion.
T = Typography: OMG! Just so ugly. This website does use a readable font but because of the small size and long lines of text it is difficult to read. There are also too many headlines of about the same size making the hierarchy ambiguous.
E = Ease of Use:
Logo: No logo…bad. The viewer doesn't know what site they have landed on. Although the company of this site has a name "TEC Welding Products, Inc." and a decent tagline "Quality Tungsten Inert Gas Welding Torches and Accessories - Since 1955"  it is lost on the page.
Navigation: Although the navigation on this site is in a good place (left side) it is not clear at first that it is the navigation. Why? Text is too similar to other text on the page.
Click to information, don’t make me scroll for that: This website is a perfect example of this. Way too many navigation menu items, you have to scroll down the page to see them all. Most annoying to me - the only way to get back to the home page is to scroll down to the bottom (scroll… scroll… scroll…) to find the Home Page link.
D = Depth of Content: Too much content! Looks like every product they have is spelled out in great detail, if you could actually sift through it all. No obvious contact number (call to action).

GOOD
http://www.swagelok.com
Wow! What a difference a good web designer makes. This website has similar content to tectorch.com but is so much easier to navigate! They have done an outstanding job of organizing TONS of content. They have also succeeded in making the site visual appealing and not cluttered.  One thing they need is a tag line to sum up who they are.

BAD
http://www.richsoil.com/raising-chickens.jsp
scroll… scroll… scroll… scroll… scroll… scroll… scroll… scroll… scroll…
Too much text before you get to the relief of an image.
Too much information on one page!!
Navigation looks too much like text.
Unending information on this site!
Images just floating in space. Who can tell which text goes with which image??
BUT…
If you start at www.richsoil.com it is a nicely organize WordPress site. It is just when you click to read more… pandemonium!

GOOD
Ford Vs Toyota
Visual: Toyota wins for being cleaner and less cluttered they also have a much more modern look.
Navigation: Ford is simple and traditional and Toyota is innovative.
Car color choice: Ford. I like the way you can change the color of the car in a background so you can get a true idea of how the car will look. On Toyota's site a smaller version of the car changes color. Not as effective.
Call to action: Ford. With their badge in the lower right hand corner, it opens up to FordSocial, which asks you to show your passion for Ford. I find it a little corny, but may be effective.

2 comments:

  1. Haha. I agree. with your comments completely. I hadn't paid close enough attention, but you are right: swagelok and tectorch are essentially the same site, just with far superior design on swagelok.

    And it's funny, I saw others name this post "The Good, the Bad, and the Ugly as well. And I was really close to doing the same. I suppose great minds think alike. ;-)

    ReplyDelete
  2. Haha, I think everyone has had the same reaction with TecTorch's website. I do think it was the worst out of all of them. I agree with you that Toyota's website is much more innovative while Ford opted for a more traditional aspect. Also, the "scroll...scroll...scroll..." part couldn't be any more true! Good job!~

    ReplyDelete