Close

Kontaktieren Sie uns

Brauchen Sie IT-Service oder Support? Schicken Sie uns Ihre Online-Anfrage, und wir finden eine Lösung!

Your request was succesfully accepted!

Interaktive UX Prototypenentwicklung: Fallstudie

In diesem Artikel verwende ich den in UXP eingebauten UX-Prototyp, um zu zeigen, wie Sie die Machbarkeit und Benutzerfreundlichkeit Ihrer Website testen können.

Ich werde über 10 Gründe sprechen, warum ein interaktiver UX-Prototyp besser als ein traditioneller ist. Außerdem werde ich auf einige Begriffe eingehen und einen Einblick geben, wie Sie Ihre UX-Prototype verwenden können.


UX-Prototyp: Vorteile

 

  • Reduziert die Entwicklungsressourcen erheblich (20-40% weniger Korrekturen und Änderungen).
  • Reduziert die Anzahl der Produktversionen (die dritte oder vierte Produktversion kann bereits ein Beta-Release sein).
  • Ermöglicht es, Designfehler zu vermeiden.
  • Eine schnelle und einfache Möglichkeit, um zu zeigen, wie das Produkt aussehen wird.

Aber, was noch wichtiger ist, es gibt Ihnen einen Einblick, wie Ihre Website tatsächlich funktioniert.


Zum UX-Prototyp

Was ist ein UX-Prototyp? Es ist Ihre Website, aber ohne Inhalt und Design. Sie besteht aus HTML-Templates, mit allen Links, die vorhanden sind und funktionieren. Der UX-Prototyp sieht wie eine echte Website aus. Er verfügt über anklickbare Logos und Menütasten, eine vollwertige Struktur (Abschnitte, Meilensteine, usw.), Bedienelemente, usw.

Laden Sie Ihren UX-Prototyp ins Internet hoch, um ihn in Ihrem Browser zu öffnen, auf verschiedenen Geräten zu prüfen, Links mit Ihren Teammitgliedern und Partnern zu teilen und alle möglichen Dinge zu tun, um sicherzustellen, dass Ihr Produkt fehlerfrei und einheitlich ist.

Diese Art von Prototyp wird als vollständig, genau, interaktiv und so weiter bezeichnet. Die Nielsen Norman Group hat den Begriff clickable (anklickbar) entwickelt. Was mich betrifft, so nenne ich es lieber „interaktiver UX-Prototyp“ oder einfach „UX-Prototyp“. Ich glaube, dass dieser Begriff den Zweck dieses Modells am besten beschreibt, was nämlich darin besteht, einen visuellen Überblick der zukünftigen Website zu erhalten und die Benutzerfreundlichkeit zu verbessern.

In diesem Fall sind die Drahtmodelle und die visuellen Modelle völlig nutzlos, da Sie mit diesen statischen Eigenschaften die Benutzertestsessionen durchführen können.

UX-Prototyp vs. traditioneller Prototyp

1) Highlights und Prioritäten

Um die Aufmerksamkeit der Benutzer zu verwalten, können Sie bestimmte Inhalte einsetzen:

  • Größe der Elemente;
  • Farbe;
  • Handlungsaufforderung-Texte (CTA-Text).

Wenn Sie Ihren Prototyp testen, können Sie die Reaktion der Benutzer auf jeden dieser Schwerpunkte überprüfen, indem Sie die Studien durchführen. Außerdem können Sie für jedes Template ein Wärmebild erstellen und die Anzahl der Klicks und Umsetzungen zählen. Durch das Ändern und Anpassen von Schwerpunkten können Sie die Navigation des Benutzers auf der Website bereits auf der Entwurfsstufe beeinflussen.

2) Arbeitsbereich: Adaptiv oder festgelegt?

Die Frage der Arbeitsbereichsgröße (Inhalt + Navigation) ist von entscheidender Bedeutung. Ein Prototyp mit richtig angeordneten Blöcken wird Ihnen helfen, dieses Problem zu lösen, bevor ein Designer dem Prozess beitritt.

3) Navigation + Filter, Listen, usw.

Ihr Prototyp muss das gleiche Menü (d.h. mit den gleichen Wörtern) wie Ihre zukünftige Website haben. Dies wird Ihnen helfen, die Größe und das Aussehen Ihres Menüs einzuschätzen. Durch das Testen von Seiten mit Filtern (z.B. Produktliste) können Sie entscheiden, welche Filtertypen (nach Preis, Datum, Popularität, usw.) Sie wählen möchten. Außerdem können Sie sehen, ob das Wechseln zwischen verschiedenen Filtern einfach ist.

Achten Sie besonders auf die CTA-Taste. Gerade bei E-Commerce-Projekten ist dieses Element von größter Bedeutung. Mit den UX-Prototypen können Sie die Größe, die Anordnung und den Text der CTA-Taste testen und optimieren. All dies wäre mit statischen Bildern unmöglich.

4) Preloader und Inhalt-Hochladen

Wenn ein Formular oder eine Seite das Hochladen von Inhalten ermöglicht (über eine Taste oder ein Scrollen), können Sie einen virtuellen Preloader hinzufügen oder die Seite nach dem Hochladen ändern. So können Sie sehen, ob es eine gute Entscheidung ist und ob Sie einfach einen einfachen Übergang zur nächsten Seite machen sollten.

5) Inhalt und Struktur der Website

Die Verwendung von realen Inhalten (natürlich nicht alle!) reduziert mögliche Änderungen an Design und Funktionalität erheblich.

Ihr Prototyp muss einige Nachrichten, Produktkarten und Inhaltsseiten enthalten. Auf diese Weise sieht Ihr Prototyp wie eine echte Website aus und enthält nicht mehr als 20-30 Seiten.

6) Bilder

Es ist nicht ungewöhnlich, dass die Prototypen die Rechtecke anstelle von Bildern haben. Dies gibt Ihnen jedoch kein Verständnis dafür, wie sich das Bild auf die Schwerpunkte auswirkt, mit dem Text harmoniert und so weiter. Noch wichtiger ist aber, dass Sie nicht sehen können, welche Bildgröße (oder Bildvorschau) auf der Website verwendet werden muss.

Fazit? In Ihrem Prototyp sollten Sie echte Bilder (z.B. die, die Sie vom Kunden erhalten haben) verwenden, die nicht vom Designer angepasst wurden.

Werbebanner sind eine weitere wichtige Sache. Überprüfen Sie die Standards des Anzeigensystems, um die richtige Größe Ihrer Banner herauszufinden. Das bedeutet, dass Sie ein echtes Banner (oder seinen Code) nehmen und es in Ihren Prototyp einfügen müssen.

7) Servicemeldungen

Servicemeldungen werden von vielen Entwicklern auf der Prototypenentwicklungsstufe ignoriert, was ein großer Fehler ist. Die Meldungen, die das System an den Benutzer sendet und die Art und Weise, wie der Benutzer auf sie reagiert (Stornierung der Bestellung, Rückkehr zur Startseite, Rückkehr zur Hilfe-Sektion usw.), sind der Kern der Benutzererfahrung.

8) Formulare und Eingabefelder

Wenn Sie mit Formularen arbeiten, sollten Sie sich auf das Folgende konzentrieren:

  • Pflicht-/Optionsfelder;
  • Eingabevorlagen (Text, Daten, Ziffern, Anzahl der Zeichen);
  • zusätzliche Elemente (Autovervollständigung, Hinweise zum Bewegen der Maus);
  • Schritt-für-Schritt-Struktur.

Durch das Testen des Prototyp-Formulars können Sie die zur Ausfüllung notwendige Zeit schätzen und die möglichen Fallstricke erkennen. Bei Bedarf können Sie das Formular direkt korrigieren (z.B. ein Pflichtfeld zum Optionsfeld machen).

9) Mobilität

Für hybride und adaptive Websites, sowie mobile Apps können Sie überprüfen, wie Ihre Website auf iOS und Android angezeigt wird. Sie müssen Ihren Prototyp (Tippen, Scrollen, Bildschirmrotation usw.) auf verschiedenen mobilen Geräten und in allen gängigen Browsern gründlich testen. Von allen Punkten auf dieser Liste ist dies wahrscheinlich der wichtigste in Bezug auf die Benutzerfreundlichkeit.

10) Technische Merkmale

Das CMS, das Ihre Website oder Ihr externes System (Integration) verwenden wird, hat bestimmte Unterschiede und technischen Einschränkungen. Der Test eines UX-Prototyps wird den CMS-Experten (Programmierern, Partnern) helfen, die potenziellen Engpässe und Funktionen zu erkennen, die schwer oder gar nicht zu implementieren sind.

Was kommt als Nächstes?

Nach dem Abschluss der Tests können Sie den Prototyp den Designern und Programmierern übergeben und ihn im Laufe des Entwicklungsprozesses weiter verbessern.

Bei Meinungsverschiedenheiten kann es sinnvoll sein, mehrere Prototyp-Versionen gleichzeitig zu erstellen und zu testen.

Prototyp vs. MVP

Der UX-Prototyp und das Minimum Viable Product (MVP, minimal tragfähiges Produkt) verfolgen unterschiedliche Zwecke. MVP kann eine einfache Zielseite mit einem Anfrageformular sein. Es reicht aus, um ein Geschäftsmodell zu schätzen (Traffic kaufen, Anfragen sammeln, Marge berechnen usw.). MVP kann erfolgreich für unser Flugticketverkauf-Projekt eingesetzt werden. Mit anderen Worten, benötigt MVP keinen Prototyp und kann vor oder gleichzeitig mit dem Prototyp erstellt werden.

Außerdem kann MVP die erste Produktversion sein, die sich auf dem Prototyp stützt, aber es ist definitiv ein langer Weg.


Wie verändert UX Prototypentwicklung die Rolle von Designern und Programmierern?

Es ist nicht zu leugnen, dass ein solcher Ansatz für Prototypentwicklung die Rolle eines Designers als Benutzeroberfläche-Ersteller beeinflusst. Gleichzeitig ist es wichtig, sich daran zu erinnern:

  • Es wäre nur richtig, einen Designer in den Entwurfsprozess einzubeziehen. Ein erfahrener Designprogrammierer würde auch nicht schaden.
  • Der Designer muss nicht mehr mehrere Anpassungen und Korrekturen am Design vornehmen, wodurch die Zeit für andere Aufgaben frei wird.

Da der Prototyp alle technischen Details enthält, verkürzt sich eine Anforderungsliste auf eine Seite.


Wie bekomme ich Feedback?

Es gibt mehrere Möglichkeiten, Feedback zu Ihren UX-Prototypen zu erhalten. Sie können Ihre Freunde und Bekannten bitten, es zu testen oder ein Team von professionellen Testern beauftragen. Ein Benutzerfreundlichkeit-Labor ist eine weitere Option. Alternativ können Sie Ihren Prototyp im Web veröffentlichen, WebVisor-Codes einfügen und das Verhalten der Benutzer überwachen. Gleichzeitig ist der UX-Prototyp im Gegensatz zum MVP nicht für den A/B-Test geeignet.

Werkzeuge für Entwicklung der UX-Prototype

Für mich ist es wichtig, dass ich eine anwendungsfreundliche Reihe von Webseiten habe, die mit meinem Browser funktionieren. Es spielt keine Rolle, ob es sich nun um Akshura, Pencil Project oder ein anderes System handelt. Die Entwickler mobiler Apps haben das Glück, proto.io zu haben. Das ist eine fantastische Software zum Erstellen eines Prototyps mit voller Funktionalität und Design.

Welche Projekte benötigen UX-Prototypenentwicklung?

Der UX-Prototyp eignet sich hervorragend für kleine und mittlere Projekte. Im Falle kleinerer Projekte ist UX-Prototypenentwicklung noch besser, da es weniger Koordinationsaufwand erfordert.

Große Unternehmen neigen dazu, ihre eigenen Ansätze für die Entwicklung von Websites zu haben, indem sie Waterpool, Agile und andere Techniken verwenden. In der Entwicklergemeinde gibt es einhellige Meinung darüber, welche Lösung am besten funktioniert und welche Rolle ein Prototyp spielt.

Fazit

Die Erstellung eines interaktiven UX-Prototyps ist ein unwiderstehlicher und zeitaufwendiger Prozess. Gleichzeitig reduziert es den Zeit- und Ressourcenaufwand für den Aufbau einer Website. Hier sind die wichtigsten Vorteile der UX-Prototypenentwicklung:

  1. Ermöglicht es, die Probleme mit Inhalt, Koordination, Terminologie, Funktionalität usw. frühzeitig zu erkennen.
  2. Gibt schnelles Feedback, was ermöglicht, die Korrekturen ohne Designer oder Programmierer vorzunehmen.
  3. Hilft bei Beschreibung der wichtigsten Funktionen der Benutzeroberfläche und Konfiguration. Sie erhalten weniger Abzweigungen und Produktversionen.

Aber noch wichtiger ist, dass der UX-Prototyp ein echtes Benutzererlebnis bietet! Und das ist es, was wir an unseren Projekten lieben.