CS3205, HCI in Software Development Course Introduction Summer 2012

There must be a problem because… SIS

What’s the Course About? In one sentence: Human-computer interaction (HCI) and user-centered design in the context of SW engineering Note the target audience: Students who may be involved in SW development HCI is important to others: HW designers and engineers, Web designers, psychologists, etc. But CS3205 targets SW development

What is HCI? More soon… Human-Computer interface Where people “meet” or come together with machines or computer-based systems Physical interface (e.g. buttons, screens, menus, etc.) Logical interface The model a system presents a user Set of tasks available and how they’re organized

From the SIGCHI Website HCI is… An inter-disciplinary discipline (engineering, CS, psychology, graphic design, ergonomics, etc.) Concerned with design, evaluation, and implementation Addresses people’s needs, capabilities, limitations

SIGCHI curriculum definition site Human-computer interaction is a discipline concerned with the design, evaluation and implementation of interactive computing systems for human use and with the study of major phenomena surrounding them.

What is an interface? ?

What is the User Interface? Is it the screen layout? Is it the documentation? Is it the interaction devices and techniques? Is it what the application does? Is it the help system? Is it the code?

Evolution of HCI ‘interfaces’ 50s - Interface at the hardware level for engineers - switch panels 60-70s - interface at the programming level - COBOL, FORTRAN 70-90s - Interface at the terminal level - command languages 80s - Interface at the interaction dialogue level - GUIs, multimedia 90s - Interface at the work setting - networked systems, groupware 00s - Interface becomes pervasive RF tags, Bluetooth technology, mobile devices, consumer electronics, interactive screens, embedded technology, information appliances Late 00s – computing becomes more ubiquitous Internet use becomes the norm Web applications become richer. “The Cloud.” Mobile devices like smartphones & tablets become mainstream

User Execute Tasks, Interpret Information or Results HCI is at the interface between a human and a computer performing a task Task - write document, calculate budget, filter email, register for course, find best route, ... Task might be work, play, learning, communicating, etc etc Essential user activities: Express task (execution) Interpret results (evaluation) Not just on the desktop! (How many computers in your family home, including the garage?)

HCI: Wide Range of Concerns Make an interactive system be useful for a task, and support that task effectively Easy to use, easy to learn, avoid errors Must understand users, understand users’ tasks Create a usable logical interface A user’s conceptual model of the system Overall design of how we interact Physical and low-level design Physical interface: buttons, keys, screens SW interface: menus, screens, colors Evaluating usability During development, after completion

High-level Terms HCI, CHI Usability User-centered Design An approach to design (SW, Web, other) that involves the user a great deal, in many phases Interaction Design (ID) Something different than HCI? Maybe. Our current textbook is an “ID” text

Usability A definition from ISO standard 9241 Effectiveness: The extent to which a product can be used by specified users to achieve specified goals with effectiveness, efficiency and satisfaction in a specified context of use. Effectiveness: accuracy and completeness in achieving goals Efficiency: resources expended… Satisfaction: comfort, acceptability (happiness, pleasure)

Discussion Effectiveness, efficiency and satisfaction: Are all of these equally important? All the time?

What is User-Centered Design? An approach to UI development and system development. Focuses on understanding: Users, and Their goals and tasks, and The environment (physical, organizational, social) Pay attention to these throughout development

ISO on User-centered Design ISO 13407 describes human-centered design processes for interactive systems Principles of human-centered design: Active involvement of users Appropriate allocation of function between user and system Iteration of design solutions Multidisciplinary design teams

ISO on User-centered Design (2) Essential activities in human-centered design: Understand and specify the context of use Specify the user and organizational requirements Produce design solutions (prototypes) Evaluate designs with users against requirements

Are You Experienced? (in UC Design, I mean) Think about a significantly complex software project you’ve been involved in Work, research, CS3240, etc. Did it seem like an example of user-centered design? How did it, or how did it not?

What is interaction design? Designing interactive products to support people in their everyday and working lives Sharp, Rogers and Preece (2002) The design of spaces for human communication and interaction Winograd (1997)

Goals of interaction design Develop usable products Usability means easy to learn, effective to use and provide an enjoyable experience Involve users in the design process

Unclear about what ID is? Not surprising! We’ll read: What is Interaction Design and What Does It Mean to Information Designers? by Craig Marion http://www.chesco.com/~cmarion/PCD/WhatIsInteractionDesign.html and From Computing Machinery to Interaction Design by Terry Winograd http://hci.stanford.edu/%7Ewinograd/acm97.html

From HCI to Interaction Design Human-computer interaction (HCI) is: “concerned with the design, evaluation and implementation of interactive computing systems for human use and with the study of major phenomena surrounding them” (ACM SIGCHI, 1992, p.6) Interaction design (ID) is: “the design of spaces for human communication and interaction” (Winograd, 1997) One distinction: more application areas, more technologies and more issues to consider when designing ‘interfaces’

Relationship between ID, HCI and other fields Academic disciplines (e.g. computer science, psychology) Design practices (e.g. graphic design) Interaction Design Interdisciplinary fields (e.g HCI, CSCW)

Relationship between ID, HCI and other fields Academic disciplines contributing to ID: Psychology Social Sciences Computing Sciences Engineering Ergonomics Informatics

Relationship between ID, HCI and other fields Design practices contributing to ID: Graphic design Product design Artist-design Industrial design Film industry

Relationship between ID, HCI and other fields Interdisciplinary fields that ‘do’ interaction design: HCI Human Factors Cognitive Engineering Cognitive Ergonomics Computer Supported Co-operative Work Information Systems

What do professionals do in the HCI or ID business? interaction designers - ?? usability engineers - ?? web designers – (we know this one!) information architects - ?? user experience designers - ??

What do professionals do in the HCI or ID business? interaction designers - people involved in the design of all the interactive aspects of a product usability engineers - people who focus on evaluating products, using usability methods and principles web designers - people who develop and create the visual design of websites, such as layouts information architects - people who come up with ideas of how to plan and structure interactive products user experience designers - people who do all the above but who may also carry out field studies to inform the design of products

Reminder: What is involved in the process of UC/ID design Identify needs and establish requirements Functionality, goals, tasks Develop alternative designs Build interactive prototypes that can be communicated and assessed “test”, refine, iterate Evaluate what is being built throughout the process (This is what you’ll do this semester!)

Rules about Developing for Users Rule #1: All users are not like you. Rule #2: All users are not alike. Consider: Physical & cognitive abilities & special needs Personality & culture Knowledge & skills Motivation

Class Activity Question: Think-Pair-Share: Pairs write down differences Pairs merge results Instructor calls on pairs to share answers Question: Think about a hard-to-use software product (or computer-based system). In what way does it have poor usability? General problems Specific examples

Bad Interfaces, Summer 2012 Collab: scroll bars in scrollbars SIS: not intuitive, steep learning curve, hard to find where things are, timeout, SB in SB, can’t use back button, some tasks req. >1 window Photoshop: very hard for novice, buttons not intuitive (what do they represent), easy to mess up selecting pixels/colors Mathcad: not intuitive, too much info, user not directed to what’s needed. Not clear what icons do

Bad Interfaces, Summer 2012 Word: has unnecesary commands, too many buttons, can’t control indentation, corrects when you don’t want it to, format of pasted text doesn’t match doc Blender: (image/graphics app) not intuitive, hard to figure out what you want to do, how to do it Sony alarm clock: setting time, network/GPS/something, time off by 5 minutes

Bad Interfaces, Summer 2012 Blackberry: slow to respond Android phone: slow, IMs delayed, easy to hit buttons on screen Emacs: hard to switch windows, scroll too far problem

Bad Interfaces, Spring 2012 Windows Mobile 6.1 Small buttons, inaccurate key presses Made for stylus (not used often) Remotes for DirectTV, Satelite Too many buttons Needs shortcuts for frequents All first person shooters Motion sicknesss Standalone GPS devices Onscreen keyboards don’t match conventions Too many clicks to do a task

Bad Interfaces, Spring 2012 Playstation’s DVD functionality Using controller (w/o remote), wrong button sends you out of DVD mode, back to main Google’s multiple account signin Can’t see all of them, use temp account Doesn’t show all information. Limited. Virtual Box Hard to share files between host and guest Facebook newsfeed auto update Frequent updates move you back to top (even when scrolling)

Bad Interfaces, Spring 2012 Web interfaces with long list of data Need to click through all pages to find something Smartphone keyboards Qwerty may not be best, button size, autocorrection Link in facebook app doesn’t take you to specific link but to top-level page Can’t like a specific comment. Entering text with a game controller or without a keyboard

Bad Interfaces, Spring 2011 IBCM (web-based version) SMOK Hard to learn. Can’t always right- or left-click Scroll disabled depending on Zoom level Canvas won’t resize. Looks cluttered. Lines don’t move with objects when you move them. IBCM (web-based version) Freezes if stuck in a loop. Must restart browser (not in Chrome)

Voice mail or audio-based systems Not visual. Slower to navigate. UVa registrar: listen to long set of options. Not able to skip if you know what to do Not clear / visible what commands are Voice recognition helps, but pronouncing international names is hard for many Facebook app for Blackberry Scroll down through notifications, but must scroll all the way back to top Look at photos from the beginnning (always) To scroll up in message, must go to the bottom and then scroll up Etc. etc. etc.

World of Warcraft Emacs Abilities on action bars that cover bottom and right side of screen. Must scroll quickly Health info in two different places Must look in many places to be efficient No effective key mapping Emacs Hard to learn key-strokes Relies on key-strokes, not visual Interaction between undo and redo

Blender (3D animation modeling…) Word 2008 (Mac) Unstable, location/use of toolbars Adobe CS Suite Undo in photoshop is just a toggle Others more like undo/redo Unstable Blender (3D animation modeling…) Steep learning curving Not like any others. Learning others doesn’t help. Tries to be different. Too many options, windows, hotkeys

SIS One window at a time. Info distribted across multipe winodws Nested scrollable windows Time out is irritating Too many clicks to do simple tasks To search, must choose dept from drop-down and there are a LOT of departments Can’t enroll in class from search windown Can’t go on waitlist from search window To change, sometimes must drop Edit may work. Bad name. Swap not what you want.

SIS (page 2 of ?) Left-hand side useless info. Better if it showed where you are in interface, supported quicker navigation Transcript request fails (if downloads, doesn’t make it clear it) Missing ability to see how one of multi sections fits your schedule

iMovie 2006 version than later versions More intuitive More restrictive

Bad Interfaces, Spr 08 SMOK Add tings and file is lost Zooming hard, not intuitive Do it too much, overlap, too much scrolling Sometimes right-click, other times do something else Some commands buried Default when adding component bad, things overlap, Things you need to find not labeled well Too much zooming, search to find things Add tings and file is lost Components/things easily deleted by mistake Failed to always load file correctly Demands advance planning, otherwise hard to change things later Hard to distinguish arrows between components where there are many

Excel Copy and paste from Word puts stuff in just one cell Hard to change details in graphs Wizard great, but hard to see how to customize 2D graphs Print formatting Steep learning curve Hard for beginners needing advanced features Click on cell, selects all, and you may delete it when you mean to edit it Formulas: hard to follow which cells are referenced Floating point accuracy

Fake iPod Different buttons are used to select at different times Mistake takes you back to beginning instead of back one Can’t define order of songs when playing

ISIS Type in year/semester: use odd format Could default to “logical” semester Doesn’t have all info in it to be good Need COD which isn’t there Waitlist isn’t well integrated Availability: closed at certain times (?) Can’t press enter to login in, must click Also, tab order isn’t logical Must return back to main menu always, even when there’s a logical other window you want to do Can’t use Backspace/Back to go back Close window causes it to chide you Audit have this request/wait/return option Seems unfriendly, unresponsive Timer period too short since you have to use >1 system Refresh -- F5 logs you out

Examples of non-usable systems Kroger’s self-checkout Use of the scale is confusing, not enough room for stuff Slow scanners, not as efficient as you’d hope Slow to scan/place/wait, so takes longer Default fix is “get cashier”, no other suggestions Poor error recovery Why can’t I swipe student ID? Didn’t check if you were a student once Ableton-Live or similar recording/audio software doesn’t look like standard Windows program, so hard to find GUI controls might look cool but makes it less efficient

Games that used keyboard commands only and used card-board cut-out Chem151 HW checker program Can’t backtrack in the steps you have to do Crashes a lot Didn’t accept numeric answers missing x.0 No feedback on why UVa’s Webmail Ugly to look at, not pleasing hard to keep mail organized in folders Must explicitly copy and move Slow Useless spam filter Must log into webmail/toolkit even when you’ve logged into a machine Filters out mail headers / not clear you can control this Indents messages in a thread, but if too deep you don’t see enough of the message

Mathcad hard to learn at first hard to keep track of variable / whole thing fails because of one small error / not good at explaining source of errors use of arrow-keys vs. space-bar to move things in an equation expected arrow keys to work 4+ different versions of the equals-sign / hard to distinguish on the screen new version can’t read files from other versions hard to remember after not using it for a while (lots of tricks needed, hard to remember)

ISIS pops up a window, pop-up blocker problems can’t use browser’s back button gives course instructor number instead of name must enter schedule-number instead of clicking on course ID and number Must use semester as a code, and if you get this wrong it’s confusing what’s wrong Interface has pictures/images for links, not the conventional under-lined links not integrated into COD, so must copy info over from COD to ISIS Kicks you off too quickly Too often overloaded, too many users Unavailability at certain hours / don’t know when it’s unavailable / status not visible easily Links on main page are too similar SSN number use

Spring 06: Examples of non-usable systems Eclipse Hard learning curve, bad for beginners Too many windows, confusing layout, too much going on (advanced options) Mathcad Interface not intuitive Not monkey-proof (let’s you make mistakes that crash it, make it unstable) Saving didn’t always work well Mouse scrolling caused program to crash

Grad school application sites Main UVa website Cluttered, too much stuff Random, not organized Things you need small, hard to find – must search for [User-base…] Grad school application sites Multiple systems, not standard Important info not clear, not consistent (deadlines) Geometer’s Sketchpad Hard to figure out how to use (sit down, can’t figure out what to do). Need to read instruction book. Bad help

AOL IM vi Flashing movies, ads Opens up another window Unwanted info, windows, distracting Adds buddies to your buddy list (can’t remove) vi Not intuitive, need instructions Simple function but needlessly complex

End of lecture 1