Design, DevelopandDeliver

Design,DevelopandDeliver

Signupscreen– socialornot?

Requirements

StylusorTouchScreen?

http://www.theverge.com/2015/1/18/7785443/apple-ipad-pro-stylus

AlarmApp- coolorsimple?

Prototype beforeyouBuild

http://www.businessinsider.com/photos-early-apple-prototypes-2014-6?op=1&IR=T

APictureisworthathousandwords

APrototypeisworthathousandpictures

3Dprintedfuturecarprototype

What is a Prototype?

ATestable,Earlyversionofanidea

Nasa saidtheZ-2spacesuitwasonlyaprototype,butelementsofitwouldbeincorporatedintothesuitwornbythefirsthumanstoreachtheRedPlanet.

http://www.bbc.com/news/technology-27238452

The suit is being tested in Nasa's pools used to teach astronauts to spacewalk

Architecture

Architecture

Google Glass

http://youtu.be/d5_h1VuwD6g?t=34s

What about Prototypes for Software?

BuildaPrototype

SmartWatch

https://blog.getpebble.com/2012/08/10/user-interface-preview-updates/

WhyPrototype?

YouTubeVideo

To Communicate an Idea or Experience

Wewanttobuildthenextcoolgadget…

But….Whatdopeoplethinkaboutit?Letsshowthemavideo

To Validate Assumptions

DoestheUserUnderstandyou?

PressYestoCancel”– “PressCanceltoContinue????

SpiralStaircase- GoodIdea?

Stillagoodidea?

FacebookSign-inOnly?

Whatifyourusersdon’ttrustyourapp?

To compare alternatives

StylusorTouchScreen?

Fail early to avoid disasters

GetFeedbackEarly

• Designtheconcept beforeyoubuildit.• GetFeedback.• Redesign.• Keepitfastandsimple.• ReviewEarly.

UserJourneys/UserStories

• Whatarethegoalsoftheuser– notofyourapp.– Orderfind– Findlocal deals– Chatwithfriends nearby– SaveTime

• Howistheusergoingtousetheapp?– Type– Speech– Sensors– VirtualReality

Constraints?• Whataretheconstraints?– Usedwhiledriving/biking

• Cantheuserinteractwithiteasily?– Usedmostlyathome

• Whywouldtheusernotusethecomputer/tablet/laptop?– Usedwhiletravellinginthemountains

• Howmuchbatterywilltheappconsume?• Howwillitdealwithlowconnectivity?

– Usedforbuyingetc.• Whatiftheuserhasnocreditcard?• Howwilltheappensurerepeatedusageoncetheuserandsellerhavecreatedaconnection?

IdealSoftwareEngineeringLifeCycle

Requirementanalysis

Design

ImplementationTesting

Evolution

Wheredoesprototypingcomein?

Requirementanalysis

Design

ImplementationTesting

Evolution

PrototypingLifeCycle

Design

Prototype

GetUserFeedback

Validateormodify

Assumptions

Whatcouldgowrongwithaloginscreen?

Theyforgotthe“FORGOTPASSWORD”button!!!

Commontechniques

• Paper prototyping• Wireframesandpageschematics• HTMLwireframes• Interactiveprototypes

WhatisPaperPrototyping?

• Paper:materialsofpaper-and-pencilalike.

• Prototyping:Thedesignandevaluationoftheconcept.

• Low-fidelityvisualrepresentation

• TestUsability.

• Representativeusersperformrealtasksbyinteractingwithapaperversionoftheinterface.

ExamplePaperPrototypes

ExamplePaperPrototypes

Advantages• Quicktobuild/refine,thusenablingrapiddesign

interactions.• Requiresminimalresourcesandmaterials.• Peoplearewillingtogiveyoumorefeedbackwhenthey

knowyouhaveinvestedlittle.

Disadvantages• Itspapernotarealapp/webpage

Wireframes

• Wireframes - basic illustrations of the structure and components of a web page or Mobile Application– Real Proportions– Includes basic page/screen layout– Includes navigation–May include:• headers, footers, content areas, sidebars• dynamic widgets, search box, graphics, links

Wireframing examples

HTMLWireframes

Disadvantages

• Betterthanpaperprototypes– Feelsreal– Thingshappenwhenyouclick

Advantages

• Justaskeleton– Notreallyhowtherealinterfaceslooks– Notreallyhowtherealinterfacebehaves

InteractivePrototyping

Importanceoftransitionsandmovements

Howdidthis?

…becomethis?

Howdidthis?

…becomethis?

https://marvelapp.com/

Justinmind Prototyper

Features

• Noprogrammingrequired.JustinmindPrototyper isanintuitivetool.Justdragthecomponentsorinteractionsthatyouneedfromthepalettestotheworkarea.

• InstantSimulations.Seeyourapplication'sprototypeinactionbysimplyclickingtheSimulatebutton.Nowaitingrequired.

• ExportabletoHTML. ExporttoHTMLeffortlessly,sothatyourclientsoruserscanseeitworkonlineandgiveyoutheiropinion.

DownloadandInstall

https://www.justinmind.com/

CreateAccount

SignUp

SelecttheTargetdevice

CreateNewPrototype- Options

1.StartfromanEmptyCanvas2.StartfromasetofImages3.StartfromanexistingExample4.StartfromanotherPrototype

FromExamples

Widgets- pre-existingelements

Screens– Eachscreenofyourapp

Screen

Propertiesofyourindividualwidget

Properties

TextLabelProperties

Events– whatmakesyourprototypeinteractive

Events

Simulation– seeitallinaction

Simulatesonbrowser

ViewonDevice

UsingPredesignedAssetFiles

• DesignedinAdobePS/Sketch• ImportintoPrototypingTool

InJustinmind

MarvelApp

Invision

Pop

• Leveragingthesimplicityofpaperprototyping

Designonpaper

SimulateandTest

TakePictures Simulateclicks

Homework

• ChatApplication• Lookatexistingchatapplications• Whatfeatureswouldyouwanttoadd/remove• NextclassYOUwillbuildtheprototype