I’ve been a fan of design for as long as I can remember. I’ve always been fascinated about why designs “feel” good. Whether it’s a car, architecture or a piece of software, certain designs are a pleasure to look at and interact with and I’ve always been curious about why they work. Over the past few years, I’ve been developing more and more software (Bangarang mostly lately) and my fascination with interface design hasn’t diminished.
However, for something that is essentially a hobby, I’ve often found it difficult to find UI design guidance that doesn’t often feel crippling to small hobby developers like myself. It is probably no terrible surprise that much of the UI designs produced by us small hobby developers can sometimes be, well… not as great as we would like. In many cases, it is not for lack of trying. My view is that so much of the UI guidance available can be so overwhelming and inaccessible to small hobby developers that it often feels like there’s nothing you can do, especially at design-time, without a team of UI experts and test facilities.
To be clear, I absolutely do not intend to imply that a team of UI experts and test facilities won’t help to produce excellent designs. I strongly believe that they can and do produce amazing designs. Where I’ve often felt that there has been a bit of a void, however, is layman UI guidance. Some guidance for the a-little-above-average Joe, just hacking away at his favorite pastime, for the fun of it. It’s a bit like mathematics. The experts can work on and contribute in substantial ways to society by understanding and applying, for example, tensor algebra to fluid mechanics problems. But the a-little-above-average Joe still knows enough basic trigonometry to maybe do something cool in his favorite pastime. I wish it were more the same for UI design, because often us hobby hackers have little or no guidance.
So below is my contribution to my fellow hobby hackers. It is not intended as a substitute for formal UI design training, but I hope it is, nonetheless, useful. Oh, and yes, Bangarang has room for improvement. 🙂
—————————————————-
User Interface Considerations for the Small Independent Developer
Use-Cases
Every tool serves a purpose: To facilitate the user’s desire to accomplish a goal. The user accomplishes each goal by using the tool to complete a task that either directly accomplishes the goal or contributes to accomplishing the goal. These tasks may also be called use-cases.
Use-case identification is a critical precursor to designing or modifying the tool.
Ideally, use-cases should be implementation-agnostic.
As little of the use-case description as possible should refer to the actual implementation of the tool. It should instead focus on the user and the goal. An example of a good use-case description is “The user would like to listen to music while doing other activities like browsing the Internet.” A poorer version of this is “The user would like to minimize the media player to the system tray.” The former version may be satisfied by a variety of implementations – which frees the tool designer to identify the best implementation that accomplishes this – while the latter version compels the tool designer to a specific implementation that may or may not be the best way for the user to accomplish the goal.
Use-cases serve as the basis for tool functional requirements, including User Interface design requirements.
—————————————————-
User Interface
The User Interface(UI) is the medium of interaction between the user and the tool. The user, via the UI, employs the tool to accomplish a goal. As such, the appropriate design of every UI element directly depends on the identified use-cases. No UI design or modification should take place without a clear identification of the relevant use-cases.
Before going any further I should mention Magic Ink. I won’t mention anymore than that. Just read it.
In general, the design of the UI should prioritize information over interaction. In almost every case of tool use, the user needs information in order to decide if, how or when to interact with the tool to accomplish the goal. There are cognitive impacts of both information and interaction. Information has a cognitive impact in that the user has to transfer the information from the presentation medium to memory and process that information into something useful and relevant to the goal. Interaction has a cycle of activity which can add up to a substantial cognitive impact. The user has to first gather information in order to decide what action to perform that might help accomplish the goal, perform an action based on that information, then interpret new information provided as a result of having performed the action. (Simplistically, it might be considered a double hit on cognitive impact due to information plus an additional hit for taking the action.) The ideal UI for all tools is one that allows the user to gather all required information instantly and effortlessly and accomplish their goal with the absolute minimum interaction. There is, of course, no such thing as the ideal UI. So:
The best UI allows the user to accomplish their goal(s) with minimum cognitive impact.
This might imply that the cognitive impact of interaction always exceeds that of information and, in many cases, it does. However, when information is poorly presented, the total cognitive impact of assimilating information may exceed even that of a properly designed interaction cycle. In these cases it might cost less to introduce an interaction mechanic in order to minimize the total cognitive impact of the task. This can be especially true for tools which have use-cases wherein the goal is to access specific pieces of information from larger amounts of information. Care should be taken in these cases to only introduce interaction where it is necessary to reduce the cognitive impact of the UI implementation for that use case.
Cognitive impact is determined in a variety of ways up to and including elaborate experiments. However, the UI designer should never feel paralyzed to act since the first measure of cognitive impact is the experience of the designer him/herself. “Dogfood” – designers should use their designs as though they depend on it. Beyond “dogfooding”, though, the success of any design depends on the ability of the designer to empathize – to experience their design from the perspective of others. It is in this respect that UI design is much the same as creating art. Great artists that are skilled in their craft use that skill to purposefully create an experience for others. In lieu of an innate ability to empathise in this way, UI tests can be employed to gather information on the experience of others as they use the tool. If tests are not viable due to the typically constrained resources of the independent developer, this discussion will hopefully provide a simple way to evaluate a UI design – at design time – that will hopefully allow the independent developer to produce better designs than doing nothing at all.
The details matter! Due to constriants on time, resources or a simple lack of awareness, there can be a tendency to ignore things like elements being a couple pixels out of alignment, an unnecessary line, a slight difference in size, etc. These tiny details really, really do matter. The brain really does pick up on these details and attempts to make meaning out of them. That’s what our brains do well: It is a phenomenal pattern recognition and filtering engine. It allows us to pick a familiar face out of a crowd, distinguish between many voices and noises and so much more. It has evolved, out of necessity, over many thousands of years to care about the details. So attention to these details can make a significant overall difference in the success of our designs. Of course, this concept has long been part-and-parcel of graphic design. Unfortunately, it tends to be overlooked by small independent developers.
A UI element includes anything in the user interface: a line, a letter, a word, an icon, a color, whitespace, a switch, a collection of elements, etc. Every element in the user interface has, what I propose to call, an Information Value and an Interaction Impulse. The next two sections discuss these terms.
—————————————————-
Information Value
Information Value is a measure of the usefulness of the information provided by a UI element to the goal associated with a particular use-case. For example, if the user is looking for the artist of the currently playing song then an element displaying the name of the singer has a high Information Value while an element displaying the track number has a relatively lower Information Value. A line, whitespace, or color may have a relatively high Information Value if it provides a way to separate or group data when the user is looking for specific information in a display containing larger amounts of data.
The Information Value of an element or set of elements depends on how the elements are used to present information. Information presentation is an exercise in graphic design. There’s simply no need to re-invent ways of presenting information just because it is being done in a user interface. Graphic design principles are immediately applicable to UI design.
Entire courses of study are available on graphic design. Again, just because the UI designer is not an expert in graphic design, does not mean that they should feel crippled to act. A very basic awareness of graphic design principles should help the designer produce a substantially better user interface than no awareness at all. Consider the following graphic design elements and principles when evaluating your design:
- Graphic Design Elements
- Lines
- Shapes (includes blocks of text)
- Mass (the visual weight of elements)
- Texture
- Color
- Graphic Design Principles
- Balance
- Proximity/Unity
- Alignment
- Repetition/Consistency
- Contrast
- White Space
There are ample resources on the Internet which explain these terms in greater detail. However, it should be reasonably evident, at least in a very basic sense, what each term means. Again, the purpose here isn’t to teach all there is to know about graphic design. Rather, it is to bring a basic level of awareness to the person who find themselves in the role of UI designer. The designer is encouraged to use their best understanding of these terms to evaluate the Information Value of each UI element in their design. Obviously, the greater the graphic design knowledge and skills possessed by the UI designer, the better the chances of a successful design.
The Information Value of any element only makes sense when considered within the context of each use-case. For example, the Information Value for text showing the year an album was released may be high if the user wants to know if the song they’re listening to is a hot new single. However, the Information Value for the same text may be low if the user wants to know about other albums by this artist (in which case text containing the artist name (or even better – the actual list of albums) might have a higher Information Value).
The Information Value of an element may also vary depending on the presence of other elements in the UI. In general, the greater the number of elements presented to the user at any one point in time, the less the Information Value of any single element. Consider a table containing field names in the first row and fields value over several rows below that. A line under the first row might have a high Information Value because it distinguishes the field name above it from the field values below which helps the user understand the kind of information contained the field values. However, if the same line is added between each row of field values, the Information Value of first line will be reduced and the Information Value of these new lines will have low Information Values. The reason is that the user may find it more difficult to distinguish the first row as field names versus field data.
The Information Value of an element may, in part, be informed by the familiarity of the element to the user. Care must be taken to avoid over-reliance on familiarity because it may compel a specific implementation and potentially limit a full investigation of the possible UI design solutions to a particular use-case.
Reducing or eliminating elements with low Information Values should a goal of the UI designer.
While it is possible to use a specified range of numbers to capture the Information Value of each element, it might be just as helpful to use None, Low, Medium, High as a way to describe the Information Value of a UI element. It can also be helpful to simply understand the Information Value of an element in relationship to other elements. i.e. Higher, Lower.
High Information Value elements reduce the cognitive impact of each step the user performs to complete a use-case. Low Information Value elements do not reduce, and may even increase, the cognitive impact of each step.
—————————————————-
Interaction Impulse
Interaction Impulse is a measure of the inclination or motivation of a user to interact with an element. For example, a button has a higher Interaction Impulse than a text label. In this sense, the Interaction Impulse of elements can positively and negatively influence the cognitive impacts of the UI and ultimately the effectiveness of the tool in each use-case.
When interaction is necessary for the user to accomplish the goal of the use-case, high Interaction Impulse elements help direct the user’s attention quickly to the required interaction. A gun’s trigger, a camera’s shutter button and media player’s play button all have high Interaction Impulses.
However, if interaction is not necessary for the user to accomplish the goal of the use-case, high Interaction Impulse elements can draw attention away from other elements that support the use-case under consideration. Imagine, multiple buttons that are displayed among text elements. For a specific use-case, the text elements display the information the user seeks, however the buttons draw the attention of the user away from the text elements.
The interplay between Interaction Impulse and Information Value should also be considered when dealing with multiple high Interaction Impulse elements where interaction with any or all of them are necessary to accomplish the goal of the use-case. In the previous example of buttons and text, these high Interaction Impulse button elements could actually end up reducing the Information Value of the text elements. Another example are website ads. The primary function of these ads is to get the user to interact with them so they are purposefully designed to have a very high Interaction Impulse. For the user looking for information ostensibly provided by the website, the ads often distract the user because of this higher Interaction Impulse which cause the user to focus less on the elements containing actual content of the site. These ads interfere with the goal of the use-case for which other displayed elements were designed and results in diminished Information Value for those elements.
When presented with the need to interact with multiple elements, the user needs information to decide which element to interact with and when. This means these interaction elements (or elements associated with them) must have sufficiently high Information Values to allow the user to make a decision with the minimum cognitive impact. If interaction is optional, use elements with a relatively lower Interaction Impulse. If interaction is necessary, use elements with a relatively higher Interaction Impulse.
Minimizing or eliminating high Interaction Impulse elements that do not support the use case should be a goal of the UI designer.
While it is possible to use a specified range of numbers to capture the Interaction Impulse of each element, it might be just as helpful to use None, Low, Medium, High as a way to describe the Interaction Impulse of a UI element. It can also be helpful to simply understand the Interaction Impulse of an element in relationship to other elements. i.e. Higher, Lower.
High Interaction Impulse elements that directly support the user’s needs will reduce the cognitive impact of interaction steps the user is required to perform to satisfy the use-case. High Interaction Impulse elements that do not directly support the user’s needs will not reduce, and may even increase, the cognitive impact of interaction steps the user is required to perform.
—————————————————-
Conclusion
The point of this discussion was to provide some basic concepts along with a simple vocabulary that the small independent developer can easily integrate into the design work-flow. Attempt to talk about your design using these terms. When something feels “off”, try to determine the relevant use-case(s). Then go through the UI elements in your design and consider their Information Value. Try to be aware of the basic graphic design principles. Consider the Interaction Impulse of the UI elements and try to decide if they help or hurt the relevant use-cases. Keep these basic concepts in mind and think out loud about them when modifying your design.
The small developer can use these concepts during the design process instead of blindly designing then waiting for feedback from users during pre-release testing when it can be painful to make UI changes. Developers that are also talented graphic designers tend to naturally consider these concepts during design and, of course, tend to produce more effective designs. However, uncertainty about your own graphic design talent, UI expertise, or a lack of resources should not prevent you from considering these basic concepts when designing or modifying the UI for your favorite piece of software. Moreover, small independent developers should spend time on UI design. None of our hard work on the underlying stuff will add up to much if the user struggles to take advantage of that work because of poor UI design. It is part of the same creative impulse that compels many a hobby developer, and the rewards are no less sweet.
Bangarang - a media player 