Prototypování webových aplikací

2,502 views

Published on

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

Published in: Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,502
On SlideShare
0
From Embeds
0
Number of Embeds
40
Actions
Shares
0
Downloads
17
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • SYMBIO dělá weby. Microsity, bežné firemní weby, e-shopy, korporátní klienty, backendové systémy pro klienty. \nVšem výstupům předchází prototyp.\n\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Stačí tužka a papír. Nepodceňovat! \nNepoužívat u klienta, který na to není zvyklý. Naopak skvělé na brainstorming.\nČasto nepochopitelné bez doprovodného komentáře.\n\n
  • Dávejte si do WF reálné texty.\n
  • Prohlížeč = kontext.\nInterakce = reálná simulace (ne jen “představte si že...”)\nTestujete už tím, že si proklikáváte prototyp.\n
  • \n
  • Pokud se při prototypování zaměříme čistě na GUI.\n
  • Textové bloopery\n
  • \n
  • \n
  • Interakční bloopery\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Jeff Johnson, GUI bloopers, 2007\n
  • Gordon Freeman má nejraději páčidlo. \nAle stejně jako páčidlo se hodí jenom na headcraby, na jiné problémy se hodí jiné nástroje.\nKaždý má svoje oblíbené a nedá na ně dopustit.\n
  • Vhodné pokud začínáte a nechcete investovat,\nnebo potřebujete výstupy opravdu rychle.\n
  • \n
  • \n
  • \n
  • Napkin - vyšlo i v češtině jako “Nápady na ubrousku”\n
  • \n
  • Grafické nástroje z Adobe rodiny, Diagramové tooly, Prezentace...\nFW umí exportovat klikací HTML\n
  • V nové verzi vestavěné WF shapes.\n
  • \n
  • \n
  • Powerpoint pro Mac\n
  • Horší použitelnost. Než tužka.\n
  • Velmi živá komunita, nehodí se pro rozsáhlejší projekty\n
  • \n
  • Mají i Solo a Free plan na vyzkoušení.\n
  • \n
  • http://37signals.com/svn/archives/001050.php\n\n
  • Velká míra abstrakce\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Rychlé na naučení, HTML export, drag & drop, komunita, support, ...\nMůj oblíbený tool - moje páčidlo.\n\nA tím nástroje končí. Dotazy?\n
  • \n
  • \n
  • Vizualizované vazby mezi stránkami\n
  • \n
  • \n
  • Navrhování iOS aplikací (bez custom designu).\n
  • Navrhování iOS aplikací (bez custom designu).\n
  • Navrhování iOS aplikací (bez custom designu).\n
  • \n
  • Navrhování iOS aplikací (bez custom designu). Video představení: http://www.youtube.com/watch?v=SAebrhW3SHg\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Prototypování webových aplikací

    1. 1. Prototypováníwebových aplikacíJakub Španihel@jakubspanihelwww.uzivatelsketestovani.czprosinec 2011
    2. 2. Ahoj!
    3. 3. www.symbio.cz
    4. 4. Co dělám?
    5. 5. Co dělám?• Povídám si s lidma.
    6. 6. Co dělám?• Povídám si s lidma.• Čtu, píšu, klikám,
    7. 7. Co dělám?• Povídám si s lidma.• Čtu, píšu, klikám,• maluju a kreslím
    8. 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. 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. 10. Co nás čeká
    11. 11. Co nás čeká• Pojmy
    12. 12. Co nás čeká• Pojmy• Nástroje
    13. 13. Co nás čeká• Pojmy• Nástroje• Axure
    14. 14. Pojmy
    15. 15. PrototypPrototyp je raný příklad, nebo modelvyrobený kvůli otestování konceptu,procesů, nebo fungování věcí.volně převzato z wikipedie
    16. 16. SpecifikaceDetailní a úplný popis požadavků afunkcí systému (webu, aplikace, ...),který má být vyvinut.volně převzato z wikipedie
    17. 17. Flows• Rozhodovací procesy• Logika aplikace
    18. 18. Skicy• Žádná omezení• Jen to důležité• Hrubá představa• Rychlost
    19. 19. Wireframy• Digitální forma• Víc detailů, víc obsahu• Názvosloví, texty• Rozložení obsahu• Vizuální priority
    20. 20. Prototypy• Náhled v prohlížeči• Ukázky interakcí• Dynamika
    21. 21. Prototypy• Náhled v prohlížeči• Ukázky interakcí• Dynamika• Náhled pro klienta• Možnost testování• Supluje specifikaci
    22. 22. GUI BlooperGUI: grafické uživatelské rozhraní.BLOOPER: Pitomost, kiks.volně přeloženo
    23. 23. Více o blooperech• gui-bloopers.com• bit.ly/guibloopPrototypování mimojiné sloužík předcházení chybám v GUI.
    24. 24. Nástrojebit.ly/wftools
    25. 25. Tužka a papírPodceňovaný, nejrychlejší nástroj,který se vrací do módy po znechucenínepraktickými digi-nástroji.• bit.ly/sketchingUX
    26. 26. Interactive Sketching NotationJakub Linowski, Wireframes magazine• PDF ke stažení linowski.ca/sketching
    27. 27. Předtištěné šablonyWebové gridy, mobilní zařízení, ...• Například bit.ly/sketchTpl
    28. 28. Předtištěné šablonyWebové gridy, mobilní zařízení, ...• Například bit.ly/sketchTpl
    29. 29. Tabule, stěna, ...Když se chcete hýbat• Například ideapaint.com
    30. 30. Knihy o skečováníWebové gridy, mobilní zařízení, ...
    31. 31. Grafické nástroje,diagramy, prezentace, ...Když je vaším jediným nástrojem kladivo,všechno pak vypadá jako hřebík.
    32. 32. Visio + stencilsSvého času jediný nástroj, nutné použít stencily• Wireframe shapes bit.ly/visiowf
    33. 33. OmnigraffleJen Mac, $200, nutné stencily, iPad verze ($50)• Šablony graffletopia.com
    34. 34. Flash CatalystPSD > Flash, součást balíku CS5• On-line demo bit.ly/catalydeo
    35. 35. KeynoteMac kancelářský balík, vestavěné iOS efekty• Šablony za peníze keynotopia.com
    36. 36. On-line kreslítkaMódní vlna cloudu a on-line aplikací.Horší použitelnost, omezené funkce,ale snadné sdílení. Většinou v Air.
    37. 37. Balsamiq mockups$79, wiki syntax, živá komunita, ...• On-line demo bit.ly/balsademo
    38. 38. iPlotz$15 měsíčně, složitější, task management, ...• On-line demo iplotz.com/app
    39. 39. HotGloo$14 měsíčně, vestavěný chat• On-line demo www.hotgloo.com/tour
    40. 40. HTML prototypyMyslíte, že máte koule jako 37signals jo?Vývoj funguje jen v kombinaci se skicami.
    41. 41. 37signals, Getting Real (no spec)Pro interní vývoj, nebo pokud jste rychlí kodéři• Více 37signals.com/svn
    42. 42. 37signals, Getting Real (no spec)Pro interní vývoj, nebo pokud jste rychlí kodéři• Více 37signals.com/svn
    43. 43. Draft$10, pro iPad, spolupracuje s Campfire, ...• Více na 37signals.com/draft
    44. 44. CSS frameworkyEfektivita až s praxí, začátky jsou krušné...• Příklad 960.gs, blueprintcss.org
    45. 45. Placehold.itExterní zdroj obrázků (on-line)• Příklad placehold.it/600x200
    46. 46. jQuery MobileVydána verze 1.0 (odladěná).• Demo bit.ly/dzejkvery
    47. 47. Sencha TouchTvůrci Ext.js a dalších. Vazba na PhoneGap.• Demo bit.ly/snchatch
    48. 48. Specializované nástrojeProgramy speciálně pro návrhuživatelských rozhraní, interakcí, atd...
    49. 49. Axure RP$589, interakce, podmínky, formuláře, SVN, ...• Více na axure.com
    50. 50. Antetype$289, beta preview z iOS, skinovatelné, vektory, ...• Více na antetype.com
    51. 51. PencilZdarma, plugin do Firefoxu• Více na pencil.evolus.vn
    52. 52. Microsoft SketchFlowSoučást Expression balíku• Více na bit.ly/msflow
    53. 53. Justinmind Prototyper$465, HTML export, interakce, načítání dat, ...• Více na justinmind.com
    54. 54. iOS prototypováníPrototypování v iOS zařízení.
    55. 55. imockups$49, pro iPad, ...• Více na endloop.ca/imockups
    56. 56. SketchyPad$5, pro iPad, spolupracuje s Balsamiqem, ...• Více na sketchyapp.com
    57. 57. Blueprint$20, pro iPad, spolupracuje s Balsamiqem, ...• Více na sketchyapp.com
    58. 58. Blueprint$20, pro iPad, spolupracuje s Balsamiqem, ...• Více na sketchyapp.com
    59. 59. App Cooker$20 (zatím), pro iPad, full “managing iOS project”• Více na appcooker.com
    60. 60. Interface$10, hotové UI, verze pro iPad, Xcode export ...• Více na lesscode.co.nz/interface (video)
    61. 61. Nástroje
    62. 62. Nástroje• Tužka a papír (a další non-digital nástroje)
    63. 63. Nástroje• Tužka a papír (a další non-digital nástroje)• Grafické a prezentační nástroje atp.
    64. 64. Nástroje• Tužka a papír (a další non-digital nástroje)• Grafické a prezentační nástroje atp.• On-line kreslítka
    65. 65. 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
    66. 66. 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
    67. 67. 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
    68. 68. Axure
    69. 69. 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
    70. 70. 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 (???)
    71. 71. Ke staženíDownload trial verze: bit.ly/axurebetaUkázka funkcí: bit.ly/axdemosZdroják (*.RP): bit.ly/axdemos2
    72. 72. Mapa stránek Poznámky Interakce Vlastnosti Widgety Masters Dynamické panely Vlastnosti stránky
    73. 73. *.rp *.rplib Výstupy
    74. 74. *.rp *.rplib Výstupy• Prototyp • Widgety • HTML export• Masters, Styly, • PNG export• ... • Specifikace
    75. 75. Ukázka Axure 101
    76. 76. *.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
    77. 77. *.rplib• Vlastní widgety• Spousta jich je on-line• Automatické načítání• axure.com/communityLibraries.aspx• totalwireframe.com (za peníze)• volně na webu
    78. 78. Výstupy• HTML, PNG, *.doc• One-click export• Nastavení generátorů• MS Word šablony• FTP upload HTML :(• http://share.axure.com/
    79. 79. Jakub Španihel@jakubspanihel@axure_users_czwww.uzivatelsketestovani.cz

    ×