The Cognitive Load of Interface Visuals

A couple days ago, I twittered a link about Microsoft My Phone’s new release, cringing openly over the use of typography in its phone app. Now, I’m by no stretch of the imagination a type designer or someone with a strong understanding of the many fine intricacies of typography and fonts, but I know enough to be able to tell when it’s the use of type that’s making me distress over an interface.

As I scrolled down on that page to see the screenshots of the associated web interface for MS My Phone, I was reminded of how cognitive load-heavy Microsoft’s Vista theme is, all by itself. This, in turn, brought back a memory of a friend of mine, the inimitable Rob Mientjes, who said to me after his first encounter with Vista’s interface:

If the devil is in the details, why is Microsoft putting tiny little devils all over their interface?

It’s something I agree with every time I see a screenshot of a Vista interface: the many little UI elements that are added to Vista’s Aero interface (in particular) are bountiful, far too bountiful for my taste. There’s a plethora of lines, glosses, redundancies (repeated messages as seen in this Copying Files dialog), panes, menus and buttons all occupying your mind every moment you use the interface. Even when you can adequately focus your attention to the specific interface element you’re dealing with, your mind will subconsciously perceive all the others, and this adds cognitive load.

Tantek Çelik wrote, exactly two years ago, about the Three Hypotheses of Human Interface Design. A central theme in it is the cognitive load generated by User Interface elements and the interactions you have to go through with each of them to accomplish a task.

But Çelik’s post limits itself to the interface elements and interactions, which, I think, is inconclusive when we’re talking about the cognitive load of a UI as a whole. You may point out that there’s copious amounts of discussion about design, graphic and visual interface design, and you’d be right. What’s not discussed as often, or as often as I’d like, is the cognitive load generated by visual design decisions for a user interface.

We’re constantly trying to create richer and richer experiences on the web, today: the plethora of Javascript libraries that add innumerable amounts of features is but one testament to this. What we need to be cautious about is in making the visual experience rich, but not too rich.

An example, one that I originally didn’t plan to use but turned out to be too good an example, is my good friend Bryan Veloso’s Avalonstar. Now, Bryan is one of my all-time favorite designers, an inspiration and incredibly talented in a variety of skill sets. His latest Avalonstar design, however, makes me look on in awe but it actually prevents me from navigating his site. I get on that front page and I just don’t know where to go, there’s so much going on (and so much beauty to behold). Despite that, I still consider it one of the most beautiful websites I’ve ever seen. [Update: Bryan has since redesigned; you can see the version I wrote this about on Flickr]

On the opposite end of the spectrum lies Daring Fireball: John may be the first to say he’s not a designer, but he has a great design sense nonetheless. What’s telling about DF, however, is that I actually prefer reading his blog on the site over reading it in a feed reader. It’s extremely minimal in design, but the net result is that I know exactly where to go: the content, which is the only thing drawing attention to itself.

Aside: one thing that’s particularly cognitive load-increasing and found on almost every big website out there is Flash banners. Their nauseatingly endless attempts to try and grab your attention aren’t just a matter of nuisance, they heavily increase the cognitive load of the UI as your mind now has to spend brainpower in suppressing these animations constantly, just to focus your attention to the content you’re there for.

Personally, I do like my flair in website design, coming from a more “graphics artist” kind of background than anything resembling a real “design” background, but it’s too easy to lose oneself in adding flair and visual richness to a website design. The key is not in adding richness to the design, but allowing the richness of the content to shine while adding no more around it than absolutely necessary.

Soon, I’ll have my own design finished and then will finally launch for real. Once I get there, I’ll talk more about this subject and how it has influenced my design process in making that new design.

If you liked this, you should follow me on Twitter!