• 검색 결과가 없습니다.

Course Overview Course Overview

N/A
N/A
Protected

Academic year: 2022

Share "Course Overview Course Overview"

Copied!
59
0
0

로드 중.... (전체 텍스트 보기)

전체 글

(1)

HCI 특론 (2007 Fall)

Course Overview

Course Overview

(2)

UI Hall of Fame or Hall of Shame?

(3)

3

UI Hall of Fame or Hall of Shame?

(4)

Hall of Shame!

• Doesn’t help user accomplish their task

– 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

(5)

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)

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 – http://mm.sookmyung.ac.kr/~sblim

( 참조 ) http://www.cs.washington.edu/cs490f

• Have fun & participate!

(9)

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)

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

– 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)

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

– Introduction of HCI – History of HCI

• Read

– 인간과 컴퓨터의 상호작용 , 1&2 장

(15)

HCI 특론 (2007 Fall)

Introduction of HCI

Introduction of HCI

(16)

• Computer

– the machine the program runs on – often split between clients & servers

Human-Computer Interaction (HCI)

• Human

– the end-user of a program

– the others in the organization

• Interaction

– the user tells the computer what they want

– the computer communicates results

(17)

17

HCI Approach to UI Design

Design

Organizational &

Social Issues

Technology Humans

Tasks

(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”

Design

Organizational &

Social Issues

Technology Humans

Tasks

(19)

19

Factors Influence Each Other

Design

Organizational &

Social Issues

Technology Humans

Tasks

“People change their knowledge as they perform, i.e., they learn”

(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)

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

(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

(23)

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

Design

Exploration Evaluate Execute

Proposal:

Work together to realize the design in detail.

Evaluate with Customers Design

Discovery

Customers, Products,

Business, Marketing Customers, Products, Business, Marketing

Customers, Products, Business, Marketing

Design Definition: Specification:

Storyboard Customers:

- Roles (Who) - Tasks (What) - Context (Stories) Marketing:

- Business Priorities - Messages Technology:

- Products - Architecture Design:

-

Leading/competin g

technologies

Review &

Iterate

(25)

25

Iteration - interface design cycle

Design

Prototype

Evaluate

At every stage!

(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)

27

Web Design Representations

Site Maps Storyboards

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)

29

Usability 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

• Set goals early & later use to measure progress

• Goals often have tradeoffs, so prioritize

• Example goals

(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

(31)

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

• Low fidelity techniques

– paper sketches – cut, copy, paste

• Interactive

prototyping tools

– HTML, Visual Basic, Flash, DENIM, etc.

• UI builders

– Visual Studio .NET, JBuilder…

(33)

33

ESP

Evaluation

• Test with real users (participants)

– w/ interactive prototype – low-fi with paper

“computer”

• Build models

– GOMS

• Low-cost techniques

– expert evaluation – walkthroughs – online testing

(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

• In class presentations & critiques

• Rapid prototype using tools & user test

• Heuristic evaluations (individual)

• Heuristic evaluation summary

• Final presentations & project fair with industry guests

(35)

35

Project Examples (cont.)

SiteSketch

– web page design

– sketch-based

(36)

SiteSketch

(37)

37

Project Examples (cont.)

Clothes Shopper

– online shopping

– knows your prefs & sizes

(38)

Clothes Shopper

(39)

39

Project Examples (cont.)

Electronic book reader

take advantage of all the online texts on

the net

(40)

Electronic Book Reader

(41)

41

Project Examples (cont.)

Nutrition tracker

(42)

Nutrition Tracker

(43)

43

Project Examples (cont.)

cUIzine

– recipe tool for the home

(44)

cUIzine

(45)

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)

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)

49

PDA Baseball Scorekeeper

(50)

PalmStock

PalmStock

(51)

51

InkChat

(52)

Nutrition/Exercise Tracker

(53)

53

Trippin’

(54)

Traffic Monitor

(55)

55

Traffic Monitor

(56)

Traffic Monitor

Alert icons

Pan

Zoom Center on

driver

Audible reports about alerts

Volume

Congestion Information (traffic light metaphor)

(57)

57

Otto: Location-based Photos

(58)

Bus Buddy

(59)

59

Bus Buddy

참조

관련 문서

Design is applied to create better convenience and beneficial values through a variety of design methodology in relevant industry, and new service

Evaluating the impact of a facilitated learning community approach to professional development on teacher practice and student achievement.. Engineering by

ASDAL( Advanced Ship Design Automation Laboratory) (http://asdal.snu.ac.kr) Ship design, Overview of Shipbuilding Industries, 2008.3. 선박의

How to strengthening safety assessment capability for design and operation of nuclear power plants. ● Opening

Response modification factor (반응수정계수) : decrease of earthquake load when ductility of the structure is good.

The PDRI allows a project planning team to quantify, rate, and assess the level of scope development on projects prior to detailed design and construction.. A significant

For the structural design methodology to be practically used for the design of spaceborne electronics, it shall provide more reliable results on the mechanical safety

Title of work : Basic and detail design work for Guwol Agricultural products wholesale market prior to construction projects.. Deadline for submission