Quote on designers and expert subjectivity

“An expert subjectivity is needed in design, because “design professionals” require a cultivated ability to read socio-cultural signs and trends; a creative and reasoned ability to explore alternative futures; a verbal ability to articulate these activities; a receptiveness to alternative framings and a willingness to explore highly variable alternative directions; and above all a personal identity or coherence that holds all of these moving parts together through a given process.”

Jeff Bardzell (2012)


Bardzell, J. (2012) Commentary on: Shusterman, Richard (2014) [sic]: Somaesthetics. In The Encyclopedia of Human-Computer Interaction, 2nd Ed. [online] ed. by Soegaard, M. and Dam, R.F. Aarhus, Denmark: The Interaction Design Foundation. available from https://www. interaction-design.org/encyclopedia/somaesthetics.html. 39, 93, 95, 96, 106

On deprivation and user experience

In the book, “Experience Design: Technology for All the Right Reasons” by Marc Hassenzahl (2010), there’s a section labeled, “Do needs have different priorities?” Below is last paragraph of that,

“Identifying situations, which imply the systematic deprivation of a need, is an important starting point for Experience Design. It is difficult to “sell” an experience of a certain type to somebody, who is already saturated. However, the true challenge for Experience Design is to fulfill needs without making this too obvious.” (Hassenzahl, 2010)

For some reason, this paragraph made think quickly of

  • Issues that I’ve experienced as educator and the possible relation between saturation and learning experiences,
  • the relevance of contrast in design and its use as a mechanism to avoid saturation,
  • and the connection between the use of a particular design and the so-called north-south in the sense that
    • even though the deprivation of needs occurs worldwide, it is likely that they result different for all the people or regions in the world,
    • and how that might imply that a design
      • just cannot guarantee a uniform user experience at all, or
      • it is important for any design to leave enough room for the users to adapt it and thus support the creation of a meaningful user experience.

A small but powerful paragraph from my perspective.

Definition of “an experience-oriented approach”

Below, there is an extract (part of the introduction) from the paper “Experience-Oriented and Product-Oriented Evaluation: Psychological Need Fulfillment, Positive Affect, and Product Perception” by Hassenzahl, Wiklund-Engblom, Bengs, Hägglund, and Diefenbach (2015).

Sometimes I feel that we have diluted the notion of UX. However, this text reminds me that academia is there for the study and examination of phenomena, including the so-called UX, and that a good aspect of academic work is providing coherent and robust (based on previous research and studies) concepts and methods. What caught my attention from this paper is how it defines “experience-oriented approach” and includes the concepts of emotion, meaning, and dynamic story.

Extract

“Accordingly, Hassenzahl (2010) argued to put “experience before the product” (p. 63), which requires rethinking what technology actually is, why it matters, and what its intended effects are (Forlizzi & Battarbee, 2004; Hassenzahl, 2010; Hassenzahl & Tractinsky, 2006; McCarthy & Wright, 2004). As opposed to a task-oriented approach, the experience-oriented approach focuses on the personal, subjective side of interaction with a product, understanding interaction as a dynamic story, able to create emotions and meaning. Admittedly, we are far from a common accepted definition of what user experience could or should be (Law, Roto, Hassenzahl, Vermeeren, & Korte, 2009) and experience research can be biased and sub-optimal (Bargas-Avila & Hornbæk, 2011). But experience is at the heart of the emerging postmaterialistic, experiential society (Schulze, 1992) and economy (Pine & Gilmore, 1999). Technology firms can hardly afford to ignore it (Hassenzahl, 2011).

In addition to changes in how to think about or even design technology, a focus on experience suggests reconsidering the models and assumptions underlying well-accepted approaches to evaluation. So far, the “product” is often quite narrowly understood as the tangible set of materials it is made of (e.g., screens, keys, buttons, knobs, windows, sliders) and evaluation focuses on those material aspects. An experience-oriented perspective, however, acknowledges that people foremost create meaningful and memorable stories through interacting with a product. These stories become in fact a part of the product and in turn serve as a basis for a more explicit product evaluation. In other words, if asked about aspects of a product, such as its perceived usefulness or the quality of certain features, people will likely probe their memory for experiences they have had and then base judgments upon a particular or a collection of remembered moments. This process is so pervasive that it even works with imagined experiences (Rajagopal & Montgomery, 2011).

This calls for an extended perspective on evaluation, including products and experiences, as well as a better understanding of how people derive judgments from recollected experiences…
…[W]e define an experience (Forlizzi & Battarbee, 2004) as a retrospectively constructed personal narrative, based on feelings, thoughts, and actions remembered from a collection of moments…”

(emphasis added)

 

 

Online resources about research and for a PhD dissertation

This is a personal post about online resources that talk about conducting research. I expect this list to be organic, and this is for me to not forget while I’m working on my (HCI + design) dissertation. However, I hope it’s helpful for you too!

Please, if you know about a cool resource that needs to be added to this list, let me know! I’m @omitzec on Twitter!

Inspiration: PhD dissertations in HCI and Design

Resources for applying to an academic position

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

=============================
OBJECTIVE
=============================

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.

=============================
IMPORTANT DATES
=============================

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

==================================
WORKSHOP QUESTIONS
==================================

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?

==================================
WORKSHOP THEMES
==================================

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?

==================================
ABOUT PARTICIPANTS
==================================
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
==================================
FORMAT & GOALS
==================================
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.

==================================
PARTICIPANT SELECTION CRITERIA
& REQUIREMENTS FOR IMAGERY
OR POSITION PAPERS
==================================
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.

==========================================
WHERE TO SUBMIT IMAGERY OR PAPERS
==========================================
Submit your imagery or position paper to kyle@hcivisualliteracy.com

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

==========================================
ORGANIZERS
==========================================
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)

=======================
WEBSITE
=======================
http://www.hcivisualliteracy.com

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)

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!

 

 

Participatory Design: making, telling, and enacting.

“Design participation is an evolving practice of making, telling and enacting. The iterative flow of events between these activities is essential, not only for participation to occur naturally, but for participation to occur with ease and with joy. When we can fully engage people’s minds, hearts and bodies in imagining and expressing future situations of use, we can be assured that they have an opportunity to influence future ways of living, learning and being.”

 

* Eva Brandt, Thomas Binder and Elizabeth B.-N. Sanders. Routledge Handbook of Participatory Design (Routledge International Handbooks) (p. 176). Taylor and Francis. 2012.

Is there a theory of design?

I had a quick discussion with my friend and colleague Jordan Beck, who is now working on the notion of Design Identity. As part of that work, Jordan is creating a list of definitions of Design and an interesting list of possible design theories. Then, we were discussing whether there’s a theory of design as such. As usual, we employed the whiteboard to discuss our viewpoints. The result is shown below.

Schemas about theories of design
a) A typical example form Gestalt theory (Jordan). b) A schema regarding theories in relation to their “belongingness” to Design and their applicability (Omar). c) Design as consequence of a networked non design theories (Jordan).

As it’s shown in the schema b, I was telling Jordan that most theories of design are generated from other fields, such as Psychology, Philosophy, or Literary Studies. This idea is represented by the horizontal axis. My quick comment was made in relation to the applicability of those theories—the vertical axis. I conjectured that, in terms of applicability, designers pay more attention to those theories not generated within Design since they are the ones that are more related with the designer’s competence at the moment of actually doing design. In relation to the theories generated within Design—that is, generated by Design Researchers, in designerly (research) context, and working for and with designers—usually they don’t know or care about those theories because their not “visible” in their everyday practice.

Then Jordan came with the schema c from the picture above by which he remarked about the possibility that Design is (partially) constituted by networked knowledge/theories not generated “within” Design.” From here, he made the interesting question about whether there’s a theory really generated within design. The quick discussion was basically focused on that. I commented that it seems to be no theory of design as such. Since the two of us are taking Erik Stolterman’s seminar on Philosophy and Theory of Design, I added to my point that by discarding knowledge generated from non design Disciplines, Philosophy of Design might represent the theory of design—as theoretical generative means regarding design and for design. Yet we talk about Philosophy, so it belongs to other field at the end. Tricky and funny.

In relation to comments above, we got this quick and crazy deduction that there’s no theory of design apparently. Later, since there’s a relation between some disciplines and design as we appreciate in the current “design theories”, Design seems to be present somehow (or mapped back) in these fields. If it is possible to create this type of bidirectional connection with any discipline, does it mean that design is everywhere somehow? Was Paul Rand right when he said that “Everything is design”?

 

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.