Important visual design principles for interface design

Now that everyone at Cooper has committed to writing a more frequent Journal, I’ve found myself reading a lot more blogs. That’s not to say that I wasn’t happily browsing and sponging before, but I’ve been really consumed by other people’s opinions lately. For instance, Ryan Singer of 37 Signals pointed to an interesting UI discussion just a few weeks ago. The discussion began in the comment area of a screenshot posted to Flickr, and it related to an iPhone application called Triplog/1040 by Stevens Creek Software; I've pasted the photo below.

The screenshot received a great deal of negative criticism. The customer reviews at the iTunes store have been equally negative, and the average rating is currently 1 ½ stars out of 5. (Not great if you’re looking to earn revenue on your application and there are several competitors challenging you).

So what to do about it? Well, I *could* critique the screen with additional constructive thoughts but I feel like Steve, the designer, has received enough suggestions and probably is not looking for more feedback. (If my work had received that kind of attention I think I might quit and become a barista). Instead, I’ll highlight a few visual design principles that this conversation sparked in my mind.

First impressions count Just like you gain an instant impression when you meet a person for the first time, the same is true for interfaces. Called the Aesthetic-Usability Effect in Universal Principles of Design, this principle highlights the important role that visual design plays when designing products:

The Aesthetic-Usability Effect describes a phenomenon in which people perceive more-aesthetic designs as easier to use than less-aesthetic designs — whether they are or not ... Aesthetic designs are more effective at fostering positive attitudes than unaesthetic designs, and make people more tolerant of design problems.

The discussion about the Triplog software has been all about how unusable it looks despite the application not being available at the time to use. That’s not to say there aren’t usability flaws but a visual design with more organization and the right prioritization would go a long way to improving the perceived usability of the application.

Dense doesn’t have to be ugly but it does require you to be smarter Much criticism of the Triplog interface was about the screen being too cluttered. But as Steve pointed out, his users need to view all of that information at the same time. I'm not challenging whether information should be removed but am reminded that for screens with high information density it is more important to use visual design techniques to organize the structure and flow of content as well as prioritize the most important information in a way that’s easily scannable.

Looking at a dense interface is like listening in a restaurant. When the restaurant is quiet it’s easy to hear the person you’re dining with but if the restaurant is busy and there’s a lot of background noise then it takes a lot more effort to hear and understand what the person sitting opposite is saying. You can do it but it takes a lot more work and isn’t as much fun.

Dense interfaces should have a clear visual hierarchy with a maximum four or five levels of distinction. Dense screens should be designed so that similar interface elements share attributes such as size, shape and color or proximity. Dense information should be organized so that elements are aligned to an underlying grid, which aids scanning. Finally, dense screens should contain minimal gratuitous noise that doesn’t support the user interaction.

Be different if you want to be remembered Several people offered constructive ideas in the discussion. Some even went as far as to quickly mock up how they would design the interface (see here and here). Some resulted in screen designs that looked very similar to Apple’s UI guidelines for the iPhone.

I recognize that these mock-ups were done extremely quickly, but the alternatives run the risk of being too generic to be memorable, looking too much like an iPhone utility and not enough like a unique, useful, and original application. I’m the first to recommend standard UI best practices, but standards need not get in the way of establishing a brand. (Some commenters even preferred the bright blue background in Steve’s design to the more familiar iPhone UI, perhaps because it is unique and memorable).

It’s an exciting time to be in visual interface design Okay, this may not be a principle, but it’s worth mentioning. There are all kinds of new digital products with interfaces that are changing the world we live in, and it’s exciting to see, discuss, and participate in this movement. Apple’s iPhone is one great example. New technologies require new thoughtful design. Now I just need to figure out what iPhone app I’m going to design and sell on iTunes.