Stanford hci group / cs376 Design Processes and Tools Sharon Lin Bowen Li.

Slides:



Advertisements
Similar presentations
Tool-Support for Interdisciplinary and Collaborative User Interface Specification IADIS 2008 Amsterdam – Workgroup HCI University of Konstanz – Thomas.
Advertisements

Design, prototyping and construction
Rapid Prototyping Dimensions and terminology Non-computer methods
End-User Perceptions of Formal and Informal Representations of Web Sites Jason Hong Francis Li James Lin James Landay Group for User Interface Research.
Information Architecture Information Architecture (IA) is a process of identifying the objectives for building a Web site and then constructing a comprehensive.
Web Design: Processes, Tools, & Patterns Prof. James Landay EECS Dept., UC Berkeley IEOR 170, April 10, 2002.
Reference Prof. Saul Greenberg, University of Calgary, notes and articles.
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.
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
Prototyping By Greg Rogers. Agenda For Today  What is a prototype  Why prototype  What to prototype.
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.
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.
DENIM Reading Discussion Made for you by Sheila Vyas
Stanford hci group / cs376 u Jeffrey Heer · 5 May 2009 Design Methods: Prototyping.
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.
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
Louisa Lambregts, What Makes a Web Site Successful and Effective? Bottom Line... Site are successful if they meet goals/expectations.
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.
Paper Prototyping Source:
14 Chapter 11: Designing the User Interface. 14 Systems Analysis and Design in a Changing World, 3rd Edition 2 Identifying and Classifying Inputs and.
© 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 1 A Discipline of Software Design.
1 DENIM: An Informal Web Site Design Tool Inspired by Observations of Practice CS 376 – Research Topics in HCI 11/01/2005 Tony Tulathimutte.
Project Specification Al Futrell April 2001 Some slides from Mark Newman.
Computer –the machine the program runs on –often split between clients & servers Human-Computer Interaction (HCI) Human –the end-user of a program –the.
CSCD 487/587 Human Computer Interface Winter 2013 Lecture 17 Prototypes and Design.
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.
HCI – Prototyping. Why Prototype?  Prototyping is a well understood and used technique in design engineering where products are tested via a model prototype.
Prototyping CSCI 4800 Spring 2007 Kraemer. Learning Goals Understand the uses of different types of prototypes for different kinds of designs and be able.
Web Site Usability. Benefits of planning usability Increased user satisfaction, which translates directly to trust and brand loyalty Increased user productivity,
Prof. James A. Landay Computer Science Department Stanford University Spring 2015 CS 377 E : ENGELBART ’ S UNFINISHED LEGACY : DESIGNING SOLUTIONS TO GLOBAL.
We interact with documents in two separate worlds: the electronic world of the workstation, and the physical world of the desk. Interaction styles in.
The Prometheus-ROADMAP Methodology Lin Padgham in collaboration with Leon Sterling and Michael Winikoff School of Computer Science and IT, RMIT University,
The Design of Learning Environments BY: Rachel Rose Ulgado University of California, Irvine Anthropology, Informatics Mentors Professor Gillian Hayes Meg.
Software Engineering User Interface Design Slide 1 User Interface Design.
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.
SBD: Analyzing Requirements Chris North CS 3724: HCI.
© 2012 Adobe Systems Incorporated. All Rights Reserved. Copyright 2012 Adobe Systems Incorporated. All rights reserved. ® DESIGN PROJECT PRODUCTION PHASES.
Stanford hci group / cs376 u Scott Klemmer · 26 October 2006 Design Tools.
Design Tools Discussion Jae min John Chen Wu May 1, 2008.
Graphics and interface design Feng Liu Ph.D.. Outline Design Principles – What designer need to keep in mind Elements of design Where interface design.
Z556 Systems Analysis & Design Session 10 ILS Z556 1.
Working Technologically Early Stage 1 – Stage 3. Students evaluate by: recounting the steps taken to reach a final solution discussing their likes and.
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
Stanford hci group / cs147 u 27 November 2007 Ubiquitous Computing & “Natural” Interaction Scott Klemmer tas: Marcello Bastea-Forte,
Stanford hci group / cs376 Research Topics in Human-Computer Interaction Design Tools Ron B. Yeh 26 October 2004.
Overview Prototyping Construction Conceptual design Physical design Generating prototypes Tool support.
Information Architecture & Design Week 9 Schedule - Web Research Papers Due Now - Questions about Metaphors and Icons with Labels - Design 2- the Web -
What is a sketch? 1 Concepts (and selected visuals) from this slide deck are based on: -Buxton, B. (2007) Sketching User Experiences: Getting the Design.
User-Centered Design (UCD) Overview
SE 431 Human Computer Interactions Jamal Nasir. How to design & build good UIs UI Development process Usability goals User-centered design Design discovery.
Stanford hci group / cs October 2007 An Overview of Design Process Scott Klemmer tas: Marcello Bastea-Forte, Joel Brandt,
Lesson Objectives 1) Review the steps involved in problem solving 2) Review the stages of the System Life Cycle 3) Describe what prototyping is and the.
User-Centered Design Services for MSU Web Teams Sarah J. Swierenga, Director Usability & Accessibility Center MSU Webmasters 402 Computer Center February.
TH Everything You Need to Know About Storyboarding and Prototyping
Prototyping.
SBD: Analyzing Requirements
Design Tools Scott Klemmer · 26 October 2006.
Design Tools Jeffrey Heer · 7 May 2009.
Tangible Interaction & Augmented Reality
Project HE Assignment Web Site Design
Phases of Designing a Website
Computer Science Department
Presentation transcript:

stanford hci group / cs376 Design Processes and Tools Sharon Lin Bowen Li

Readings  Sitemaps, Storyboards, and Specifications: A Sketch of Web Site Design Practice – Mark Newman and James Landay  The Designers’ Outpost: A Tangible Interface for Collaborative Web Design – 2001  Scott Klemmer, Mark Newman, Ryan Farrell, Mark Bilezikjian, James Landay

Sitemaps, Storyboards, and Specifications: A Sketch of Web Site Design Practice  Interviews with 11 designers  Identify current web design practices for developing informal design tool  Brief intro to DENIM

Design Areas sitemap storyboard mockup

Design Process  Iterative refinement  Discovery, Design Exploration, Design Refinement, Production phases  Artifacts at different levels of detail  Sitemaps, Storyboards, Schematics, Mock-ups, Interactive Prototype  Presentations to client  Want useful feedback, also want to impress/please client  Earlier move towards electronic-based tools (?)

Feature Suggestions  Informal tool best in early design phases  Support multiple representations  Integration with other tools  Managing variations

DENIM

The Designers’ Outpost: A Tangible Interface for Collaborative Web Design

DENIM vs. Outpost DENIM  Individual  Targets Storyboards and Schematics (supports Sitemaps) Outpost  Collaborative  Targets Sitemaps

Design Study  Mock info architecture design task  5 design sessions  Conversation, observation, survey, video

Study Findings  Facilitator and Open Board style interactions  Outpost more appropriate for information architects than visual designers  Only explicit user actions should trigger visible system feedback  Interest in annotations and versioning  Capture and export of whiteboard important

What did you think of DENIM vs. Outpost?

Design artifacts: brainstorming tools or communication devices?

What is the role of technology in supporting “informal” interactions? How do you define “informal”?

What has changed from 2000 to 2009 in web design practices?

Communication with clients: problematic?

Findings applicable for other fields?