View
220
Download
0
Category
Preview:
Citation preview
7/31/2019 CRIA Les4 Prototyping.pptx Engels
1/29
Create a Rich Internet Application
Lesson 5 Prototyping
Informatica Communicatie Academie
Hogeschool Arnhem Nijmegen
7/31/2019 CRIA Les4 Prototyping.pptx Engels
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.
7/31/2019 CRIA Les4 Prototyping.pptx Engels
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
7/31/2019 CRIA Les4 Prototyping.pptx Engels
4/29
Use Case Diagram
7/31/2019 CRIA Les4 Prototyping.pptx Engels
5/29
Use Case Diagram INCLUDE
The Use Case Rent A Bike WILL contain Register Profile
and Payment.
7/31/2019 CRIA Les4 Prototyping.pptx Engels
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/31/2019 CRIA Les4 Prototyping.pptx Engels
7/29
Use Case Diagram Include and Extend
7/31/2019 CRIA Les4 Prototyping.pptx Engels
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
7/31/2019 CRIA Les4 Prototyping.pptx Engels
9/29
Prototyping?
Rapid development and testing of prototypes of newinformation system applications in an interactive,iterative process, involving developers and users
7/31/2019 CRIA Les4 Prototyping.pptx Engels
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
7/31/2019 CRIA Les4 Prototyping.pptx Engels
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
7/31/2019 CRIA Les4 Prototyping.pptx Engels
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.
7/31/2019 CRIA Les4 Prototyping.pptx Engels
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
7/31/2019 CRIA Les4 Prototyping.pptx Engels
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
7/31/2019 CRIA Les4 Prototyping.pptx Engels
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.
7/31/2019 CRIA Les4 Prototyping.pptx Engels
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
7/31/2019 CRIA Les4 Prototyping.pptx Engels
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?
7/31/2019 CRIA Les4 Prototyping.pptx Engels
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?
7/31/2019 CRIA Les4 Prototyping.pptx Engels
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
7/31/2019 CRIA Les4 Prototyping.pptx Engels
20/29
3. Look
In what way does the prototype look at the end result? Font, color, pictures.
7/31/2019 CRIA Les4 Prototyping.pptx Engels
21/29
4. Interaction
How realistic are the interactions in relationship to thepossible end result?
Pointing, clicking, sliding?
7/31/2019 CRIA Les4 Prototyping.pptx Engels
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, )
7/31/2019 CRIA Les4 Prototyping.pptx Engels
23/29
Low Fidelity
7/31/2019 CRIA Les4 Prototyping.pptx Engels
24/29
Mid Fidelity
7/31/2019 CRIA Les4 Prototyping.pptx Engels
25/29
Comparison of prototyping methods
7/31/2019 CRIA Les4 Prototyping.pptx Engels
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
7/31/2019 CRIA Les4 Prototyping.pptx Engels
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/133779037/31/2019 CRIA Les4 Prototyping.pptx Engels
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.swf7/31/2019 CRIA Les4 Prototyping.pptx Engels
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.phpRecommended