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):

Spotify Discover Weekly album coverLater, 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!

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)

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!