Post on 21-Oct-2014
description
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.