Informationsarchitektur, Wireframes, Mockup und Prototyp: die vier Konzepte zum Aufbau Ihrer Webseite

Sie wollen eine neue Webseite oder Ihre bestehende Webseite relaunchen? – Kein Problem, starten Sie unbedingt mit der Informationsarchitektur, bevor Sie übergehen ins Erstellen der Wireframes. Danach können Sie mit dem Design und Mockups starten. Ah und ganz wichtig, erst am Schluss den Prototyp erstellen! Sie verstehen nur Bahnhof? Keine Sorge, so geht es den Meisten, die sich nicht gerade mit UX & Design auseinandersetzen. Lesen Sie unseren Blog und stellen Sie sicher, dass Sie beim nächsten Aufbau Ihrer Webseite mitreden können.

UX/UI-Design-Prozess

So überrumpelnd das Intro auch war, wahr ist dessen Inhalt. Der generelle Ablauf eines solchen Projekts beginnt mit dem Erarbeiten der Informationsarchitektur bevor wir in die Schaffung der Wireframes übergehen. Als dritter Schritt wird das Projekt mittels Mockups visualisiert. Erst am Schluss wird ein Prototyp erstellt, um das Kundenerlebnis (UX) spürbar zu machen.

Wir erklären Ihnen nun schrittweise die vier Konzepte des UX-Design-Prozesses

1. Informationsarchitektur

Die Informationsarchitektur kann mittels einer Metapher als Inhaltsverzeichnis einer Website beschrieben werden. Zur Darstellung wird dafür häufig das Sitemap genutzt (vgl. Bild unten). Dabei besteht die Informationsarchitektur aus zwei Hauptkomponenten: Erstens die Identifikation und Definition der Seiten und klärt zweitens die grundlegende Organisation und Struktur der Webseite¹. Die Informationsarchitektur beantwortet die Fragen: Welche Kapitel (Seiten) gibt es auf der Webseite? Wie stehen die Seiten miteinander in Zusammenhang (Hierarchie)?

2. Wireframes 

Das Wireframe gilt als das Skelet der Webseite^2,3. Denn Wireframes sind Skizzen der einzelnen Seiten. Sie geben Aufschluss über den Inhalt (Informationen in Text und Bild), dessen Position, sowie über die Funktionen/Interaktionen (wie z.B. Booking). Wireframes zeigen somit das Layout der Webseite auf, während noch strickt auf die Details des visuellen Designs und Brandings verzichtet wird³. Hier entsteht ein Grossteil der User Experience. Welche Interaktionsmöglichkeiten bieten die Seiten? Wie bedient der oder die Nutzende die Seiteninhalte und -elemente? Wie navigiert der Nutzer oder die Nutzerin zu anderen Seiten (User Flow)?

3. Mockup

Ein Mockup ist ein Beispiel beziehungsweise ein statisches Bild zur Visualisierung, wie die Webseite bei den Usern erscheinen wird. Der Zweck des Mockups ist es, dem Wireframe Leben einzuhauchen und zu sehen, wie die visuellen Elemente des Designs zusammenkommen. Das Mockup zeigt folglich, wie die Webseite aussehen wird, enthält aber noch keine Funktionen. Sinnbildlich kann das Mockup als Wireframe mit einer zusätzlichen Schicht beschrieben werden³.

4. Prototype

Mit einem Prototyp simuliert man eine Webseite und kann diese mit Probanden testen, um Feedback einholen. Mit anderen Worten handelt es sich um eine Musterversion des Endprodukts. Der Prototyp ist vollständig interaktiv, gespickt mit Branding, Design und Animation³. Hier geht es um Wahrnehmung. Wie wird die Webseite und deren Einzelteile wahrgenommen und interpretiert? Sind die gezeigten Inhalte verständlich?

Warum diese einzelnen Konzepte? 

Informationsarchitektur, Wireframes, Mockups und Prototypen sind äusserst nützliche Werkzeuge im UX-Designprozess. Jedes Konzept ist wichtig, um Ihre Ideen zu validieren, zu sehen, was funktioniert und was nicht und um mögliche Probleme so früh wie möglich zu beheben. Dadurch können Risiken minimiert und Zeit sowie Budget gespart werden. Der Unterschied zwischen den Konzepten besteht darin, dass es sich einfach um verschiedene Phasen im Designprozess handelt³.

Literaturverzeichnis

1. Usability (2014). Der Unterschied zwischen Informationsarchitektur (IA) und Navigation. Abgerufen auf https://www.usability.ch/news/ia-vs-navigation.html.
2. UXpin (2022). Wireframes: What They Are & How They Support UX. Abgerufen auf https://www.uxpin.com/studio/ui-design/what-is-a-wireframe-designing-your-ux-backbone/.
3. Pixetic (2022). Wireframe, Mockup, Prototype: how to tell one from another?. Abgerufen auf https://pixetic.com/blog/wireframe-mockup-prototype-difference/.