A crash course on human computer interaction, workshop based.

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

3. 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 ).

4. Chapter 1 Process driven 3
Session Number 1 2 3 4 5
ICEBREAKER BASIC 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 UI
3D 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 layout
Toyota 5 Why
GenchiGembutsu
Toyota 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 sort
A/B test
Eye Track (9-10)
Intro to prototyping SW.
Why it is useful.
Human Perception
Aesthetics (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.com
2.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=fVjpKcAcZnw
4. Berengueres, 2103, The Brown
Book of Design Thinking
5. 101 Things I Learned in Architecture
School
6 https://www.youtube.com/watch?
v=lHk7yRu7_K4
7 http://www.youtube.com/watch?
v=RlQEoJaLQRA
8 http://www.youtube.com/watch?
v=ppnRQD06ggY
9 http://www.youtube.com/watch?
v=tpLUkKN3AWE
10 http://www.youtube.com/watch?
v=EQPC9EvIb_s
11 http://www.youtube.com/watch?
v=VO6XEQIsCoM
12 http://blog.usabilla.com/7-must-see-
usability-testing-videos/
Axure,com
justinmind.com
balsamic.com

5. Chapter 1 Process driven 4
4
Session Number 6 7 8 9 10
ADVANCED TOPICS
Session Name Google Glass Wrist & Haptics, State-of-the-
art review
CAR UI
Serious 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
chars
Gorila 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)
Jawbone
Moto360 (29)
Harmful effects of blue light on retina
Philips Lumileds CRI quality of led
lights
Chrysler 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 Downloads
UX Review
Human Perception
Aesthetics
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_o
f_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=IaU6DWb0yzs
21 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=-
xmTTzCAALc
27 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/a
31. n/a
32. http://www.youtube.com/watch?
v=DtyfiPIHsIg&feature=kp
33. http://www.youtube.com/watch?
v=K1-gB1TaoUY
34. 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/

6. 5
Chapter 2 Design Thinking
“Design thinking helps you manage the design process”
via interaction-design.org designminds.org.au

7. Chapter 2 Design Thinking 6
There are eight design thinking tools worth mastering:
•GenchiGenbutsu (to get first hand info)
•Toyota’s Waste
•Kaizen
• Cross-functional teams
• The Five Why methodology
• The 5S
• The ideo layout method
• Product Innovation Matrix.
A hands-on over-view 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

8. Chapter 2 Design Thinking 7
force the students to be genchiGembutsu by giving them a
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.

9. 8
Chapter 3 Why Happy is Efficient Design
“You are responsible for
your own happiness”
(Except if you are a designer )

10. Chapter 3 Why Happy is Efficient Design 9
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
The famous Don Norman explains the idea in this TED talk
Why is is a design that makes ppl happy better?

11. Chapter 3 Why Happy is Efficient Design 10
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.

12. 11
Chapter 4 UXA
“Only an american would have the audacity to name an experiment af-ter
the film TheWizzard of OZ, confusing countless UX millennials...”

13. Chapter 4 UXA 12
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
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, by 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
Corel Wizz of Oz video is an example of humility/get-your-hands-
dirty/eat your-own-dog-shit

14. 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

15. 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

16. Chapter 6 GLASS 15
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

17. 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!

18. We printed a glass prototype to get a feel of the weight
Reflection on the future of Glass
Job’s take
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)
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

19. 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

20. Chapter 7 Wrist & Haptics & CAR UX 19
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-need
s-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)

21. Chapter 7 Wrist & Haptics & CAR UX 20
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)

22. 21
Chapter 8 Serious vs. Solemn
He is one of the most serious businessman ever
Dyslexic. Successful, and serious.

23. 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

24. Chapter 8 Serious vs. Solemn 23
or this one... http://www.youtube.com/watch?v=fSGaRVOLPfg
Chapter 8

25. Chapter 8 Serious vs. Solemn 24
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)
PLAYING IT SAFE
LESS RECALL OF
SAFETY INFORMA-TION

26. Chapter 8 Serious vs. Solemn 25

27. 26
26
Back to 1971
VA’s Value creation
model is =
high cost + thrill;
SouthWest’s is =
low cost + thrill

28. Not sponsored by Google
27
Chapter 9 Android Challenge
Android Challenge & Stu-dent
Prototypes

29. Chapter 9 Android Challenge 28
Who 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.
Gallery 9.1 Azza’s Wizzard of Oz Example
Be Together App by Azza

30. Chapter 9 Android Challenge 29
Gallery 9.2 Glass Prototypes Examples by Eman Rabiah
Glass Gym App
Gallery 9.3 Speeding Reporter by Nourah
Speeding app

31. Using prototyper in class changed everything. App by Mrs. Azza.
Wizzard of Ozz demo
30
30
Interactive 9.1 Glass Mecca visit app by Sarah Y.
Power Point

32. Chapter 9 Android Challenge 31
Gallery 9.4 Biz Card by Nourah
Lock Screen

33. Dr. Jose Berengueres joined UAE University
as Assistant Professor in 2011. He received
MEE from Polytechnic University of Catalo-nia
in 1999 and a PhD in bio-inspired robot-ics
from Tokyo Institute of Technology in
2007.
He has authored books on:
The Toyota Production System
Design Thinking
Human Computer Interaction
Women in UX
Business Models Innovation
He has given talks and workshops on Design
Thinking & Business Models in Germany,
Mexico, Dubai, and California.