Functional Art: To be Beautiful is to be Understandable

“Visualization should be seen as a technology”.

Alberto Cairo, The Functional Art, p. 19

OK, I confess: The first time I read this section, part of me was thinking, “Isn’t this splitting hairs?” It sounds like “design” to me. I had to read it a few times to appreciate it and it made me think of a new-for-me classification of designer that John Maeda calls, “Computational Designer”.

Screenshot from his 2018 Design in Tech report

I believe visualization would be a necessary tool for a computational designer. In fact, Maeda says:

We’re in a golden age of data visualization and quant-qual science. The tools that are available today enable understanding — for those who want it.

John Maeda, Design in Tech, p. 30

“For those who want it”. It seems “those” means readers/viewers? If so, I disagree because tools don’t enable understanding. I seek to understand many things and there are tons of visualization out in the wild. Do I understand most? Not really.

Many are similar to the visualization from our last assignment. There is often too much presented all at once and in the case of “Running on (almost) empty”, I felt dizzy.

Perhaps that is the “classical designer” in me but the choices of color, sizes, typefaces, and more made the visualization feel like an impenetrable wall. Does it look cool? Sure, at first glance. However, before I could attempt to do a “question-based test” to understand it and attempt to redesign it (our assignment), I had to read it. I’m older. It proved immensely challenging and quite frustrating. If I didn’t have to analyze it, would I have read it? Probably not. Were certain graphic design “rules” ignored for the sake of looking cool? I don’t know. I’d love to hear how the design came about.

Bars to the Rescue

Bars and charts may not be sexy off-the-bat, but they do serve their purpose and can be cool in a bold and straightforward way or that classy, soft-spoken but profound kind-of-way. For example, this visualization from The Pew Research Center about the number of women in the 116th Congress is beautiful and informative.

http://www.pewresearch.org/fact-tank/2018/12/18/record-number-women-in-congress/

This visualization is effective. The contrast is good. The colors don’t impede the readability. Type choice and sizes are also good. Is this beautiful? Yes. Is that personal preference? Perhaps. But as Professor Cairo states in The Truthful Art, “[W]hat matters isn’t if the objects of our creation are beautiful or not per se, but if they are experienced as beautiful by as many people as possible” (Chapter 2, p. 55). For me, I suppose beauty is about pleasure, a sort of emotional and mental calm or excitement.

Ultimately, it comes down to this simple fact: I can read the visualization. I can understand it. The more time I spend with it, the more interesting it becomes. What I love most is that it shows change. I knew we had more women elected in 2018 but this truly moved me. The designer — not the tools — help me understand there has been a tremendous positive change in my lifetime. Is it an award-winning, over-the moon visualization? Nope. It is memorable? Absolutely, and it gives me hope.

The Truthful Art: An Introduction to Infographics and Data Visualization

For the Spring 2019 semester, I’m taking an Introduction to Infographics and Data Visualization course with Professor Alberto Cairo. Requirements for the course include readings from his books, The Truthful Art and The Functional Art. I’ll be writing about what I read and documenting my journey as beginner in visualization.

Based on just the introduction, The Truthful Art is a Bible for learning.

These first few chapters made me think much about my life, why I’m back in school, where we are as a society, how we communicate and relate to each other, my responsibilities as a designer, and more. I hope to write more about these later. What I can say is this: This book is a call to action. For you. For me. For Us.

Five Qualities that Make a Great Data Visualization

  • Truthful
  • Functional
  • Beautiful
  • Insightful
  • Enlightening

I appreciated how Professor Cairo walks you through each of these five factors with examples. (I learn so much better when there are examples to help illustrate what is presented with words.) I won’t repeat his explanations because I think getting your own copy is a great investment. But I will share with you two visualizations I think encapsulate much of what I read and learned in chapters 1 and 2.

The Washington Post: Two Visualizations About the U.S. – Mexico Border

Helping people tell bullshit from facts should certainly be a duty for all journalists and information designers.

Alberto Cairo, Introduction, “The Truthful Art”, p. 17.

First, I want to establish that I believe The Washington Post to be a credible source of information; that the people who work there and deliver this information strive to be truthful (without deception) and present it in a way that is functional (easy to interpret).

Below are two graphics I’ve stumbled upon from The Washington Post that reveal interesting information about our shared border with Mexico. I think both would help anyone be informed citizens as the Shutdown continues and the lives of so many people are impacted by The Border Wall debate.

The first visualization is a static visualization of a map that shows the type of fence that exists — pedestrian or vehicle — and the number of apprehensions made for the fiscal year 2017. This is part of a story that gives a history of border arrests from 1970 to 2018.

Screenshot from The Washington Post, “The history of U.S.
border apprehensions

I think what I find most appealing about this visualization is that it is clear. It is quick to understand. The use of a “heat map” type of presentation (encoding?) is both intriguing and helpful. I can see that border apprehensions occur heavily in Southern California, Texas (along the Rio Grande), Arizona and a small portion of New Mexico.

The use of color and typography also makes it easy on the eyes. It is functional because it provides information that is clear, plain, and without “bells and whistles”. Every choice is deliberate. In other words, it is beautiful. The only question I have is whether this visualization has enough contrast for those with visual impairments.

Combined with the visualization below, you get better insight. The heat map tells us where border arrests are more common and this visualization presents the numbers as well as the history. In addition, you are provided additional information as to why there are more families attempting to cross the border.

Screenshot from The Washington Post, “The history of U.S.
border apprehensions

Our President told us that there is “a growing humanitarian and security crisis” along our Southern border, yet by looking at the numbers, and from reading the story, there doesn’t seem to be a “crisis”. In fact, it seems that the conditions created by recent changes in immigration policy and directives have caused the so-called crisis rather than mitigating them.

The second visualization is interactive and feels like a Sunday magazine long-form essay. This is a visualization meant to be experienced slowly perhaps with a good cup of coffee. It doesn’t fit the definition of a “news application” in that there aren’t cool sliders or ways input your own data, it gives you a lot of context through text and photography as you literally journey along the border.

Screenshot from The Washington Post, “Borderline

I learned a great deal about the geography of our border with Mexico, about the people who call it home, how adding more “walls” could impact natural wildlife areas and national parks, some fascinating history about the land before borders and much, much more.

Professor Cairo writes about how important it is to choose topics that are enlightening; meaning, first, choose topics that matter. Visualizations are a way to give insight and could have high impact. Choose topics that can help reveal the day-to-day experiences of people. I agree. While visualizations about pop stars, personality traits and movie characters are fun, I’ve always been a person who wants to do good. This was the reason why I went back to school the first time. Since my mid-twenties, I have felt compelled to do good work and to do work that has impact; that is meaningful. I feel as designers, it is our responsibility to contribute to solving the wicked problems in our communities.

Questions are Key

The Truthful Art is entertaining and fascinating, written with keen insight about people, information, and society. What I love most is that this book doesn’t provide clear cut answers. It forces you to ask questions and acknowledge the complexity of humanity as well as the pitfalls of being human. It encourages you to step back, investigate, explore and in essence be an informed and responsible citizen.

I am reminded time again to ask questions. Recently, I read an article about critiques. Critiques that encourage dialog by asking questions are better learning experiences compared to ones where people simply state their opinions (I like, I think, etc.).

I don’t have a fully-fleshed out thought about questions and their importance, but I do know questions sometimes create ambiguity and that can sometimes be anxiety-inducing. Questions are also great for getting to know people and increasing your knowledge. I also think it is a great way to check your self, your intentions, and reflect on your experiences.

Charlie: Final Presentations and Reflections

Monday was our final presentation for our chatbot, “Charlie” for our Designing Innovation class.

For Qinyu and I, getting to this place was not easy but it sure was a lot of fun with loads of lessons learned along the way, but before I dive into those lessons, below is our final presentation to our class, our professor, Lien Tran and our guest, Rebekah Monson.

You can also view our prototype of Charlie.“There are some quirks, as it is only our second iteration but we think it gives a good sense of “Role and Look and Feel”, two types of prototypes and the relationship between them. [1] Implementation, a third type of prototype would be the next big leap; something I would love to make happen. (Note: as serious as this post was intended, I could not help but think of Captain Picard in Star Trek, “Make it so)

Lessons Learned

Lessons learned is something I have lodged in my brain since teaching my own students at Newhouse. For nearly every project submission, I asked them to submit 3-5 lessons learned to get to know them at first; to understand what they need to learn, and to understand their thinking.

Now that I am a student (again), below are mine and I hope to write more and in more detail about these in the near future since during this project, I not only got a hairline fracture in my dominant hand but also severe tendonitis from repetitive trackpad use!

Anyway, here is one of the big takeaways so far. I’ll write more later as I’m eager to share in case others may find my experience helpful.

Conversation is the User Experience

I can no longer recall what my expectations (assumptions may be a more appropriate word) were when I came up with “Charlie” but I read a lot online about designing chatbots and while I was drawing out (ok, attempting to draw) out storyboards, it dawned on me that my time would better be used writing.

This article, Therapy via conversational design by Kathleen Varghese and the documentation for Google Assistant, IBM Watson and various other sources (Thank you everyone who publishes on Medium) were critical to my learning since I was not enrolled in any course about chatbots or artificial intelligence. (Note: Dr. Ching-Hua Chuan, PhD., is our expert on campus and I did speak with her a few times and need to more.)

Given the minimal UI of a chatbot, the conversational flow between bot and user is mission critical. That seemed like a no-brainer when it hit me but up until that moment, I was still thinking visually.

So for anyone new to chatbot design, focus on the words and tone to give your bot the appropriate personality for your target audience.

Book about designing chatbots
Amir Shevat’s, Designing Bots: Creating Conversational Experiences, a must-read book for anyone interested in designing bots.


References

[1] Houde, S., & Hill, C. (1997). What do prototypes prototype?. In Handbook of Human-Computer Interaction (Second Edition)(pp. 367-381).

Chatbot: “Charlie”

After a conversation with Professor Tran and several conversations with my team partner, Qinyu, I decided to pursue my chatbot concept in full force.

Well, almost. I’m currently poking at the keys because I suddenly developed severe pain in the lower part of my thumb which makes typing and micro movements excruciatingly painful. This, after dealing with a hairline fracture … I mean, seriously??? The timing could not be worse. Anyway, I’m plugging along as much as I’m able. 

I’m excited and nervous. There’s a lot to still learn and doing this on my own for a specific timeframe feels daunting. But, my excitement at the moment makes it seem doable. I have to present in less than two weeks. So much for Thanksgiving break. Eep.

So, what do I do when I know there are many tasks in a project? Make a list! Here’s my list of actions for Project Charlie (in no specific order):

  • Do more research.
    • Read more articles and gather more information about Alzheimer’s
  • Define an audience.
    • Is this for all caregivers or ?
  • What is the primary function?
    • Therapy? Coaching? Both?
  • Define a personality or persona for Charlie.
    • Character based or ?
    • What kind of language will he use?
  • Come up with a different name for the app. (Maybe)
  • Define scenarios
    • Where will Charlie be used? How will users feel? (Maybe more of a journey map?)
  • Storyboards
    • Drawing may be a problem
  • Create a user flow
  • Identify features 
    • What will users really need? Try to avoid doing too much
  • Create several conversation scripts. (This is going to be the most important step)
    • Learn how to create them.
    • Understand the jargon more
  • Content types. What types of content will appear in the chat?
    • Gifs? Emojis? Video?
  • Determine a mockup or prototyping platform/tool. 
    • How to make it feel as real as possible without an active database? (I don’t even know if that is the right term)
  • Define the look and feel.
    • Moodboard
  • Build the prototype.
  • Test the prototype.
    • Contact the people I interviewed

Lots to do! Hasta pasta.

Crossroads: This Idea or That Idea?

What do you do when you started down one path and all of a sudden another reveals itself? 

Just before Thanksgiving break, I found myself researching two ideas. I knew this wasn’t efficient but I felt compelled to explore the second idea more after the interviews I had conducted. Five interviews later I found that perhaps the initial idea Qinyu and I came up with wasn’t the best path.

This is the beauty of interviews.  They can enlighten you, challenge your initial ideas and lead you down a different path. Some may think this creates more work but I think it saves you time and money down the road.

What is the second idea? A chatbot I’ve nicknamed, “Charlie”.

Charlie isn’t really new. At least, not for me. He was one of the first ideas I had after the first interview but somehow during our initial concept meetings, Charlie was passed over for our smart entertainment system idea. So, Charlie sat on the sketch shelf for months, until now.

I hope to write more about Charlie and I’ve fractured my index finger so typing is incredibly slow and not easy. (I’ve developed tremendous amounts of empathy for people who lose digits or have arthritis … )

More soon …