You are on page 1of 63


MockupsDr. Kristina
7 paskaita

Interfeiso projektavimas ir panaudojamumo inžinerija (Soul Greenberg)

Articulate: Brainstorm Refined Completed
•who users are designs designs designs
Goals: •their key tasks

Psychology of Graphical
centered Participatory
everyday screen
system interaction
Evaluate things design Usability Field
User Interface testing testing
Methods: Participatory
involvement Task guidelines
scenario Style
User- Representation Heuristic
walk- guides
centered & metaphors evaluation

low fidelity high fidelity
prototyping prototyping
methods methods

Products: User and Throw-away Testable Alpha/beta
task paper prototypes systems or
descriptions prototypes complete

• Mockups
• Why?
• Examples
• The problem of functional fixation
• Interactive mockups
• Mockup tools
• Prorotypes
• Why?
• Tools

2016.03.15 ‹#›

15 ‹#› .03. Prototyping and construction • What is a prototype? • Why prototype? • Different kinds of prototyping low fidelity high fidelity • Compromises in prototyping vertical horizontal • Construction 2016.

What is a prototype? In other design fields a prototype is a small-scale model: • a miniature car • a miniature building or town • the example here comes from a 3D printer 2016.15 ‹#› .03.

g. PalmPilot) • a cardboard mock-up • a piece of software with limited functionality written in the target language or in another language 2016.15 ‹#› . What is a prototype? In interaction design it can be (among other things): • a series of screen sketches • a storyboard.03.e. a cartoon-like series of scenes • a Powerpoint slide show • a video simulating the use of a system • a lump of wood (e. i.

Why? Prototyping is a strategy for efficiently dealing with things that are hard to predict 2016.03.15 11:31 7 .

interact with a prototype more easily than a document or a drawing • Team members can communicate effectively • You can test out ideas for yourself • It encourages reflection • Prototypes answer questions. Why prototype? • To receive user evaluation and feedback • Stakeholders can see.15 ‹#› . and support designers in choosing between alternatives 2016.03. hold.

hci-class. Mock-ups and prototypes in project life cycle Details High fidelity prototypes Digital mock-ups Paper mock-ups Interaction mock-ups Project timeline Scot Klemmer. .

What to prototype? • Technical issues • Work flow. task design • Screen layouts and information display • Difficult. controversial. critical areas 2016.15 ‹#› .03.

03. Low-fidelity Prototyping • Uses a medium which is unlike the final medium.g. cardboard • Is quick. task sequences … ‘Post-it’ notes storyboards ‘Wizard-of-Oz’ 2016. e. cheap and easily changed • Examples: sketches of screens.15 ‹#› . paper.

” Source: “The Philosophy of the Handheld. and synchronizing a small block of wood with his PC. and Ed Colligan (Palm Computing) http://en. checking appointments.wikipedia. Jeff Hawkins.” Wired Magazine. “If I wanted to check the calendar I'd take it out and press the wooden button. California: People thought Jeff Hawkins was crazy when they saw him taking notes. October 1999. pretending all the while that the block was a handheld computer. Donna Dubinsky.SANTA .

com 13 .id-book.Test multiple prototypes simultaneously to get most value www. 14 .Paper prototyping www.

15 .

etc) • If something is difficult to simulate (progress indicators.Paper prototyping tips • Keep all your materials in one place! • Small interface widgets tend to get lost or damaged easily • Work quickly and make reusable components (buttons. right mouse menus. have the user ask if it is available and then verbally describe the interaction 16 . hyperlinks).

2014 17 .Paper mock-up for home communication systems Benyon. Designing Interactive systems. Pearson Education Limited.

Scenarios in paper mockups 18 .

Card-based prototypes • Index cards (3 X 5 inches) • Each card represents one screen or part of screen • Often used in website development 2016.03.15 ‹#› . 20 . Try Prototypes with People • Need a picture • Test multiple • Emphasis on conversation www.

but a developer is responding to output rather than the system. ‘Wizard-of-Oz’ prototyping • The user thinks they are interacting with a ‹#› . • Usually done early in design to understand users’ expectations • What is ‘wrong’ with this approach? • Kramer movie application User >Blurb blurb >Do this >Why? 2016.

valdomas kompiuterio. Mock-ups IDEO: kairėje . 2000) . Kodak DC-210 skaitmeninė kamera (Buchenau.pirmojo skaitmeninio aparato maketas. Suri. dešinėje – galutinis produktas.

Mockup is a question to stakeholders. designers . users.

Goal: to get informal opinion • Showing mockup for the users • Pavyzdžiui: • Observe the interaction • Make conclusions 25 .youtube.

com/software/wirefra me-software. Wireframes • interface layout http://www.smartdraw.htm 26 .

Low-fidelity prototiping Advantages Disadvantages • Lower development cost • Limited error checking • Evaluate multiple-design • Poor detailed specification to concepts code to • Useful-communication device • Facilitator driven • Address screen layout issues • Proof-of-concept 2016.03.15 27 .

Interactive mockups • Active buttons • Essential use cases .

Quantity or quality? www. 2001 . Bayles and .hci-class.

What is better? Parallel Sequential Mockup Mockup Mockup Feedback feedback feedback Mockup Mockup Feedback Mockup (Dow. Schwartz. Schwartz. Altringer. Klemmer. Fortuna. 2011) .

Product needs engineering 2016. 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.15 ‹#› .03.

Filtering dimensions of prototyping 2016.03.15 ‹#› .

2008 33 .Filtering out different aspects of design Lim et al.

Manifestation dimensions of prototyping 2016.03.15 ‹#› .

2008 35 . Lim et al.Example: Samsung VI660 prototipes The paper prototyping setup and its use situation.

Example: telefono Samsung VI660 prototypes The computer-based prototype and its test setup Lim et al. 2008 36 .

03. 2008 2016. The fully functional prototype (Samsung VI660) Lim et al.15 37 .

2008 38 .Lim et al.

robustness. portability. maintainability. etc • Product must be engineered Evolutionary prototyping ‘Throw-away’ prototyping 2016. Construction • Taking the prototypes (or learning from them) and creating a whole • Quality must be attended to: usability (of course). integrity. reliability.15 ‹#› . efficiency.03.

in/ • Flinto .com/hype/ Adobe Edge Animate . superior to most digital tools in terms of flexibility. the next step is to move to something more interactive and higher in fidelity. • Balsamiq - • If you do not know how to code. After working on paper.03. • Hybrid paper/digital tools allow you take a picture of a paper sketch and animate it: • Pop .https://popapp. here are some tools that generate HTML5 prototypes: • Tumult Hype -http://tumult.https://www. speed and ease of Google’s Web Designer . • Apple Keynote or MS PowerPoint orGoogle presentation .15 11:31 40 .http://keynotopia.Developing interactive prototypes • Paper is a great prototyping 2016.

that will be understandable by the users in the manner intended” • Don’t move to a solution too quickly. Iterate. iterate.15 ‹#› . Conceptual design: from requirements to design • Transform user requirements/needs into a conceptual model • “a description of the proposed system in terms of a set of integrated ideas and concepts about what it should do.03. iterate • Consider alternatives: prototyping helps 2016. behave and look like.

Developing the aesthetics in design • Mood boards • a collage of the ideas and inspiration 44 .

15 ‹#› .03. Overview • Prototyping and construction • Conceptual design • Using scenarios in design • Generating prototypes • Support for design 2016.

03.15 ‹#› .Using scenarios in conceptual design • Express proposed or imagined situations • Used throughout design in various ways • scripts for user evaluation of prototypes • concrete examples of tasks • as a means of co-operation across professional boundaries • Plus and minus scenarios to explore extreme cases 2016.

Example plus scenario S. Bødker (1999) 53 .

Bødker (1999) 54 . Example plus scenario S.

03.Generate storyboard from scenario 2016.15 ‹#› .

Generate card-based prototype from use case 2016.15 ‹#› .03.

• Prototyping and construction

• Conceptual design

• Scenarios in design

• Support for design

2016.03.15 ‹#›

Support for design
• Patterns for interaction design
• individual patterns
• pattern languages
• pattern libraries
• Open source systems and components

• Tools and environments

2016.03.15 ‹#›

Rapid prototyping tools
• Balsamiq Mockups 59

mozilla. • Firefox plugin 60 .

Prototype Composer • Windows.html . freeware

com/ 62 . Mockingbird • Internet prototyping tool https://gomockingbird.

com/ . http://iplotz. iPlotz • Limited version .free.

com/ . WireframeSketcher • Eclipse plug-in http://wireframesketcher.

03. Visual Basic. • Danger that users think they have a full system……. and Smalltalk.see compromises 2016. • For a high-fidelity software prototype common environments include Macromedia Director. 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.15 ‹#› .

More expensive to develop Fully interactive. Inefficient for proof-of-concept Clearly defines navigational designs scheme Not effective for requirements Use for exploration and test gathering Look and fell of final product Serves as living specification Marrketing and sales tool 2016. High-fidelity prototyping Advantages Disadvantages Complex functionality.15 66 .03. Time-consuming to create User-driven.

pavyzdžiui: • Axure: MIF kompiuterinėse klasėse. • Justinmind Prototyper. High fidelity prototype • Look and feel of final product • Effective for testing with users • Variety of tools. nemokamas 1 mėn. Flinto. UXPin: 30 dienų • Invision. Weebly – nemokama apribota versija 67 . • Balsamiq -http://balsamiq. • Other tools • Google’s Web Designer .com/ • Apple Keynote ar MS PowerPoint ar Google presentation - http://keynotopia. Adobe Edge Animate • Flinto .adobe. HTML5 prototype • Tumult Hype -http://tumult. .com/ • Do not require programming skillsprogramuoti.Other tools • Pop .com/ • http://www.

lumzy.Mockup tools • 69 • • Not up to date but still usefull list • http://c2.

15 ‹#› .03. so prototype appropriately • Construction: the final product must be engineered appropriately • Conceptual design (the first step of design) • Consider interaction types and interface types to prompt creativity • Storyboards can be generated from scenarios • Card-based prototypes can be generated from use cases 2016. Summary • Different kinds of prototyping are used for different purposes and at different stages • Prototypes answer questions.

pp.) Bringing Design to Software. Eric Bergman • Bødker. Preece (2011). S. 2000. Scenarios in user-centered design – setting the stage for reflection and action. Tampere. October 23-27. L. Proceedings of the 32nd Hawaii International Conference on System Sciences. T. In T. NY. References • Rogers. 61–76. Winograd. (1996) Profile: IDEO. • Hartfield. Winograd (ed. ACM Press. 71 . Wizard-of-Oz prototyping for cooperative interaction design of graphical user interfaces. • Molin. 425-428 • S. Interacting with Computers.setting the stage for reflection and action. Bødker (1999) Scenarios in User-Centred Design . Sharp. Designing the PalmPilot: A Conversation with Rob Haitani. Interaction design: Beyond Human Computer Interaction. • Bergmann. Haitani (2000). Chapter 4 in Information Appliances and Beyond.13 (1). In Proceedings of NordiCHI 2004. Wiley. 1999. Finland. B.

W. 72 . A. Magazine Computers in Entertainment (CIE) – SPECIAL SSUE: Media Arts and Games archive Vol. pp. 7 Is. ACM Press. Lim. J. Suri. Stephanidis. Techniques. E.References • Y. Feb 2009. 7(4). C. In Proceedings of DIS 2000.. Marcus. E. (2000) Experience prototyping. 17-19 • D. • Buchenau. Designing universally accessible games. ACM Transactions on Computer-Human Interaction 15(2). Design Interactive systems: Processes. Methods. 1.K. The Anatomy of Prototypes: Prototypes as Filters. Savidis. GOULD (2000) Crosscurrents: Cultural Dimensions and Global Web User-Interface Design. M. Interactions. Stolterman.F. • A. Grammenos. Prototypes as Manifestations of Design Ideas.