Home

In the ongoing definition and discussion of the term User Experience, classic design aspects like for instance interaction design seem to get a bit out of style. Instead designers – like me as well – are engaged in how to tell interactive stories, how to draw users deeply in that stories and same time in applications. It seems as if content and its dramaturgic presentation is a main aspect of UX. Furthermore, as UX per definition is not limited to only one product but describes a touch-point embracing overall experience, the need for a kind of bird’s-eye perspective on interface-design arouse. Hereby – and that’s the other side of the coin – the detailed view to single aspects of interface design may recede in the context of the current UX discussion. This article is about a zoom back to interaction design in the context of UX. It accompanies my talk at the “Usability Congress Frankfurt 2013“, October 11th.


Fig. 01: The UX-dilemma

UX – Just Theater?

If we have a look at all the recipes for a better UX, we could arrive to the conclusion that a software application is nothing else than a stage where a story is being told. And indeed, this idea is not completely new.

At the beginning of the 90ies, pioneers of contemporary computing at that time, like Ted Nelson (1) and Alan Kay (2), regarded the computer as a virtual world in which to act. They described that the act of communication takes place between the user and the world inside the machine. The computer according to their ideas, was a place where performances were given for users. Paul Heckel described “When I am designing a product, I think of the program as giving a performance for its user.” (3).

Brenda Laurel, the renowned design researcher, clearly formulated this idea in 1990 in her theory of the “Computer as a Theatre” (4). She compared the computer as Aristotelian theatre through which the audience empathize with the characters. Audience as well as computer users willingly suspend belief to be healed and strengthened. The great knowledge and the millenia old tradition of handling an audience of theatre people should be benefited from when developing computer interfaces, she concluded.

20 years later, in a revision of her famous book, she described the possibility of a role change from audience to actor. But she added as well, that it can provoke psychological clutter if the roles of audience and player are mixed up. (5) This very day the idea of the comparison between e.g. a website visit and a theatre experience didn’t lose any fascination and truth.  And yes – I have to denunciate myself for working on the idea of applying classic drama structures to website visits, like I described in the article Campfire Lessons.

But it would be wrong, to send the user back to the audiences’ seat, only because we stick to the theatre metaphor. So, let’s think out of this box now and pretend as though nothing had happened.

Interaction – A Borrowing From Sociology

The term “interaction” has not been specially developed for the internet, and the gameboy. Rather it has it’s roots in sociology. “Socius” in latin means “companion”. So sociology is the science that deals with the exploration of the backgrounds of the coexistence and gathering of human beings.

Interaction in its original meaning is the mutual influence of the behavior of individuals.

Fig. 02: The definition of interaction from a sociological perspective

Fig. 02: The definition of interaction from a sociological perspective

The factor of “mutual influence” that forms the basis of the sociological term “interaction” is far away from the common droughty idea of interaction in terms of a click on a button to enable a search process at e.g. the google search page.

The reason, why we should care more about the sociological idea of interaction is, that Interaction is assumed to be one of a precondition for the establishment of a relationship. To connect with others and to interact with them we need another essential competency. Our character determines the quality of our relationship with others.

Fig. 03: Our character determines the quality of our relationships

Fig. 03: Our character determines the quality of our relationships.

Let’s take the couple of Fig. 03. We can easily envision the type of their relationship by describing the characters of the persons involved. The guy is “like an angel”, what means that the two live in the enjoyment of mutual respect, support in a stable and harmonious, maybe a bit boring relationship – except “she” is a devil…

Why I am repeating all those matters of course that we all accepted for our everyday life? Well, I bore you with the facts of your own normal course of life, just because we can take the same principles as a basis for interaction design. One interesting finding, observing people is, that we are not capable of total abstraction. We rather tend to learn and deduce from scenarios we are quite familiar with. As users we are lightheartedly willing to transfer the same rules we learned in life to interaction situations between us and animals or objects. (No, that’s no statement against animals.) This means, designers not only can but indeed should directly translate the principles of social interaction to the man-object interaction for the sake of the relationship design between the user and the application.

Under this conditions we can define the interaction between man and object as mutual influence of all interaction participants. This will automatically lead to an emotional link of the user towards the object, if any character attributes of the object become apparent.

Fig. 04: Man-machine interaction and relationship

Fig. 04: Man-machine interaction and relationship

The fact that we can easily borrow a term from the field of sociology may imply that not theatre experts but sociologists should be the ones we should listen to, while designing interfaces.

Character: Yes, But How?

How to teach an application a character?

There are three basic concepts of equipping a software application with a character:

  • Staged characters as agents in applications (the character agent)
  • User generated character (the social steal deal)
  • The essential character of an application

The Character Agent

A simple but effective method is to choose a kind of agent as packing for a bunch of  character traits. You simply create a counterpart you trust in having a character and let him be the representative of an application.

One example with an astonishing effect is “Carl“. Carl is just a figure you can interact with. Dependent on the way you treat him, Carl laughs, cries, protests or just repeats what you said with a ridiculous voice (the last only iPhone version).

Fig. 06: Carl directly interacts with the user

Fig. 06: Carl directly interacts with the user.

Although the user knows about the limitations of Carl’s abilities and the virtuality of his character, he or she unconsciously develops an emotional position towards him. Carl – without any doubt has a character and personality.

A more complex example for a character agent is Tio. The light switch system was designed by Tim Holley to increase the younger generation’s awareness of energy consumption. Tio enables children to demonstrate their knowledge of energy conservation to their families, while encouraging their role as ‘energy champions’ of the home. The system consist of light switches that react by a face feature on the light switch to the duration of lights are on. This display of emotion will encourage the child to turn off their lights when they are not needed, for example during the day, or when they are not in the room. A key feature of the concept is that it is a ‘product system’. The wall mounted light switch communicates with a computer to record the child’s lighting behaviour.

Fig. 07: Tio light switch characters

Fig. 07: Tio light switch characters

A connected web application allows the child to track their lighting-use performance over time. Tio relates lighting usage to topics that are meaningful to children; how energy affects trees, animals and the local environment. This not only makes energy consumption more understandable to the child but also shows the effect saving energy can have on their life. This engages children to make a personal contribution to reducing energy consumption.

The character of the being Tio in proxy for the application itself influences the communication and association with the user. In the end application is Tio.

Fig. 08: Positive feedback for efficient handling of energy ressources

Fig. 08: The character Tio gives positive feedback in case of efficient handling of energy resources.

Tio has been featured in the Museum of Modern Art’s exhibition ‘Talk to Me‘, and was as well awarded for the HSBC Sustainability Prize in 2009.

The Social Steal Deal

A special form of dealing with characters for applications users face in the so-called social media applications. The “mentor-app” of the Berlin based Mentor Works GmbH uses the characters of the mentor community members to give face and character to the app. As the app allows users to support other users to reach their goals, the app profits from the interaction between the participants of the community. The positive feeling of being supported by friends automatically is transferred to the perception of the app. Mentor is my personal supporter.

Fig. 09: The Mentor-App

Fig. 09: The Mentor-App

The Character Of An Application

So far I described helpful and working utilities as substitute for the character of an application. But, how about an application that really has a character? I bet you know one.

For me the most famous example of a system with an own will and character is HAL 9000. HAL is the computer of the spaceship “Discovery” in the movies “2001: A Space Odyssey” (Author: Arthur C. Clarke, direction: Stanley Kubrick) (1968) and “2010: The Year We Make Contact” (Author: Arthur C. Clarke, Direction: Peter Hyams).

HAL gets into conflict with the crew of the spaceship, when they want to switch him off because of an assumed malfunction. In reaction he tries with all technical but as well psychological tricks to not only to prevent the deactivation but as well to eliminate the crew instead.

Fig. 10: HAL 9000's appeal to Dave

Fig. 10: HAL 9000’s appeal to Dave.

In fact not only HAL but any application can act like having a character in the background. The interaction designer just has to create one.

To approach the appropriate method how to design the character of an application, let’s analyze some examples.

Mr. Doodlebuzz

I you try to describe the character of a person, you might use the following categories.

  • The essential value attitude (e.g conservative)
  • The way of inner self organisation (e.g. proper)
  • The mental abilities (e.g. intelligent and creative)
  • The behaviour towards others and the personal presence (e.g. cooperative and charismatic)

The example below shows a character profile of – let’s say Mr. Doodlebuzz.

Mr. D has an alternative lifestyle and resists to social conventions if their only justifications are formal reasons. He acts intuitively and due to his denial of structures others name “proper” or “logical”, he formed some compensatory habits that his friends humorously call “autistic”. D. is a clever guy, although a bit lazy. He excuses the last by his easy-going style. But instead of defending this nonchalance he often is ready to apologize if he is taken to task for his apparently missing management capabilities.

Fig. 11: Character profile of Mr. Doodlebuzz as representative of a website

Fig. 11: Character profile of Mr. Doodlebuzz as representative of a website.

Sounds like a real person, right? Well, I described the character of the search engine DoodleBuzz developed by UK-based designer and artist Brendan Dawes. (Hint: please open it with any browser but safari.) The tool has an experimental interface that allows for a new way to read the news through by creating typographic maps of current news stories.

Let’s get to know another person. This lady is a modern, straightforward woman, who loves order in her life. She is no friend of profound academic discussions. Instead, she invests her intelligence for natural sciences and mathematics. She spots on uncomplicated and easy relationships with people she likes to meet for a chat. Let’s call her Ms. Newsmap.

Fig. 13: Mrs. Newsmap, the order loving scientist with averseness against too deep discussions

Fig. 13: Ms. Newsmap, the order loving scientist with averseness against too deep discussions.

Newsmap is a news visualization application based on the Google News aggregator. It has been developed by Marcos Weskamp in April 2004. Color codes show the type of news story (sports, business, national, etc.) and the size of the modules presented indicate how many news stories there are on this topic. Newsmap provides a tool to divide information into quickly recognizable bands which, when presented together, reveal underlying patterns in news reporting across cultures and within news segments in constant change around the globe. Its goal is to demonstrate the unseen patterns in news media. Unlike other news platforms, it is not thought to display an unbiased view of the news; on the contrary, it is thought to ironically accentuate the bias of it.

Character Modeling

Following the examples above, we can take the category matrix to describe the character of an application that has to be developed. The character definition normally is a task in the concept phase in the design process. It comes in a package e.g. after the development of personas as representatives of users and/or user journey and/or scenario writing.

If once defined a character…

Fig. 15: Modeling a character for an application

Fig. 15: Modeling a character for an application.

…you can derive nearly everything from it, like further attributes, behaviour towards the user and of course features.

Fig. 16: Character implications for the application

Fig. 16: Character implications for the application.

Why The Whole Enchillada?

In the end there is the question, why designers should care about a fictive character for a technical thing like an application. Well, first of all users anyway tend to impute character to applications, as they behave towards them in interactive situations. In turn interaction causes a relationship that is determined by the characters of the interaction partners. If interactive products should deliver corporate messages about a brand or company, they better present an adequate character.

Fig. 17:  From Image communication to a relationship between company and user, because of the application as the company's agent

Fig. 17: From image communication to a relationship between company and user, because of the application as the company’s agent

If Applications Were People – The Final Proof

If you still need to be convinced that an application has a character anyway, please have a look at the fantastic video If Famous Websites Were People – powered by Cracked.com

Sources

(1) Nelson, T.H.: The Right Way To Think About Software Design. In B. Laurel (ed.): The Art of Human-Computer Interface Design. Addison-Wesley, Reading, Mass. pp.235-243., 1990

(2) Kay,A.: User Interface: a Personal View. In B. Laurel (ed.): The Art of Human-Computer Interface Design. Addison-Wesley, Reading, Mass. pp. 191-207., 1990

(3) Heckel, Paul: “The Elements of Friendly Software Design“, New York: Warner Books,1982

(4) Laurel, Brenda: “Computers as Theatre” (1rst Edition), Addison-Wesley Professional, 1991

(4) Laurel, Brenda: “Computers as Theatre” (2nd Edition), Addison-Wesley Professional, 2013

Fig. 01: The UX-dilemma (c) Andrea Krajewski

Fig. 02: The definition of interaction from a sociological perspective (c) Andrea Krajewski

Fig. 03: Our character determines the quality of our relationships (c) Andrea Krajewski

Fig. 04: Man-machine interaction and relationship (c) Andrea Krajewski

Fig. 06: http://www.talkingcarl.com/tcweb.html [17.11.13]

Fig. 07-08: Tio Lightning Switch System, (c) Tim Holley, http://timholley.de/2010/08/10/tio/ [6.10.13]

Fig. 09: Screenshot, The Mentor-App, (c) Mentor Works GmbH, http://www.mentor-app.com/ %5B17.11.13%5D

Fig. 10: Illustration of HAL 9000’s appeal to Dave (c) Andrea Krajewski

Fig. 11: Character profile of Mr. Doodlebuzz as representative of a website (c) Andrea Krajewski

Fig. 12: Screen-video use of http://www.doodlebuzz.com

Fig. 13: Ms. Newsmap, the order loving scientist with averseness against too deep discussions (c) Andrea Krajewski

Fig. 14: Screen-video use of http://www.newsmap,jp

Fig. 15: Modeling a character for an application (c) Andrea Krajewski

Fig. 16: Character implications for the application (c) Andrea Krajewski

Fig. 17: From image communication to a relationship between company and user, because of the application as the company’s agent (c) Andrea Krajewski

2 thoughts on “Character-Therapy For A Better UX

  1. Do you mind if I quote a couple of your articles as long as I provide credit and sources
    back to your blog? My blog is in the exact same niche as yours and my visitors would definitely benefit from some of
    the information you present here. Please let me know if this alright
    with you. Thank you!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s