Your SlideShare is downloading. ×
Human Computer Interaction + User Experience
Human Computer Interaction + User Experience
Human Computer Interaction + User Experience
Human Computer Interaction + User Experience
Human Computer Interaction + User Experience
Human Computer Interaction + User Experience
Human Computer Interaction + User Experience
Human Computer Interaction + User Experience
Human Computer Interaction + User Experience
Human Computer Interaction + User Experience
Human Computer Interaction + User Experience
Human Computer Interaction + User Experience
Human Computer Interaction + User Experience
Human Computer Interaction + User Experience
Human Computer Interaction + User Experience
Human Computer Interaction + User Experience
Human Computer Interaction + User Experience
Human Computer Interaction + User Experience
Human Computer Interaction + User Experience
Human Computer Interaction + User Experience
Human Computer Interaction + User Experience
Human Computer Interaction + User Experience
Human Computer Interaction + User Experience
Human Computer Interaction + User Experience
Human Computer Interaction + User Experience
Human Computer Interaction + User Experience
Human Computer Interaction + User Experience
Human Computer Interaction + User Experience
Human Computer Interaction + User Experience
Human Computer Interaction + User Experience
Human Computer Interaction + User Experience
Human Computer Interaction + User Experience
Human Computer Interaction + User Experience
Human Computer Interaction + User Experience
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Human Computer Interaction + User Experience

650

Published on

A crash course on human computer interaction, workshop based.

A crash course on human computer interaction, workshop based.

Published in: Design
2 Comments
1 Like
Statistics
Notes
No Downloads
Views
Total Views
650
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
14
Comments
2
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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 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 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
  • 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 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/
  • 5. 5 Chapter 2 Design Thinking “Design thinking helps you manage the design process” via interaction-design.org designminds.org.au
  • 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. 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 Chapter 3 Why Happy is Efficient Design “You are responsible for your own happiness” (Except if you are a designer )
  • 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. 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 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. 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
  • 13. 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
  • 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. 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
  • 16. 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!
  • 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. 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. 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)
  • 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 Chapter 8 Serious vs. Solemn He is one of the most serious businessman ever Dyslexic. Successful, and serious.
  • 22. 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
  • 23. Chapter 8 Serious vs. Solemn 23 or this one... http://www.youtube.com/watch?v=fSGaRVOLPfg Chapter 8
  • 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. Chapter 8 Serious vs. Solemn 25
  • 26. 26 26 Back to 1971 VA’s Value creation model is = high cost + thrill; SouthWest’s is = low cost + thrill
  • 27. Not sponsored by Google 27 Chapter 9 Android Challenge Android Challenge & Stu-dent Prototypes
  • 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. 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. 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. Chapter 9 Android Challenge 31 Gallery 9.4 Biz Card by Nourah Lock Screen
  • 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.

×