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