Bei der Entwicklung einer App gehören Wireframes und Mockups zu den mächtigsten Werkzeugen in Ihrem Arsenal.
Wie bei allem anderen ist die Planung der Schlüssel zu einer erfolgreichen App. Wireframes erleichtern diesen Prozess, indem sie es Ihnen ermöglichen, Ihre Ideen auf Papier zu bringen, sodass Sie sie schnell überarbeiten können.
Sie sind auch eine gute Möglichkeit, Ihr App-Konzept den Beteiligten zu vermitteln.
Aber wenn Ihr Wireframe selbst verwirrend und schwer verständlich ist, wird es zum Problem, weil es seinen Zweck nicht erfüllt und sogar mehr schaden als nützen kann.
Die Lösung heißt Annotation.
Sie geben dem Wireframe eine Stimme und liefern Kontext und Erklärungen, die bestimmte Elemente und Konzepte in einem Wireframe weiter verdeutlichen können.
Hier finden Sie eine Einführung in die Annotation, die Ihnen den Einstieg erleichtert.
Was sind Wireframe-Anmerkungen?
Annotationen sind Texterklärungen, die bestimmte Abschnitte des Wireframes näher erläutern.
Sie werden häufig verwendet, um Funktionen zu beschreiben, die bei statischen Wireframes nicht ohne Weiteres ersichtlich sind, wie z. B. Animationen, Interaktionen oder dynamische Inhalte.
Im folgenden Beispiel wird in den Anmerkungen beschrieben, was passiert, wenn Benutzer auf bestimmte Elemente tippen oder Gesten wie Streichen ausführen.
Quelle: Chaymae Lougmani | Behance
Manchmal können Anmerkungen die Logik und Motivation hinter den Designentscheidungen im Wireframe erklären.
Warum haben Sie sich zum Beispiel für ein Hamburger-Menü statt für eine Menüleiste am unteren Bildschirmrand entschieden? Das können Sie mit einer Anmerkung erklären.
Hier ist ein weiteres Beispiel:
Quelle: Aboli Champhekar-Maydeo | Quora
Im obigen Wireframe verteidigt die Designerin ihre Entscheidung für eine klebende Navigationsleiste. Es war eine unkonventionelle Entscheidung, daher waren die Anmerkungen notwendig.
Schließlich können Anmerkungen auch bewährte Praktiken, Empfehlungen oder sogar noch offene Fragen enthalten. Hier ist ein Beispiel:
Quelle: John Kim
Die Angabe der noch zu lösenden Probleme ist eine gute Möglichkeit, den Betrachter dazu zu bringen, aus einem bestimmten Blickwinkel zu denken. Auf diese Weise können Wireframe-Anmerkungen zu einem kollaborativen Werkzeug werden.
Das Beste an Kommentaren ist, dass sie sehr flexibel sind. Sie können alles in Ihrem Wireframe erklären oder erläutern.
Warum sind Annotationen wichtig?
Anmerkungen sind entscheidend, um die Absicht Ihres Wireframes so klar wie möglich zu kommunizieren.
Ein Blogbeitrag des führenden Wireframing-Tools Balsamiq beschreibt die Vorteile der Verwendung von Annotationen wie folgt:
„Für den Designer des Wireframes zu sprechen, wenn er nicht anwesend ist.“
Das Problem ist, dass viele Dinge in einem Wireframe in der Übersetzung verloren gehen können. Die Design-Idee, die Sie in Ihrem Kopf haben, könnte auf dem Papier anders wirken.
Oder die Betrachter müssen erst den Kontext verstehen, bevor sie Ihre Entscheidung nachvollziehen können.
Leider kann ein einfaches Missverständnis oder eine falsche Kommunikation ein mittelständisches Unternehmen bis zu 625.300 Dollar pro Jahr kosten.
Quelle: Search Engine Land
Fehlkommunikation ist besonders während der App-Entwicklung verheerend.
Ihr Entwickler könnte zum Beispiel ein Element falsch interpretieren und es deshalb falsch codieren. Leider kann die spätere Überarbeitung dieses Versehens Sie erheblich mehr kosten.
Der Usability-Guru Jakob Nielsen schätzt, dass Änderungen, die erst nach der Programmierung vorgenommen werden, 100 Mal teurer sind als solche, die schon vorher erkannt werden.
Die Kommentierung Ihrer Wireframes kann sicherstellen, dass dies nicht passiert.
So können Sie alles klar dokumentieren, so dass alle im Team auf derselben Seite stehen.
Dies ist besonders wichtig für einige Elemente, die besondere Anweisungen erfordern, wie z. B. die Anforderungen an die Barrierefreiheit.
Im folgenden Beispiel ist zu beachten, dass die Anmerkungen Anweisungen zu spezifischen Schritten für die Barrierefreiheit enthalten, anstatt einfach nur zu sagen: „Machen Sie dieses Element barrierefrei“.
Quelle: Adobe
Anmerkungen können auch Ihre Chancen erhöhen, dass Ihr Wireframe von externen Stakeholdern genehmigt wird, sei es die Geschäftsleitung oder Kunden.
Diese Personen verfügen oft nicht über die Details, den Kontext oder das technische Know-how, um Ihre App-Entscheidungen richtig beurteilen zu können, daher müssen Sie diese mit Anmerkungen erläutern.
Quelle: Visual Objects
Im Wesentlichen helfen Ihnen Anmerkungen dabei, ein vollständiges Bild Ihres Wireframes zu zeichnen. Sie stellen sicher, dass Ihre App-Idee genehmigt und genau so umgesetzt wird, wie Sie es sich vorgestellt haben.
Für wen sind Annotationen gedacht?
Laut Dan Saffer, Creative Director bei Smart Design:
„Es gibt in der Regel fünf Zielgruppen für Wireframes: Kunden (intern oder extern), Entwickler, visuelle Designer, Texter und, am wichtigsten, Ihr zukünftiges Ich.“
Alle Beteiligten betrachten Ihr Wireframe auf unterschiedliche Art und Weise, daher müssen Sie Ihre Anmerkungen entsprechend anpassen.
Entwickler zum Beispiel sind mit der Implementierung beschäftigt. Daher müssen Sie das genaue Verhalten und den Zweck jedes Elements angeben.
Visuelle Designer hingegen achten mehr auf die Benutzerfreundlichkeit der Anwendung, daher müssen die Anmerkungen aus der Sicht des Benutzers beschrieben werden.
Hier ist ein Beispiel für einen Kommentar, der dies widerspiegelt:
Quelle: Smashing Magazine
Beachten Sie, dass der erste Kommentar viel erzählerischer ist und sich auf die UX-Vorteile konzentriert.
Die zweite hingegen ist eine Schritt-für-Schritt-Beschreibung des Verhaltens dieses Elements – nützliche Informationen, wenn Sie es bauen möchten.
Anmerkungen können auch UX-Textern dabei helfen, zu wissen, welche spezifischen Texte und Call-to-Actions (CTAs) zu schreiben sind. Hier ist ein gutes Beispiel:
Quelle: Balsamiq
Die obige Abbildung zeigt, dass Anmerkungen nicht nur auf die Kennzeichnung von App-Elementen beschränkt sind. Jeder hinzugefügte Text ist akzeptabel, solange er Ihnen hilft, Ihr Wireframe klar zu kommunizieren.
Darüber hinaus sollten Sie auch Anmerkungen für Ihr zukünftiges Ich schreiben.
Man vergisst leicht, welche Überlegungen hinter dem Wireframe stehen, vor allem, wenn man das Feedback mehrerer Personen berücksichtigt hat.
Anmerkungen dokumentieren Ihren Gedankengang, so dass Sie auf eine alte Idee zurückkommen oder sie in Zukunft präzisieren können.
Quelle: Balsamiq
Wie Sie sehen, sind Wireframes für viele Beteiligte nützlich. Mit Anmerkungen stellen Sie sicher, dass diese Personen Ihre Idee richtig interpretieren, auch wenn sie unterschiedliche Motive und Vorurteile haben.
Was soll man anmerken?
Theoretisch steht es Ihnen frei, jeden Teil Ihres Wireframes mit Anmerkungen zu versehen, wenn Sie dies wünschen. Natürlich kann dies zeitaufwändig und unnötig sein.
Hier sind die wichtigsten Elemente, die Sie mit Anmerkungen versehen sollten.
Beginnen Sie mit dynamischen Komponenten, die Benutzerinteraktionen, verborgene Zustände oder ereignisgesteuerte Funktionen beinhalten.
Diese wären mit einem statischen Wireframe nur schwer darstellbar, so dass Anmerkungen immer notwendig sind.
Dieser Wireframe ist ein gutes Beispiel:
Quelle: UX-Bewegung
Wenn Sie Funktionen haben, die auf unterschiedliche Weise implementiert werden, müssen diese möglicherweise erläutert werden. In dieser Anmerkung wird zum Beispiel erklärt, wie die App die Funktion der Einkaufslisten nutzt:
Quelle: Volodymyr Melnyk
Anmerkungen sind auch für Wireframes nützlich, die den Ablauf einer App beschreiben. Sie können bestimmte Aktionen, Effekte oder Verhaltensweisen beschreiben, wenn der Benutzer die App durchläuft. Hier sehen Sie, wie sie angewendet werden können:
Quelle: Dixie Pacheco | Behance
Anmerkungen sind auch hilfreich, um Pop-up-Meldungen wie Fehlerdialoge zu dokumentieren. In der Tat sollte ein guter Wireframe die Benutzeroberfläche und den Text zur Fehlerbehandlung enthalten, da dies eine sorgfältige Planung erfordert.
Schließlich sollten Sie CTAs wie Anmeldeschaltflächen und Links mit Anmerkungen versehen und dann angeben, was sie bewirken. In diesem Wireframe wird zum Beispiel angegeben, was passiert, wenn der Benutzer auf interaktive Elemente tippt.
Quelle: Jen Blatz | Dribbble
Herauszufinden, was man beschriften soll, ist eine Sache. Aber wann sollte man es tun?
Wann sollte man Anmerkungen machen?
Als Faustregel gilt: Je einfacher das Wireframe ist, desto mehr Anmerkungen müssen Sie machen. Das bedeutet, dass Skizzen umfangreicher kommentiert werden müssen als ein High-Fidelity-Mockup.
Ein grobes Wireframe mit nur einfachen Formen und Platzhaltern ist ohne Kontext nur schwer zu verstehen.
Daher können Anmerkungen den Kontext und die Erzählung darlegen, die helfen, den Zweck Ihres Wireframes vollständig zu vermitteln.
Sehen Sie sich das folgende Beispiel an. Stellen Sie sich vor, Sie sehen es zum ersten Mal ohne Anmerkungen. Die Chancen stehen gut, dass Sie nichts von dem verstehen, was vor sich geht.
Quelle: UX4Sight
Es gibt zwei Ansätze für die Erstellung von Kommentaren – während oder nach dem Wireframing.
Die Methode nach dem Wireframing scheint die naheliegendste zu sein, hat aber ihre Schwächen. Sie könnten vergessen, warum Sie ein bestimmtes Element eingebaut haben oder wie es sich verhalten soll.
Wenn Sie nicht alles separat dokumentieren, werden Sie Ihr Wireframe immer wieder in Frage stellen.
Das Kommentieren während des Wireframings ist der bessere Ansatz. So können Sie jeden Gedanken und jede Logik festhalten, damit Sie sie nicht vergessen.
Das Dokumentieren zwingt Sie außerdem, den Prozess zu durchdenken.
Bewährte Verfahren für die Erstellung von Wireframe-Anmerkungen
Das Anbringen von Anmerkungen mag einfach erscheinen, aber man kann dabei leicht Fehler machen und weitere Missverständnisse riskieren. Hier sind einige bewährte Verfahren, die Sie beachten sollten:
Halten Sie die Anmerkungen kurz
Prägnanz ist ein wesentliches Merkmal einer guten Anmerkung. Denken Sie daran, dass sie dazu da sind, Ihr Wireframe zu verdeutlichen.
Wenn sie lang und ausschweifend sind, könnten sie Ihr Publikum noch mehr verwirren. Sie sollten aber auch nicht zu kurz sein, um nicht zu vage zu wirken.
Ein guter Ansatz ist es, sich nicht an der Länge zu orientieren. Konzentrieren Sie sich vielmehr auf die Mindestanzahl von Wörtern, um Ihren Standpunkt wirksam zu vermitteln.
Die Anmerkungen zu diesem Wireframe beispielsweise mögen wortreich erscheinen, aber jeder Satz trägt tatsächlich zur allgemeinen Erklärung bei.
Quelle: Konrad
Das Anbringen von Anmerkungen unterscheidet sich nicht so sehr vom Schreiben von UX-Texten. Bringen Sie es auf den Punkt, fügen Sie nur das Nötigste ein, und bearbeiten Sie rücksichtslos.
Nummerieren Sie Ihre Anmerkungen
Eine gute und gängige Praxis ist es, Ihre Anmerkungen zu nummerieren.
Dies hat den Vorteil, dass Ihre Wireframes sauber und übersichtlich bleiben. Wenn Sie Pfeile verwenden, um das Element mit der Anmerkung zu verknüpfen, kann dies zu unnötigem Durcheinander führen.
Außerdem können Sie durch die Nummerierung alle Anmerkungen in einer Spalte unterbringen, was die Lesbarkeit für den Betrachter erleichtert. Auch das Hinzufügen neuer Anmerkungen ist auf diese Weise einfacher.
Achten Sie bei der Platzierung von Nummernbeschriftungen darauf, dass sie sich vom Rest des Drahtmodells abheben. Verwenden Sie nach Möglichkeit eine kontrastreiche Farbe, die sonst nirgendwo auf dem Drahtgitter vorhanden ist.
Ein gutes Beispiel ist unten abgebildet:
Quelle: The Marvel Journal | Medium
Beachten Sie, wie sich die rot nummerierten Symbole visuell von dem schwarz-weißen Farbschema des Drahtgitters abheben.
Bei der Verwendung von Anmerkungen ist die Sichtbarkeit der Schlüssel – Sie möchten nicht, dass der Betrachter die nummerierten Symbole als Teil Ihrer Benutzeroberfläche erkennt.
Fokus auf Nutzervorteile
Die Anmerkungen sollten sich nicht nur auf das Element oder seine Funktion konzentrieren. Sie sollten auch die Vorteile für die Benutzererfahrung hervorheben.
Der einfachste Weg, dies zu tun, besteht darin, einen Grund für jede Wahl hinzuzufügen.
Anstatt z. B. zu sagen: „Dies ist eine verborgene Menüleiste“, sollten Sie dies durch folgende Aussage ergänzen: „Dies ist eine versteckte Menüleiste.
Wir haben sie verwendet, weil sie dazu beiträgt, die Benutzeroberfläche weniger unübersichtlich und benutzerfreundlicher zu gestalten.
Für Kunden ist es wichtig, sich auf die Vorteile zu konzentrieren, da sie dadurch eine bessere Vorstellung davon bekommen, wie der Endbenutzer die App annehmen wird.
Aber auch wenn Sie mit einem Entwickler sprechen, ist es nützlich, die Vorteile darzulegen, da dies den Kontext für die Entwicklung liefert.
Die besten kommentierten Wireframe-Tools
Die meisten Wireframing- und Mockup-Tools bieten die Möglichkeit, Anmerkungen zu machen. Dies kann sehr praktisch sein, da Sie dies bereits während der Erstellung des Wireframes tun können.
Balsamiq ist eines der Tools, die über eine robuste Anmerkungsfunktion verfügen. Es bietet Designern eine breite Palette von Annotations-Elementen für verschiedene Situationen. Hier sind ein paar von ihnen als Referenz:
Quelle: Balsamiq
Wie Sie sehen können, ist es einfach, Wireframes in Balsamiq zu annotieren. Und da Sie dieselben Elemente verwenden, können Sie die Anmerkungen projekt- oder teamübergreifend standardisieren.
Wenn Sie jedoch nach der Erstellung des Wireframes Anmerkungen machen möchten, ist Good Annotations ein gutes Tool .
Dabei handelt es sich um ein webbasiertes Tool, mit dem Sie alles mit Anmerkungen versehen können. Laden Sie einfach das Drahtgitter hoch, und schon sind Sie startklar.
Quelle: Good Annotations
Sie können Elemente aus der Symbolleiste anklicken und ziehen, um Anmerkungselemente auf Ihrem Drahtgitter zu platzieren.
Sie können auch gängige Formen wie Sterne und Häkchen hinzufügen, um Ihre Anmerkungen weiter zu bereichern.
Eine gute Anwendung dieses Werkzeugs ist ein praktisches Überarbeitungs- und Feedback-Tool.
Wenn Sie Ihr Drahtmodell senden, kann es jemand zu Good Annotations hochladen und dann sein Feedback als Anmerkungen einfügen. Die Tatsache, dass es online ist, bedeutet, dass jeder dies überall tun kann.
Bei Anmerkungen geht es vor allem um Klarheit
Wireframes brauchen Klarheit. Das Letzte, was Sie wollen, ist, dass Sie Ihre Stakeholder und Ihr Entwicklungsteam falsch kommunizieren oder in die Irre führen. Ohne Anmerkungen laufen Sie Gefahr, dass dies geschieht.
Glücklicherweise lassen sich Anmerkungen leicht in jedes Wireframe einbauen. Sie müssen sich nur die Zeit und Mühe nehmen, Ihre Gedanken zu sammeln und sie zu dokumentieren.
Sicherlich ist das mit etwas Arbeit verbunden, aber diese Mühe wird sich später auszahlen.
Möchten Sie mehr über Wireframing erfahren? Hier finden Sie unseren ausgezeichneten Leitfaden für Einsteiger. Außerdem haben wir hier eine Liste mit 18 der besten Wireframe-Beispiele zur Inspiration.
