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.

CHI 2016 Workshop on Visual Literacy & Human-Computer Interaction

ATTN: We have extended the submission deadline for the CHI 2016 Workshop on Visual Literacy & HCI to February 1st, 2016

Call for Position Papers: ‚ÄúVisual Literacy & HCI‚ÄĚ
CHI 2016 Workshop to promote visual literacy as first class competency in HCI research and practice


The goal of this workshop is to develop ideas about and expand a research agenda for visual literacy in HCI.

By visual literacy, we mean the competency
(i) to understand visual materials,
(ii) to create visuals materials, and
(iii) to think visually.

There are three primary motivations for this workshop on visual literacy in HCI, namely
(i) to engage HCI researchers in the transformative dimensions of visual literacy with respect to modern digital technology
(ii) to assess the relevance and pervasive nature of visual artifacts in and as a consequence of HCI design, and
(iii) to promote visual literacy as a first-class competency in HCI research and practice.

This workshop will consist of paper and visual material presentations, critique, and structured discussion sessions. The overall goal is to detail a viable research agenda that investigates the persistent and emerging dimensions of visual literacy in HCI.


Extended Submission Date: February 1st, 2016
Camera-Ready Papers: February 12, 2016 (5pm EST)
Workshop: May 8, 2016


At the workshop, we will address visual literacy in HCI from the perspectives of researchers and practitioners. We invite the CHI community to consider the following questions:

1. What are the dimensions of visual literacy in HCI?

2. How do visual metaphors and visual artifacts influence the way we think about HCI research and practice?

3. How do HCI researchers and practitioners use visual literacy to conveying knowledge, for conceptualization, for engagement, or as support for argumentation?

4. How is visual literacy efficacy evaluated, sustained, and fostered?

5. Does current and future technology require new ways to comprehend, create, communicate and teach about visual literacy in HCI?


In the most general terms, we invite paper contributors to explain notions of visual literacy in terms of three main themes, namely

(i) Visual understanding
how are visual materials understood and explained in HCI research and practice?
(ii) Visual making
how are visual materials used in HCI prototypes and other forms of making?
(iii) Visual thinking
how is visual thinking different than textual thinking, and how does it augment notions of HCI?

There are a number of alternative themes or framings that are germane to visual literacy, namely

(i) Definitions
how may visual literacy be defined in terms of constituent dimensions and competencies?
(ii) Scale
how is the scale and pervasive nature of visual materials implicated in HCI?
(iii) Measure
how can we know what is entailed in claiming visual competence in HCI?
(iv) Transdisciplinarity
how can we transcend disciplinary boundaries with respect to the integration of concepts of visual literacy as they owe to various fields within and beyond HCI?

This workshop invites people focused on the development, use, and exploration of visual material in HCI, either in the context of research, design process, or outcome.

People working in the following areas, but not limited to these, may be interested in submit position papers:
* Visual literacy
* Visual thinking
* Design-oriented HCI
* Digital Imagery
* Data Visualization
* Information Visualization
* Interface Design
* Visual and Digital Rhetoric
* Communication Design
* Information Design
* Interactive Art & Media
Participants are invited to contribute papers that present theories, frameworks, methods, and exemplars of visual literacy in HCI. The workshop aims to build a network of collaboration among those in the CHI community interested in promoting visual literacy in HCI research and practice. Through presentations and group activities, participants will propose the notion, dimensions, and future research directions for visual literacy in HCI. The workshop group activity will include hands-on, visually-oriented, methods to synthesize and present insights.

Physical presence of at least one author of each accepted position paper is required. To encourage the inclusion of thoughtful imagery, submissions have no page restrictions. Papers are to be submitted in the ACM archive format, ACM extended abstracts format, or the SIGCHI DIS pictorial format.

Submit your imagery or position paper to kyle@hcivisualliteracy.com

All participants must register for both the workshop and at least one day of the conference.

Kyle Overton (Indiana University — USA)
Omar Sosa-Tzec (Indiana University — USA)
Nancy Smith (Indiana University — USA)
Eli Blevis (Indiana University — USA)
William Odom (Simon Fraser University — Canada)
Sabrina Hauser (Simon Fraser University — Canada)
Ron Wakkary (Simon Fraser University — Canada)


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”

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.


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.