3UI Hall of Fame or Hall of Shame? Change this example as the site doesn’t exist anymore
4Hall of Shame! Doesn’t help user accomplish their task Takes too long why did they come to the site?Takes too longmost visitors will leave & never returnMay be valid for entertainment, art, or branding sitesAsk the audience what is wrong with this!
5Hall of Fame or Shame?Page setup for printing in IE5
6Hall of Shame! Page setup for printing in IE5 Problems codes for header & footer informationrequires recall!want recognitionno equivalent GUIhelp is the way to find out, but not obvious
7Goals of the Course 1) Learn to design, prototype, & evaluate UIs the needs & tasks of prospective userscognitive/perceptual constraints that affect designtechnology & techniques used to prototype UIstechniques for evaluating a user interface designimportance of iterative design for usabilityhow to work together on a team projectcommunicate your results to a groupkey to your future success2) Understand where technology is going & what UIs of the future might be like
8Course Format Interactive lectures Term project & homeworks Online materialsschedule, slides, exercises, readings(참조)Have fun & participate!
9How HCI Fits into CS/MM Curriculum Most courses for learning technologyprogramming, multimedia systems, database, etc.HCI concerned w/ UI design & evaluationtechnology as a tool to evaluate via prototypingskills will become very importantcomplex systems, large teams
10Books Lecture Notes & Textbook 강의노트 (ppt file) : 내 홈페이지 U. Washington J. Landay 교수 강좌 참조인간과 컴퓨터의 상호작용, 김희철 저, 사이텍미디어, 2006전체 필독The Design of Sites: A Pattern Language for the Web, 2nd edition, D. Van Duyne, J. Landay, J. Hong, Prentice Hall, 2006필요부분 발췌
11Books Recommended books Human-Computer Interaction, 3rd edition, Alan J. Dix, et. al., Prentice Hall, 2004Designing The User Interface: Strategies for Effective Human-Computer Interaction, 4th ed., Ben Shneiderman and C. Plaisant, Addison-Wesley, 2005Interaction Design: beyond human-computer interaction, 2nd edition, H. Sharp, Y. Rogers and J. Preece, John Wiley & Sons, 2007Human Computer Interaction 개론, 김진우 저, 안그라픽스, 2005
12Project Description Each of you will propose an interface idea Groups fixing something you don’t like or a new ideaGroups2 students to a groupwork with students w/ different skills/interestsgroups meet with lecturer every 2 weeksCumulativeapply several HCI methods to a single interface
13Grading A combination of midterm & final (30%) individual assignments (20%)group project (40%)demos/presentation (group component)project write-ups and exercisesratings given by other team members & classin class participation (10%)
14Summary Project proposal idea Next lecture on Read Introduction of HCI History of HCIRead인간과 컴퓨터의 상호작용, 1&2장
16Human-Computer Interaction (HCI) the end-user of a programthe others in the organizationComputerthe machine the program runs onoften split between clients & serversInteractionthe user tells the computer what they wantthe computer communicates resultsSo far you have probably studied lots about Computers, butlittle about Humans and Interaction.This course will concentrate on how these three areas come together.
17HCI Approach to UI Design Organizational &Social IssuesTasksDesignTechnologyHumansGive Examples of Tasks:high level:- writing a paper- drawing a picturelow level:- copying a word from one paragraph to another- coloring a line
18Factors Influence Each Other “Now that mice are included with most computers, applications assume a mouse will be used as a the pointing device”Organizational &Social IssuesTasksDesignTechnologyHumans
19Factors Influence Each Other “People change their knowledge as they perform, i.e., they learn”Organizational &Social IssuesTasksDesignTechnologyHumansGive Examples of Tasks:high level:- writing a paper- drawing a picturelow level:- copying a word from one paragraph to another- coloring a line
20User Interfaces (UIs) Part of application that allows people to interact with computerto carry out their taskUser vs. Customer vs. Clientuser is a term only used by 2 industries bad!customer – person who will use the product you buildclient – the company who is paying you to build itHCI = design, prototyping, evaluation, & implementation of UIs
21Why is HCI Important? Major part of work for “real” programs approximately 50%Bad user interfaces costmoney5% satisfaction up to 85%profitsfinding problems early makes them easier to fixreputation of organization (e.g., brand loyalty)lives (Therac-25)User interfaces hard to get rightpeople are unpredictableintuition of designers often wrongStudies have shown that the design, programming, and evaluation of the UI can take up to 50% of the project time and cost for a wide range of commercial and in-house softwareNearly 25% of all applications projects fail. Why?overrun budgets & management pulls plugothers complete, but are too hard to learn/useSolution is user-centered design. Why?easier to learn & use products sell bettercan help keep a product on schedulefinding problems early makes them easier to fix!training costs reduced
22Who Builds UIs? A team of specialists (ideally) graphic designers interaction / interface designersinformation architectstechnical writersmarketerstest engineersusability engineerssoftware engineersusersIn this course you will wear the hats of many of these specialists.
23How to Design and Build UIs UI Development processUsability goalsUser-centered designTask analysis & contextual inquiryRapid prototypingEvaluationProgramming
24User Interface Development Process Customers, Products,Business, MarketingCustomers, Products,Business, MarketingCustomers, Products,Business, MarketingDesignDiscoveryDesignExplorationEvaluateExecuteCustomers:- Roles (Who)- Tasks (What)- Context (Stories)Marketing:- Business Priorities- MessagesTechnology:- Products- ArchitectureDesign:- Leading/competingtechnologiesWork together torealize the designin detail.Evaluate withCustomersStoryboardReview & IterateDesign Definition:- Design Problem Statement- Targeted User Roles (Who)- Targeted User Tasks (What)- Design Direction StatementsProposal:Demos/Lo Fi Prototypes(How)Specification:Hi Fidelity, Refined Design- Based on customer feedback- Foundation in product reality- Refined Design descriptionbased on slide by Sara Redpath, IBM & Thyra Trauch, Tivoli
25Iteration - interface design cycle At every stage!DesignPrototypeEvaluate
26Design Design is driven by requirements what the artifact is fornot how it is to be implementede.g., PDA not as important as “mobile” app.A design represents the artifactfor UIs these representations include (?)screen sketches or storyboardsflow diagrams/outline showing task structureexecutable prototypesrepresentations simplifyWrite essaystart word processorwrite outlinefill out outlineStart word processorfind word processor icondouble click on iconWrite outlinewrite down high-level ideas.
27Web Design Representations Site MapsStoryboardsDesigners create representations of sites at multiple levels of detailWeb designs are iteratively refined at all levels of detailSchematicsMock-ups
28UsabilityAccording to the ISO: The effectiveness, efficiency, and satisfaction with which specified users achieve specified goals in particular environmentsThis does not mean you have to create a “dry” design or something that is only good for novices – it all depends on your goals
29Usability Goals Set goals early & later use to measure progress Goals often have tradeoffs, so prioritizeExample goalsLearnablefaster the 2nd time & so onMemorablefrom session to sessionFlexiblemultiple ways to accomplish tasksEfficientperform tasks quicklyRobustminimal error ratesgood feedback so user can recoverPleasinghigh user satisfactionFun
30User-centered Design “Know thy User” Cognitive abilities perceptionphysical manipulationmemoryOrganizational / job abilitiesKeep users involved throughoutdevelopers working with target usersthink of the world in users termsnot technology-centered/feature driven`
31Task Analysis & Contextual Inquiry Observe existing work practicesCreate examples and scenarios of actual use“Try-out”new ideas before building software?
32Rapid Prototyping Build a mock-up of design so you can test Fantasy BasketballBuild a mock-up of design so you can testLow fidelity techniquespaper sketchescut, copy, pasteInteractive prototyping toolsHTML, Visual Basic, Flash, DENIM, etc.UI buildersVisual Studio .NET, JBuilder…
33Evaluation Test with real users (participants) Build models w/ interactive prototypelow-fi with paper “computer”Build modelsGOMSLow-cost techniquesexpert evaluationwalkthroughsonline testingESP
34Project Process Overview Project proposal (group) due on this weekProject task analysis & “sketches”i.e., rough proposals that can & will changebased on field work with ESM tool on phoneIn class presentations & critiquesLow fidelity prototyping & user testingRapid prototype using tools & user testHeuristic evaluations (individual)Heuristic evaluation summaryFinal presentations & project fair with industry guests
45Project Examples (cont.) Read WWW over phonefind structure in pages & build voice menusnavigation problemcache common paths & reorder?PDA brainstorming toolsmall portable computers in a group meeting (say Palm Pilots)
46Project Examples (cont.) Runner’s training loginput daily workoutsreportsremindersPDA for shoppingscan in UPC & tells you whether a good priceHome entertainment control -“no more remotes”