Designing User Experience

Not User Interface

Petr Kosnar

IamPetr.com

@faxecz

Image ref. 1

User Experience... Omnipresent buzzword. Everybody asks for it, and so few people can actually clearly say what it is. In fact, it is pretty self-explanatory – just look at the two words and their meaning.

User?

Image ref. 2

Users are not only a subject in our user tests, they are real humans. The most important objects of our interest. Because they interact with your system. And this interaction evokes experiences in them.

Experience?

Image ref. 3

Effect on the user‘s feelings, emotions (do they feel happy, annoyed, frustrated, excited, afraid, bored, relaxed, satisfied, tired... ?), memory, building opinion, tackling users‘ psychological needs!

1. Autonomy — Independence

2. Competence — Effectance

3. Relatedness — Belongingness

4. Self-actualizing — Meaning

5. Security — Control

6. Money — Luxury

7. Influence — Popularity

8. Physical thriving — Bodily

9. Self-esteem — Self-respect

10. Pleasure — Stimulation

Psychological needs

(Hassenzahl, M. (2010). Experience Design: Technology for all the right reasons.)

1. Autonomy — Independence

2. Competence — Effectance

3. Relatedness — Belongingness

4. Self-actualizing — Meaning

5. Security — Control

6. Money — Luxury

7. Influence — Popularity

8. Physical thriving — Bodily

9. Self-esteem — Self-respect

10. Pleasure — Stimulation

Psychological needs

(Hassenzahl, M. (2010). Experience Design: Technology for all the right reasons.)

UX designer is addressing these needs through the product he is designing – that is one of the main abilities of a good UX designer! There are several aspects of UX that designers must keep in minds...

UX is individual,

Image ref. 4

UX is individual. Looking at the emotions and experience, the child on the left is apparently enjoying the moment slightly more than the child on the right. Even though they are both in the same situation.

(www.allaboutux.org/uxwhitepaper)

dynamic,

UX typically changes over time. Anticipaded UX refers to the expectations built before you start using the product (in a specific situation), Momentary UX refers to each specific moment of interaction with the product, Episodic UX refers to each usage episode, Cumulative UX refers to the whole experience with the product after having used it for a while.

(www.allaboutux.org/uxwhitepaper)

dynamic,

context-dependent

Physical (time of a day, month, season, location, ...)

Emotional (feelings at the moment of experience)

Sensory (seeing, hearing, smelling, tasting and touching)

Historical (UX at a particular time and place in history)

Memory (personal connections to the past)

(Quesenbery, W. and Brooks, K. (2010) Storytelling for user experience: Crafting stories for better design.)

„User feels good before,

during, and after using

our product.“

UX designer‘s goal

See? So far I haven‘t mentioned User Interface at all... Because it is about more than just designing a website, interface, or a product. It is about developing the whole concept of use with respect to the user‘s needs, feelings and emotions. Let‘s see how to do that...

How to design UX?

Asking „How to design UX?“ is actually not correct... You cannot design UX. You can only design to enable certain UX. UX designers shape emotions through affecting the purchasing, owning, and using the product. We must achieve empathy and understand the complete context. We have many tools and methods for that. For example...

Storify

Storyboarding

Video Prototyping

I am going to describe one UX-driven project where we used these three methods that helped us to empathise with the users, envision UX we wanted to design for, and specify and communicate the design.

UX brief

Brief: Identify a niche user group and their user need(s) that can be addressed by the hue lamps. Then explore what would the app be like, what functionality it will have, how user will interact with it, what lighting effects it would create? The overall goal is to use to lamp to enable new, unique user experience.

Storify

(Atasoy, B., & Martens, J. B. (2011). Crafting user experiences by incorporating dramaturgical techniques of storytelling.)

Storify (currently being developed as Storyply) is a Storytelling technique using dramaturgical techniques from film and sequential art. This method is helpful for clarifying the context, identifying involved stakeholders, their needs and emotions, and envisioning the UX we want to design for. Consists of eight steps...

Image ref. 5

1. Design Brief: Team members individually state the title, background, and objectives of the project in order to define high-level goals. This serves as a starting point of the UCD process.

Image ref. 6

2. Casting characters: Team members individually contribute to the definition of people, places and objects in the story. These are transformed into characters, settings and props.

Image ref. 7

3. Establishing setting: This step completes the context and defines the establishing shot – the starting point of the story.

Image ref. 8

4. Keyframing events: Identifying the situation we want to improve... Storyboard consisting of five frames clearly shows key moments in the story. Here we identify the (UX) design opportunity.

Image ref. 9

5. Assessing experiences 1: Each frame of the story is analyzed in terms of psychological needs and emotions. This helps us to identify the points of tension or conflict. We can see when the user feels well and when they feel miserable – the moment(s) we can improve.

Image ref. 10

6. UX vision: What experience we want to enable to the user? What do we want to be the qualities of the experience, and how do we want user to feel before, during, and after engaging with the experience?

Image ref. 11

7. Assessing experiences 2: In this step we envision the UX we want to design for. This is the vision of the experience in the improved situation. And in order to improve the situation to get here, we need...

Image ref. 12

8. Ideas: We generate concepts for the improved UX, elaborate the concepts, create story boards and evaluate them with designers, users, and other stakeholders.

Storyboarding

Good for getting a more concrete understanding of the actual or envisioned situation, and for describing the user process flow visually. A storyboard helps to concretize relevant aspects of the context of use: Who is involved, How are they involved and what are they doing in the different episodes, Where is it all happening, When, and Why.

Image ref. 13

Video Prototyping

Storyboards are great, but we can visualize the story in even better, richer, and more concrete way – by a video prototype. You do not need a camera, studio nor plenty of time for preparing the scenes... If you can draw a story board, you can make a video prototype too! Using sketches, powerpoint, and voiceover (or subtitles). Look...

These are Robin and Susie. Susie is five years old and loves fairy tales and dolls, but she hates going to bed.

Image ref. 14

Every evening around seven o’clock Susie needs to go to bed. Tonight Susie doesn’t feel like going to bed and she doesn’t want to put her pyjama on.

After some discussions Robin says: “if you’ll put on your pyjama like a good girl then I’ll read you a story with real lights.” That‘s what Susie loves!

All of a sudden Susie behaves and puts her pyjama on, brushes her teeth, and runs into her bed immediately.

She can pick her own story on mom‘s ipad.

She picks Hansel and Gretel with lights. Hansel and Gretel is her favourite fairy tale.

Er was eens…

Her mother takes the ipad and starts to read: “Once upon a time there was a poor woodcutter…”

The lights in her room slowly change colours and intensity according to the story.

It’s becoming blue and sad, because the woodcutter is very poor and the mood of the story is quite depressive. Susie gets immersed in the story quickly.

When Hansel and Gretel enter the forest the room of Susie went green. Just like the forest in the story.

But when her mother tells her about the witch and her big oven Susie gets a bit frightened. The room is filled with red light just like the inside of the oven in the story.

..en ze leefden nog

lang en gelukkig…

Luckily the story ends happily. Hansel and Gretel got home safe, and are now playing outside on the sun. “and they lived happily ever after.” The light is a warm yellow and Robin gives Susie a goodnight kiss.

Susie’s room slowly turns darker and darker, and Susie falls asleep...

...dreaming about playing with Hansel and Gretel on the sun in front of the house...

Creating such a video takes few hours, does not require any studio, actors, costumes nor special effects, and still demonstrates the situation with its UX in a rich way.

What I want you to remember about User Experience Design...

Recap

1.

UX design addresses

emotions & psychological needs

Recap

2.

UX is individual, dynamic

& context-dependent

Recap

3.

You need complete context

to empathise with users

Recap

4.

You can design only for UX

Recap

5.

Envision desired UX first,

then design, then evaluate

Recap

6.

UX ≠ UI

Petr Kosnar

IamPetr.com

@faxecz

Thank you!

Image references

1. http://www.flickr.com/photos/33797554@N00/2514177136/

2. http://www.flickr.com/photos/20158323@N04/3091394494/

3. http://www.flickr.com/photos/31028309@N00/4623964759/

4. http://www.flickr.com/photos/30481751@N04/3114215756/

5. -12. Photo by Berke Atasoy

13., 14. Illustrations by Eveline Brink