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