Stanford hci group / cs376 Research Topics in Human-Computer Interaction Design Tools Ron B. Yeh 26 October 2004.

Slides:



Advertisements
Similar presentations
User Experience Krista Van Laan. Agenda What is User Experience? How does a User Experience team support the rest of the organization? What processes.
Advertisements

Design, prototyping and construction
Chapter 11 Designing the User Interface
End-User Perceptions of Formal and Informal Representations of Web Sites Jason Hong Francis Li James Lin James Landay Group for User Interface Research.
Ch.6: Requirements Gathering, Storyboarding and Prototyping
Web Design: Processes, Tools, & Patterns Prof. James Landay EECS Dept., UC Berkeley IEOR 170, April 10, 2002.
Interface Design II JMA 462/562 TTH 4:30 – 5:45 College Hall 205.
Stanford hci group / cs376 research topics in human-computer interaction Tangible Interaction / Augmented Reality Scott Klemmer.
Human Computer Interaction
Stanford hci group / cs376 research topics in human-computer interaction Intelligent Display Techniques Scott Klemmer 06 December.
Stanford hci group / cs376 Research Topics in Human-Computer Interaction Design Tools 01 November 2005.
Development and Evaluation of Emerging Design Patterns for Ubiquitous Computing Eric Chung Carnegie Mellon Jason Hong Carnegie Mellon Madhu Prabaker University.
DENIM: Finding a Tighter Fit with Web Design Practice James Lin, Mark W. Newman, Jason I. Hong, James A. Landay April 6, 2000 CHI 2000, The Hague
ISP 666 Week 6 Prototyping. Design a Solution From task to system From abstract to concrete Task Models UI Presentation evaluation Conceptual Model System.
Combining Informal and Tangible Interfaces for Early Stages of Web Site Design Raecine Sapien Mentor: Mark Newman Professor: Dr. James Landay This presentation.
Stanford hci group / cs376 research topics in human-computer interaction Multimodal Interfaces Scott Klemmer 15 November 2005.
Stanford hci group / cs376 Design Processes and Tools Sharon Lin Bowen Li.
Midterm Exam Review IS 485, Professor Matt Thatcher.
Douglas K. van Duyne James A. Landay Jason I. Hong Using Design Patterns to Create Customer-Centered Web Sites.
SIMS 202 Information Organization and Retrieval Prof. Marti Hearst and Prof. Ray Larson UC Berkeley SIMS Tues/Thurs 9:30-11:00am Fall 2000.
1/20/20001 Human-Computer Interaction Research on the Endeavour Expedition James A. Landay Jack Chen, Jason Hong, Scott Klemmer, Francis Li, Mark Newman,
CS147 - Terry Winograd - 1 Lecture 9 – Prototyping Terry Winograd CS147 - Introduction to Human-Computer Interaction Design Computer Science Department.
1 Web Design Process & Patterns. 2 Outline Review Web design process Motivation for design patterns Web design patterns Home page pattern.
Stanford hci group / cs376 u Jeffrey Heer · 2 June 2009 Research Topics In Human-Computer Interaction Course Summary.
DENIM A Sketching Tool for Prototyping Web and Desktop UIs Mark Newman and Jimmy Lin Group for User Interface Research UC Berkeley July 8, 1999.
Mid-Term Exam Review IS 485, Professor Matt Thatcher.
Web Design cs414 spring Announcements Project status due Friday (submit pdf)
2/10/20031 Finding a Tighter Fit Between Tools & Practice for Web Design James A. Landay February 10, UW, CSE 501
Chapter 13: Designing the User Interface
1 Damask A Tool for Early-Stage Design and Prototyping of Multi-Device User Interfaces G r o u p f o r User Interface Research University of California.
Web Design Process CMPT 281. Outline How do we know good sites from bad sites? Web design process Class design exercise.
User Interface Design Tools for the Future Multimodal UI Research in the HCC James A. Landay Jason Hong, Scott Klemmer, Jimmy Lin, Mark Newman, & Anoop.
Web Design and Patterns CMPT 281. Outline Motivation: customer-centred design Web design introduction Design patterns.
1 440 Midterm Review Midterm in-class Tuesday, Nov 6.
Low-fi Prototyping. CSE490f - Autumn 2006User Interface Design, Prototyping, and Evaluation2 Hall of Fame or Shame? Password dialog in Eudora Pro for.
1 DENIM: An Informal Web Site Design Tool Inspired by Observations of Practice CS 376 – Research Topics in HCI 11/01/2005 Tony Tulathimutte.
Department of Informatics, UC Irvine SDCL Collaboration Laboratory Software Design and sdcl.ics.uci.edu 1 Informatics 121 Software Design I Lecture 12.
HCI 특론 (2010 Spring) Low-fi Prototyping. 2 Interface Hall of Shame or Fame? Amtrak Web Site.
Prof. James A. Landay Computer Science Department Stanford University Spring 2015 CS 377 E : ENGELBART ’ S UNFINISHED LEGACY : DESIGNING SOLUTIONS TO GLOBAL.
June 2004 User Interface Design, Prototyping, and Evaluation 1 Outline Low-fi prototyping Wizard of Oz technique Informal UI prototyping tools Hi-fi prototyping.
Prof. James A. Landay University of Washington Autumn 2008 Design Sketching * slides marked Buxton are courtesy of Bill Buxton, from his talk “ Why I Love.
Scott Klemmer Michael Thomsen Ethan Phelps-Goodman Robert Lee James Landay 23 April 2002 ACM SIGCHI Minneapolis, MN Where Do Web Sites Come From? Capturing.
Prof. James A. Landay University of Washington Autumn 2008 Rapid Prototyping November 10, 2008.
We interact with documents in two separate worlds: the electronic world of the workstation, and the physical world of the desk. Interaction styles in.
Generating Abstract User Interfaces from an Informal Design Adrien Coyette University of Louvain Information Systems Unit Louvain-la-Neuve BELGIUM.
We interact with documents in two separate worlds: the electronic world of the workstation, and the physical world of the desk. Interaction styles in these.
SketchWizard: Wizard of Oz Prototyping of Pen-Based User Interface Richard C. Davis 1 T. Scott Saponas 3 Michael Shilman 4 James A. Landay 2, 3 1 CS Division,
We interact with documents in two separate worlds: the electronic world of the workstation, and the physical world of the desk. Interaction styles in.
Stanford hci group / cs376 u Scott Klemmer · 26 October 2006 Design Tools.
Final Review 490F. What’s on the Final? Everything Lecture Slides Assignments/Project Readings Discussion Section Worth 25 % Bias toward topics covered.
Presenting Your Research Writing Abstracts, Creating Posters Jason I. Hong July 30, 2003 University of California Berkeley SUPERB 2003.
SILKWeb: A Sketching Tool for Informal Web Page Design Mark Newman, James Landay, Francis Li, Kalpana Joshi July 9, 1998 C&C Research Labs, NEC
Prof. James A. Landay Computer Science Department Stanford University Winter 2016 dt+UX 2 : USER EXPERIENCE DESIGN PROJECT Introduction & Course Overview.
Prof. James A. Landay University of Washington Spring 2008 Web Interface Design, Prototyping, and Implementation Low-fi Prototyping April 24, 2008.
Low-fidelity Prototyping. Outline Low-fidelity prototyping Wizard of OZ technique Informal user interfaces Sketching user interfaces electronically Informal.
Anywhere, Anytime, Anydevice Interfaces: Tools, Infrastructure, & Applications Summer 2002 BID/HCC Retreat for User Interface Research Group Prof. James.
1 CS 490JL Midterm Review Midterm in-class Tuesday, October 26 With thanks to Wai-Ling Ho-Ching.
Overview Prototyping Construction Conceptual design Physical design Generating prototypes Tool support.
Prof. James A. Landay University of Washington Autumn 2007 Low-fi Prototyping October 25, 2007.
©2001 Southern Illinois University, Edwardsville All rights reserved. Today System Design: Reading: CD Ch.s 14, 15, &16 Monday Midterm CS 321 Human-Computer.
HCI 특론 (2007 Fall) Low-fi Prototyping. 2 Hall of Fame or Shame? Password dialog in Eudora Pro for Mac.
Low-fi Prototyping. CSE490f - Autumn 2006User Interface Design, Prototyping, and Evaluation2 Hall of Fame or Shame? Password dialog in Eudora Pro for.
Design, prototyping and construction(Chapter 11).
Prototyping Creation of concrete but partial implementations of a system design to explore usability issues.
Informal PUIs: No Recognition Required James Landay Jason Hong Scott Klemmer James Lin Mark Newman.
Low-fi Prototyping November 2, 2006
Design, prototyping and construction
Design Tools Scott Klemmer · 26 October 2006.
Design Tools Jeffrey Heer · 7 May 2009.
Design, prototyping and construction
Presentation transcript:

stanford hci group / cs376 Research Topics in Human-Computer Interaction Design Tools Ron B. Yeh 26 October 2004

2 Design Tools Reading Research Papers  Selective Attention =)  Or alternatively, selective inattention to the details, or less important sections  Read with a purpose  Read with questions in mind  Read Abstract and Conclusion first  Scan through Figures/Captions first

26 October Design Tools Goals for this Quarter  CHI Student Poster Submission, OR  CHI Short Paper if more motivated =)

26 October Design Tools Project Milestone #1 -- November 4  Ideation -- Many designs brainstormed  sketches with little blurbs  storyboards  Evidence why solution you settle on is a good one  Contextual Inquiry?  Other evidence?  What goals does your interface serve?  See list from last Thursday (efficiency, safety, control…)  Describe a “user value” hypothesis, based on above  Propose a method to evaluate that hypothesis  this to

26 October Design Tools Best Practices for Designing Interfaces  Iterative design  Getting it right the first time is hard  Prototyping tools can be the key to success Design Test Analyze

26 October Design Tools Outline  Informal user interfaces  Informal tools for web site design  Informal tool for speech UI design  Informal tools for cross-device design

26 October Design Tools Early Stage User Interface Design  Brainstorming  put designs in a tangible form  Incomplete designs  illustrate important examples  Sketching & other informal representations important

26 October Design Tools Informal vs. Formal Representations  Informal visual representation  communicates “unfinished”  encourages creativity  faster to create  Formal visual representation  communicates “finished”  inhibits creativity (detailing)  slower to create

26 October Design Tools Informal User Interfaces  Take advantage of natural input modalities  speaking  writing  gesturing  sketching  Minimize recognition of the input  allow users to work & communicate naturally  document rather than transform

26 October Design Tools Informal UI Example  Sketchup Video [2 min] Sketchup Video

26 October Design Tools CrossWeaver Informal Prototyping & Evaluation Tools Denim Suede Outpost WebQuilt Damask

26 October Design Tools Outline  Informal user interfaces  Informal tools for web site design  Informal tool for speech UI design  Informal tools for cross-device design

26 October Design Tools Reprinted by permission from Contextual Design by Hugh Beyer & Karen Holtzblatt, InContext Enterprises, © Morgan Kaufmann, 1998  Interviews w/ 11 professional designers  Post-Its & large surfaces (i.e., affinity diagrams)  haptic UI  brainstorming  collaborative  persistent  immersive  hard to share, edit, make digital Investigation into Web Design: Information Architecture Comes First

26 October Design Tools Investigation into Web Design: Multiple Views  Designers create representations of sites at multiple levels of detail  Web sites are iteratively refined at all levels of detail Site MapsStoryboardsSchematicsMock-ups

26 October Design Tools Sketching All designers sketched... at all levels

26 October Design Tools Designers’ Outpost: A Tangible Interface for Designing Information Architectures  Combines the physical & virtual  physical post-its, virtual feedback  Supports existing practice  affordances of paper  collaboration  large, persistent representation  Adds advantages of e-media  editing, reuse, history, distribution  hand-off later to other tools

26 October Design Tools DENIM: Designing Web Sites by Sketching  Integrates multiple views  site map – storyboard – page sketch  Supports informal interaction  sketching,  recognizes pages & links, not content

26 October Design Tools Video OUTPOST & DENIM VideosOUTPOST & DENIM Videos [~3 minutes]

26 October Design Tools Outline  Informal user interfaces  Informal tools for web site design  Informal tool for speech UI design  Informal tools for cross-device design

26 October Design Tools SUEDE: Informal Prototyping for Speech-based UIs  Supports design practice  example scripts  Wizard of Oz  error simulation  iterative design ( design-test-analysis )  Informal user interface  no speech recognition or synthesis  need not be programming expert  fast & fluid design Read my importan t

26 October Design Tools

26 October Design Tools machine prompt user response

26 October Design Tools Video SUEDE VideoSUEDE Video [~2 minutes]

26 October Design Tools SUEDE Summary  SUEDE supports speech-based UI design  moving from concrete examples to abstractions  embeds iterative design  informal interface supports fast & fluid design  designers need not be speech technology experts  Status  downloaded over 1000 times  used by several companies for designing telephone-based speech UIs  Download at

26 October Design Tools Outline  Informal user interfaces  Informal tools for web site design  Informal tool for speech UI design  Informal tools for cross-device design

26 October Design Tools Design Patterns  Design is about finding solutions  unfortunately, designers often reinvent  hard to know how things were done before & to reuse solutions  design patterns allow designers to reuse what works well  First used in architecture [Alexander]  Communicate design problems & solutions  how to create a beer garden where people socialize…  how big doors should be & where…  how to use handles…  Not too general & not too specific  use solution “a million times over, without ever doing it the same way twice”

26 October Design Tools Web Design Patterns  Communicate design problems & solutions  how to make e-commerce sites where people return & buy…  how to create a shopping cart that supports check out…  how to create navigation bars for finding relevant content…

26 October Design Tools Pattern Solution  Captures essence on how to solve problem  Navigation bar  Generality of solution fits informal approach! First-level navigation Second-level navigation

26 October Design Tools Damask

26 October Design Tools Video Damask VideoDamask Video [~2.5 minutes]

26 October Design Tools Summary  Iterative design is the key to good UIs  Informal tools are the key to iterative design  Berkeley built several tools to support  Web Design (Outpost & Denim)  Speech UI Design (Suede)  Multimodal, Cross device UI Design (CrossWeaver & Damask)  Positive results from evaluations & community reaction

26 October Design Tools Much of this material is based on James Landay’s 2002 research overview talk