Presentation is loading. Please wait.

Presentation is loading. Please wait.

Course Overview.

Similar presentations

Presentation on theme: "Course Overview."— Presentation transcript:

1 Course Overview

2 UI Hall of Fame or Hall of Shame?

3 UI Hall of Fame or Hall of Shame?
Change this example as the site doesn’t exist anymore

4 Hall of Shame! Doesn’t help user accomplish their task Takes too long
why did they come to the site? Takes too long most visitors will leave & never return May be valid for entertainment, art, or branding sites Ask the audience what is wrong with this!

5 Hall of Fame or Shame? Page setup for printing in IE5

6 Hall of Shame! Page setup for printing in IE5 Problems
codes for header & footer information requires recall! want recognition no equivalent GUI help is the way to find out, but not obvious

7 Goals of the Course 1) Learn to design, prototype, & evaluate UIs
the needs & tasks of prospective users cognitive/perceptual constraints that affect design technology & techniques used to prototype UIs techniques for evaluating a user interface design importance of iterative design for usability how to work together on a team project communicate your results to a group key to your future success 2) Understand where technology is going & what UIs of the future might be like

8 Course Format Interactive lectures Term project & homeworks
Online materials schedule, slides, exercises, readings (참조) Have fun & participate!

9 How HCI Fits into CS/MM Curriculum
Most courses for learning technology programming, multimedia systems, database, etc. HCI concerned w/ UI design & evaluation technology as a tool to evaluate via prototyping skills will become very important complex systems, large teams

10 Books 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 필요부분 발췌

11 Books Recommended books
Human-Computer Interaction, 3rd edition, Alan J. Dix, et. al.,  Prentice Hall, 2004 Designing The User Interface: Strategies for Effective Human-Computer Interaction, 4th ed., Ben Shneiderman and C. Plaisant, Addison-Wesley, 2005 Interaction Design: beyond human-computer interaction, 2nd edition, H. Sharp, Y. Rogers and J. Preece, John Wiley & Sons, 2007 Human Computer Interaction 개론, 김진우 저, 안그라픽스, 2005

12 Project Description Each of you will propose an interface idea Groups
fixing something you don’t like or a new idea Groups 2 students to a group work with students w/ different skills/interests groups meet with lecturer every 2 weeks Cumulative apply several HCI methods to a single interface

13 Grading A combination of midterm & final (30%)
individual assignments (20%) group project (40%) demos/presentation (group component) project write-ups and exercises ratings given by other team members & class in class participation (10%)

14 Summary Project proposal idea Next lecture on Read Introduction of HCI
History of HCI Read 인간과 컴퓨터의 상호작용, 1&2장

15 Introduction of HCI

16 Human-Computer Interaction (HCI)
the end-user of a program the others in the organization Computer the machine the program runs on often split between clients & servers Interaction the user tells the computer what they want the computer communicates results So far you have probably studied lots about Computers, but little about Humans and Interaction. This course will concentrate on how these three areas come together.

17 HCI Approach to UI Design
Organizational & Social Issues Tasks Design Technology Humans Give Examples of Tasks: high level: - writing a paper - drawing a picture low level: - copying a word from one paragraph to another - coloring a line

18 Factors 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 Issues Tasks Design Technology Humans

19 Factors Influence Each Other
“People change their knowledge as they perform, i.e., they learn” Organizational & Social Issues Tasks Design Technology Humans Give Examples of Tasks: high level: - writing a paper - drawing a picture low level: - copying a word from one paragraph to another - coloring a line

20 User Interfaces (UIs) Part of application that allows people
to interact with computer to carry out their task User vs. Customer vs. Client user is a term only used by 2 industries  bad! customer – person who will use the product you build client – the company who is paying you to build it HCI = design, prototyping, evaluation, & implementation of UIs

21 Why is HCI Important? Major part of work for “real” programs
approximately 50% Bad user interfaces cost money 5% satisfaction  up to 85%profits finding problems early makes them easier to fix reputation of organization (e.g., brand loyalty) lives (Therac-25) User interfaces hard to get right people are unpredictable intuition of designers often wrong Studies 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 software Nearly 25% of all applications projects fail. Why? overrun budgets & management pulls plug others complete, but are too hard to learn/use Solution is user-centered design. Why? easier to learn & use products sell better can help keep a product on schedule finding problems early makes them easier to fix! training costs reduced

22 Who Builds UIs? A team of specialists (ideally) graphic designers
interaction / interface designers information architects technical writers marketers test engineers usability engineers software engineers users In this course you will wear the hats of many of these specialists.

23 How to Design and Build UIs
UI Development process Usability goals User-centered design Task analysis & contextual inquiry Rapid prototyping Evaluation Programming

24 User Interface Development Process
Customers, Products, Business, Marketing Customers, Products, Business, Marketing Customers, Products, Business, Marketing Design Discovery Design Exploration Evaluate Execute Customers: - Roles (Who) - Tasks (What) - Context (Stories) Marketing: - Business Priorities - Messages Technology: - Products - Architecture Design: - Leading/competing technologies Work together to realize the design in detail. Evaluate with Customers Storyboard Review & Iterate Design Definition: - Design Problem Statement - Targeted User Roles (Who) - Targeted User Tasks (What) - Design Direction Statements Proposal: Demos/ Lo Fi Prototypes (How) Specification: Hi Fidelity, Refined Design - Based on customer feedback - Foundation in product reality - Refined Design description based on slide by Sara Redpath, IBM & Thyra Trauch, Tivoli

25 Iteration - interface design cycle
At every stage! Design Prototype Evaluate

26 Design Design is driven by requirements
what the artifact is for not how it is to be implemented e.g., PDA not as important as “mobile” app. A design represents the artifact for UIs these representations include (?) screen sketches or storyboards flow diagrams/outline showing task structure executable prototypes representations simplify Write essay start word processor write outline fill out outline Start word processor find word processor icon double click on icon Write outline write down high-level ideas .

27 Web Design Representations
Site Maps Storyboards Designers create representations of sites at multiple levels of detail Web designs are iteratively refined at all levels of detail Schematics Mock-ups

28 Usability According to the ISO: The effectiveness, efficiency, and satisfaction with which specified users achieve specified goals in particular environments This does not mean you have to create a “dry” design or something that is only good for novices – it all depends on your goals

29 Usability Goals Set goals early & later use to measure progress
Goals often have tradeoffs, so prioritize Example goals Learnable faster the 2nd time & so on Memorable from session to session Flexible multiple ways to accomplish tasks Efficient perform tasks quickly Robust minimal error rates good feedback so user can recover Pleasing high user satisfaction Fun

30 User-centered Design “Know thy User” Cognitive abilities
perception physical manipulation memory Organizational / job abilities Keep users involved throughout developers working with target users think of the world in users terms not technology-centered/feature driven `

31 Task Analysis & Contextual Inquiry
Observe existing work practices Create examples and scenarios of actual use “Try-out”new ideas before building software ?

32 Rapid Prototyping Build a mock-up of design so you can test
Fantasy Basketball Build a mock-up of design so you can test Low fidelity techniques paper sketches cut, copy, paste Interactive prototyping tools HTML, Visual Basic, Flash, DENIM, etc. UI builders Visual Studio .NET, JBuilder…

33 Evaluation Test with real users (participants) Build models
w/ interactive prototype low-fi with paper “computer” Build models GOMS Low-cost techniques expert evaluation walkthroughs online testing ESP

34 Project Process Overview
Project proposal (group) due on this week Project task analysis & “sketches” i.e., rough proposals that can & will change based on field work with ESM tool on phone In class presentations & critiques Low fidelity prototyping & user testing Rapid prototype using tools & user test Heuristic evaluations (individual) Heuristic evaluation summary Final presentations & project fair with industry guests

35 Project Examples (cont.)
SiteSketch web page design sketch-based

36 SiteSketch

37 Project Examples (cont.)
Clothes Shopper online shopping knows your prefs & sizes

38 Clothes Shopper

39 Project Examples (cont.)
Electronic book reader take advantage of all the online texts on the net

40 Electronic Book Reader

41 Project Examples (cont.)
Nutrition tracker

42 Nutrition Tracker

43 Project Examples (cont.)
cUIzine recipe tool for the home

44 cUIzine

45 Project Examples (cont.)
Read WWW over phone find structure in pages & build voice menus navigation problem cache common paths & reorder? PDA brainstorming tool small portable computers in a group meeting (say Palm Pilots)

46 Project Examples (cont.)
Runner’s training log input daily workouts reports reminders PDA for shopping scan in UPC & tells you whether a good price Home entertainment control -“no more remotes”

47 Total Entertainment Control

48 Project Examples (cont.)
PDA Baseball score keeper have stats of the players on your PDA keep track of what happens during the game upload stats after the game

49 PDA Baseball Scorekeeper

50 PalmStock PalmStock brings up a FOCUS screen entire line is selectable

51 InkChat

52 Nutrition/Exercise Tracker

53 Trippin’

54 Traffic Monitor

55 Traffic Monitor

56 (radio buttton metaphor)
Traffic Monitor Congestion Information (traffic light metaphor) Alert icons Volume Pan Audible reports about alerts Zoom ZOOMED IN IMAGES Center on driver Driver’s location Map view presets (radio buttton metaphor)

57 Otto: Location-based Photos
Navigation breadcrumbs buggy and use confused evaluators Colored in current breadcrumb

58 Bus Buddy

59 Bus Buddy

Download ppt "Course Overview."

Similar presentations

Ads by Google