Hi-Fi Prototyping + laborationsgenomgång & verktyg

Transkript

1 Hi-Fi Prototyping + laborationsgenomgång & verktyg Karin Fahlquist 2015 Frågor att besvara Vad innebär prototyping? Vad är speciellt med hi-fi prototyping? Hur kan man använda dem? Hur väljer man nivå och verktyg? Vad kan man göra med Axure? 1

2 Prototyper - fidelity Utseende Funktion Innehåll Prototyper - dimensioner Horisontell (omfattning) Vertikal (trogenhet) T-formad 2

3 Prototyper - nivåer Lowfidelity Prototyper - nivåer Low-fidelity High-fidelity 3

4 Prototyper - syfte Viktigare än nivå är: Dimensioner Trogenhet SYFTE Prototyper - syfte Få en helhetsbild själv Se till att alla i teamet är på samma plan Visa för en potentiell kund Sälja in vår idé Testa olika idéer Testa på användare Hitta fel 4

5 Syfte med Hi-Fi För många av dessa syften krävs mer än en statisk, visuellt enkel bild Här kommer medium-fidelity- och highfidelity-prototyper in! Fördelar med Hi-Fi Ser ut & känns som slutprodukten Görs i utvecklingsmiljö (programvara eller slutliga utvecklingsmiljön) Användas för utvärdering av huvuddesignens element (innehåll, visuella, interaktivitet, funktionalitet, media) Utvärdera om användaren kan lära sig systemet (tid) Använda som design dokument mot kund Full interaktivitet & funktionalitet 5

6 Nackdelar med Hi-Fi Människor tror på det viktigt att detaljer är fixade (ex.vis stavfel kan förvirra) Ger sken av att det ska gå att implementera allt Tid Nackdel med Hi-Fi Pappersprototyp Hi-fi? Färdig produkt Trogenhet 6

7 Tid Nackdel med Hi-Fi Pappersprototyp Hi-fi? Färdig produkt Trogenhet Medium-fidelity prototyp Mellan Lo-Fi & Hi-Fi prototyp Ser ut som slutprodukten Har inte alla funktioner Interaktion med Wizard of Oz metoden Bra vid utvärdering av enbart layout eller ny interaktion 7

8 Hi-fi kräver omdöme Medium- och high-fidelity-prototyper kräver större kunskap och omdöme Pappersprototyper kan man alltid göra! Vid högre trogenhet måste beslut tas om vad som skall göras och varför Det finns fler möjligheter och fler risker Scenario Vi har en idé på en mobil applikation - en social träningsapp. Vi är ett team studenter utan pengar och skickar därför in vår idé till en affärsutvecklings- organisation, i hopp om finansiering. Vi vinner och får dessutom kontakt med andra som vi behöver för att fullfölja idén: ekonom, säljare, utvecklare. Ett nytt team skapas tillsammans med dessa. En stor fråga i projektet är hur benägna folk som tränar faktiskt är att använda funktionerna när de är ute på spåret eller i träningsanläggningen. Halvvägs in i projektet kommer vi ha chans att presentera vår idé på en mässa, där viktiga kontakter finns närvarande. 8

9 Laboration 3 Skall anpassas efter och vara körbar på mobila plattformar Om användartest - mobilt Frågor? Teknologival (papper & penna) axure balsamiq (post it) html m.m. illustrator, photoshop flash, edge powerpoint / keynote implementationsspråk 9

10 Teknologival Ta hänsyn till: dimension, trogenhet, syfte mobilitet användartester Teknologival Välj plattform för enkelt och snabbt resultat dvs utifrån din kompetens Verktyget inte självändamål 10

11 Lo-Fi PNG PDF Test 7D $79 Popular Mockup Windows, Mac, and Linux via Adobe Air. Middle HTML, PNG, document and PDF. Free Open source Firefox addons, standalone using XULRunner Hi-Fi HTML, PNG, Specification. Test 30 D $589 Popular Prototyping PC, Mac Hi-Fi HTML5, CSS3 styles, and JavaScript $30 Mac Hi-Fi HTML5, CSS3 styles, and JavaScript Preview version Mac OS X v10.6 or 10.7 and Windows 7 or Windows Vista. Verktyg som studenter testade 2014 Proto.io webbaserat, testa i mobil via app eller webbläsare, 15 dagars test, finns gratiskonto- ett projekt/gång & begränsat till 5 skärmar, avancerade tutorials Omnigraffle liknar Axure, cancas (typ PP) med lager som kan delas, exportera till flera olika format bl.a html. HTML5, CSS3 & javascript finns flera hjälp bibliotek för mobil webbutveckling, bl.a jqtouch, jquery Mobile 11

12 Axure Why Axure? Your requirements never looked so good Your project manager will love you You know in advance if customers will rave or rant Your distributed team feels a lot less distributed Your clients can t wait to buy your ideas Developers finally know what you want and love it Your clients really get it, and you get real feedback You look good doing it :) Axure Axure är ett verktyg för interaktiva wireframes som genererar HTML Innehåller färdiga widgets och interaktioner Funktioner för samarbete 12

13 Fördelar Axure Används av väldigt många professionellt Användbart för alla grader av trogenhet Fokus på just wireframing / prototyping! Finns mängder av bra tutorials Kan exportera till HTML och köra mobilt Finns mobilwidgets, t.ex. för touch gestures Kan skapa annotationer och relaterade diagram Axure - beskrivning Learn Axure AxureHow 13

14 Axure - tips Skumma igenom många tutorials Kolla på Learn på axure.com Använd guides (Create Guides) Döp alla paneler och widgets Versionshantering Länkar om Axure: Axure: Axure Training: Axure step-by-step tutorials: Axure forum: AxShare App for mobil: aign=33549f503f- AxShare_App_Launch_Newsletter5_7_2015&utm_mediu m= &utm_term=0_a e f503f