What is bad design anyway?

Salt and Pepper with grinder included
Salt and Pepper with grinder included

At the supermarket, it is possible to find salt, pepper, and other bottles of spices with a built-in grinder. I consider this design feature not only useful but also enriching (to the experience of cooking). An added value regarding the user experience. I really enjoyed the idea of smelling fresh crushed pepper while I’m cooking. Moreover, grinding certain spices as salt or pepper gives me a sensation of crafting. One of doing something special and gourmet.

The operation of these bottles is very intuitive just by looking at them—as we can observe in the picture. You take a bottle, remove the lid, and then—thanks to the visible affordances of the device—just rotate the grinder to get fresh crushed salt, pepper, or any other similar spice. Very easy indeed. We might talk then about a good design. The design communicates the way to operate it without stressing or loading the user cognitively.

Although the built-in grinder works well generally, there are some occasions where it doesn’t. For instance, from the picture here shown, the grinder of the peppercorn medley bottle doesn’t work efficiently. I assume the grinder’s teeth are not sharp enough to crush the peppercorns easily. It might sound extremist, but this exception has instilled a suspicious feeling on myself to consider this brand the next time I require to buy a bottle of peppercorn with a built-in grinder. It is not difficult to note that a steel-based grinder will do a better job. Of course, a bottle like that will probably be more expensive. That’s to me the biggest downside of design: better design is always more expensive. 

Coarse grind
Coarse grind
Fine grind
Fine grind

 

 

 

 

 

 

 

 

The bottles of this brand offer an additional design feature. We can decide between having a coarse or fine grinding. To obtain the former we should pull the half of the grinder up, otherwise we will obtain the latter. Notwithstanding, I think this feature is not obvious to the user. In fact, I just discovered recently—which motivated me to write this post. From my perspective, the affordances from the upper half of the grinder indicate that we can rotate that part in order to make it work. The design doesn’t communicate no offer the affordances that indicate the possibility to pull nonetheless.

Bottle lid
Bottle lid

In relation to the latter, there is a key component for this design: the lid. As it is shown in the picture, the lid has the following text: “Adjustable Grinder. Pull For Coarse Grind. For Fine Grind Push Down.” Curiously, I hadn’t paid attention to the lid before my finding. I always associated the lid with keeping the content fresh. And because I take the bottles at the moment I’m cooking, I honestly hadn’t stopped to read the beveled text on the lid. Was I being neglectful? Or should the design clearly indicate what I can do with it?  How evident to use a design should be in order to be considered “good”? 

This situation might sound stupid or exaggerated, but it generates a basic and typical discussion regarding the relation of the design with its users. How obligated is the design to make user’s life easier? I paid more money for this bottle because of the built-in grinder and hence I’m expecting a higher quality in terms of both the content and the design. If I think in a better design for this case, does it mean that I get what I can afford? Is it my responsibility to read the lid then?

What is good design anyway? These bottles are an exemplar of how everyday objects may engage us to reflect about design, its quality, and user’s agency. In this regard, I would like to share the following thoughts:

  1. Design is about selling an idea. Design it’s about selling the mental effort to project a feasible and producible “solution” to a problem. Just imagine the complexity of transforming the human action of grinding objects into a semi-automatic mechanism. Regardless, conveying why to bring an idea into its material form is relevant. It is equivalent to impact on other people’s ability to imagine the future.
  2. The idea will be always constrained by reality. The factors associated to the materialization and production of an idea will constrain the design process and outcome. Materiality is one of these aspects closely related to these constrainsWhat is the most adequate type of plastic that will better resist and minimize the production costs? What about the policies regarding sustainability and the grocery market? How easy is to reuse the glue employed for the sticker on other products of the same corporation, not necessarily on plastic bottles?
  3. Design is not always about solutions nonetheless. There is a general perception that design is about fixing problems. However, a design object may generate a new problem or contribute to other existing problems that might be consider of a bigger relevance. For instance, we may associate the bottle with the built-in grinder with acquisitive power and hence to think about social inequity.
  4. Bad design is situated. Depending on the context and the outcome, we could evaluate a design either as good or bad. Users bring their own values, desires, literacy, and perspective at the moment of interacting or using any design object. Furthermore, all these, including other aspects such as emotions, intentions, and even the situation, may change the next time the user interacts with the same object. Consequently, it is extremely difficult to completely characterize the quality of goodness in relation to the users and the context of use. How bad is bad? When bad is no that bad? When good will become bad?
  5. Good design is time-dependent. When we sum the previous points we can notice that talking about a good or bad design will depend on whether we can perform our goals in a satisfactory way and the knowledge we have about how that design affects our environment/context/reality. The idea behind a design might still be valid, but these factors might contribute to qualify the design as bad, not convenient, or even expired. Notwithstanding, the latter allows designers to exploit one of the key aspects of design as human activity: the opportunity to improve.

The circle as the king of flat design

Unlock screen in iOS 7.

Flat design, a major trend in user interfaces, basically consists of discarding any visual excess of the interface components, either widgets or icons. We may take it as a sort of going back to the swiss graphic style from last century applied to the case of user interfaces. Flat design utilizes lines and shapes as visual units, diminishes the use of texture and shadows, and employs color to cue. Moreover, shapes change form and color through time in order to indicate the current state of the system. One interesting aspect that we can notice about this type of interface is the recurrent use of circular forms. When circles and circumferences—either complete or fragmented—are employed to compose interface widgets, they seem to express time effectively without the necessity of more visual information.

Wordpress circular indicator of progress on saving changes.
WordPress circular indicator of progress on saving changes.

For instance, to indicate the progress of saving changes, WordPress incorporates a circular indicator composed of two circles. The big one is filled with a gray color, whereas the small one is filled with the same color as the background—a lighter gray. Rotating in a clockwise fashion, the small circle indicates that saving is still ongoing.

Whatsapp widget that shows the progress when a video is sent.
Whatsapp widget – 1st snapshot.
Whatsapp widget that shows the progress when a video is sent.
Whatsapp widget – 2nd snapshot.
Whatsapp widget that shows the progress when a video is sent.
Whatsapp widget – 3d snapshot
Whatsapp widget showing a video has been sent.
Whatsapp widget – final stage.

Whatsapp, the instant messaging app, employs a circular widget to indicate the delivery status of a video. This widget is composed of a circle with a shape within. At the beginning the circle is presented with a transparent dark gray that changes to a transparent white once the video is delivered. In the meanwhile, the line that circumscribes the circle is displayed progressively to indicate the current status. In turn, the inner shape indicates the available action. First, it has the form of a square to indicate the capability of interrupting the process. Once the video is delivered, it transforms into a triangle, the universal icon for play. An interesting feature regarding this widget is the double communicative function achieved with its design. On one hand, it shows the progress of delivering the video. On the other, it communicates its affordance as a button.

Google voice circular widget that displays the intensity of the person speaking.
Google hangout widget – snapshot 1.
Google voice circular widget that displays the intensity of the person speaking.
Google hangout widget – snapshot 2

When there’s no video input in a Google hangout, as occurs when it’s used to make phone calls, the interface displays a big circle with the phone number, the duration of the current call, and the cost per minute. Below, two other circles are collocated—as buttons—to dial a number or hang up, respectively. When a person on the other end speaks, the big circle modifies the thickness of its circumference in a wavy fashion according to the intensity of the voice. By means of this visual cue, the user sees when the other person speaks and the intensity of the voice.

Rewind widget for Paper app.
Rewind widget for Paper app.

The sketching app for iPad named Paper introduces a undo functionality consisting of collocating two fingers over the screen and rotating them in a counter clockwise manner. They call it rewind. Before the user starts rewinding her actions, the widget displays a full circle in dark gray. As the user rotates her fingers, the filling decreases counter clockwise. There are two interesting aspects regarding this widget. First, the way the undo function is interpreted by gestures—since we are accustomed either to employ a menu or to press the keys CTRL + Z. The second aspect is that a user can perceive the amount of work she has put on the sketch so far. That is, the circle’s filling decreases in proportion to the number of actions carried out by the user.

Unlock screen in iOS 7.
Unlock screen in iOS 7.

In addition to the functional aspects observed above, we can notice several examples where the circle is more related with aesthetic value. It’s employed to compose buttons, to indicate scales, or even to clip images—as in some profile pictures. There’s no functional value added in these cases. The circle takes the place of rectangular shapes employed in the past.

Notwithstanding, this approach implies a compromise regarding the communicative aspect of the interface. For instance, in iOS 7, the increasing bars originally employed in the widget to display the strength of the signal have been substituted by row of circles. By comparing the differences of size among the original bars, the user could (visually) read the widget in terms of physical magnitude. The different sizes contributed to the metaphorical construction in the user’s mind. By observing the smallest bar, the user could depict the weak presence of waves in the air. Conversely in the case of the biggest bar, the user may depict the environment flooded of invisible waves. This is not the case of the row. The circles are not associated to any physical magnitude—they’re the same diameter. The user only evaluates the strength of signal according to the number of filled circles. Thus, the circles are perceived as units of a scale; a part of a whole. Consequently, the user faces a more abstract understanding of the concept of the strength of the signal. That’s the core of flat design in user interfaces: increasing the level of abstraction and breaking with the strong metaphorical association with the real world. 

Circle-based widgets produce effective results because they encapsulate affordance and time. When the circle is employed as a unit of composition, its basic quality to represent a whole allows the user not only to comprehend the current status of the system, but also to infer future outcomes. For instance, a whatsapp user will know that something went wrong when sending a video if the circumference never completes. On the other hand, a circle also corresponds to a reliable bi-dimensional mapping of any spheroid objects we’ve been interacting with since we were born (e.g. knobs). Because of the latter, a user may easily know how to interact with circle-based widgets in an interface. Although the circle-based widget cannot escape from its metaphorical nature, it certainly entails a more abstract visual representation; perhaps, more easy to dissociate from its origins in the real world.

The aforementioned matters regarding the effectiveness of the circle in flat design correspond to a situation of shaping and composing a visual/multimedia usable message, in other words, of information design. Moreover, the ongoing consolidation of ubiquitous computing, gesture-operated interfaces, and the forthcoming incursion of flexible displays represent a challenge for information designers. Although the visual principles and design principles will practically remain the same, the signifiers attributed to interacting with technology will depend on the context of use. Different types and levels of literacy, sociocultural and socioeconomic factors, the development of technology, among other circumstances, will foster the reinterpretation of ways to visually code information. Since proper information design underpins a pleasant user experience, taking care of visual coding is a matter that goes beyond aesthetics or fashion. Information design as shaping the content is not enough. Information design participates in shaping the context as well.