Wireframing für alle
Upcoming SlideShare
Loading in...5
×
 

Wireframing für alle

on

  • 1,694 views

Präsentation anlässlich des Namics Camp 2010

Präsentation anlässlich des Namics Camp 2010
http://www.namics.com

Statistics

Views

Total Views
1,694
Views on SlideShare
1,688
Embed Views
6

Actions

Likes
7
Downloads
21
Comments
0

1 Embed 6

http://www.linkedin.com 6

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • animieren
  • Appetit machen ... ist auch ein Risiko... komme später drauf
  • Visual fidelity (sketched ↔ styled) Look and feel are the most noticeable dimension of a prototype’s fidelity and, if not properly selected, can sidetrack prototype reviews. Go hi-fi too soon and users will focus on visual design, which is not appropriate in early stages. From a visual standpoint, prototypes do not have to be pixel perfect but should be proportional; for example, if the left navigation area has to occupy one-fifth of a 1024-pixel screen, it does not need to be exactly 204 pixels wide, as long as it is proportionally depicted in the prototype. As prototyping progresses through the design cycle, increase visual fidelity as needed by introducing elements of style, color, branding and graphics. Functional fidelity (static ↔ interactive) Does the prototype reveal how the solution will work (static) or does it appear to be fully functional and respond to user input (interactive)? This dimension is less of a distraction to users, but adding interactivity in subsequent iterations increases functional fidelity and allows the prototype to be used for usability testing and training and communications. Content fidelity (lorem ipsum ↔ real content) Another dimension that often distracts users is the content that is displayed in the prototype. Squiggly lines and dummy text like lorem ipsum are useful to avoid in early stages of prototyping. But as the prototype is refined, evaluate the need to replace dummy text with real content to get a feel for how it affects the overall design.
  • Wie ausführlich muss/kann ein Wireframe sein bzw. wann wird er zum Prototyp? Beispiele (pos./neg) zeigen und Begründung liefern
  • Logo Typo Farben im logo
  • Typo Apps farben
  • Wie ausführlich muss/kann ein Wireframe sein bzw. wann wird er zum Prototyp?
  • Wie ausführlich muss/kann ein Wireframe sein bzw. wann wird er zum Prototyp?
  • Über 40 stk
  • Wie ausführlich muss/kann ein Wireframe sein bzw. wann wird er zum Prototyp?

Wireframing für alle Wireframing für alle Presentation Transcript

  • Wireframing für alle. Namics Camp. 2010. Namics. Björn Amherd 11. September 2010
  • Hier steht der Titel
    • Ive never done a wireframe
    • Zitat, einleitung
    • Was ich heute machen möchte…
    Camp 2010. Wireframing für alle. "I've never done a wireframe" - Jared Spool
  • Agenda
    • Warum setzen wir Wireframes ein?
    • Wie werden Wireframes erstellt?
    • Risiken
    • Chancen
    • Einige gute und schlechte Beispiele
    • Tools
    Camp 2010. Wireframing für alle.
  • Warum wir Wireframes einsetzen. Camp 2010. Wireframing für alle.
  • Wireframes sind kein Deliverable. Camp 2010. Wireframing für alle. 1 2 3 4 5 6 7 8 n
  • Fail Fast. Wireframes der "Weg zum Ziel". Camp 2010. Wireframing für alle.
  • Möglichst früh einsetzen Camp 2010. Wireframing für alle. Skizzen Wireframe Mockup Designkonzept Prototyp
  • Hauptgründe
    • Risiko minimieren
      • Für Namics
      • Für den Kunden
    • Fehler – wenn überhaupt – früh machen und korrigieren
    • Grundlagen schaffen
      • für Designer
      • Für Engineers
    • Appetit machen auf mehr
    Camp 2010. Wireframing für alle.
  • Wie werden Wireframes erstellt. 5 Grundprinzipien Camp 2010. Wireframing für alle. In Anlehung an http://boagworld.com/design/wireframing-rules
  • 1. Wireframes IMMER erstellen Camp 2010. Wireframing für alle. "Das ist nur ein kleiner Change, Da brauchen wir keine Wireframes" "Wir haben doch keine Zeit!" "Der Kunde bezahlt nichts für Wireframes"
  • 2. Wireframes niemals alleine erstellen Camp 2010. Wireframing für alle. Wireframe Design
  • 3. Nur keine Angst
    • JEDER kann Wireframes anfertigen
    • Ist nichts anderes als LAUT ZU DENKEN
    • Es geht darum IDEEN und ANSÄTZE zu diskutieren
    • Es ist ein ITERATIVER Prozess
    • Es gibt auch TOOLS zur Unterstützung
    Camp 2010. Wireframing für alle. "ich kann nicht zeichnen" "das sieht amateurhaft aus"
  • 4. Mit Papier und Skizzen anfangen
    • Zuerst skizzieren
    • Verschiedene Ideen ausprobieren
    • In der Gruppe Lösungen erarbeiten
    • Erst DANACH... Wireframes (in einem Tool) erstellen
    Camp 2010. Wireframing für alle.
  • 5. Wenn immer möglich – Testen!
    • Anhand der Szenarien, Use Cases, Briefings, Testcases
      • Im Projektteam oder
      • Mit externen Testpersonen
    • Wireframing ist ein iterativer Prozess
    Camp 2010. Wireframing für alle.
  • Exkurs – Skizzen Beispielcase Online Eventplaner Camp 2010. Wireframing für alle.
  • Ideen generieren und verfeinern Camp 2010. Wireframing für alle. http://www.ugleah.com/ux-team-of-one/
  • Konzept Frameworks Camp 2010. Wireframing für alle. http://www.ugleah.com/ux-team-of-one/
  • Spektrum Camp 2010. Wireframing für alle. http://www.ugleah.com/ux-team-of-one/
  • 2x2 Camp 2010. Wireframing für alle. http://www.ugleah.com/ux-team-of-one/
  • Grid Camp 2010. Wireframing für alle. http://www.ugleah.com/ux-team-of-one/
  • Risiko No 1 - Fidelity Camp 2010. Wireframing für alle.
  • Fidelity
    • Detailgenauigkeit
    • Nähe zum finalen Ergebnis
    • Die Fidelity entscheidet über den späteren Projektverlauf
      • Können Kunden mit Wireframes umgehen?
      • Wie final sind die Wireframes? Ist es Design?
    Camp 2010. Wireframing für alle. Low Fidelity Medium Fidelity High Fidelity
  • Fidelity Dimensionen Camp 2010. Wireframing für alle. http://www.smashingmagazine.com/2010/06/16/design-better-faster-with-rapid-prototyping/
  • Fidelity kostet was Camp 2010. Wireframing für alle. Fidelity Zeit/Geld Skizzen Wireframes Mockups Designkonzept Prototyp
  • Low Fidelity
    • Papier und Bleistift
    • Skizzen(haft)
    • Schemenhafte Darstellung
    • Andeutungen
    • Grobe Strukturierung
    • Auch tool-unterstützt
      • Sketchy Styles
    Camp 2010. Wireframing für alle.
  • Medium Fidelity
    • Tool-unterstützt
    • Zeitintensiver
    • Iterationen möglich durch Wiederverwendung
      • Templates
      • Styles
    • Prüfen der Benutzeranforderungen
    • Prüfen der Interaktionen
    Camp 2010. Wireframing für alle.
  • High Fidelity
    • Noch zeitintensiver
    • Einbezug Designelemente möglich
      • CI/CD, Bilder, Schriften etc.
    • Unter Umständen nicht mehr wirklich iterativ
    • Sehr nah am Endresultat
      • Wird von Kunden oft fürs Resultat gehalten!
    Camp 2010. Wireframing für alle.
  • Wireframes als Grundlage fürs Designkonzept Camp 2010. Wireframing für alle. Fidelity Wireframes Freiheitsgrad Designer
    • Kunde hat feste Erwartungen ans Designkonzept
    • Wireframes sind KEIN Design
    • Malen nach Zahlen (und Frust) verhindern :/
  • Wireframes als Grundlage fürs Designkonzept Camp 2010. Wireframing für alle. http://www.iasummit.org/proceedings/2008/how_hi_is_too_hifi
  • Dos & Donts Camp 2010. Wireframing für alle.
  • iPlagg Webshop Camp 2010. Wireframing für alle. http://www.wireframeshowcase.com/
  • BunchBite Camp 2010. Wireframing für alle. http://www.wireframeshowcase.com/
  • OpenCoffee Club Camp 2010. Wireframing für alle. http://www.wireframeshowcase.com/
  • Book a Deal Camp 2010. Wireframing für alle. http://www.wireframeshowcase.com/
  • Beispiel SVA Zürich Camp 2010. Wireframing für alle.
  • Sozialversicherungsanstalt des Kantons Zürich
    • Zuständig u.a. für AHV (Rente), IV (Invalitidätsversicherung), Mutterschaftsversicherung etc.
    • "Kunden": Privatpersonen und Unternehmen
    • Veraltete Website
    • fehlende Zielgruppenansprache
    • Verwirrende Navigation
    Camp 2010. Wireframing für alle.
  • Skizzen Camp 2010. Wireframing für alle.
  • Wireframes Camp 2010. Wireframing für alle.
  • Wireframes testen Camp 2010. Wireframing für alle.
  • Designkonzept Camp 2010. Wireframing für alle.
  • Tools Camp 2010. Wireframing für alle.
  • Tools fürs Wireframing
    • Visio
    • Powerpoint
    • Axure
    • Balsamiq
    • Photoshop
    • InDesign
    • OmniGraffle
    • ...
    Camp 2010. Wireframing für alle. https://spreadsheets.google.com/ccc?key=pjqO2N5Mo-ubVXgOv_oOcfw&inv=thomas.link@namics.com&pli=1#gid=0
  • Wahl des "richtigen" Tools
    • Wer arbeitet damit?
      • Mehrere, der Kunde?  Collaboration nötig?
    • Iteratives Arbeiten?
      • Viele Iterationen, Viel Korrekturen  Templates
    • Interaktivität
      • Nur kucken oder auch klicken?
      • User Flows aufzeigen?  keine statischen Wireframes
    • Budget
      • Gering, mittel, gross?
    Camp 2010. Wireframing für alle.
  • Bei Namics stark verbreitet - Axure
    • Axure
      • Interaktive Wireframes
      • Templates und Vorlagen zur Wiederverwendung
      • Exportierbar als "Website"
    • Achtung!
      • Gefahr von Gebastel möglich
      • Kann vom Kunden für Design gehalten werden
    Camp 2010. Wireframing für alle.
  • 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 für alle.
  • Fazit Camp 2010. Wireframing für alle.
  • 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 für spätere Projektschritte
    Camp 2010. Wireframing für alle.
  • Merci!
    • [email_address]
    Camp 2010. Wireframing für alle. Foto: http://www.flickr.com/photos/panic-embryo/1374684434/