„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-mobile

1. Není prototyp jako
prototyp
Tomáš Jukin @Inza
Juicymo www.juicymo.cz @JuicymoCZ

2. 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

3. LFP?
Tomáš Jukin - Není prototyp jako prototyp Juicymo (www.juicymo.cz) @JuicymoCZ

4. WTF?
Tomáš Jukin - Není prototyp jako prototyp Juicymo (www.juicymo.cz) @JuicymoCZ

5. 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

6. Low Fidelity Prototype
Tomáš Jukin - Není prototyp jako prototyp Juicymo (www.juicymo.cz) @JuicymoCZ

7. 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 • HTML/CSS
• Photoshop/Fireworks • Grafické editory
• xCode/Eclipse
Tomáš Jukin - Není prototyp jako prototyp Juicymo (www.juicymo.cz) @JuicymoCZ

8. Low Fidelity Prototype
• V čem tvořit? INT
• Papír a tužka/fix ERA
• KC
•
Balsamic Mockups (a LiveMockups)
Mockingbird
E!
• “Wireframovací nástroje”
• V čem netvořit?
• Axure RP • HTML/CSS
• Photoshop/Fireworks • Grafické editory
• xCode/Eclipse
Tomáš Jukin - Není prototyp jako prototyp Juicymo (www.juicymo.cz) @JuicymoCZ

9. HFP?
Tomáš Jukin - Není prototyp jako prototyp Juicymo (www.juicymo.cz) @JuicymoCZ

10. 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

11. High Fidelity Prototype
Tomáš Jukin - Není prototyp jako prototyp Juicymo (www.juicymo.cz) @JuicymoCZ

12. High Fidelity Prototype
• V čem tvořit?
• xCode/Eclipse
• Photoshop/Fireworks
• Grafické editory
• V čem netvořit?
• Papír a tužka/fix • “Wireframovací nástroje”
• Balsamiq Mockups • Axure RP
• Mockingbird • HTML/CSS
Tomáš Jukin - Není prototyp jako prototyp Juicymo (www.juicymo.cz) @JuicymoCZ

13. Workflow
Tomáš Jukin - Není prototyp jako prototyp Juicymo (www.juicymo.cz) @JuicymoCZ

14. 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

15. Naivní Workflow No. I
Jak to má
Zadání Design
vypadat?
Co to má
Kód Hotovo!
umět?
Tomáš Jukin - Není prototyp jako prototyp Juicymo (www.juicymo.cz) @JuicymoCZ

16. Naivní Workflow No. I
Jak to má
Zadání Design
vypadat?
Co to má
Kód Hotovo!
umět?
Fail!
Tomáš Jukin - Není prototyp jako prototyp Juicymo (www.juicymo.cz) @JuicymoCZ

17. Naivní Workflow No. II
Zadání Hotovo!
Jak to má
Design
vypadat?
Co to má
Kód
umět?
Tomáš Jukin - Není prototyp jako prototyp Juicymo (www.juicymo.cz) @JuicymoCZ

18. Naivní Workflow No. II
Zadání Hotovo!
Jak to má
Design
vypadat?
Co to má
Kód
umět?
Fail!
Tomáš Jukin - Není prototyp jako prototyp Juicymo (www.juicymo.cz) @JuicymoCZ

19. Amatérské Workflow
Zadání Analýza Je OK?
Testování
LFP Je OK?
UI/UX
Design
Testování Je OK?
HFP UI/UX +Implementace
Testování
Je OK? Hotovo!
UI/UX
Tomáš Jukin - Není prototyp jako prototyp Juicymo (www.juicymo.cz) @JuicymoCZ

20. Amatérské Workflow
Zadání Analýza Je OK?
Testování
LFP Je OK?
UI/UX
Toto je
Design
Testování Je OK? pracné :-(
HFP UI/UX +Implementace
Toto je nějaká
banda obrázků :-(
Testování
Je OK? Hotovo!
UI/UX
Tomáš Jukin - Není prototyp jako prototyp Juicymo (www.juicymo.cz) @JuicymoCZ

21. Profíkovo Workflow
Zadání Analýza Je OK?
Testování
LFP Je OK?
UI/UX
Toto je
Design
Testování Je OK? snadné :-)!
HFP UI/UX +Model
Toto je aplikace
bez modelu :-)
Testování
Je OK? Hotovo!
UI/UX
Tomáš Jukin - Není prototyp jako prototyp Juicymo (www.juicymo.cz) @JuicymoCZ

22. A jaké workflow
používáte vy?
Tomáš Jukin - Není prototyp jako prototyp Juicymo (www.juicymo.cz) @JuicymoCZ

23. A jaké workflow
budete používat?
Tomáš Jukin - Není prototyp jako prototyp Juicymo (www.juicymo.cz) @JuicymoCZ

24. Kdy je nejlepší nasadit
nové workflow?
Tomáš Jukin - Není prototyp jako prototyp Juicymo (www.juicymo.cz) @JuicymoCZ

25. Včera bylo pozdě...
Tomáš Jukin - Není prototyp jako prototyp Juicymo (www.juicymo.cz) @JuicymoCZ

26. Závěrečné shrnutí
• 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 ;-)
Tomáš Jukin - Není prototyp jako prototyp Juicymo (www.juicymo.cz) @JuicymoCZ

27. Děkuji za pozornost
Dotazy?
Tomáš Jukin @Inza
Tomáš Jukin - Není prototyp jako prototyp Juicymo (www.juicymo.cz) @JuicymoCZ