Browser resolution and layout design

June 11th, 2007

As web designers and developers, we tend to understand the latest trends and account for them as we create and code. And no matter how hard we try, browser resolution always seems to be one of those trends that rears its ugly head. Yes, 800×600 is slowly disappearing and 1024×768 is becoming the standard. We all know that. But unfortunately, we still have to design for it.

As you might have figured, the current web stats and trends do support the slow fading away of the 800×600 browser resolution. W3Schools, with data collected every 6 months, states that as of January 2007, computers are using a screen size of:

• 800×600: 14%
• 1024×768: 54%
• Higher: 26%

Now keep in mind that this data is across the board use. Individual sites, demographics, industries, etc. will all vary from these numbers. And this is where the fun starts.

Get to know your user
Before you begrudgingly start to design for 800×600, find out if your target audience is even using that resolution. Sure, there will always be people with different resolutions that visit your site and of course, you can’t account for all of them. It is the internet after all. But who are the people that are actually going to buy your product or use your service? Those are the people you are going to design for.

Yes, it would be foolish to ignore the other people visiting your site. After all, a sale is a sale is a sale. But don’t let it greatly affect your overall design and user experience. You can account for them without focusing in on them.

So how do you do find out who is using what?

The first route is with market research through a third-party or by yourself. Both ways are fine as long as you have the time, money and confidence in either route. There are dozens of industry-specific magazines, reports and sites out there the will give you the low-down on the market trends you are currently in or trying to penetrate. After all, why do the extra work if someone else has already done it for you?

The second way is obvious to some and oblivious to others - talk to your customers. Find out their likes and dislikes. Observe them on the job. Ask them questions. You’ll find, as I have, that most people are very willing to share their positive and (especially) negative experiences when asked. It feels good for someone to take an interest in what you do. And don’t discount the negative answers to your questions. The most valuable information you can get comes from a negative experience because that is where your customers’ needs truly are and where you have the most opportunity to satisfy those needs.

Design Options
So you did your due diligence and found out that your target customer base uses multiple browser resolutions. What now? Well, you basically have 3 options: liquid layouts, resolution-dependent layouts or design a site with a set width of your liking or of a coin toss. Let explore each of them.

1. Liquid Layouts - You’ve more than likely seen this type of layout before. This is when a site is designed and coded to stretch out and in as you increase or decrease your browser size. (example) They are relatively common and like anything, can be designed well and not-so-well. Some things to consider when designing a liquid layout are:

   The graphic element(s) that are going to stretch. Usually this is a background color or a small portion of a photo that can be duplicated horizontally. When duplicating a photo slice, take a good look at, well, how it looks. Repetitive patterns can look amateurish when the colors and textures don’t match up. Also, take a look at the stretching portion in context to the entire photo. Two business people talking next to each other indicates collaboration, but may give the feeling of not understanding each other’s point of view if stretched apart.

   The content. Just because the graphic elements stretch to entire length of the browser does not mean the content also should. Keeping your column width between roughly 400 and 650 pixels allows the best readability for your users. By setting a minimum and maximum width, you can accomodate the liquid design and still keep your users (who know how to read) happy.

2. Browser-dependent Layouts - These handy-dandy pieces of code use javascript to detect the user’s browser size and then calls different CSS based on that size. The CSS can be completely separate style sheets or different elements within the same style sheet. Back on ‘04, Cameron Adams demonstrated how he switched between a 4-column and 1-column layout with JS and CSS (article | demo). Since then, Cameron has updated his code and others have joined the mix. Particle Tree, for example, wrote some solid code that modifies the layout a little smoother (article | demo).

   When implementing this solution, make sure that the user experience is consistent throughout the different column positions. If they’re asking, “Where the heck did that column go?” then you’ve done it wrong. Your site could seem confusing or even worse, broken. The best example I’ve found of resolution-dependent layout is UX Magazine. The transition is smooth and the site still has a consistent experience even when the column positions have been adjusted. Take a look at this not-so-great example. I spent more than a few confusing moments trying to find the second column when it relocated. Probably not how you want your potential customer to react.

3. Set Width Layouts - There are times that you’ll want to design your site with a set width. Your decision may based on the results of your market research, the complexity of your site or any other reason that strikes your fancy. After all, just because you can make a site liquid or resolution-dependent does not mean you should.

Final Thoughts
As always, make sure you know your target audience and follow the best practices of usability, design and clean code regardless of your layout choice. And, on a positive note, at least we no longer have to design for 640×480.

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

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

  Designing for the preview pane

June 5th, 2007

Are you too busy to open your emails during the day? Can’t afford that extra click of the mouse to receive your friend’s message about the latest YouTube video? Or maybe you’re just too damn lazy. Whatever the reason, have we got the solution for you. It’s quick. It’s easy. And it runs by default on most email clients. Curious? Impatient? What could it be?!?

You’ll find out…right after this brief message from Microsoft and Outlook 2007. “Outlook 2007: Setting email code back to 2002 since 2006″.

To many of us out there consistently fighting the daily onslaught of our inbox, the preview pane is the answer to our prayers. It allows us to view a portion of an email without the need to open it. This save us time and provides more information about the email before we make the decision to open or delete the message.

All of that is well and good for the user, but how do you design for it? Not only do you have to still consider the overall message that you’re convincing the recipient to read and ultimately take action on, but we have 25% of the space to do it in. Wait, there’s more. This precious 25% of space could be displayed horizontally or vertically, depending on the setting of the email application and the individual recipient. Having fun yet?

Okay, okay. Enough of the dramatic effect. This isn’t the end of the world. It’s just going to take more consideration and planning. You only have 2-4 inches to convince someone to open your email. Let’s explore how to do it.

The Stats - Customer Usage

• Overall, 64% use preview panes as default when they are presented with this feature.
• 95% of B2B users have email clients that are preview pane capable. 64% are using them.
• 38% of B2C users have email clients that are preview pane capable. 27% are using them.

If you’re thinking right now, “I market to B2C. 27%? Awesome.” - don’t. This preview pane usage may seem low, but it’s deceiving because it takes into account web-based email clients. But don’t you fret. The new versions of Microsoft Hotmail and Yahoo! Mail are preview pane capable. So that 27% will just grow and grow and grow.

More Stats - Age Usage

• 84% of 18-34 year olds
• 68% of 36-54 year olds
• 58% of 55 and older

Viewing Methods
As I mentioned earlier, there are 4 ways you can use a preview pane to view your email - small horizontal, large horizontal, small vertical and large vertical. The good news is that the majority of these users are using the horizontal preview page - 18-34 (76%), 36-54 (74%), 55+ (81%) - which is easier to design for.

Take Action
The upper left corner is the one area that is displayed in all preview pane layouts, so take advantage of it. Reduce the size of the masthead images/logos and move them out of the left corner. Put your most important call to action in that space instead. In promotional emails, proudly display your offer or a “Shop Now” call to action. For your e-Newsletters, list your table of contents or an “In this Issue” teaser highlight.

But my branding, my identity, is in that left corner? What is an e-marketer to do? Remember that email marketing is about encouraging action, whether it’s to buy a product, register for a webinar or simply view a web page. A masthead may brand your email, but it does not encourage action. Don’t worry, your email’s “From” address will still have your company name and your subject line will still include the name of the email. At least industry best practices says it should (hint, hint).

And now for my “wet blanket” moment. Just because someone does not use a preview pane does not mean they read your entire email. They just see your subject line and line listing and are making the decision to open or delete your email based on that text. So don’t forget the subject line.

A Final Thought
Designing for the preview pane is not a massive undertaking, so don’t sweat it. It just takes some additional planning and considerations of your goals, your audience and the action you’d like them to take to reach those goals. Your bottom line will thank you for it.

Read/Add Comments (0)  |   2,088 Views  |   Design, E-mail

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

  Wanderwall falls down as CommArts builds it up

May 31st, 2007

This week, Design Interact introduced a new site called Wanderwall. This news item describes Wanderwall as:

…aiming to blur the boundaries between professional and user-generated content in a novel, fun and interactive format.”

For the sake of this post, let’s just agree to say “claiming” instead of “aiming” since it actually makes a lot more sense.

Here’s Wanderwall in a nutshell. Started by a London advertising executive, this site blends user-generated content with purchased advertising content and displays them in small graphical blocks spread across the page. As you roll over each of the images, a window opens up with a larger photo and a caption. And if you’re interested, click on it and away you go to that site, video clips, etc. There are 9 categories to choose from, including news, sport (apparently there’s only one sport), showbiz, men, women, celebrities - you get the picture.

An innovative interface where user-generated and advertising content is displayed in a uniquely visual and interactive way? Great, I’m in. That is, until you actually go the site.

Just Enough Flash to be Dangerous
Wanderwall is made completely in Flash. No, not the cool Flash sites with video, dynamically-generated content, etc. It’s old school, bad flash. Choppy animated transitions with windows swooping in. The entire site shrinking in proportion with the browser size. Annoyingly bright, primary colors with the standard overuse of drop shadows, bevels, and outer glows. Overly-beveled, blurry photographic images. Oh my god, I’m back in my first year of art school. It’s my “Introduction to Flash” class all over again.

Web 2.0 does not mean the year 2000
Just because users can submit content to be displayed on your site does not mean you can call yourself a “user-generated” site. Especially when they have to fill out a form that opens in a new browser window and then their content takes 24 hours to show up on the site. And please, don’t compare yourselves to MySpace and Facebook since it’s obvious you’ve probably never even visited the sites.

Suggestions and Solutions
Where to begin? Where to begin? How about you start by keeping the overall concept and trashing the site. Throw it away. Kill it. Destroy it. Do a Pink Floyd and “break down the wall”. Then start again by figuring out what Web 2.0 actually is, look at your competition and pay some real money for professional usability engineers, web designers, AJAX developers, etc. It’s a solid concept. Just do your due diligence and create a site that is so damn incredible that users have no choice but to “wander”.

Bad, CommArts, Bad
This is where I stop my critique. Not because I have nothing else to tear down and over-analyze because, believe me, I do. I just want to focus on the most disappointing part of all this hubbub - Design Interact and Communication Arts.

Communcation Arts is a professional, industry magazine. Design Interact is a section of their site that focuses on the on-line and interactive professionals and industries. There are forums, resources, interviews, and even “Site of the Week” awards for the best of the best - which they definitely are. I know countless web professionals, including myself, that explore the winner archives for trends and inspiration.

So how is it that such a valuable resource to countless design and marketing professionals can promote Wanderwall in the same breath as the Michelin Better Mobility and Verizon’s action hero websites? I’m at a loss.

I understand that the article was a press release and not written by your staff. You can tell by the self-congratulating fluff that’s permeates through every paragraph. But isn’t there anyone at that magazine that reads this stuff and possible asks, “Does this belong on our site?” or more importantly says “Wow, this is a pretty crappy site.”

Who knows. Maybe it was just a slow news day.

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

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

  Toddler TV Logos straight from the toddler’s mouth

August 19th, 2006

Last week, I posted a review of today’s most popular logos of Todder TV and analyzed them in the areas of design, emotion and representation. I then boldly declared the winner, loser and honorable mention (at least in my own mind) of each of these categories and overall.

Earlier today, I had the distinct honor of showing a 2-year old and a 4-year old - a true representation of the target Toddler TV audience - the logos I chose for that original post. They excitedly identified, like most kids would, most of the logos with energetic chatter about the characters and storylines.

But then they pointed to three of the logos and asked one, innocent question:

What are these?

Much to their confusion and my pride, they were asking about

• The Backyardigans - voted worst in Emotion
• Dragon Tales - voted worst in Design
• Higglytown Heroes - voted worst in Representation and Overall

I gave them both a lollipop, a high-five and my business card. “Call me when you can drive, kid. I can always use a great designer.”

For the full review, please read (or re-read) “The Best and Worst Logos of Toddler TV“.

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

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

  A closer look at the Binoculars Site Preview of Ask.com

August 13th, 2006

Competition among search engines to “deliver fast and relevant information” is fierce. Companies such as Google, MSN, Yahoo, Lycos, etc. are in a frenzy to grab your loyalty (and your homepage) by shoving down your throat the power of their search algorithms, uniqueness of their results layout and innovativeness of their added features.

When Ask.com reinvented itself in February of 2006 - most visibly with the retirement of Jeeves - they introduced new technologies and features in the hopes of turning around one of the lowest ranked search engines. (For more information about these enhancements, read Richard MacManus’ well-informed post on the subject.)

One such feature, named “Binoculars“, allows the user to see a site preview by rolling over a, you guessed it, binocular icon. With the help of AJAX technology, this thumbnail image appears without refreshing the page. While it’s obviously a cool feature that’s intended set Ask.com apart from the competition, there are some usability and design issues that should be addressed.

I’m sorry to have to break it to all of my fellow web designers out there, but this pixilated 246×260 screenshot is now part of the user’s decision-making process. This also means that it should be part of our design process. Let’s explore how.

• Visual Emphasis of Site - Search engines are used to find a requested contextual or graphical item with varying degrees of specificity. The thumbnail view shifts the focus away from this relevant information to a high-level visual layout of the site. The result is that the user could choose to visit a site because it has the right shade of blue instead of the best information for their search task.
• Inaccurate Previews - According to their FAQs, screen captures are taken periodically and not in real-time. This means that what the user sees is not always what the user gets. The large PDA sale image in the preview is suddenly replaced my something completely unrelated once they click to the site. And even though it’s a technological limitation of Ask.com, do you really want a potential client subconsciously blaming your site for the differences and visit another site? I’m not saying that this will happen, but it’s a consideration because it could happen.
• Product Treatment – Usability principles state that the main reason someone goes to a site is to perform a task, regardless of how targeted or loosely-formed it may be. When the user’s task is to find a product, they’re specifically scanning for details of that product. They want to know how it looks, how it’s used and how it benefits them. Think about the user. They’ll have to click through to see how the product is used and its benefits, but they can see how it looks right in the site preview. And that image can lead them to or away from your site. So, when you’re designing, remember that what looks like a perfect image size of your product on the actual site might look small and inferior in the preview and vice versa.
• Behavioral Interruption – With roughly a decade of search engines behind us in one form or another, users are accustomed to the visual and behavioral aspects of these engines. They know what keywords to search for and how to type them in (and, or, comma, etc.) as well as what to expect in the listed results. Users, including myself, quickly scan the first few words of each result plus any relevant search content (abbreviations, numbers, etc.) and move on to the next listing until they find what they’re looking for. This behavior is fast and effective.

  What these binoculars do is place a big stop sign in the middle of the highway. The user has to get out of their almost automatic scanning mode, slowly move the mouse so it hovers over the binocular icon and then view/comprehend the preview image. If it’s not what they’re looking for, they press the gas pedal down to once again get up to scanning speed. This adds time and frustration to their search. There’s a reason Steven Krug titled his usability book, “Don’t Make Me Think”.

Now this analysis is all well and good if it wasn’t for one important question – do people actually use it? I’ve talked to several people in and out of the web profession who consider the “binoculars” preview just a gimmick and nothing more. If that’s true, I just wasted a whole lot of words. But on the other hand, I’m sure there’s someone within the hundreds (or millions) of people reading your search result that consider the preview just a little bit more useful.

So, are the “Binoculars” Site Previews a gimmick or gold? Are they fantastic or just fluff?

What do you think?

Read/Add Comments (20)  |   13,909 Views  |   Design, Usability

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

  The Best and Worst Logos of Toddler TV

August 2nd, 2006

I’ve always been fascinated with toddler TV, specifically the animated shows. You’ll find techniques in this genre that you’ll rarely find in any other demographic, such as puppetry and stop action. When I have the opportunity to watch these shows with children, I take advantage of it. My attention is split among the storyline, the animation techniques and the kids’ reactions.

And let me tell you, I’m Mr. Popular Adult when these shows are on. Oh, yes. I’m frequently told to “Shut up. You’re ruining it for the kids.” Is that really fair? Must I suffer this cruelty because I simply point out things that are so intriguing to an animation fan and professional designer but quickly destroys a child’s illusion that these characters are real? Yeah, probably so.

The Question
As I watched the “Toddler TV” episodes and how I and the audience reacted, it made me wonder - do their logos receive the same reactions as their shows? I can tell you with confidence that there are some shows I love and some I absolutely hate, both on a professional and personal level. Do their logos bring up the same feelings? Are they helping or hurting the success of the programming and the larger brand? Why?

The Audience
Before we get to the logos, let’s define my self-imposed label of “Toddler TV”. These are television shows that are targeted towards 2 to 6 year-old children. They’re usually found on PBS Kids, Nick Jr., and Playhouse Disney as well as every DVD collection of every parent of children in this age group. There are obviously some older and younger kids that also watch, but we’re going to stick with this target demographic for the sake of this discussion.

The Criteria
I’ll be rating these logos based on the following areas:

1. Design - This area takes a look at the more technical aspects of the logo, such as the font choices, color palette, white space, etc.
2. Emotion - Here, I’ll examine what feeling the logo emotes and if it’s in line with the show’s character and personality (as much as I can as an adult)
3. Representation – Does the logo accurately reflect the show? Can you gather the setting, storyline, etc. from just looking at the logo?
4. Overall – Which logos stand out and which ones give up?

So without further ado - the logos.

[ View Larger Images ]

You’ll notice that I didn’t include the long-established logos in this discussion, such as Sesame Street, Mr. Rogers Neighborhood and Clifford. Purely from a design perspective, they were created in a different era with different design trends and societal influences.

I’ve also excluded any logos that include the show’s characters (Arthur, Dora, Wiggles) because the emotional response and level of animation integration could be based on the characters and not the logo itself. And since many of these shows use both logos interchangeably, it didn’t impact my analysis to choose the non-character versions. The only difference is Arthur, which doesn’t have a non-character version.

To see a larger version, click on the selected logos below.

Design

BEST – Bear in the Big Blue House
This is a very clean and well-balanced logo. All of the lines, including the wonderful font choice, seem to follow the same slight curve, almost like they’re following the horizon. These curves coupled with the lack of hard lines and corners makes it calm and welcoming. There’s also a great balance between the brown and blue as well as the colors and surrounding white space. And although bear’s face is the majority of the logo, it rests comfortably within the surrounding space and doesn’t overpower the design.

WORST – Dragon Tales
This logo looks unfinished not very well thought out. The color palette of green, green and greener blends the logo into a grassy blur. The blue outlines don’t help because they’re too close to the dark green to bring out the tail or anything else. The font choice and placement crush the words within the tail to an almost unreadable status. Dragon “Tales” – Oh, it’s a play on words. I get it. Thanks for over-explaining it.

HONORABLE MENTION - Bob the Builder
This one was a toss up between Bob and Little Einsteins. But solely from a design perspective, I have to give it to Bob. Unlike most of the logos, this is a very heavy and compact design that works for the show it’s representing. The hard lines and heavy bevel of the background bordered with rivets works well with the font and spacing choices of the show’s name. The yellow letters are beveled just enough to fit nicely in the steel-like structure, but not too much that it competes with it. And while the tight kerning might hurt another logo, it aids in the portrayal of a solidly-built structure. Very well done.

Emotion

BEST – Barney & Friends
With a simple illustration and flowing fonts, this logo does a great job of making you feel like singing and marching down the street without a care in the world. It utilizes all the available white space to give that open air feeling while appealing to all ages of their target audience.

WORST – The Backyardigans
Besides the two “Nick Jr.” flowers, there’s really nothing to give the viewer any sort of feeling. What emotion you get from the color yellow is minimized by the squashing of the uppercase letters as well as the equal thickness of the yellow and its similar green border. A negative emotion is probably not what was intended when designing this logo, but that’s about the only emotion I get.

HONORABLE MENTION – It’s a Big, Big World
Although the design has something to be desired, this logo allows you to feel the emotions also found in the TV show. The logo height combined with the extending kerning and individually-angled letters adds some spontaneity and playfulness. The well-chosen contrast between the lower-case and upper-case words also adds to this feeling.

Representation

BEST – Dora the Explorer
This logo does a great job of representing its TV show and the larger brand. The font colors are bright, unique and energetic. And with the leaves in the background, an adventurous feeling is created for the viewer. The two “Nick Jr.” butterflies add the final touch with the element of nature. The entire package works flawlessly together to give a solidly represent the show.

WORST – Higglytown Heroes
This logo shows absolutely nothing about the TV show it represents, not even subtly. The color and font choices are unrelated and since the characters are egg-shaped, it’s beyond me why the logo is not the same shape. Especially in the children’s entertainment industry, some representation should be present, even subtly. This logo just doesn’t work.

HONORABLE MENTION – Blue’s Clues
This is an excellent example of how to use a logo as a main story element. In the show, the blue footprint indicates a clue location. Children interact with the show by actively looking for these blue footprints throughout the story and using those clues to decipher the puzzle.

Overall

BEST – Dora the Explorer
Although the design isn’t as polished as some of the other logos, it’s definitely a solid choice as the overall winner. The treatment of color, font, layout and white space is pleasing to the eye and gives the viewer an energetic and adventurous feeling. The logo also does a great job of representing the TV show and the overall brand. It effectively does this with its design and the use of the blue arrow as a key plot element in the show itself. Others may have come close, but this logo stands above the rest.

WORST – Higglytown Heroes
There isn’t much that’s inspiring about this logo. The colors don’t compliment each other and the shape isn’t symmetrical or pleasing to the eye. It seems like everything is competing for the same space. Besides being poorly designed and executed, this logo elicits no emotional response and no indication of what show it represents. Although there are definitely other logos that I’m happy to put here, this logo offered nothing positive in any of the categories of this review.

HONORABLE MENTION - Bear in the Big Blue House
As I previously mentioned, I’m very impressed with the clean and well-balanced design of this logo. It also gives the viewer a very calming and welcoming feeling and effectively represents the show. Not necessarily in literal terms, like the rivets in the Bob the Builder logo, but more in the personality of Bear through the illustration.

Well, that’s my 2 cents. Now, as promised, it’s your turn.

Please take a moment to let me know which logo you think is the best and worst overall and within each category. Feel free to add a logo that I didn’t include in this article. I’ll do my best to post the results for our own selfish enjoyment.

Or, if you want to play it old school, just leave a comment ranting about the Wiggles and the end of the world. You know how I love a good rant.

Read/Add Comments (15)  |   9,648 Views  |   Design, Media

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

  Design Advice from my Deathbed

July 19th, 2006

In my many years traveling through the professional world of design, I have been called upon to offer advice. Some young hatchling of a designer wanders up to me, all bright-eyed and bushy-tailed, and asks the one question that will lead them on the path to greatness.

If you had one piece of advice for an upcoming designer, what would it be?

I love being asked that question. Designer’s ego aside, it’s a great opportunity to help others avoid the mistakes I made or at least recognize them when they happen.

And what better place to offer this sage advice than on my proverbial deathbed. So let’s set the scene…

My maroon and beige Victorian bedroom is dimly lit by a few candles. Flowers and food baskets with quickly-written get well cards are carefully placed throughout the room. The air is still. Family members remain in a supportive, yet empty, gesture. Some sit with arms folded while others pace, offering an occasional nod or comforting touch to another’s shoulder. Conversations often break the silence with talk of football, funeral costs, work and the latest Vegas odds on when I’ll bite the big one.

I beckon my offspring to my side. “As you enter the strange and wonderful world of design, I have one piece of advice that I hope you will take with you throughout your careers and lives.”

“Yes, father?” they reply anxiously.

“Trust yourself.”

They touch my hand, thank me with all the love in their hearts and begin to walk away. With a belabored breath, I call out to them. “Offspring?” They stop and turn. “Yes, father?”

“I’ll probably kick off tomorrow. Let’s talk.”

And in the next six hours, this is what I told them. Well, at least the highlights.

Design:

• Take criticism seriously, but understand where it’s coming from and why it’s being said.
• Know the difference between inspiration and plagiarism.
• Design for the client, not yourself. If you’re trying to satisfy your own creative desires, go paint a landscape.

Content:

• Keep it short and to the point.
• Have a consistent message in your content and your imagery.
• Throw “lorum ipsum” in the trash. You can’t design if you don’t know what is being said and how much text is being used to say it.
• Don’t fool yourself into thinking you can write. If you can’t, suck it up and get someone who can.

Usability:

• Give usability your highest consideration, but don’t use it as your sole measuring stick for your design.
• There are standards for a reason.

Coding:

• Don’t be afraid of DIVs and CSS. They can be your best friend.
• Never forget your ALT tags.
• Write your code by hand, not WYSIWYG.
• Even if you can’t code it, understand it. You’ll be able to discuss it and design for it.
• Don’t fool yourself into thinking you can code. If you can’t, suck it up and get someone who can.

Flash:

• If I see a tween in your library, I’ll come back from the grave and kill you myself.

Clients:

• Take what a client really wants and translate it into what they really need.
• Offer your opinion and back it up with proof.
• Remember that you are working for your client, not yourself.

Business:

• Design is a business. Treat it as such.
• Never do work on spec.
• Always have a contract.
• Success is understanding the client’s bottom line as well as your own and how you can benefit both.

Ethics:

• Reputation is everything.
• Ask for help.
• Be honest and up front. If you say you can do it, do it. Otherwise, don’t say it.

As they walk away from my side, overwhelmed and under-impressed, I know I have done all I can do. It’s now up to them. Good luck, my offspring, good luck.

Read/Add Comments (3)  |   2,330 Views  |   Design, Business

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

  There is a lot more to branding than just usability

July 14th, 2006

In his recent post and MediaPost article, Gord Hotchkiss expands on Jakob Nielsen’s following point at a recent usability conference:

When responding to a question from the audience about the seeming contradiction between the need for building of brand exposure and best practices for usability, Jakob said that online, brand value is built through experience, not exposure.

Unlike so many followers of Jakob Nielsen would have you believe, branding is not just experience. Branding is a combination of experience and exposure. This “experience-only” position is usability-centric point of view that’s contradictory to the real world. It doesn’t take into consideration what visual branding is, what it accomplishes and what it represents for the business and the consumer.

Before I go any further, let me make one thing clear. I am a strong proponent of usability. I study it and incorporate it into every project I do. But usability is not the sole measuring stick in creating, and especially branding, a web site.

Defining Usability
Jakob Nielsen defines usability as:

Usability is a quality attribute that assesses how easy user interfaces are to use. The word “usability” also refers to methods for improving ease-of-use during the design process.

Let’s take a closer look at what he is saying. This definition refers to “…how easy user interfaces are to use” as well as “…methods for improving ease-of-use”. This is all about the interaction between the user and the web site. That’s it.

He then expands on this definition by saying that usability is defined by five quality components:

1. Learnability: How easy is it for users to accomplish basic tasks the first time they encounter the design?
2. Efficiency: Once users have learned the design, how quickly can they perform tasks?
3. Memorability: When users return to the design after a period of not using it, how easily can they reestablish proficiency?
4. Errors: How many errors do users make, how severe are these errors, and how easily can they recover from the errors?
5. Satisfaction: How pleasant is it to use the design?

Again, this definition is only about user interaction. I know there are other definitions out there, but it’s appropriate to use Jakob’s definition since he’s the one who made the statement about branding and experience. So based on his definition, where does branding come in? It doesn’t.

Defining Brand
I’ve been through many sites to find the best definition of branding and here is a complete and concise explanation. (feel free to disagree)

A brand is a product, service, or concept that is publicly distinguished from other products, services, or concepts so that it can be easily communicated and usually marketed. A brand name is the name of the distinctive product, service, or concept. Branding is the process of creating and disseminating the brand name. Branding can be applied to the entire corporate identity as well as to individual product and service names.

So what are we saying here? First of all, a brand is “…a product, service, or concept that is publicly distinguished from other products, services, or concepts…” Branding is the act of “…creating and disseminating the brand name.”

Think about a product or service you’ve used recently. Let’s take orange juice. What are your initial impressions of these brands?

• Tropicana – Family, tradition, and nutritional health
• Florida’s Natural – the orange groves and the natural growers that support it
• Simply Orange – the natural quality of their oranges because they are left alone

Now think about how you came to these conclusions. It is the combination of imagery, content, audio, video, etc. that creates those messages and reinforces them across all media. This may include print, radio and TV spots, signage, packaging and – wait for it – web sites.

Take a moment to visit these sites (links in list above) and think about their branding. How does it make you feel and think? Are you as interested in their products without it? Go ahead, I’ll wait.

What we get is an immediate impression of one product branded three different ways – and the importance of the visual elements in these brand choices.

The Discussion
Jakob Nielsen and other usability experts have said that on-line users crave consistency and hate change. That’s why usability standards dictate that navigation is on the top or on the left, the search field is on the upper right, hyperlinks are underlined, etc. I can go on and on. But does this desire for consistency stop with user interaction?

Absolutely not. It flows right into their feelings, impressions, and yes, experiences of a product and/or service based on that branding message.

Another very important aspect of branding is that it exists below the surface. The true effectiveness of a brand is when you don’t notice it. Branding gives the customer comfort and reassurance that this is the place they should be and confidence in the end result. When it isn’t there, then you definitely notice it.

This is the reason why eyetracking studies by Jakob Neilson and others – as Gord Hotchkiss discussed - show minimal or non-existent movement on images. The user instantly recognizes the brand and moves on to the information they are tasked to find. Eyetracking shows a concentration on content because the user doesn’t need to look at the visual branding elements any more. They registered it. They’re done. Yes, users have gotten smart about innately skipping over advertising or graphics that look like advertising. This is not disputed or my point. We’re talking about branding.

Hotchkiss continues:

They’ve come to the site not because they’re engaged with your brand, although that may have helped sway them in your direction, but because they’re engaged with a task.

People do go to a site for a task. Whether the task is focused or unfocused, they are going there for a reason. But don’t discount the fact that the reason they go to that site in the first place is because of the brand message that they’ve been exposed to and accept. If a potential customer went to a site and just saw the logo and text without any other branding element, what would their response be? Am I on the right web site? Maybe not on the surface, but just that instant, subconscious moment of doubt gives them an opportunity to leave the site.

And while I agree that huge home page images are a detriment to a site, Jakob intends to give the user only the information they want for that particular task and forego text and images for branding purposes. That is a detriment to the site as well.

The Point
Steven Krug, in “Don’t Make Me Think”, describes his principle of usability as follows:

In means that as far as humanly possible, when I look at a Web Page it should be self-evident. Obvious. Self-explanatory. I should be able to ‘get it’ – what it is and how to use it – without expending any effort thinking about it.

It should be obvious. But pay attention to what else he says, that he should be able get what it is and not just how to use it. “What it is” is the web site of the company he intended to go to and here is the information I need. Brand and content. Exposure and experience.

And he did it “…without expending any effort thinking about it”.

A Designer’s Side Note
In his supportive post of Gord’s article, Gary Bourgeault states that

…high-priced designers are being asked to make lower priced sites. There is nothing else to it. People are beginning to understand , after years, that pages that load slow and sites that aren’t clear in what the visitor is expected to do, underperform tremendously.

His point that “high-priced designers are being asked to make lower priced sites” is the only reason why they are up in arms about this “discussion” is absolutely ridiculous. Some designers are high-priced because they have the knowledge and experience in design, coding, usability, and/or content.

And yes, designers are being asked to make lower-priced sites because there are hacks out there that can read a book or open Dreamweaver and call themselves web designers. Any designer worth a damn will tell that person to go to that lower-priced designer, knowing full well that when their site does “underperform tremendously”, they’ll be back in a month to get it done the right way.

And By the Way…
I was also in the eyetracking seminar at the San Fran Usability Conference. No, I was not the self-serving “hot-shot” designer who spouted textbook design terms with nothing to add except stroking his own ego. Like the rest of the room, I thought that idiot should just shut the $@(%$*% up.

However, I was one of the many who brought up branding. It was a valid point and I would happily do it again.

Read/Add Comments (0)  |   2,289 Views  |   Design, Usability

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

  The Emotional and Creative Addiction of Post Secret

July 12th, 2006

After a long day of Jakob Neilsen’s brand of usability, I relaxed with a plate of Dim Sum and a couple of Tsingtao - San Francisco style. I casually strolled down a couple of blocks and came upon a book store. Not just a bookstore, the book store of alternative culture - City Lights.

I wander in, feeling over 50 years of creative history in the air. The free-flowing conversations of Jack Kerouac, Allen Ginsberg, Neal Cassady and others permeate through the walls. And amidst all of that passion, art and history, what did I sit down to read first? Yep, the Post Secret book - and I read it cover to cover.

I have no doubt that Post Secret has been blogged about before, but I felt it’s worth another mention. Post Secret is truly an emotional addiction. The simplest of ideas - get a postcard and write down your secret - has opened inner workings of average people for the world to see.

In one scroll down of the web page or several flips of the book, you’ve traveled the spectrum of emotions. And it’s not only that you feel something, it’s that you can relate to it. Either you’ve felt the same way, know someone who did, or enthralled by the fact that someone else is actually feeling, thinking or doing these things you’re reading.

As a designer, I love exploring the composition, imagery, and words that someone has chosen to represent their particular secret. It’s almost as if the deeper the secret, the more that person can represent it. Even for the non-creative, it seems the emotion drives the creativity. I find it fascinating.

The postcard about the boyfriend’s e-mails, for example, is so effective in representing the panicked nausea that the writer is feeling. The tracing of the jagged tracing of the toilet enhances the writing style and word placement and brings her emotion to the surface. You can almost feel the sickness with her.

This also applies to the unhappy wife postcard. Your eye focuses right in on the eyes and smile drawn over a fuzzy face. Even before you read the text, you get that gnawing feeling in your gut of sadness and insecurity sitting behind that fake smile. The words then complete the picture.

What’s Your Favorite?
If you have a favorite Post Secret postcard, let me know which one and why it’s your favorite. I think it would bring up some wonderful insights from a design and general point of view. Post Secret regularly displays new postcards, so check back often.

Epilogue: After my Post Secret adventure, I did spend a considerable amount of time exploring City Lights. The whole place was an invitation to sit down and read. I did. And after much deliberation, I left with a great book about San Fran called “Reclaiming San Francisco“. I highly recommend it.

Read/Add Comments (3)  |   6,181 Views  |   Design, Art

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

  JWT and Chuco deliver creative inspiration

July 10th, 2006

JWT and Chuco have released several videos in the realm of advertising and design. It is a unique blending of the real world and the marketing world with more than enough material to get those creative juices flowing again. It is a must see for any marketer, advertiser, designer, and random creative-type.

See the videos here and here.

You might find, as I did, even more appreciation and insight into these presentations with some background on JWT. Before confining myself into a cross-country flight to San Francisco last month, I picked up the June 2006 issue of Fast Company featuring Rosemarie Ryan and Ty Montague of JWT.

The main article, “Rehab: An Advertising Love Story” was a thorough look at how the two of them took one of the oldest and largest ad agencies, J. Walter Thompson, and reinvented it as JWT. It is an excellent piece on the inner workings of an established agency during their calculated and chaotic rebranding effort. I definitely enjoyed it and highly recommend the story as well as the entire Fast Company magazine.

Videos courtesy of AdLand.
Fast Company courtesy of some random, no-name newsstand in the airport.

Read/Add Comments (0)  |   2,109 Views  |   Marketing, Design

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