1. Wireframing fr alle. Namics Camp. 2010. Namics. Bjrn Amherd 11. September 2010

2. Hier steht der Titel

• Ive never done a wireframe

• Zitat, einleitung

• Was ich heute machen mchte

Camp 2010. Wireframing fr alle. "I've never done a wireframe" - Jared Spool

3. Agenda

• Warum setzen wir Wireframes ein?

• Wie werden Wireframes erstellt?

• Risiken

• Chancen

• Einige gute und schlechte Beispiele

• Tools

Camp 2010. Wireframing fr alle.

4. Warum wir Wireframes einsetzen. Camp 2010. Wireframing fr alle.

5. Wireframes sind kein Deliverable. Camp 2010. Wireframing fr alle. 1 2 3 4 5 6 7 8 n

6. Fail Fast. Wireframes der "Weg zum Ziel". Camp 2010. Wireframing fr alle.

7. Mglichst frh einsetzen Camp 2010. Wireframing fr alle. Skizzen Wireframe Mockup Designkonzept Prototyp

8. Hauptgrnde

• Risiko minimieren

• • Fr Namics

• • Fr den Kunden

• Fehler wenn berhaupt frh machen und korrigieren

• Grundlagen schaffen

• • fr Designer

• • Fr Engineers

• Appetit machen auf mehr

Camp 2010. Wireframing fr alle.

9. Wie werden Wireframes erstellt. 5 Grundprinzipien Camp 2010. Wireframing fr alle. In Anlehung an http://boagworld.com/design/wireframing-rules

10. 1. Wireframes IMMER erstellen Camp 2010. Wireframing fr alle. "Das ist nur ein kleiner Change, Da brauchen wir keine Wireframes" "Wir haben doch keine Zeit!" "Der Kunde bezahlt nichts fr Wireframes"

11. 2. Wireframes niemals alleine erstellen Camp 2010. Wireframing fr alle. Wireframe Design

12. 3. Nur keine Angst

• JEDER kann Wireframes anfertigen

• Ist nichts anderes als LAUT ZU DENKEN

• Es geht darum IDEEN und ANSTZE zu diskutieren

• Es ist ein ITERATIVER Prozess

• Es gibt auch TOOLS zur Untersttzung

Camp 2010. Wireframing fr alle. "ich kann nicht zeichnen" "das sieht amateurhaft aus"

13. 4. Mit Papier und Skizzen anfangen

• Zuerst skizzieren

• Verschiedene Ideen ausprobieren

• In der Gruppe Lsungen erarbeiten

• Erst DANACH... Wireframes (in einem Tool) erstellen

Camp 2010. Wireframing fr alle.

14. 5. Wenn immer mglich Testen!

• Anhand der Szenarien, Use Cases, Briefings, Testcases

• • Im Projektteam oder

• • Mit externen Testpersonen

• Wireframing ist ein iterativer Prozess

Camp 2010. Wireframing fr alle.

15. Exkurs Skizzen Beispielcase Online Eventplaner Camp 2010. Wireframing fr alle.

16. Ideen generieren und verfeinern Camp 2010. Wireframing fr alle. http://www.ugleah.com/ux-team-of-one/

17. Konzept Frameworks Camp 2010. Wireframing fr alle. http://www.ugleah.com/ux-team-of-one/

18. Spektrum Camp 2010. Wireframing fr alle. http://www.ugleah.com/ux-team-of-one/

19. 2x2 Camp 2010. Wireframing fr alle. http://www.ugleah.com/ux-team-of-one/

20. Grid Camp 2010. Wireframing fr alle. http://www.ugleah.com/ux-team-of-one/

21. Risiko No 1 - Fidelity Camp 2010. Wireframing fr alle.

22. Fidelity

• Detailgenauigkeit

• Nhe zum finalen Ergebnis

• Die Fidelity entscheidet ber den spteren Projektverlauf

• • Knnen Kunden mit Wireframes umgehen?

• • Wie final sind die Wireframes? Ist es Design?

Camp 2010. Wireframing fr alle. Low Fidelity Medium Fidelity High Fidelity

23. Fidelity Dimensionen Camp 2010. Wireframing fr alle. http://www.smashingmagazine.com/2010/06/16/design-better-faster-with-rapid-prototyping/

24. Fidelity kostet was Camp 2010. Wireframing fr alle. Fidelity Zeit/Geld Skizzen Wireframes Mockups Designkonzept Prototyp

25. Low Fidelity

• Papier und Bleistift

• Skizzen(haft)

• Schemenhafte Darstellung

• Andeutungen

• Grobe Strukturierung

• Auch tool-untersttzt

• • Sketchy Styles

Camp 2010. Wireframing fr alle.

26. Medium Fidelity

• Tool-untersttzt

• Zeitintensiver

• Iterationen mglich durch Wiederverwendung

• • Templates

• • Styles

• Prfen der Benutzeranforderungen

• Prfen der Interaktionen

Camp 2010. Wireframing fr alle.

27. High Fidelity

• Noch zeitintensiver

• Einbezug Designelemente mglich

• • CI/CD, Bilder, Schriften etc.

• Unter Umstnden nicht mehr wirklich iterativ

• Sehr nah am Endresultat

• • Wird von Kunden oft frs Resultat gehalten!

Camp 2010. Wireframing fr alle.

28. Wireframes als Grundlage frs Designkonzept Camp 2010. Wireframing fr alle. Fidelity Wireframes Freiheitsgrad Designer

• Kunde hat feste Erwartungen ans Designkonzept

• Wireframes sind KEIN Design

• Malen nach Zahlen (und Frust) verhindern :/

29. Wireframes als Grundlage frs Designkonzept Camp 2010. Wireframing fr alle. http://www.iasummit.org/proceedings/2008/how_hi_is_too_hifi

30. Dos & Donts Camp 2010. Wireframing fr alle.

31. iPlagg Webshop Camp 2010. Wireframing fr alle. http://www.wireframeshowcase.com/

32. BunchBite Camp 2010. Wireframing fr alle. http://www.wireframeshowcase.com/

33. OpenCoffee Club Camp 2010. Wireframing fr alle. http://www.wireframeshowcase.com/

34. Book a Deal Camp 2010. Wireframing fr alle. http://www.wireframeshowcase.com/

35. Beispiel SVA Zrich Camp 2010. Wireframing fr alle.

36. Sozialversicherungsanstalt des Kantons Zrich

• Zustndig u.a. fr AHV (Rente), IV (Invalitidtsversicherung), Mutterschaftsversicherung etc.

• "Kunden": Privatpersonen und Unternehmen

• Veraltete Website

• fehlende Zielgruppenansprache

• Verwirrende Navigation

Camp 2010. Wireframing fr alle.

37. Skizzen Camp 2010. Wireframing fr alle.

38. Wireframes Camp 2010. Wireframing fr alle.

39. Wireframes testen Camp 2010. Wireframing fr alle.

40. Designkonzept Camp 2010. Wireframing fr alle.

41. Tools Camp 2010. Wireframing fr alle.

42. Tools frs Wireframing

• Visio

• Powerpoint

• Axure

• Balsamiq

• Photoshop

• InDesign

• OmniGraffle

• ...

Camp 2010. Wireframing fr alle. https://spreadsheets.google.com/ccc?key=pjqO2N5Mo-ubVXgOv_oOcfw&inv=thomas.link@namics.com&pli=1#gid=0

43. Wahl des "richtigen" Tools

• Wer arbeitet damit?

• • Mehrere, der Kunde? Collaboration ntig?

• Iteratives Arbeiten?

• • Viele Iterationen, Viel Korrekturen Templates

• Interaktivitt

• • Nur kucken oder auch klicken?

• • User Flows aufzeigen? keine statischen Wireframes

• Budget

• • Gering, mittel, gross?

Camp 2010. Wireframing fr alle.

44. Bei Namics stark verbreitet - Axure

• Axure

• • Interaktive Wireframes

• • Templates und Vorlagen zur Wiederverwendung

• • Exportierbar als "Website"

• Achtung!

• • Gefahr von Gebastel mglich

• • Kann vom Kunden fr Design gehalten werden

Camp 2010. Wireframing fr alle.

45. Bei Namics stark verbreitet - Balsamiq

• Balsamiq

• • Mockups im Skizzen-Look

• • Vorlagen zum Zusammenklicken

• • Sehr schnell

• • Genauer als eine Handskizze

• Achtung!

• • Nicht kollaborativ

• • Nicht interaktiv

Camp 2010. Wireframing fr alle.

46. Fazit Camp 2010. Wireframing fr alle.

47. Fazit

• Wireframes sind nicht Design

• • Keine Farben

• • Keine Typo

• • Keine Kleinarbeiten, kein "Gebastel"

• • Keine Bevormundung der Designer

• • Kein Alleingang des Konzepters

• Wireframes helfen IMMER

• • Reduktion des Risikos, Fail fast

• • Solide Grundlage fr sptere Projektschritte

Camp 2010. Wireframing fr alle.

48. Merci!

• [email_address]

Camp 2010. Wireframing fr alle. Foto: http://www.flickr.com/photos/panic-embryo/1374684434/