Prototyping & Mockup software

Transcription

1 Prototyping & Mockup software

2 Today s Objectives Understand what is a prototype and why is important in interaction design process Overview/how-to of prototyping softwares 2

3 Focus

4 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

5 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

6 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

7 Prototyping process Establish prototype objectives Define prototype functionality Develop prototype Evaluate prototype Prototyping plan Outline definition Executable prototype Evaluation report

8 HOW TO PROTOTYPE A SHEEP

9 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.

10 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

11 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, )

12 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

13 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

14 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

15 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

16 Case Study

17 + Create a prototype for marketing purposes to be exposed to Salone del Mobile

18 Function and navigation definition

19 Enviroment definition

20 Gesture definition

21 Implementation

22 Prototype

23 Monitorig and Setting

24 User testing and evaluation

25 Refining

26 Final Installation

27 Final users testing

28 Feedback and analysis After test, users filled a feedback form Tot Uomini Donne Population 100,0% 68,0% 32,0% ,0% 39,7% 50,0% ,0% 26,5% 21,9% ,0% 30,9% 15,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%

29 MOCKUP AND WIREFRAME SOFTWARE

30 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

31 IPhone Mockup Specific for iphone/ipod Pros: Online, easy, fast, free Cons: Only one screen, few elements Commercial software:

32 Others Software

33 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 roducts/sketchflow_overview.aspx osoft/msdn-academic-alliance.html

34

35 Links Free Software Sketch Flow Tutorials