prototyping mockup software mockup...general definitions • mockup: a model of a design or a...
TRANSCRIPT
![Page 1: Prototyping Mockup software mockup...General Definitions • Mockup: a model of a design or a device, used for teaching, demonstration, design evaluation, promotion, and other purposes](https://reader030.vdocuments.us/reader030/viewer/2022040516/5e7612ac3d07111a17015df4/html5/thumbnails/1.jpg)
Prototyping &
Mockup software
![Page 2: Prototyping Mockup software mockup...General Definitions • Mockup: a model of a design or a device, used for teaching, demonstration, design evaluation, promotion, and other purposes](https://reader030.vdocuments.us/reader030/viewer/2022040516/5e7612ac3d07111a17015df4/html5/thumbnails/2.jpg)
Today’s Objectives
• Understand what is a prototype and why is important in interaction design process
• Overview/how-to of 3 prototyping software
2
![Page 3: Prototyping Mockup software mockup...General Definitions • Mockup: a model of a design or a device, used for teaching, demonstration, design evaluation, promotion, and other purposes](https://reader030.vdocuments.us/reader030/viewer/2022040516/5e7612ac3d07111a17015df4/html5/thumbnails/3.jpg)
Focus
![Page 4: Prototyping Mockup software mockup...General Definitions • Mockup: a model of a design or a device, used for teaching, demonstration, design evaluation, promotion, and other purposes](https://reader030.vdocuments.us/reader030/viewer/2022040516/5e7612ac3d07111a17015df4/html5/thumbnails/4.jpg)
General Definitions • Mockup: a model of a design or a device, used for teaching,
demonstration, design evaluation, promotion, and other purposes.
• Wireframe: also known as a page schematic or screen blueprint, is a visual guide that represents the skeletal framework of a website or an application. It focuses on “what a screen does, not what it looks like”. The wireframe shows the page layout , including interface elements and navigational systems, and how they work together, main focus lies in functionality, behavior, and priority of content.
• Prototype: an early sample or model built to test a concept or process or to act as a thing to be replicated or learned from. A mockup is called a prototype if it provides at least part of the functionality of a system and enables testing of a design.
Wikipedia
![Page 5: Prototyping Mockup software mockup...General Definitions • Mockup: a model of a design or a device, used for teaching, demonstration, design evaluation, promotion, and other purposes](https://reader030.vdocuments.us/reader030/viewer/2022040516/5e7612ac3d07111a17015df4/html5/thumbnails/5.jpg)
Why prototype?
• Communicate an Idea: – Stakeholders can see, hold, interact with a prototype more easily
than a document or a drawing
• Gather User Feedback – evaluation and feedback are central to interaction design
• Team members can communicate effectively
• Explore alternatives and refine a idea
• It encourages reflection: very important aspect of design
• Improve your decision-making: – Prototypes answer questions, and support designers in choosing
between alternatives
![Page 6: Prototyping Mockup software mockup...General Definitions • Mockup: a model of a design or a device, used for teaching, demonstration, design evaluation, promotion, and other purposes](https://reader030.vdocuments.us/reader030/viewer/2022040516/5e7612ac3d07111a17015df4/html5/thumbnails/6.jpg)
Why prototype?(2)
• Improved system usability, design quality, maintainability
• Misunderstandings between software users and developers are exposed
• Missing services may be detected and confusing services may be identified
• The system can support user training and system testing
50% of time-coding is used to develop user interface
![Page 7: Prototyping Mockup software mockup...General Definitions • Mockup: a model of a design or a device, used for teaching, demonstration, design evaluation, promotion, and other purposes](https://reader030.vdocuments.us/reader030/viewer/2022040516/5e7612ac3d07111a17015df4/html5/thumbnails/7.jpg)
Prototyping process
Establishprototypeobjectives
Defineprototypefunctionality
Developprototype
Evaluateprototype
Prototypingplan
Outlinedefinition
Executableprototype
Evaluationreport
![Page 8: Prototyping Mockup software mockup...General Definitions • Mockup: a model of a design or a device, used for teaching, demonstration, design evaluation, promotion, and other purposes](https://reader030.vdocuments.us/reader030/viewer/2022040516/5e7612ac3d07111a17015df4/html5/thumbnails/8.jpg)
HOW TO PROTOTYPE A SHEEP
![Page 9: Prototyping Mockup software mockup...General Definitions • Mockup: a model of a design or a device, used for teaching, demonstration, design evaluation, promotion, and other purposes](https://reader030.vdocuments.us/reader030/viewer/2022040516/5e7612ac3d07111a17015df4/html5/thumbnails/9.jpg)
Prototyping techniques • Evolutionary prototyping
– An approach to system development where an initial prototype is produced and refined through a number of stages to the final system
• Throw-away prototyping
– A prototype which is usually a practical implementation of the system is produced to help discover requirements problems and then discarded.
![Page 10: Prototyping Mockup software mockup...General Definitions • Mockup: a model of a design or a device, used for teaching, demonstration, design evaluation, promotion, and other purposes](https://reader030.vdocuments.us/reader030/viewer/2022040516/5e7612ac3d07111a17015df4/html5/thumbnails/10.jpg)
Evolutionary prototyping
• The system is developed as a series of increments that are delivered to the customer
• Accelerated delivery of the system – Rapid delivery and deployment are sometimes more important
than functionality or long-term software maintainability
• User engagement with the system – Not only is the system more likely to meet user requirements,
they are more likely to commit to the use of the system
• Management and maintenance problems – Continual change tends to corrupt system structure so
management is difficult and long-term maintenance is expensive
![Page 11: Prototyping Mockup software mockup...General Definitions • Mockup: a model of a design or a device, used for teaching, demonstration, design evaluation, promotion, and other purposes](https://reader030.vdocuments.us/reader030/viewer/2022040516/5e7612ac3d07111a17015df4/html5/thumbnails/11.jpg)
Evolutionary prototyping(2)
Evolutive (“horizontal”) approach
• Covers all major aspects of the system
• Omit “background aspects”, more related to the implementation (i.e. Performances, DB connection,…)
![Page 12: Prototyping Mockup software mockup...General Definitions • Mockup: a model of a design or a device, used for teaching, demonstration, design evaluation, promotion, and other purposes](https://reader030.vdocuments.us/reader030/viewer/2022040516/5e7612ac3d07111a17015df4/html5/thumbnails/12.jpg)
Evolutionary prototyping(3)
Incremental ( “vertical”) approach
• MODULAR approach to software development
• Used to underline only some parts of final system
• More manageable process and better system structure
![Page 13: Prototyping Mockup software mockup...General Definitions • Mockup: a model of a design or a device, used for teaching, demonstration, design evaluation, promotion, and other purposes](https://reader030.vdocuments.us/reader030/viewer/2022040516/5e7612ac3d07111a17015df4/html5/thumbnails/13.jpg)
Throw-away prototyping
• Many technology aspects are simulated • Used to “testing a idea" and INITIAL design
solutions • Used to understand the requirements • Iterative evaluation: system can be easily modified
and re-tested with users
![Page 14: Prototyping Mockup software mockup...General Definitions • Mockup: a model of a design or a device, used for teaching, demonstration, design evaluation, promotion, and other purposes](https://reader030.vdocuments.us/reader030/viewer/2022040516/5e7612ac3d07111a17015df4/html5/thumbnails/14.jpg)
Wizard of Oz • Someone features are performed by designer (“The Wizard”)
others by the application • Designer chose what feature of the system execute in base of
user interaction • The user thinks they are interacting with a computer, but a
developer is responding to output rather than the system. • Usually done early in design to understand users’ expectations
![Page 15: Prototyping Mockup software mockup...General Definitions • Mockup: a model of a design or a device, used for teaching, demonstration, design evaluation, promotion, and other purposes](https://reader030.vdocuments.us/reader030/viewer/2022040516/5e7612ac3d07111a17015df4/html5/thumbnails/15.jpg)
Throw-away prototyping(2)
• The prototype is developed from an initial specification, delivered for experiment then discarded
• The throw-away prototype should NOT be considered as a final system – Some system characteristics may have been left out
– There is no specification for long-term maintenance
– The system will be poorly structured and difficult to maintain
– The prototype is inevitably undocumented
– The system structure will be degraded through changes made during development
– Normal organisational quality standards may not have been applied
![Page 16: Prototyping Mockup software mockup...General Definitions • Mockup: a model of a design or a device, used for teaching, demonstration, design evaluation, promotion, and other purposes](https://reader030.vdocuments.us/reader030/viewer/2022040516/5e7612ac3d07111a17015df4/html5/thumbnails/16.jpg)
MOCKUP AND WIREFRAME SOFTWARE
![Page 17: Prototyping Mockup software mockup...General Definitions • Mockup: a model of a design or a device, used for teaching, demonstration, design evaluation, promotion, and other purposes](https://reader030.vdocuments.us/reader030/viewer/2022040516/5e7612ac3d07111a17015df4/html5/thumbnails/17.jpg)
Common features
• Template specific for different device and platform
• Drag-and-drop elements to compose pages
• Export project in different formats(Pdf, Png,..)
• Navigate in the project’s page
• Share project with client
• Collect feedback and annotation
• Add tasks for project members
![Page 18: Prototyping Mockup software mockup...General Definitions • Mockup: a model of a design or a device, used for teaching, demonstration, design evaluation, promotion, and other purposes](https://reader030.vdocuments.us/reader030/viewer/2022040516/5e7612ac3d07111a17015df4/html5/thumbnails/18.jpg)
IPhone Mockup
Specific for iphone/ipod
Pros: Online, easy, fast, free
Cons: Only one screen, few elements
http://iphonemockup.lkmc.ch/
Commercial software: http://builds.balsamiq.com
![Page 19: Prototyping Mockup software mockup...General Definitions • Mockup: a model of a design or a device, used for teaching, demonstration, design evaluation, promotion, and other purposes](https://reader030.vdocuments.us/reader030/viewer/2022040516/5e7612ac3d07111a17015df4/html5/thumbnails/19.jpg)
Pencil Project Firefox drawing extension
Pros: Multi-page document, Cross-platforms, Adding external objects
Cons: No a specific
template for mobile apps
http://pencil.evolus.vn/en-US/Home.aspx
![Page 20: Prototyping Mockup software mockup...General Definitions • Mockup: a model of a design or a device, used for teaching, demonstration, design evaluation, promotion, and other purposes](https://reader030.vdocuments.us/reader030/viewer/2022040516/5e7612ac3d07111a17015df4/html5/thumbnails/20.jpg)
Sketch Flow Integrated in Microsoft Expression Blend
Pros: page navigation, integrated feedback manager, easy-export feature, many template, free for students
Cons: only for windows
OS, RAM-hungry
http://www.microsoft.com/expression/products/SketchFlow_Overview.aspx http://www.asict.polimi.it/software/microsoft/msdn-academic-alliance.html
![Page 21: Prototyping Mockup software mockup...General Definitions • Mockup: a model of a design or a device, used for teaching, demonstration, design evaluation, promotion, and other purposes](https://reader030.vdocuments.us/reader030/viewer/2022040516/5e7612ac3d07111a17015df4/html5/thumbnails/21.jpg)
Others Software
https://gomockingbird.com/
http://iplotz.com/index.php
![Page 22: Prototyping Mockup software mockup...General Definitions • Mockup: a model of a design or a device, used for teaching, demonstration, design evaluation, promotion, and other purposes](https://reader030.vdocuments.us/reader030/viewer/2022040516/5e7612ac3d07111a17015df4/html5/thumbnails/22.jpg)
![Page 23: Prototyping Mockup software mockup...General Definitions • Mockup: a model of a design or a device, used for teaching, demonstration, design evaluation, promotion, and other purposes](https://reader030.vdocuments.us/reader030/viewer/2022040516/5e7612ac3d07111a17015df4/html5/thumbnails/23.jpg)
Links
Free Software
http://speckyboy.com/2010/01/11/10-completely-free-wireframe-and-mockup-applications/
http://iphoneized.com/2009/11/21-prototyping-mockup-wireframing-tools-iphone-app-development/
Sketch Flow Tutorials
• http://www.youtube.com/watch?v=Kng3iWbzMGo
• http://www.youtube.com/watch?v=vIdxeRxhO3c