User Interface Design

1. User Interface Design IS 403 – Fall 2013 Shaun Kane Class 1: Introduction

2. Today Introductions Syllabus and course policies What is HCI? What is design? What is good design?

3. Introductions

4. Introductions: About me This is my cat, Abe Third year at UMBC PhD at University of Washington in 2011 Undergrad at University of Massachusetts incomputer science

5. My experience Writing HTML since ~1996 Worked at Filament Group, Microsoft, Intel Designed many, many user interfaces and prototypes (see http://shaunkane.me)

6. Google Glass • An experiment • How is this useful in class? • What is it useful for? • Education apps? • Social contract • Won’t record in class without asking first • Highest grade on quizzes gets to try it 

7. Introductions: About you Name Major Year How you spent your summer Your career goal(s) A particular skill you’re really good at

8. What I did this summer

9. Syllabus / Course Info

10. This class My first time teaching this class! Will check in periodically for feedback from class (or use anon feedback form on web site) No textbooks, but need materials Materials from Amy Hurst

11. Checklist • Syllabus • Participation form • Course web site: • http://bitly.com/umbcis403 • Course calendar • Blackboard • Extra credit

12. Extra credit http://doodle.com/bp26ycr5uzreev55 9/3, 9/5, 9/10, 9/12: Summarize readings in a 5-10 minute PPT 9/17 (2 slots): Take notes on student feedback

13. What you will learn • Design and Engineering • design processes • user interface toolkits • building useful and usable things! • Science • conduct usability evaluations • empirical methods, how to handle data • use data in design • Art • an eye for the good, the bad, and the not so good • what to do about them • Technology: as a means to an end (take IS448 to become a web hacker)

14. Why learning this is important You will likely find yourself involved in the creation of an interactive system, and will want to do it well You will be working with people with different training than you and need to understand their processes Integrating design, research, and evaluation key to many IS careers

15. Why have class? Why not just read a book? Why not just study online / take a MOOC?

16. Why have class? Curation: I have experience in design, can show you where to look Assignments: Learning by doing is key (and it helps to have guidance) In-class interactions: Working with others on the same thing Learn by doing: make things, fail, gather data, repeat

18. Hard work • This class is difficult • Simply completing the assignment as specified is a B • As are for work that is well crafted • Show evidence of real thought, testing, revising

19. Balancing tech and design • Before we can build things, we need to know what to build • Design methods (brainstorming, user research, prototyping) • But technology’s capabilities determined by underlying infrastructure • Solution: we’ll bounce back and forth

20. Who are you? A hacker? An artist / creative type? A manager / people person? Something else?

21. For next time Complete A0: Sign up form Reading: Krug, Chapters 0-2 Get a notebook and writing tools Now: A little about HCI and design…

22. Introduction to HCI and Design

23. Vocabulary fun • Lots of new terms • HCI • HCC • Design • User-centered design

24. What is HCI? (or HCC) Human computer interaction;

25. What is HCI? “Design, evaluation and implementation of interactive computing systems for human use and the study of the major phenomena surrounding them.” –Special Interest Group on Human-Computer Interaction (SIGCHI) of the Association for Computing Machinery (ACM)

26. Interactive computing system?

27. Interactive computing systems Single PC - capable of displaying web pages Embedded devices, for example in cars and in cell phones Handheld Global Positioning Systems for outdoor activities Software that allows collaboration

28. BehavioralScience HCI is Interdisciplinary Design HCI Computer Science

29. HCI is Interdisciplinary Interdisciplinary and eclectic, building on a dozen different disciplines…

30. Fields that HCI builds on • Computer Science • Implementation of website or other interface • Engineering • Faster, cheaper equipment • Ergonomics • Design for human factors • Graphic design • Visual communication • Technical writing • Textual communication

31. Fields that HCI builds on, continued • Linguistics, artificial intelligence • Speech recognition, natural language processing • Cognitive psychology • Perception, memory, mental models • Sociology • How people interact in groups • Anthropology • Study of people in their work settings HCI is for misfits

32. What skills does an HCI expert have?

33. Design

34. What is design? Practical, aesthetic considerations Usability – how well, how efficiently it works Understanding audience Solving a Problem

35. Is design art?

36. Design IS art… Design IS NOT art…

37. Is design subjective?

39. Is design subjective? http://www.google.com/trends/

40. Is design SCIENCE?

41. Is design SCIENCE? http://mrgan.tumblr.com/post/53308781143/wrong

42. Balancing science and intuition • Use known facts about human cognition, perception, ability • e.g., rule of thirds, 7 ± 2 • Use empirical methods to test hypotheses, evaluate, and iterate • Design is not magic

43. Who are designers?

44. Quotes on design “Design is not just what it looks like and feels like. Design is how it works.” - Steve Jobs

45. Quotes on design “Design is a plan for arranging elements in such a way as best to accomplish a particular purpose.” – Charles Eames

46. Quotes on design “Engineering, medicine, business, architecture and painting are concerned not with the necessary but with the contingent - not with how things are but with how they might be - in short, with design.” – Herb Simon

47. Design process

48. (One) Design process Make something Done!

49. How do we know what to build? requirements User research Make Done!

50. How do we come up with ideas? many failed ideas User research Ideate Make Done! the best ideas