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
Establish Define Develop Evaluate prototype prototype prototype prototype objectives functionality
Prototyping Outline Executable Evaluation plan definition prototype report 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 +
Create a prototype for marketing purposes to be exposed to “Salone del Mobile 2012” http://www.candy.it/home/index.asp 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/p roducts/SketchFlow_Overview.aspx http://www.asict.polimi.it/software/micr osoft/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