Today I plugged an extra monitor that I have on my desk to my laptop in order to work with two Word documents at the same time. Suddenly, I couldn’t avoid to step back and put attention to the signs on, in, and around the monitor. Because of my interest on Visual Rhetoric and Semiotic, I was wondering what my visual analysis/interpretation for such image. I’ve observed in many cases that people have different arrangements at the workplace in comparison to their living rooms, bedrooms, inside of their cars, and so on.
Then, these questions came to my mind,
What is our workplace telling about us?
What are our personal spaces telling about us?
Is the same message for both cases?
If not, is there something as a “reconciliation” between them?
How do our workplace and personal spaces participate on constructing a discourse regarding our identity?
“For many scientists, ‘subjective knowledge’ and ‘opinion’ are synonyms for the same low quality thing, but that reflects a misunderstanding of critical knowledge practices and is precisely the sort of confusion that we in HCI need to clear up.”
Bardzell, J. (2011). Interaction criticism: An introduction to the practice. Interacting with Computers 23, 604–621.
“The act of criticism is to [think/see] better”
Bardzell, J. (2014). Interaction Culture. Course Notes. Indiana University Bloomington. Spring. 2014.
“Design participation is an evolving practice of making, telling and enacting. The iterative flow of events between these activities is essential, not only for participation to occur naturally, but for participation to occur with ease and with joy. When we can fully engage people’s minds, hearts and bodies in imagining and expressing future situations of use, we can be assured that they have an opportunity to influence future ways of living, learning and being.”
I had a quick discussion with my friend and colleague Jordan Beck, who is now working on the notion of Design Identity. As part of that work, Jordan is creating a list of definitions of Design and an interesting list of possible design theories. Then, we were discussing whether there’s a theory of design as such. As usual, we employed the whiteboard to discuss our viewpoints. The result is shown below.
As it’s shown in the schema b, I was telling Jordan that most theories of design are generated from other fields, such as Psychology, Philosophy, or Literary Studies. This idea is represented by the horizontal axis. My quick comment was made in relation to the applicability of those theories—the vertical axis. I conjectured that, in terms of applicability, designers pay more attention to those theories not generated within Design since they are the ones that are more related with the designer’s competence at the moment of actually doing design. In relation to the theories generated within Design—that is, generated by Design Researchers, in designerly (research) context, and working for and with designers—usually they don’t know or care about those theories because their not “visible” in their everyday practice.
Then Jordan came with the schema c from the picture above by which he remarked about the possibility that Design is (partially) constituted by networked knowledge/theories not generated “within” Design.” From here, he made the interesting question about whether there’s a theory really generated within design. The quick discussion was basically focused on that. I commented that it seems to be no theory of design as such. Since the two of us are taking Erik Stolterman’s seminar on Philosophy and Theory of Design, I added to my point that by discarding knowledge generated from non design Disciplines, Philosophy of Design might represent the theory of design—as theoretical generative means regarding design and for design. Yet we talk about Philosophy, so it belongs to other field at the end. Tricky and funny.
In relation to comments above, we got this quick and crazy deduction that there’s no theory of design apparently. Later, since there’s a relation between some disciplines and design as we appreciate in the current “design theories”, Design seems to be present somehow (or mapped back) in these fields. If it is possible to create this type of bidirectional connection with any discipline, does it mean that design is everywhere somehow? Was Paul Rand right when he said that “Everything is design”?
From my perspective, this is a great example of how Information Design and HCI/UX Design overlap. In his proposal, Krenn attempts to integrate a gesture-based interaction with a low cognitive load interface. As we observed from the video and images below, he seeked to visually synthesize the information and make the information as least intrusive as possible—for the driving experience.
As we observe from his proposal, the circle is the basic visual unitfor this interface. Because of my interest not on flat design but in finding new ways to represent information within UI, I want to understand better what is the design rationale behind these UIs and on what extent they participate in the paradigmatic shift regarding interaction. By observing Krenn’s proposal in conjunction to my previous post, I have the following comments:
The circle seems to be the best shape to represent a manipulable object—within a flat screen—when considering a gesture-based interaction. As I mentioned before, I conjecture that our experiences, in relation to manipulating spheroids since we’re born, influence this type of design rationale. That is, to make the connection of the fingers—something physical and tridimensional—with something abstract and flat, we still need to refer to something in the real world. That is, the metaphorical reference.
The effectiveness of the circle as UI relies on its multidimensionality. The circle not only properly manages time and space due to its geometrical nature. It also creates a connection from the tridimensional world with flat land.Furthermore, it provides a multidimensional means of interaction and information representation for the case of UIs. For instance, for Krenn’s proposal I noted at least four dimensions:
Size (diameter). This is clearly a variable that represents quantity, which goes from zero—the absence of the widget—to the maximum—as wide as we can extend our fingers on the screen.
Tilt. As I observe, the key aspect regarding this variable is having a reference point. When the user decides to tilt the widget, a cognitive model of range is created in the user’s mind at that moment. Yet we may reflect whether the latter adds complexity to the interaction. In this regard, I assume that tilt as an interactive variable is suitable for qualitative range, or ranges that are not require to be that precise. We don’t need that tilting represents a hard/long decision to the user, specially in context of use where the user is saturated by diverse information sources—as it may occur for the case of car controls.
X-value. This variable—that represents values along the horizontal axis—in conjunction with the y-value—vertical axis— determine the center of the circle and hence the current position (x,y) of the widget. What Krenn shows to us is the convenience of decomposing the center into two independent variables. He employs only one axis, but the idea of observing the scale at the side of the screen provides a mental reference for using either on axis or two of them. From Krenn’s video, we can note that setting the origin point (0,0) is critical in terms of both interface and interaction. Krenn’s proposes a good approach by setting this point relative to wherever the user touches the screen at any moment.
Y-value. As it occurs with the x-value, the vertical axis can be used to represent another quantity. In this way the user can set the value of two variables at the same time. Nevertheless, as I’ve experienced with Photoshop for iOS, it’s frustrating to deal with different quantities due to the sensitivity of the screen (or lack thereof) and a finger. As Krenn comments in his video, the design should take in account this issue and validate the interactions. One idea that came to my mind is snapping to values that makes sense. In Krenn’s proposal, the employment of the vertical axis only, in addition to rationale behind the increments/decrements according to the function/velocity of fingers, contribute to validate the interactions in this UI.
I get excited by observing design proposals as the one from Krenn. As I stated before, I think that Information Design plays a key role in the shift of any interactive paradigm. As designers, we should be conscious that we not only interact with products/design since the moment we wake up, but also we consume/interact information by means of our senses. Because of the latter, I remark that is difficult to see the actual boundaries between information and interface. Hence, representing information in a usable fashion and make it part of an interactive aesthetic experience is something really hard. Yet it represents to me a critical aspect that HCI/UX designers should pay more attention and recognize the implications of a matter where form & function cannot be practically detached.
A question to you for reflection purposes:
How would you visually/sensorially redesign all the information you’ve consumed/interact with since you woke up this morning?
“Critical judgments typically have tow key features: they are defended with arguments (compromising both verifiable evidence and reasoning), and they assert that others should agree with them (which does not imply the empirical fact that others necessarily do).”
Bardzell J., Bardzell S., and Stolterman E, 2014. Reading Critical Designs: Supporting Reasoned Interpretations of Critical Design. In Proc. of CHI 2014. ACM.
What’s the difference between Science and Design? What about Art and Craft? Is design about something concrete (an object), a process, an line of thought? Further, by taking User Experience (UX) and Human-Computer Interaction (HCI) as knowledge disciplines, what’s the relation of UX with Science? Does UX belong to Craft or Art? What can we tell about HCI? These are very difficult questions to answer, and they require to take a philosophical stance—at least, I assume—in order to create arguments and hence generate discussion. So, what’s the point of this post any way? Although I think I don’t have the answers to all these questions whatsoever, I would like to share my perspectiveon how these big words relate each other by means of the following schema.
In regard to the description of this relational schema, I would like to start commenting why I took the continuum Art/Craft. In 2008, I wrote this idea in Spanish
El diseño implica arte pero el arte no implica necesariamente diseño.
La ciencia implica diseño pero diseñar no implica necesariamente hacer ciencia.
Aun así, la ciencia implica hacer arte.
The literal translation is as follows,
Design implies Art, but Art not necessarily implies Design.
Science implies Design, but to design not necessarily implies doing Science.
Yet Science implies doing Art.
The last part, “Yet, Science implies doing Art”, seems to make no sense in English. The adequate translation could be,
Yet Science entails Craft.
My point here is that “doing Science” in real life is not that rigid as it looks in paper. To me, it involves both aspects of Craft and Design. Further, this phrase indicates the underlying implications of using a particular language at the moment of reflecting and philosophizing. Regardless, the selection of this continuum is somehow influenced by the perspective of Howard Risatti when comparing Art and Craft—although I don’t share his vision regarding Craft and Design in this “Theory of Craft”.
For the case of Science and Design, I consider the relation between these two as discussed by Nigel Cross and Harold Nelson & Erik Stolterman. As I tried to embed it in my phrase above, I state that it turns out difficult to outline strict boundaries in the relation of Science and Design. All depends on what type of definition, questions, and the place where those questions are made.
The third continuum entails the consequences of Art/Craft and Science/Design in relation to the real world. Thus, I consider—at least—the range that goes from abstraction to actuality. That is, from ideas to things that people can interact with. This continuum is theoretically related with ideas such as the “ultimate particular” and “design inquiry“—as a compound of the inquiries into the real, ideal, and true respectively—by Nelson & Stolterman.
The relational schema presented above doesn’t have the intention of being prescriptive. It corresponds to my personal viewpoint and a attempt to formulate my position as HCI/UX researcher regarding the type of research/discourse generated in my near context. That is, among the faculty and colleagues at Indiana University Bloomington. Further, since I have interest in schemas/diagrams/sketches, I generated it as an example of how schemas may function as a means for argumentation.
My purpose here is for you to take this schema and tear it up. Make it your own.
However, before you go and destroy this relational schema, let me show how it helped me to sketch the answer to the aforementioned issues.
UX and HCI in the relational space
As we observe from the schema above, the relational space is conformed by three axis, each of them representing one of the continuums describe above. Then, I perceive User Experience (UX) as a discipline highly design-oriented, focused on concrete outcomes, and with a high flavor of craft in its practice. I think these qualities make it different from other approaches regarding interactive artifacts-systems such as Software Engineering, ICT, or Computer Science.
On the other hand, I locate Human-Computer Interaction (HCI) in a different place within the relational space. I perceive HCI as more scientific discipline focused on concrete outcomes, yet with certain nuances of craft in its practice. I remark that I’m talking about a general or traditional perspective of HCI. In other words, a practice—and also its research—more emphasized on the first and second waves of HCI.
I consider that HCI influences UX, more than the other way around. Although HCI provides foundations and methods to UX, the latter seems to lack of impact regarding HCI in this fashion. Of course, this discussion could be very extensive and profound. So far, I remark this influence with an arrow, just to indicate that HCI may entail a more traditional approach whereas UX corresponds to the designerly approach.
From my current perspective, UX influences DT since it provides the input to start theorizing about design. The consequences of UX are actual design cases. At the moment (design) researchers start analyzing those cases, a universe of study is created. By picking one planet, system, or galaxy of such universe, the (design) researchers cannot avoid to meet a philosophical situation since there’s an intrinsic relation between the researcher and the piece selected to study. And just as we may observe from the last sentences, the attempt to understand becomes a matter of (design) philosophy.
So far, we’ve observed from above the relations of HCI→UX and UX→DT. The question is now, in terms of DT and HCI, what is the discipline more prominent to influence or affect the other? I want to remark that it’s not my intention to be prescriptive. Based on my experience, I think that DT→HCI marks the relation within the type of research I’m currently involved. That is, DT provides HCI with theoretical foundations, which are in turn employed to generate frameworks.
Not necessarily connected with the latter, (design) methods are located very close to HCI in the path of this connection. Nowadays, more that thinking about their degree of applicability, I think that the so-called design methods could work without a deep—and hence philosophical—understanding of DT. I conjectured the latter based on my early experience with HCI, particularly as an undergraduate and latter getting involved with HCI researchers.
Research as an act of reconciliation
As I mentioned above the relational schema has the purpose of helping myself what’s my position as HCI/UX researcher. The relational schema is limited in order to respond to such statement. However, it provides a means to make an approximation for such goal.
I notice that more than talking about a precise position as (a possible future) researcher within the relational space, I can better reflect on the interrelation of UX-HCI-DT to understand on what research field I can work at. For instance, in the schema below, I picture a research field with big emphasis on the actuality and Art dimensions—although the connection with DT will always be there. Any change on this membrane represents a different framing on what to pay attention as HCI/UX researcher.
There are as many membrane variations as HCI/UX researchers. In my case, I know that my academic/professional past as designer and my current formation as scholar influence on how I frame the research field I’d like to work when I reach the dissertation stage. In this sense, I remark that relevance of the context. My advisor Marty Siegel, my mentor Erik Stolterman, the faculty, my colleagues PhD students from all the tracks, and the master’s students from the HCI/d program have a huge impact on shaping my particular membrane.
Questions come along more often than answers. I guess it’s a natural consequence regarding the formation as scholar. Yet I look forward to create many schemas that help me to understand this journey better. 🙂
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.
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.
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:
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.
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 constrains. What 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?
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.
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?
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.
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.
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, 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.
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.
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.
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 presenceof 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 encapsulateaffordance 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.
My personal taste for taking notes is based on a regular sketchbook, a needle point gel pen, and a brush tip marker for shading. Since I’ve seen one of my colleagues using his iPad for taking notes, I’ve wondered how convenient is carrying your information in a single artifact, and how natural the sensation is.
I discovered that paperis the app for creating sketchbooks à la moleskine in the iPad. Further, I saw that pencil, a stylus to work with this app, was released. It reminded me some of the thick sketching pencils I’ve had, in fact. This is the promotional video of both working together:
I should remark that I have no intention of making any type of advertisement in this post. However, since the app is called paper and the stylus pencil, I couldn’t avoid having some quick thoughts in relation with design and HCI:
The metaphor is a great way of naming/advertising a product. Calling an app paper and a piece of technology pencil gives you pretty much idea what to expect and how to interact with.
Since technology is constantly evolving, it’s more easy to refer to concepts we have already implanted in our minds. Metaphors operate as smooth means for coming up with innovative designs.
However, translating something that we already have/use into a new technological form is easier if the metaphor doesn’t loose meaning in the translation. I think this is the case of paper and pencil.
Metaphor-oriented design for HCI involves the conjunction of other designs (or other design thinkings). For instance, designing pencil involves thinking as an industrial designer (in terms of the materials and ergonomics), and paper involves thinking as a graphic designer (in terms of the different visual signs within the interface).
Metaphor-oriented design for HCI allows to bring new styles of interaction, and hence more metonymies. For instance, paper has an interesting undo feature: moving (two) fingers in a counter clockwise fashion to rewind within the current sketch.
Since it may look that current HCI designs are more related with creating and enhancing people’s everyday, rather than accomplishing systematic tasks, I see complicated to get rid of metaphors and metonymies for a while. They represent a bridge between what we perceive as technological and not technological. Then, I wonder how current metaphors in combination with new styles of interaction will settle the basis for future metaphors/metonymies of that technology we haven’t designed yet.