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.

Walter Benjamin’s notion of aura and Experience Design

Self-portrait (Van Gogh, 1887). The Art Institute of Chicago. Instagram: @omitzek

In “A Short History of Photography“, Benjamin Walter introduces the concept of aura as follows,

What is aura, actually? A strange weave of space and time: the unique appearance or semblance of distance, no matter how close it may be. While at rest on a summer’s noon, to trace a range of mountains on the horizon, or a branch that throws its shadow on the observer, until the moment or the hour become part of their appearance—this is what it means to breath the aura of those mountains, that branch.

In other words, we can interpret aura as the quality derived from perceiving something, which involves intertwined stages of contemplation, admiration, reflection, and analysis. For instance, when we visit a museum and we find a piece of art of our predilection, we cannot avoid to be engaged with it. We take our time for observing, contemplating, measuring our level of admiration for the piece and the artist, or analyzing the technique or the historical context for that piece. At that moment we magnify the experience, and we take piece of art (and all the meaning around it) as unmeasurable and distant.

Self-portrait (Van Gogh, 1887). The Art Institute of Chicago. Instagram: @omitzek
Self-portrait (Van Gogh, 1887). The Art Institute of Chicago. Instagram: @omitzek

Later Benjamin adds,

Now, to bring things closer to us, or rather to the masses, is just as passionate an inclination in our day as the overcoming of whatever is unique in every situation by means of its reproduction. Every day the need to possess the object in close-up in the form of a picture, or rather a coy, becomes more imperative. And the difference between the copy, which illustrated papers and newsreels keep in readiness, and the picture is unmistakable. […] The stripping bare of the object, the destruction of the aura, is the mark of a perception whose sense of the sameness of things has grown to the point where even the singular, the unique, is divested of its uniqueness –by means of its reproduction.

Here, Benjamin is pointing out that aura is threaten by reproduction. Because we become aware of the piece’s (or phenomenon’s) aura during the actual moment of perceiving, reproduction devalues the aspects of uniqueness and authenticity. By relating these ideas with HCI and design, I could not avoid thinking of Instagram, Facebook, Twitter, and YouTube. The extensive use of social networks implies a massive conversion of real-world phenomena into multimedia objects, facilitating their circulation all around the globe. Reproduction is not limited anymore for those who can access and control technology. In this sense,

  1. Have ICT and social networks killed  the notion of aura?
  2. Or are we just witnessing an evolution on Benjamin’s notion of aura?
  3. How aura and experience design are connected?

Although these questions may lack of basis, we could sketch some arguments by paying attention to our own experiences with any of the aforementioned social networks. For instance, I understood (in Benjamin’s words) that what I enjoy is breathing the aura of nature. As a designer, I like to listen what nature says to me about design principles. Nature’s aura facilitates my reflection about design. Although I understand that I can’t keep the state of mind caused by facing nature’s aura, I know that my reflection should be recorded, so I can remember and revisit it in the future. For doing this I use Instagram.

Beauty is in rhythm. Picture of one of the moments on which I try to ground design principles form nature. Instagram: @omitzek
“Beauty is in rhythm”. Picture of one of the moments on which I try to ground design principles form nature. Instagram: @omitzek

Once that moment is materialized into a digital picture, I have no control on who will watch it, share it, or even modify it. Further, what I contemplated, admired, reflected, and analyzed –in other words, experienced– might not be the same that my Instagram friends (or any potential owner of the picture) will experience. Notwithstanding, I wouldn’t argue that aura is being diminished as consequence. It just changes.

At the moment other users interact with Instagram (with the digital picture as one substrate of the use experience design) a variation on the original aura is present. Now, we talk about the combination of perceiving the digital photo and the experience of interacting with the system. Moreover, since the context of use can vary –type of users, geographical location, devices, and culture– even for a group of Instagram friends, the manifestations of the “new” aura are plenty different. Aura becomes an inherent element of the experience design. Certainly, the latter generates more questions than answers for experience design practitioners. So far, I glimpse matters of literacy, culture, aesthetics, and materiality. Further third-wave HCI research could contribute to a better understanding of the relation between Benjamin’s aura and experience design.

 

 

Art vs. Design. Should we stop asking that?

The Academy of Art University in San Francisco received to John Kolko and Donald Norman –two of the most known theorists in the field of [Interaction] Design. The first question they were asked was to point out the key differences between art and design. I really do believe that making this question in this context is more than reasonable, particularly for the new students. In fact, it’s not hard to notice that trying to answer this question is a pivot in many basic discussions around design. Nevertheless, I believe this question loses its validity eventually. At both levels, research and practice.

Affinity Diagram. Photography by Sam Xia.  http://mypointofview.info/
Affinity diagram.
Photography by Sam Xia.
http://mypointofview.info/

If we consider the case of scholarly research, we can notice that as we go forward in the study of design, the latter becomes into an abstract concept, where art is just a small piece within all the lenses with which design can be studied. I’m not talking about diminishing the value of design whatsoever, but other fields like psychology, philosophy, anthropology, or communication studies can also provide foundations, tools, and methods applicable to the discipline. By being involved with scholarly research, I’ve been witness of my colleagues’ attempts to amalgamate knowledge from other fields with the field of Human-Computer Interaction Design in order to reinforce both our understanding and discussion about design in a broad sense. As Paul Rand said, “design is everywhere.” It’s a human activity, and that’s why we can find it in every [academic] field, in one way or another. Humans cannot scape from design. We design just in the moment we intentionally decide to transform reality. Thus, any design activity would occur in fields like mathematics, chemistry, physics, business, and others that we would not relate to design. The interesting game here is to discover and analyze what design is for these disciplines, and how their approaches to design can affect what we could call “designerly disciplines” like architecture, industrial design, interaction design, and so on.

On another hand, from the research that my colleagues and I conduct at Indiana University about [interaction] design practice, I’ve noticed that design professionals clearly stop paying attention about the relation of art and practice. This is somehow obvious. In the [interaction design] practice, they have to pay attention on how to success in every project,  and this discussion (about design and art) is apparently  left aside. What my colleagues and I have noticed is that practitioners actually care about knowledge that can be applicable to their everyday practice –somehow similar to what scholars do. This doesn’t mean a rupture in the relation with art. But it’s true that practitioners want to employ [design-related] knowledge that makes them more competitive.

Indiana University HCI/d students testing a prototype.  Photography by Sam Xia.  http://mypointofview.info/
Indiana University HCI/d students testing a prototype.
Photography by Sam Xia.
http://mypointofview.info/

So, we should stop discussing about the relation or differences of art and design? Obviously, the answer is no. However, we should recognize that design is more than answering this question. Since the moment we wake up, we face ourselves with designed products, designed services, designed spaces, designed information, and other designed products. Hence, design becomes and involves more than aspects of art. Design needs to consolidate as a discipline that [effectively] gathers knowledge from diverse disciplines, but that stands by itself –as it happens with other disciplines, Computer Science for instance. In this sense, [design] knowledge should be digestible so practitioners can apply or adapt it in their work contexts, in addition to straightforward ways of communicating it to non design practitioners.

I think no one is closed to design. It’s obvious that we’re exposed to a design explosion nowadays. But it’s in the moments when design is transparent (in the everyday) that design is not viewed as art but as design itself. It’s when design is recognized as it is, as another human discipline with its own knowledge set, values, tools, and methods. Education becomes critical for this mind shift. Although design is commonly taught in art schools (or related with art somehow), we should recognize that a current design discourse is quite complex –it should gather and synthesize all these efforts to expand and compact
[design-related] knowledge from scholars and practitioners respectively, and it also should find a way to permeate the mainstream easily, with the intention of reaching out the non designers. This task is not easy whatsoever. However, early stages in design pedagogy –wherever it’s carried out, either named art/design school or not– should transmit this broader perspective of design, so the students’ mindset will evolve and mature with this ideas.