Wie soll ich LO-Fi (nicht interaktive) UI-Prototypen erstellen?

Question

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

Im Moment versuche ich mithilfe von Post-It-Notizen mit gelben Notizen für Informationen und Rosa für Aktionen (Tasten oder Menüs) aufzubauen. Die Idee ist, dass Sie Informationen leicht verschieben, entfernen und hinzufügen können. Aber ich bin mir sicher, dass es da draußen effizientere Methoden gibt.

Was ist die empfohlene Möglichkeit für Entwickler, nicht interaktive UI-Prototypen effizient zu erstellen?

Und warum?

---

Ich probierte Stift, Papier und Post-It-Notizversionen und sie gingen wie ein Leadballon (wahrscheinlich meine Zeichenfähigkeiten). Am Ende habe ich benutzt Balsamiq, was bisher von den meisten Benutzern gemocht wird und sie bekommen es ist Prototyp. Leider haben einige Leute immer noch Probleme mit der Idee, dass zuerst eine Vorstellung davon bekommen sollte, was die Anwendung über einige LO-Fi-Prototypen tun sollte, und möchten wirklich "etwas auf dem Bildschirm sehen", bevor sie sich zu irgendetwas verpflichten.

Answer 1

Ich bevorzuge ein Whiteboard.

Es macht es einfach, sich zu ändern, wenn Sie Entscheidungen treffen, ohne das Ganze neu zu zeichnen. Es ist einfach, mit anderen (nahe gelegenen) Entwicklern zu teilen. Es ist einfach, mit Sticky-Notes oder anderen Farben zu kommentieren.

Answer 2

Balsamiq Mockups sind normalerweise der erste Anlaufport, fast so schnell wie ein Stift und Papier und wiederverwendbar.

Außerdem können Sie ein gewisses Maß an Interaktivität hinzufügen, wenn Sie möchten, und die Seiten zum Beispiel miteinander verbinden.

http://balsamiq.com/

Answer 3

Das Bleistiftprojekt ist ein Firefox -Addin, das schöne und einfache Modellieren tut.

Pencil bietet verschiedene integrierte Formensammlungen zum Zeichnen verschiedener Arten von Benutzeroberflächen, die von Desktop bis hin zu mobilen Plattformen reichen. Ab 2.0.2 wird der Bleistift mit Android- und iOS-UI-Schablonen verschifft. Dies erleichtert das Starten von Protyping -Apps mit einer einfachen Installation noch einfacher.

Beliebte Zeichenfunktionen werden auch in Bleistift implementiert, um die Zeichenvorgänge zu vereinfachen ...

Answer 4

Ich verwende eine Kombination aus MS -Farb- und Visual Studio. Ich benutze VS, um alle Bedürfnisse, die ich möchte, auf ein Formular zu ziehen/fallen zu lassen, und dann in MS -Farben ein Screenshot, um sie neu zu ordnen, bis mir die Art und Weise gefällt, wie es aussieht.

Auf diese Weise kann ich einfache, vertraute, kostenlose und immer zugängliche Werkzeuge (für mich) verwenden, um meine Benutzeroberfläche zu verspotten, und der Kunde kann die Benutzeroberfläche sehen, da sie wahrscheinlich nach Abschluss der Anwendung aussehen wird. Außerdem enthält oft VS den Beginn meines Projekts für mich.

Bearbeiten: Tobys Antwort führe mich zu Balsamiq, Und das ist jetzt mein primäres Werkzeug der Wahl für UI -Modelle, anderen Menschen zu präsentieren.

Ich ziehe immer noch gelegentlich MSPaint oder Stift/Papier heraus, aber das ist normalerweise nur dann, wenn ich grundlegendes UI -Design für meine eigene Referenz skizziere oder wenn ich dem Kunden zwei Optionen für einen fertigen Bildschirm präsentieren möchte (z. "Willst du die Schaltflächen hier oder hier?")

Answer 5

Es hört sich so an, als würden Sie gute Methoden anwenden, aber Sie stoßen auf Widerstand, da Menschen den Nutzen von schnellem Prototyping akzeptieren. Jeder liebt es zu codieren, aber wenn eine halbe Stunde in JSCROLLBARS kämpft und 12 Modelle generiert haben, können sie verstehen, dass die Stärke dieser Tools in der Lage ist Schnelle Iteration.

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

• Whiteboard -Prototyping ist nützlich, weil jeder teilnehmen kann und es hilft, Ideen zu ermessen, aber es ist nur ein Diskussionsinstrument. Sie möchten einen Schritt weiter etwas weiter, wenn Sie ein Design iterieren möchten, wenn auch nur, weil es schwierig wird, den alten Marker zu löschen. ;))

• Papierprototyping ist nützlich, weil die Menschen verstehen, dass es unbeständig und offen für Veränderungen ist und Sie schnell wiederholen können und Sie immer noch sehr gute Ergebnisse erzielen können. Führen Sie einen Usability -Test mit einigen Benutzern in einem Papierprototyp durch und Sie können sehr schnell zu einem geringen Kosten ein gutes Feedback zu einem Design erhalten. Die Leute sind wirklich engagiert, wenn sie die Schnittstelle auf Papier sehen und fühlen können.

• Balsamiq ist eine Abkürzung für schnell wiederverwendbare Papierprototypen. Ich drucke Screenshots aus und benutze sie als Papierprototypen. Ich benutze es auch während Besprechungen, um Ideen zu verspotten, wie wir sie haben-ähnlich wie bei Whiteboard-Prototypen. Ich habe auch Visio und Omnigrafle dafür verwendet.

• Prototypen schneiden und einfügen sind gut für das Ieserieren eines vorhandenen Designs-mach einen Screenshot, hacken Sie ihn in einem Image-Editor und mischen und überein mit neuen Steuerelementen (von Balsamiq oder anderswo). Wieder einmal ist Ihr Ziel eine schnelle Iteration des Prototyps, nicht etwas, das gut aussieht.

Ich mache nie Prototyping 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 eine wässrige Tomatensauce, einen bitteren Kaffee (danke Malcolm Gladwell) und das Homer -Auto. Sammeln Sie die Benutzereingabe in Ihr Design und verwenden Sie das Design mit dem Designteam.

Answer 6

Meine ersten Modell sind immer Bleistift und Papier oder Whiteboard, aber sobald die Grundlagen festgenagelt sind, bewege ich mich normalerweise zu HTML. Ich habe eine Reihe von Platzhalterbildern, die einfach "Header", "Banner", "Image", "Diagramm" und dergleichen sagen. Einige einfache CSS, um die Dinge etwas sanal auszulegen, und ich bin fertig. Ein kleines JS, das auf eine Kontrolle übergeht, kann Ihnen einen gewissen Anschein von Funktionen geben, und die Leute scheinen es einfach besser zu machen.

Das einzige Problem dabei ist, dass ich wahrscheinlich der schlimmste UI -Designer der Welt bin und manchmal die Menschen daran erinnern muss, dass ich nur Anforderungen erfasse, ohne ihnen zu zeigen, wie das abgeschlossene Ding aussehen wird. Ich setze oft den Hintergrund auf Pink oder so, also wenn jemand fragt: "Muss es rosa sein?" Ich kann mit "Dies ist nur ein Mock-up, das Realität wird anders aussehen" (oder "Sie müssen das mit dem Designer besprechen").

Answer 7

Ich benutze zuerst Stift und Papier. Nachdem ich die Benutzeroberfläche ein paar kurze Zeiten gezogen habe, versuche ich, sie 2 oder dreimal in PowerPoint zu schaffen. Mit 5 oder 6 Iterationen vor dem Einstieg in den tatsächlichen Editor hilft mir die nicht verarbeitbare Benutzeroberfläche (z. B. Inhalte y basierend auf dem Textfeld X, wenn der Benutzer X noch nicht gesehen hat). Ich sehe es als Chance, sofort die Dummen herauszuholen.

Answer 8

Stift & Papier / Whiteboard, und Sie können auch Visio oder ähnliches verwenden (Visio verfügt über UI -Vorlagen für gemeinsame Steuerelemente). Manchmal mache ich Aufnahmen von vorhandener (ähnlicher) Benutzeroberfläche, die wir mit einem Farbprogramm wie Paint.net die neue Benutzeroberfläche schneiden und einfügen.

Answer 9

Ich habe in Delphi mehrmals schnelles Prototyping gemacht. Es macht es einfach, sehr schnell ein Bildschirmlayout zusammenzuwerfen, viel schneller als in PowerPoint oder Visio. Das resultierende EXE kann E-Mails angeschlossen werden, ohne Abhängigkeiten zu verlangen. Da ich es für Prototypen -Web -Apps verwende, besteht keine Gefahr, dass Menschen den Prototyp mit einer halben fertigen Version verwechseln.

Ich habe versucht, dasselbe mit Sencha Ext -Designer zu tun, aber das Layoutsystem von Ext JS ist schwieriger zu bedienen, und es fühlte sich eher wie eine Belastung als eine Bequemlichkeit an, um Ideen schnell zu iterieren.

Answer 10

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

• Whiteboard (zum Prototyping interaktiv/diskutieren. Machen Sie danach ein Foto!)

• GUI-Designer im Rad-Stil (Visual Studio, Netbeans, Delphi)

  • Lassen Sie sich gut in diesem Sinne machen und es kann tatsächlich zu einer der schnellsten Möglichkeiten werden, Prototypen einer "Fenster, Widgets und Formulare" zu erstellen. Bonus: Die Prototypen können am Ende wirklich ziemlich professionell aussehen, je nachdem, wie schnell Sie es zusammenwerfen. Sie können manchmal sogar als Startpunkt für die Erstellung der realen Sache dienen, sobald ein Prototyp zugelassen ist.
    
    

• Papier und Stift/Bleistift (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 auf das RAW -HTML. Ich mache sowieso nicht viele davon.
    
    

• Vektorzeichnungswerkzeuge - Illustrator / Inkscape / Visio / PowerPoint / Impress

• Rastergrafikwerkzeuge - Photoshop / Gimp

• Ascii Art ;-)