Upload
others
View
11
Download
0
Embed Size (px)
Citation preview
Prototyping &
Mockup software
Today’s Objectives
• Understand what is a prototype and why is important in interaction design process
• Overview/how-to of 3 prototyping software
2
Focus
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
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
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
Prototyping process
Establishprototypeobjectives
Defineprototypefunctionality
Developprototype
Evaluateprototype
Prototypingplan
Outlinedefinition
Executableprototype
Evaluationreport
HOW TO PROTOTYPE A SHEEP
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.
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
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,…)
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
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
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
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
MOCKUP AND WIREFRAME SOFTWARE
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
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
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
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
Others Software
https://gomockingbird.com/
http://iplotz.com/index.php
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