Kunden müssen erkennen können, wie eine vorgeschlagene Funktion funktionieren wird. Doch es kann für ihre Vorstellungskraft recht schwierig sein, ihnen die gewünschte Funktion lediglich mündlich oder schriftlich zu beschreiben. Wireframing kann dabei äußerst hilfreich sein, da es als visuelles Mock-up-Tool mit dem Prinzip „zeigen, nicht erzählen“ zur Bestätigung von Systemdesign-Ideen mit Kunden dienen kann.
Was ist ein Wireframe?
Wireframes sind Skizzen von Bildschirmen eines Systems, die gelegentlich als Bauplan oder Skelett bezeichnet werden. Sie dienen dazu, Systemdesign-Ideen den Kunden vorzustellen und zu erklären, was letztendlich zu einer Einigung über die vorgeschlagenen Ideen führt.
Wireframes zeigen „genug“ Informationen im Zusammenhang mit der vorgeschlagenen Funktion. Jeder Wireframe besteht aus grundlegenden grafischen Elementen, die die Bildschirmkomponenten darstellen oder Platzhalter für diese darstellen. Ein Wireframe zeigt die Bildschirmstruktur und die Anordnung des Bildschirminhalts. Er konzentriert sich darauf, was ein Bildschirm tut und wie Benutzer mit dem System interagieren, um ihre Bedürfnisse zu erfüllen, anstatt darauf, wie der endgültige Bildschirm tatsächlich aussehen wird.
Bevor wir weitergehen, werfen wir einen Blick auf einen Wireframe, der auf der Grundlage von youtube.com erstellt wurde
Wie Sie sehen können, ist ein Wireframe einfach und unkompliziert. Jeder kann ihn problemlos verstehen. Er hilft dem Entwicklerteam, leicht zu erklären, wie Benutzer mit der Website interagieren werden.
Ein Wireframe ist nur ein Bauplan
Ein Wireframe ist lediglich eine Low-Fidelity-Version einer Benutzeroberfläche und soll keine Darstellung eines echten Bildschirms sein. Wireframes dienen dazu, Funktionen, Benutzerinteraktionen und Bildschirmflüsse zu demonstrieren, ohne explizit festzulegen, wie die Bildschirmkomponenten aussehen sollen oder wie sie sich verhalten sollen, um die höchste Benutzerfreundlichkeit zu erreichen.
Wireframe-Beispiele
Hier ist ein Beispiel für einen Web-Wireframe für eine Startseite:
Hier sind einige Wireframe-Beispiele für Android-Apps:
 |
 |
 |
Hier ist ein Beispiel für einen iPad-Wireframe für eine iPad-App:
Hier ist ein Beispiel für einen iPhone-Wireframe für eine iPhone-App:
Schließlich hier ein Wireframe-Beispiel für eine Desktop-Anwendung:
Vorteile der Verwendung von Wireframes
Benutzeroberfläche klären
Kunden können technische Begriffe der Bildschirmgestaltung wie Slider, Flip-Box, Bootstrap usw. möglicherweise nicht verstehen. Wireframes bestehen aus grundlegenden grafischen Elementen, die jeder verstehen kann, und helfen den Kunden, zu verstehen, wie die Funktionen arbeiten und wie sie mit dem System interagieren können, um ihre Ziele zu erreichen.
Frühe Berücksichtigung der Usability
Benutzererfahrung (UX) ist heutzutage eine wichtige Überlegung bei jeder Software. Die Verwendung von Wireframes bei der Erfassung von Anforderungen bringt die Berücksichtigung der Benutzererfahrung in die frühe Phase des Projekts. Ohne Prototypen zu entwickeln oder echte Bildschirmgestaltungen zu zeichnen, können Benutzer bereits erleben, wie das System funktionieren wird.
Kosteneffizient
Die Erstellung voll ausgestalteter, hochdetaillierter Bildschirmgestaltungen erfordert Zeit und Fachwissen und führt letztendlich zu hohen Kosten. Wireframing ist eine schnelle und kostengünstige Methode, um grundlegende Bildschirmskizzen zu erstellen. Es macht auch das Feintuning oder sogar die vollständige Neugestaltung der Skizzen einfach und kostengünstig.
Offener für Änderungen
Designänderungen sind unvermeidlich. Das Problem bei der Bestätigung von Designideen mittels vollständigem System-Mockup oder Prototyp besteht darin, dass bereits ein erheblicher Arbeitsaufwand geleistet wurde und eine erhebliche Menge an Nacharbeit erforderlich ist, was zusätzliche Zeit, Aufwand und Kosten bedeutet. In dieser Situation sind Kunden und Entwicklungsteam eher zurückhaltend, Bedenken zu äußern oder Änderungen anzufordern. Im Gegensatz dazu erfordert die Erstellung und Überarbeitung von Wireframes viel weniger Zeit. Jeder wird eher bereit sein, Änderungen vorzuschlagen und vorzunehmen.
Engagierte Kunden
Da Wireframes grob und unstrukturiert sind, geben sie den Kunden Raum zum Brainstorming und zur Äußerung ihrer Vorschläge. Da die Bearbeitungszeit zur Verbesserung von Wireframes kurz ist, sind Kunden aktiv an der Feedback-Abgabe beteiligt, was sie eher dazu bringt, die endgültige Gestaltung zu bestätigen.
Wie kann man Wireframes effektiv einsetzen?
Die Verwendung von Wireframes kann vielen Vorteilen sowohl für das Entwicklungsteam als auch für die Kunden bringen, aber dies gilt nur, wenn man sie klug und richtig einsetzt. Ein typischer Missbrauch von Wireframes besteht darin, sie als Ersatz für die Bildschirmgestaltung zu betrachten. Dies macht die Erstellung und Verbesserung schwierig und kostspielig und reduziert die Nützlichkeit des Wireframing. In diesem Abschnitt werden wir einige effektive Tipps zum Wireframing besprechen.
- Ein Wireframe soll einfach und ausreichend sein. Er soll einfach sein, damit er schnell und leicht erstellt werden kann, und es soll keine Hemmung geben, ihn zu verwerfen und neu zu erstellen. Die Low-Fi-Darstellung macht ihn zudem umfassender und kommunikativer. Daher sollten Sie nicht zu viel Zeit darauf verwenden, die Zeichnung zu verschönern, Elemente auszurichten oder ansprechende Schriftarten usw. zu verwenden.
- In einem Wireframe können wir anstelle von tatsächlichem Inhalt einen großen Textblock (den eigentlichen Kontext) durch einen Platzhaltertext ersetzen. Dies dient dazu, unnötige Zeit für die Vorbereitung des Inhalts zu vermeiden und Leser davon abzuhalten, durch den Textinhalt abgelenkt zu werden. Falls jedoch die Anzeige von Text erforderlich ist, können Sie stattdessen etwas Dummy-Text dort platzieren. Einen Generator für Dummy-Text finden Sie leicht im Internet.
- Die Verwendung von Anmerkungen hilft Ihnen, ein Element (z. B. „Unternehmenslogo“) zu beschreiben oder etwas in Bezug auf sein Verhalten zu erklären (z. B. „Verstecken nach 5 Sekunden“). Verwenden Sie sie, wenn nötig. Aber versuchen Sie wiederum nicht, jedes einzelne Wireframe-Element zu dokumentieren. Sie sollten Anmerkungen nur dann verwenden, wenn dies unbedingt erforderlich ist.
- Wireframes können von Hand gezeichnet werden, aber wir erstellen Wireframes normalerweise mit Software, um unsere Arbeit effizienter und leichter zu verwalten. Außerdem bietet einige Wireframe-Software Funktionen, die mit Papier und Bleistift nicht möglich sind. Hier sind drei davon:
- Zustand – Das Wireframing-Tool von Visual Paradigm unterstützt das Konzept des Zustands, das es Ihnen ermöglicht, einen Kind-Wireframe auf der Grundlage eines bestehenden Wireframes zu erstellen. Es spart nicht nur Zeit beim Erstellen einer Bildschirmflusssequenz mit einer Reihe ähnlicher Kind-Wireframes, sondern erleichtert auch die Feinabstimmung der zugehörigen Kind-Wireframes erheblich (da wir Änderungen im ursprünglichen Zustand eines Wireframes vornehmen, werden diese Änderungen auch in allen seinen Kind-Zustands-Wireframes widergespiegelt)
- Storyboard – Ein Storyboard zeigt den Bildschirmfluss einer bestimmten Szene. Es macht die Wireframes übersichtlicher und die Präsentation viel einfacher.
- Verwaltung von Wireframes über User Story – Eine User Story ist ein agiles Werkzeug zur Aufzeichnung von Benutzeranliegen und Anforderungen. Die Einbeziehung von Wireframes in die Szene einer User Story zeigt, wie der Benutzer die Funktion bei der Ausführung eines Teils seiner Aufgabe, wie in der User Story beschrieben, nutzen wird. Außerdem kann der Entwickler, wenn er mit der Implementierung der User Story beginnt, das Wireframe überprüfen, um Ideen über die Erwartungen des Benutzers zu gewinnen.
English
Arabic
Chinese (Simplified)
Dutch
French
German
Italian
Japanese
Korean
Portuguese
Russian
Spanish