Bits of HCI Design | Design in and for Human-Computer Interaction Design and User Experience

Why did I find Spotify using my profile picture as an album cover a little bit disturbing?

Today, when I opened Spotify, I found this (see image below):

Later, I mentioned in facebook that using my profile picture for the “Discover Weekly” album is a little bit scary. Moreover, I tweeted that although Artificial Intelligence (AI) could be the next big thing in UI/UX design, we shouldn’t forget taking care of the execution, the how, the form — By the way, this somehow sarcastic since tweets before I was arguing that just paying attention to the looks leads to a poor understanding of what design is (after watching the “Why Design Matters” video).

Later, someone asked me on Facebook to explain what I was meaning of my post and provide an example of how the design could be “better.” This person argued that such a design decision helps to “merge” the self and (his/her) music. I think he’s a good point. However, to me, this design decision was a shocking micro-experience with Spotify. Below, I re-write what I posted on Facebook.

The concept of agency came to my mind when I opened Spotify and saw my profile picture being used as the cover for the “Discover Weekly” album. I think it’s great to like or “plus” a song, and thus to think that I decide what music/genre I like and want to listen. From my perspective, this provides a feeling of empowerment to the user. However, I lost that feeling of agency or empowerment when I saw my profile picture. Setting the music on Spotify is part of my work routine and I was not expecting to find something like that today! Seeing “myself” as an album cover made me feel that I became a thing, an interface component; that Spotify had objectified me, transformed me in another interface component. The idea of being de-humanized crossed my mind. I know it’d sound too dramatic, but coming across this UI change provided me an example or situation wherein micro experiences are important. It’s interesting to see how just a little thing provides an element of surprise that lasts just a little bit! A micro-moment that affected my UX with respect to Spotify for the whole day today! I have to acknowledge, nevertheless, that I might be too sensitive since I’m trying to understand how these ideas of user experience, phenomenology, persuasion and rhetoric, identification and rhetoric, and denotation and connotation work in interfaces.

And about my proposal of making this UI change better, first, I have to say that I wouldn’t argue for “better.” A less shocking transition, perhaps. As I commented on FB, Spotify could have introduced me this idea of the “Discover Weekly” in a more ludic way. As it occurs when Spotify doesn’t allow you to interact with the interface and you have to wait seconds to see an ad, one possibility would be having a similar dynamics. Showing this concept and probably letting the user picking the album cover. Once set, it fades away.

Of course, there is nothing wrong or bad with that design decision for the Spotify’s interface. I’d like to emphasize that. Perhaps, this idea of the profile-album-cover has been evaluated with good results. Possibly, I don’t express the archetypical user’s desires for this case (functionality and part of the interface). Perhaps, a later evaluation will come, and a different proposal will be implemented. That’s the way design is. However, I’d emphasize that the capability of implementing smart functions in a system is just a part of the UI/UX design.

Cheers!

The need for a philosophy of technology

If interactive systems are knowingly designed to change human attitudes and behaviors, we would also need a philosophy of technology that provides us the means for revealing, analyzing, and discussing the human, social, cultural, ethical, and political implications of these changes—that helps us understand ‘the new good’.

Daniel Fallman, 2007
@dfallman
Paper URL: http://link.springer.com/chapter/10.1007/978-3-540-77006-0_35

Social media, thoughts and rhetorical situation

In the paper “The Rhetorical Situation,” Bitzer (1992) claims that rhetoricians don’t treat the formal aspects of the type of situation in which speakers or writers create rhetorical discourse. In the same text, he remarks,

“Each reader probably can recall a specific time and place when there was opportunity to speak on some urgent matter, and after the opportunity was gone he created in private thought, the speech he should have uttered earlier in the situation.”

I really enjoyed that quote. After reading it, one of the things that came to my mind was social media. A couple of times, I’ve considered venting what happens in my mind after facing a situation like the one above. I censor myself and decide not to post anything most of the times, though. Sometimes, I think it’s the “heat” of the moment. Sometimes, I think I need to think things better. Sometimes, I simply forget what I wanted to “conjecture” from that situation.

Later, I’ve seen some Facebook friend’s venting what they think or feel regarding everyday situations. I’ve always wondered, why aren’t they open to say things out loud? Recently, I noted that one of my closest friends posted, “sad.” Of course, I went to check the comments and no response (at that moment) about the reason of being sad. I think I’ve done something similar a couple of times, as well. Not putting just “sad,” but expressing indirectly how I feel towards a certain person, thing or situation. However, externalizing thought was the key thing that I needed: to express it, to make it real.

The Bitzer’s quote made think that, somehow, social media is not strong enough sometimes to encourage the user to express her thoughts. In other words, to avoid self-censorship.Notwithstanding, when we don’t care (or perhaps, we care too much), social media allows to throw what we think in a easy and quick way. I wonder,

what is the difference between throwing a “second-chance-to-argue” “private” thought and other forms of self-expression? For example, a graffiti.
Why is it safe sometimes to externalize that type of thought or inner conversation in social media? When is not it?
Where do we learn such awareness? Does that awareness follow or go against the free of speech in social media?

I don’t really know.

What do you think? Are you having a conversation in private thought already?

Cheers.

Reference.
Bitzer, L.F. (1992). The Rhetorical Situation. Philosophy & Rhetoric, Vol. 25, Selections from Volume 1, pp. 1-14.

Sketchnoting Tutorial

As part of the course INFO-I300: Human-Computer Interaction Design in Indiana University, I’ve created a small tutorial about sketchnoting. This is the first time that I write down the rationale for the way in which I take notes. It was an insightful and interesting exercise. My quick insights are:

Sketchnoting helps to organize and synthesize information
Sketchnoting helps to develop metaphorical thinking
Sketchnoting helps to develop a personal visual coding for information
Tools are important (e.g., needle point marker, brush tip marker and good quality sketchbook)
Drawing skills are not that relevant. Notes should make sense to you first.
Consistency is a key aspect for sketchnoting

Based on my experience, the steps for good sketchnoting are:

Listen
Filter
Write down
Code visually
Relate content

I hope the tutorial shown below can be help you for anyone interested in sketchnoting.

Cheers!

Sketchnoting Tutorial from Omar Sosa-Tzec

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?

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!

Of QR Codes and Restrooms

Yesterday I came across a printed advertisement containing a QR code. It was in a bathroom, so you can imagine what I was doing while staring at it. I was peeing. I’ve been in a similar situation before, and it let me thinking about the reasons of why QR might not be that popular.

I think that one reason is a translation issue. I mean changing from an abstract visual data/information to some data/information that a person can understand. When we observe QR codes, they basically mean or denote nothing. In that regard, why should a user need to carry out a set of steps to translate, discover what the QR code says? In that bathroom situation, why should I have to take my phone out, look for the appropriate app and scan the code? I can easily google the name of the restaurant by using the same device at that moment. It’d be faster! Those steps for translating the visual abstract data/information from the QR code into a form that a human can understand seem to be unnecessary.

Translation issue when interaction with a QR code

Nonetheless, I do think that QR codes provide an interesting opportunity to design for user experience. Imagine this, as some cameras can detect faces and smiles, it’d be great that our smartphones can detect the QR code and do something with it. Automatize something. For instance, imagine that once you scan the QR code, your phone downloads an app and feeds it with your personal data stored in the phone. Consequently, a restaurant knows “your taste” and offers you a bottle of wine, free desert, or takes into account to guide you in your search for similar restaurants elsewhere.

UX Design and QR Codes — What experience can we design for QR codes?

We have the QR codes. They’re design is there. It’s restrictive. However, I little bit of imagination could bring us to exploit the use of QR codes better. They were invented for some reason. And people are still using them for some reason. An interesting UX design space seems to be there to explore and re-think the purpose and UX with QR codes, including how to make that translation issue seamless or better, get rid of it.

Cheers!

Update

Thanks to @gregnorc I just learned that QR might be more popular than I thought. Want to know more? Read “QRishing: The Susceptibility of Smartphone Users to
QR Code Phishing Attacks”

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!

Definition of Design. Yes, another one.

One of the key challenges of being involved in a humanities & design-oriented perspective of Human-Computer Interaction is defining what design (or Design) is. I think that having an operational definition for Design is healthy. It is not only about divagating, philosophizing, or making the word Design to look more scientific—this is, to convert it into something observable and measurable within a certain space, which has its own axioms and laws. It’s also about understanding what being a designer—in a professional sense—means. What’s an Experience Designer? An Interaction Designer? Is it different from an Information Architect? Isn’t a UI Designer an Experience Designer? Coming up with a single answer it’s not an easy task nonetheless. However, thoughts and words are there to shape and play with reality, and hence to understand our human constructions better. So, below I present a quick definition of what design is.

Design is the conjunction of problem framing, externalization and materialization, and communication.

These are my simple approaches to each of these dimensions:

Problem Framing

The designer should decompose the design situation (i.e., analysis) in order to understand it, and make a connection about how the current context, current needs, and current users are related to her past projects and personal experiences (i.e., abduction). Nevertheless, I think that separating problem framing from the other two dimensions during a design process is impossible. If so, we’re not talking about Design. We might be talking about problem solving only.

Externalization and Materialization

A design process cannot escape from representation. The rationale behind the problem framing, and hence the design solution must be externalized, communicated, instantiated. In this regard, the designer should find the means to support her argument. Her understanding of how to synthesize information or how to play with the materials is relevant to make a connection with the client, users, stakeholders, and also with herself.

Communication

The designer creates communication pieces, messages. This is evident in terms of the design outcome and the deliverables by which a designer supports her arguments. These are closely related to the dimension of externalization and materialization. Moreover, every design project entails people interacting. Design projects of any size will imply, at least, a relation between a designer, a client, and user. Part of the design process is to balance this relation. Perspectives, values, interests, and even whims take part in design processes. Therefore, the designer should employ communication skills to play the role of mediator, and understand how she, as a person, in combination with the messages she creates, will achieve that balance.

So far, this operational definition helps me to understand design in a simple way. Furthermore, it also helps me to understand the role of experience designers as rhetoricians; and idea I’m still developing as part of HCI research agenda.

Note: Thanks to Jordan and Marty for the conversations about [design/Design/designing]. I would bet this definition will evolve.

No one likes selfies… anymore

One interesting thing about social media is that users can notice behavioral trends about themselves. We can see how our timelines are affected by major events such as the Oscars Ceremony Award or the World Cup. Not only we get retweets and shares, but also new content is generated. Either unpublished or recycled. Pictures, videos, and memes. They’re everywhere within social media. However, as any organism, information gets born, grows, and eventually, it fades out.

Do you remember how popular selfies got after the Ellen DeGeneres’ selfie at the Oscars? Selfies has been part of Facebook, but definitely got burst after her picture. Selfies then started to become annoying. It seems that Instagram and the use of its filters have gone in the same direction. Also, we can add to the list the whining through social media, or the flood of cute cats pictures. On the other hand, it seems now that one function of social media is complementing Google, since their users are now asking about things in order to inform their decisions. Also we can note that social media is becoming an informal marketplace. Therefore, we can see social media as an interface in which multiple contexts affect themselves through the generation, modification, exchange, propagation and eradication of information. Of course, all these actions have an impact back to those contexts. They affect the real world.

The social media and the real world altogether affect the former, at least in terms of content and the usage of such content. Trends are consequence of these user-driven information management. And also, users kill those trends eventually, regardless of the actual agency they are supposed to have. Yet, social media, by means of current massive content in each of these contexts, dictates what is on fashion. And eventually when such massive content will not be in fashion anymore. It’s just like the comic strip by the Oatmeal shown below. No one likes selfies (now) (?).

Selfie by Oatmeal Comics — Vignette from “No one likes selfies” by the Oatmeal. Inspiration to write this blog post. Please check http://theoatmeal.com/comics/selfies

What does this mean, and why do we need to care? There’s no simple answer whatsoever. That’s why many people try to understand the related phenomena from different perspectives, including HCI and Design. However, I really enjoy the idea of seeing that information is alive. It’s somehow organic. We can see how we apparently affect social media content, and how social media content affect us, and hence the real world. The trends have rhetorical implications for us. The Facebook that will be experienced in USA this 4th of July, because of the Independence Day, won’t be the same as the Facebook experienced in Brazil whilst the World Cup keeps going. Our understanding of the world, what shapes our culture, and what modifies our values are subject to this creation and dead of information. And still, I cannot avoid questioning myself, what’s our role, as users, in this phenomenon?

If you want to know how this phenomenon could be related with design, or user experience design, my colleague Azadeh Nematzadeh and I recently presented a paper in the Design Research Society Conference 2014 about some theoretical concepts by which we try to explain this connection. Please, give the paper a look. Thanks!

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:

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.
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.
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!