Ilustrator UI Elements Symbol Library

I just made a Symbol library of the UI elements I am constantly using in wireframe diagrams. I have been meaning to do that for FOREVER.

Orangy Rainbow Goodness

I am super-entertained by this Flash site, and I don't even know what it is for:
http://unlimited.orange.co.uk/flash/go

And this site, which is a teaser for Wall*E:
http://www.buynlarge.com

How to Defang Scary Technolongy

http://www.nytimes.com/2007/12/16/jobs/16career.html

Key take-away here: fear and lack of confidence are key inhibitors to learning tech. User experiences that create the semblance of simplicity and friendliness win, like, well, the ubiquitous iPod.

User Experience Discipline Gains Ground

Great article on the promise and pitfalls of Experience Design: http://speedbird.wordpress.com/2007/06/22/on-the-ground-running-lessons-from-experience-design/

I am convinced that interface/user/web design are going to diminish as practices in favor of experience design in the future. Instead of site maps as a static diagrams, I hope to be creating temporal evolution flow diagrams. Instead of single point prototypes, I foresee mutating life cycle prototypes, and so on ...

Silicon Sycophants

I stumbled upon a study today from 1997 that really resonated titled Silicon Sycophants. In short, it claims that people respond better to flattery, even when they know it is automatically generated by a computer. This dovetails nicely into a long standing precept of mine that goes Language Matters, with the by-law of Have a Voice.

I have recently been playing a game online called Kingdom of Loathing. It has no animation, no colored shiny things, no exciting cutting edge technology. It is made up of simple html and stick figure drawings. What it does have is incredibly witty and clever writing, and that alone was enough to get me hooked.

UI Blogs

http://goodexperience.com/blog/
http://www.boxesandarrows.com/
http://uxmatters.com/
http://www.iqcontent.com/blog/
http://www.adaptivepath.com/blog/
http://speedbird.wordpress.com/

EmotoMeterModulator

Something silly and fun and completely unusable, for labor day.

Adaptive Design

This week I have been musing about Adaptive Design, and why you don't see more of it.

By Adaptive Design, I mean software and websites that respond and mutate to reflect user behavior over time. An example most people are probably familiar with is Microsoft Word's ability to recognize your most common spelling/typing mistakes and auto-correct them.

Simply put, I want more. I want my software to recognize the tools I use most and put them in the forefront. I want features I never use to be hidden. I want Facebook to realize I am actually single and not present dating ads to me. And I want a pony.

I think the reason adaptive design is not seen more often is that it is not a feature that can easily be put on a list as a bullet pount and checked off; it is not easily visualized, and often, it is difficult to program. Nonetheless, I think applications and websites that are designed to delight and capture users interest over time will have to integrate adaptive design principles.

Service Design

I've been thinking a lot lately about the concept of Service Design, which to me is the oft ignored meta-uber-parent to User Interface Design. Whereas UI concerns itself with the software, the user flows, the application and web presence of a product, Service Design takes into account the larger picture of customer service, brick and mortar design, shipping, email and technical support. Without well designed and intergrated Service Design, the best UI Design in the world, or graphic or industrial design for that matter, is for naught.

Here is a personal example ... last year, I bought a brand new shiny MacBook Pro; a gorgeous example of industrial design at it's finest. Two months later, it broke (the backlight on the screen went out). I called tech support, they told me to take it to the Apple Store. I went to the Apple Store, expecting them to fix it, they told me they were going to send it off to Texas for repairs. And then they gave me some snotty attitude on top of holding my vital work tool hostage for two weeks. Did they offer to backup my hard drive and offer me my data in the meantime? Nope. Did I get a loaner computer, like when I get my car serviced? Nope. By contrast, when my lowly Dell broke, a service repair man came out to my house to fix it the next day, even though I live in the outer suburbs of Nowhere.

I read an interesting article in the New York Times this weekend about how Netflix hopes to compete now that the behemoth Blockbuster has entered into direct competition with them. Netflix does not have a particularly intricate or hard to reproduce business model or website, so they are competing on the basis of service. They have set up a 24/7 call center, to ha ve a real human handle all tech support issues. And they set it up in Oregon, because people there are friendly and nice (the sub-text being in Los Gatos, CA where Netflix is headquartered, people are less than nice).

I see Service Design as an emerging discipline, one that I hope will grow over the next few years. The great challenge, of course, is for companies to integrate the separate branches and business units involved in the full circle of service, rather than the silo'ed initiative approach or focus on one core competency that is most often the norm.

I have found one company that focuses purely on Service Design consulting, LIVE WORK, based in the UK, but I hope to see many more in the future.

Interface Amusements: Part 2

UI Humor: Yes, it does exist.

Eight Ways to Drive a Designer Mad

UI Comics: OK/Cancel
I love these guys, probably because they are at Yahoo!, and I worked there, and I get immense schadenfreude from their strip every single time.

Data Visualization Examples

GRRRREAT list of modern data visualization examples - excellent inspiration here:

http://www.smashingmagazine.com/2007/08/02/data-visualization-modern-approaches/

Down with the Fold

I am starting to see a rising tide of info out there to debunk the myth that users don't look below the "fold." Yea!

I am going to start collecting links for the next time I have to argue this point with a stubborn client. Not YOU, of course, the OTHER clients ;).

AOL designs for below the fold:
http://www.boxesandarrows.com/view/blasting-the-myth-of

Some stats:
http://blog.clicktale.com/?p=19

A flickrstream, for fun:
http://www.flickr.com/search/?q=thereisnofold&w=all&s=int

And the most popular "foldless" page out there:
http://www.tmz.com

UI/IA linkage

A lot of people have asked me for general UI/IA info, so here is my accumulation of links, books and resources.

User Experience Design (UED) breaks into many specialties such as user research, information architecture, conceptual design, interaction design, etc. Wikipedia does a great job of defining the field and the specialties:

DEFINTION:
http://en.wikipedia.org/wiki/Interface_design

Here are some good introductory books on the subject. Design books tend to be expensive, so I would recommend looking for them at your library, or used.

BOOKS

Communicating Design: Developing Web Site Documentation for Design and Planning
by Dan Brown
http://www.amazon.com/gp/product/0321392353/

Designing Interfaces
by Jennifer Tidwell
http://www.amazon.com/gp/product/0596008031/

Universal Principles of Design
by William Lidwell
http://www.amazon.com/Universal-Principles-Design-Perception-Decisions/dp/1592530079/sr=1-1/qid=1162484716/ref=pd_bbs_sr_1/102-67

The Visual Display of quantitative Information
by Edward Tufte (and his other books too)
http://www.amazon.com/Visual-Display-Quantitative-Information/dp/0961392142/sr=1-2/qid=1162571006/ref=pd_bbs_sr_2/102-6724840-4472918?ie=UTF8&s=books

ORGs & CONFERENCES

http://iainstitute.org/
http://www.aiga.org/
http://www.chi2006.org/

PRACTITIONERS & COMPANIES

http://www.lukew.com/
http://www.adaptivepath.com/
http://www.catalystresources.com/index.jsp
http://www.adaptivepath.com/
http://semanticstudios.com/

BLOGS
http://www.boxesandarrows.com/
http://uxmatters.com/

And finally, here are some links to examples of actual design deliverables. These are the docs and diagrams a UED professional makes. They provide an idea of what an interface designer actually creates on a day to day basis:


PDF example deliverables:
http://iainstitute.org/tools/

How to: Deliverables & Documentation
http://www.boxesandarrows.com/story/index/date/4

How to: Methods & Approaches
http://www.boxesandarrows.com/story/index/date/7

Learning From Others
http://www.boxesandarrows.com/story/index/date/5

Professional Practices
http://www.boxesandarrows.com/story/index/date/9

HUMOR
http://www.ok-cancel.com/

Error Messaging Best Practices

- Have a marketing writer write error message copy - not an engineer.
- Make sure error messages are in clear plain English, that is reassuring and helpful, and does not insult the user.
- Is the error message has to do with a form, make sure it appears inline and not in a separate window.
- Make sure the field where the error was generated is clearly indicated.
- If an error message results in the user not being able to accomplish an action, refer them to the appropriate section in the Help files.
- Always include tips to resolve the error condition.
- If the error message has to do with Lyma Bean systems down, delays, upgrades, etc., let the user know when they should try again, and include an apology
- Include a link to support in error messages that can not be easily resolved by the user.
- Make sure that error message text is in a large font for legibility. Red text is customary.

Design Patterns

Why reinvent the wheel?
Originality is over-rated.
Imitation is the highest form of flattery.

And any other cliches I may have forgotten. So without further ado, a design pattern collection:
http://www.flickr.com/photos/factoryjoe/collections/72157600001823120/

Verizon Online Store: Sadly Unusable

I spent a frustrating few hours last night trying to buy a new phone from the Verizon online store. Every page looked quite nice, but the user flows, copy, form choices and process layout seem designed to obfuscate and confuse. Even the straight up math on the site was wrong ($329 - $100 = $329??? I may be innumerate in general, but I think not).

So, today, I went down to a brick and mortar store in Santa Cruz, and a very nice young man set me up with my new phone in under 10 minutes.

It made me wonder ... is the neglect of usability in the online store intentional? Does Verizon want to funnel people into its physical stores? I can't see why. I didn't spend anymore money because I went there. Hmmm, inquiring minds want to know.

ColorLust

A nice color palette picker, by the name of ColorJack. Offered as an OSX widget too, though I haven't tried it yet:
http://www.colorjack.com/sphere/

And Colour Lovers, a whole website for color addicts:
http://www.colourlovers.com/

With a color blog, for my daily fix:
http://www.colourlovers.com/blog/

Mathematical Motion : Digital Creatures

This is a truly impressive tutorial/demo of rendering and animating realistic creatures mathematically in Flash:
http://www.liquidjourney.com/fitc/indexM.html

I've gotta try some of this stuff, in my ample spare time.

MAPalicious

So, a few weeks ago, I had some old friends visiting from NYC the same week that five clients were demanding a pile of deliverables. No time to play for me, but I really wanted my friends to enjoy their stay here. So, I used this nifty new web site leveraging the Google Maps API to create a custom map of Santa Cruz area with all of my favorite things to do.

http://www.wayfaring.com/maps/show/34576

My guests ended up visiting over half the places I marked on the map, and had a great time. The Wayfaring site interface itself was well designed, easy and fun to use.

End of happy web 2.0 services story.

Interface Amusements

An interesting approach to the quantitative display of information over time. The media home price in the USA, adjusted for inflation, from 1890-2007, shown as a 3d roller coaster ride.
Whee, it's fun:
http://www.speculativebubble.com/videos/real-estate-roller-coaster.php

A new idea for CAPTCHAs:
http://www.defectiveyeti.com/iacaptchas/

A component flow diagram in the most impolite of lingo:
http://www.fukung.net/v/245/1b-GSMinswearing1res.jpg

Kuler - Color Toy

Adobe has a nice flash based color palette tool out there:
http://kuler.adobe.com/

I am a suckah for a color gidget, and this one is fun. I wish it let me select more or less than five colors . Mostly, I am impressed with the smooth flash implementation and interaction. Nice information overlays, subtle transition effects and navigation.

Taking it Digital: The Magazine Industry

Useful list of traditional print magazines and their online initiatives, by date:

http://www.magazine.org/digital/14321.cfm

Some interesting online features coming out of some very staid print players such as Newsweek, Sports Illustrated and National Geographic.

Makes me wonder if I will ever up a certain fondness for thick, well printed design magazines ...

Grand Central: One Phone Number to Ring Them All

I have been waiting and wanting a web service like this, one phone number that aggregates all your other numbers:

http://grandcentral.com/

Now if someone that would just come up with a cell phone that gets reception through the redwoods, I maybe able to join the mobile revlolution, someday

Zoom Quilt 2!

Trippy, flash fun:
http://zoomquilt2.madmindworx.com/

Eh, maybe zoomquilt 1 (http://zoomquilt.nikkki.net/) was better, but I do so love this technique, in both cases. A collaboration between artists where each one paints one frame that leads into the next.

Makes a great screensaver.

I can't seem to think of any more useful interface application for this technique, and maybe that's for the best.

Follow the Eyes

Interesting results of an eye-tracking study examining where users actually look on a news article web page:

http://www.ojr.org/ojr/stories/070312ruel/

Not surprisingly, design matters. Well formatted pages are scanned more quickly and successfully.

A few other interesting points caught my attention such as big generic lifestyle images are completely ignored by users. A wasted use of space I see (and have occasionally recommended, ouch) on sooooo many home page designs.

The funniest revelation to me, however, was that men and women look at photos of people quite differently.

"However, gender makes a distinct difference on what parts of the photo are stared at the longest. Take a look at the hotspot below. Although both men and women look at the image of George Brett when directed to find out information about his sport and position, men tend to focus on private anatomy as well as the face. For the women, the face is the only place they viewed."



I couldn't make that up if I tried.