for mobile - není prototyp jako prototyp
DESCRIPTION
„Jak řešíte prototypování mobilních aplikací Vy? Jak vypadají Vaše prototypy? Víte, co to je? Kdy je děláte? A v čem? A kolik jich je? Jak vypadají? A jsou vůbec k něčemu? Ukáži Vám, jak se vypadá má odpověď na tyto otázky. Ta Vaše pak bude na Vás ;)“Prezentace zazněla na lednovém setkání vývojářů mobilních aplikací for Mobile. Více najdete na http://www.for-mobile.cz a http://srazy.info/for-mobileTRANSCRIPT
![Page 1: For mobile - Není prototyp jako prototyp](https://reader034.vdocuments.net/reader034/viewer/2022051012/540043d38d7f728b408b4763/html5/thumbnails/1.jpg)
Není prototyp jako prototyp
Tomáš Jukin @Inza
Juicymo www.juicymo.cz @JuicymoCZ
![Page 2: For mobile - Není prototyp jako prototyp](https://reader034.vdocuments.net/reader034/viewer/2022051012/540043d38d7f728b408b4763/html5/thumbnails/2.jpg)
Jak na prototypování mobilních aplikací?
• Pomalu (pořádný prototyp ~ 8h)
• S citem
• HIG
• Soustředit se na sdělení
Tomáš Jukin - Není prototyp jako prototyp Juicymo (www.juicymo.cz) @JuicymoCZ
![Page 3: For mobile - Není prototyp jako prototyp](https://reader034.vdocuments.net/reader034/viewer/2022051012/540043d38d7f728b408b4763/html5/thumbnails/3.jpg)
LFP?
Tomáš Jukin - Není prototyp jako prototyp Juicymo (www.juicymo.cz) @JuicymoCZ
![Page 4: For mobile - Není prototyp jako prototyp](https://reader034.vdocuments.net/reader034/viewer/2022051012/540043d38d7f728b408b4763/html5/thumbnails/4.jpg)
WTF?
Tomáš Jukin - Není prototyp jako prototyp Juicymo (www.juicymo.cz) @JuicymoCZ
![Page 5: For mobile - Není prototyp jako prototyp](https://reader034.vdocuments.net/reader034/viewer/2022051012/540043d38d7f728b408b4763/html5/thumbnails/5.jpg)
Low Fidelity Prototype• = prototyp nízké věrnosti
• “kresba” (=~ wireframe)
• černobílý - testujeme JEN UX, UI! (ne design)
• ideálně proklikávací (aby šlo testovat)
• na co pozor:
• šířka pera/tužky
• rozlišení
• interakce!Tomáš Jukin - Není prototyp jako prototyp Juicymo (www.juicymo.cz) @JuicymoCZ
![Page 6: For mobile - Není prototyp jako prototyp](https://reader034.vdocuments.net/reader034/viewer/2022051012/540043d38d7f728b408b4763/html5/thumbnails/6.jpg)
Low Fidelity Prototype
Tomáš Jukin - Není prototyp jako prototyp Juicymo (www.juicymo.cz) @JuicymoCZ
![Page 7: For mobile - Není prototyp jako prototyp](https://reader034.vdocuments.net/reader034/viewer/2022051012/540043d38d7f728b408b4763/html5/thumbnails/7.jpg)
Low Fidelity Prototype• V čem tvořit?
• Papír a tužka/fix
• Balsamic Mockups (a LiveMockups)
• Mockingbird
• “Wireframovací nástroje”
• V čem netvořit?
• Axure RP
• Photoshop/Fireworks
• xCode/Eclipse
Tomáš Jukin - Není prototyp jako prototyp Juicymo (www.juicymo.cz) @JuicymoCZ
• HTML/CSS
• Grafické editory
![Page 8: For mobile - Není prototyp jako prototyp](https://reader034.vdocuments.net/reader034/viewer/2022051012/540043d38d7f728b408b4763/html5/thumbnails/8.jpg)
Low Fidelity Prototype• V čem tvořit?
• Papír a tužka/fix
• Balsamic Mockups (a LiveMockups)
• Mockingbird
• “Wireframovací nástroje”
• V čem netvořit?
• Axure RP
• Photoshop/Fireworks
• xCode/Eclipse
Tomáš Jukin - Není prototyp jako prototyp Juicymo (www.juicymo.cz) @JuicymoCZ
• HTML/CSS
• Grafické editory
INTERAKCE!
![Page 9: For mobile - Není prototyp jako prototyp](https://reader034.vdocuments.net/reader034/viewer/2022051012/540043d38d7f728b408b4763/html5/thumbnails/9.jpg)
HFP?
Tomáš Jukin - Není prototyp jako prototyp Juicymo (www.juicymo.cz) @JuicymoCZ
![Page 10: For mobile - Není prototyp jako prototyp](https://reader034.vdocuments.net/reader034/viewer/2022051012/540043d38d7f728b408b4763/html5/thumbnails/10.jpg)
High Fidelity Prototype
• = prototyp vysoké věrnosti
• grafika/design (ne wireframe!)
• barevný - testujeme UI, UX a design
• nutně proklikávací/interaktivní (aby šlo testovat)
• na co pozor:
• jak snadné/levné jsou změny
• práce navíc?
Tomáš Jukin - Není prototyp jako prototyp Juicymo (www.juicymo.cz) @JuicymoCZ
![Page 11: For mobile - Není prototyp jako prototyp](https://reader034.vdocuments.net/reader034/viewer/2022051012/540043d38d7f728b408b4763/html5/thumbnails/11.jpg)
High Fidelity Prototype
Tomáš Jukin - Není prototyp jako prototyp Juicymo (www.juicymo.cz) @JuicymoCZ
![Page 12: For mobile - Není prototyp jako prototyp](https://reader034.vdocuments.net/reader034/viewer/2022051012/540043d38d7f728b408b4763/html5/thumbnails/12.jpg)
High Fidelity Prototype• V čem tvořit?
• xCode/Eclipse• Photoshop/Fireworks
• Grafické editory
• V čem netvořit?
• Papír a tužka/fix
• Balsamiq Mockups
• Mockingbird
Tomáš Jukin - Není prototyp jako prototyp Juicymo (www.juicymo.cz) @JuicymoCZ
•“Wireframovací nástroje”
•Axure RP
•HTML/CSS
![Page 13: For mobile - Není prototyp jako prototyp](https://reader034.vdocuments.net/reader034/viewer/2022051012/540043d38d7f728b408b4763/html5/thumbnails/13.jpg)
Workflow
Tomáš Jukin - Není prototyp jako prototyp Juicymo (www.juicymo.cz) @JuicymoCZ
![Page 14: For mobile - Není prototyp jako prototyp](https://reader034.vdocuments.net/reader034/viewer/2022051012/540043d38d7f728b408b4763/html5/thumbnails/14.jpg)
Workflow
• Proces
• Od ničeho k aplikaci
• Dáno konvencí, standartizováno a “normalizováno”
• Tým se na tom domluvil
Tomáš Jukin - Není prototyp jako prototyp Juicymo (www.juicymo.cz) @JuicymoCZ
![Page 15: For mobile - Není prototyp jako prototyp](https://reader034.vdocuments.net/reader034/viewer/2022051012/540043d38d7f728b408b4763/html5/thumbnails/15.jpg)
Naivní Workflow No. I
Tomáš Jukin - Není prototyp jako prototyp Juicymo (www.juicymo.cz) @JuicymoCZ
ZadáníJak to má vypadat?
Design
Co to má umět?
Kód Hotovo!
![Page 16: For mobile - Není prototyp jako prototyp](https://reader034.vdocuments.net/reader034/viewer/2022051012/540043d38d7f728b408b4763/html5/thumbnails/16.jpg)
Naivní Workflow No. I
Tomáš Jukin - Není prototyp jako prototyp Juicymo (www.juicymo.cz) @JuicymoCZ
ZadáníJak to má vypadat?
Design
Co to má umět?
Kód Hotovo!
Fail!
![Page 17: For mobile - Není prototyp jako prototyp](https://reader034.vdocuments.net/reader034/viewer/2022051012/540043d38d7f728b408b4763/html5/thumbnails/17.jpg)
Naivní Workflow No. II
Tomáš Jukin - Není prototyp jako prototyp Juicymo (www.juicymo.cz) @JuicymoCZ
ZadáníJak to má vypadat?
Design
Co to má umět? Kód
Hotovo!
![Page 18: For mobile - Není prototyp jako prototyp](https://reader034.vdocuments.net/reader034/viewer/2022051012/540043d38d7f728b408b4763/html5/thumbnails/18.jpg)
Naivní Workflow No. II
Tomáš Jukin - Není prototyp jako prototyp Juicymo (www.juicymo.cz) @JuicymoCZ
ZadáníJak to má vypadat?
Design
Co to má umět? Kód
Hotovo!
Fail!
![Page 19: For mobile - Není prototyp jako prototyp](https://reader034.vdocuments.net/reader034/viewer/2022051012/540043d38d7f728b408b4763/html5/thumbnails/19.jpg)
Amatérské Workflow
Tomáš Jukin - Není prototyp jako prototyp Juicymo (www.juicymo.cz) @JuicymoCZ
LFPTestování
UI/UXJe OK?
Design TestováníUI/UX
Je OK?+Implementace
Zadání Analýza Je OK?
HFP
TestováníUI/UX Je OK? Hotovo!
![Page 20: For mobile - Není prototyp jako prototyp](https://reader034.vdocuments.net/reader034/viewer/2022051012/540043d38d7f728b408b4763/html5/thumbnails/20.jpg)
Amatérské Workflow
Tomáš Jukin - Není prototyp jako prototyp Juicymo (www.juicymo.cz) @JuicymoCZ
LFPTestování
UI/UXJe OK?
Design TestováníUI/UX
Je OK?+Implementace
Zadání Analýza Je OK?
HFP
TestováníUI/UX Je OK? Hotovo!
Toto je pracné :-(
Toto je nějaká banda obrázků :-(
![Page 21: For mobile - Není prototyp jako prototyp](https://reader034.vdocuments.net/reader034/viewer/2022051012/540043d38d7f728b408b4763/html5/thumbnails/21.jpg)
Profíkovo Workflow
Tomáš Jukin - Není prototyp jako prototyp Juicymo (www.juicymo.cz) @JuicymoCZ
LFPTestování
UI/UXJe OK?
Design TestováníUI/UX
Je OK?+Model
Zadání Analýza Je OK?
HFP
TestováníUI/UX Je OK? Hotovo!
Toto je snadné :-)!
Toto je aplikace bez modelu :-)
![Page 22: For mobile - Není prototyp jako prototyp](https://reader034.vdocuments.net/reader034/viewer/2022051012/540043d38d7f728b408b4763/html5/thumbnails/22.jpg)
A jaké workflow používáte vy?
Tomáš Jukin - Není prototyp jako prototyp Juicymo (www.juicymo.cz) @JuicymoCZ
![Page 23: For mobile - Není prototyp jako prototyp](https://reader034.vdocuments.net/reader034/viewer/2022051012/540043d38d7f728b408b4763/html5/thumbnails/23.jpg)
A jaké workflow budete používat?
Tomáš Jukin - Není prototyp jako prototyp Juicymo (www.juicymo.cz) @JuicymoCZ
![Page 24: For mobile - Není prototyp jako prototyp](https://reader034.vdocuments.net/reader034/viewer/2022051012/540043d38d7f728b408b4763/html5/thumbnails/24.jpg)
Kdy je nejlepší nasadit nové workflow?
Tomáš Jukin - Není prototyp jako prototyp Juicymo (www.juicymo.cz) @JuicymoCZ
![Page 25: For mobile - Není prototyp jako prototyp](https://reader034.vdocuments.net/reader034/viewer/2022051012/540043d38d7f728b408b4763/html5/thumbnails/25.jpg)
Včera bylo pozdě...
Tomáš Jukin - Není prototyp jako prototyp Juicymo (www.juicymo.cz) @JuicymoCZ
![Page 26: For mobile - Není prototyp jako prototyp](https://reader034.vdocuments.net/reader034/viewer/2022051012/540043d38d7f728b408b4763/html5/thumbnails/26.jpg)
Závěrečné shrnutí
Tomáš Jukin - Není prototyp jako prototyp Juicymo (www.juicymo.cz) @JuicymoCZ
• Známe LFP - je to cool!
• Známe HFP - brácha LFP a je taky cool!
• Známe workflow
• víme proč je dobré...
• budeme ho používat - hned od zítřka ;-)
![Page 27: For mobile - Není prototyp jako prototyp](https://reader034.vdocuments.net/reader034/viewer/2022051012/540043d38d7f728b408b4763/html5/thumbnails/27.jpg)
Tomáš Jukin - Není prototyp jako prototyp Juicymo (www.juicymo.cz) @JuicymoCZ
Děkuji za pozornostDotazy?
Tomáš Jukin @Inza