cria les4 prototyping.pptx engels

7/31/2019 CRIA Les4 Prototyping.pptx Engels

1/29

Create a Rich Internet Application

Lesson 5 Prototyping

Informatica Communicatie Academie

Hogeschool Arnhem Nijmegen


2/29

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 argumentsYou know the four dimensions of a prototype

You know the three types ofprototypes

You know the assignment for the following lesson.


3/29

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


4/29

Use Case Diagram


5/29

Use Case Diagram INCLUDE

The Use Case Rent A Bike WILL contain Register Profile

and Payment.


6/29

Use Case Diagram (EXTEND)

The Use Case Rent A Bike WILL contain Register Profile

The Use Case Payment CAN contain CreditCard and/or

IDEAL.


7/29

Use Case Diagram Include and Extend


8/29

Prototype?

Aworking model created to demonstrate or test crucialaspects of a programwithout creating a fullydetailedprogram.

Adding details and content incrementallyto advancing

stages of prototypes is one process for creating successfulapplications

Getting it right the first time is a myth

~ Jared Spool


9/29

Prototyping?

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


10/29

Prototyping en RIA

Rich Internet Application newconcepts

newforms of interaction

newwidgets (interface elements)

thus

user is not (always) able to react from his (previous)experience

designer cannot take as granted that the user willunderstand the design


11/29

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


12/29

Advantages

Product is really designed in stead of delivered at theend

Supports development of ideas

End user is leading

Experimenting is allowed!

Early stage: costs are low. Results give a clear picturefor the rest of the design process.

Later on: Experimenting is no longer needed. Easierprogress in youre project.


13/29

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


14/29

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


15/29

Disadvantages

Apposed feelings of Prototyping

What will the customer think about a (not) finishedprototype?

Let us start! No time to waste. In the end we will face alltime limits and constraints.

It leads to discussions which I dont like.

I know exactly what works and what not. Ive read aboutthese topics.


16/29

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?

Checktask analysis

Checkconcept, interaction and interface

Later on

Choices about design issues and technical issues


17/29

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?


18/29

1. Breadth (horizontally)

Percentage of the total functionality of the prototype

Some breadth is needed to givethe user a realistic impression

of the application (underconstruction)

Consideration: how much breadth is needed?

Breadth = work = result?


19/29

2. Depth (vertical)

Level in which some functionalities are realized

Only a few branches are realizedin depth

For example: the completion ofa financial transaction


20/29

3. Look

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


21/29

4. Interaction

How realistic are the interactions in relationship to thepossible end result?

Pointing, clicking, sliding?


22/29

Types

High Fidelity

Interface works

(dreamweaver, frontpage, flash, director, visual studio, )

Mid Fidelity

(interactieve) Slideshow

(powerpoint, visio, axure, serena )

LowFidelity

Paper prototype

(paper, marker, tape, scissor, )


23/29

Low Fidelity


24/29

Mid Fidelity


25/29

Comparison of prototyping methods


26/29

Prototype creation

Purpose

What is the purpose of the prototype? What do you want totest?

Consequences

Which dimensions will your prototype support?

Method

Which method will you use realizingyoure prototype?

Start working on assignment 04


27/29

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

Prototyping movies
http://redir.aspx/?C=6b4e98abf8504e0184f9914c232c35a5&URL=http://vimeo.com/13377903http://redir.aspx/?C=6b4e98abf8504e0184f9914c232c35a5&URL=http://www.youtube.com/watch?v=NueRhgISweE&feature=channelhttp://redir.aspx/?C=6b4e98abf8504e0184f9914c232c35a5&URL=http://www.youtube.com/watch?v=NueRhgISweE&feature=channelhttp://redir.aspx/?C=6b4e98abf8504e0184f9914c232c35a5&URL=http://www.youtube.com/watch?v=PDLOmoQj4H0http://redir.aspx/?C=6b4e98abf8504e0184f9914c232c35a5&URL=http://www.youtube.com/watch?v=OiaPNlR5A4I&feature=relatedhttp://redir.aspx/?C=6b4e98abf8504e0184f9914c232c35a5&URL=http://www.youtube.com/watch?v=OiaPNlR5A4I&feature=relatedhttp://redir.aspx/?C=6b4e98abf8504e0184f9914c232c35a5&URL=http://www.youtube.com/watch?v=OiaPNlR5A4I&feature=relatedhttp://redir.aspx/?C=6b4e98abf8504e0184f9914c232c35a5&URL=http://www.youtube.com/watch?v=PDLOmoQj4H0http://redir.aspx/?C=6b4e98abf8504e0184f9914c232c35a5&URL=http://www.youtube.com/watch?v=PDLOmoQj4H0http://redir.aspx/?C=6b4e98abf8504e0184f9914c232c35a5&URL=http://www.youtube.com/watch?v=NueRhgISweE&feature=channelhttp://redir.aspx/?C=6b4e98abf8504e0184f9914c232c35a5&URL=http://www.youtube.com/watch?v=NueRhgISweE&feature=channelhttp://redir.aspx/?C=6b4e98abf8504e0184f9914c232c35a5&URL=http://www.youtube.com/watch?v=NueRhgISweE&feature=channelhttp://redir.aspx/?C=6b4e98abf8504e0184f9914c232c35a5&URL=http://vimeo.com/13377903http://redir.aspx/?C=6b4e98abf8504e0184f9914c232c35a5&URL=http://vimeo.com/13377903


28/29

Demos

http://www.serena.com/products/prototype-composer/content/screencast/Serena_Prototype_Composer_skin.swf

http://www.axure.com/features

http://www.carettasoftware.com/guidesignstudio/gui-design-studio-demo.html

http://iphoneized.com/2009/11/21-prototyping-mockup-wireframing-tools-iphone-app-

development/ https://pidoco.com/en/guided-video-tour-wireframe

http://iplotz.com/web/files/videotour/index.html

l
http://www.serena.com/products/prototype-composer/content/screencast/Serena_Prototype_Composer_skin.swfhttp://www.serena.com/products/prototype-composer/content/screencast/Serena_Prototype_Composer_skin.swfhttp://www.serena.com/products/prototype-composer/content/screencast/Serena_Prototype_Composer_skin.swfhttp://www.serena.com/products/prototype-composer/content/screencast/Serena%20Prototype%20Composer%20skin.swfhttp://www.axure.com/featureshttp://www.carettasoftware.com/guidesignstudio/gui-design-studio-demo.htmlhttp://www.carettasoftware.com/guidesignstudio/gui-design-studio-demo.htmlhttp://iphoneized.com/2009/11/21-prototyping-mockup-wireframing-tools-iphone-app-development/http://iphoneized.com/2009/11/21-prototyping-mockup-wireframing-tools-iphone-app-development/http://iphoneized.com/2009/11/21-prototyping-mockup-wireframing-tools-iphone-app-development/https://weboffice.han.nl/owa/redir.aspx?C=97eaea83ba4e436d967e934f4dcba1e3&URL=https://pidoco.com/en/guided-video-tour-wireframehttp://iplotz.com/web/files/videotour/index.htmlhttp://iplotz.com/web/files/videotour/index.htmlhttps://weboffice.han.nl/owa/redir.aspx?C=97eaea83ba4e436d967e934f4dcba1e3&URL=https://pidoco.com/en/guided-video-tour-wireframehttps://weboffice.han.nl/owa/redir.aspx?C=97eaea83ba4e436d967e934f4dcba1e3&URL=https://pidoco.com/en/guided-video-tour-wireframehttps://weboffice.han.nl/owa/redir.aspx?C=97eaea83ba4e436d967e934f4dcba1e3&URL=https://pidoco.com/en/guided-video-tour-wireframehttps://weboffice.han.nl/owa/redir.aspx?C=97eaea83ba4e436d967e934f4dcba1e3&URL=https://pidoco.com/en/guided-video-tour-wireframehttps://weboffice.han.nl/owa/redir.aspx?C=97eaea83ba4e436d967e934f4dcba1e3&URL=https://pidoco.com/en/guided-video-tour-wireframehttps://weboffice.han.nl/owa/redir.aspx?C=97eaea83ba4e436d967e934f4dcba1e3&URL=https://pidoco.com/en/guided-video-tour-wireframehttps://weboffice.han.nl/owa/redir.aspx?C=97eaea83ba4e436d967e934f4dcba1e3&URL=https://pidoco.com/en/guided-video-tour-wireframehttp://iphoneized.com/2009/11/21-prototyping-mockup-wireframing-tools-iphone-app-development/http://iphoneized.com/2009/11/21-prototyping-mockup-wireframing-tools-iphone-app-development/http://iphoneized.com/2009/11/21-prototyping-mockup-wireframing-tools-iphone-app-development/http://iphoneized.com/2009/11/21-prototyping-mockup-wireframing-tools-iphone-app-development/http://iphoneized.com/2009/11/21-prototyping-mockup-wireframing-tools-iphone-app-development/http://iphoneized.com/2009/11/21-prototyping-mockup-wireframing-tools-iphone-app-development/http://iphoneized.com/2009/11/21-prototyping-mockup-wireframing-tools-iphone-app-development/http://iphoneized.com/2009/11/21-prototyping-mockup-wireframing-tools-iphone-app-development/http://iphoneized.com/2009/11/21-prototyping-mockup-wireframing-tools-iphone-app-development/http://iphoneized.com/2009/11/21-prototyping-mockup-wireframing-tools-iphone-app-development/http://iphoneized.com/2009/11/21-prototyping-mockup-wireframing-tools-iphone-app-development/http://iphoneized.com/2009/11/21-prototyping-mockup-wireframing-tools-iphone-app-development/http://iphoneized.com/2009/11/21-prototyping-mockup-wireframing-tools-iphone-app-development/http://iphoneized.com/2009/11/21-prototyping-mockup-wireframing-tools-iphone-app-development/http://iphoneized.com/2009/11/21-prototyping-mockup-wireframing-tools-iphone-app-development/http://www.carettasoftware.com/guidesignstudio/gui-design-studio-demo.htmlhttp://www.carettasoftware.com/guidesignstudio/gui-design-studio-demo.htmlhttp://www.carettasoftware.com/guidesignstudio/gui-design-studio-demo.htmlhttp://www.carettasoftware.com/guidesignstudio/gui-design-studio-demo.htmlhttp://www.carettasoftware.com/guidesignstudio/gui-design-studio-demo.htmlhttp://www.carettasoftware.com/guidesignstudio/gui-design-studio-demo.htmlhttp://www.carettasoftware.com/guidesignstudio/gui-design-studio-demo.htmlhttp://www.axure.com/featureshttp://www.serena.com/products/prototype-composer/content/screencast/Serena%20Prototype%20Composer%20skin.swfhttp://www.serena.com/products/prototype-composer/content/screencast/Serena_Prototype_Composer_skin.swfhttp://www.serena.com/products/prototype-composer/content/screencast/Serena_Prototype_Composer_skin.swfhttp://www.serena.com/products/prototype-composer/content/screencast/Serena_Prototype_Composer_skin.swfhttp://www.serena.com/products/prototype-composer/content/screencast/Serena_Prototype_Composer_skin.swf


29/29

Prototyping Tools

Read article Balancing fidelityin prototyping

See: http://www.guuui.com/issues/03_05.php

Or Google: CaCoo

Visio

Axure

Serena

Flash Catalyst
http://www.guuui.com/issues/03_05.phphttp://www.guuui.com/issues/03_05.php

cria les4 prototyping.pptx engels

Documents