Wann Wireframes, wann Hi-fi-Prototypen?

Eine Hand schreibt eine Liste in ein karriertes Buch.

Wer eine gute Anwendung umsetzen will, der kommt um Prototypen nicht herum. Doch wie hoch ist der Aufwand, den man betreiben sollte? Reicht es, ein paar Wireframes zu erstellen und dann die erste programmierte Version der Website oder der App zu testen?

Oder sind einfache Wireframes heute überholt, wo man doch so schnell interaktive Prototypen zusammenklicken kann, die aussehen wie das fertige Produkt?

Die Diskussion ist alt und wird meist unter dem Namen

Lo-fi vs. Hi-fi

geführt. Also low fidelity gegen high fidelity.

Die Definition ist nicht ganz eindeutig. Manche verstehen unter Lo-fi-Prototypen nur Wireframes, einfache schwarz-weiße Seitenskizzen mit Linien. Hi-fi sind für sie dann bunte Interface-Entwürfe, die schon aussehen wie Screenshots vom echten Produkt.

Für andere darf sich etwas erst dann Hi-fi-Prototyp nennen, wenn es sich auf dem PC oder mobilen Gerät durchklicken bzw. -touchen lässt.

Und es wird immer wieder gestritten, ob lo-fi oder hi-fi besser ist.

Ein bisschen kommt mir das vor wie die Frage, ob man lieber ein iPhone oder ein Android-Handy nutzt. Oder ob man mit Mac oder mit Windows arbeitet. Letztlich entscheidet der persönliche Geschmack.
Aber: Bei den Prototypen gibt es kein Entweder-oder. Nicht einmal in einem Projekt, denn es kann durchaus sinnvoll sein, sowohl mit Low- wie mit High-Fidelity-Prototypen zu arbeiten.

Mein persönlicher Arbeitsablauf

Am liebsten arbeite ich persönlich bei den allerersten Konzepten mit Stift und Papier. In letzter Zeit habe ich mir sogar eigens Stifte zum Scribblen gekauft, nachdem ich mehrere Zeichenstifte fürs Tablet ausprobiert habe und nie richtig zufrieden war.

Foto Marker zum Scribblen

Mit Markern werden Scribbles professioneller. Die Farbe dient aber nicht nur zum Verschönern, sondern auch um z.B. verschiedene Gewichtungen zu verdeutlichen oder um Inhaltstypen zu unterscheiden.

Scribbles heißen die allereinfachsten handgezeichneten Skizzen für Nutzeroberflächen, manchmal spricht man dabei auch von Sketches. Ein Wireframe dagegen ist schon viel weiter ausgearbeitet und fast immer am Computer gezeichnet.

Für die ersten Ideen eignen sich Stift und Papier aus meiner Sicht am besten, weil man hier am schnellsten arbeitet.
Und wer dabei mit am Tisch sitzt, weiß, dass das nur ein erster Ansatzpunkt ist. Gerade wenn man nicht so perfekt zeichnet, muss man niemandem erklären, dass die gescribbleten Ideen eben nur das sind – erste Ideen auf dem Weg zum Konzept.

Das funktioniert auch hervorragend, wenn alle Teilnehmer einer Besprechung Stift und Papier bekommen, um ihre Ideen festzuhalten. Oder auf Flipchart/Whiteboard.

Die Schritte im Projekt sind bei mir meist diese:

1) Scribblen auf Stift und Papier – mit dem, was gerade verfügbar ist, zur Not auch mit Kuli auf der sprichwörtlichen Serviette
2) Scribblen ins Reine – die Ergebnisse kann man auch weitergeben an die, die nicht in der Besprechung waren
3) Wireframes mit OmniGraffle oder Axure – jetzt spielen Pixelmaße, ungefähre Schriftgrößen etc. eine Rolle
4) Designkonzept – das macht dann meist ein Kollege mit Photoshop, Sketch o.Ä.

Und was testen?

Im Idealfall kommen dann im Projekt noch folgende Schritte hinzu:

2b) Papierprototyp
3b) Klickdummy
4b) High-Fidelity-Prototyp

Manchmal machen wir den Papierprototyp-Test auch mit ausgedruckten Wireframes von Axure – wie man sieht, gibt es nicht die festgelegte und optimale Arbeitsweise.

Im Folgenden stelle ich die Vor- und Nachteile von Hi- und Lo-fi-Prototypen vor und erkläre, wann man am besten mit welchen fährt.

Lo-fi-Prototypen

Vorteile:

  • schnell zu erstellen & zu ändern
  • so können mehr stark unterschiedliche Konzepte getestet werden
  • erlauben frühe Tests mit Nutzern und mehr Iterationen

Für mich am wichtigsten ist, dass ich mit Lo-fi-Prototypen bei Nutzertests Feedback bekomme, das sich auf die Interaktion und die Architektur bezieht, nicht auf die Gestaltung.

Nachteil:

  • können unprofessionell auf unerfahrene Beteiligte wirken

Wann nutze ich Lo-fi-Prototypen?

Wenn es schnell gehen muss.

Wenn ich wissen will, wie Funktionen ankommen bzw. genutzt werden. Wenn ich das Navigationskonzept oder die Informationsarchitektur prüfen will.

Solche Prototypen signalisieren deutlich: Wir sind vorläufig und die endgültige Anwendung wird anders aussehen. Konzentriere dich auf die Funktionen und die vorhandenen Texte.

Wenn es um die Ideenfindung geht, sind Lo-fi-Prototypen immer die richtige Wahl. Oder wenn man schnell ausprobieren will, wie eine Anordnung auf den verschiedenen Bildschirmgrößen aussehen könnte.

Gerade für agile Projekte sind Lo-fi-Prototypen hervorragend geeignet.

Sie fördern Zusammenarbeit, weil sie klar unfertig sind und jeder sieht, dass man hier leicht noch etwas ändern kann.

Auch kann man Papierprototypen, Skizzen etc. problemlos überall hin mitnehmen – und es spielt keine Rolle, ob der Kunde, Chef oder die Testperson ein Android-, iOS, Kindle-, Windows- oder sonstiges Tablet hat.

Womit erstelle ich Lo-fi-Prototypen?

Am einfachsten erstellt man solche Lo-fi-Prototypen mit Stift und Papier.

Wenn man Papierprototyp-Tests machen will, kann man seine Werkzeuge durch Post-Its, Schere, Klebstoff und ein paar Marker/bunte Stifte ergänzen.

Foto Papierprotoyp

Papierprotoypen basteln kann viel Spaß machen. Auch das Testen damit.

Screenshot Marvel iPhone

In Marvel lassen sich für alle Hotspots auch Gesten definieren. So kann man auch Wischen, Zoomen oder Pinchen in den Tests verwenden.

Eine charmante Kombination sind gezeichnete Wireframes/Scribbles mit Programmen wie Marvel. Mit dieser App fotografiert man seine Scribbles und kann dann in der App Hotspots, also klick-/tippbare Zonen definieren. Sehr schnell kann man so eine Testversion zusammenstellen, in der man die gesamte Interaktion der geplanten Website oder App abbilden kann. Natürlich nur, sofern diese nicht allzu kompliziert wird und z.B. keine Texteingaben verarbeitet werden sollen.
(für Android & iOS; Basisversion mit unbegrenzt vielen Projekten kostenlos, ohne Passwort-Schutz – doch kann eigentlich nur darauf zugreifen, wer die URL kennt)

Eine Alternative ist POP – Prototyping on Paper. Diese App kann aus meiner Sicht aber vor allem hinsichtlich der Bedienung nicht mit Marvel mithalten.
(für Android, iOS und Windows Phone; Basisversion mit 2 Projekten kostenlos)

Hi-fi-Prototypen

Schnell eine realistisch aussehende Nutzeroberfläche zusammenzustellen ist heute in der Tat nicht mehr so aufwendig, wie es noch vor ein paar Jahren war.

Besonders für mobile Apps gibt es eine schwer überschaubare Zahl von Apps/Programmen, die uns dabei helfen wollen.

Mit Bibliotheken für OmniGraffle, Illustrator oder Powerpoint dauert es nur wenig länger, ein perfekt aussehendes Design zu erstellen als einen klassischen schwarz-weißen Wireframe. Allerdings gilt das nur, wenn ich sehr gute Vorlagen speziell für meinen Anwendungszweck und viel Erfahrung habe. Fehlt mir eins von beiden, dauert es viel, viel länger. Denn ich muss mir viel mehr Gedanken darüber machen, wie groß genau der Button sein soll. Ob er abgerundete oder eckige Kanten haben soll. Wie groß genau die Schrift auf ihm sein soll. Und noch vieles mehr.

Vorteile von Hi-fi-Prototypen:

  • sehen nach fertiger Anwendung aus
  • können beeindrucken
  • haben das Potenzial, realistischere Testergebnisse zu liefern

Nachteile:

  • aufwendig herzustellen
  • aufwendig zu ändern
  • legen viel fest und nehmen so die Möglichkeit, noch grundlegende Änderungen vorzunehmen

Wann nutze ich Hi-fi-Prototypen?

Hi-fi-Prototypen sind sehr sinnvoll, wenn ich auf einer schon gründlich getesteten UI-Bibliothek aufbaue. (Z.B. wenn ich ein zusätzliches Formular bei einer bestehenden Anwendung ergänze. Oder wenn ich eine neue Landing-Page für eine bestehende Website konzipiere.)

Ich bekomme dann viel Feedback zur Gestaltung (Farben, Schriften, Anordnung; aber auch zu Texten und Beschriftungen).

Auch sehr sinnvoll sind Hi-fi-Prototypen, wenn ich etwas präsentieren muss vor Personen, die nicht oder nur sporadisch Teil des Entwicklungsteams sind. Das heißt vor allem, wenn ich vor Vorständen, Lenkungsausschüssen oder anderen Beteiligten präsentieren muss.

Ich habe einmal den Fehler gemacht, vor einem Kreis von Vorständen Wireframes einer Website zu zeigen und meinen Ansatz des iterativen Testens zu erklären. Es war ein Desaster. Ich habe den Auftrag damals nur nicht verloren, weil die Projektleiterin von meiner Arbeit überzeugt war. Zwei Wochen später musste ich nochmal präsentieren – bunte Mockups, in Photoshop erstellt, und die Vorstände waren begeistert.

Dass so etwas passiert, liegt vor allem daran, dass solche Beteiligten die zugrundeliegenden Konzepte nicht kennen (Grobkonzept, Personas, Customer Journey Map…). Und sie haben normalerweise keine Erfahrung im Umgang mit Scribbles und Wireframes.

Solchen Personen will ich ein Gefühl davon geben, dass da gerade eine tolle neue Anwendung im Entstehen ist. Und Teil davon ist ein tolles Design. Das wollen sie sehen.

Wer eine Vision verkaufen will, der braucht Hi-fi-Prototypen. Und das kann auch im Team helfen. Wenn man sieht, wie schön das Endprodukt werden wird, steigt oft die Motivation.

Ein Nachteil: Sind die Hi-fi-Prototypen mal raus, ist es schwer, wieder zu einfachen Wireframes zurückzugehen. Denn wenn einmal schöne Bilder der neuen Oberfläche im Umlauf sind, fühlt es sich wie ein Rückschritt an, wenn man auf einmal wieder auf dürre Skizzen blicken muss.
Änderungen bedeuten also von diesem Zeitpunkt an deutlich mehr Arbeit. Auch wenn die dank der neuen Tools deutlich schneller von der Hand geht als früher.

Womit erstelle ich Hi-fi-Prototypen?

Die Nutzeroberfläche für Hi-fi-Prototypen erstellen im Bereich UX fast alle mit einem Grafikprogramm. Also in OminGraffle, Indesign, Photoshop oder zunehmend auch mit Sketch.

Die Elemente werden dann in ein Prototyping-Tool übertragen, um die eigentliche Anwendung zu bauen.

Axure

Der Klassiker unter den Prototyping-Tools. Wobei manche sagen werden, Axure ist ein Wireframing-Tool. Letztlich kann es beides sehr gut.

Gerade komplexere Interaktionen lassen sich damit ganz gut umsetzen (ohne Programmieren, aber ganz unaufwendig ist es nicht).

Nachteil ist, dass Axure nur HTML exportiert – Prototypen für Apps muss man also im Browser der Mobilgeräte testen, was in den meisten Fällen aber in Ordnung ist. Nur wenn es um kompliziertere Gesten oder spezielle Interaktionen geht, stößt man dabei an seine Grenzen.

Marvel

Screenshot Marvel

Die Web-Oberfläche von Marvel ist einfach und aufgeräumt.

Marvel habe ich eben schon erwähnt als Werkzeug zum Erstellen von Lo-fi-Prototypen. Genauso kann man damit aber auch Hi-fi-Prototypen erstellen. Letztlich nimmt das Programm beliebige Bilder entgegen, das können also auch pixelgenaue Entwürfe der fertigen Benutzeroberfläche sein.

Unter iOS oder Android erstellt (und testet) man den Prototypen – oder man nutzt das Web-Interface im Browser.

(in der Basisversion kostenlos, ohne PW-Schutz, keine Offline-Versionen; 80$/Monat, wenn man iOS-Prototyp herunterladen will)

InVision

Screenshot LiveSharing Invision

Invision beim Live-Sharing. Hier kann man nicht nur Diskutieren, sondern auch Malen.

Ein direkter Konkurrent zu Marvel ist InVision. Es bietet ähnliche Funktionen, nur sind die zur Zusammenarbeit vielleicht noch etwas ausgereifter.

So kann man z.B. direkt auf der Website über die Screens diskutieren. Inklusive Voice-Chat und Anmerkungs-Funktionen.
Außerdem verwaltet InVision auf Wunsch weitere Assets wie Konzepte, Dokumentation etc.

Dafür hat mir persönlich die iPhone-App nicht ganz so gut gefallen wie die von Marvel.

(für Android & iOS; Basisversion mit 1 Projekt kostenlos)

Eigene Programmierung

Am flexibelsten ist man natürlich, wenn man den Prototypen selbst programmiert. Das hat den weiteren Vorteil, dass man Code für das endgültige Produkt wiederverwenden kann.

Dafür ist die Programmierung aber sicherlich die aufwendigste Möglichkeit, Prototypen zu erstellen. Gleich, ob es um eine Website geht oder um eine App.

Abschlusstipp für schönere Wireframes

Abbildung Wireframe-UI-Kit

Das Wireframe-UI-Kit macht die Gestaltung schöner Wireframes leicht.

Wenn ich in einem Projekt gern mit Wireframes arbeiten möchte, aber trotzdem ein bisschen etwas Schöneres will als die Standard-Axure-Elemente, dann nutze ich eine Bibliothek von Christopher („Crowe“) Rowe.

Diese gibt es kostenlos zum Download in einer Version für OmniGraffle und für Illustrator.

Portraitfoto: Jens Jacobsen

Jens Jacobsen

Inhaber

benutzerfreun.de

Bisher veröffentlichte Beiträge: 27

3 Kommentare

  • Nachtrag: Mein Kollege Jan Pohlmann hat kürzlich eine hervorragende Übersicht von UX-Design-Tools zusammengestellt. Wofür man sich auch entscheidet, hier ist sicher das richtige Programm dabei: 20 UX-Design-Tools: Wireframes und Prototypen mit UXPin und Co.

  • W.Kostak

    Unglaublich gut erklärt und perfekt für mein E-Commerce Studium. Das Beispiel mit dem nicht überzeugtem Vorstand bleibt schön im Gedächnis hängen und man vergisst es nicht so schnell.
    Zufälligerweise hatte ich schon das Buch „Website-Konzeption“ in meinen Händen und habe einige Seiten gelesen, hab es dann wieder abgegeben in der Bücherei, da ich nicht dazu gekommen bin. Jetzt weiß ich, was ich morgen als erstes machen werde.

    Vielen Dank für die Bemühungen!

    W.Kostak

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert