UI&us is about User Interface Design, User Experience design and the cognitive psychology behind design in general. It's written by Keith Lang, co-founder of Skitch; now a part of Evernote.  His views and opinions are his own and do not represent in any way the views or opinions of any company. 

External Articles

Entries in UI (7)


Multitouch on the Desktop

This video demos SpaceClaims upcoming multitouch-enabled feature for their 3D CAD system. Some of these gestures, like the '2 finger to anchor, 1 to control', I first saw in Jeff Hans work. Makes for a great looking demo, but would only be sustainable with a tablet PC or something like a cintiq before your arms fall off. From my perspective, the solution will be a replacement device for the keyboard, where your hands are not interacting directly with the screen — but are one abstraction away from, like a mouse — and that's quite the UI design challenge.

From interactiondesign.se


Announcing The UX Hour

Get a User Experience problem solved, re-educate me on a UI&us blog topic, crowdsource your design dilemma.

'The UX Hour' an effort to give back something to the community from which I've got so much. It will be one hour a week live video, chat, and skype call-in session somewhat modelled on Leo Laporte's and 37signals' live broadcasts.

To be clear — I'm not a UX 'fixit guru'! But I hope to offer perspective, resource suggestions and a forum for User Experience and User Interface conundrums. There's been a bunch of times when I've been stuck and another perspective has saved the day. It's an experiment, which may or may not prove fruitful…but with your help it can be practical convergence of designers with possible solutions and differing perspectives.
Technically, it will be a Ustream/LiveStream/justin.tv session with chat and Skype (audio) call in. Unfortunately technical and bandwidth issues will limit video to 360x240 initially. I'll supplement with a skitch.com image thread for high resolution images that everyone can contribute to. Any technical suggestions welcomed.

The first UXhour will be at:

  • UTC: Sunday 19th July, 23:00
  • US EST: Sunday 19th July, 7pm
  • US PST: Sunday 19th July, 4pm
  • Australian AEST: Monday 20th July, 9am
  • NZ: Monday 20th July, 11am

Sorry Europe, I realize this will be Monday 01:00 for many of you.

Watch this space and please share your suggestions! It should be a lot of fun.

* Credit goes to Matthew Sanders, a UX guy much more experienced than I, for coming up with the name. Thanks Matt, hope that's OK!
** Note to those reminding me that the UI&us podcast has one, and only one episode to date: hopefully this live approach will be encouragement for more podcasts

Click to read more ...


Application Camouflage

Spreadtweet is a cool little app from Elliott Kember which is a twitter client posing as Excel. Your boss can glance at your screen and never notice you keeping up with your twitter peeps.

(via Daring Fireball)

Click to read more ...


Design with Intent Blog

Comprehensive site defining and cataloging 'sustainable behavior', User Experience & social engineering. via the Umeå blog

Check out Dan Lockton's Design with Intent.

Click to read more ...


The Look of a Loved Folder

Some 6 months ago I asked the brilliant graphic artist Wolfgang Bartelme to help me out with a visual experiment. I had a visual idea that required subtley and an eye for detail, and if anyone could make it work, Wolfgang could. Before I explain the experiment, let me give you some of the thinking behind it.

Too Clean?

Computer interfaces usually present icons identically, which themselves are often gleeming like a freshly polished Porche showflow. The icons and graphics are so 'clean', so devoid of detail, that I wondered if us human-types were possibly missing out on subtle channel of information. We know which books at the library are read a lot — they've got dog-eared pages. We can tell the new books from the old, the frequently used, to the dusty unused. I wrote an earlier post on the topic of 'mess'. And of course, the idea of making a computer space more 'realistic' is not a new idea. But it certainly wasn't an idea that had caught on. Why?

For example, no matter how new or worn, recently used or untouched, full or empty (on the Mac, at least), file folders look identical. I often search for my newly created folder amongst archaic, yet identical-looking icons.

Many times a new Mac user has wondered why their disk is full. I need to explain that they have to empty the trash. They look surprised — there is no graphical difference between a little trash and a lot. For this reason I like the idea of the Pileup Dashboard Widget which piles up ugly looking junk as your trash fills up.

Of course you may say "I use a computer to avoid ugliness like dirt and grime!" So the question is,:

how beautiful and stylized could the characteristics of newness, age and usage visually look?

The perfect job for Wolfgang — if you're a Mac or iPhone user you've possibly come across his beautiful work. I asked him to illustrate:

  • What if a folder or application was new?
  • What if it was old, or really old?
  • What if it lay untouched for some time?
  • What if the object was taken away, what would remain?

The Results:

As you can see, Wolfgang iterated on standard Mac folders and an application icon to convey the different facets of each object. There will be many fans of Wolfgangs work who will enjoy the set of design iterations on this Skitch thread.

Some of the many arguments against adding more realism in this way:

  • 'Why not use a different file view, like a list sorted by age?' This is true, as computers can do the filtering for us. And as you search, and learn more about the information space, you can formalise and add more filters as you go. For example "I remember it was in this folder…(click)…hmmm lots in here…I remember I used it last week…(click)… and the folder only had a few things in it…(click)…ah there it is." This is called facetted search.
  • Perhaps it's not possible to make this many variables look 'pretty'. After all, the original Macintosh trash can had flies — which were removed for aesthetics before release, and there is a history of making clean, shiny, interfaces…perhaps with good reason.
  • I contacted the eminent Cognitive Scientist Steven Pinker and asked him about this topic. He explained that while we're good at seeing single changing variables in a lineup (the reddest apple in the bunch), our ability to search declines when we search for a 'conjuntion' — the overlap of many variables like age, usage, size, etc. Perhaps this means a visually richer system would be cognitively expensive: no net gain

Was the experiment a success? Could this approach add real value, or just noise?

Click to read more ...


Interfaces and Animation 

Motion can supplement the communication of computers, to good and bad effect. In recent years, simple animation in computer interfaces is becoming less and less costly as GPU power is rockets skyward and new animation APIs require less coder-time to implement. It is therefore a wonderful time to consider utilizing animation as an additional channel for communication. But can simple shapes and icons get across consistent messages through animation? Apparently so. The Orphan Film Symposium examines the work of psychology professors Fritz Heider and Marianne Simmel. In 1944 they created a short film illustrating the emotive potential of basic shapes. The film was shown to test subjects. The research assessed the ability for motion alone to portray emotion or a story in a consistent way — it turned out that motion alone could impart emotion. Subjects reported emotions in the story relating to bullying and other conflict. This is possibly due to the desire to see a human element in many non-human forms, called anthropomorphism Disney's research has also proved to be a gold mine for me; the Disney animation studio spent years mastering the art of making inanimate objects expressive. The following example is taken from the enthralling The Illusion of Life by Frank Thomans and Ollie Johnston.  Used without permission. Will take down on request. Used without permission. Will take down on request. Disney also researched and developed, over many years, fundamental techniques to make animated emotion "feel" right. You can read a basic description of these techniques that John Lasseter in a handout presented to SIGGRAPH titled Principles of Traditional Animation Applied to 3D Computer Animation. These techniques are:

  • Squash and Stretch
  • Timing and Motion
  • Anticipation
  • Staging
  • Follow Through and Overlapping Action
  • Straight Ahead Action and Pose-to-Pose Action
  • Slow In and Out
  • Arcs
  • Exaggeration
  • Secondary Action
  • Appeal
These techniques make each motion more cognitively clear, by accenting either the visual or cognitive distortions of shape and path. For example, here is a particularly clear example of Squash and Stretch bouncing ball animation. There is a wealth of knowledge in the animation industry that could be applied to new interfaces. Of course, there are downsides to motion. Nobody wants an all-dancing, all-prancing interface, with icons zooming around, squishing and spinning excessively. And the use of motion in computer interfaces is exploratory, with limited commonly used gestures — the occasional bouncing icon, flipping settings panel and 'genie' effect, ex. So what might better use of motion look like? What are some 'universal' gestures people would recognize? Have a look at the 10 motions of this experimental interface:   Abstract Social Interface from Keith Lang on Vimeo. Video supplied by Bilge Mutlu. Used with Permission.  The video above is by Bilge Mutlu and his team at the Human-Computer Interaction Institute at Carnegie Mellon. His accompanying research paper  "The Use of Abstraction and Motion  in the Design of Social Interfaces"  explores the emotions and interpretations of an abstract animated interface. Bilge has been kind enough to include video which accompanies this paper. When I look at this video, I can imagine the motions expressing:
  1. The system is waiting for some input or data tranmission
  2. The system is processing information
  3. The system is sleeping
  4. 'Spanner in the works'?
  5. There is something outstanding which requires your attention
  6. I don't know
  7. Configuring…
  8. Finishing configuring
  9. Testing
  10. Hard work
What are your interpretations of the video? You can read the emotions that other people, with considerable consistency, associated with the movement in Bilge's  paper.   Bilge emailed me to add an additional point:
…[just] as Disney developed these principles for creating lifelike motion for their characters, there are techniques for designing abstract motions that are not (necessarily) lifelike, but expressive of emotions and causality. I used "mood boards" to identify shapes, forms, motions that might communicate each emotion (there is an example of a mood board in the paper, which, of course, you can use). Heider and Simmel used abstraction of actual human behavior (you can almost replace the shapes with people). And, I am sure there are other techniques that others have developed. 
So motion can convey meaning, whether it be anthropomorphic (human-like) or not.  Could subtle animation ever be a part of most interfaces? How much motion is too much? Are the current animations good or bad?

Click to read more ...


New Podcast - Interview with Wil Shipley

I'm happy to announce the first of my interview series has gone up on the brand new UI and us video podcast. [EDIT] iTunes has now picked up the podcast.. click to subscribe for upcoming cool interviews, reviews and views. Click to view the UI and us podcast on iTunes The super-intelligent Wil Shipley talks about the inspiration behind the trend-setting Delicious Library 1 and 2, and also possible future directions. Well worth a watch! [UPDATE] You can also watch it right here.
UIandus.com Interview with Wil Shipley from Songcarver on Vimeo.

Click to read more ...