Prototyping &
Mockup software
Today’s Objectives
• Understand what is a prototype and why is important in interaction design process
• Overview/how-to of prototyping softwares
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
Case Study
+
http://www.candy.it/home/index.asp
Create a prototype for marketing purposes to be exposed to “Salone del Mobile 2012”
Function and navigation definition
Enviroment definition
Gesture definition
Implementation
Prototype
Monitorig and Setting
User testing and evaluation
Refining
Final Installation
Final users testing
Feedback and analysis
• After test, users filled a feedback form
Tot Uomini Donne
Population 100,0% 68,0% 32,0%
20-30 43,0% 39,7% 50,0%
30-40 25,0% 26,5% 21,9%
40-50 26,0% 30,9% 15,6%
50-60 6,0% 2,9% 12,5%
median mean stdev RDS%
FUN 4 4,25 0,77 18,1%
INTUITIVE 4 3,78 0,83 21,8%
NATURAL 4 3,47 0,89 25,7%
IRRITATING 2 2,02 0,71 35,3%
INCOMPREHENSIBLE 2 1,85 0,64 34,8%
TIRING 2 2,16 0,83 38,5%
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
Others Software
https://gomockingbird.com/
http://iplotz.com/index.php
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
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