Envisioning%the%project …kremer.cpsc.ucalgary.ca/courses/seng403/lectureNotes/08... · 2013-01-25 · SENG%403%–%Software%Development%in%Teams%&%Organizations Low_Fidelity%Prototypes

SENG%403%–%Software%Development%in%Teams%&%Organizations

PrototypingSoftware%Development%in%Teams%&%Organizations

154 SENG%403%–%Software%Development%in%Teams%&%Organizations

Order%of%Matters

Envisioning%the%project Release%Planning Iteration%Planning Kick%starting:-Now-that-we-have-a-plan,-where-do-we-start? Prototyping Architecture%envisioning%&%modeling

155


Prototyping

Building%an%artifact%that%resembles%a%specific%part%of%a%software%system.

Why%do%we%prototype?% Learn%more%about%the%requirements Get%quick%feedback%from%the%customer Experiment%with%alternative%designs%and%solutions Clarify%vagueness%and%uncertainties%before%code%is%written


%Prototype%Example

http://tfcallaghan.com/yahoo_site_admin/assets/docs/hr_lowfi_1.66162647.bmp

157


User%Interface%Prototyping

UIs%are%hard%to%design/specify Interactive%nature,%graphical%layout Difficult%for%users%to%think%abstractly

Mock_ups Provide%direct%experience%with%interface Make%it%easier%to%identify%good%and%bad%characteristics Observe%look%and%feel% Work%through%usage%scenarios See%if%all%information,%options%are%accounted%for

Jonathan%Aldrich,%http://www.cs.cmu.edu/~aldrich/courses/413/slides/10_proto.pdf


Logic%Prototyping

Prototyping%is%not%used%only%for%UI. You%can%prototype%a%vertical%slice%of%the%system.

For%uncertain%requirements.%

UI

Logic

Feature-A

Feature-B

Feature-C

Feature-D

Feature-E

159


Low_Fidelity%Prototypes

Paper%sketches%of%the%interface%look_and_feel,%and%interactive%behavior.%%

Quick%and%cheap%to%prepare,%change,%and%throw%away.%

You%can%iterate%as%many%times%as%needed%–%because%it%is%cheap%and%fast.


Low_Fidelity%Prototype%Example

http://www.sapdesignguild.org/editions/edition7/images/sketch.jpg

161


Technique:%Storyboards

Sketches%that%capture%snapshots%of%the%interface%at%key%points%during%an%interaction.

Characteristics%of%a%good%sketch:% Quick%to%make Disposable% Rough% Suggests%&%explores%rather%than%confirms%

http://ase.cpsc.ucalgary.ca/ase/uploads/SENG515615F2010/ASEReleasePlanning.pdf


Example

http://farm1.static.flickr.com/106/309576865_22e0e9cd12_o.jpg

163


Excercise

Pick%one%story%in%your%system. Identify%the%major%steps%(key%snapshots)%of%the%story.%

Develop%a%storyboard.


High_Fidelity%Prototypes

Looks%like%the%real%system%and%has%more%details. Useful%when:

More%details%are%needed%to%understand%what%the%customer%wants.

We%need%to%evaluate%the%interface%in%a%close_to_real%setting.

Disadvantages: Takes%more%time%than%low_fi. More%difficult%to%throw_away.% Customer%may%think%it%is%the%final%product.

165


Example

Low_fidelity%(left)%vs.%High_fidelity%(right)

http://www.infoq.com/resource/articles/guest_simon_sketchflow/en/resources/image2.png


Technique:%Wizard%of%Oz

Simulating%(faking)%the%functionality%of%an%interface%using%a%script%or%a%human.%

Done%before%the%functionality%is%actually%implemented%as%follows: A%user%is%asked%to%interact%with%a%prototype. The%prototype%is%controlled%by%a%“wizard”%that%is%invisible%to%the%user.

The%wizard%observes%the%actions%of%the%user%and%reacts%with%different%responses.

167


Example:%ATM%

The%user%is%provided%with%an%ATM%interface%and%asked%to%use%the%interface%to%deposit%a%check.

When%the%user%selects%the%Deposit%option,%somebody%behind%the%scenes%(or%a%script)%brings%up%a%new%interface.%

When%the%user%makes%a%mistake%(e.g.%exceeds%a%certain%limit,%inputs%an%invalid%number),%the%“wizard”%may%suggest%corrections%in%a%form%of%error%messages.


Example:%ATM

http://www.physicalinterface.com/view/that_design_is_money

169

Documents

Envisioning%the%project …kremer.cpsc.ucalgary.ca/courses/seng403/lectureNotes/08... · 2013-01-25 · SENG%403%–%Software%Development%in%Teams%&%Organizations Low_Fidelity%Prototypes