Design can be art. Design can be aesthetics. Design is so simple, that's why it is so complicated. ~ Paul Rand

DesignWalk

Archive for the ‘Design’ Category

Irony makes my day…

“Secrets of the Job Hunt” blog lists some creative ways that job seekers get their message to potential employers.

Other (not recommended) ideas from the survey included:

* One applicant sent six postcards, each a puzzle piece, which formed his resume.
* A candidate sent an egg carton with faux eggs and a message saying she delivered fresh ideas daily.
* A job hunter used an office building across the street to post his qualifications on a large sign.
* Another sent a baseball mitt and said he wanted to be part of the team.
* A woman printed her name on golf balls and sent them to executives that were hiring.

Creative? Maybe. Sound a little desperate? Absolutely.

The consensus of the advertising and marketing executives (you would think they’d be a pretty creative group) was that gimmicks like these are not very impressive.

Advertising and marketing executives… gimmicks… not impressive…

I love irony.

Registration form design: Garbage in, garbage out

Registration forms are the gatekeepers of your web site - they can allow or deny users access to your most interesting content. Good registration forms can allow the highest volume of most qualified users, but poor ones can either allow in riff-raff or deny good prospects (or both).

Linda Bustos at Get Elastic wrote an excellent post: Registration Usability - 87 Registration Forms Tested. I can’t beat the quality of her analysis, but I do want to discuss one aspect of registration form design: Garbage in, garbage out.

There are two basic problems you must address when designing a form: problems of type and problems of quality.

Problems of type

These problems occur when data is entered into the wrong field; for example, an address is entered into a business name field. These problems can be easily addressed through affordances, constraints and visual grouping.

Visual grouping
Problems of type can be reduced through visual grouping; putting similar fields together and making visual breaks between these fields.

visual grouping

Affordances and Constraints
When a piece of information like a phone number or a credit card number has a specific format, constrain the entry fields to the format of the data. The “size” attribute in HTML can also limit the number of characters entered in a field, like 3 digits for a phone number area code.

constraint

If a user can enter data in any format, they will. A country can be “U.S.A.”, “USA”, “US”, “America” and so on. If the data must be consistent, offer a selection of choices, but don’t allow users to format the selection. Drop-down menus and combination boxes are good for this.

Affordance

Update: SEOmoz.org points out a form with last name first, followed by first name. WTF? Keep the fields in common order. Country then state then city then address? Um, no.

Problems of Quality

Inaccurate data entry, typos and spelling mistakes can have severe consequences on the quality of the data, including having email addresses that don’t work due to a typo. The majority of quality problems come from slips - accidental and unconscious mistakes in data entry.

There are several ways to catch slips and other problems. Allowing a user to preview their entry before submission and showing a confirmation afterwards are two ways; validation (JavaScript, etc.) is another way - this is a good way to catch problems of type.

The data you collect is only as good as the data a user enters.

Update: SEOmoz.org highlights a form with absolutely abysmal data collection here. Sigh.

Gorgeous hand-lettering examples from a 1916 type book

For the typographers, here are some samples from Lettering by Thomas Wood Stevens. Lettering is a hand-lettering textbook published in 1916.

In the days of digital design, it’s great to see these hand-drawn samples of typefaces. The craftsmanship and precision is wonderful to see, and the book is a wonderful read for those learning about type and designing and drawing typefaces. Used copies can be found on Amazon, etc.

Cloister Oldstyle sample

Calson Oldstyle from American Type Foundries (from the original matricies).

Cloister Oldstyle

Cloister Oldstyle with a nice c-t ligature and alternative Q.

Examples of weights

Variations on letter shapes (note the square slab serifs in the last example). I love this - taking the same basic typeface and doing all kinds of variations on it.

Cover design

Cover of The International Studio magazine. Wow.

Art Nouveau font

Speechless.

Rona.ca: Worst possible way to enter a web site

Even more annoying than an intro movie. Ask me for my postal code right off the bat? No way to skip around this? Sorry, rona.ca, bad idea.

For people visiting the site for the first time, you haven’t built any trust. Why should I give up a piece of myself before you show me what you have?

For returning visitors, if I just need to check on something - product, store hours, whatever, why would you throw up a roadblock like this? I’ve already committed to your company - why would you drain my goodwill reservoir like this? The rest of the site better be damn good.

This is serving you, not me. A web site, especially for a major retailer, needs to serve the customer, not themselves. There are plenty of ways to capture this information later. Entering the site is not the time to do it. Imagine if you were prevented from entering the store before you gave up this information. What would that do to your retail sales?

If you really need to look at geographical distribution, look at your server logs, or run Google Analytics. How many people are living in “A1A 1A1″?

Web Retailing 1.0 at its worst.

5 useful and interesting sites for a Monday

Some CSS, coding and design sites and articles I find useful and interesting:

Happy Monday! Now to get my glasses fixed so I don’t have a headache by noon. Darned toddlers…

New web sites, blogs of interest

After a sh**storm yesterday (did I hit a nerve? I saw a 5x traffic spike) and a looong night with a teething toddler, here’s a whole lot of not much.

I just launched a web site for a new Vietnamese restaurant in northwest Calgary, the Green Papaya. No wonder I’ve been craving Vietnamese food for the last few weeks. Can’t wait for it to open. Web site notes: the Vietnamese characters were the toughest part of the site. Just sourcing the HTML entity codes was difficult, but I found a great site for it, and I’m glad I know my eth from a dyet.

I have created the first draft of my Squidoo Lens, Social Media Marketing Action Plan. Comments? Please be kind, I’m still battered and bruised (but pugnacious - watch out). It’s aimed at smaller business who want a way to get started interacting with their customers online in a non-”marketing” way.

Things I’m reading:

Interesting article on raising a brand-free kid. Something I’m struggling with, having a toddler of my own.

Primate Diaries. Monkeys, evolution, athieism, Intelligent Design and religion. Put your thinking cap on.

And I will never pass up a chance to promote The Comics Curmudgeon.

4 ways to bring people to your blog

Everyone wants to get the word out, and for business blogging, this can be very important for getting traffic to your blog. Are you doing these things?

  1. Make sure your blog posts can be shared. On many blogs, you will see buttons or links for “Subscribe” (or “RSS”), buttons for del.icio.us, StumbleUpon, Reddit, Digg and so on (see the “Share this” at the bottom of this post). People us these tools to subscribe to your posts (use a feed program like Feedreader or a web site like Bloglines to see your subscriptions).del.icio.us, StumbleUpon, Digg and Reddit are “social bookmarking” sites; if people like your blog post, they will submit it to these services where other people can find your blog. These services can bring tremendous amounts of traffic to good blog postings.To install these tools, you can sign up for services at Feedburner.com for RSS subscription tools, and there are lots of plug-ins for syndication tools. I use a WordPress plug-in called “Share-this”, and the individual syndication sites have snippits of code you can put on your site to facilitate sharing.
  2. Submit your own content to the syndication services. Once. Digging and Stumbling your own content is fair, but do it only once. Let others find your post, and if it is good, the traffic will come. The places I syndicate my content: Google Bookmarks, StumbleUpon, Digg, Technorati, Reddit and del.icio.us.
  3. Comment on other people’s blogs. Most blog commenting tools have a place where you can enter a web site address (see below) - use this to create a link back to your own blog. Rule when commenting: don’t comment for the sake of commenting, make it good and relevant to the discussion. The links from other people’s blogs are very search engine friendly; Google likes blogs and links from blogs. Incorporate this strategy as part of a SEO strategy.
  4. Write compelling, easily readable content. There are many reasons people read blogs, and there are a few formulas for writing popular postings. My rule, and the goal of this particular blog: give people some tips and advice on design and marketing they can use immediately and every day.Easy-to-read content is also key. Long blocks of text with no breaks is difficult to read; lists are very easy. Use bold and italics to highlight important points and provide places where people’s eyes are automatically attracted. Good web typography is important.

Any other ideas? Share your tips in the comments!

Textbook social media community site: COLOURlovers.com

One of the core components of social media is the community web site. Flickr is a general photo community, Facebook et al is the ultimate digital society with many, many subgroups. There are also a lot of niche groups following a SM structure. And, as a designer, this is one I can’t live without.

COLOURlovers.com

There are many facets of this site that make it a great social media/community site, at least for those of us who love colour.

  1. All content is user-generated. This is a hallmark of a Social Media site. User-generated media, or crowdsourcing, is a model followed by many sites, including Digg.com, YouTube.com, Wikipedia.org and iStockPhoto.com.
  2. There are strong commenting, rating and bookmarking tools. The ability to engage with others on the site through commenting on palettes, making friends, rating people’s palettes and colours, and bookmarking and saving colours is very easy, and heavily encouraged through a points system. This generates a high degree of contact between the community members.
  3. The site is based around people’s profiles. The profile - a page about you - is a core feature of social sites. It provides an anchor in the site, and a place where people can learn about you (like the small talk of any cocktail party), and you can learn about others. Facebook.com is a profile site; other sites use profiles to create the community aspect.
  4. There is a strong and continual sense of branding on the site, but is not intrusive. Everybody on COLOURlovers.com is a “lover”. All of the text, down to the 404 page, revolvers around this theme. If you want to leave the site, they’ll understand because not all relationships work out, and they hope that we can still be friends. The consistency of this theme is incredible - rarely has this been executed so thoroughly and consistently.
  5. The blog establishes the site’s expertise, and selected members of the community guest blog. The site has established itself as an expert in colour through sharp commentary in the blog, and selected experts within the community share their observations in the “official” blog.
  6. The crowd contributes heavily to social bookmarking. The blog posts get Digged frequently by the community, and occasionally show up on Digg’s front page driving even more traffic to the site.
  7. COLOURlovers.com maintains and encourages a Facebook group. Using other social media sites to promote your site’s community is a very basic SMM tactic.
  8. The site’s founder - Darius - is front and center in the community. And the site’s not so big that you can’t get a personal email from him. That’s socialbility.

There are at least a dozen more ways that this site is a textbook example of a vibrant web community. It is very much a niche site, but the web site facilitates, not hinders, the community building.

Check out my palettes!

Horns, breves and carons: using non-standard HTML entity codes

I’ve been working on a web site for a Vietnamese restaurant, and the owners want the full Vietnamese names on the menu. The Word document they sent doesn’t translate to the web; I need HTML entity codes for these characters.

The good news is that Vietnamese is basically a Latin alphabet, but with non-standard Latin diacritical marks. For example, typical characters might be:

The first item is a “small letter u with a horn and a tilde above”. The a has a hook above.

The characters are a part of the Unicode specification, but finding the characters can be difficult. However, there is an excellent web site (not so easy to use, but information-rich): http://www.fileformat.info.

First, you need to declare your language encoding; the language set that your web browser will use to render the text. This is not mandatory, but it is good practice, even if you web site is in English.

For Unicode characters (good in this application - it is a wide set of characters):

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

For a basic English web site, you can use:

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

Next, you need to use the HTML entity code for special character which looks like this:

&#123;

The characters I used for the Vietnamese menu are in the Latin Extended Additional set of the Unicode specification; there are usually HTML Entity equivalents you can use. For example, the Unicode code for the small u with horn and tilde is U+1EEF; the equivalent HTML entity code is &#7919;.

The site is coming together nicely, and having the correct language, including the diacriticals, is the icing on the cake.

More than pretty pictures, less than rocket science

Seth Godin blogged yesterday on creating a good web site, and today on creating a great web site (and here I vowed not to mention Seth’s blog more than once a week, but it’s too darned good).

Too many designers I have worked with take a very narrow view of what design is: they concentrate on the great colour schemes, great typography, flashy photos and so on, but ignore other aspects of web site design.

Web design originally stemmed from print design, which is pretty much exclusively great colours, typography, etc. The mindset of designers even today is based in print media, while the web is really a brand new beast, and the design must be treated as so.

The role of a web designer - either a single designer or a small team - encompasses several different roles beyond the “look and feel”.

Dave’s Hierarchy for Web Site Design:

  1. Information architecture. This is the foundation for the web site; the way the information is organized. Even basic web sites have a lot of information, and without strong organization, the information can become jumbled and incoherent.
  2. Navigation design. How we  move around this information is critical to the success of the site, and the complexity of the navigation increases exponentionally with the amont of information or actions within the site. I particularly like Steve Krug’s Don’t Make Me Think book, philosophy and principles.
  3. User experience. What kind of experience do you want your users to have when using the site? Peter Morville’s User Experience Honeycomb  lists 7 facets of user experience (click the link to read about the details on these items):
    • Useful
    • Usable
    • Desirable
    • Findable
    • Accessible
    • Credible
    • Valuable
  4. Identity and Branding. Your brand is the public perception of your company. Without a good brand identity, you will just be another company out there, not a Pepsi, Nike or Chanel.
  5. Look and feel. This is where most designers concentrate because it is what they know and have been trained to do.

(I just realized I have both of Peter Morville’s books, Information Architecture for the World Wide Web and Ambient Findability on my desk, standing beside Don’t Make Me Think)

Seth goes on to explain (my paraphrasing) that web design is not about reinventing the wheel; there are a lot of tried and true techniques and processes to draw upon. While every web site is (or should be) unique to the company, objective or purpose, the web design process is not unique, or even that difficult. With standard processes and systems, web design should not be that difficult.

Are you talking to your user or at your user, or are you just talking to yourself - showing off? The best designs facilitate interacting - talking with your user. How does your design accomplish this?

Close
E-mail It