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 cognitive science (7)


Was Clippy 6?

I think Clippy, the Microsoft helpful annoying animated Office assistant paperclip was about age 6.

This is an interesting TED talk from MIT's Rebecca Saxe. Researcher Rebecca Saxe describes our brains dedicated region for understanding what other people are thinking, and explains "It's not until age 7 that we get what looks more like an adult response." [Interesting note: her research is using high strength magnetic fields to slightly alter our perception of others]

Understanding what other people want is hard work—it takes us humans 7 years of life to get to the point that we understand the intentions and beliefs of others at an 'adult level'. Will we see another Clippy in the next decade?

Click to read more ...


Eye Tracking and Forms

I just became aware of a nice eye-tracking study on website forms, using samples from Yahoo! Mail, Googlemail, Hotmail and eBay. The 10 Web form design guidelines are the result of eyetracking data captured by CXpartners, and contains subtle and practical tips. via @johnparillo via @georgesduverger

Click to read more ...


Realizations of Rounded Rectangles


My rounded rectangles cognitive argument is getting a good thrashing —  which is a good thing. I'm as keen as anyone to find out if the theory holds water, and if you can direct me to better research, I'd love to read it. Please share! May, 1981 According to folklore, in the early development of the Apple Macintosh, resident graphics genius Bill Atkinson performed a miracle. He found a way to overcome the Mac's 6800 chip's math limitations thus enabling the OS to draw circles and ellipses (not just rectangles) on the screen at a blistering speed. He proudly showed this new ability off to the team. But this was not enough for the leader of the Mac team, Steve Jobs. No, the father of the Macintosh asked for one more thing. That thing was rounded rectangles. Rectangles with rounded corners. Rectangles with the sharp bits beveled off. Friendly rectangles. Steve wanted the Mac to speedily draw ellipses, squared rectangles AND rounded rectangles. But Bill was certain this shape would be extremely difficult to draw at speed. And not even a necessary part of the Mac's drawing library. Jobs disagreed;
"Rectangles with rounded corners are everywhere!" — Steve Jobs

Steve took Bill on a walk, pointing out the ubiquity of rounded rectangles in the world around them. Eventually a rounded rectangular No Parking sign convinced Bill.

The very next day, Bill proudly returned triumphant. Overnight he'd written code to draw rounded rectangles at turbo speeds. And once rounded rectangles were as computationally cheap to draw as square-edges rectangles, they became ubiquitous on the Mac. "RoundRects" became buttons, sliders and regions in each window. They helped define the 'safe' interface of the Macintosh. And in the early days, those round beguiling corners spruiked the Mac's softer approach, luring customers away from IBM and Microsoft. And to be clear, I'm not saying that Apple were the first to use the rounded rectangle in interfaces — but they used it like no other company of the time. Today, the concept of 'round = touchable' survives and is formalized in Apple's HIG:
Visual cues, such as the arrow on a pop-up menu, help people recognize familiar elements. People learn to associate certain behaviors with specific elements based on their appearance. For example, people recognize push buttons by their rounded shape… — OSX Human Interface Guidelines

Rounded rectangles didn't stop with software. Increasingly, the rounded rectangle has become the parti of Apple hardware design. The shape made large machines approachable and small ones pocketable. But why is it so visually appealing? Sure, there is a certain synesthesia to a shape which has no 'sharp' edges to poke yourself on, even if it's just rendered out of pixels on a screen. But what of the aesthetic? Rounded rectangles simple seem 'easier on the eye' than the square-edged variety. Why?

Time for an expert: I asked Professor Jürg Nänni, author of the exemplary Visual Perception, a book detailing our best-to-date scientific understanding of the processes involved in visual cognition. "Could rounded rectangles actually take less effort to see?"

Nänni confirmed my theory: "You are absolutely right. A rectangle with sharp edges takes indeed a little bit more cognitive visible effort than for example an ellipse of the same size. Our "fovea-eye" is even faster in recording a circle. Edges involve additional neuronal image tools. The process is therefore slowed down."

Professor Nänni is saying that rounded rectangles are literally easier on the eye. Put another way, compared to square-edged rectangles, rounded rectangles are more computationally efficient for the human brain. To me, this is a revelation. An idea that at the very least demands more investigation.

If I'm an interaction or experience designer, the machine I am optimizing for is the human. I want a design that takes the least CPU cycles for the same output. And from my current perspective, rounded rectangles provide an example of optimizing a design to reduce human visual system's CPU cost. There's only so much visual attention to spend.

What is the visual cognitive cost of…
  • …a garish color scheme VS a beautiful one?
  • …instantaneous disconnected movement VS smoothly animated motion?
  • …one font as compared to another, in a particular context?

[UPDATE: I've switched the order of the 'animated' bullet point to save confusion]

So! The rounded rectangle is seemingly just the tip of the iceberg in linking cognition to aesthetics, but I'm not sure how to move forward. I don't expect UI and UX designers to have their skills replaced overnight by some magic formulae. I do expect that examples like the rounded rectangle will strengthen the argument to 'go the extra mile' to make interfaces which are aesthetically pleasing. Now I want to know what other examples there might be which show that certain aesthetic elements are, in fact, simply optimizations for the human visual system.

Click to read more ...


Dan Ariely on Decisions

How easily are our decisions are swayed? Dan Ariely explains.

UPDATE: Embedded video seems broken. Click here to view Dan's TED Talk.

1. When faced with a tough decision, people tend to go with the default
2. In an equal A vs B decision, adding a third option can tip the decision. If this option C is a similiar but less attractive version of A, the outcome will be A over B
3. It is possible to design situations and decisions to bias (or NOT bias) people's decisions, consistently

Dan Ariely and his research team is pure smarts. Dan's book (rightmost) is based on scientific research, studies and trials, hard data gleaned in brilliantly designed social experiments. If you're involved in any social websites, product design, I think you'll find this book a goldmine of insights into what drives people's decisions to sign-up, get involved, and buy (or not buy) stuff. After that, you might also like to check out the other books I have read and loved on my Recommend Books page.

Click to read more ...


Aesthetics and Design and Your Emotions

A List apart published In Defense of Eye Candy looking at how good aesthetic design decisions impacts our rational thinking:

This raises some interesting questions—especially in the area of decision making. In short, our rational choices aren’t so rational. From studies on choice to first impressions, neuroscience is exploring how the brain works—and it’s kind of scary. We’re not nearly as in charge of our decisions as we’d like to believe.

You've probably seen the research studies where nice-looking ATMs cognitively 'work better' than their uglier, but equally competent cousins. As real-time brain imaging becomes available to researchers, it's seems that the mind forms many 'rational' decisions first emotionally and then creates logic to match.

This might explain more of this effect:

I think there's probably more to a Mac than just the computer — it's the culture of trust that users place in the interactions which enables them to try something on a whim. When users are rewarded with successful dragging between applications, they try it more. When modifier keys have reliable 'concepts' like "The Option key makes my action apply to other similar things", users are more likely to try them. This is becoming more and more of a moot point as Windows has improved over the years, but the cultural lag, I believe, means this still applies more to Mac users on average.

Click to read more ...


Time as Interface Element

Time. Software is increasingly focussed on helping us understand and manage it. For a great example, see the unreleased Palm Pre; it's diary view shows spare time in a beautifully simple 'crumpled' concertina UI. So, how do other UIs handle time?

Temporal Interfaces
Lukas Mathis' blog, ignore the code, recently covered some mockups of current, and possible temporal interfaces. Including one from this blog :-) One of the examples showed how the file 'list view' could better serve temporal thinking.

My Take
Lukas' approach inspired some thoughts of my own on the problem of representing time visully. I've put Lukas' original example topmost with my iterations below; if an item is separated in time from the other items — and since we seem to think about time in a spatial way, how could we show this spatially? (click for fullsize)

I like the 3rd, 'peaks' iteration as it reminds me of something I saw in Norway — a 'Give Way' line evoking a steep slope, big bear teeth, or sharp spikes. "Slow Down!" It seems a nice visual metaphor for time.

How else could time be shown spatially in this context?

Another conversation for another day: missing UI metaphors for working with (as opposed to simply understanding) elements which travel through time. We can tell it's a problem because people are going to the effort of devising complex workarounds. For example, the 37signals crowd has a nifty solution for throwing emails forward in time.

Click to read more ...


Keith at Cognitive Science Happy Hour, SF

I'll be giving a brief talk in San Francisco this Sunday the 8th Feburary at 3pm. The talk will cover my readings on the links between the "extreme male brain", autism, and then extrapolate to the design of software.

You can read more about the Cognitive Science Happy Hour here and also on the official Cognitive Science Happy Hour Upcoming event page. If you're in SF at this time, and you're reading this, do pop in and say 'hello'!

Click to read more ...