Early Stage Prototyping - Stanford University

1y ago
12 Views
2 Downloads
2.22 MB
10 Pages
Last View : 21d ago
Last Download : 3m ago
Upload by : Farrah Jaffe
Transcription

2016/10/20 dt UX – Design Thinking for User Experience Design, Prototyping & Evaluation Autumn 2016 Prof. James A. Landay Stanford University DESIGN THINKING FOR USER EXPERIENCE DESIGN PROTOTYPING EVALUATION Hall of Fame or Shame? Early Stage Prototyping Prof. James A. Landay Computer Science Department Stanford University Autumn 2016 October 20, 2016 Paper iPad App By 53 2 Hall of Fame or Shame? Hall of Fame or Shame? Paper iPad App By 53 3 4 Hall of Fame! iOS 6 Maps By Apple Inc. Good – pens feel natural & the app is extremely good for its only real purpose: idea generation / notation – once 3 basic gestures are learned, they become a natural part of rapid ideation – look & feel is important here as the tools are “pleasurable” & work as expected Bad – gestures are not easily discoverable and require a short initial tutorial Paper iPad App Hall of Fame or Shame? By 53 2016/10/20 dt UX: Design Thinking for User Experience Design, Prototyping & Evaluation 5 2016/10/20 dt UX: Design Thinking for User Experience Design, Prototyping & Evaluation 6 1

2016/10/20 dt UX – Design Thinking for User Experience Design, Prototyping & Evaluation Autumn 2016 Prof. James A. Landay Stanford University Hall of Shame! Hall of Shame! Good – beautiful alternative to the competition & generally easier to read – turn by turn directions are efficient, clear & functions well – in general Bad – despite any aesthetics, the data is wrong & sparse, meaning, it does not perform the one task it should do well – getting from A to B iOS 6 Maps By Apple Inc. 2016/10/20 dt UX: Design Thinking for User Experience Design, Prototyping & Evaluation Google Maps Data vs iOS6 Maps Data 7 Hall of Shame! 2016/10/20 dt UX: Design Thinking for User Experience Design, Prototyping & Evaluation 8 Potentially Hall of Fame Apple crowd sourced data A clear example of where no matter how good a design may be, without its most important function in this case, correct data, the interface is useless 2016/10/20 The UI for problem reporting is well designed With so many users have potential to fix data rapidly it has gotten much better! iOS 6 Maps By Apple Inc. dt UX: Design Thinking for User Experience Design, Prototyping & Evaluation 9 Outline 2016/10/20 dt UX: Design Thinking for User Experience Design, Prototyping & Evaluation 10 Design Process: Exploration Storyboarding Discovery Types of prototypes Design Exploration Low-fi prototyping Design Refinement Conducting a low-fi test Expand Design Space Brainstorming Sketching Storyboarding Prototyping Production 2016/10/20 dt UX: Design Thinking for User Experience Design, Prototyping & Evaluation 11 2016/10/20 dt UX: Design Thinking for User Experience Design, Prototyping & Evaluation 12 2

dt UX – Design Thinking for User Experience Design, Prototyping & Evaluation Autumn 2016 Prof. James A. Landay Stanford University 2016/10/20 Sketches & Storyboards Where do storyboards come from? – film & animation Give you a “script” of important events – leave out the details – concentrate on the important interactions 2016/10/20 dt UX: Design Thinking for User Experience Design, Prototyping & Evaluation 13 2016/10/20 dt UX: Design Thinking for User Experience Design, Prototyping & Evaluation 14 Sketches & Storyboards in UX Design 2016/10/20 dt UX: Design Thinking for User Experience Design, Prototyping & Evaluation 15 2016/10/20 dt UX: Design Thinking for User Experience Design, Prototyping & Evaluation 16 Sketches & Storyboards in UX Design Ink Chat Starts to tell a story, but still describes the design 2016/10/20 dt UX: Design Thinking for User Experience Design, Prototyping & Evaluation 17 2016/10/20 dt UX: Design Thinking for User Experience Design, Prototyping & Evaluation 18 3

dt UX – Design Thinking for User Experience Design, Prototyping & Evaluation Autumn 2016 Prof. James A. Landay Stanford University Sketches & Storyboards in UX Design 2016/10/20 What is a Prototype? Task: “A prototype is an early sample or model built to test a concept or process or to act as a thing to be replicated or learned from.” – Wikipedia Task Flow #1 a working representation of a final artifact on/102716262 2016/10/20 dt UX: Design Thinking for User Experience Design, Prototyping & Evaluation 19 2016/10/20 dt UX: Design Thinking for User Experience Design, Prototyping & Evaluation Types of Prototypes Types of Prototypes Prototypes are concrete representations of a design Prototypes are concrete representations of a design Prototype dimensions Prototype dimensions – representation: form of the prototype – representation: form of the prototype off-line (paper) or on-line (software) off-line (paper) or on-line (software) – precision: level of detail (e.g., informal or polished) – interactivity: watch-only vs. fully interactive – precision: level of detail (e.g., informal or polished) – interactivity: watch-only vs. fully interactive fixed prototype (video clips) fixed-path prototype (each step triggered by specified actions) fixed prototype (video clips) fixed-path prototype (each step triggered by specified actions) – at extreme could be 1 path or possibly more open (e.g., Denim) – at extreme could be 1 path or possibly more open (e.g., Denim) open prototype (real, but limited error handling or performance) open prototype (real, but limited error handling or performance) – evolution: expected life cycle of prototype – evolution: expected life cycle of prototype e.g., throw away or iterative PJ McCormick 2016/10/20 dt UX: Design Thinking for User Experience Design, Prototyping & Evaluation 20 e.g., throw away or iterative Karem Suer 21 2016/10/20 dt UX: Design Thinking for User Experience Design, Prototyping & Evaluation Fidelity in Prototyping Hi-fi Prototypes Warp Fidelity refers to the level of detail High fidelity? Perceptions of the tester/reviewer 22 – representation communicates “finished” – prototypes look like the final product comments focus on color, fonts, & alignment Time – encourage precision Low fidelity? specifying details takes more time – artists renditions with many details missing Creativity – lose track of the big picture 2016/10/20 dt UX: Design Thinking for User Experience Design, Prototyping & Evaluation 23 2016/10/20 dt UX: Design Thinking for User Experience Design, Prototyping & Evaluation 24 4

dt UX – Design Thinking for User Experience Design, Prototyping & Evaluation Autumn 2016 Prof. James A. Landay Stanford University Why Use Low-fi Prototypes? The Basic Materials Traditional methods take too long Large, heavy, white paper (A3 or 11x17) 5x8 in./A5/A6 index cards Tape, stick glue, correction tape Pens & markers (many colors & sizes) Post-its Overhead transparencies Scissors X-acto knives, etc. – sketches prototype evaluate iterate Can instead simulate the prototype – sketches evaluate iterate – sketches act as prototypes designer “plays computer”; others observe & record Kindergarten building skills – allows non-programmers to participate 2016/10/20 dt UX: Design Thinking for User Experience Design, Prototyping & Evaluation 2016/10/20 dt UX: Design Thinking for User Experience Design, Prototyping & Evaluation 2016/10/20 dt UX: Design Thinking for User Experience Design, Prototyping & Evaluation 2016/10/20 25 2016/10/20 dt UX: Design Thinking for User Experience Design, Prototyping & Evaluation 26 /sizes/l/in/photostream/ 27 2016/10/20 dt UX: Design Thinking for User Experience Design, Prototyping & Evaluation 28 29 2016/10/20 dt UX: Design Thinking for User Experience Design, Prototyping & Evaluation 30 “Prototyping for Tiny Fingers” by Rettig ESP 5

dt UX – Design Thinking for User Experience Design, Prototyping & Evaluation Autumn 2016 Prof. James A. Landay Stanford University 2016/10/20 ZAPT 2016/10/20 Cookable dt UX: Design Thinking for User Experience Design, Prototyping & Evaluation 31 2016/10/20 dt UX: Design Thinking for User Experience Design, Prototyping & Evaluation 33 2016/10/20 dt UX: Design Thinking for User Experience Design, Prototyping & Evaluation 35 2016/10/20 Cookable 2016/10/20 32 dt UX: Design Thinking for User Experience Design, Prototyping & Evaluation 34 dt UX: Design Thinking for User Experience Design, Prototyping & Evaluation 36 Cookable Cookable 2016/10/20 dt UX: Design Thinking for User Experience Design, Prototyping & Evaluation Cookable 6

2016/10/20 dt UX – Design Thinking for User Experience Design, Prototyping & Evaluation Autumn 2016 Prof. James A. Landay Stanford University Who is Zuki? Who is Zuki? 2016/10/20 dt UX: Design Thinking for User Experience Design, Prototyping & Evaluation 37 2016/10/20 dt UX: Design Thinking for User Experience Design, Prototyping & Evaluation 38 Administrivia 2016/10/20 Administrivia dt UX: Design Thinking for User Experience Design, Prototyping & Evaluation 40 POV, HMW, EP Assignment #2 Web Team Survey Written Report: avg 90, std. dev. 5 – https://goo.gl/forms/qnqe9lZ03sQiFdju2 SFMOMA Field Trip, Sunday, Nov. 13 – http://tinyurl.com/sfmoma147 Team Presentation: avg 90, std. dev. 5 Assignment #5 – Low-fi Prototype & Pilot Usability Test – 15-20 rough sketches of different design realizations (everyone on team contributes) Individual Presenter: avg 93, std. dev. 4 think different modalities (e.g., visual, speech, watch) or different visual UIs (gestures, taps, etc.) will do most of this in studio – pick best 2 realizations & storyboard more – pick best realization & add details to storyboard – build low-fi prototype of the best & test it w/ 3 target participants 2016/10/20 dt UX: Design Thinking for User Experience Design, Prototyping & Evaluation 41 2016/10/20 dt UX: Design Thinking for User Experience Design, Prototyping & Evaluation 42 7

dt UX – Design Thinking for User Experience Design, Prototyping & Evaluation Autumn 2016 Prof. James A. Landay Stanford University 2016/10/20 Constructing the Model Set a deadline – don’t think too long - build it! TEAM MEETINGS Draw a window frame on large paper Put different screen regions on cards – anything that moves, changes, appears/disappears Ready response for any user action – e.g., have those pull-down menus already made Use photocopier/printer to make many versions 2016/10/20 dt UX: Design Thinking for User Experience Design, Prototyping & Evaluation 43 Constructing the Model 2016/10/20 dt UX: Design Thinking for User Experience Design, Prototyping & Evaluation dt UX: Design Thinking for User Experience Design, Prototyping & Evaluation dt UX: Design Thinking for User Experience Design, Prototyping & Evaluation 44 Constructing the Model 45 Constructing the Model 2016/10/20 2016/10/20 2016/10/20 dt UX: Design Thinking for User Experience Design, Prototyping & Evaluation 46 Constructing the Model 47 2016/10/20 dt UX: Design Thinking for User Experience Design, Prototyping & Evaluation 48 8

dt UX – Design Thinking for User Experience Design, Prototyping & Evaluation Autumn 2016 Prof. James A. Landay Stanford University Constructing the Model 2016/10/20 Preparing for a Test Select your “customers” – understand background of intended users – use a questionnaire to get the people you need – don’t use friends or family I think existing “customers” are OK (Rettig disagrees) Prepare scenarios that are – typical of the product during actual use – make prototype support these (small, yet broad) Practice to avoid “bugs” 2016/10/20 dt UX: Design Thinking for User Experience Design, Prototyping & Evaluation 49 Conducting a Test 2016/10/20 dt UX: Design Thinking for User Experience Design, Prototyping & Evaluation 50 Conducting a Test Four roles – greeter – puts users at ease & gets data – facilitator – only team member who speaks gives instructions & encourages thoughts, opinions – computer – knows application logic & controls it always simulates the response, w/o explanation – observers – take notes & recommendations 2016/10/20 dt UX: Design Thinking for User Experience Design, Prototyping & Evaluation 51 2016/10/20 dt UX: Design Thinking for User Experience Design, Prototyping & Evaluation 52 JAL2 Conducting a Test Evaluating Results Four roles Sort & prioritize observations – greeter – puts users at ease & gets data – facilitator – only team member who speaks – what was important? – lots of problems in the same area? gives instructions & encourages thoughts, opinions – computer – knows application logic & controls it always simulates the response, w/o explanation Create a written report on findings – observers – take notes & recommendations – gives agenda for meeting on design changes Typical session is 1 hour – preparation, the test, debriefing 2016/10/20 dt UX: Design Thinking for User Experience Design, Prototyping & Evaluation Make changes & iterate 53 2016/10/20 dt UX: Design Thinking for User Experience Design, Prototyping & Evaluation 54 9

dt UX – Design Thinking for User Experience Design, Prototyping & Evaluation Autumn 2016 Prof. James A. Landay Stanford University Advantages of Low-fi Prototyping Problems with Low-fi Prototypes Takes only a few hours “Computer” inherently buggy Slow compared to real app – no expensive equipment needed – timings not accurate Hard to implement some functionality Can test multiple alternatives – pulldowns, feedback, drag, viz – fast iterations Won’t look like final product – sometimes hard to recognize widgets number of iterations is tied to final quality End-users can’t use by themselves Almost all interaction can be faked (Wizard of Oz method) 2016/10/20 2016/10/20 dt UX: Design Thinking for User Experience Design, Prototyping & Evaluation – not in context of user’s work environment 55 2016/10/20 dt UX: Design Thinking for User Experience Design, Prototyping & Evaluation 56 Summary Commercial Tools Prototypes are a concrete representation of a design or final product Low-fi testing allows us to quickly iterate Balsamiq Mockups see tutorial here es/107999 – get feedback from users & change right away POP Reflector 2.0 2016/10/20 dt UX: Design Thinking for User Experience Design, Prototyping & Evaluation 57 Further Reading 2016/10/20 dt UX: Design Thinking for User Experience Design, Prototyping & Evaluation 58 Next Time Prototyping Lecture Books – Watch, Critique & Vote on Concept Videos – Mid-term course evaluation – Paper Prototyping: The Fast and Easy Way to Design and Refine User Interfaces, by Carolyn Snyder, Morgan Kaufmann, 2003 Articles – “Prototyping for Tiny Fingers” by Marc Rettig, in Communications of the ACM, 1994 – “Using Paper Prototypes to Manage Risk” by Carolyn Snyder, http://world.std.com/ uieweb/paper.htm – “The Perils of Prototyping” by Alan Cooper, .htm No Reading Project – 15-20 sketches of 3-5 design realizations in studio – Pick the top two & storyboard those – Pick the top 1 & build/test low-fi prototypes using 3 key tasks for next week’s studio presentation Recruit representative participants now! 2016/10/20 dt UX: Design Thinking for User Experience Design, Prototyping & Evaluation 59 2016/10/20 dt UX: Design Thinking for User Experience Design, Prototyping & Evaluation 60 10

Prototype dimensions - representation: form of the prototype off-line (paper) or on-line (software) - precision: level of detail (e.g., informal or polished) - interactivity: watch-only vs. fully interactive fixed prototype (video clips) fixed-path prototype (each step triggered by specified actions)

Related Documents:

SEISMIC: A Self-Exciting Point Process Model for Predicting Tweet Popularity Qingyuan Zhao Stanford University qyzhao@stanford.edu Murat A. Erdogdu Stanford University erdogdu@stanford.edu Hera Y. He Stanford University yhe1@stanford.edu Anand Rajaraman Stanford University anand@cs.stanford.edu Jure Leskovec Stanford University jure@cs.stanford .

Computer Science Stanford University ymaniyar@stanford.edu Madhu Karra Computer Science Stanford University mkarra@stanford.edu Arvind Subramanian Computer Science Stanford University arvindvs@stanford.edu 1 Problem Description Most existing COVID-19 tests use nasal swabs and a polymerase chain reaction to detect the virus in a sample. We aim to

Rapid Prototyping 101 1 Rapid Prototyping 101 Master Basic Prototyping Concepts. 3330 N. State Road North Vernon N 4265 Telephone: (812) 346-5188 Fax: (812) 346-35 mail:fiwesalesdecaturmold.com Rapid Prototyping 101 1 CLASS 105 MOLD: Prototypes Cycles: Not exceeding 500

Thank you for your interest in the CY8CKIT-147 PSoC 4100PS Prototyping Kit. The PSoC 4100PS prototyping kit is designed as an easy-to-use and inexpensive prototyping platform. The PSoC4100PS Prototyping Kit supports the PSoC 4100PS device family, delivering a complete system solution for a wide range of embedded applications at a very low cost.

Domain Adversarial Training for QA Systems Stanford CS224N Default Project Mentor: Gita Krishna Danny Schwartz Brynne Hurst Grace Wang Stanford University Stanford University Stanford University deschwa2@stanford.edu brynnemh@stanford.edu gracenol@stanford.edu Abstract In this project, we exa

Stanford University Stanford, CA 94305 bowang@stanford.edu Min Liu Department of Statistics Stanford University Stanford, CA 94305 liumin@stanford.edu Abstract Sentiment analysis is an important task in natural language understanding and has a wide range of real-world applications. The typical sentiment analysis focus on

dt UX - Design Thinking for User Experience Design, Prototyping & Evaluation Autumn 2015 Prof. James A. Landay, Stanford University October 8, 2015 October 8, 2015 dt UX: Design Thinking for User Experience Design, Prototyping & Evaluation 31 Musistant October 8, 2015 dt UX: Design Thinking for User Experience Design, Prototyping & Evaluation 32

50 TRX mining cost), with stage 2 beginning once total mined reaches 2M tokens. The mining cost breakdown for each stage is the following: Stage #: Mining Cost, Stage Beginning Token Supply Stage 1 (beginning): 50 TRX, 100K Stage 1: 50 TRX, 1M Stage 2: 200 TRX, 2M Stage 3: 450 TRX, 3M Stage 4: 800 TRX, 4M Stage 5: 1.25K TRX, 5M