Find your dream job on Facebook!

I opened my Facebook today and found this ad,

New Facebook feature: job posting

Isn’t it interesting?

I remember to have heard that Facebook is not cool anymore and that basically, it is a platform for old people. I have also come across (on Facebook) a figure showing that Facebook is still one of the platforms with more active users. Sorry, but I can’t remember who posted it, so I can’t put it here. However, if we go to Facebook’s Compay Info website, we can see that it had 1.23 billion daily active users on average for December 2016. Facebook seems to be distant from being a boring social media platform for old people. According to Zephoria, the most common age demographic on Facebook corresponds to people between 24 and 34 years old. Hey, that’s not being old! 

I think the job posts feature is important. It is a reminder of how powerful Facebook is. It is a reminder that many of us are hyper-engaged with our mobile devices and screens. When I saw the ad, I could picture looking for a job while they commute back home or take their lunch break. I could picture social media managers considering serious strategies to make a company’s website look more solid so that any person will take its job posts seriously.

I think it is so interesting to see how any “screen connected to the internet” becomes a potential door for Facebook to become part of our everyday lives.

Have you seen videos from movies or cartoons showing that our future is living in a VR society? Well, have you noticed that we’re there already? Facebook is that VR society! We might not end up wearing VR headsets 24/7, but many of us are pretty trained to deal with a real life and a cyber life in parallel. Facebook is our virtual society in which commerce, professional development, and human relationships are being constantly redefined, add-on after after-on, version after version.

The ad might look naive. But, again, it is a reminder that Facebook is the social media par excellence. Sometimes, it could look like nothing of what we do on Facebook cares or matters in the real world. However, we keep going back to it. We seem to be ok with the idea of virtualizing business, activism, education, and of course, friendship on that humongous virtual world called Facebook.

 

 

Lecture slides on HCI and Visual Design for UX

It’s been a while since I have uploaded lectures slides on SlideShare. Here are some of the presentations that I have made for lecturing human-computer interaction and visual design for user experience. They are a sample of the themes I have taught at Indiana University Bloomington. However, I do hope you enjoy the slides and find them useful 🙂

Summer 2016 Course: INFO-I 400: Special Topics in Informatics (Visual Design for UX)

Fall 2016 Course: INFO-I 300: Human-Computer Interaction/Interaction Design

Guest lecture for INFO-I 300. Instructor: Gopinaath Kannabiran.

On Snapchat’s filters, interface, and user experience

Vox has published a nice video about how Snapchat lenses, commonly known as filters, work. As a someone that once researched on digital image processing algorithms, and learned about their possible complexity and computing demand, I’m really marveled about accessible facial recognition algorithms have become. The Snapchat filters motivated me to install this app, and once I tried them myself, I was like “Wooooow… Oh boy, it’s true that we had supercomputers in our hands every day, and it seems that we just take them for granted!”

Have you used snapchat? From my viewpoint, Snapchat’s UX feels very clumsy sometimes, but it’s very interesting. When I started using this app, I felt that gestures and screens were everywhere, I had no idea about what was going on! Swiping here, tapping there! I guess it breaks somehow one of my rules as a designer and teacher: always tell the user where she is, and where she can go from here. However, I also considered that young users are so used to smartphones and gestures, and swiping screens 100 miles per hour, that it’d be me who is a bit old to use snapchat. You know, that snapchat is for cool young fellas. Also, it took me a while to get what the icons (visual cues) in the interface means I wasn’t sure why sometimes I see this or that icon. For example, the public snaps (known there as a user’s story) have a little pie chart icon. I wasn’t sure if it’s about time or number of public snaps. It took me a while to understand that it’s about the life of the public snaps, the remaining time they have before they disappear.

Notwithstanding, I have to emphasize an aspect about Snapchat. This app has a UX/UI quality I do research on: delightfulness. Certainly, applying filters to your face contributes to having a delightful UX. It’s pretty fun to see yourself be converted into a puppy, rainbow pukey person, or a nymph. People love it! I do think that Snapchat filters have contributed a lot to making this app something mainstream, finally. The app’s been out there for a while and it seems that it hadn’t taken off. Nevertheless, it’s not only about the filters. I do enjoy and appreciate how interfaces components are animated in Snapchat. For example, when you close a public snap, it’s quite cool to have that circle out transition when you make a long swipe. I see this combination of gesture (long swipe down) and animation (transition) just great! It breaks the boring idea that screens are only to be tapped on. 

Demonstration of how filters work -- Screenshot from the Snapchat website
Demonstration of how filters work — Screenshot from the Snapchat website

I think part of this UX delightfulness relates to what Snapchat could become: the new television. It seems quite enjoyable to “decide” what you want to watch and follow–of course, we have to consider all the brands (channels) that Snapchat puts there for us to watch. It’s somehow like a new way of switching channels. Just tap on the things you want to watch or not, and do it at any time and any place. Further, there’s a chance to communicate with the snap creator, to influence and be influenced, to be a receiver but also a sender. Snapchat also allows us to emphasize the uniqueness of the moment or experience by adding geofilters, in which imagery functions to add more meaning and also to make an emotional connection. And everything happens so fast, just in 10 seconds! This seems to be pretty convenient for satisfying our need for information consumption in this now information overloaded world but without making us feel that we need to invest to much time on it. Don’t you think that this is exciting but a bit scary at the same time?

I can’t wait to see how Snapchat’s UI and UX will be improved. I’m not talking about having more filters and other fun and funny interactive features. I look forward to seeing how far Snapchat gets in the redefinition of mass media, marketing, and public participation. Instagram, YouTube, and Snapchat seem to be on the same playfield. Let’s see how that turns out, and how their game will affect us and our everyday forms of communication and action.

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?

 

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. 

Design understood as the conjunction of problem framing, externalization and materialization, and communication.
Design understood as 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.

 

 

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!

 

 

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.

We cannot escape from the metaphor

Omar Sosa Tzec sketchnotes - Notes from one of my classes

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.

Omar Sosa Tzec sketchnotes - Notes from one of my classes
Example of notes I’ve taken in one of my classes

I discovered that paper is 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.

 

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.