it-swarm.com.de

Wie definieren Sie Interaktionen in einem Modell?

Ich bin sowohl Programmierer als auch UX/UI-Designer. Wenn ich Dinge entwerfe, mache ich im Allgemeinen statische Bilder davon, wie die Benutzeroberfläche aussehen wird. Das Problem ist, dass die meisten Benutzeroberflächen nicht statisch sind. Sie ändern sich und ändern ihre Größe anhand von Benutzereingaben. Natürlich weiß ich genau, wie die Schnittstelle auf solche Eingaben reagieren soll, aber bei großen Projekten müssen der Client und andere Programmierer in der Lage sein, meine Modelle zu erstellen und die Interaktionen zu verstehen. Wie zeigen Sie in einem Modell, wie Ihr Design interagiert und auf den Benutzer reagiert?

17

Die Interaktion lässt sich am besten beschreiben, indem Sie sie mit einem interaktiven Prototyp modellieren.

Es gibt verschiedene Prototyping-Tools wie Axure oder das von uns entwickelte Handcraft . Unabhängig davon, welche Sie verwenden, ist der Punkt, dass Sie Ihrem Kunden, Kollegen usw. zeigen können, was passiert, wenn Sie mit Elementen im Modell interagieren. Mit einem Prototyp, der Interaktivität zeigt, erzielen Sie jedoch viel bessere Ergebnisse als mit einem anklickbaren Modell. Es ist möglich, grundlegende Zustandsänderungen mit Modellen anzuzeigen, und es gibt eine Phase im Entwurfsprozess, in der dies nützlich sein kann. Es gibt jedoch einige Dinge, die mit statischen Bildern schwer zu beschreiben sind, z. B. Animationen (in bestimmten Situationen von entscheidender Bedeutung) und Reaktionsfähigkeit ( ein Schlüsselelement der Interaktivität) und im Fall von nativen oder Web-Apps das "Gefühl", diese bestimmte Plattform zu nutzen.

7signals spricht viel darüber, wie sie Drahtgitter überspringen und direkt zu HTML wechseln. Ich schrieb ein Blog-Beitrag vor ein paar Monaten über einen Vortrag, in dem sie ihren Prozess beschrieben haben.

Wenn Sie jedoch statische Modelle anreichern möchten, ist Jakub Linowskis Interactive Sketching Notation ein guter Ausgangspunkt für eine UML-ähnliche Art der Beschreibung von Interaktionen:

interactive sketching notation

Siehe Vor-/Nachteile von PSD- und HTML-Modellen für eine ähnliche Diskussion:

Wenn Sie eine Website oder Anwendung erstellen, sind HTML-Modelle weit überlegen, da Sie das Modell in einem Format entwerfen, das dem Endprodukt so nahe wie möglich kommt. Auf diese Weise können Sie Erwartungen viel einfacher festlegen, Sie beschränken sich auf das, was im Endprodukt möglich ist, und es bietet eine viel größere Flexibilität.

25
Rahul

Wenn ein interaktives Modell keine Option ist, versuchen Sie es mit Text. Sie können Zahlen hinzufügen, die auf Teile des statischen Bilds oder Drahtgitters zeigen, und dann Interaktionsnotizen für jede Zahl angeben.

alt text

Oben: Ein Beispiel für eine Zeigernummer.

5
JeromeR

Wenn Sie nicht die Möglichkeit haben, etwas wie Axure (oder ein anderes interaktives Prototyping-Tool oder sogar HTML oder Flash) zu verwenden, ist es meiner Meinung nach am besten, die "Standard" - oder "Standard" -Ansicht mit einem Drahtmodell zu versehen und dann in zusätzlichen Kabeln das anzuzeigen alternative Zustände bestimmter Module.

Nach meiner Erfahrung ist es normalerweise unzureichend, sich auf textbasierte Anmerkungen zu verlassen, um die Änderungen zu übermitteln. Ich habe zu viele Projekte durchgeführt, bei denen perfekt kommentierte Drahtmodelle missverstanden oder falsch erstellt wurden, weil Clients/Entwickler/etc. verpasste wichtige Textdetails, die besser visuell erfasst worden wären.

2
Michael Histen

Ich weiß, dass dieser ein halbes Jahr alt ist, aber da es noch niemand erwähnt hat, werde ich:

Bill Buxton hat ein Buch mit dem Titel "Sketching User Experiences" geschrieben, das sich mit dem "Sketching" -Problem des Interaktionsdesigns befasst - wie können wir Interaktionskonzepte und -muster explorativ vermitteln, dh schnell und kostengünstig, aber nicht zu abstrakt?

2
Jan