Prof. James A. Landay Luke Vink Cornell Tech Spring 2014 May 14, 2014 HCI+DESIGN: USER INTERFACE DESIGN + PROTOTYPING + EVALUATION Cornell Tech HCI+Design INFO 6410 Overview

Outline Course overview Final project presentations Poster session/demos CSE441 - Spring 2013Advanced User Interface Design, Prototyping, & Evaluation 2

DESIGNTECHNOLOGY BALANCE

HCI Approach to UI Design

Goals of INFO 6410 Learn to design, prototype, & evaluate UIs –tasks & work practices of prospective users –cognitive/perceptual constraints affecting design –techniques for evaluating UI designs –importance of iterative design for usability –technology used to prototype UIs –how to work together as a team –communicating results to a group CSE441 - Spring 2013Advanced User Interface Design, Prototyping, & Evaluation 5

Iterative Design Driven by the variability in human performance Design Prototype Evaluate CSE441 - Spring 2013Advanced User Interface Design, Prototyping, & Evaluation6

Project Based Course Iterative design of a real UI Theme: mobile computing Semester long projects Teams –3 members 14 major group assignments –group work ~60% of course grade Five presentations –every team member presents multiple times CSE441 - Spring 2013Advanced User Interface Design, Prototyping, & Evaluation 7

Timeline Week 1 Interactive Medium-fi Prototype #1 Contextual Inquiry + Sketches Week 2Week 3Week 5Week 6Week 7Week 8 Proposal Paper Prototype + User Testing Week 4 Task Analysis + Sketches Sketches + Concept Videos Problem Finding CSE441 - Spring 2013Advanced User Interface Design, Prototyping, & Evaluation 8

Timeline CSE441 - Spring 2013Advanced User Interface Design, Prototyping, & Evaluation 9 Week 11 Final Presentation Field Usability Study Week 12Week 13Week 15Week 16 Interactive Hi-Fi Prototype #2 Interactive Hi-fi Prototype #3 Video Prototype Week 14 Heuristic Evaluation Week 9 Week 10

Individual Work Design studio assignments –6 individual/group design assignments –critique in class around a table Individual/studio assignments –Problem finding & research –Project proposal –Gestalt principles –Guerilla ideation –Heuristic evaluation –Essential design CSE441 - Spring 2013Advanced User Interface Design, Prototyping, & Evaluation 10

User-centered Design: Fieldwork Contextual Inquiry & Task Analysis –observe existing work practices –make sure key questions answered Tuned CI participant Tuned field work in record store CSE441 - Spring 2013Advanced User Interface Design, Prototyping, & Evaluation 11

Sketching & Storyboarding tagbuster CSE441 - Spring 2013Advanced User Interface Design, Prototyping, & Evaluation 12

Sketching & Storyboarding Event Hero CSE441 - Spring 2013Advanced User Interface Design, Prototyping, & Evaluation 13

Concept Videos Advanced User Interface Design, Prototyping, & Evaluation Event Hero CSE441 - Spring

Low-fi Prototyping & Testing Horizon CSE441 - Spring 2013Advanced User Interface Design, Prototyping, & Evaluation 15 GroceryList++

Interactive Prototypes Medium Fidelity Event Hero CSE441 - Spring 2013Advanced User Interface Design, Prototyping, & Evaluation 16

Evaluation Test with real users (participants) Low-cost techniques –expert evaluation (HE) CSE441 - Spring 2013Advanced User Interface Design, Prototyping, & Evaluation 17

How INFO 6410 Fits into the Computer Science Curriculum Most courses teach underlying technology –compilers, operating systems, databases, etc. INFO 6410 concerned w/ design & evaluation –technology is simply a tool to evaluate designs by prototyping –build skills that will be important upon graduation design & evaluation creating complex systems working on large teams communicating results CSE441 - Spring 2013Advanced User Interface Design, Prototyping, & Evaluation 18

The Projects 1.Pull 2.Cookable 3.Food Dude CSE441 - Spring 2013Advanced User Interface Design, Prototyping, & Evaluation 19