User System InterfaceUser System InterfaceCSC 8570-001CSC 8570-001

Spring 2009 Spring 2009

Instructor: Robert E. BeckInstructor: Robert E. Beck

Introductions (1)Introductions (1)

Information sheetInformation sheet Questionnaire: student informationQuestionnaire: student information QuestionsQuestions

1.1. Who invented the computer mouse? When? Where?Who invented the computer mouse? When? Where?2.2. What battery operated devices do you have with you What battery operated devices do you have with you

tonight?tonight?3.3. What (computer-based) POS systems do you typically What (computer-based) POS systems do you typically

encounter as a customer in a standard week?encounter as a customer in a standard week?4.4. What process would you use to find the latitude and What process would you use to find the latitude and

longitude of the statue of Gregor Mendel on the plaza longitude of the statue of Gregor Mendel on the plaza in front of the Mendel Science Center?in front of the Mendel Science Center?

Introductions (2)Introductions (2)

NameName If workingIf working

– For what company?For what company?– In what capacity?In what capacity?

If a full-time studentIf a full-time student– Plans after graduationPlans after graduation

Describe the user interface of the Describe the user interface of the first computer you used.first computer you used.

Battery Operated DevicesBattery Operated Devices Cell phoneCell phone Laptop computerLaptop computer CalculatorCalculator HeadphonesHeadphones

– One switch: on/off. Marking?One switch: on/off. Marking? Wireless mouse: Wireless mouse:

– Two buttons, scroll wheel?, ballTwo buttons, scroll wheel?, ball IPod (or other MP3 player)IPod (or other MP3 player) WatchWatch

– Four buttonsFour buttons Remote car entry Remote car entry

– Three buttonsThree buttons

GoalsGoals

Developing design principlesDeveloping design principles Investigating models and theoriesInvestigating models and theories Creating evaluation processesCreating evaluation processes

– ExperimentationExperimentation– OpinionOpinion

Outlining an effective design processOutlining an effective design process—interface engineering—interface engineering

Proposing interface designsProposing interface designs

Themes (1)Themes (1)

Hierarchy of design principlesHierarchy of design principles ModelsModels Theories (or theory)Theories (or theory) AwarenessAwareness

– Mental modelsMental models– Common interactionsCommon interactions– Microsoft vs. othersMicrosoft vs. others– General knowledgeGeneral knowledge

Themes (2)Themes (2)

Multidisciplinary approachMultidisciplinary approach Frontiers of HCIFrontiers of HCI Definitions, use of wordsDefinitions, use of words ExamplesExamples

Strategies (Ways of Knowing)Strategies (Ways of Knowing)

Create concept maps for reading Create concept maps for reading assignmentsassignments– Combine individual mapsCombine individual maps

Slip-of-paper (SOP) questions and Slip-of-paper (SOP) questions and surveyssurveys– Summarize resultsSummarize results

Lectures, sometimesLectures, sometimes Discussion, alwaysDiscussion, always Argumentation, when appropriateArgumentation, when appropriate

Strategies (2)Strategies (2)

ExamplesExamples Careful reading of research and Careful reading of research and

survey articlessurvey articles PowerPoint as a guidePowerPoint as a guide

– Light on dark? Dark on light?Light on dark? Dark on light?– Posted after class on course web sitePosted after class on course web site

ActivitiesActivities

Research projectResearch project– ReportReport– PresentationPresentation– PosterPoster

Article presentationArticle presentation Web-based projectWeb-based project ExercisesExercises ExperimentsExperiments Exam – in two partsExam – in two parts

– Second part: May 5Second part: May 5

ResponsibilitiesResponsibilities

AttendanceAttendance ReadingReading Team supportTeam support Dialog with classmates and instructorDialog with classmates and instructor

Hot TopicsHot TopicsBurning QuestionsBurning Questions

Time for your thoughtsTime for your thoughts Pair up by twosPair up by twos For the next few minutes, write down For the next few minutes, write down

as many issues or problems in user-as many issues or problems in user-system interaction as you can.system interaction as you can.

Issue SummaryIssue Summary

How do we do this?How do we do this?

Hot Areas; Burning IssuesHot Areas; Burning IssuesThe ListThe List

Usability and clarity of interface componentsUsability and clarity of interface components– Intuitiveness of actions requiredIntuitiveness of actions required– Transparency of interactionTransparency of interaction– Meaningful feedback (closure) of operationsMeaningful feedback (closure) of operations– Conformity to standardsConformity to standards– Consistency within and across systemsConsistency within and across systems

Safety from (user-caused) errorsSafety from (user-caused) errors– Effective error handlingEffective error handling– Minimum error cost Minimum error cost

Accessibility of systemsAccessibility of systems– Users with disabilitiesUsers with disabilities– Effective system securityEffective system security

Speed of response relative to complexity of operationSpeed of response relative to complexity of operation

The List (2)The List (2) Flexibility of interactionsFlexibility of interactions

– Multiple paths to the user’s goalMultiple paths to the user’s goal Aesthetics of the interfaceAesthetics of the interface

– Free from clutterFree from clutter– Free from distractions Free from distractions

Availability of system informationAvailability of system information– Effective help system Effective help system – Clear user guides and tutorialsClear user guides and tutorials

Affordability [economy of system Affordability [economy of system resources] resources]

Localization of interface in time and space Localization of interface in time and space

The List (3)The List (3)

Security of useSecurity of use Availability of input/output Availability of input/output Physical integrity of devices Physical integrity of devices Tactile response Tactile response Scalability Scalability Memory of use Memory of use

– Undo and redoUndo and redo

Hot Topics: Others’ IdeasHot Topics: Others’ Ideas

CHI 200X topicsCHI 200X topics HCIL presentationsHCIL presentations InteractionsInteractions

Landscape of the FieldLandscape of the Field

TaxonomyTaxonomy OntologyOntology

SourcesSources

ACM Digital LibraryACM Digital Library Conference proceedings (MSC 159)Conference proceedings (MSC 159) The Web—but be carefulThe Web—but be careful The course web siteThe course web site University HCI labs, e.g.University HCI labs, e.g.

– U of Maryland www.cs.umd.edu/hcilU of Maryland www.cs.umd.edu/hcil Popular pressPopular press

– Information WeekInformation Week– Financial TimesFinancial Times

Falvey Library reference deskFalvey Library reference desk

Sources (2)Sources (2)

Steve Krug, Steve Krug, Don’t Make Me Think: A Don’t Make Me Think: A Common Sense Approach to Web Common Sense Approach to Web Usability, 2Usability, 2ndnd Edition Edition

Jeff Johnson, Jeff Johnson, GUI Bloopers 2.0: GUI Bloopers 2.0: Common User Interface Design Common User Interface Design Don'ts and Dos Don'ts and Dos

Jakob Nielsen, Jakob Nielsen, Designing Web Designing Web UsabilityUsability

ContactsContacts

PhillyCHIPhillyCHI – Philadelphia region – Philadelphia region chapter of SIGCHIchapter of SIGCHI

SIGCHISIGCHI – ACM Special Interest Group – ACM Special Interest Group on Computer Human Interactionon Computer Human Interaction

ConferencesConferences ACE – Computer Entertainment TechnologyACE – Computer Entertainment Technology AVI – Advanced Visual InterfacesAVI – Advanced Visual Interfaces CHI – Computer Human InteractionCHI – Computer Human Interaction CSCW – Computer Supported Cooperative CSCW – Computer Supported Cooperative

WorkWork DSV-ISDSV-IS HCI InternationalHCI International HCILHCIL Symposium (U Maryland) Symposium (U Maryland) HICSHICS HypertextHypertext

Conferences (2)Conferences (2)

IDCIDC InteractInteract IUI – Intelligent User InterfacesIUI – Intelligent User Interfaces IVAIVA SG – Smart GraphicsSG – Smart Graphics SIGIR – Information RetrievalSIGIR – Information Retrieval UIST – User Interface Software TechnologyUIST – User Interface Software Technology User ModelingUser Modeling World Wide WebWorld Wide Web

ToolsTools

Concept maps: Concept maps: – http://http://cmap.ihmc.uscmap.ihmc.us

EndNoteEndNote Task models:Task models:

– ConcurTaskTreesConcurTaskTrees Environment Environment Help compilerHelp compiler Treemap:Treemap:

– http:// http://www.cs.umd.edu/hcil/treemapswww.cs.umd.edu/hcil/treemaps//

Tools (2)Tools (2)

UISK: User Interface Sketching Tool UISK: User Interface Sketching Tool

What Do We MeanWhat Do We Mean

when we writewhen we write USIUSI HCIHCI GUIGUI DMIDMI IUIIUI SUSISUSI

What Do We Mean ByWhat Do We Mean By

UserUser SystemSystem InterfaceInterface HumanHuman ComputerComputer InteractionInteraction GraphicalGraphical

DirectDirect ManipulationManipulation

Eras of HCIEras of HCI

HolesHoles Command linesCommand lines Menus and charactersMenus and characters Widget objects and bit mapsWidget objects and bit maps Small devicesSmall devices

What to Study: Potential TopicsWhat to Study: Potential Topics Tiny interfaces: Cell phones, smartphones, PDAs, Tiny interfaces: Cell phones, smartphones, PDAs,

ultramobile PCs, house systems, POS systemsultramobile PCs, house systems, POS systems Gesture-based input; pen interfacesGesture-based input; pen interfaces Intelligent interfaces (cf. IUI)Intelligent interfaces (cf. IUI) Task analysis (e.g. buying a ticket)Task analysis (e.g. buying a ticket) Collaboration tools/systems (cf. CSCW)Collaboration tools/systems (cf. CSCW) Personalization; recommender systemsPersonalization; recommender systems Friendly formsFriendly forms Creating digital librariesCreating digital libraries Mashup toolsMashup tools Web-based interfaces to systems, to information, for Web-based interfaces to systems, to information, for

task completiontask completion

Reading a Research PaperReading a Research Paper

Expect to findExpect to find– AbstractAbstract– IntroductionIntroduction– Description of experimentDescription of experiment– Discussion of resultsDiscussion of results– Conclusion Conclusion – Proposals for future workProposals for future work– ReferencesReferences

Reading (2)Reading (2)

Try the abstract—though it may be too Try the abstract—though it may be too abstract, too condensed.abstract, too condensed.

Read the introduction until you get Read the introduction until you get confused.confused.

Read the conclusion.Read the conclusion. Look at the reference list—hoping to find Look at the reference list—hoping to find

papers you already know about.papers you already know about. Check the headings and first few lines of Check the headings and first few lines of

the middle sections for ease of the middle sections for ease of understanding.understanding.

Reading (3)Reading (3)

Examples:Examples:– MacKenzie: Unipad text entryMacKenzie: Unipad text entry– MacKenzie: Text entry errorsMacKenzie: Text entry errors

Next TimeNext Time

Read Wigdor & Balakrishnan, Read Wigdor & Balakrishnan, Tilt Text: Tilt Text: using tilt for text input to mobile phones. using tilt for text input to mobile phones. (You can get a copy of the paper from the (You can get a copy of the paper from the ACM Digital Library.)ACM Digital Library.)

Evaluate its structure and content as a Evaluate its structure and content as a research paper.research paper.

Identify design principles for user Identify design principles for user interfaces based on the paper.interfaces based on the paper.

Hand in your solution to the table exercise.Hand in your solution to the table exercise.

Next Time (2)Next Time (2)

Install EndNote on your computer Install EndNote on your computer and record the references from the and record the references from the Wigdor paper in it.Wigdor paper in it.– EndNote has been available for loan EndNote has been available for loan

from the library. Check with the from the library. Check with the Reference DeskReference Desk

Install the CMAP software on your Install the CMAP software on your computer and capture the principal computer and capture the principal ideas of today’s lecture in it.ideas of today’s lecture in it.

Next Time (3)Next Time (3)

What is the difference between What is the difference between taxonomytaxonomy and and ontologyontology??

How How is is the field of HCI divided?the field of HCI divided?

The Future of HCIThe Future of HCI

Take a few minutes to read John Take a few minutes to read John Canny’s introduction to the Canny’s introduction to the July/August 2006 issue of July/August 2006 issue of HCIHCI..

Do Canny’s views match our ideas?Do Canny’s views match our ideas? What did he miss?What did he miss? What did we miss?What did we miss?

HandoutsHandouts

John Canny, The Future of HCI, from John Canny, The Future of HCI, from HCIHCI, , 44(2006), July/August(2006), July/August