This month we take a look at a recent book on UI Development from Dan. R. Olsen, and a slightly older book from Sunsoft about applying good design techniques to UI Design.

These two books ought to be complementary. The first one tells you about design and visually communicating your message. The second tells you how to go and build that design.

Both books have titles designed to catch the attention of the UI Designer/Developer. So would your money be well spent and more importantly would your time be well spent reading either of these books?

Designing Visual Interfaces - communication oriented techniques

by Kevin Mullet and Darrell Sano, Sun Press, 1995

This book is divided into 8 chapters. The first is an introduction to tell us that "Visual Design attempts to solve communication problems in a way that is at once functionally effective and aesthetically pleasing.", the last is the conclusion which gives us the profound observation that visual design is happening to your software every day and if it is not good design, then it must be bad design! The 6 chapters in between follow a clearly defined pattern. They first explain the problem, then deliver the background (usually from cognitive psychology), present the principles involved, followed by a series of examples demonstrating common errors, then we are presented with the techniques (from the title) which can be used to solve the problem and adhere to the principles. These techniques are explained in clear, concise and logical detail with examples. Each technique is summarised into bullet points.

Throughout, this book is beautifully illustrated with examples ranging from industrial design, graphic design, ui design and brand marketing. The authors/publishers must have spent a long time selecting the imagery to be used and obtaining all the necessary permissions to re-produce the material. In this respect alone, the book is a triumph as a general book on design.

Overall we are told that "When designing for human-computer interaction, communication is the over-riding concern." So here is a book about communicating your information, message or data through the computer screen.

Elegance and Simplicity

For me these two words define the essence of good design. Something which is elegant is usually simple whilst completely functional. Elegant designs usually lead to good customer acceptance, ease of use and appreciation, whilst being easy to engineer, easy to produce and robust in use. It is no surprise that these two topics come up first. We are told that the principles involved are "Unity, Refinement, Fitness". Examples are Unity: Mercedes Star, Refinement:London Underground map, and Fitness:MacPaint. This is followed by a section highlighting 8 common errors with UI Design such as "Clutter and visual noise", "Overly literal translation", "Excessive detail and embellishment" each with examples.

The techniques to solve these are "Reduction", "Regularization", and "Leverage". We are shown how to reduce a design to its essence by example and then summarised into 3 bullet points. Throughout the book these "Summary" pages are easily found as they are all consistently on RHS pages. Throughout the book, the techniques described within are being used for the layout and communication. It is a working example of good design. We are then walked through Regularisatoin which is summarised in 4 bullets - as always with pictorial examples from real GUIs. Regularisation is about simple stuff like making buttons a consistent size (take note Swing Design team!). Lastly, Leverage which shows us how to use differences in Fonts and subtle use of labelling to emphasise what needs to be communicated.

Scale, Contrast and Proportion

The introduction to chapter 3 shows us how scale , contrast and proportion are used to great effect in graphic design to convey differentiation, emphasis, activity and interest. There is some difficult background material explaining "selective perception" then we move onto the principles required, namely, Clarity, Harmony, Activity and Restraint. Clarity, we are reminded, "results from a single-minded focus on communication". What this book is all about. 6 Common Errors are listed and illustrated. I found the page on "spacial tension" particularly interesting and the page on "visual interference" which points out that attempted "Leverage" (from chapter 2) can often backfire causing visual interference. This highlights the design tradeoffs and compromises which are often necessary in good design. The authors could have made more out of this but chose to ignore it. Focusing on explaining the principles and techniques whilst avoiding cluttering the book with debate on design choices and tradeoffs. This would imply that there is scope for another deeper book.

The techniques explained here are Layering, Sharpening and Integration and we are introduced to the "Squint test" which comes up again and again throughout the rest of the book. If you don't read this book carefully you can easily miss little pieces of wisdom which are woven throughout the text, such as "Because the background in a GUI uses the same visual elements as the foreground, margins must be more generous than in print design." which comes in the concluding paragraph of chapter 3.

Organization and Visual Structure

Chapter 4 takes a look at 4 attributes of good design - unity, integrity, readability and control. Again we are given some deep insights from the Gestalt school of psychology and introduced to the concepts of proximity, similarity, continuity, closure, area and symmetry. The principles employed to achieve these desirable attributes are Grouping, Hierarchy, Relationship and Balance. For me, this was the point in the book that began to get really interesting for the Practical User Interface Designer.

Grouping of data for effective communication is something that I spend a lot of time on. Here we are shown an example of a before and after dialog - the first with bad grouping, the second with an improved design. Once you have grouped data for display, there is inevitably a hierarchy and some data is more important than others. "Grouping and hierarchy are re-inforced by relationship..." Finally, Balance. All 4 of these principles are visually explained by example from real UIs. This set of 4 represents vital knowledge in the development of cleaner and clearer user interface and is perhaps the most important section of the book.

There are 8 pages of Common Errors including "Haphazard Layout" and "Alignment within but not across controls".

The solution is 4 techniques - symmetry, alignment, optical adjustment and negative space. This is one of the few publications anywhere which attempts to explain how to use "white space" in UI Design. This is summarised by 5 bullet points including the profound observation that "white space is not wasted space! Its role is to direct the viewer's attention..."

Module and Program

This chapter is a little more obscure and may not seem relevant to many at first glance. It is particularly appropriate to those who have to design a family of products or a large corporate application or suite of applications. Module and Program is about Structure, Predictability and Efficiency. It talks a lot about grids and consistent re-use of similar or identical layouts. The principles employed are: Focus, Flexibility and Consistent Application. This material contains some good tips for those who would like to write a better layout manager program - particularly appropriate for those working with Java. For me the most difficult task when approaching a new UI Design is the initial structure. It must be capable of consistent application across the whole of the product or system and must be flexible to deal with the different nature of data which must be displayed across the breadth of the problem domain. I associate it with the highest risk in the design of the UI and this is the only book which I have come across which tackles how to go about developing such a structure for a design.

Once again there are 6 Common Errors higlighted before we are given the techniques to employ. These are: Repitition; Modular Units; Grid-based Design. The bullet point summary on Modular Units contains some particularly good heuristic advice. Often UI Design is counter-intuitive and it helps when someone else has learned the lessons before you and gives you the benefit of their wisdom.

Image and Representation

This is by far the most accessible chapter as it talks about the development of graphical images and icons. So long as the UI community remains obsessed with Metaphor and Iconic representation, there will be high demand for the advice in this chapter. Actually, it goes a long way to highlighting that good icon design is very difficult without actually pointing out that it might be best avoided altogether by those unskilled in the art.

We are told that the key elements are identification, expression and communication. The background material is semiotics. The principles at play are : Immediacy; Generality; Cohesiveness; Characterisation; and Communicability. Simply reading that list should communicate how difficult it is to devise such graphics. This section is again well illustrated. There was this good piece of advice, "imagery is normally used to represent a class of artifacts, rather than any particular instance". There are many many pages dedicated to carefully walking us through the principles and the classic "Postbox" example is used to highlight how graphic imagery doesn't always translate across cultures. The section on Common Errors is again excellent and well illustrated.

The techniques explained are : Selection; Refinement; Coordination. The point is made that where only a subtle distinction exists between artifacts which require to be represented, words are always better than pictures. This blows up the UI Myth that internationalisation is easily achieved with icons rather than proper I18N translation for text labels.

So What About Style?

Style in UI is about Look and Feel. Style in design is about emotion, connection and context. The final chapter with real content takes a look at the principles involved in developing a style. These are: distinctiveness; integrity; comprehensiveness; and appropriateness. After reading this, I had a new appreciation of the Java Look & Feel from Sun, as it truly does follow the 4 principles.

The techniques employed are: Mastery; Generalization and Evolution. The first section on Mastery fails to point out that styles are seldom completely comprehensive. For example, a GUI Standard which is devised for say word processor and spreadsheet style applications, is not completely appropriate for business transaction applications. The standard was written with a particular classification of application in mind. If the designer is faced with designing an application which does not fit that classification then she must break the rules. Thankfully, this is addressed later in the chapter. The gist is that a designer must first use the style guide laid down until a thorough understanding is achieved - a mastery. Then later she can move on to extending it for other problems. This chapter also contains some observations on the debate about cross platform style vs. cross application style, i.e. when developing an application on Mac and Windows, should it be consistent across platforms or should each version be consistent with Mac and Windows style guides. It's a good question and one which comes up even more with the advent of Java.

One of the many quotes in the book sums this up, "When all else fails, standardise! Donald Norman"

Summary

A nice thin book, beautifully illustrated with many, many examples of graphic and industrial design as well as UI screen shots. This book is dense in knowledge. It cannot be skimmed through superficially, as almost every sentence has something to teach you. It is not about "cookbook" techniques or rules and guidelines. Rather, it seeks to explain and reason with examples. It tells you Why! as well as How!

This is the first book to really approach the subject of applying classic design knowledge to the design of computer screens. It is thorough and rewarding for the reader. If more software designers were to follow the lessons in this book then it would be very rewarding for Users everywhere.

Recommendation

5/5 - A "must have" book for the serious UI Designer.