Human Computer Interaction + User Experience


Published on

A crash course on human computer interaction, workshop based.

Published in: Design
1 Like
No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Human Computer Interaction + User Experience

  1. 1. 1 Chapter 1 Process driven “Being process oriented, not product driven is one of the most important and difficult skill to develop”
  2. 2. 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. 3. 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. 2. v=Os02K3VP8-I note on visualization: http:// t=260 * add 10 minutes per presentation to class time 3. v=fVjpKcAcZnw 4. Berengueres, 2103, The Brown Book of Design Thinking 5. 101 Things I Learned in Architecture School 6 v=lHk7yRu7_K4 7 v=RlQEoJaLQRA 8 v=ppnRQD06ggY 9 v=tpLUkKN3AWE 10 v=EQPC9EvIb_s 11 v=VO6XEQIsCoM 12 usability-testing-videos/ Axure,com
  4. 4. 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 v=d5_h1VuwD6g 17 pranav_mistry_the_thrilling_potential_o f_sixthsense_technology#t-669852 18 v=elXk87IKgCo 19 v=vG9vfjdcmRw 20 v=IaU6DWb0yzs 21 v=R2vBUP374DM 22 ion-glasses-first-optical-and-sun-smartglasses- that-interact-with-your-devices 24 trending/2013/09/19/ 25 v=Wl2LkzIkacM 26 xmTTzCAALc 27 v=BCPmAK8SmEc 28 qualcomms-toq-smartwatch-needs-more- time/ 29 v=0xQ3y902DEQ 30. n/a 31. n/a 32. v=DtyfiPIHsIg&feature=kp 33. v=K1-gB1TaoUY 34. paula_scher_gets_serious 31. Best of Smashing Magazine 2011/09/08/to-five-smashing-years-and- a-free-anniversary-ebook-treat/
  5. 5. 5 Chapter 2 Design Thinking “Design thinking helps you manage the design process” via
  6. 6. 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
  7. 7. 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.
  8. 8. 8 Chapter 3 Why Happy is Efficient Design “You are responsible for your own happiness” (Except if you are a designer )
  9. 9. 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?
  10. 10. 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.
  11. 11. 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...”
  12. 12. 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 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 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
  13. 13. 13 Chapter 5 Prototype or Die “This is what they use at Stanford in the HCI course” When Xavier started 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
  14. 14. 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
  15. 15. Chapter 6 GLASS 15 Overhead displays Pranav Mistry - Lesson about gorilla arms and again how won-derful things happen once we are not afraid of tinkering with things. of_sixthsense_technology#t-669852 Now lets play a little game, shall we? Let’s watch the following videos by order: 1. Glass Specs 2. Street View Demo (What we want it to be)
  16. 16. 3.Name Tag Glass App 4. Another video explains glass 5. Another Glass like implementation - ION Glass 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!
  17. 17. 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
  18. 18. 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
  19. 19. Chapter 7 Wrist & Haptics & CAR UX 19 Good design is easy to learn - more Don Norman BMW Haptics Research TOQ Review 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 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)
  20. 20. 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)
  21. 21. 21 Chapter 8 Serious vs. Solemn He is one of the most serious businessman ever Dyslexic. Successful, and serious.
  22. 22. Chapter 8 Serious vs. Solemn 22 And now a little experiment, which video is more serious about safety... Chapter 8
  23. 23. Chapter 8 Serious vs. Solemn 23 or this one... Chapter 8
  24. 24. 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
  25. 25. Chapter 8 Serious vs. Solemn 25
  26. 26. 26 26 Back to 1971 VA’s Value creation model is = high cost + thrill; SouthWest’s is = low cost + thrill
  27. 27. Not sponsored by Google 27 Chapter 9 Android Challenge Android Challenge & Stu-dent Prototypes
  28. 28. 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
  29. 29. 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
  30. 30. 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
  31. 31. Chapter 9 Android Challenge 31 Gallery 9.4 Biz Card by Nourah Lock Screen
  32. 32. 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.