Prototyping Mockup software - BeeP · General Definitions • Mockup: a model of a design or a...

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