design, prototyping and construction
DESCRIPTION
Design, prototyping and construction. Readings: ID-book, Chap. 11 (through 11.3) Also, Prototyping for Tiny Fingers http://doi.acm.org/10.1145/175276.175288 Also, Java.net article (from 2003), Six Signs That You Should Use Paper Prototyping. Four Old Slides. For review - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: Design, prototyping and construction](https://reader036.vdocuments.us/reader036/viewer/2022062323/56815265550346895dc099a1/html5/thumbnails/1.jpg)
Design, prototyping and construction
Readings: ID-book, Chap. 11 (through 11.3)
Also, Prototyping for Tiny Fingers http://doi.acm.org/10.1145/175276.175288
Also, Java.net article (from 2003), Six Signs That You Should Use Paper Prototyping
![Page 2: Design, prototyping and construction](https://reader036.vdocuments.us/reader036/viewer/2022062323/56815265550346895dc099a1/html5/thumbnails/2.jpg)
Four Old Slides
• For review• Remember these ideas?
![Page 3: Design, prototyping and construction](https://reader036.vdocuments.us/reader036/viewer/2022062323/56815265550346895dc099a1/html5/thumbnails/3.jpg)
A model for interaction design
Evaluate
(Re)Design
Identify needs/ establish
requirements
Build an interactive version
Final product
![Page 4: Design, prototyping and construction](https://reader036.vdocuments.us/reader036/viewer/2022062323/56815265550346895dc099a1/html5/thumbnails/4.jpg)
What is User-Centered Design?
• An approach to UI development and system development.
• Focuses on understanding:– Users, and– Their goals and tasks, and– The environment (physical, organizational,
social)
• Pay attention to these throughout development
![Page 5: Design, prototyping and construction](https://reader036.vdocuments.us/reader036/viewer/2022062323/56815265550346895dc099a1/html5/thumbnails/5.jpg)
ISO on User-centered Design
• ISO 13407 describes human-centered design processes for interactive systems
• Principles of human-centered design:– Active involvement of users– Appropriate allocation of function between
user and system– Iteration of design solutions– Multidisciplinary design teams
![Page 6: Design, prototyping and construction](https://reader036.vdocuments.us/reader036/viewer/2022062323/56815265550346895dc099a1/html5/thumbnails/6.jpg)
ISO on User-centered Design (2)
• Essential activities in human-centered design:– Understand and specify the context of use– Specify the user and organizational
requirements– Produce design solutions (prototypes)– Evaluate designs with users against
requirements
![Page 7: Design, prototyping and construction](https://reader036.vdocuments.us/reader036/viewer/2022062323/56815265550346895dc099a1/html5/thumbnails/7.jpg)
![Page 8: Design, prototyping and construction](https://reader036.vdocuments.us/reader036/viewer/2022062323/56815265550346895dc099a1/html5/thumbnails/8.jpg)
What is a prototype?
• What do you think of when you hear “prototype”?
• What kinds of prototypes have you seen anywhere?– in other fields or disciplines?– on television?
• What are they “for”?
![Page 9: Design, prototyping and construction](https://reader036.vdocuments.us/reader036/viewer/2022062323/56815265550346895dc099a1/html5/thumbnails/9.jpg)
What is a prototype?• In other design fields a prototype is a
small-scale model:a miniature cara miniature building or town
• Exists for some purpose– Show the “concept” to some stakeholders– Get feedback about some aspect– Test somehow
• E.g. a wing in a wind-tunnel
![Page 10: Design, prototyping and construction](https://reader036.vdocuments.us/reader036/viewer/2022062323/56815265550346895dc099a1/html5/thumbnails/10.jpg)
Prototyping and Software
• Do software companies do this?– Sometimes do it well– But sometimes the prototype is…
Version 1.0!
• Constantine and Lockwood:“Software is the only engineering field that throws together prototypes and then attempts to sell them as delivered goods.”
![Page 11: Design, prototyping and construction](https://reader036.vdocuments.us/reader036/viewer/2022062323/56815265550346895dc099a1/html5/thumbnails/11.jpg)
What is a prototype for us?In HCI / interaction design it can be (among other things):
a series of screen sketchesa storyboard, i.e. a cartoon-like series of scenes a Powerpoint slide showa video simulating the use of a systema lump of wood (e.g. PalmPilot)a cardboard mock-upa piece of software with limited functionality written in the target language or in another language
![Page 12: Design, prototyping and construction](https://reader036.vdocuments.us/reader036/viewer/2022062323/56815265550346895dc099a1/html5/thumbnails/12.jpg)
Why prototype in general?• Evaluation and feedback are central to interaction design• Developers can test feasibility of ideas with team, users• Stakeholders can see, hold, interact with a prototype more easily than a document or a drawing• Team members and users can communicate effectively• To validate existing / other requirements• It encourages reflection: very important aspect of design • Prototypes answer questions, and support designers in choosing between alternatives
![Page 13: Design, prototyping and construction](https://reader036.vdocuments.us/reader036/viewer/2022062323/56815265550346895dc099a1/html5/thumbnails/13.jpg)
What to Prototype and Why• Prototyping reduces uncertainty
– It can be a major tool for risk management– Apply on whatever you might be uncertain
about!
• Prototyping technical issues– E.g. run-time issues
• Prototyping to establish requirements– Users “see” functionality
• Prototyping for usability concerns– Our concern in this course
![Page 14: Design, prototyping and construction](https://reader036.vdocuments.us/reader036/viewer/2022062323/56815265550346895dc099a1/html5/thumbnails/14.jpg)
When and at What Level
• For SW, you might prototype at various times in the lifecycle– Different goals, different techniques
• Conceptual Design• Interaction Design• Screen Design
![Page 15: Design, prototyping and construction](https://reader036.vdocuments.us/reader036/viewer/2022062323/56815265550346895dc099a1/html5/thumbnails/15.jpg)
Benefits of Prototyping Early
• Exploration and evaluation of different design options
• Increase communication among users and developers– Rapid feedback on ideas and changes
• Identify problems and issues before construction (expensive)
![Page 16: Design, prototyping and construction](https://reader036.vdocuments.us/reader036/viewer/2022062323/56815265550346895dc099a1/html5/thumbnails/16.jpg)
Prototyping: Conceptual Design
• Early in development• Explore high-level issues
– Different conceptual models– Interaction styles– User needs and characteristics– Usability goals
• High-level representations– Far from final code or GUIs
![Page 17: Design, prototyping and construction](https://reader036.vdocuments.us/reader036/viewer/2022062323/56815265550346895dc099a1/html5/thumbnails/17.jpg)
Prototyping: Interaction Design• Later in development• Focus on user work-flows
– Tasks and scenarios you’ve identified• Might focus at the screen (or page) level.
Possibly like this:– identify screens, pages, activities– Organize these in groups– Define flows or transitions between them
• Involve users in evaluation• Representations
– Still probably not much like final code or GUIs
![Page 18: Design, prototyping and construction](https://reader036.vdocuments.us/reader036/viewer/2022062323/56815265550346895dc099a1/html5/thumbnails/18.jpg)
Prototyping: Screen Design
• Before development• Define and refine screens (pages)
– Blue-prints for final physical design
• User evaluation– Both achieving tasks and navigation, and
other usability criteria (as we’ve studied)
• Representations– Low-fidelity or high-fidelity prototypes
![Page 19: Design, prototyping and construction](https://reader036.vdocuments.us/reader036/viewer/2022062323/56815265550346895dc099a1/html5/thumbnails/19.jpg)
Low-fidelity Prototyping•Uses a medium which is unlike the final medium, e.g. paper, cardboard
•Is quick, cheap and easily changed
•Examples:sketches of screens, task sequences, etc‘Post-it’ notesstoryboards
![Page 20: Design, prototyping and construction](https://reader036.vdocuments.us/reader036/viewer/2022062323/56815265550346895dc099a1/html5/thumbnails/20.jpg)
Storyboards
•Often used with scenarios, bringing more detail, and a chance to role play
•It is a series of sketches showing how a user might progress through a task using the device
•Used early in design
![Page 21: Design, prototyping and construction](https://reader036.vdocuments.us/reader036/viewer/2022062323/56815265550346895dc099a1/html5/thumbnails/21.jpg)
Sketching
• Sketching is important to low-fidelity prototyping
• Don’t be inhibited about drawing ability. Practice simple symbols
• Can use post-its, photo-copied widgets, etc.
![Page 22: Design, prototyping and construction](https://reader036.vdocuments.us/reader036/viewer/2022062323/56815265550346895dc099a1/html5/thumbnails/22.jpg)
•Index cards, post-its•Index cards (3 X 5 inches) •Each card represents one screen•Often used in website development
Using Office Supplies
![Page 23: Design, prototyping and construction](https://reader036.vdocuments.us/reader036/viewer/2022062323/56815265550346895dc099a1/html5/thumbnails/23.jpg)
Using Office Supplies
• Post-its, index cards– Can represent one screen, one page– Color coded– Draw on them– Group them– Put them on a wall or whiteboard,
connect them with string or lines• Write-on tape, clear film• And so on… See Rettig’s article
![Page 24: Design, prototyping and construction](https://reader036.vdocuments.us/reader036/viewer/2022062323/56815265550346895dc099a1/html5/thumbnails/24.jpg)
Rettig’s “Prototyping for Tiny Fingers”
• “To get a a good idea, get lots of ideas.”
• Problems with hi-fi prototyping:– too easy to focus on “fit and finish”– developers resist changing software– SW prototype sets expectations– Bug in SW prototype kills an evaluation
![Page 25: Design, prototyping and construction](https://reader036.vdocuments.us/reader036/viewer/2022062323/56815265550346895dc099a1/html5/thumbnails/25.jpg)
Paper Prototyping on YouTube
• A non-cooperative evaluation (think-silently?) of a paper prototype for a webmail system:http://www.youtube.com/watch?v=GrV2SZuRPv0
• Children's coloring site (talk aloud protocol for evaluation http://www.youtube.com/watch?v=9wQkLthhHKA
• Corel: evaluates multiple interface prototypes and shows user reactions to prototypeshttp://www.youtube.com/watch?v=ppnRQD06ggY
• A photograph processing kiosk (say at CVS or Walmart):http://www.youtube.com/watch?v=jkvqLd-CMyY
• Prototype for an iPhone app:http://www.youtube.com/watch?v=V8LNDqMIapY
![Page 26: Design, prototyping and construction](https://reader036.vdocuments.us/reader036/viewer/2022062323/56815265550346895dc099a1/html5/thumbnails/26.jpg)
Office supplies? Seriously?
• You may decide it matters to have users “execute” the prototype– If so, you need screens, menus, etc. that
you can move around– Draw, or cut-out printed, nicer versions
• Or, you don’t need to “execute”. You just need drawing for presentation– Tools like Balsamiq Mockups
http://www.balsamiq.com
![Page 27: Design, prototyping and construction](https://reader036.vdocuments.us/reader036/viewer/2022062323/56815265550346895dc099a1/html5/thumbnails/27.jpg)
![Page 28: Design, prototyping and construction](https://reader036.vdocuments.us/reader036/viewer/2022062323/56815265550346895dc099a1/html5/thumbnails/28.jpg)
Storyboards
• Storyboards are:– a low fidelity visual representation where– steps or actions represented by panels,
like a comic book
• Goals are to– flesh out the scenarios in an interaction
design– effectively communicate with users or
stakeholders
![Page 29: Design, prototyping and construction](https://reader036.vdocuments.us/reader036/viewer/2022062323/56815265550346895dc099a1/html5/thumbnails/29.jpg)
Principles and Variations
• (As usual in HCI) storyboards should be “real” and “representational” rather than “abstract” or “complete”
• Used in different ways at different phases– Early: focus on user tasks, work-flow, context,
etc.– Later: lo-fi drawing of screens, menus, etc.
• Principles:– Describe a scenario -- focused on interaction– Contains explanations, notes, etc.
![Page 30: Design, prototyping and construction](https://reader036.vdocuments.us/reader036/viewer/2022062323/56815265550346895dc099a1/html5/thumbnails/30.jpg)
• Example from UIDE book, p. 119
• Shows– workflow of mail
merging– who’s involved,
responsibilities, etc.
![Page 31: Design, prototyping and construction](https://reader036.vdocuments.us/reader036/viewer/2022062323/56815265550346895dc099a1/html5/thumbnails/31.jpg)
• This shows high-level of view of users involved in other storyboards
From: Usability Case Studies, http://ucs.ist.psu.edu
![Page 32: Design, prototyping and construction](https://reader036.vdocuments.us/reader036/viewer/2022062323/56815265550346895dc099a1/html5/thumbnails/32.jpg)
• Lo-fi interface sketches– Annotated with scenario/execution info
From: Usability Case Studies, http://ucs.ist.psu.edu
![Page 33: Design, prototyping and construction](https://reader036.vdocuments.us/reader036/viewer/2022062323/56815265550346895dc099a1/html5/thumbnails/33.jpg)
• Storyboard for a website– for
photographers
• Sequence of pages– based on clicks
• Explanations / annotations
From book: Designing Interactive Systems, 2005
![Page 34: Design, prototyping and construction](https://reader036.vdocuments.us/reader036/viewer/2022062323/56815265550346895dc099a1/html5/thumbnails/34.jpg)
High-fidelity prototyping•Uses materials that you would expect to be in
the final product.
•Prototype looks more like the final system
than a low-fidelity version.
•For a high-fidelity software prototype
common environments include Macromedia
Director, Visual Basic, and Smalltalk.
•Danger that users think they have a full
system…….see compromises
![Page 35: Design, prototyping and construction](https://reader036.vdocuments.us/reader036/viewer/2022062323/56815265550346895dc099a1/html5/thumbnails/35.jpg)
High-fidelity Prototyping
• Benefits– More realistic– Closer to final product
• Good for developers and users
– Can collect metrics• Limitations
– More expensive, less rapid– Reluctance to change– See Rettig’s list
![Page 36: Design, prototyping and construction](https://reader036.vdocuments.us/reader036/viewer/2022062323/56815265550346895dc099a1/html5/thumbnails/36.jpg)
Compromises in prototyping
•All prototypes involve compromises•For software-based prototyping maybe there is a slow response? sketchy icons? limited functionality? •Two common types of compromise
• ‘horizontal’: provide a wide range of functions, but with little detail• ‘vertical’: provide a lot of detail for only a few functions
•Compromises in prototypes mustn’t be ignored. Product needs engineering
![Page 37: Design, prototyping and construction](https://reader036.vdocuments.us/reader036/viewer/2022062323/56815265550346895dc099a1/html5/thumbnails/37.jpg)
Possible Problems with Prototyping
• Pressure to enhance prototype to become delivered system– From client– From management
• Both see code, see almost-working “system”• Why not use the prototype?• Prototype built for quick updates, so...
– No design, so hard to maintain– Ugly code, no error checking– Wrong environment
![Page 38: Design, prototyping and construction](https://reader036.vdocuments.us/reader036/viewer/2022062323/56815265550346895dc099a1/html5/thumbnails/38.jpg)
And then… Construction •Taking the prototypes (or learning from them) and creating a final product
•Quality must be attended to: usability (of course), reliability, robustness, maintainability, integrity, portability, efficiency, etc
•Product must be engineered
Evolutionary prototyping
‘Throw-away’ prototyping