Anspruchsvolle Prototypen – Warum Axure verwenden?

„Design ist nicht nur, wie es aussieht und sich anfühlt. Design ist, wie es funktioniert.“ - Steve Jobs

Prototypen haben sich als unschätzbar wertvoll erwiesen, um bessere Designentscheidungen zu treffen. Als Artefakte sind Prototypen eines der wichtigsten Ergebnisse im UX-Design und -Prototyping und stehen als Aktivität im Mittelpunkt des benutzerzentrierten Designprozesses. Ein Prototyp ist eine Verschmelzung aller bisherigen UX-Designarbeiten, die zu einem einzigen, visuellen, funktionierenden Produkt zusammengeführt werden, das zur Validierung von Hypothesen und Testdesigns verwendet wird.

Klingt einfach genug, aber in einer Welt, die mit einer Fülle von Designwerkzeugen gesättigt ist, ist die Auswahl des richtigen Prototyping-Werkzeugs keine leichte Aufgabe, die sorgfältig abgewogen werden muss. Designer müssen die Kosten, Funktionen, die Integration mit anderen Design-Tools, die Lernkurve, Funktionen für die Zusammenarbeit und die Wiedergabeplattform für Überprüfungen und Benutzertests berücksichtigen.

Um die Sache noch komplizierter zu machen, sind in letzter Zeit viele Newcomer auf die Bühne geplatzt. Es gibt reine Online-Tools, zum Beispiel Figma, InVision, UXPin, Framer, Marvel, Principle, Origami, und einige sind traditionelle Desktop-Software wie Sketch und Adobe XD mit integriertem Prototyping als Erweiterung ihrer Funktionalität. Sie alle haben ihre Vor- und Nachteile, Funktionen und Integrationen.

Aber neu ist nicht immer besser. Es gibt noch einige alte Haudegen auf dem Schlachtfeld: Axure ist eines davon. Wenn Designer funktionsreiche, detaillierte Prototypen liefern möchten, ist Axure einen weiteren Blick wert. Axure gibt es schon seit einiger Zeit, Jahre bevor die oben erwähnten neu entwickelten Tools geboren wurden, und viele Designer betrachten es als den Großvater der Wireframing- und Prototyping-Tools, die mit umfassenden Fähigkeiten ausgestattet sind.

Warum Axure verwenden?

Heutzutage verwenden Designer meistens Hotspot-basierte Prototyping-Tools, mit denen sie Bildschirme verknüpfen und vielleicht ein paar Bildschirmübergänge hinzufügen. Das Problem ist, dass diese Methode keine kleinen Interaktionen beinhaltet, die die allgemeine Benutzererfahrung während des Testens abrunden. Im Gegensatz dazu kann Axure problemlos mit den subtilen Details und Mikrointeraktionen umgehen, die einen Prototyp zum Leben erwecken.

Um genauer zu untersuchen, wie Menschen mit einem bestimmten Design interagieren würden, können Designer Prototypen mit Bedingungslogik, verschiedenen Benutzereingaben und dynamischen Animationen erstellen, die den Prototyp realistischer aussehen lassen. Es ist eine hervorragende Möglichkeit, wertvolle Erkenntnisse darüber zu gewinnen, was funktioniert und was nicht.

Das Umherspringen zu vieler nicht integrierter Designanwendungen stellt ebenfalls ein Ineffizienzproblem dar. Der typische Design-Workflow umfasst einen Designer, der Benutzeroberflächen in Sketch erstellt und Prototypen in einem anderen Tool wie InVision oder Marvel erstellt. Danach wird das Design mit einem weiteren Tool wie Zeplin an Entwickler übergeben.

Axure ist eine vollständig integrierte Anwendung, die die Verwendung verschiedener Designtools überflüssig macht. Beispielsweise können Designer nach dem Erstellen von Benutzerabläufen, Customer Journey Maps, Personas, Storyboards, Sitemaps, Informationsarchitekturen und Wireframes problemlos mit komplexen Prototypen fortfahren – direkt in Axure. Wenn Designer Projekte an Entwickler übergeben, bekommen sie ein besseres Gefühl dafür, wie etwas implementiert werden sollte, und können effektiver mit Produktmanagern zusammenarbeiten, um den Umfang abzuschätzen und die technische Machbarkeit zu bewerten.

Das größte Hindernis für die Bereitstellung gut gestalteter Produkte und Dienstleistungen ist das mangelnde Verständnis für unsere Benutzer. Jared Spool, UIE (Entwicklung der Benutzeroberfläche)

Ähnlich wie andere Design-Tools kann Axure schnell erlernt und schnell eingesetzt werden. Eingebaute Widgets, mit denen dynamische Interaktionen aufgebaut werden können, die auch Nicht-Programmierern Sinn machen, können sofort für beeindruckende Interaktionen verwendet werden. Designer, die tiefer gehen und die Zeit investieren möchten, um die Anwendung zu erlernen, können komplexe, realistische Websites und Apps mit komplizierten Interaktionen erstellen.

Reale Axure-Prototyping-Beispiele

Designer haben immer wenig Zeit und müssen in Reviews zeigen, wie bestimmte Benutzerabläufe funktionieren würden, und Produktdesigns frühzeitig mit Benutzern testen. Die grundlegenden Fähigkeiten von Axure können in diesen Szenarien glänzen, da Designer Bilder aus anderen Design-Tools schnell in interaktive Prototypen umwandeln können.

Im B2B-Produktbeispiel unten wurde eine Reihe von Bildschirmen als PNGs aus OmniGraffle exportiert. Die Bilder wurden in Axure zugeschnitten, maskiert und auf Ebenen gelegt. Als nächstes wurden Hotspots und interaktive Komponenten aus der Axure-Widget-Bibliothek hinzugefügt, wie z. B. Dropdown-Menüs und Formularfelder, um einen reichhaltigen, funktionalen Prototyp zu erstellen. Die Features und Funktionalitäten des Produkts wurden dann mithilfe von moderierten Remote-Benutzertests getestet, was zu schnellen Design-Iterationen auf der Grundlage von Benutzerfeedback führte.

In einem anderen Beispiel konnten Design- und Engineering-Teams den besten Weg ausarbeiten, um zwei besonders knifflige Widgets für ein komplexes B2B-Produkt zu entwerfen. Ziel war es, erweiterte Filter und eine benutzerdefinierte Spaltenauswahl für eine datenintensive Tabelle zu entwerfen, die die Benutzerfreundlichkeit verbessern würde und auch technisch machbar wäre.

In diesem Szenario wurden Bilder verschiedener Zustände aus Sketch exportiert und schnelle Interaktionen wurden in Axure hinzugefügt und animiert. UI-Komponenten wie Schaltflächen und Kontrollkästchen wurden hinzugefügt, um Interaktionen und ihre Auswirkungen zu demonstrieren. Die Teams durchliefen mehrere Iterationen, die überprüft und getestet wurden. Mit anderen Prototyping-Tools hätte dieses Unterfangen viel länger gedauert.

Merkmale und Vorteile von Axure

Ich habe kürzlich bei einem Unternehmen gearbeitet, das nur einfache Bildschirm-zu-Bildschirm-Prototypen verwendet hat, die mit InVision erstellt wurden, und noch nie viele Benutzertests durchgeführt hatte. Um eine bevorstehende wichtige Produktfunktion zu testen, wurde ich beauftragt, einen detaillierten Produktprototyp zu erstellen. Diese neue Funktion war sehr wichtig, und die Beteiligten wollten es richtig machen.

Ich brauchte knapp zwei Tage, um in Axure einen detaillierten Prototyp mit verschiedenen Zuständen und vielen Mikrointeraktionen zu erstellen, die zeigten, wie sich das Produkt in verschiedenen Szenarien verhalten würde. Als unerwarteter Vorteil tauchten viele Grenzfälle auf, die das Designteam ansprechen konnte.

Beim Testen konnten wir sehen, wo die Benutzer mit dem Design zu kämpfen hatten und warum , was mit einem weniger detaillierten Prototyp mit statischen Bildschirmen nicht möglich gewesen wäre. Dadurch konnten wir die gefundenen Probleme schnell beheben.

Ich habe den Prototyp auch an Entwickler weitergegeben, um ihnen zu zeigen, wo die Breakpoints des responsiven Designs waren, wie Fokus- oder Fehlerzustände aussehen sollten und wie die vorausschauende Suche funktionieren sollte.

Als die Frontend-Entwickler den Prototypen in die Hände bekamen, machte das auch ihr Leben viel einfacher. Sogar die Backend-Entwickler schätzten den Prototyp, weil sie sehen konnten, wie das Endprodukt funktionieren sollte.

Diese Art von Rapid Prototyping, Testing und Implementierung einer neuen Produktfunktion war viel schneller als jede andere Funktionsentwicklung, mit der sie zuvor beschäftigt waren, und es traten weniger Probleme auf, wenn es um die QA-Phase ging.

Als alles gesagt und getan war, erwähnte jeder im Team, wie hilfreich der detaillierte Prototyp war, und bat darum, diese Art von Prototyping-Prozess öfter durchführen zu lassen. Das Fazit ist, dass das Erstellen, Überprüfen und Testen eines detaillierten Prototyps einen großen Unterschied machen kann. Das gesamte Team konnte wesentliche, umfassende Interaktionen sehen, die für die Benutzer von Bedeutung waren.

Mit Axure können wir alles testen, selbst die komplexesten Anwendungsfälle. Unsere Prototypen sehen aus und verhalten sich wie das Original. Julie, User Experience Lab

Merkmale und Stärken von Axure

Designer müssen nicht wissen, wie man codiert, um komplexe, dynamische und funktionsreiche Prototypen in Axure zu erstellen. Anspruchsvolle und komplizierte Interaktionen können mithilfe des Interaktionsfensters mit einfachen „Wenn dies, dann das“-Anweisungen eingerichtet werden. Nachfolgend finden Sie eine Liste einiger zusätzlicher Axure-Funktionen:

Grundlegendes und fortgeschrittenes Prototyping

• Integrierte Widgets für schnelles Wireframing und Prototyping
• Eine Drag-and-Drop-Umgebung
• Erstellen von browserbasierten Prototypen ohne Codierung
• Erstellen von Interaktionen aus Sketch-Assets
• Mobile Emulation und Anzeige auf mobilen Geräten
• Arbeitsformularfelder, die Benutzereingaben ermöglichen
• Bedingte Logik, Variablen und Ausdrücke hinzufügen
• Arbeiten mit dynamischen Inhalten und adaptiven Ansichten
• Animationseffekte hinzufügen
• Offline-Betrachtung von Prototypen
• Benutzerdefinierte Widget-Bibliotheken
• Adobe XD-Integration und Plugins
• Teilen von Prototypen in der Axure Cloud, die in einem Browser angezeigt werden können

Co-Authoring und Zusammenarbeit

• Axure RP und Axure Cloud ermöglichen es mehreren Personen, gleichzeitig an demselben Projekt zu arbeiten.

Geteiltes Vermögen

• Erstellen und teilen Sie Bibliotheken mit interaktiven Komponenten und importieren Sie Assets aus Sketch.

Entwicklerübergabe

• Veröffentlichen Sie Designs aus RP und Sketch in Axure Cloud für automatische Redlines plus CSS- und Bildexport.

Dokumentation und Spezifikation

• Erstellen Sie Prozessabläufe, Produktabrisse und visuelle Spezifikationen.

Axure Prototyping Mini-Fallstudie

Um die Fähigkeiten von Axure zu demonstrieren, die über einfache Bildschirm-zu-Bildschirm-Prototypen hinausgehen, habe ich einige Bildschirme mit subtilen Interaktionen für Zalando erstellt – eine bestehende E-Commerce-Website. Nach Fertigstellung wurden alle diese Prototypsequenzen in HTML exportiert und konnten in einem Browser von jedem und überall mit Axure Cloud überprüft werden.

Zuerst habe ich ein paar Website-Interaktionen erstellt, die ein Mega-Menü, eine Suche, horizontales Scrollen durch Produkte, Favoriten und die Anmeldung für einen Newsletter demonstrieren.

Auf einer Produktlistenseite habe ich Hover-Effekte auf den Miniaturansichten unter dem Hauptproduktbild erstellt, um das Produkt in verschiedenen Farben anzuzeigen (Bilder beim Hover austauschen). Ich habe auch wieder ein Produkt favorisiert und ein Dropdown-Widget zum Filtern der Produktlistenseite durch Festlegen einer Preisspanne hinzugefügt.

Als Nächstes wollte ich in der gleichen Weise wie im obigen Bildschirm demonstrieren, wie verschiedene Produktbilder ausgetauscht werden, wenn der Mauszeiger über Miniaturbilder auf einer Produktdetailseite bewegt wird. Ich habe auch eine weitere Hover-Funktion hinzugefügt, damit Käufer die Produktbeschreibung, Informationen zu Größe und Passform, Lieferung und Bewertungen sehen können. Zuletzt habe ich eine Größenauswahl integriert und das Produkt in den Warenkorb gelegt.

Anhand des folgenden Benutzerablaufs wollte ich zeigen, wie die Verwaltung eines Einkaufswagens funktionieren würde – beispielsweise das Entfernen eines Produkts aus dem Einkaufswagen –, indem ich subtile Folien, Überblendungen und Animationen zum Ersetzen von Elementen verwende. Es wurde kein Code verwendet, um diese subtilen Mikrointeraktionen zu erstellen.

Zu guter Letzt wollte ich subtile UI-Transformationen auf dem Anmeldebildschirm zeigen, wenn Leute falsche Anmeldeinformationen eingeben und welche Fehlermeldung angezeigt wird.

Diese subtilen Interaktionen und UI-Transformationen sind beim Testen von Produktfunktionen nützlich, da Designer und Benutzerforscher detailliertere Benutzertests durchführen und tiefere Einblicke in die Reaktionen der Menschen auf eine E-Commerce-Website gewinnen können. Sie zeigen ein spezifisches, raffiniertes Erscheinungsbild, das mit anderen Prototyping-Tools nicht möglich wäre oder sich als sehr schwierig erweisen könnte.

Zusammenfassung

Auf der Suche nach den neuesten und besten Wireframing- und Prototyping-Tools übersehen Designer manchmal etablierte, leistungsfähige Tools, die sich bewährt haben.

Designer sollten Axure einen anderen Look verpassen. Aufgrund seiner Tiefe, seines Funktionsumfangs und seiner Flexibilität ist Axure im Vergleich zu anderen Lösungen ein leistungsfähiges, robustes Tool, und das Unternehmen aktualisiert es kontinuierlich, um seine Relevanz als Designtool aufrechtzuerhalten.

Eine kostenlose Testversion von Axure steht zum Download bereit. Designer können Benutzeroberflächen aus Sketch exportieren, in Axure importieren und realistisch aussehende Prototypen erstellen. Es gibt auch viele Tutorials für jede Art von Projekt (auf YouTube und der Axure-Website), und fertige Axure-Widgets sind ebenfalls weithin zum Download verfügbar (kostenlos und kostenpflichtig).

• • •

Weiterführende Literatur im Toptal Design Blog:

• Perfektionieren Sie Ihren UX-Designprozess – Ein Leitfaden für das Prototypendesign
• Die 10 UX-Ergebnisse, die Top-Designer verwenden
• UX-Mythen – Prototyping, Benutzertests und UX-Ergebnisse
• Framer-Tutorial: So erstellen Sie beeindruckende interaktive Prototypen
• Meistern Sie Ihr Handwerk mit diesen Top-UX-Tools