introduction course overview cs490jl n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Introduction & Course Overview CS490jl PowerPoint Presentation
Download Presentation
Introduction & Course Overview CS490jl

Loading in 2 Seconds...

play fullscreen
1 / 69

Introduction & Course Overview CS490jl - PowerPoint PPT Presentation


  • 60 Views
  • Uploaded on

Introduction & Course Overview CS490jl. September 30, 2004. UI Hall of Fame or Hall of Shame?. Hall of Shame!. Does not help the user accomplish their task why did they come to the site? Takes too long most visitors will just leave & never come back

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Introduction & Course Overview CS490jl' - pandora-hood


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
ui hall of fame or hall of shame
UI Hall of Fame or Hall of Shame?

User Interface Design, Prototyping, and Evaluation

hall of shame
Hall of Shame!
  • Does not help the user accomplish their task
    • why did they come to the site?
  • Takes too long
    • most visitors will just leave & never come back
  • May be valid for entertainment, art, or branding sites

User Interface Design, Prototyping, and Evaluation

hall of fame or shame
Hall of Fame or Shame?
  • Page setup for printing in IE5

User Interface Design, Prototyping, and Evaluation

hall of shame1
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

User Interface Design, Prototyping, and Evaluation

outline
Outline
  • Who are we?
  • HCI introduction
  • Course overview & schedule
  • Introductions

User Interface Design, Prototyping, and Evaluation

who are we
Who are we?
  • James Landay
    • Associate Professor in Computer Science at the University of Washington (formerly professor in EECS at UC Berkeley)
    • Ph.D. in CS from Carnegie Mellon ‘96
    • HCI w/ focus on informal input (pens, speech, etc.), Web design (tools, patterns, etc.), & Ubiquitous Computing
    • founded NetRaker, leader in Web experience management
      • Now subsidiary of KeyNote Systems
    • Co-authored The Design of Sites with D. van Duyne & J. Hong
    • Director of Intel Research Seattle (ubicomp lab)
  • Kate Everitt
    • Ph.D. student in CSE
    • BSc in Computing & Info Science from Queen’s University
    • MS in CS from UC Berkeley
    • HCI w/ focus on computer support cooperative work

User Interface Design, Prototyping, and Evaluation

who are we1
Who are we?
  • Richard Davis
    • Ph.D. student in CS at UC Berkeley
    • BS & MS in EECS from MIT
    • lots of industry experience (Virtual Ink, Boris F/X, Mathworks, Intel)
    • HCI w/ focus on pen-based user interfaces (animation)

User Interface Design, Prototyping, and Evaluation

human computer interaction hci
Human-Computer Interaction (HCI)
  • Human
    • 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

User Interface Design, Prototyping, and Evaluation

hci approach to ui design

Organizational &

Social Issues

Tasks

Design

Technology

Humans

HCI Approach to UI Design

User Interface Design, Prototyping, and Evaluation

factors influence each other

Organizational &

Social Issues

Tasks

Design

Technology

Humans

Factors Influence Each Other

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

User Interface Design, Prototyping, and Evaluation

user interfaces uis
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 person/company who is paying you to build it

HCI = design, prototyping, evaluation, & implementation of UIs

User Interface Design, Prototyping, and Evaluation

why is hci important
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

User Interface Design, Prototyping, and Evaluation

who builds uis
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

User Interface Design, Prototyping, and Evaluation

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

User Interface Design, Prototyping, and Evaluation

user interface development process
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

Specification:

Hi Fidelity, Refined Design

- Based on customer feedback

- Foundation in product reality

- Refined Design description

Proposal:

Demos/

Lo Fi Prototypes

(How)

based on slide by Sara Redpath, IBM & Thyra Trauch, Tivoli

User Interface Design, Prototyping, and Evaluation

iteration

Design

Prototype

Evaluate

Iteration

At every stage!

User Interface Design, Prototyping, and Evaluation

design
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 showingtask 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

.

.

.

User Interface Design, Prototyping, and Evaluation

web design representations
Web Design Representations

Site Maps

Storyboards

Schematics

Mock-ups

User Interface Design, Prototyping, and Evaluation

usability
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

User Interface Design, Prototyping, and Evaluation

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

Usability Goals
  • Set goals early & later use to measure progress
  • Goals often have tradeoffs, so prioritize
  • Example goals

User Interface Design, Prototyping, and Evaluation

user centered design
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
    • understanding work process
    • not technology-centered/feature driven

User Interface Design, Prototyping, and Evaluation

task analysis contextual inquiry

?

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

User Interface Design, Prototyping, and Evaluation

rapid prototyping

Fantasy Basketball

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, HyperCard, Director, Flash, DENIM, etc.
  • UI builders
    • Visual Studio .NET, JBuilder…

User Interface Design, Prototyping, and Evaluation

evaluation

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

User Interface Design, Prototyping, and Evaluation

programming
Programming
  • Toolkits
  • UI Builders
  • Event models
  • Input / Output models
  • etc.

User Interface Design, Prototyping, and Evaluation

goals of the course
Goals of the Course
  • 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
    • technology used to prototype & implement UI code
    • how to work together on a team project
    • communicate your results to a group
      • key to your future success
  • Understand where technology is going & what UIs of the future might be like

User Interface Design, Prototyping, and Evaluation

course format
Course Format
  • Interactive lectures
  • Semester long project & homeworks
  • Readings
  • All material is online
    • slides, exercises, readings, schedule
    • http://www.cs.washington.edu/cs490jl
  • Have fun & participate!

User Interface Design, Prototyping, and Evaluation

how cse490jl fits into cs curriculum
How CSE490jl Fits into CS Curriculum
  • Most courses for learning technology
    • compilers, operating systems, databases, etc.
  • CSE490jl concerned w/design & evaluation
    • assume you can program/learn new languages
    • technology as a tool to evaluate via prototyping
    • skills will become very important upon graduation
      • complex systems, large teams
      • don’t look for large immediate impact in other CS courses

User Interface Design, Prototyping, and Evaluation

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

User Interface Design, Prototyping, and Evaluation

project process overview
Project Process Overview
  • Project proposal (individual) due Tuesday
  • Break-up into groups next Thursday
  • Project task analysis & “sketches”
    • i.e., rough proposals that can & will change
  • Low fidelity prototyping & testing
  • Build 1st interactive prototype
  • In class presentations & critiques
  • Heuristic evaluations (individual)

User Interface Design, Prototyping, and Evaluation

project process overview cont
Project Process Overview (cont.)
  • Heuristic evaluation summary
  • Build 2nd interactive prototype
  • In lab demo & critiques
  • Customer testing of 2nd prototype
  • In class presentation & critiques
  • Not enough time for 3rd prototype

User Interface Design, Prototyping, and Evaluation

project examples
Project Examples
  • Research notebook
    • threads of ideas
    • multiple views
    • secure time stamps

User Interface Design, Prototyping, and Evaluation

research notebook
Research Notebook

User Interface Design, Prototyping, and Evaluation

project examples cont
Project Examples (cont.)
  • SiteSketch
    • web page design
    • sketch-based

User Interface Design, Prototyping, and Evaluation

sitesketch
SiteSketch

User Interface Design, Prototyping, and Evaluation

project examples cont1
Project Examples (cont.)
  • CD Jukebox

User Interface Design, Prototyping, and Evaluation

cd jukebox
CD JukeBox

User Interface Design, Prototyping, and Evaluation

project examples cont2
Project Examples (cont.)
  • Clothes Shopper
    • online shopping
    • knows your prefs & sizes

User Interface Design, Prototyping, and Evaluation

clothes shopper
Clothes Shopper

User Interface Design, Prototyping, and Evaluation

project examples cont3
Project Examples (cont.)
  • Electronic book reader
    • take advantage of all the online texts on the net

User Interface Design, Prototyping, and Evaluation

electronic book reader
Electronic Book Reader

User Interface Design, Prototyping, and Evaluation

project examples cont4
Project Examples (cont.)
  • Nutrition tracker

User Interface Design, Prototyping, and Evaluation

nutrition tracker
Nutrition Tracker

User Interface Design, Prototyping, and Evaluation

project examples cont5
Project Examples (cont.)
  • cUIzine
    • recipe tool for the home

User Interface Design, Prototyping, and Evaluation

cuizine
cUIzine

User Interface Design, Prototyping, and Evaluation

project examples cont6
Project Examples (cont.)
  • Tech support help desk
    • avoid using the phone for getting help

User Interface Design, Prototyping, and Evaluation

project examples cont7
Project Examples (cont.)
  • Apartment finder
    • kinda obvious!!! :)

User Interface Design, Prototyping, and Evaluation

apartment finder
Apartment Finder

User Interface Design, Prototyping, and Evaluation

project examples cont8
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)

User Interface Design, Prototyping, and Evaluation

pda brainstorming
PDA Brainstorming

User Interface Design, Prototyping, and Evaluation

project examples cont9
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”

User Interface Design, Prototyping, and Evaluation

total entertainment control
Total Entertainment Control

User Interface Design, Prototyping, and Evaluation

project examples cont10
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

User Interface Design, Prototyping, and Evaluation

pda baseball scorekeeper
PDA Baseball Scorekeeper

User Interface Design, Prototyping, and Evaluation

palmstock

PalmStock

PalmStock

User Interface Design, Prototyping, and Evaluation

inkchat
InkChat

User Interface Design, Prototyping, and Evaluation

rendezvous
Rendezvous

Ed

Josh

Brian

Back-

end

Cliff

User Interface Design, Prototyping, and Evaluation

nutrition exercise tracker
Nutrition/Exercise Tracker

User Interface Design, Prototyping, and Evaluation

trippin
Trippin’

User Interface Design, Prototyping, and Evaluation

ubiquitous computing project themes
Ubiquitous Computing Project Themes
  • Location-enhanced computing
    • Devices that are aware of their location
    • Examples include car navigation, Trippin’, finding nearby restaurants, etc
  • Digital home
    • focus on how to simplify people’s personal lives rather than adding technology to get new features
    • helping care for an elder
    • helping people stay fit (exercise & nutrition)

User Interface Design, Prototyping, and Evaluation

administrivia
Administrivia
  • Registration
    • limited by room and project constraints to 32
    • fill-out appeal form if not enrolled (due today at 5 PM)
    • tell us why you should be in the course
      • background, interests, what you can contribute
    • will post list of admits on course web page by Friday at 5 PM
  • Roll
  • James’ office hours
    • Tue. 2:30-3:30 PM (642 Allen Center)
    • Wed. 9-10 AM online (send Kate your Yahoo id)
    • email landay@cs for appointments at other times

User Interface Design, Prototyping, and Evaluation

administrivia cont
Administrivia (cont.)
  • Teaching assistants
    • Katherine Everitt
      • last name at cs.washington.edu
      • O.H.: TBA in 409 Allen Center
    • Richard Davis
      • rcdavis at cs.washington.edu
      • O.H.: TBA in 606 Allen Center
  • Discussion sections
    • TBD - please fill out course survey linked off course web page today to help determine this & other things
    • new material will be covered in discussion -> attend

User Interface Design, Prototyping, and Evaluation

books
Books
  • The Design of Sites by van Duyne, Landay, & Hong
    • order from Amazon.com
    • much of the first 4 chapters of book & appendices based on this course
  • We will also hand out papers, give you web links, & refer to lecture slides
  • Two recommended textbooks
    • Human-Computer Interaction by Alan Dix, et. al., 3rd edition, 2003
    • Developing User Interfaces by Dan Olsen, 1998
    • order from Amazon.com (link off class web page)
  • Other recommended books on web page

User Interface Design, Prototyping, and Evaluation

assignments tentative
Assignments (tentative)
  • Individual
    • 4 written + one talk each
  • Group
    • 6 written assignments
      • 3 presentation/demos with the write-ups
    • all group work handed in on Web (group web site)

User Interface Design, Prototyping, and Evaluation

grading
Grading
  • A combination of
    • midterm (15%)
    • final (20%)
    • 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 (5%)
  • No curve

User Interface Design, Prototyping, and Evaluation

tidbits
Tidbits
  • Late Policy
    • no lates on group assignments
    • individual assignments lose one letter grade/day
  • Cheating policy
    • will get you an F in the course
    • more than once can get you dismissed
  • More information (syllabus/schedule/slides)
    • http://www.cs.washington.edu/cs490jl

User Interface Design, Prototyping, and Evaluation

summary
Summary
  • Check web site for admit list by Friday at 5 PM
  • Do on-line survey by Friday
  • Project proposal due at start of lecture on Tuesday
  • Next lecture on design discovery
    • Read Tools For Thought Ch 11 (Engelbart Demo)
    • Chapter 3 of The Design of Sites

User Interface Design, Prototyping, and Evaluation