Wie soll ich Lo-Fi-Prototypen (nicht interaktiv) erstellen?

Ich arbeite derzeit daran, einige grundlegende Prototypen zusammenzustellen, teils um Anforderungen zu erfassen, teils um die endgültige Benutzeroberfläche zu entwerfen.

Im Moment versuche ich, den Bildschirm mithilfe von Haftnotizen aufzubauen, mit gelben Notizen zur Information und rosa Notizen für Aktionen (Schaltflächen oder Menüs). Die Idee ist, dass Sie Informationen einfach verschieben, entfernen und hinzufügen können. Aber ich bin mir sicher, dass es effizientere Methoden gibt.

Was ist die empfohlene Methode für Entwickler, um nicht interaktive UI-Prototypen effizient zu erstellen?

Und warum?

Ich habe einige Stift-, Papier- und Haftnotizversionen ausprobiert und sie gingen wie ein Bleiballon unter (wahrscheinlich meine Zeichenfähigkeiten). Am Ende habe ich Balsamiq verwendet , was bisher von den meisten Benutzern gemocht wird und sie bekommen, dass es ein Prototyp ist. Leider haben einige Leute immer noch Probleme mit der Idee, dass man sich zuerst über einige Lo-Fi-Prototypen ein Bild davon machen sollte, was die Anwendung tun soll, und wirklich "etwas auf dem Bildschirm sehen" möchte, bevor man sich zu etwas verpflichtet.

Ich bevorzuge ein Whiteboard.

Es macht es einfach, Änderungen vorzunehmen, während Sie Entscheidungen treffen, ohne das Ganze neu zu zeichnen. Es ist einfach, mit anderen (in der Nähe befindlichen) Entwicklern zu teilen. Es ist einfach, mit Haftnotizen oder anderen Farben zu kommentieren.

Balsamiq-Modelle sind normalerweise die erste Anlaufstelle, fast so schnell wie mit Stift und Papier und wiederverwendbar.

Außerdem können Sie auf Wunsch ein gewisses Maß an Interaktivität hinzufügen, indem Sie beispielsweise Seiten miteinander verknüpfen.

http://balsamiq.com/

Das Pencil Project ist ein Firefox-Add-In, das schöne und einfache Modelle erstellt.

Pencil bietet verschiedene integrierte Formensammlungen zum Zeichnen verschiedener Arten von Benutzeroberflächen, von Desktop bis hin zu mobilen Plattformen. Ab 2.0.2 wird Pencil mit vorinstallierten Android- und iOS-UI-Schablonen ausgeliefert. Dies macht es noch einfacher, mit einer einfachen Installation Prototyping-Apps zu starten.

Beliebte Zeichenfunktionen sind auch in Pencil implementiert, um die Zeichenvorgänge zu vereinfachen ...

Ich benutze eine Kombination aus MS Paint und Visual Studio. Ich verwende VS, um alle gewünschten Steuerelemente per Drag & Drop auf ein Formular zu ziehen und sie dann in MS Paint zu scannen, um sie neu anzuordnen, bis mir das Aussehen gefällt.

Auf diese Weise kann ich einfache, vertraute, kostenlose und für mich immer zugängliche Tools verwenden, um meine Benutzeroberfläche zu verspotten, und der Client kann die Benutzeroberfläche so sehen, wie sie wahrscheinlich nach Abschluss der Anwendung aussehen wird. Außerdem enthält VS für mich häufig den Beginn meines Projekts.

Bearbeiten: Tobys Antwort führte mich zu Balsamiq , und das ist jetzt mein Hauptwerkzeug der Wahl, damit UI-Modelle anderen Leuten präsentiert werden können.

Gelegentlich ziehe ich immer noch MSPaint oder Stift / Papier heraus, aber das ist normalerweise nur dann der Fall, wenn ich das grundlegende UI-Design als Referenz skizziere oder wenn ich dem Client zwei Optionen für einen fertigen Bildschirm präsentieren möchte (z. B. "Do you" willst du die Buttons hier oder hier? " )

Es hört sich so an, als würden Sie gute Methoden anwenden, aber Sie stoßen auf Widerstand, wenn die Leute den Nutzen des Rapid Prototyping akzeptieren. Jeder liebt es zu programmieren, aber wenn eine halbe Stunde später immer noch mit JScrollBars gekämpft wird und Sie 12 Modelle erstellt haben, verstehen sie möglicherweise, dass die Stärke dieser Tools in der schnellen Iteration liegt .

Davon abgesehen haben die verschiedenen Low-Fi-Ansätze unterschiedliche Stärken:

• Whiteboard-Prototyping ist nützlich, da jeder teilnehmen kann und dabei hilft, Ideen zu begründen, aber es ist nur ein Diskussionswerkzeug. Sie möchten einen Schritt weiter, wenn Sie ein Design wiederholen möchten, schon allein deshalb, weil es schwierig wird, alte Markierungen zu löschen. ;)

• Das Prototyping von Papier ist nützlich, da die Leute verstehen, dass es unbeständig und offen für Änderungen ist. Sie können schnell iterieren und trotzdem sehr gute Ergebnisse erzielen. Wenn Sie mit einigen Benutzern einen Usability-Test an einem Papierprototyp durchführen, erhalten Sie sehr schnell und zu relativ geringen Kosten ein hervorragendes Feedback zu einem Design. Menschen engagieren sich sehr, wenn sie die Benutzeroberfläche auf Papier sehen und fühlen können.

• Balsamiq ist eine Abkürzung für die schnelle Herstellung wiederverwendbarer Papierprototypen. Ich drucke Screenshots aus und verwende sie als Papierprototypen. Ich benutze es auch während Besprechungen, um Ideen so zu verspotten, wie wir sie haben - ähnlich wie beim Whiteboard-Prototyping. Ich habe auch Visio und OmniGraffle dafür verwendet.

• Das Ausschneiden und Einfügen von Prototypen eignet sich gut zum Iterieren eines vorhandenen Designs. Machen Sie einen Screenshot, zerlegen Sie ihn in einem Bildeditor und mischen Sie ihn mit neuen Steuerelementen (von Balsamiq oder anderswo). Wieder einmal ist Ihr Ziel die schnelle Iteration des Prototyps, nicht etwas, das gut aussieht.

Ich mache nie Prototypen mit Benutzern. Ich mache es mit dem Designteam, basierend auf den Benutzerdaten, die wir haben. Benutzer sind keine Designer ; Wenn Sie sie als Designer behandeln, erhalten Sie wässrige Tomatensauce, bitteren Kaffee (danke Malcolm Gladwell) und das Homer-Auto. Sammeln Sie Benutzereingaben zu Ihrem Design und verfeinern Sie das Design mit dem Designteam.

Meine ersten Modelle sind immer Bleistift & Papier oder Whiteboard, aber sobald die Grundlagen festgenagelt sind, wechsle ich normalerweise zu HTML. Ich habe eine Reihe von Platzhalterbildern, die einfach "Kopfzeile", "Banner", "Bild", "Diagramm" und dergleichen sagen. Ein einfaches CSS, um die Dinge etwas vernünftig zu gestalten, und ich bin fertig. Ein wenig JS, das an einem Steuerelement befestigt ist, kann Ihnen einen Anschein von Funktionalität geben, und die Leute scheinen es einfach besser zu "verstehen".

Das einzige Problem dabei ist, dass ich wahrscheinlich der schlechteste lebende UI-Designer der Welt bin und manchmal die Leute daran erinnern muss, dass ich nur Anforderungen sammle und ihnen nicht zeige, wie das fertige Ding aussehen wird. Ich setze den Hintergrund oft auf Pink oder so, also immer wenn jemand fragt "Muss es Pink sein?" Ich kann mit "Dies ist nur ein Modell, die reale Sache wird anders aussehen" (oder "Sie müssen das mit dem Designer besprechen") kontern.

Ich benutze zuerst Stift und Papier, dann versuche ich, nachdem ich die Benutzeroberfläche ein paar Mal schnell gezeichnet habe, sie zwei- oder dreimal in Powerpoint zu erstellen. Wenn ich 5 oder 6 Iterationen habe, bevor ich in den eigentlichen Editor komme, kann ich nicht funktionierende Benutzeroberflächen reduzieren (z. B. das Generieren von Inhalt Y basierend auf Textfeld X, wenn der Benutzer X noch nicht einmal gesehen hat). Ich sehe es als Chance, die Dummköpfe sofort rauszuholen.

Stift & Papier / Whiteboard, und Sie können auch Visio oder ähnliches verwenden (Visio wird mit UI-Vorlagen für allgemeine Steuerelemente geliefert). Manchmal mache ich Aufnahmen von einer vorhandenen (ähnlichen) Benutzeroberfläche, die wir haben, und schneide die neue Benutzeroberfläche aus und füge sie mit einem Malprogramm wie Paint.NET ein.

Ich habe mehrere Male Rapid Prototyping in Delphi durchgeführt. Es macht es einfach, ein Bildschirmlayout sehr schnell zusammenzustellen, viel schneller als in Powerpoint oder Visio. Die resultierende Exe kann an E-Mails angehängt werden, ohne dass Abhängigkeiten erforderlich sind. Da ich damit Prototypen von Web-Apps verwende, besteht keine Gefahr, dass Leute den Prototyp mit einer halbfertigen Version verwechseln.

Ich habe versucht, dasselbe mit Sencha Ext Designer zu tun, aber das Layoutsystem von Ext JS ist schwieriger zu verwenden, und es schien eher eine Belastung als eine Bequemlichkeit zu sein, Ideen schnell zu wiederholen.

Ich benutze nicht immer den gleichen Ansatz. Einige der Techniken, die ich verwende, sind (in grober Reihenfolge der Häufigkeit):

• Whiteboard (für interaktives Prototyping / Diskussion. Machen Sie anschließend ein Foto!)

• GUI-Designer im RAD-Stil (Visual Studio, NetBeans, Delphi)

  • Machen Sie sich damit vertraut, und es kann tatsächlich eine der schnellsten Möglichkeiten sein, Prototypen einer Anwendung "Fenster, Widgets und Formulare" zu erstellen. Bonus: Die Prototypen sehen am Ende sehr professionell aus, je nachdem, wie schnell Sie sie zusammenwerfen. Sie können manchmal sogar als Ausgangspunkt für die Erstellung der realen Sache dienen, sobald ein Prototyp genehmigt wurde.
    
    

• Papier und Stift (normalerweise zum Brainstorming für mich selbst)

• Statische HTML / CSS / JS-Dateien auf der Festplatte

  • Ich würde mir vorstellen, dass eine WYSIWYG-Designanwendung hier nicht schaden würde, aber ich hacke normalerweise nur den rohen HTML-Code. Ich mache sowieso nicht viel davon.
    
    

• Werkzeuge zum Zeichnen von Vektoren - Illustrator / Inkscape / Visio / PowerPoint / Impress

• Raster-Grafikwerkzeuge - Photoshop / Gimp

• ASCII Kunst ;-)