Human-Computer Interaction 1. Introduction to HCI and UCD Dr. Sunyoung Kim School of Communication & Information Rutgers university
Today’s agenda Who are we? • Warm-up exercise • What is this course about? • Syllabus • Evaluation • Class policy • History of HCI • What is HCI? •
Instructor Sunyoung Kim Office: Room 329 in SC&I Email: sunyoung.kim@rutgers.edu Website: http://www.sunyoung.kim.org Office hours: Tuesday 1-2pm
Warm-up exercise Draw two different doors •
Warm-up exercise Volunteers? Send your drawings to sunyoung.kim@rutgers.edu •
Human-Computer Interaction
Human - Computer Interaction • Information input/output • Information stored in memory • Information processed and applied
Human - Computer Interaction • Desktop, Laptop, Tablet • Smartphone, Smart watch • Activity tracker, Wearables • Autonomous car, Dron …
Human - Computer Interaction
Interaction design cycle
Syllabus
Grading 30% Group project • 25% Individual project • 25% Quizzes • 20% Class participation • 10% Reading response - 5% Attendance - 5% Discussion and class activities -
Grading: reading response Due Tuesday midnight, before class • Reading is posted on the website - Submit a reading response (a summary of reading) to Canvas - discussion board Will be graded • 2 = good - 1 = partial - 0 = no submission -
Quiz (25%) 5 quizzes • Format: a number of short-answer questions • Schedule and grades • Date Weight Topics 2/8 20% HCI basics & Understanding users 2/22 20% UI Design principles 3/22 20% Prototyping and Visual Designs 4/19 20% Evaluating interfaces 4/26 20% All materials
Group project (30%) We will design a mobile application to tackle a real-world problem • Form a team of 3 students to work for a project throughout the • semester When forming a group, you want to make sure that your group • members have different skillsets (e.g., drawing, writing, programming, etc.)
Group project (30%) Schedule and grades • Stage Due ( by midnight) Assignment Weight 0 1/24 Submit team contact memo check 1 1/31 Project proposal 5% 2 2/7 User & task analysis 10% 3 2/28 Proposed solution, Workflow, Sketch and Low-fi 10% prototype - 3/7 Mid peer evaluation 5% 4 3/28 Hi-fi prototype 15% 5 4/25 User testing: Heuristic evaluation 5% 6 5/3 (in class) Final presentation 20% 7 5/9 Final report & video submission 20% - 5/9 Final peer evaluation 10%
Individual assignment (25%) We will prototype a smartwatch application to tackle a real-world • problem Schedule and grades • Stage Due (midnight) Weight Assignment 1 1/24 5% Project proposal (2.5%) 1/31 Proposal revision (2.5%) 2 2/14 15% User & task analysis (Persona) and Scenario (Storyboards) 3 3/7 15% Proposed solution & Workflow 4 3/21 15% Sketch & Low-fi prototype 5 4/11 10% User testing: Cognitive Walkthrough 6 4/19, 26 (in class) 20% Final presentation 7 5/5 20% Final submission
Class policies Be mindful during class time (aka no Facebook, Instagram, twitter, • snapchat, groupme, and so forth during class) Respect and collaborate with your team members • All assignments are due by midnight before the class • Assignments will not be accepted late - Notify two days in advance if you have to miss taking a quiz • Cheating (official) will get you an F in the course •
Reaching me Do not email me directly! Use Piazza • http://piazza.com/rutgers/spring2017/iti547230hci/home - If other students will benefit from an answer, ask publicly on Piazza. - If it’s personal, use Piazza private messaging feature Feel free to share your thoughts on other students’ questions - You can ask/answer questions anonymously -
Class websites Class materials- http://www.sunyoungkim.org/class/hci.html • Access to slides- ID: rutgers PW: hci Q&A- https://piazza.com/class/ixqfurlp5uz774 • Assignments, Grades & Discussion - • https://onlinelearning.rutgers.edu/canvas-login
Questions?
History of HCI
ENIAC (1943) The world's first all electronic numerical integrator and computer • Military use: calculates artillery-firing tables • 1,800 square feet of floor space, weighed 30 tons, consumed 160 • kilowatts of electrical power
Vannever Bush (1945) Identified the information storage and retrieval problem: new • knowledge does not reach the people who could benefit from it A call to action for making knowledge widely available • Conceiving Hypertext and the World Wide Web •
J.C.R. Licklider (1960) Foreseen “Man-Computer Symbiosis” • Interactive real time system and programming large scale information • storage and retrieval Natural language understanding • Facilitation of human cooperation in the design of systems • Combined speech recognition, hand-printed character recognition • Foreseen Graphical user interface (GUI) •
Ivan Sutherland (1963) Sketchpad: drawing package introduced many ideas/concepts found in • today’s interfaces Hierarchical structures defined objects and sub-objects • Object-oriented programming: master picture with instances • Constraints, icons, coordinates, copying, pen input, etc. • Clipping & zooming •
Douglas Engelbart (1964) The first mouse • “Develop new techniques, procedures, and systems that will better adapt people’s basic information-handling capabilities to the needs, problems, and progress of society.”
Xerox Star (1981) First commercial personal computer • designed for business professionals First system based upon usability • engineering WYSIWYG • $15,000 •
Apple Macintosh (1984)
And nowadays…
We are moving away from traditional ways of interacting with computing devices.
Reading Read the paper and post your response to Canvas
What is HCI?
Human-Computer Interaction
What is HCI? The study of how humans interact with computer systems: a broad • term that covers all aspects of the ways in which people interact with computing systems The design of a user interface (UI) to allow a user to interact with • computer systems with minimum effort and frustration Human- Computer Computer Interaction Science Psychology Design
What is HCI? HCI is concerned with the design, evaluation and implementation of • interactive systems for human use and with the study of major phenomena surrounding them. (from ACM SIGCHI Curricula for Human-Computer Interaction, 1992) Focus is on the users’ goals and tasks (User-Centered Design • approach)
User-Centered Design (UCD)
User-Centered Design (UCD)
User-Centered Design (UCD) “Users in the loop”: To involve your users all throughout the project Who are users? • How do we involve users? •
User-Centered Design (UCD) Six “mantras” of UCD Understand your users (needs, ‘wants’, goals, tasks, context, etc.) • Design based on the data collected from studying users and their • experiences You, the designer, are not the users! • Prototype • Evaluate • Iterate, iterate, and iterate!!! •
Why UCD?
Why UCD?
Why UCD?
Interface Bloat
Interface Bloat
User-Centered Design (UCD) Trying to satisfy the needs of all users may mean that you fail to satisfy the needs of any one user
User-Centered Design (UCD)
Why is User-centered approach important? We interact with computing systems • in every facet of our everyday lives When interacting with computing • systems, they do it through a user interface How a user interacts with a computer • is different for each system People do not accept products with • poor interfaces If a system doesn’t work as expected, • it is not a user’s fault but a designer’s fault!
If you are good at HCI You can become a(n): • Interaction designer • User Experience designer/researcher (UX) • Product Manager (PM) • Information Architect (IA) • Usability Specialist • And many more…
Individual assignments
Individual assignments 25% of the total grade • We will prototype (proof-of-concept) a smartwatch application to • deal with an interesting real-world problem
Smartwatch can let you: 1. Get directions 4. Stay informed (both external and on-body data) 2. Connect to your phone from afar 5. Play music, book flights, shop, and more 3. Use voice search 6. Respond to message on the fly Images from https://www.verizonwireless.com/archive/mobile-living/tech-smarts/android-smartwatch-features/
Individual assignments: themes Real-time data collection & retrieval on the go • Facilitating physical space and location • Connect body movement data with other information • Healthcare & wellness • Environmental protection • Mutual communication & interaction • Anything else that is fun and useful • Be creative! •
Individual assignments
Individual assignments
Recommend
More recommend
