Slidy k přednášce na VŠE. Duben 2011.

1. Prototypování
webových aplikací
Jakub Španihel
@jakubspanihel
www.uzivatelsketestovani.cz
prosinec 2011

2. Ahoj!

3. www.symbio.cz

4. Co dělám?

5. Co dělám?
• Povídám si s lidma.

6. Co dělám?
• Povídám si s lidma.
• Čtu, píšu, klikám,

7. Co dělám?
• Povídám si s lidma.
• Čtu, píšu, klikám,
• maluju a kreslím

8. Co dělám?
• Povídám si s lidma.
• Čtu, píšu, klikám,
• maluju a kreslím
• a vymejšlím hejblátka.

9. Co dělám?
• Povídám si s lidma.
• Čtu, píšu, klikám,
• maluju a kreslím
• a vymejšlím hejblátka.
Říkejme
tomu

10. Co nás čeká

11. Co nás čeká
• Pojmy

12. Co nás čeká
• Pojmy
• Nástroje

13. Co nás čeká
• Pojmy
• Nástroje
• Axure

14. Pojmy

15. Prototyp
Prototyp je raný příklad, nebo model
vyrobený kvůli otestování konceptu,
procesů, nebo fungování věcí.
volně převzato z wikipedie

16. Specifikace
Detailní a úplný popis požadavků a
funkcí systému (webu, aplikace, ...),
který má být vyvinut.
volně převzato z wikipedie

17. Flows
• Rozhodovací procesy
• Logika aplikace

18. Skicy
• Žádná omezení
• Jen to důležité
• Hrubá představa
• Rychlost

19. Wireframy
• Digitální forma
• Víc detailů, víc obsahu
• Názvosloví, texty
• Rozložení obsahu
• Vizuální priority

20. Prototypy
• Náhled v prohlížeči
• Ukázky interakcí
• Dynamika

21. Prototypy
• Náhled v prohlížeči
• Ukázky interakcí
• Dynamika
• Náhled pro klienta
• Možnost testování
• Supluje specifikaci

23. GUI Blooper
GUI: grafické uživatelské rozhraní.
BLOOPER: Pitomost, kiks.
volně přeloženo

33. Více o blooperech
• gui-bloopers.com
• bit.ly/guibloop
Prototypování mimojiné slouží
k předcházení chybám v GUI.

34. Nástroje
bit.ly/wftools

35. Tužka a papír
Podceňovaný, nejrychlejší nástroj,
který se vrací do módy po znechucení
nepraktickými digi-nástroji.
• bit.ly/sketchingUX

36. Interactive Sketching Notation
Jakub Linowski, Wireframes magazine
• PDF ke stažení linowski.ca/sketching

37. Předtištěné šablony
Webové gridy, mobilní zařízení, ...
• Například bit.ly/sketchTpl

38. Předtištěné šablony
Webové gridy, mobilní zařízení, ...
• Například bit.ly/sketchTpl

39. Tabule, stěna, ...
Když se chcete hýbat
• Například ideapaint.com

40. Knihy o skečování
Webové gridy, mobilní zařízení, ...

41. Grafické nástroje,
diagramy, prezentace, ...
Když je vaším jediným nástrojem kladivo,
všechno pak vypadá jako hřebík.

43. Visio + stencils
Svého času jediný nástroj, nutné použít stencily
• Wireframe shapes bit.ly/visiowf

44. Omnigraffle
Jen Mac, $200, nutné stencily, iPad verze ($50)
• Šablony graffletopia.com

45. Flash Catalyst
PSD > Flash, součást balíku CS5
• On-line demo bit.ly/catalydeo

46. Keynote
Mac kancelářský balík, vestavěné iOS efekty
• Šablony za peníze keynotopia.com

47. On-line kreslítka
Módní vlna cloudu a on-line aplikací.
Horší použitelnost, omezené funkce,
ale snadné sdílení. Většinou v Air.

48. Balsamiq mockups
$79, wiki syntax, živá komunita, ...
• On-line demo bit.ly/balsademo

49. iPlotz
$15 měsíčně, složitější, task management, ...
• On-line demo iplotz.com/app

50. HotGloo
$14 měsíčně, vestavěný chat
• On-line demo www.hotgloo.com/tour

51. HTML prototypy
Myslíte, že máte koule jako 37signals jo?
Vývoj funguje jen v kombinaci se skicami.

52. 37signals, Getting Real (no spec)
Pro interní vývoj, nebo pokud jste rychlí kodéři
• Více 37signals.com/svn

53. 37signals, Getting Real (no spec)
Pro interní vývoj, nebo pokud jste rychlí kodéři
• Více 37signals.com/svn

54. Draft
$10, pro iPad, spolupracuje s Campfire, ...
• Více na 37signals.com/draft

55. CSS frameworky
Efektivita až s praxí, začátky jsou krušné...
• Příklad 960.gs, blueprintcss.org

56. Placehold.it
Externí zdroj obrázků (on-line)
• Příklad placehold.it/600x200

57. jQuery Mobile
Vydána verze 1.0 (odladěná).
• Demo bit.ly/dzejkvery

58. Sencha Touch
Tvůrci Ext.js a dalších. Vazba na PhoneGap.
• Demo bit.ly/snchatch

59. Specializované nástroje
Programy speciálně pro návrh
uživatelských rozhraní, interakcí, atd...

60. Axure RP
$589, interakce, podmínky, formuláře, SVN, ...
• Více na axure.com

61. Antetype
$289, beta preview z iOS, skinovatelné, vektory, ...
• Více na antetype.com

62. Pencil
Zdarma, plugin do Firefoxu
• Více na pencil.evolus.vn

63. Microsoft SketchFlow
Součást Expression balíku
• Více na bit.ly/msflow

64. Justinmind Prototyper
$465, HTML export, interakce, načítání dat, ...
• Více na justinmind.com

65. iOS prototypování
Prototypování v iOS zařízení.

66. imockups
$49, pro iPad, ...
• Více na endloop.ca/imockups

67. SketchyPad
$5, pro iPad, spolupracuje s Balsamiqem, ...
• Více na sketchyapp.com

68. Blueprint
$20, pro iPad, spolupracuje s Balsamiqem, ...
• Více na sketchyapp.com

69. Blueprint
$20, pro iPad, spolupracuje s Balsamiqem, ...
• Více na sketchyapp.com

70. App Cooker
$20 (zatím), pro iPad, full “managing iOS project”
• Více na appcooker.com

71. Interface
$10, hotové UI, verze pro iPad, Xcode export ...
• Více na lesscode.co.nz/interface (video)

72. Nástroje

73. Nástroje
• Tužka a papír (a další non-digital nástroje)

74. Nástroje
• Tužka a papír (a další non-digital nástroje)
• Grafické a prezentační nástroje atp.

75. Nástroje
• Tužka a papír (a další non-digital nástroje)
• Grafické a prezentační nástroje atp.
• On-line kreslítka

76. Nástroje
• Tužka a papír (a další non-digital nástroje)
• Grafické a prezentační nástroje atp.
• On-line kreslítka
• HTML prototypy

77. Nástroje
• Tužka a papír (a další non-digital nástroje)
• Grafické a prezentační nástroje atp.
• On-line kreslítka
• HTML prototypy
• Specializované nástroje

78. Nástroje
• Tužka a papír (a další non-digital nástroje)
• Grafické a prezentační nástroje atp.
• On-line kreslítka
• HTML prototypy
• Specializované nástroje
• iOS apps

79. Axure

80. Výhody (pro mě)
• Rychlé na naučení
• Náhled v prohlížeči
• Formuláře
• Podmínky a validace
• Interakce a efekty
• Rychlá podpora
• Aktivní komunita

81. Nepoužívejte Axure!
• ...když jste v týmu dva a sedíte u sebe
• ...když tvoříte super-hyper-mega-cool-flash-3D web
• ...když navrhujete mobilní web nebo aplikaci (???)

82. Ke stažení
Download trial verze: bit.ly/axurebeta
Ukázka funkcí: bit.ly/axdemos
Zdroják (*.RP): bit.ly/axdemos2

83. Mapa stránek Poznámky
Interakce
Vlastnosti
Widgety
Masters Dynamické panely
Vlastnosti stránky

84. *.rp *.rplib Výstupy

85. *.rp *.rplib Výstupy
• Prototyp • Widgety • HTML export
• Masters, Styly, • PNG export
• ... • Specifikace

86. Ukázka
Axure 101

87. *.rp
• Sitemap + stránky
• Masters (header, footer, ...)
• Styly
• Vazby na *rplib
• Struktura poznámek
• Nastavení exportu
• Výchozí soubor pro práci
• Připravené komponenty

88. *.rplib
• Vlastní widgety
• Spousta jich je on-line
• Automatické načítání
• axure.com/communityLibraries.aspx
• totalwireframe.com (za peníze)
• volně na webu

89. Výstupy
• HTML, PNG, *.doc
• One-click export
• Nastavení generátorů
• MS Word šablony
• FTP upload HTML :(
• http://share.axure.com/

90. Jakub Španihel
@jakubspanihel
@axure_users_cz
www.uzivatelsketestovani.cz