wireframing lecture 15th march 2017 1 -...
TRANSCRIPT
![Page 1: Wireframing Lecture 15th March 2017 1 - UniTrentolatemar.science.unitn.it/segue_userFiles/2017Mobile... · 2017-04-11 · Wireframing Lecture 15th March 2017_1 Created Date: 4/11/2017](https://reader034.vdocuments.us/reader034/viewer/2022042911/5f4432712f5b75224369198a/html5/thumbnails/1.jpg)
Design, DevelopandDeliver
![Page 2: Wireframing Lecture 15th March 2017 1 - UniTrentolatemar.science.unitn.it/segue_userFiles/2017Mobile... · 2017-04-11 · Wireframing Lecture 15th March 2017_1 Created Date: 4/11/2017](https://reader034.vdocuments.us/reader034/viewer/2022042911/5f4432712f5b75224369198a/html5/thumbnails/2.jpg)
Design,DevelopandDeliver
![Page 3: Wireframing Lecture 15th March 2017 1 - UniTrentolatemar.science.unitn.it/segue_userFiles/2017Mobile... · 2017-04-11 · Wireframing Lecture 15th March 2017_1 Created Date: 4/11/2017](https://reader034.vdocuments.us/reader034/viewer/2022042911/5f4432712f5b75224369198a/html5/thumbnails/3.jpg)
![Page 4: Wireframing Lecture 15th March 2017 1 - UniTrentolatemar.science.unitn.it/segue_userFiles/2017Mobile... · 2017-04-11 · Wireframing Lecture 15th March 2017_1 Created Date: 4/11/2017](https://reader034.vdocuments.us/reader034/viewer/2022042911/5f4432712f5b75224369198a/html5/thumbnails/4.jpg)
![Page 5: Wireframing Lecture 15th March 2017 1 - UniTrentolatemar.science.unitn.it/segue_userFiles/2017Mobile... · 2017-04-11 · Wireframing Lecture 15th March 2017_1 Created Date: 4/11/2017](https://reader034.vdocuments.us/reader034/viewer/2022042911/5f4432712f5b75224369198a/html5/thumbnails/5.jpg)
![Page 6: Wireframing Lecture 15th March 2017 1 - UniTrentolatemar.science.unitn.it/segue_userFiles/2017Mobile... · 2017-04-11 · Wireframing Lecture 15th March 2017_1 Created Date: 4/11/2017](https://reader034.vdocuments.us/reader034/viewer/2022042911/5f4432712f5b75224369198a/html5/thumbnails/6.jpg)
Signupscreen– socialornot?
![Page 7: Wireframing Lecture 15th March 2017 1 - UniTrentolatemar.science.unitn.it/segue_userFiles/2017Mobile... · 2017-04-11 · Wireframing Lecture 15th March 2017_1 Created Date: 4/11/2017](https://reader034.vdocuments.us/reader034/viewer/2022042911/5f4432712f5b75224369198a/html5/thumbnails/7.jpg)
![Page 8: Wireframing Lecture 15th March 2017 1 - UniTrentolatemar.science.unitn.it/segue_userFiles/2017Mobile... · 2017-04-11 · Wireframing Lecture 15th March 2017_1 Created Date: 4/11/2017](https://reader034.vdocuments.us/reader034/viewer/2022042911/5f4432712f5b75224369198a/html5/thumbnails/8.jpg)
Requirements
![Page 9: Wireframing Lecture 15th March 2017 1 - UniTrentolatemar.science.unitn.it/segue_userFiles/2017Mobile... · 2017-04-11 · Wireframing Lecture 15th March 2017_1 Created Date: 4/11/2017](https://reader034.vdocuments.us/reader034/viewer/2022042911/5f4432712f5b75224369198a/html5/thumbnails/9.jpg)
![Page 10: Wireframing Lecture 15th March 2017 1 - UniTrentolatemar.science.unitn.it/segue_userFiles/2017Mobile... · 2017-04-11 · Wireframing Lecture 15th March 2017_1 Created Date: 4/11/2017](https://reader034.vdocuments.us/reader034/viewer/2022042911/5f4432712f5b75224369198a/html5/thumbnails/10.jpg)
StylusorTouchScreen?
![Page 11: Wireframing Lecture 15th March 2017 1 - UniTrentolatemar.science.unitn.it/segue_userFiles/2017Mobile... · 2017-04-11 · Wireframing Lecture 15th March 2017_1 Created Date: 4/11/2017](https://reader034.vdocuments.us/reader034/viewer/2022042911/5f4432712f5b75224369198a/html5/thumbnails/11.jpg)
http://www.theverge.com/2015/1/18/7785443/apple-ipad-pro-stylus
![Page 12: Wireframing Lecture 15th March 2017 1 - UniTrentolatemar.science.unitn.it/segue_userFiles/2017Mobile... · 2017-04-11 · Wireframing Lecture 15th March 2017_1 Created Date: 4/11/2017](https://reader034.vdocuments.us/reader034/viewer/2022042911/5f4432712f5b75224369198a/html5/thumbnails/12.jpg)
![Page 13: Wireframing Lecture 15th March 2017 1 - UniTrentolatemar.science.unitn.it/segue_userFiles/2017Mobile... · 2017-04-11 · Wireframing Lecture 15th March 2017_1 Created Date: 4/11/2017](https://reader034.vdocuments.us/reader034/viewer/2022042911/5f4432712f5b75224369198a/html5/thumbnails/13.jpg)
AlarmApp- coolorsimple?
![Page 14: Wireframing Lecture 15th March 2017 1 - UniTrentolatemar.science.unitn.it/segue_userFiles/2017Mobile... · 2017-04-11 · Wireframing Lecture 15th March 2017_1 Created Date: 4/11/2017](https://reader034.vdocuments.us/reader034/viewer/2022042911/5f4432712f5b75224369198a/html5/thumbnails/14.jpg)
![Page 15: Wireframing Lecture 15th March 2017 1 - UniTrentolatemar.science.unitn.it/segue_userFiles/2017Mobile... · 2017-04-11 · Wireframing Lecture 15th March 2017_1 Created Date: 4/11/2017](https://reader034.vdocuments.us/reader034/viewer/2022042911/5f4432712f5b75224369198a/html5/thumbnails/15.jpg)
![Page 16: Wireframing Lecture 15th March 2017 1 - UniTrentolatemar.science.unitn.it/segue_userFiles/2017Mobile... · 2017-04-11 · Wireframing Lecture 15th March 2017_1 Created Date: 4/11/2017](https://reader034.vdocuments.us/reader034/viewer/2022042911/5f4432712f5b75224369198a/html5/thumbnails/16.jpg)
![Page 17: Wireframing Lecture 15th March 2017 1 - UniTrentolatemar.science.unitn.it/segue_userFiles/2017Mobile... · 2017-04-11 · Wireframing Lecture 15th March 2017_1 Created Date: 4/11/2017](https://reader034.vdocuments.us/reader034/viewer/2022042911/5f4432712f5b75224369198a/html5/thumbnails/17.jpg)
Prototype beforeyouBuild
![Page 18: Wireframing Lecture 15th March 2017 1 - UniTrentolatemar.science.unitn.it/segue_userFiles/2017Mobile... · 2017-04-11 · Wireframing Lecture 15th March 2017_1 Created Date: 4/11/2017](https://reader034.vdocuments.us/reader034/viewer/2022042911/5f4432712f5b75224369198a/html5/thumbnails/18.jpg)
![Page 19: Wireframing Lecture 15th March 2017 1 - UniTrentolatemar.science.unitn.it/segue_userFiles/2017Mobile... · 2017-04-11 · Wireframing Lecture 15th March 2017_1 Created Date: 4/11/2017](https://reader034.vdocuments.us/reader034/viewer/2022042911/5f4432712f5b75224369198a/html5/thumbnails/19.jpg)
http://www.businessinsider.com/photos-early-apple-prototypes-2014-6?op=1&IR=T
![Page 20: Wireframing Lecture 15th March 2017 1 - UniTrentolatemar.science.unitn.it/segue_userFiles/2017Mobile... · 2017-04-11 · Wireframing Lecture 15th March 2017_1 Created Date: 4/11/2017](https://reader034.vdocuments.us/reader034/viewer/2022042911/5f4432712f5b75224369198a/html5/thumbnails/20.jpg)
APictureisworthathousandwords
APrototypeisworthathousandpictures
![Page 21: Wireframing Lecture 15th March 2017 1 - UniTrentolatemar.science.unitn.it/segue_userFiles/2017Mobile... · 2017-04-11 · Wireframing Lecture 15th March 2017_1 Created Date: 4/11/2017](https://reader034.vdocuments.us/reader034/viewer/2022042911/5f4432712f5b75224369198a/html5/thumbnails/21.jpg)
3Dprintedfuturecarprototype
![Page 22: Wireframing Lecture 15th March 2017 1 - UniTrentolatemar.science.unitn.it/segue_userFiles/2017Mobile... · 2017-04-11 · Wireframing Lecture 15th March 2017_1 Created Date: 4/11/2017](https://reader034.vdocuments.us/reader034/viewer/2022042911/5f4432712f5b75224369198a/html5/thumbnails/22.jpg)
What is a Prototype?
![Page 23: Wireframing Lecture 15th March 2017 1 - UniTrentolatemar.science.unitn.it/segue_userFiles/2017Mobile... · 2017-04-11 · Wireframing Lecture 15th March 2017_1 Created Date: 4/11/2017](https://reader034.vdocuments.us/reader034/viewer/2022042911/5f4432712f5b75224369198a/html5/thumbnails/23.jpg)
ATestable,Earlyversionofanidea
![Page 24: Wireframing Lecture 15th March 2017 1 - UniTrentolatemar.science.unitn.it/segue_userFiles/2017Mobile... · 2017-04-11 · Wireframing Lecture 15th March 2017_1 Created Date: 4/11/2017](https://reader034.vdocuments.us/reader034/viewer/2022042911/5f4432712f5b75224369198a/html5/thumbnails/24.jpg)
![Page 25: Wireframing Lecture 15th March 2017 1 - UniTrentolatemar.science.unitn.it/segue_userFiles/2017Mobile... · 2017-04-11 · Wireframing Lecture 15th March 2017_1 Created Date: 4/11/2017](https://reader034.vdocuments.us/reader034/viewer/2022042911/5f4432712f5b75224369198a/html5/thumbnails/25.jpg)
Nasa saidtheZ-2spacesuitwasonlyaprototype,butelementsofitwouldbeincorporatedintothesuitwornbythefirsthumanstoreachtheRedPlanet.
![Page 26: Wireframing Lecture 15th March 2017 1 - UniTrentolatemar.science.unitn.it/segue_userFiles/2017Mobile... · 2017-04-11 · Wireframing Lecture 15th March 2017_1 Created Date: 4/11/2017](https://reader034.vdocuments.us/reader034/viewer/2022042911/5f4432712f5b75224369198a/html5/thumbnails/26.jpg)
http://www.bbc.com/news/technology-27238452
The suit is being tested in Nasa's pools used to teach astronauts to spacewalk
![Page 27: Wireframing Lecture 15th March 2017 1 - UniTrentolatemar.science.unitn.it/segue_userFiles/2017Mobile... · 2017-04-11 · Wireframing Lecture 15th March 2017_1 Created Date: 4/11/2017](https://reader034.vdocuments.us/reader034/viewer/2022042911/5f4432712f5b75224369198a/html5/thumbnails/27.jpg)
Architecture
![Page 28: Wireframing Lecture 15th March 2017 1 - UniTrentolatemar.science.unitn.it/segue_userFiles/2017Mobile... · 2017-04-11 · Wireframing Lecture 15th March 2017_1 Created Date: 4/11/2017](https://reader034.vdocuments.us/reader034/viewer/2022042911/5f4432712f5b75224369198a/html5/thumbnails/28.jpg)
Architecture
![Page 29: Wireframing Lecture 15th March 2017 1 - UniTrentolatemar.science.unitn.it/segue_userFiles/2017Mobile... · 2017-04-11 · Wireframing Lecture 15th March 2017_1 Created Date: 4/11/2017](https://reader034.vdocuments.us/reader034/viewer/2022042911/5f4432712f5b75224369198a/html5/thumbnails/29.jpg)
![Page 30: Wireframing Lecture 15th March 2017 1 - UniTrentolatemar.science.unitn.it/segue_userFiles/2017Mobile... · 2017-04-11 · Wireframing Lecture 15th March 2017_1 Created Date: 4/11/2017](https://reader034.vdocuments.us/reader034/viewer/2022042911/5f4432712f5b75224369198a/html5/thumbnails/30.jpg)
![Page 31: Wireframing Lecture 15th March 2017 1 - UniTrentolatemar.science.unitn.it/segue_userFiles/2017Mobile... · 2017-04-11 · Wireframing Lecture 15th March 2017_1 Created Date: 4/11/2017](https://reader034.vdocuments.us/reader034/viewer/2022042911/5f4432712f5b75224369198a/html5/thumbnails/31.jpg)
Google Glass
http://youtu.be/d5_h1VuwD6g?t=34s
![Page 32: Wireframing Lecture 15th March 2017 1 - UniTrentolatemar.science.unitn.it/segue_userFiles/2017Mobile... · 2017-04-11 · Wireframing Lecture 15th March 2017_1 Created Date: 4/11/2017](https://reader034.vdocuments.us/reader034/viewer/2022042911/5f4432712f5b75224369198a/html5/thumbnails/32.jpg)
What about Prototypes for Software?
![Page 33: Wireframing Lecture 15th March 2017 1 - UniTrentolatemar.science.unitn.it/segue_userFiles/2017Mobile... · 2017-04-11 · Wireframing Lecture 15th March 2017_1 Created Date: 4/11/2017](https://reader034.vdocuments.us/reader034/viewer/2022042911/5f4432712f5b75224369198a/html5/thumbnails/33.jpg)
![Page 34: Wireframing Lecture 15th March 2017 1 - UniTrentolatemar.science.unitn.it/segue_userFiles/2017Mobile... · 2017-04-11 · Wireframing Lecture 15th March 2017_1 Created Date: 4/11/2017](https://reader034.vdocuments.us/reader034/viewer/2022042911/5f4432712f5b75224369198a/html5/thumbnails/34.jpg)
BuildaPrototype
![Page 35: Wireframing Lecture 15th March 2017 1 - UniTrentolatemar.science.unitn.it/segue_userFiles/2017Mobile... · 2017-04-11 · Wireframing Lecture 15th March 2017_1 Created Date: 4/11/2017](https://reader034.vdocuments.us/reader034/viewer/2022042911/5f4432712f5b75224369198a/html5/thumbnails/35.jpg)
![Page 36: Wireframing Lecture 15th March 2017 1 - UniTrentolatemar.science.unitn.it/segue_userFiles/2017Mobile... · 2017-04-11 · Wireframing Lecture 15th March 2017_1 Created Date: 4/11/2017](https://reader034.vdocuments.us/reader034/viewer/2022042911/5f4432712f5b75224369198a/html5/thumbnails/36.jpg)
![Page 37: Wireframing Lecture 15th March 2017 1 - UniTrentolatemar.science.unitn.it/segue_userFiles/2017Mobile... · 2017-04-11 · Wireframing Lecture 15th March 2017_1 Created Date: 4/11/2017](https://reader034.vdocuments.us/reader034/viewer/2022042911/5f4432712f5b75224369198a/html5/thumbnails/37.jpg)
SmartWatch
![Page 38: Wireframing Lecture 15th March 2017 1 - UniTrentolatemar.science.unitn.it/segue_userFiles/2017Mobile... · 2017-04-11 · Wireframing Lecture 15th March 2017_1 Created Date: 4/11/2017](https://reader034.vdocuments.us/reader034/viewer/2022042911/5f4432712f5b75224369198a/html5/thumbnails/38.jpg)
![Page 39: Wireframing Lecture 15th March 2017 1 - UniTrentolatemar.science.unitn.it/segue_userFiles/2017Mobile... · 2017-04-11 · Wireframing Lecture 15th March 2017_1 Created Date: 4/11/2017](https://reader034.vdocuments.us/reader034/viewer/2022042911/5f4432712f5b75224369198a/html5/thumbnails/39.jpg)
https://blog.getpebble.com/2012/08/10/user-interface-preview-updates/
![Page 40: Wireframing Lecture 15th March 2017 1 - UniTrentolatemar.science.unitn.it/segue_userFiles/2017Mobile... · 2017-04-11 · Wireframing Lecture 15th March 2017_1 Created Date: 4/11/2017](https://reader034.vdocuments.us/reader034/viewer/2022042911/5f4432712f5b75224369198a/html5/thumbnails/40.jpg)
WhyPrototype?
![Page 41: Wireframing Lecture 15th March 2017 1 - UniTrentolatemar.science.unitn.it/segue_userFiles/2017Mobile... · 2017-04-11 · Wireframing Lecture 15th March 2017_1 Created Date: 4/11/2017](https://reader034.vdocuments.us/reader034/viewer/2022042911/5f4432712f5b75224369198a/html5/thumbnails/41.jpg)
YouTubeVideo
To Communicate an Idea or Experience
![Page 42: Wireframing Lecture 15th March 2017 1 - UniTrentolatemar.science.unitn.it/segue_userFiles/2017Mobile... · 2017-04-11 · Wireframing Lecture 15th March 2017_1 Created Date: 4/11/2017](https://reader034.vdocuments.us/reader034/viewer/2022042911/5f4432712f5b75224369198a/html5/thumbnails/42.jpg)
Wewanttobuildthenextcoolgadget…
But….Whatdopeoplethinkaboutit?Letsshowthemavideo
![Page 43: Wireframing Lecture 15th March 2017 1 - UniTrentolatemar.science.unitn.it/segue_userFiles/2017Mobile... · 2017-04-11 · Wireframing Lecture 15th March 2017_1 Created Date: 4/11/2017](https://reader034.vdocuments.us/reader034/viewer/2022042911/5f4432712f5b75224369198a/html5/thumbnails/43.jpg)
To Validate Assumptions
![Page 44: Wireframing Lecture 15th March 2017 1 - UniTrentolatemar.science.unitn.it/segue_userFiles/2017Mobile... · 2017-04-11 · Wireframing Lecture 15th March 2017_1 Created Date: 4/11/2017](https://reader034.vdocuments.us/reader034/viewer/2022042911/5f4432712f5b75224369198a/html5/thumbnails/44.jpg)
DoestheUserUnderstandyou?
PressYestoCancel”– “PressCanceltoContinue????
![Page 45: Wireframing Lecture 15th March 2017 1 - UniTrentolatemar.science.unitn.it/segue_userFiles/2017Mobile... · 2017-04-11 · Wireframing Lecture 15th March 2017_1 Created Date: 4/11/2017](https://reader034.vdocuments.us/reader034/viewer/2022042911/5f4432712f5b75224369198a/html5/thumbnails/45.jpg)
![Page 46: Wireframing Lecture 15th March 2017 1 - UniTrentolatemar.science.unitn.it/segue_userFiles/2017Mobile... · 2017-04-11 · Wireframing Lecture 15th March 2017_1 Created Date: 4/11/2017](https://reader034.vdocuments.us/reader034/viewer/2022042911/5f4432712f5b75224369198a/html5/thumbnails/46.jpg)
SpiralStaircase- GoodIdea?
![Page 47: Wireframing Lecture 15th March 2017 1 - UniTrentolatemar.science.unitn.it/segue_userFiles/2017Mobile... · 2017-04-11 · Wireframing Lecture 15th March 2017_1 Created Date: 4/11/2017](https://reader034.vdocuments.us/reader034/viewer/2022042911/5f4432712f5b75224369198a/html5/thumbnails/47.jpg)
Stillagoodidea?
![Page 48: Wireframing Lecture 15th March 2017 1 - UniTrentolatemar.science.unitn.it/segue_userFiles/2017Mobile... · 2017-04-11 · Wireframing Lecture 15th March 2017_1 Created Date: 4/11/2017](https://reader034.vdocuments.us/reader034/viewer/2022042911/5f4432712f5b75224369198a/html5/thumbnails/48.jpg)
FacebookSign-inOnly?
![Page 49: Wireframing Lecture 15th March 2017 1 - UniTrentolatemar.science.unitn.it/segue_userFiles/2017Mobile... · 2017-04-11 · Wireframing Lecture 15th March 2017_1 Created Date: 4/11/2017](https://reader034.vdocuments.us/reader034/viewer/2022042911/5f4432712f5b75224369198a/html5/thumbnails/49.jpg)
Whatifyourusersdon’ttrustyourapp?
![Page 50: Wireframing Lecture 15th March 2017 1 - UniTrentolatemar.science.unitn.it/segue_userFiles/2017Mobile... · 2017-04-11 · Wireframing Lecture 15th March 2017_1 Created Date: 4/11/2017](https://reader034.vdocuments.us/reader034/viewer/2022042911/5f4432712f5b75224369198a/html5/thumbnails/50.jpg)
To compare alternatives
![Page 51: Wireframing Lecture 15th March 2017 1 - UniTrentolatemar.science.unitn.it/segue_userFiles/2017Mobile... · 2017-04-11 · Wireframing Lecture 15th March 2017_1 Created Date: 4/11/2017](https://reader034.vdocuments.us/reader034/viewer/2022042911/5f4432712f5b75224369198a/html5/thumbnails/51.jpg)
StylusorTouchScreen?
![Page 52: Wireframing Lecture 15th March 2017 1 - UniTrentolatemar.science.unitn.it/segue_userFiles/2017Mobile... · 2017-04-11 · Wireframing Lecture 15th March 2017_1 Created Date: 4/11/2017](https://reader034.vdocuments.us/reader034/viewer/2022042911/5f4432712f5b75224369198a/html5/thumbnails/52.jpg)
Fail early to avoid disasters
![Page 53: Wireframing Lecture 15th March 2017 1 - UniTrentolatemar.science.unitn.it/segue_userFiles/2017Mobile... · 2017-04-11 · Wireframing Lecture 15th March 2017_1 Created Date: 4/11/2017](https://reader034.vdocuments.us/reader034/viewer/2022042911/5f4432712f5b75224369198a/html5/thumbnails/53.jpg)
GetFeedbackEarly
• Designtheconcept beforeyoubuildit.• GetFeedback.• Redesign.• Keepitfastandsimple.• ReviewEarly.
![Page 54: Wireframing Lecture 15th March 2017 1 - UniTrentolatemar.science.unitn.it/segue_userFiles/2017Mobile... · 2017-04-11 · Wireframing Lecture 15th March 2017_1 Created Date: 4/11/2017](https://reader034.vdocuments.us/reader034/viewer/2022042911/5f4432712f5b75224369198a/html5/thumbnails/54.jpg)
![Page 55: Wireframing Lecture 15th March 2017 1 - UniTrentolatemar.science.unitn.it/segue_userFiles/2017Mobile... · 2017-04-11 · Wireframing Lecture 15th March 2017_1 Created Date: 4/11/2017](https://reader034.vdocuments.us/reader034/viewer/2022042911/5f4432712f5b75224369198a/html5/thumbnails/55.jpg)
UserJourneys/UserStories
• Whatarethegoalsoftheuser– notofyourapp.– Orderfind– Findlocal deals– Chatwithfriends nearby– SaveTime
• Howistheusergoingtousetheapp?– Type– Speech– Sensors– VirtualReality
![Page 56: Wireframing Lecture 15th March 2017 1 - UniTrentolatemar.science.unitn.it/segue_userFiles/2017Mobile... · 2017-04-11 · Wireframing Lecture 15th March 2017_1 Created Date: 4/11/2017](https://reader034.vdocuments.us/reader034/viewer/2022042911/5f4432712f5b75224369198a/html5/thumbnails/56.jpg)
Constraints?• Whataretheconstraints?– Usedwhiledriving/biking
• Cantheuserinteractwithiteasily?– Usedmostlyathome
• Whywouldtheusernotusethecomputer/tablet/laptop?– Usedwhiletravellinginthemountains
• Howmuchbatterywilltheappconsume?• Howwillitdealwithlowconnectivity?
– Usedforbuyingetc.• Whatiftheuserhasnocreditcard?• Howwilltheappensurerepeatedusageoncetheuserandsellerhavecreatedaconnection?
![Page 57: Wireframing Lecture 15th March 2017 1 - UniTrentolatemar.science.unitn.it/segue_userFiles/2017Mobile... · 2017-04-11 · Wireframing Lecture 15th March 2017_1 Created Date: 4/11/2017](https://reader034.vdocuments.us/reader034/viewer/2022042911/5f4432712f5b75224369198a/html5/thumbnails/57.jpg)
IdealSoftwareEngineeringLifeCycle
Requirementanalysis
Design
ImplementationTesting
Evolution
![Page 58: Wireframing Lecture 15th March 2017 1 - UniTrentolatemar.science.unitn.it/segue_userFiles/2017Mobile... · 2017-04-11 · Wireframing Lecture 15th March 2017_1 Created Date: 4/11/2017](https://reader034.vdocuments.us/reader034/viewer/2022042911/5f4432712f5b75224369198a/html5/thumbnails/58.jpg)
Wheredoesprototypingcomein?
Requirementanalysis
Design
ImplementationTesting
Evolution
![Page 59: Wireframing Lecture 15th March 2017 1 - UniTrentolatemar.science.unitn.it/segue_userFiles/2017Mobile... · 2017-04-11 · Wireframing Lecture 15th March 2017_1 Created Date: 4/11/2017](https://reader034.vdocuments.us/reader034/viewer/2022042911/5f4432712f5b75224369198a/html5/thumbnails/59.jpg)
PrototypingLifeCycle
Design
Prototype
GetUserFeedback
Validateormodify
Assumptions
![Page 60: Wireframing Lecture 15th March 2017 1 - UniTrentolatemar.science.unitn.it/segue_userFiles/2017Mobile... · 2017-04-11 · Wireframing Lecture 15th March 2017_1 Created Date: 4/11/2017](https://reader034.vdocuments.us/reader034/viewer/2022042911/5f4432712f5b75224369198a/html5/thumbnails/60.jpg)
Whatcouldgowrongwithaloginscreen?
Theyforgotthe“FORGOTPASSWORD”button!!!
![Page 61: Wireframing Lecture 15th March 2017 1 - UniTrentolatemar.science.unitn.it/segue_userFiles/2017Mobile... · 2017-04-11 · Wireframing Lecture 15th March 2017_1 Created Date: 4/11/2017](https://reader034.vdocuments.us/reader034/viewer/2022042911/5f4432712f5b75224369198a/html5/thumbnails/61.jpg)
Commontechniques
• Paper prototyping• Wireframesandpageschematics• HTMLwireframes• Interactiveprototypes
![Page 62: Wireframing Lecture 15th March 2017 1 - UniTrentolatemar.science.unitn.it/segue_userFiles/2017Mobile... · 2017-04-11 · Wireframing Lecture 15th March 2017_1 Created Date: 4/11/2017](https://reader034.vdocuments.us/reader034/viewer/2022042911/5f4432712f5b75224369198a/html5/thumbnails/62.jpg)
WhatisPaperPrototyping?
• Paper:materialsofpaper-and-pencilalike.
• Prototyping:Thedesignandevaluationoftheconcept.
• Low-fidelityvisualrepresentation
• TestUsability.
• Representativeusersperformrealtasksbyinteractingwithapaperversionoftheinterface.
![Page 63: Wireframing Lecture 15th March 2017 1 - UniTrentolatemar.science.unitn.it/segue_userFiles/2017Mobile... · 2017-04-11 · Wireframing Lecture 15th March 2017_1 Created Date: 4/11/2017](https://reader034.vdocuments.us/reader034/viewer/2022042911/5f4432712f5b75224369198a/html5/thumbnails/63.jpg)
ExamplePaperPrototypes
![Page 64: Wireframing Lecture 15th March 2017 1 - UniTrentolatemar.science.unitn.it/segue_userFiles/2017Mobile... · 2017-04-11 · Wireframing Lecture 15th March 2017_1 Created Date: 4/11/2017](https://reader034.vdocuments.us/reader034/viewer/2022042911/5f4432712f5b75224369198a/html5/thumbnails/64.jpg)
ExamplePaperPrototypes
![Page 65: Wireframing Lecture 15th March 2017 1 - UniTrentolatemar.science.unitn.it/segue_userFiles/2017Mobile... · 2017-04-11 · Wireframing Lecture 15th March 2017_1 Created Date: 4/11/2017](https://reader034.vdocuments.us/reader034/viewer/2022042911/5f4432712f5b75224369198a/html5/thumbnails/65.jpg)
Advantages• Quicktobuild/refine,thusenablingrapiddesign
interactions.• Requiresminimalresourcesandmaterials.• Peoplearewillingtogiveyoumorefeedbackwhenthey
knowyouhaveinvestedlittle.
Disadvantages• Itspapernotarealapp/webpage
![Page 66: Wireframing Lecture 15th March 2017 1 - UniTrentolatemar.science.unitn.it/segue_userFiles/2017Mobile... · 2017-04-11 · Wireframing Lecture 15th March 2017_1 Created Date: 4/11/2017](https://reader034.vdocuments.us/reader034/viewer/2022042911/5f4432712f5b75224369198a/html5/thumbnails/66.jpg)
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
![Page 67: Wireframing Lecture 15th March 2017 1 - UniTrentolatemar.science.unitn.it/segue_userFiles/2017Mobile... · 2017-04-11 · Wireframing Lecture 15th March 2017_1 Created Date: 4/11/2017](https://reader034.vdocuments.us/reader034/viewer/2022042911/5f4432712f5b75224369198a/html5/thumbnails/67.jpg)
Wireframing examples
![Page 68: Wireframing Lecture 15th March 2017 1 - UniTrentolatemar.science.unitn.it/segue_userFiles/2017Mobile... · 2017-04-11 · Wireframing Lecture 15th March 2017_1 Created Date: 4/11/2017](https://reader034.vdocuments.us/reader034/viewer/2022042911/5f4432712f5b75224369198a/html5/thumbnails/68.jpg)
HTMLWireframes
![Page 69: Wireframing Lecture 15th March 2017 1 - UniTrentolatemar.science.unitn.it/segue_userFiles/2017Mobile... · 2017-04-11 · Wireframing Lecture 15th March 2017_1 Created Date: 4/11/2017](https://reader034.vdocuments.us/reader034/viewer/2022042911/5f4432712f5b75224369198a/html5/thumbnails/69.jpg)
Disadvantages
• Betterthanpaperprototypes– Feelsreal– Thingshappenwhenyouclick
Advantages
• Justaskeleton– Notreallyhowtherealinterfaceslooks– Notreallyhowtherealinterfacebehaves
![Page 70: Wireframing Lecture 15th March 2017 1 - UniTrentolatemar.science.unitn.it/segue_userFiles/2017Mobile... · 2017-04-11 · Wireframing Lecture 15th March 2017_1 Created Date: 4/11/2017](https://reader034.vdocuments.us/reader034/viewer/2022042911/5f4432712f5b75224369198a/html5/thumbnails/70.jpg)
InteractivePrototyping
Importanceoftransitionsandmovements
![Page 71: Wireframing Lecture 15th March 2017 1 - UniTrentolatemar.science.unitn.it/segue_userFiles/2017Mobile... · 2017-04-11 · Wireframing Lecture 15th March 2017_1 Created Date: 4/11/2017](https://reader034.vdocuments.us/reader034/viewer/2022042911/5f4432712f5b75224369198a/html5/thumbnails/71.jpg)
Howdidthis?
![Page 72: Wireframing Lecture 15th March 2017 1 - UniTrentolatemar.science.unitn.it/segue_userFiles/2017Mobile... · 2017-04-11 · Wireframing Lecture 15th March 2017_1 Created Date: 4/11/2017](https://reader034.vdocuments.us/reader034/viewer/2022042911/5f4432712f5b75224369198a/html5/thumbnails/72.jpg)
…becomethis?
![Page 73: Wireframing Lecture 15th March 2017 1 - UniTrentolatemar.science.unitn.it/segue_userFiles/2017Mobile... · 2017-04-11 · Wireframing Lecture 15th March 2017_1 Created Date: 4/11/2017](https://reader034.vdocuments.us/reader034/viewer/2022042911/5f4432712f5b75224369198a/html5/thumbnails/73.jpg)
Howdidthis?
![Page 74: Wireframing Lecture 15th March 2017 1 - UniTrentolatemar.science.unitn.it/segue_userFiles/2017Mobile... · 2017-04-11 · Wireframing Lecture 15th March 2017_1 Created Date: 4/11/2017](https://reader034.vdocuments.us/reader034/viewer/2022042911/5f4432712f5b75224369198a/html5/thumbnails/74.jpg)
…becomethis?
![Page 75: Wireframing Lecture 15th March 2017 1 - UniTrentolatemar.science.unitn.it/segue_userFiles/2017Mobile... · 2017-04-11 · Wireframing Lecture 15th March 2017_1 Created Date: 4/11/2017](https://reader034.vdocuments.us/reader034/viewer/2022042911/5f4432712f5b75224369198a/html5/thumbnails/75.jpg)
![Page 76: Wireframing Lecture 15th March 2017 1 - UniTrentolatemar.science.unitn.it/segue_userFiles/2017Mobile... · 2017-04-11 · Wireframing Lecture 15th March 2017_1 Created Date: 4/11/2017](https://reader034.vdocuments.us/reader034/viewer/2022042911/5f4432712f5b75224369198a/html5/thumbnails/76.jpg)
![Page 77: Wireframing Lecture 15th March 2017 1 - UniTrentolatemar.science.unitn.it/segue_userFiles/2017Mobile... · 2017-04-11 · Wireframing Lecture 15th March 2017_1 Created Date: 4/11/2017](https://reader034.vdocuments.us/reader034/viewer/2022042911/5f4432712f5b75224369198a/html5/thumbnails/77.jpg)
https://marvelapp.com/
![Page 78: Wireframing Lecture 15th March 2017 1 - UniTrentolatemar.science.unitn.it/segue_userFiles/2017Mobile... · 2017-04-11 · Wireframing Lecture 15th March 2017_1 Created Date: 4/11/2017](https://reader034.vdocuments.us/reader034/viewer/2022042911/5f4432712f5b75224369198a/html5/thumbnails/78.jpg)
![Page 79: Wireframing Lecture 15th March 2017 1 - UniTrentolatemar.science.unitn.it/segue_userFiles/2017Mobile... · 2017-04-11 · Wireframing Lecture 15th March 2017_1 Created Date: 4/11/2017](https://reader034.vdocuments.us/reader034/viewer/2022042911/5f4432712f5b75224369198a/html5/thumbnails/79.jpg)
Justinmind Prototyper
![Page 80: Wireframing Lecture 15th March 2017 1 - UniTrentolatemar.science.unitn.it/segue_userFiles/2017Mobile... · 2017-04-11 · Wireframing Lecture 15th March 2017_1 Created Date: 4/11/2017](https://reader034.vdocuments.us/reader034/viewer/2022042911/5f4432712f5b75224369198a/html5/thumbnails/80.jpg)
Features
• Noprogrammingrequired.JustinmindPrototyper isanintuitivetool.Justdragthecomponentsorinteractionsthatyouneedfromthepalettestotheworkarea.
• InstantSimulations.Seeyourapplication'sprototypeinactionbysimplyclickingtheSimulatebutton.Nowaitingrequired.
• ExportabletoHTML. ExporttoHTMLeffortlessly,sothatyourclientsoruserscanseeitworkonlineandgiveyoutheiropinion.
![Page 81: Wireframing Lecture 15th March 2017 1 - UniTrentolatemar.science.unitn.it/segue_userFiles/2017Mobile... · 2017-04-11 · Wireframing Lecture 15th March 2017_1 Created Date: 4/11/2017](https://reader034.vdocuments.us/reader034/viewer/2022042911/5f4432712f5b75224369198a/html5/thumbnails/81.jpg)
![Page 82: Wireframing Lecture 15th March 2017 1 - UniTrentolatemar.science.unitn.it/segue_userFiles/2017Mobile... · 2017-04-11 · Wireframing Lecture 15th March 2017_1 Created Date: 4/11/2017](https://reader034.vdocuments.us/reader034/viewer/2022042911/5f4432712f5b75224369198a/html5/thumbnails/82.jpg)
DownloadandInstall
https://www.justinmind.com/
![Page 83: Wireframing Lecture 15th March 2017 1 - UniTrentolatemar.science.unitn.it/segue_userFiles/2017Mobile... · 2017-04-11 · Wireframing Lecture 15th March 2017_1 Created Date: 4/11/2017](https://reader034.vdocuments.us/reader034/viewer/2022042911/5f4432712f5b75224369198a/html5/thumbnails/83.jpg)
CreateAccount
![Page 84: Wireframing Lecture 15th March 2017 1 - UniTrentolatemar.science.unitn.it/segue_userFiles/2017Mobile... · 2017-04-11 · Wireframing Lecture 15th March 2017_1 Created Date: 4/11/2017](https://reader034.vdocuments.us/reader034/viewer/2022042911/5f4432712f5b75224369198a/html5/thumbnails/84.jpg)
SignUp
![Page 85: Wireframing Lecture 15th March 2017 1 - UniTrentolatemar.science.unitn.it/segue_userFiles/2017Mobile... · 2017-04-11 · Wireframing Lecture 15th March 2017_1 Created Date: 4/11/2017](https://reader034.vdocuments.us/reader034/viewer/2022042911/5f4432712f5b75224369198a/html5/thumbnails/85.jpg)
![Page 86: Wireframing Lecture 15th March 2017 1 - UniTrentolatemar.science.unitn.it/segue_userFiles/2017Mobile... · 2017-04-11 · Wireframing Lecture 15th March 2017_1 Created Date: 4/11/2017](https://reader034.vdocuments.us/reader034/viewer/2022042911/5f4432712f5b75224369198a/html5/thumbnails/86.jpg)
![Page 87: Wireframing Lecture 15th March 2017 1 - UniTrentolatemar.science.unitn.it/segue_userFiles/2017Mobile... · 2017-04-11 · Wireframing Lecture 15th March 2017_1 Created Date: 4/11/2017](https://reader034.vdocuments.us/reader034/viewer/2022042911/5f4432712f5b75224369198a/html5/thumbnails/87.jpg)
SelecttheTargetdevice
![Page 88: Wireframing Lecture 15th March 2017 1 - UniTrentolatemar.science.unitn.it/segue_userFiles/2017Mobile... · 2017-04-11 · Wireframing Lecture 15th March 2017_1 Created Date: 4/11/2017](https://reader034.vdocuments.us/reader034/viewer/2022042911/5f4432712f5b75224369198a/html5/thumbnails/88.jpg)
CreateNewPrototype- Options
1.StartfromanEmptyCanvas2.StartfromasetofImages3.StartfromanexistingExample4.StartfromanotherPrototype
![Page 89: Wireframing Lecture 15th March 2017 1 - UniTrentolatemar.science.unitn.it/segue_userFiles/2017Mobile... · 2017-04-11 · Wireframing Lecture 15th March 2017_1 Created Date: 4/11/2017](https://reader034.vdocuments.us/reader034/viewer/2022042911/5f4432712f5b75224369198a/html5/thumbnails/89.jpg)
FromExamples
![Page 90: Wireframing Lecture 15th March 2017 1 - UniTrentolatemar.science.unitn.it/segue_userFiles/2017Mobile... · 2017-04-11 · Wireframing Lecture 15th March 2017_1 Created Date: 4/11/2017](https://reader034.vdocuments.us/reader034/viewer/2022042911/5f4432712f5b75224369198a/html5/thumbnails/90.jpg)
Widgets- pre-existingelements
![Page 91: Wireframing Lecture 15th March 2017 1 - UniTrentolatemar.science.unitn.it/segue_userFiles/2017Mobile... · 2017-04-11 · Wireframing Lecture 15th March 2017_1 Created Date: 4/11/2017](https://reader034.vdocuments.us/reader034/viewer/2022042911/5f4432712f5b75224369198a/html5/thumbnails/91.jpg)
![Page 92: Wireframing Lecture 15th March 2017 1 - UniTrentolatemar.science.unitn.it/segue_userFiles/2017Mobile... · 2017-04-11 · Wireframing Lecture 15th March 2017_1 Created Date: 4/11/2017](https://reader034.vdocuments.us/reader034/viewer/2022042911/5f4432712f5b75224369198a/html5/thumbnails/92.jpg)
Screens– Eachscreenofyourapp
![Page 93: Wireframing Lecture 15th March 2017 1 - UniTrentolatemar.science.unitn.it/segue_userFiles/2017Mobile... · 2017-04-11 · Wireframing Lecture 15th March 2017_1 Created Date: 4/11/2017](https://reader034.vdocuments.us/reader034/viewer/2022042911/5f4432712f5b75224369198a/html5/thumbnails/93.jpg)
Screen
![Page 94: Wireframing Lecture 15th March 2017 1 - UniTrentolatemar.science.unitn.it/segue_userFiles/2017Mobile... · 2017-04-11 · Wireframing Lecture 15th March 2017_1 Created Date: 4/11/2017](https://reader034.vdocuments.us/reader034/viewer/2022042911/5f4432712f5b75224369198a/html5/thumbnails/94.jpg)
Propertiesofyourindividualwidget
![Page 95: Wireframing Lecture 15th March 2017 1 - UniTrentolatemar.science.unitn.it/segue_userFiles/2017Mobile... · 2017-04-11 · Wireframing Lecture 15th March 2017_1 Created Date: 4/11/2017](https://reader034.vdocuments.us/reader034/viewer/2022042911/5f4432712f5b75224369198a/html5/thumbnails/95.jpg)
Properties
![Page 96: Wireframing Lecture 15th March 2017 1 - UniTrentolatemar.science.unitn.it/segue_userFiles/2017Mobile... · 2017-04-11 · Wireframing Lecture 15th March 2017_1 Created Date: 4/11/2017](https://reader034.vdocuments.us/reader034/viewer/2022042911/5f4432712f5b75224369198a/html5/thumbnails/96.jpg)
TextLabelProperties
![Page 97: Wireframing Lecture 15th March 2017 1 - UniTrentolatemar.science.unitn.it/segue_userFiles/2017Mobile... · 2017-04-11 · Wireframing Lecture 15th March 2017_1 Created Date: 4/11/2017](https://reader034.vdocuments.us/reader034/viewer/2022042911/5f4432712f5b75224369198a/html5/thumbnails/97.jpg)
![Page 98: Wireframing Lecture 15th March 2017 1 - UniTrentolatemar.science.unitn.it/segue_userFiles/2017Mobile... · 2017-04-11 · Wireframing Lecture 15th March 2017_1 Created Date: 4/11/2017](https://reader034.vdocuments.us/reader034/viewer/2022042911/5f4432712f5b75224369198a/html5/thumbnails/98.jpg)
Events– whatmakesyourprototypeinteractive
![Page 99: Wireframing Lecture 15th March 2017 1 - UniTrentolatemar.science.unitn.it/segue_userFiles/2017Mobile... · 2017-04-11 · Wireframing Lecture 15th March 2017_1 Created Date: 4/11/2017](https://reader034.vdocuments.us/reader034/viewer/2022042911/5f4432712f5b75224369198a/html5/thumbnails/99.jpg)
![Page 100: Wireframing Lecture 15th March 2017 1 - UniTrentolatemar.science.unitn.it/segue_userFiles/2017Mobile... · 2017-04-11 · Wireframing Lecture 15th March 2017_1 Created Date: 4/11/2017](https://reader034.vdocuments.us/reader034/viewer/2022042911/5f4432712f5b75224369198a/html5/thumbnails/100.jpg)
Events
![Page 101: Wireframing Lecture 15th March 2017 1 - UniTrentolatemar.science.unitn.it/segue_userFiles/2017Mobile... · 2017-04-11 · Wireframing Lecture 15th March 2017_1 Created Date: 4/11/2017](https://reader034.vdocuments.us/reader034/viewer/2022042911/5f4432712f5b75224369198a/html5/thumbnails/101.jpg)
Simulation– seeitallinaction
![Page 102: Wireframing Lecture 15th March 2017 1 - UniTrentolatemar.science.unitn.it/segue_userFiles/2017Mobile... · 2017-04-11 · Wireframing Lecture 15th March 2017_1 Created Date: 4/11/2017](https://reader034.vdocuments.us/reader034/viewer/2022042911/5f4432712f5b75224369198a/html5/thumbnails/102.jpg)
Simulatesonbrowser
![Page 103: Wireframing Lecture 15th March 2017 1 - UniTrentolatemar.science.unitn.it/segue_userFiles/2017Mobile... · 2017-04-11 · Wireframing Lecture 15th March 2017_1 Created Date: 4/11/2017](https://reader034.vdocuments.us/reader034/viewer/2022042911/5f4432712f5b75224369198a/html5/thumbnails/103.jpg)
ViewonDevice
![Page 104: Wireframing Lecture 15th March 2017 1 - UniTrentolatemar.science.unitn.it/segue_userFiles/2017Mobile... · 2017-04-11 · Wireframing Lecture 15th March 2017_1 Created Date: 4/11/2017](https://reader034.vdocuments.us/reader034/viewer/2022042911/5f4432712f5b75224369198a/html5/thumbnails/104.jpg)
UsingPredesignedAssetFiles
• DesignedinAdobePS/Sketch• ImportintoPrototypingTool
![Page 105: Wireframing Lecture 15th March 2017 1 - UniTrentolatemar.science.unitn.it/segue_userFiles/2017Mobile... · 2017-04-11 · Wireframing Lecture 15th March 2017_1 Created Date: 4/11/2017](https://reader034.vdocuments.us/reader034/viewer/2022042911/5f4432712f5b75224369198a/html5/thumbnails/105.jpg)
InJustinmind
![Page 106: Wireframing Lecture 15th March 2017 1 - UniTrentolatemar.science.unitn.it/segue_userFiles/2017Mobile... · 2017-04-11 · Wireframing Lecture 15th March 2017_1 Created Date: 4/11/2017](https://reader034.vdocuments.us/reader034/viewer/2022042911/5f4432712f5b75224369198a/html5/thumbnails/106.jpg)
MarvelApp
![Page 107: Wireframing Lecture 15th March 2017 1 - UniTrentolatemar.science.unitn.it/segue_userFiles/2017Mobile... · 2017-04-11 · Wireframing Lecture 15th March 2017_1 Created Date: 4/11/2017](https://reader034.vdocuments.us/reader034/viewer/2022042911/5f4432712f5b75224369198a/html5/thumbnails/107.jpg)
Invision
![Page 108: Wireframing Lecture 15th March 2017 1 - UniTrentolatemar.science.unitn.it/segue_userFiles/2017Mobile... · 2017-04-11 · Wireframing Lecture 15th March 2017_1 Created Date: 4/11/2017](https://reader034.vdocuments.us/reader034/viewer/2022042911/5f4432712f5b75224369198a/html5/thumbnails/108.jpg)
Pop
• Leveragingthesimplicityofpaperprototyping
Designonpaper
![Page 109: Wireframing Lecture 15th March 2017 1 - UniTrentolatemar.science.unitn.it/segue_userFiles/2017Mobile... · 2017-04-11 · Wireframing Lecture 15th March 2017_1 Created Date: 4/11/2017](https://reader034.vdocuments.us/reader034/viewer/2022042911/5f4432712f5b75224369198a/html5/thumbnails/109.jpg)
SimulateandTest
TakePictures Simulateclicks
![Page 110: Wireframing Lecture 15th March 2017 1 - UniTrentolatemar.science.unitn.it/segue_userFiles/2017Mobile... · 2017-04-11 · Wireframing Lecture 15th March 2017_1 Created Date: 4/11/2017](https://reader034.vdocuments.us/reader034/viewer/2022042911/5f4432712f5b75224369198a/html5/thumbnails/110.jpg)
![Page 111: Wireframing Lecture 15th March 2017 1 - UniTrentolatemar.science.unitn.it/segue_userFiles/2017Mobile... · 2017-04-11 · Wireframing Lecture 15th March 2017_1 Created Date: 4/11/2017](https://reader034.vdocuments.us/reader034/viewer/2022042911/5f4432712f5b75224369198a/html5/thumbnails/111.jpg)
Homework
• ChatApplication• Lookatexistingchatapplications• Whatfeatureswouldyouwanttoadd/remove• NextclassYOUwillbuildtheprototype