Create a Rich Internet Application

Lesson 5 Prototyping

Informatica Communicatie Academie Hogeschool Arnhem Nijmegen

Learning aims

At the end of this lesson:

You know what extends and includes are in Use cases You know what a prototype is You can defend the use of prototypes with arguments You know the four dimensions of a prototype You know the three types of prototypes You know the assignment for the following lesson.

Contents

What is an extend or an include in a UseCase? What is prototyping? Advantages and Disadvantages When and what?

Type of prototypes Dimensions Fidelity Assignment

Use Case Diagram

Use Case Diagram INCLUDE

The Use Case Rent A Bike WILL contain Register Profile and Payment.

Use Case Diagram (EXTEND)

The Use Case Rent A Bike WILL contain Register Profile The Use Case Payment CAN contain CreditCard and/or IDEAL.

Use Case Diagram Include and Extend

Prototype?

A working model created to demonstrate or test crucial aspects of a program without creating a fully detailed program. Adding details and content incrementally to advancing stages of prototypes is one process for creating successful applications Getting it right the first time is a myth ~ Jared Spool

Prototyping?

Rapid development and testing of prototypes of new information system applications in an interactive, iterative process, involving developers and users

Prototyping en RIA

Rich Internet Application new concepts new forms of interaction new widgets (interface elements) thus user is not (always) able to react from his (previous) experience designer cannot take as granted that the user will understand the design

Prototype
Is (sometimes) not (!) Part of the end result (unless.) A prototype has a limited preservability (expiration date) Prototyping = waste of time? Work on something which will not be part of the end product

An additional step in the design process Higher costs? Making changes/improvements afterwards is more expensive.
Iterative design progress in steps

Advantages

Product is really designed in stead of delivered at the end Supports development of ideas End user is leading

Experimenting is allowed! Early stage: costs are low. Results give a clear picture for the rest of the design process. Later on: Experimenting is no longer needed. Easier progress in youre project.

Advantages
During systems development: usability tests Does the user understand our system? Does it work? Remember: Customers and executives are not users! Good for team dynamics Designers work together in an early stage and in discussion Is a spider in the design team Everybody can say something about the prototype

Advantages
Gives focus It is difficult for a user to mention out of the blue all requirements Prototype: makes it easier for the user to mention the things that are missing Understandable Less abstract than technical specifications Seeing is believing Reassuring Customers and users are eager to see things Convince the user that he is understood

Disadvantages

Apposed feelings of Prototyping What will the customer think about a (not) finished prototype? Let us start! No time to waste. In the end we will face all time limits and constraints. It leads to discussions which I dont like. I know exactly what works and what not. Ive read about these topics.

When and what?

When do you use prototyping? Useful during the whole design process Essential to plan from the start At the start What does the user want? Check task analysis Check concept, interaction and interface Later on Choices about design issues and technical issues

Dimensions

The four dimensions of a prototype breadth depth look interaction Choices depend on what you are aiming for.. What do you want to know and measure?

1. Breadth (horizontally)

Percentage of the total functionality of the prototype

Some breadth is needed to give the user a realistic impression of the application (under construction)
Consideration: how much breadth is needed? Breadth = work = result?

2. Depth (vertical)

Level in which some functionalities are realized

Only a few branches are realized in depth

3. Look

In what way does the prototype look at the end result? Font, color, pictures.

4. Interaction

How realistic are the interactions in relationship to the possible end result? Pointing, clicking, sliding?

Types

High Fidelity Interface works (dreamweaver, frontpage, flash, director, visual studio, ) Mid Fidelity (interactieve) Slideshow (powerpoint, visio, axure, serena ) Low Fidelity Paper prototype (paper, marker, tape, scissor, )

Low Fidelity

Mid Fidelity

Comparison of prototyping methods

Prototype creation

Purpose What is the purpose of the prototype? What do you want to test? Consequences Which dimensions will your prototype support? Method Which method will you use realizing youre prototype?

Start working on assignment 04

Prototyping movies

Prototyping for Elmo's Monster Maker iPhone App. http://vimeo.com/13377903 Open Source 3-D Printer Turns Designs Into Objects http://www.youtube.com/watch?v=NueRhgISweE&feature=chan nel Rapid Prototyping (3d printer) http://www.youtube.com/watch?v=PDLOmoQj4H0

Failure: The Secret to Success (Honda) http://www.youtube.com/watch?v=OiaPNlR5A4I&feature=related

Demos

http://www.serena.com/products/prototypecomposer/content/screencast/Serena_Prototype_Comp oser_skin.swf http://www.axure.com/features http://www.carettasoftware.com/guidesignstudio/guidesign-studio-demo.html http://iphoneized.com/2009/11/21-prototypingmockup-wireframing-tools-iphone-appdevelopment/ https://pidoco.com/en/guided-video-tour-wireframe http://iplotz.com/web/files/videotour/index.html

Prototyping Tools

Read article Balancing fidelity in prototyping See: http://www.guuui.com/issues/03_05.php Or Google: CaCoo Visio Axure Serena Flash Catalyst