There is no technical topic closer to my heart than good user interface design. The reason is simple: making my way through the world often requires dodging many traps left by otherwise well-meaning folks who create very difficult interfaces. So I was thrilled to attend the UI Fundamentals for Programmers talk at RailsConf by Ryan Singer of 37signals.
When we think of user interface design, we probably think first of digital artifacts: the web applications, phones, or computer applications we use. But user interface design is much broader than that.
For example, I was at a workshop recently and after lunch I wanted to ensure my bottle made it into the correct recylce bin of one of those three-part glass, plastic, trash combo things. Unfortunately, instead of just tossing my bottle into the well-labeled bin, I spent half a minute trying to discern from the contents which was the correct bin. There were recycling symbols and other markings but no clear labels. Maybe they had worn off. Regardless, those three bins were an interface for depositing waste.
While I’d like people to think as broadly as possible about user interface design, this talk focused on some important aspects of traditional digital interface design. According to Ryan, user interface design and application programming are closely related and interdependent. From the perspective of a programmer or designer, the user interface is simply another layer in the application. But to the user, the user interface is the only thing they interact with so to them it IS the application.
Good application architecture emphasizes the importance of interfaces between components over the implementation details inside components. However, when beginning work on an application, Ryan suggests the most important element is to construct a model for the application that makes sense to the user and allows for its implementation. To understand the importance of this model, Ryan points to the book Domain Driven Design by Eric Evans.
One of the main tasks for a UI designer is to determine how the application is split up into screens. A screen is the unit of conversation for the designer. Within the screen, the designer should start from the “inside-out”, focusing first on the most important thing that needs to be displayed and adding the surrounding information.
Ryan selected Edward Tufte’s books, particularly The Visual Display of Quantitative Information, as one of the best sources for understanding the principles of visual design, selection and use of color, and proportions for visual elements.
Ryan emphasized the importance of one principle in particular: the least effective difference. Essentially, this means using the smallest visual effect that will distinguish elements. By adding or lessening contrast between visual elements, we create a hierarchy of information on the screen to show the user what they need to focus on to accomplish a task.
This is just the tip of the iceberg of UI design. Hopefully it will encourage you to investigate further. Everything has an interface and the better they are designed, the happier we’ll all be.