UI-Prototyping mit Wireframes

User Interface PrototypingAm Anfang des UI-Prototypings stehen UI Wireframes (engl. Drahtgitter-Modelle). Sie kosten wenig und sind schnell erstellt.

Bei Wireframes handelt es sich um Skizzen für das UI-Prototyping. Sie veranschaulichen die Struktur eines User-Interfaces und können per Hand gezeichnet sein oder mittels eines UI-Prototyping Tools entworfen.

Die Vorteile von UI Wireframes

Auch bekannt als UI-Mock-Up spielen Wireframes eine wesentliche Rolle bei der nutzer-zentrierten Entwicklung von User-Interfaces. Mit Wireframes

  • richten Sie Ihren Blick auf die wichtigen strukturellen Fragen von Darstellung und Navigation.
  • sind Varianten und neue Ideen einfach auszuprobieren.
  • können Sie bereits vor der Umsetzung eine Rückmeldung zum Anzeige- und Bedienkonzept von Ihren Usern erhalten.
  • lassen sich Änderungen im User-Interface Konzept schnell einpflegen.

Usability-Tests mit UI Wireframes

Neben der vereinfachten Konzeption von User-Interfaces bieten Wireframes die Möglichkeit das User-Feedback zu fokussieren. Sie vermitteln mit Absicht das Gefühl noch nicht fertig zu sein, indem Farben, Formen, Schriften und konkrete Inhalte wie Texte in den Hintergrund rücken. Das führt dazu, dass Ihre User über Funktionalität und Struktur anstelle von ästhetischen Fragen diskutieren.

Zweck von UI Wireframes

Im Wesentlichen dienen Wireframes dazu die einzelnen Seiten herauszuarbeiten, die Funktionen darin darzustellen und die Übergänge zwischen den Ansichten zu verdeutlichen.

Die Diskussionen und Entscheidungen zu den Wireframe-Layouts haben eine große Tragweite. Sie sind die Basis für das weitere UI-Prototyping bis hin zum Grafik-Design. Durch ihre einfache Erstellung ermöglichen sie schnell Änderungen. Das ist ihre große Stärke am Anfang des iterativen Entwicklungsprozesses.

Erfahren Sie mehr über die verschiedenen UI-Prototypen in den folgenden Einzelartikeln:

0. Übersicht

1. Wireframes

2. Interaktionsprototyp

3. programmierter Klickdummy

3.1 High-Fidelity Prototypen

Bitte verfassen Sie einen Kommentar

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s