Thursday, May 28, 2009

Ten Interface Design Principles

photographyI will now qualify my previous UI ramblings by stating the principles that are operating to inform my analysis. These design principles are generally applicable to different application domains. But for the purposes of specificity I will give examples from the current domain. That is, a comparison of the Pentax K-7 to previous camera models like the K20D.

First I present my ten design principles. Then I will follow up in detail.

1. Maximise positive affordance
2. Group related controls
3. Prevent undesirable actions
4. Make functionality clear
5. Avoid arbitrary changes
6. Make things as simple as possible
7. Provide positive feedback
8. Consistency is not always desirable
9. Provide user customisation
10. Avoid modes

1. Maximise positive affordance
Controls should be placed where they can easily be reached and used with a minimum of muscle effort or reference to memory. Consider which controls might need to be used in sequence, how often they need to be used, etc. Controls that trigger mode changes or functional differences that are more difficult to recover from need to be harder to activate. Perhaps use switches in these cases. Controls that need to be used repeatedly, that cycle between multiple states, or that choose between a list of values might better be dials or push-buttons.

Example 1: The basic model of using two rotary dials in coordination with push-buttons has been preserved from the K10D through K20D to the K-7. This layout allows multiple functions to be quickly accessed and changed using a combination of thumb and finger movements. It has proven to be highly effective.

Example 2: The Green button should be near the shutter release, so they can be triggered in sequence with the same finger, as part of the same overall user task.

Example 3: The Delete button has a small nub in the centre so it can be recognised from touch. (I assume this is the same on the K-7 as on the K20D.) This provides a small "prick" to the finger, indicating a negative association entirely in keeping with its functionality. Small factors like this mark out exceptional design.

2. Group related controls
Grouping embeds meta-information about the functions of the controls in the physical design itself, reducing reliance on memory and learning. The less one needs to remember, the better.

Example 1: Four functions which are used outside the shooting process -- Menu, Delete, Info and Play -- were together on the K20D but are split into two groups on the K-7. This is a bad thing.

Example 2: The AF mode selector has been moved to encircle the AF button. This groups related activities where before they were not grouped. This is a good thing.

3. Prevent undesirable actions
It is often more difficult to recover from an error than to take longer to perform the correct primary function. This is true for three reasons. 1. The source of the error may not be immediately recognised. 2. The error recovery process requires a different task function to be followed through, interrupting the primary cognitive task. 3. The error recovery process may not be obvious. It is very important, therefore, to avoid possible user errors.

Example 1: The four-way controller has raised buttons where a left-eyed shooter will have their cheek positioned. On the K20D these controls were not always active (unless AF point selection was engaged). On the K-7 they are always active in one of two functional modes. This might very well increase the error rate significantly.

Example 2: It is impossible to accidentally change the mode dial on the K-7 since it now has a lock button on top. On previous models it was possible for this to be moved accidentally. While this was unlikely during camera operation, it was perhaps more likely when the camera was stowed for transport, or grabbed out of a bag prior to use.

Example 3: On the K20D the Menu, Delete, Info and Play buttons are inset within a flange to prevent accidental presses.

Example 4: Tapping the Delete button twice in succession puts one in a menu where one has to confirm or cancel the deletion of the entire disk of images. This can happen quite readily and faces the user with a critical choice. This situation could be avoided if the second action after the first tap of Delete was one that required a different control entirely. Getting to the critical choice would now be very unikely to happen by accident.

4. Make functionality clear
This can be done in part by following the principles above. Labels are also key to this process. Text labels may not be clear to readers of other languages. Iconic labels may not be consistently interpreted. Both must be kept clear and concise. Developing solutions to this problem is a difficult matter, which is why it is all the more critical that the other principles are followed through to the utmost.

Example 1: The hexagon on the four-way controller is perplexing. There was much guessing about its functionality in the Pentax comunity until it was revealed as accessing image parameters.

Example 2: The metering labels are clear and consistently iconic.

Example 3: The focus point labels are inconsistent: one is an icon, one is text and one includes both. This is less clear than it should be.

5. Avoid arbitrary changes
If moving a control does not make a distinct usability improvement, just leave it where it was on the previous model. This makes it easier for users upgrading from one device to another, and also those who wish to operate more than one model as part of the same workflow. This principle must of course be balanced against possible positive benefits.

Example 1: Consider the EV and ISO buttons that have moved from the back to the top panel. While it still might be easy to use these, there is no distinct advantage in moving them. In fact, I could argue it is intrinsically disadvantageous, but even if this is not the case, the simple fact they have been moved is a disadvantage.

6. Make things as simple as possible, and no simpler
This is easy to state and very difficult to evaluate. Sometimes overloading a control with more than one function increases complexity. Sometimes adding an extra control increases complexity. Sometimes introducing a user-defined feature increases complexity. But sometimes all of these can enhance simple operation. This principle cannot be evaluated without reference to those stated previously.

Example 1: The OK button on the K-7 has two different functions; this has been indicated by two different items on the button label. This has the appearance of becoming more complicated than necessary.

Example 2: The front and back dials control more than one function, but as their affordance suggests this, there is no confusion. No attempt to label all the functions has been made, except that the image review icons have been stamped next to the rear dial. Perhaps these are better removed, since they indicate a single functionality where multiple functions exist.

7. Provide positive feedback
To avoid confusion, hesitation and error, it should be clear to the user that a control has responded to the touch. Likewise, the current state of the device should be obvious. Readouts such as LEDs and LCD panels can aid in this. Switches are ideal for physically indicating state.

Example 1: The positive action of the K20D buttons makes it clear, by touch, when one has been engaged. The overall solid feeling of the controls on Pentax bodies is a notable achievement.

Example 2: The SR switch on the K20D provided a positive notification of the state of this important feature. Even if it the SR setting did not have to be changed very often, this control played a valuable role. The switch has been removed in the K-7 and initial shots of the top panel reveal no indication of SR status. (Note however that there is always a viewfinder indication when SR gets a lock.)

8. Consistency is not always desirable
Form should follow function. Since functions and affordances differ it is not always desirable to have consistent form. This has already been discussed in regards to control labels.

9. Provide user customisation
As devices become more complex an increasing number of settings are required to accommodate different users and their various needs. For example, the K20D has 36 custom settings. As the number of choices expands several problems arise. How can the user get from one configuration of settings to another? Which settings are important enough to be raised out of the menu to the physical UI? Since the answers will be different for different people and uses, customisation is required.

Example 1: The K20D and K-7 provide a User setting on the mode dial. Custom setting can be locked into this mode for quick recall. This is a great idea in principle; perhaps even a second User mode would be advantageous. But in execution this has several problems, notably the fact that there are settings that cannot be assigned in this manner. These remain inaccessible. For example, I wish quick access to taking multiple exposures, but this is not retained by the User mode.

Example 2: Some people wish quick access to exposure bracketing, some to multiple exposures, some to SR or other functions. An obvious solution is a "soft" button that can be programmed through the menu. This excellent idea has been suggested many times but never implemented. I have no idea why, since it requires no further technological developments or physical real estate. In fact, what if all four of the directions indicated by the four-way controller were assignable? That would provide an eminently adaptable interface.

Example 3: The menu structure of cameras is getting increasingly long and complex. Why not allow us a custom menu with shortcuts to those functions we wish to access most often? (Apparently the Nikon D80 had a "My Menu" feature that did exactly this.)

10. Avoid modes
A mode is a system state in which certain controls do certain things. If you have more than one mode, controls have more than one function depending on the mode. This is generally undesirable since it violates principle 4, among others.

Example 1: SLR cameras generally have shooting modes indicated by a dial. This can be considered acceptable since each mode dictates an approach based on basic photography principles. The modes are clearly visible, providing positive feedback at all times. Furthermore, viewfinder or back panel confirmation is provided. This is an acceptable use of modes, though I will argue in a later article for a new concept camera that does away with them. For some reason, however, Nikon blazes their own path and uses a push-button/dial combination to select modes, a considerably inferior solution.

Example 2: According to current information, the four-way controller on the K-7 operates in two different modes. It either selects from the marked functions, or it selects the AF point. The OK button toggles between these modes. This breaks our design rules. Had their been a switch to toggle between the modes, positive feedback and visual confirmation of the modes would have been provided. But using a button for this is a poor choice, especially as it does not appear there will be information on the panels to indicate the modality. The confusing labeling on the button is a hint that the affordance is wrong here.

I trust this adds more rigour to discussions of usability. I hope I have not forgotten any important points in my desire to make a timely blog post. (Sorry for the brief glitch where a post named "Nine Interface Design Principles" showed up for a few minutes!) As always, I welcome constructive comments, corrections and so on.

This is a synthesis of design information I have gathered over many years. The only specific reference I can provide is to the Norman book discussed in my article on Everyday Design.



Unknown said...

I would include that design should allow a user to "fail gracefully." A clear understanding of the nature of the failure and an easy means to remedy it would be the ideal resolution.

robin said...

Thanks Ed: You are totally right! I wonder what else I missed?

Post a Comment