The new Facebook “Reactions”

I came across the video of the new Facebook “Reactions.” It was a nice surprise going beyond the “dislike” button that everyone was talking about weeks ago.

Today we’re launching a test of Reactions — a more expressive Like button. The Like button has been a part of Facebook for a long time. Billions of Likes are made every day, and Liking things is a simple way to express yourself.For many years though, people have asked us to add a “dislike” button. Not every moment is a good moment, and sometimes you just want a way to express empathy. These are important moments where you need the power to share more than ever, and a Like might not be the best way to express yourself.At a recent Townhall Q&A, I shared with our community that we’ve spent a lot of time thinking about the best way to give you better options for expressing yourself, while keeping the experience simple and respectful. Today we’re starting to test this.Reactions gives you new ways to express love, awe, humor and sadness. It’s not a dislike button, but it does give you the power to easily express sorrow and empathy — in addition to delight and warmth. You’ll be able to express these reactions by long pressing or hovering over the Like button. We’re starting to test Reactions in Ireland and Spain and will learn from this before we bring the experience to everyone. We hope you like this – or can better express how you’re feeling!

Posted by Mark Zuckerberg on Thursday, October 8, 2015

 

This reminds me that moment when I couldn’t image how an iPod (old generation) could be used to browse the internet. This “Reactions” new micro-interaction design is similar: instead of just thinking that the next step is a “dislike” button, FB now offers a wider range of emotions; which I’d bet they’re thought carefully (if not based on data). Another nice detail is moving away from the tap. The tap is obstructive. Swiping below the emoticons/emoji (with no need of a slider) is not. It’s a subtle but interesting change in the way we understand how gestures, UI widgets design, and affordances work.

What do you think?

 

Google Cards: UX Design or Information Design?

It’s been a half year since Google released Material Design. I still see it as a great strategy to bring a vocabulary to designers and users for understanding how UIs work. From that design framework, cards have caught my attention from the first time. I always wonder, are cards about UX or are they really about information design?

Google Now
Google Now’s available cards

Probably, the first card I saw corresponds to the weather card in a web browser, the one that appears when you google about the weather. However, the first time I paid attention to a card was in a plane. I remember seeing a clean and well organized information about my flight in a little box in my phone. Google knew about my flight and it delivered enough information for me to be aware about my flight status. I got very excited, honestly. The first thing that came to my mind was: this is information design!

If we think of physical cards, Google’s cards seem to be limited in terms of interaction. In many Google interfaces, cards don’t flip or move. Static information is mostly presented on one face of the card. However, no fancy interactions are necessary to make a card effective. The effectiveness of card relies on the quality of the information that it presents. In that regard, knowing how to design the content, the information becomes important. Visual design principles like hierarchy, contrast and rhythm are necessary for the synthesis of information. Therefore, theUX becomes into a matter of information design. We designers need to remember that the how and why of composition expressed through several skills and theories related to design—including rhetoric—matter for the design of technology. 

Cheers!

UI/UX Patterns Libraries List

Because my research is related to user interfaces, I thought it’d be a nice idea to create a Pinterest board in order to start collecting UI/UX samples. Nevertheless, colleagues have showed me this cool UI pattern libraries, whose content is great for both practitioners and researchers. Therefore, I’ll use this post to create a list for these online libraries. In case you know about a patterns library to add, please, let me know, or feel free to post its URL below. Thanks in advance!

  1. Capptivate
  2. Pttrns
  3. Use Your Interface
  4. Dribbble (tag: UX)
  5. Dribble (tag: UI)
  6. Beyond Kinetic
  7. UI-Pattern
  8. Pattern Tap
  9. Elements of Design
  10. Personal board about UI (Pinterest)

Google’s material design

Google has launched its new design guidelines called “Material Design”. The name caught my attention, since I’m convinced, as visual designer, that observable pixels are really material to play; that is, to create user interfaces. What’s the possible meaning of this called design language?

Well, I bet that my understanding of observable pixels as actual material is not new or unfamiliar to other visual interaction or information designers whatsoever. Also the principles that lead material design. Yet, Google takes advantage of this metaphor to easily convey the role of visual design in systems design, interaction design, experience design, or whatever name you want to pick. Besides, material and design is a hot topic in Human-Computer Interaction research. I think that Google is not saying something new. However, by talking about material, Google attempts to foreground the value of the interface in the success of their products. This is not a naive viewpoint. It represents a Google’s stance before its competitors; in particular, I’d point out to Apple. Hence, material design is a business strategy, similar to others in the last decade, in which design is a marketable entity that is supposed to make a difference. A design-laden discourse that is getting worn out more and more.

Illustration for the principle of meaningful motion in Google's Material Design guidelines
Illustration for the principle of meaningful motion in Google’s Material Design guidelines

Don’t get me wrong though. I think material design is both appealing and useful for the Google’s IxD/UX community. Yet, I glimpse material design as that medium by which Google can create this design-driven cult, à la Apple. It’s unavoidable. Steve Jobs as the material signifier of profitable design for technology is gone. It’s a tough war out there. And Google of course that wants a big piece of the mobile apps cake.

Illustration for the principle of emphasize actions in the Google's material design guidelines
Illustration for the principle of emphasize actions in the Google’s material design guidelines

As a HCI researcher interested on metaphors and visual design for interfaces, these are my quick insights from this case:

  1. Metaphors are effective. Moreover, they can help to unify concepts and actions that are supposed to be understood already. The simple metaphor of material design is an example of this effectiveness that also shows the benefits at a business level.
  2. Visual design might be an old and many time revisited topic. Yet, it’s necessary to state the principles that will lead the visual design in interaction/experience design. In this regard, I argue for paying more attention to visual design, particularly as study object in HCI.
  3. Visual design might be taken for granted for clients, users, and other stakeholders. Yet, it’s clear that conforming a design language is necessary in the IxD/UXD professional practice to build a branding umbrella. IxD/UXD/HCI pedagogy should take this aspect into account and educate future designers with the better understanding of visual principles, both static and dynamic, and the connections not only with the interface design, but also with other communication aspects, such as branding.

I wonder what my very experienced colleagues think about material design. Cheers!

 

 

Participatory Design: making, telling, and enacting.

“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.”

 

* Eva Brandt, Thomas Binder and Elizabeth B.-N. Sanders. Routledge Handbook of Participatory Design (Routledge International Handbooks) (p. 176). Taylor and Francis. 2012.

Schematic UI and Car Controls

In a previous post I commented about some examples of flat design for user interfaces (UI) and about the prominent use of the circle—as the basic widget component in such design. Later, I found this novel user interface design for car controls proposed by Matthaeus Krenn.

Video of the UI in action:

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.

Schematic UI for car control by Mathaeus Kreen

Schematic UI of car control by Mathaeus Krenn

Schematic UI of car control by Mathaeus Krenn

Schematic UI of car control by Mathaeus Krenn

As we observe from his proposal, the circle is the basic visual unit for 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:

  1. 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.
  2. 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:
    1. 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.
    2. 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.
    3. 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.
    4. 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?

Cheers!

 

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.

Design and agency

I’ve heard once that a good design is a transparent design. In HCI, I’ve also heard that a good design is one that uses computer imagination. In our eagerness for bringing a friendly interactive design to users, we seek for features that make user’s life easier. Sometimes we conceptualize designs capable of collecting and processing data from the user, and hence inferring some possible actions. Thus, we attempt to give our designs some sort of agency.

The other day I had the intention of publishing in Facebook a snapshot of a Skype conversation with a colleague and friend. Also, I was planning to tag him on the picture. Of course, the two of us were aware about disclosure matters in relation to Facebook. Surprisingly, Facebook recognized and tagged my friend’s face automatically. What if I wasn’t considering to tag my friend? Was Facebook rude in this sense?

Facebook auto-tag feature. Do we have any control on how our image is used?
Facebook automatic tagging for pictures.

As we can observer as Facebook users, it also decides what to show and what to advertise in our news feeds. The Facebook algorithms are supposed to be smart enough for providing us a pleasant user experience. For informing us about the people we could care most, regardless of physical distance and/or time zone. However, I have the impression that sometimes my  news feed looks stuck and not fresh. Particularly, in the advertising part.

I might assume this situation is generated in part because we don’t feed Facebook enough. In my case, I should confess that every time I’ve seen a request for updating my profile data, I’ve skipped most of it. I feel that having a quick access to information has converted me into a lazy user. A passive one. It’s not that I believe that Facebook should decide for me, but I think I already do that. Nonetheless, I’m aware that not feeding Facebook properly will lead to a poor information output on my news feed.

Sometimes I would like to be more than a filler of data-oriented placeholders for Facebook. Sometimes I would like to refresh my news feed based on other qualitative aspects–for instance, my mood. But then again, we return to the data-oriented approach for setting the user experience. However, I still claim that considering a more person-qualitative-awareness approach for feeding this type of systems will contribute on breaking this passiveness and bringing back a sense of agency to their users.

 

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.