Lecture slides on HCI and Visual Design for UX

Here are some of the presentations that I have made for lecturing human-computer interaction and visual design for user experience. I hope you find them useful 🙂

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.

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?


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.

Tzec QR Code
Scan me 🙂

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




Thanks to 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!

  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)