Human Computer Interaction + User Experience Crash Course

HCI UX

JOSE BERENGUERES

A GRADUATE COURSE BOOK

+

1

Chapter 1 Process driven

“Being process oriented, not product driven is one of the most important and difficult skill to develop”

2

2

The Marshmallow workshop

Ice breaker. This 18 minute workshop invented by Peter Skillman and popularized by Tom Wujec, can help you understand that when teamwork is involved group IQ is unrelated to the sum of individual IQ. As a UX Engineer you will never work alone so teamwork skills and empathy are a multiplier to your HCI/UX know-how. ( See also Sharon Vosmek talk, Astia, CEO ).

3 Chapter 1 Process driven Session Number 1 2 3 4 5

ICEBREAKER BASIC HCI & UXBASIC HCI & UXBASIC HCI & UXBASIC HCI & UX

Session Name Marshamllow Workshop (1)

Design Thinking Microwave Workshop (4)How Prototyping helps you think

UXA Strategies Prototyper Tools

Homework name Design a pronation tracker shoe/insole

Complete microwave in teams

- Prototype an iPad app

Objective Practice TeamWork Skills Train students to be genchi gembutsu by giving them incomplete homework information

Practice 3D mockups / Kitchen UI3D as a language

Master prototyping

Presentation Time* present shoe design/ prototype

Microwave mock ups

Key Working Concepts Being process oriented, not product driven is one of the most important and difficult skill to develop. (5)

Brief review of Design Thinking tools:Ideo workshop layoutToyota 5 WhyGenchiGembutsuToyota Kaizen (4)

Don Norman; Happy Brain = Better UX, IQ (7)Functional Product Matrix (4)Empathy for the user

Review pevious state of the art, motivate students to better appreciate Prototyper SW. Tools: Corel Wizzard of Oz (8)Fruit Think Aloud Protocol(12)Card sortA/B testEye Track (9-10)

Intro to prototyping SW. Why it is useful.

Human PerceptionAesthetics (20 minutes per session)

Color theory (2) Color theory (3)Sketching 101. vertex crossing, cube (5)

Color theory (6)Sketching 101. Simple 3D. (5)

Paradox of choice (11)

Bivliography 1. marshmallowchallenge.com2.https://www.youtube.com/watch?v=Os02K3VP8-I

note on visualization: http://www.youtube.com/watch?v=AdSZJzb-aX8#t=260

* add 10 minutes per presentation to class time

3. https://www.youtube.com/watch?v=fVjpKcAcZnw4. Berengueres, 2103, The Brown Book of Design Thinking5. 101 Things I Learned in Architecture School

6 https://www.youtube.com/watch?v=lHk7yRu7_K47 http://www.youtube.com/watch?v=RlQEoJaLQRA

8 http://www.youtube.com/watch?v=ppnRQD06ggY9 http://www.youtube.com/watch?v=tpLUkKN3AWE10 http://www.youtube.com/watch?v=EQPC9EvIb_s11 http://www.youtube.com/watch?v=VO6XEQIsCoM12 http://blog.usabilla.com/7-must-see-usability-testing-videos/

Axure,com justinmind.combalsamic.com

4

Chapter 1 Process driven 4

Session Number 6 7 8 9 10

ADVANCED TOPICSADVANCED TOPICSADVANCED TOPICSADVANCED TOPICSADVANCED TOPICS

Session Name Google Glass Wrist & Haptics, State-of-the-art review

CAR UISerious vs. Solemn Design

WEB UX TIPS FINAL PROJECTS PRESENTATION

Homework name Glass prototype -

Objective Learn UX nitty-gritty of web design

your project

Presentation Time* Demo your app prototype Demo your Glass prototype

Key Working Concepts Tom Chi glass proto (16)Intro to glass (17-22)Micro Fatigue - Why or why not will it succeed.Friction as a feature, 140 charsGorila Arms (17)

How sense of touch works vibration(24)Don Norman on teaching twice(25)Monk learns book (26)BMW Haptics? What is the diff between hyundai and BMW? (27)Qualcomm Toq (28)JawboneMoto360 (29)

Harmful effects of blue light on retinaPhilips Lumileds CRI quality of led lightsChrysler Dashboard design report (31) TOYOTA MIDDLE EAST WEBSITE REVIEW (single item lists)CARPOOL UX REVIEW

Virgin america (32) Emirates video (33)Paula Scher talk (34)

book review (32) Number of DownloadsUX Review

Human PerceptionAesthetics

Golden ratio in logos. Apple.

Videos & papers 16 http://www.youtube.com/watch?v=d5_h1VuwD6g

17 http://www.ted.com/talks/pranav_mistry_the_thrilling_potential_of_sixthsense_technology#t-669852 18 http://www.youtube.com/watch?v=elXk87IKgCo 19 http://www.youtube.com/watch?v=vG9vfjdcmRw

20 http://www.youtube.com/watch?v=IaU6DWb0yzs21 http://www.youtube.com/watch?v=R2vBUP374DM 22 https://www.indiegogo.com/projects/ion-glasses-first-optical-and-sun-smartglasses-that-interact-with-your-devices

24 http://www.slate.com/blogs/trending/2013/09/19/25 http://www.youtube.com/watch?v=Wl2LkzIkacM 26 http://www.youtube.com/watch?v=-xmTTzCAALc27 http://www.youtube.com/watch?v=BCPmAK8SmEc 28 http://allthingsd.com/20131226/qualcomms-toq-smartwatch-needs-more-time/29 http://www.youtube.com/watch?v=0xQ3y902DEQ

30. n/a31. n/a32. http://www.youtube.com/watch?v=DtyfiPIHsIg&feature=kp33. http://www.youtube.com/watch?v=K1-gB1TaoUY34. http://www.ted.com/talks/paula_scher_gets_serious

31. Best of Smashing Magazine www.smashingmagazine.com/2011/09/08/to-five-smashing-years-and-a-free-anniversary-ebook-treat/

5

Chapter 2 Design Thinking

“Design thinking helps you manage the design process”

via interaction-design.org designminds.org.au

There are eight design thinking tools worth mastering:

GenchiGenbutsu (to get first hand info),

Toyota Waste,

Kaizen,

Cross-functional teams,

The Five Why methodology,

The 5S,

The ideo layout method,

and the Product Innovation Matrix (next chapter).

A hands-on overview can be found in the brown book of design (4) by the same author.

Smart insole/shoe homework

Smart shoe Prototype at KHALIFA Univeristy Lab, Abu Dhabi

However, the best way to learn this skills is to practice. Once these seven concepts have been introduced, an appropriate home-work for the students is to team up and prototype a smart insole/shoe that helps people walk properly by avoiding pronation. (one of the authors lab pet projects). The point of the workshop is to force the students to be genchiGembutsu by giving them a

6 Chapter 2 Design Thinking

vague brief but also letting them know that there is a lot of infor-mation available sitting in the lab. Upon request I would give stu-dents a full working paper...

Mobile thinking board of team A when microwave workshop.

Student reflection

One interesting thing a team did is to set up their own design thinking style mobile whiteboard.

7 Chapter 2 Design Thinking

8

Chapter 3 Why Happy is Efficient Design

(Except if you are a designer)

“You are responsible for your own happiness”

In this chapter we cover how design that makes you happy is eas-ier to use simply because the fact that a happy brain has a higher IQ.

Microwave Workshop

This Workshop purpose is to practice dt skills such as 3D proto-typing as a thinking language and Leo Tshirsky’s Product innova-tion Matrix (IM). A proper Matrix should clarify why people buy microwaves and point to new innovation directions.

Outcomes & Student Reflection

9 Chapter 3 Why Happy is Efficient Design

The famous Don Norman explains the idea in this TED talk

Why is is a design that makes ppl happy better?

These two prototypes show particularly little empathy for the user: small door and obstructed access. This was a great excuse to focus on empathy for the user. In the next iteration a team-designed a microwave for blind. Another, made a microwave with an interior disposable jacket, so the microwave does not need to be cleaned ever.

10 Chapter 3 Why Happy is Efficient Design

11

Chapter 4 UXA

“Only an american would have the audacity to name an experiment after the film TheWizzard of OZ, confusing countless UX millennials...”

The A in UXA means Analysis. However, When we design a web-site, an mobile game, an exam or a book like this... How can we know who good is our the design? Here come some tools:

Eye Tracking is a popular tool

http://www.youtube.com/watch?v=tpLUkKN3AWE

http://www.youtube.com/watch?v=EQPC9EvIb_s

Other must know tools:

Fruit Think Aloud Protocol (To know what the speaker thinks)

Card sort (To cluster)

A/B test (Amazon/Danny Choo)

The paradox of choice - Barry Schwartz

http://www.youtube.com/watch?v=VO6XEQIsCoM

In this talk we introduce the concept of less is more, and we will connect it to the central concept of micro decisions and micro fatigue (decision fatigue). This concept will help you rational-ize why some designs are superior than others, and its connected to Don Norman’s happy theories.

Dilbert educates about the phenomenon known as feature creep

12 Chapter 4 UXA

Corel Wizz of Oz video is an example of humility/get-your-hands-dirty/eat your-own-dog-shit

13

Chapter 5 Prototype or Die

“This is what they use at Stanford in the HCI course”

When Xavier started

justinmind.com in Barcelona a decade ago, I thought, Why

would anyone want to make a fake pro-totype of a website? What a dumb

startup. I was wrong. Justinmind proto-typer is today the global leader followed by Axure. If you are a student you can

send him an email, he will let u use the pro version

The Swedish Isabelle Olson (up), was a key HW/UV devel-oper of Glass. Amanda Rosen-berg came up with the idea of hot command “OK GLASS” the parts cost about $100 ac-cording to some sources. Photo: Fastcompany.

14

Chapter 6 GLASS

Overhead displays

http://www.youtube.com/watch?v=d5_h1VuwD6g

Pranav Mistry - Lesson about gorilla arms and again how won-derful things happen once we are not afraid of tinkering with things.

http://www.ted.com/talks/pranav_mistry_the_thrilling_potential_of_sixthsense_technology#t-669852

Now lets play a little game, shall we? Let’s watch the following videos by order:

1. Glass Specs

http://www.youtube.com/watch?v=elXk87IKgCo

2. Street View Demo (What we want it to be)

http://www.youtube.com/watch?v=vG9vfjdcmRw

15 Chapter 6 GLASS

3. Name Tag Glass App

http://www.youtube.com/watch?v=pVwBXr_nU9Q

4. Another video explains glass

http://www.youtube.com/watch?v=IaU6DWb0yzs

5. Another Glass like implementation - ION Glass

https://www.indiegogo.com/projects/ion-glasses-first-optical-and-sun-smartglasses-that-interact-with-your-devices

A restrospective view of telephone UX - Calling as it was done in the XIX century. (Artwork by: Roy Lichtenstein)

16

16

Oh JEFF I LOVE

YOU, BUT... USING BOTH HANDS TO CHAT IS SO... UN-FASHIONABLE!

We printed a glass prototype to get a feel of the weight

Reflection on the future of Glass

The second video is inspiring but the 4th one is not: “But the smart ones can still look only at the 4th video and see the potential of the second”... (paraphrased from Steve Jobs in the film Pixar Story, 2007)

Job’s take

to decide whether or

not glass will become main-stream look at microfatigue pat-terns. Once you instagram using

glass, going back to using your fingers on the smart phone feels so yester-

day and clumsy... then I knew!

17

17

A BMW haptics engineer tries the sense of touch of a paddle shift. Photo: BMW

18

Chapter 7 Wrist & Haptics & CAR UX

The Luxury perception is in her hands

Good design is easy to learn - more Don Norman

http://www.youtube.com/watch?v=Wl2LkzIkacM

BMW Haptics Research

http://www.youtube.com/watch?v=BCPmAK8SmEc

TOQ Review

http://allthingsd.com/20131226/qualcomms-toq-smartwatch-needs-more-time/

JAWBONE UP

Did you know that Jawbone does not make any money with its wristband? The bullk of the money comes from the speakers busi-ness. (Feroz Sanaulla)

MOTO 360 Review

http://www.youtube.com/watch?v=0xQ3y902DEQ

CAR UX - What is wrong with this Hyundai UX?

I spend 10% of my awake life or 100km a day inside a Hyundai SantaFe. Tell me whats wrong with this Dashboard designed in 2009 and why I hate the lead UX designer of Hyundai. (Note: Hyundai means modern in Korean language)

My Dashboard at night.

(solution in next page)

19 Chapter 7 Wrist & Haptics & CAR UX

Cardinal sins of Hyndai Santafe 2012 model:

BAD:

1. Non adjustable intensity

2. It has been found that not only UVA light but, plain blue light damages your retina.

3. The eye is less sensitive to the blue light (rather htan red or green) so more photons are needed to convey the same light intensity.

4.Big reflection increases eye strees with zero information added.

GOOD:

5. While blue light makes you feel cooler and soother

6.Actually the first time I saw the dash board I liked the bluish color. I was naive.

Notes:

If you look at serious brands like VW, Mercedes and Audi you will not see this kind of UX mistakes.

An ex-audi designer is now president of KIA and Hyundai.(2014)

20 Chapter 7 Wrist & Haptics & CAR UX

Chapter 8- Serious vs. Solemn

21

Chapter 8 Serious vs. Solemn

Dyslexic. Succesful, and serious.

He is one of the most serious businessman ever

Chapter 8

Chapter 8 Serious vs. Solemn 22

And now a little experiment, which video is more serious about safety... http://www.youtube.com/watch?v=DtyfiPIHsIg&feature=kp

Chapter 8

Chapter 8 Serious vs. Solemn 23

or this one... http://www.youtube.com/watch?v=fSGaRVOLPfg

24

Chapter 8 Serious vs. Solemn 24

Who is really committed to safety?

+ SOLEMN DESIGN

+ SERIOUS ABOUT SAFETY EDUCATION( as defined by P. Scher)

Most youngsters oppose fun

to serious, and confuse sol-emn with effective. Let’s see.

What was the purpose of the video.I will come back after one

month and ask them what they do remember about each

video

+ HAPPY DESIGN(D. Norman)

- HAPPY(D. Norman Axis)

MORE RECALL OF SAFETY INFORMA-TION (x4 times)

LESS RECALL OF SAFETY INFORMA-TION

PLAYING IT SAFE

Chapter 8 Serious vs. Solemn 25

26

26

Back to 1971VA’s Value creation

model is = high cost + thrill; SouthWest’s is =low cost + thrill

Not sponsored by Google

27

Chapter 9 Android Challenge

Android Challenge & Stu-dent Prototypes

Who of you Wants an A+ ?

Everybody raised their hand. Ok - I said - Any of you who makes an app and gets more than 100 downloads. Gets an A+. - No one will manage to get even close to 100 - I thought.

I was wrong. Three weeks later 5 students have reached the mark. Another student came back one day with a big smile on his face. What happened? - I asked - Look! The municipality gave me a “Appreciation Certificate” - I prototyped a “teaboy” demo for iPad with Prototyper, and they loved it. Obviously, I had underestimated the potential of my students. But, it was the use of prototyper in class that changed the mindset of the stu-dents, and pushed them to make real things. It made all the dif-ference.

Using prototyper in class changed everything. App by Mrs. Azza.

28 Chapter 9 Android Challenge

Be Together App by Azza

Gallery 9.1 Azza’s Wizzard of Oz Example

29 Chapter 9 Android Challenge

Glass Gym App

Gallery 9.2 Glass Prototypes Examples by Emy Rabaiha

Wizzard of Ozz demoSpeeding app

Gallery 9.3 Speeding Reporter by Nourah

30

30

31 Chapter 9 Android Challenge

Lock Screen

Gallery 9.4 Biz Card by Nourah

Power Point

Interactive 9.1 Glass Mecca visit app by Sarah Y.