Vote for Spectorbrain

May 30th, 2006

Come on, all you brainheads. Grab that optical mouse, get comfortable in that uncomfortable office chair and take some Advil for that Carpal Tunnel. Spectorbrain needs your vote.

This site has recently been submitted to Design Snack and is up for review. I need your help to show the world how much I enjoy writing Spectorbrain and you enjoy reading it. Give a positive vote, post a comment, and shout in all caps to every e-mail you write, IM you chat and blog you visit when you should be working. Together we can make this world a better place (or at least give this blog a few more votes).

Thank you for your support.

Read/Add Comments (0)  |   837 Views  |   Kudos

Digg this  |   Bookmark at del.icio.us  |   E-mail This Post

  Navigating the Winding Roads of Hyperlink Usability

May 26th, 2006

Hyperlinks are like most things in life - there’s a right way to use them and a wrong way. The choices we make in their visual treatment, content, user experience, and accessibility affect the success of your overall site.

Think about it another way. You’re driving down the road a little too slowly (especially to the people behind you) trying to find Main Street, a very common road. What subtle changes would help or hinder your success?

Here are some of the common good and bad practices of hyperlink usability.

GOOD: Make your links one consistent color and underline them.
Singing a very poor rendition of Garth Brooks, you drive happily along searching for the elusive Main Street. As you move along, your eye gravitates towards the green rectangular signs because you inherently know that those are street signs. Like these signs, a specific color and underline quickly signifies to the user that this is a link.
Source: Jakob Nielsen

BAD: Show text that is not a link underlined or with the same link color.
What if the Stop, School Crossing, and Falling Rock signs were also green rectangles? Not so easy to navigate anymore, especially during the “I’ve got friends in low places…” reprise. How would you know which is a street? The same goes for hyperlinks. Text that are not links should not be treated as such and vice versa. Blue should also be avoided since it’s the default hyperlink color and perceived to have the greatest clickability.

GOOD: Use different colors for visited and unvisited links.
What happens if there are three Main Streets in the area? What about ten? Instead of getting lost, wouldn’t it be nice if a road sign changed from bright green to a duller green to let you know that you already went down that street? Like these roads, different link colors help reduce navigational confusion for the user as long as they are different shades or variants of the same color.
Source: Jakob Nielsen

BAD: Keep all link states the same.
Would you know when to stop if the traffic light had three green lights? One out of three is pretty good odds. A long-standing usability guideline for navigation is to “help users understand where they’ve been, where they are, and where they can go (past, present, and future).” If this is not followed, users could revisit the same pages, get lost more easily, misinterpret links, and give up faster.

GOOD: Avoid changing links when the cursor hovers over them.
Imagine that every street sign you pass changes color, shape or font size. Kind of like driving in Vegas, isn’t it? And like Vegas, your site will appear more cluttered as the mouse moves around the screen. If you like hover states, I would probably go with a subtle color change from the unvisited state. It’s just enough to stand out but not enough annoy the user. Link titles (like ALT tags) that tell the user where they are going are also good practice.

BAD: Use bold and/or italic as a hovering effect.
This is not recommended because changing the text in this way increases the width of the font and may cause the text to realign.

GOOD: Do not use “Click Here”.
Try to avoid non-descriptive text. A link is supposed to “Explain what users will find at the other end of the link, and include some of the key information-carrying terms in the anchor text itself to enhance scannability and search engine optimization (SEO).”
Source: Jakob Nielsen

GOOD: Open new windows only for a specific reason.
Opening a new window disables the back button as well as annoys the user and clogs their toolbar. In most cases, only open a new window for a PDF or other non-web document, such as a large image. And make sure to give the user adequate warning by including a link title, secondary text, or a graphic icon (usually a double-window or a single-window with an outward arrow).
Source: Jakob Nielsen | SitePoint

ONE FINAL GOOD: Test your links.
You’ve driven through heavy traffic and traveled up and down many, many streets called Main, but you finally found the right address. Congratulations. So where’s the house? Why does that sign in the ground say, “404 Error: House Not Found”? After working so hard to follow best practices for your links, make sure they actually go somewhere. Smiley Cat offers some good advice on link checking software for the financially set and the financially strapped.
Source: Smiley Cat

Remember that these are guidelines, not absolutes. If your site utilizes different styles and techniques to reach your target audience and they work, then more power to you. But in most cases, some or all of these standards will aide in your on-line success.

Read/Add Comments (0)  |   1,250 Views  |   Usability

Digg this  |   Bookmark at del.icio.us  |   E-mail This Post

  More Examples of Good Flash and Bad Flash

May 24th, 2006

I am always fascinated how something can be used so right and so wrong. As an interactive designer, I often come in contact with people who claim to work in Flash or just want to use it in their project, regardless if it’s called for or not.

Now, I could go into a long discussion about how Flash can be used effectively and subtly to attract your customers and reach your goals. Then I could flip it over and dig into every nook and cranny of bad Flash, pointing out every single horribly-wrong flying letter, never-ending splash page and uncontrolled shape-shifting graphic. Trust me, it’s just bad Flash. These are the people who know, “Enough Flash to be dangerous.”

So in the spirit of just getting to the damn point, I proudly present ”Good Flash” and “Bad Flash”.

Good Flash – Ikea Dream Kitchens
This on-line marketing campaign is an excellent use of Flash, including the latest integrations of movies with the Flash 8 player. It is also a great example of a positive user experience.

• Here are our kitchens.
• Here is how we test our kitchens (with the Super Toddler).
• Here is how to buy our kitchens.
• Here is how we can help.

The concept is solid, the transitions are smooth and the user experience is very inviting and to the point. No fluff.

Bad Flash – C Creative Design
Let’s take every stereotypical bad Flash element we can think of and see how many we find.

• Floating Letters – Just look at the entrance of the logo and we can check this one off. But for an added bonus, roll over the phone number at the bottom of the page. Oh, yeah.
• Endless Splash Screens – Bad animation. Bad marketing. And the only way to possibly leave them is with a partially-hidden “Skip Intro” or “Enter” button.
• Site Stretch – With a simple resize of the browser, the site suddenly becomes unreadable and even more disturbing.
• Convulsive Transitions – So fast and jagged that Superman’s has to rub his eyes.
• Examples - 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10

I’m probably going to hear that these sites are old and haven’t had the decent burials they so desperately deserve. However, there are sites like Merv Griffin and Don LaFontaine that have a copyright of 2005. Apparently, people, including Merv, are still requesting these sites and paying for them. Don’t you think that Merv, with a net worth of over $500 million, possibly has someone in his vast empire to tell him that this site was a really, really bad idea?

Have you come across any really good and really bad Flash sites? What did you love and/or hate about them? There are a lot more out there, so let me know what you find.

Read/Add Comments (0)  |   1,124 Views  |   Design

Digg this  |   Bookmark at del.icio.us  |   E-mail This Post

  Designers: Know How to Write, But Don’t

May 22nd, 2006

A recent post from A List Apart puts forth the argument that design is a full user experience and not just a visual layout wrapped around Lorem Ipsum. I whole-heartedly agree. For any project to be successful, content and visual design need to seemlessly work together and support each other in one cohesive unit. Both are essential to promote, instruct, educate and/or support the goal at hand, whatever that goal may be. Words and images need to be introduced from the earliest stages of a project through final delivery and post-launch analysis. Yes, Lorem Ipsum is dead…and good riddance.

Where I strongly disagree is the assertion that a designer can simply pick up a book or take a class in order to add “professional writer” to their skill set. Designers, especially web designers, have been plagued throughout their careers by people who pick up a book or take an HTML class and then claim to be a web designer. It is this thought process that wastes considerable time in client meetings justifying why they should spend thousands on you when their neighbor’s cousin can do it for $50 because he just downloaded a hacked version of Dreamweaver and flipped through Web Design for Dummies.

I have heard throughout my career that there are designers and there are developers. Two different mindsets and never the two shall mix. I certainly don’t subscribe to this stereotype and don’t think it is remotely that black & white - but there is an ounce of truth. Every professional has their own set of inherent knowledge, tricks of the trade, and detailed skill sets that only come from years of experience. I consider myself a designer first. Although my writing and coding skills may support my work and make me more marketable, I am the first one to enlist a professional web content writer and coder/developer when the need arises.

Here’s my advice. Go ahead and read that book and take that class. Not to do the work yourself, but to more intelligently educate your clients and more effectively work with writers and/or developers to create the best possible product. Only then will you have the most success.

Read/Add Comments (6)  |   1,409 Views  |   Design, Content

Digg this  |   Bookmark at del.icio.us  |   E-mail This Post

  Bridezilla and the Blog

May 19th, 2006

For all of you guys out there, including myself, who run to The Shield or The Violent Bikini Manly Beer Network when the channel moves steadily towards WE or O, I will explain it in terms we can all understand. There are TV networks for women. They have programming that women enjoy. It makes women happy to watch these shows.

If you’ve noticed the show “Bridezillas” in passing or if you are married to one, it is one of the staple programs for WE, Women’s Entertainment Television. With the second season on DVD and the third season fast approaching, Bridezillas has a loyal following who describe the show as:

See why so many wonderful women temporarily turn into matrimonial monsters on our new series that takes an unflinching look at what can happen to women everywhere somewhere between “Will you marry me?” and “I do!

This year, they’ve added another level to the dream and nightmare of wedding planning, the blog. You May Now Kiss The Blog is an innovative marketing tool created by the talented groups at Crew Creative and Ka-Chew! to help promote the new season.

As promised, here’s my wooden nickel review:

Design
The design elements and overall layout are a nice departure from the standard look and feel of blog templates. Before you read a single post, you get the feeling of an upcoming nuptial and the associated mania.

Continuity
The color palette, fonts, and layout all blend well together. Although pickiness is part of the job, so is recognizing quality. The only thing that sticks out is the layout of the right sidebar. Some of the portlet headers have a white background and are slightly shifted to the right. I have a feeling this is a minor coding issue that can be easily resolved.

Animation
Now, as we all know, I’m a sucker for animation and this is no exception. The character and background treatments are clean, well-rendered and work seamlessly with each other. The stories are entertaining and to the point, supporting the promotional efforts of the blog and the show.

Suggestions
I have only one. Make this site a fully-functional blog. By interacting with readers as the show’s characters or staff, Bridezillas’ viewer base could greatly increase and possibly inspire ideas for future episodes. It is easy enough to monitor comments and only approve ones that encourage this blog’s community towards whatever marketing spin the producers and directors desire.

As far as the May 9th post, I’m with Derrick on this one. If it was up to me, I’d have the Black Eyed Peas singing “Here Comes the Bride” and The Blues Brothers take on “We Are Family”.

And that, my friends, is this week’s wooden nickel review.

Read/Add Comments (0)  |   1,174 Views  |   Design

Digg this  |   Bookmark at del.icio.us  |   E-mail This Post

  Should food be in food advertising?

May 17th, 2006

Traveling one of the many state highways these past few days, I discovered the true majesty of the American countryside, billboards. There were some well-established businesses like outlet stores, hotels and gas stations as well as lesser-known ones such as the Ice Cream Shoppe/Laundromat and the truck lodge billboard with hand-painted tye-dye circles (the text and the background).

What I did notice was the large amount of food advertising, including truck stops, fast food joints, down-home cookin’, and specialty stores. A majority of these billboards also had photos of food prominently displayed and visually nauseating.

So here’s the question of the day…”Should food be in food advertising?”

Issue #1: Photo Treatment
Listen up, Photoshoppers, this one’s for you. Unless you know what you’re doing, don’t. Don’t crop food. Don’t drop shadow food. Don’t auto-level, auto-contrast, auto-color, auto-anything food. You are dealing with the sense of taste and all the emotions associated with it. The moment the food looks fake is the moment you’ve lost another customer.

Issue #2: Lighting

Lighting can greatly affect color, especially with food. In Ikea, there is a 3’ by 6’ poster advertising their 75 cent hot dog. And those 75 cents will never leave my pocket because the hot dog is blue, the bun is grey, and the mustard is light beige. The ad has been up for a few years, so I’m not sure if it’s artistic license or laziness. But my hunger turns to humor and my money goes to a good cause, video games.

Issue #3: Weather
Rain, wind, snow, and heat change billboards in unexpected ways, regardless of the weather protection it may or may not receive. On my recent turnpike journey, I saw faded salads, yellow milk, grey steak, and blue burgers. No wonder I stuck with coffee and Smartfood.

Issue #4: Personal Preference
A hot dog can have mustard or ketchup or both (gasp!!), relish or kraut, chili or cheese. It could also be boiled, grilled, or baked. And it’s not the positive reaction you have to content with, it is the negative perception. Some who likes grilled hot dogs might think boiled dogs taste bland and uncooked. Someone who boils them might think grilled dogs look dirty. Who knows? Even if you offer all of the above, it’s that negative perception that will instantly turn off a potential customer.

Issue #5: Focus
By displaying food on your ad, you are reducing your menu and your business to that item. At 70 mph, I am not reading the secondary copy. I am seeing a picture of a hamburger, thinking that I really just want something sweet with good coffee, and continue driving. This all happens in a split second and leaves you without a customer. Even if you have the best homemade brownies and coffee in the country, it doesn’t matter. You’ll be forever known as that hamburger joint, if you’re even remembered at all.

Solution
Leave the food on the menu. You are trying to get people in the door. Advertise the price, the satisfied customers, the friendly staff, and the convenience. You’ll find me at the counter with the “Best Dessert in the State and Free Coffee Refills.” But I’ll long gone with a photo of faded apple pie.

Read/Add Comments (4)  |   1,339 Views  |   Marketing

Digg this  |   Bookmark at del.icio.us  |   E-mail This Post

  Look What I FOUND: Artifacts from the Future

May 12th, 2006

For almost a year and a half, Wired has supplied us with glimpses into the future of products, services and materialistic tendencies. It’s good to know that consumerism is thriving throughout the 21st century. No more do I need to worry about human evolution since technology will remain far ahead of us.

Take a look at what lies ahead. Robot truckers with their flannel shirts, Parlor games with DNA sequencing, and the Dream Machine, complete with commercials targeting your subconscious buying habits.

But I have to admit, it’s not all bad. The Taste Tester 5000 will finally be able to tell us what’s really in a hot dog. The smart diaper will give parents the justification they need to put off changing Junior for another hour. “He’s 82% full. Wanna bet he’ll make it to 90?”

And then there are the staples of our society, like the New York Times crossword puzzle. Even in 2019, no one can solve it without looking at the answers.

All kidding aside, I think the designers of these concepts are very talented. It takes one type of creativity to come up with an idea and very different one to execute on that idea. This is a fantastic job and I, for one, appreciate the opportunity to enjoy it.

Read/Add Comments (1)  |   2,626 Views  |   Design

Digg this  |   Bookmark at del.icio.us  |   E-mail This Post

  Now I remember why I love Tokyo Plastic

May 9th, 2006

A few years back, I discovered the Drum Machine by Tokyo Plastic. As with most work day distractions, it came to me through an e-mail chain. And like most viewers, I was floored. The link remained at the top of my favorites list and I visited it a little too frequently. But like most things in life, it faded away into the background noise of reality.

Then, like a shining light from above, I casually come across a post about the recent work from Tokyo Plastic. All of that excitement and lack of motivation at work came down upon me in a flood of drums, dogs, and evil flowers.

Their quality, creativity and timing are truly outstanding. Little Fella, the latest animation from Tokyo Plastic, is no exception. Enjoy.

• Drum Machine
• Little Fella
• Opera Dude
• MSN Alligator
• Mitsubishi Endeavor
• Mitsubishi Galant
• MTV

Latest Toyota Yaris TV Spots (working with Saatchi & Saatchi):

• MP3
• Spider
• Piggy

Pretty cool, huh?

Thank you, Scaramouch and YesButNoButYes, for breathing life back into this sluggish corporate soul.

Read/Add Comments (4)  |   1,415 Views  |   Animation

Digg this  |   Bookmark at del.icio.us  |   E-mail This Post

  A Beer and the Wet Kitten

May 8th, 2006

How about we take a quick survey. As a consumer, what is going to “encourage” you to pick one beer over another? Hold on. Before you say hot women (a lot of them) in as little clothes as possible, let me finish. Is it memorable imagery or information about the beer’s superior quality? Probably somewhere in the middle.

But here is the point, all broken down into easily digestible pieces for you. Ads tend to be more memorable when there is something to remember. I don’t care if it is hot women. When a bunch of guys walk up to the bar and decide on a beer, what’s on their mind? The clean brewing process or hot women? Hot women. Is it the taste of the barley and hops or a wet kitten? The wet kitten, of course.

I’m sure you’re thinking, “Wet Kitten? Where in the hell did he pull that out of?” It’s actually a part of the latest Widmer Brothers marketing campaign.

• Ad #1: Wet Kitten
• Ad #2: Raw Bacon
• Ad #3: Barbed Wire
• Ad #4: Toilet Bowl Freshener

On the MarketingProfs.com blog, Scott Petinga posts a rather profane rant about these print ads. Now I am the first to admit that there are things wrong with these ads, but come on? How about a fair and objective critique with some professional suggestions?

Since I’m not expecting some constructive criticism any time soon, I’ll just write my own.

OBSERVATIONS:
1. The color palette, background textures, and font choices all blend together very well and brings the feeling of refinement to the beer.

2. The distinction between Widmer and their competition is apparent and yes, memorable.

3. The photos and quotes of the Widmer brothers bring in a sense of family and visual recognition of individual people, not a soulless corporation. It’s also a great closer to the ad because it speaks to the quality of their product with a little dig at their competition.

SUGGESTIONS:
1. Switch the placement of the Widmer beer and the competition - People read from left to right. Having the competitor’s beer with the bad elements seen first sours the taste (no pun intended) of the Widmer brew. The tagline and brothers’ quotes also read left to right with Widmer first and competitor second. Switching the image placement would bring consistency to the ad.

2. Differentiate the two glasses from each other - The beer glasses look exactly the same. Even though one has the kitten, it does give the impression that the Widmer is the good beer and the bad beer. And no one really wants to associate their beer with wet kittens, do they? Some possible solutions are:

3. Make the Widmer beer clearer and cleaner - The Widmer beer looks foggier and denser than the competitor’s. Regardless of the kitten, the competitor’s liquid itself looks much tastier (as strange as that sounds).

4. Loose the lemon - The Marketing Brain: It turns off some of your audience, including myself. I consider a beer garnish sac religious and I quickly change my impression of that beer to “girly” and “foo-foo”.
The Design Brain: The color and lighting of the fruit makes it look like it was digitally-placed into the photo afterwards. It is not needed and distracts from the main focus, the beer.

CONCLUSION:
Even if nothing changed with these ads, they did accomplish their goal. You will remember their product. Whether you thought it was clever or sickening, you will recognize the logo behind the bar or on a menu and it will spark a conversation. In the end, it doesn’t matter if you order the beer now, later or not at all. Because you’re talking about it, someone else probably will.

Is it happy hour yet?

Read/Add Comments (2)  |   1,102 Views  |   Marketing

Digg this  |   Bookmark at del.icio.us  |   E-mail This Post

  The Delicious Creativity of Food Art

May 6th, 2006

On this relaxing sunny day, I realize that even though my last few posts have been fantastic in its ideas and execution (if I do say so myself), they were a little serious. So to lighten the mood and welcome the weekend, I present food art, the practice of starving yourself for the sake of your craft. Enjoy.

French Fries (Thanks to Tinselman for this great find.)
That’s right folks. Not only have French fries invaded our every meal including sandwiches, platters, and even salads (Pittsburgh style, of course). But now they are art. And I must say that I’m relieved. Once fries crept into our salads, I’ve had enough. It’s about time we took these building blocks of potatoes and grease off our plates and into the art studio.
Other Photos: 1 2

Edible Environments
Did you ever stare at your food so long that it became a strange planet, a beach, or anything else you could come up with just so you don’t have to eat what’s on your plate? No? Really? Well…neither did I. Anyway, check out how far someone will go not to eat their veggies.

Philosophy and the Pancake
It is not so much that these talented food artists (excuse me while I clear my throat) have transformed the everyday elements of mildly-nutritional consumption into a wondrous adventure of artistic analysis. No wait, it is. The image is only half the story. Make sure you read the “Artist’s Statement” to get the full breadth of the soul searching they endured. Love and hate. Love and hate.

Boy, I’m hungry. There’s a non-creative pizza in my immediate future.

Read/Add Comments (0)  |   904 Views  |   Art

Digg this  |   Bookmark at del.icio.us  |   E-mail This Post