{"id":63924,"date":"2022-06-09T11:43:36","date_gmt":"2022-06-09T11:43:36","guid":{"rendered":"https:\/\/decode.agency\/?post_type=article&#038;p=63924"},"modified":"2025-10-16T10:42:53","modified_gmt":"2025-10-16T10:42:53","slug":"wireframe-anmerkungen","status":"publish","type":"article","link":"https:\/\/decode.agency\/de\/article\/wireframe-anmerkungen\/","title":{"rendered":"Anmerkungen zu Wireframes: Ein umfassender Leitfaden"},"content":{"rendered":"\n<p>Bei der Entwicklung einer App geh\u00f6ren Wireframes und Mockups zu den m\u00e4chtigsten Werkzeugen in Ihrem Arsenal.<\/p>\n\n\n\n<p id=\"h.30j0zll\">Wie bei allem anderen ist die Planung der Schl\u00fcssel zu einer erfolgreichen App. Wireframes erleichtern diesen Prozess, indem sie es Ihnen erm\u00f6glichen, Ihre Ideen auf Papier zu bringen, sodass Sie sie schnell \u00fcberarbeiten k\u00f6nnen. <\/p>\n\n\n\n<p id=\"h.58kszbq19it\">Sie sind auch eine gute M\u00f6glichkeit, Ihr App-Konzept den Beteiligten zu vermitteln.<\/p>\n\n\n\n<p>Aber wenn Ihr Wireframe selbst verwirrend und schwer verst\u00e4ndlich ist, wird es zum <a href=\"https:\/\/decode.agency\/article\/app-wireframing-mistakes\/\">Problem<\/a>, weil es seinen Zweck nicht erf\u00fcllt und sogar mehr schaden als n\u00fctzen kann.<\/p>\n\n\n\n<p>Die L\u00f6sung hei\u00dft Annotation.<\/p>\n\n\n\n<p>Sie geben dem Wireframe eine Stimme und liefern Kontext und Erkl\u00e4rungen, die bestimmte Elemente und Konzepte in einem Wireframe weiter verdeutlichen k\u00f6nnen.<\/p>\n\n\n\n<p>Hier finden Sie eine Einf\u00fchrung in die Annotation, die Ihnen den Einstieg erleichtert.<\/p>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-69d1b5b27f57d\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-69d1b5b27f57d\"  aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/decode.agency\/de\/article\/wireframe-anmerkungen\/#Was_sind_Wireframe-Anmerkungen\" >Was sind Wireframe-Anmerkungen?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/decode.agency\/de\/article\/wireframe-anmerkungen\/#Warum_sind_Annotationen_wichtig\" >Warum sind Annotationen wichtig?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/decode.agency\/de\/article\/wireframe-anmerkungen\/#Fuer_wen_sind_Annotationen_gedacht\" >F\u00fcr wen sind Annotationen gedacht?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/decode.agency\/de\/article\/wireframe-anmerkungen\/#Was_soll_man_anmerken\" >Was soll man anmerken?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/decode.agency\/de\/article\/wireframe-anmerkungen\/#Wann_sollte_man_Anmerkungen_machen\" >Wann sollte man Anmerkungen machen?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/decode.agency\/de\/article\/wireframe-anmerkungen\/#Bewaehrte_Verfahren_fuer_die_Erstellung_von_Wireframe-Anmerkungen\" >Bew\u00e4hrte Verfahren f\u00fcr die Erstellung von Wireframe-Anmerkungen<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/decode.agency\/de\/article\/wireframe-anmerkungen\/#Die_besten_kommentierten_Wireframe-Tools\" >Die besten kommentierten Wireframe-Tools<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/decode.agency\/de\/article\/wireframe-anmerkungen\/#Bei_Anmerkungen_geht_es_vor_allem_um_Klarheit\" >Bei Anmerkungen geht es vor allem um Klarheit<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Was_sind_Wireframe-Anmerkungen\"><\/span>Was sind Wireframe-Anmerkungen?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Annotationen sind Texterkl\u00e4rungen, die bestimmte Abschnitte des Wireframes n\u00e4her erl\u00e4utern. <\/p>\n\n\n\n<p>Sie werden h\u00e4ufig verwendet, um Funktionen zu beschreiben, die bei statischen Wireframes nicht ohne Weiteres ersichtlich sind, wie z. B. Animationen, Interaktionen oder dynamische Inhalte.<\/p>\n\n\n\n<p>Im folgenden Beispiel wird in den Anmerkungen beschrieben, was passiert, wenn Benutzer auf bestimmte Elemente tippen oder Gesten wie Streichen ausf\u00fchren. <\/p>\n\n\n<div class=\"wp-block-image-align aligncenter \">\n<figure class=\"wp-block-image aligncenter is-style-default\"><img decoding=\"async\" src=\"https:\/\/decode.agency\/wp-content\/uploads\/2022\/06\/annotation-ux.png\" alt=\"\"><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center\">Quelle: <a href=\"https:\/\/www.behance.net\/gallery\/45930803\/Annotations\" target=\"_blank\" rel=\"noopener\">Chaymae Lougmani | Behance<\/a><\/p>\n\n\n\n<p>Manchmal k\u00f6nnen Anmerkungen die Logik und Motivation hinter den Designentscheidungen im Wireframe erkl\u00e4ren. <\/p>\n\n\n\n<p>Warum haben Sie sich zum Beispiel f\u00fcr ein Hamburger-Men\u00fc statt f\u00fcr eine Men\u00fcleiste am unteren Bildschirmrand entschieden? Das k\u00f6nnen Sie mit einer Anmerkung erkl\u00e4ren.<\/p>\n\n\n\n<p>Hier ist ein weiteres Beispiel:<\/p>\n\n\n<div class=\"wp-block-image-align aligncenter \">\n<figure class=\"wp-block-image aligncenter is-style-default\"><img decoding=\"async\" src=\"https:\/\/decode.agency\/wp-content\/uploads\/2022\/06\/wireframe-example.png\" alt=\"\"><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center\">Quelle: <a href=\"https:\/\/www.quora.com\/How-do-you-annotate-wireframes\" target=\"_blank\" rel=\"noopener\">Aboli Champhekar-Maydeo | Quora<\/a><\/p>\n\n\n\n<p>Im obigen Wireframe verteidigt die Designerin ihre Entscheidung f\u00fcr eine klebende Navigationsleiste. Es war eine unkonventionelle Entscheidung, daher waren die Anmerkungen notwendig.<\/p>\n\n\n\n<p>Schlie\u00dflich k\u00f6nnen Anmerkungen auch bew\u00e4hrte Praktiken, Empfehlungen oder sogar noch offene Fragen enthalten. Hier ist ein Beispiel:<\/p>\n\n\n<div class=\"wp-block-image-align aligncenter \">\n<figure class=\"wp-block-image aligncenter is-style-default\"><img decoding=\"async\" src=\"https:\/\/decode.agency\/wp-content\/uploads\/2022\/06\/Wireframe-with-Annotation.png\" alt=\"\"><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center\">Quelle: <a href=\"https:\/\/www.johntkim.com\/wireframe\/\" target=\"_blank\" rel=\"noopener\">John Kim<\/a><\/p>\n\n\n\n<p>Die Angabe der noch zu l\u00f6senden Probleme ist eine gute M\u00f6glichkeit, den Betrachter dazu zu bringen, aus einem bestimmten Blickwinkel zu denken. Auf diese Weise k\u00f6nnen Wireframe-Anmerkungen zu einem kollaborativen Werkzeug werden.<\/p>\n\n\n\n<p>Das Beste an Kommentaren ist, dass sie sehr flexibel sind. Sie k\u00f6nnen alles in Ihrem Wireframe erkl\u00e4ren oder erl\u00e4utern.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Warum_sind_Annotationen_wichtig\"><\/span>Warum sind Annotationen wichtig?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Anmerkungen sind entscheidend, um die Absicht Ihres Wireframes so klar wie m\u00f6glich zu kommunizieren. <\/p>\n\n\n\n<p>Ein Blogbeitrag des f\u00fchrenden Wireframing-Tools Balsamiq beschreibt die <a href=\"https:\/\/balsamiq.com\/learn\/articles\/wireframe-annotations\/#:~:text=annotations%20have%20a%20challenging%20role%3A%20to%20speak%20for%20the%20wireframe%E2%80%99s%20designer%20when%20she%20isn%E2%80%99t%20there\" target=\"_blank\" rel=\"noopener\">Vorteile der Verwendung von Annotationen<\/a> wie folgt:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>&#8222;F\u00fcr den Designer des Wireframes zu sprechen, wenn er nicht anwesend ist.&#8220;<\/p>\n<\/blockquote>\n\n\n\n<p><\/p>\n\n\n\n<p>Das Problem ist, dass viele Dinge in einem Wireframe in der \u00dcbersetzung verloren gehen k\u00f6nnen. Die Design-Idee, die Sie in Ihrem Kopf haben, k\u00f6nnte auf dem Papier anders wirken. <\/p>\n\n\n\n<p>Oder die Betrachter m\u00fcssen erst den Kontext verstehen, bevor sie Ihre Entscheidung nachvollziehen k\u00f6nnen.<\/p>\n\n\n\n<p>Leider kann ein einfaches Missverst\u00e4ndnis oder eine falsche Kommunikation ein mittelst\u00e4ndisches Unternehmen bis zu 625.300 Dollar pro Jahr kosten.<\/p>\n\n\n<div class=\"wp-block-image-align aligncenter \">\n<figure class=\"wp-block-image aligncenter is-style-default\"><img decoding=\"async\" src=\"https:\/\/decode.agency\/wp-content\/uploads\/2022\/06\/costs-of-poor-communication-.png\" alt=\"\"><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center\">Quelle: <a href=\"https:\/\/searchengineland.com\/the-cost-of-bad-communication-is-skyrocketing-what-cmos-need-to-know-380456\" target=\"_blank\" rel=\"noopener\">Search Engine Land<\/a><\/p>\n\n\n\n<p>Fehlkommunikation ist besonders w\u00e4hrend der App-Entwicklung verheerend.<\/p>\n\n\n\n<p>Ihr Entwickler k\u00f6nnte zum Beispiel ein Element falsch interpretieren und es deshalb falsch codieren. Leider kann die sp\u00e4tere \u00dcberarbeitung dieses Versehens Sie erheblich mehr kosten. <\/p>\n\n\n\n<p>Der Usability-Guru Jakob Nielsen sch\u00e4tzt, dass \u00c4nderungen, die erst nach der Programmierung vorgenommen werden, <a href=\"https:\/\/www.nngroup.com\/articles\/paper-prototyping\/#:~:text=the%20most%20common%20estimate%20is%20that%20it&#039;s%20100%20times%20cheaper%20to%20make%20a%20change%20before%20any%20code%20has%20been%20written%20than%20it%20is%20to%20wait%20until%20after%20the%20implementation%20is%20complete.\" target=\"_blank\" rel=\"noopener\">100 Mal teurer<\/a> sind als solche, die schon vorher erkannt werden.<\/p>\n\n\n\n<p>Die Kommentierung Ihrer Wireframes kann sicherstellen, dass dies nicht passiert. <\/p>\n\n\n\n<p>So k\u00f6nnen Sie alles klar dokumentieren, so dass alle im Team auf derselben Seite stehen. <\/p>\n\n\n\n<p>Dies ist besonders wichtig f\u00fcr einige Elemente, die besondere Anweisungen erfordern, wie z. B. die Anforderungen an die Barrierefreiheit.<\/p>\n\n\n\n<p>Im folgenden Beispiel ist zu beachten, dass die Anmerkungen Anweisungen zu spezifischen Schritten f\u00fcr die Barrierefreiheit enthalten, anstatt einfach nur zu sagen: &#8222;Machen Sie dieses Element barrierefrei&#8220;. <\/p>\n\n\n<div class=\"wp-block-image-align aligncenter \">\n<figure class=\"wp-block-image aligncenter is-style-default\"><img decoding=\"async\" src=\"https:\/\/decode.agency\/wp-content\/uploads\/2022\/06\/A-wireframe-with-annotations-describing-accessibility-requirements.png\" alt=\"\"><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center\">Quelle: <a href=\"https:\/\/xd.adobe.com\/ideas\/process\/wireframing\/benefits-of-annotating-wireframes\/\" target=\"_blank\" rel=\"noopener\">Adobe<\/a><\/p>\n\n\n\n<p>Anmerkungen k\u00f6nnen auch Ihre Chancen erh\u00f6hen, dass Ihr Wireframe von externen Stakeholdern genehmigt wird, sei es die Gesch\u00e4ftsleitung oder Kunden. <\/p>\n\n\n\n<p>Diese Personen verf\u00fcgen oft nicht \u00fcber die Details, den Kontext oder das technische Know-how, um Ihre App-Entscheidungen richtig beurteilen zu k\u00f6nnen, daher m\u00fcssen Sie diese mit Anmerkungen erl\u00e4utern.<\/p>\n\n\n<div class=\"wp-block-image-align aligncenter \">\n<figure class=\"wp-block-image aligncenter is-style-default\"><img decoding=\"async\" src=\"https:\/\/decode.agency\/wp-content\/uploads\/2022\/06\/wireframe-example-2.png\" alt=\"\"><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center\">Quelle: <a href=\"https:\/\/visualobjects.com\/app-development\/blog\/annotated-wireframes\" target=\"_blank\" rel=\"noopener\">Visual Objects<\/a><\/p>\n\n\n\n<p>Im Wesentlichen helfen Ihnen Anmerkungen dabei, ein vollst\u00e4ndiges Bild Ihres Wireframes zu zeichnen. Sie stellen sicher, dass Ihre App-Idee genehmigt und genau so umgesetzt wird, wie Sie es sich vorgestellt haben.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Fuer_wen_sind_Annotationen_gedacht\"><\/span>F\u00fcr wen sind Annotationen gedacht?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Laut <a href=\"https:\/\/balsamiq.com\/learn\/articles\/wireframe-annotations\/#:~:text=%22There%20are%20typically,-%20Dan%20Saffer\" target=\"_blank\" rel=\"noopener\">Dan Saffer<\/a>, Creative Director bei <a href=\"https:\/\/smartdesignworldwide.com\/\" target=\"_blank\" rel=\"noopener\">Smart Design<\/a>:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>&#8222;Es gibt in der Regel f\u00fcnf Zielgruppen f\u00fcr Wireframes: Kunden (intern oder extern), Entwickler, visuelle Designer, Texter und, am wichtigsten, Ihr zuk\u00fcnftiges Ich.&#8220;<\/p>\n<\/blockquote>\n\n\n\n<p><\/p>\n\n\n\n<p>Alle Beteiligten betrachten Ihr Wireframe auf unterschiedliche Art und Weise, daher m\u00fcssen Sie Ihre Anmerkungen entsprechend anpassen.<\/p>\n\n\n\n<p><strong>Entwickler<\/strong> zum Beispiel sind mit der Implementierung besch\u00e4ftigt. Daher m\u00fcssen Sie das genaue Verhalten und den Zweck jedes Elements angeben. <\/p>\n\n\n\n<p><strong> Visuelle Designer<\/strong> hingegen achten mehr auf die Benutzerfreundlichkeit der Anwendung, daher m\u00fcssen die Anmerkungen aus der Sicht des Benutzers beschrieben werden.<\/p>\n\n\n\n<p>Hier ist ein Beispiel f\u00fcr einen Kommentar, der dies widerspiegelt:<\/p>\n\n\n<div class=\"wp-block-image-align aligncenter \">\n<figure class=\"wp-block-image aligncenter is-style-default\"><img decoding=\"async\" src=\"https:\/\/decode.agency\/wp-content\/uploads\/2022\/06\/scroll-bar-screenshot.png\" alt=\"\"><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center\">Quelle: <a href=\"https:\/\/www.smashingmagazine.com\/2016\/11\/wireframe-perfectionist-guide\/#annotating-the-wireframes\" target=\"_blank\" rel=\"noopener\">Smashing Magazine<\/a><\/p>\n\n\n\n<p>Beachten Sie, dass der erste Kommentar viel erz\u00e4hlerischer ist und sich auf die UX-Vorteile konzentriert. <\/p>\n\n\n\n<p>Die zweite hingegen ist eine Schritt-f\u00fcr-Schritt-Beschreibung des Verhaltens dieses Elements &#8211; n\u00fctzliche Informationen, wenn Sie es bauen m\u00f6chten.<\/p>\n\n\n\n<p>Anmerkungen k\u00f6nnen auch <strong>UX-Textern<\/strong> dabei helfen, zu wissen, welche spezifischen Texte und Call-to-Actions (CTAs) zu schreiben sind. Hier ist ein gutes Beispiel:<\/p>\n\n\n<div class=\"wp-block-image-align aligncenter \">\n<figure class=\"wp-block-image aligncenter is-style-default\"><img decoding=\"async\" src=\"https:\/\/decode.agency\/wp-content\/uploads\/2022\/06\/An-example-of-a-way-to-include-copy-in-wireframes.png\" alt=\"\"><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center\">Quelle: <a href=\"https:\/\/balsamiq.com\/learn\/articles\/wireframe-annotations\/\" target=\"_blank\" rel=\"noopener\">Balsamiq<\/a><\/p>\n\n\n\n<p>Die obige Abbildung zeigt, dass Anmerkungen nicht nur auf die Kennzeichnung von App-Elementen beschr\u00e4nkt sind. Jeder hinzugef\u00fcgte Text ist akzeptabel, solange er Ihnen hilft, Ihr Wireframe klar zu kommunizieren.<\/p>\n\n\n\n<p>Dar\u00fcber hinaus sollten Sie auch Anmerkungen f\u00fcr Ihr <strong>zuk\u00fcnftiges Ich<\/strong> schreiben. <\/p>\n\n\n\n<p>Man vergisst leicht, welche \u00dcberlegungen hinter dem Wireframe stehen, vor allem, wenn man das Feedback mehrerer Personen ber\u00fccksichtigt hat. <\/p>\n\n\n\n<p>Anmerkungen dokumentieren Ihren Gedankengang, so dass Sie auf eine alte Idee zur\u00fcckkommen oder sie in Zukunft pr\u00e4zisieren k\u00f6nnen.<\/p>\n\n\n<div class=\"wp-block-image-align aligncenter \">\n<figure class=\"wp-block-image aligncenter is-style-default\"><img decoding=\"async\" src=\"https:\/\/decode.agency\/wp-content\/uploads\/2022\/06\/An-example-of-using-sources-for-design-decisions.png\" alt=\"\"><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center\">Quelle: <a href=\"https:\/\/balsamiq.com\/learn\/articles\/wireframe-annotations\/\" target=\"_blank\" rel=\"noopener\">Balsamiq<\/a><\/p>\n\n\n\n<p>Wie Sie sehen, sind Wireframes f\u00fcr viele Beteiligte n\u00fctzlich. Mit Anmerkungen stellen Sie sicher, dass diese Personen Ihre Idee richtig interpretieren, auch wenn sie unterschiedliche Motive und Vorurteile haben.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Was_soll_man_anmerken\"><\/span>Was soll man anmerken?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Theoretisch steht es Ihnen frei, jeden Teil Ihres Wireframes mit Anmerkungen zu versehen, wenn Sie dies w\u00fcnschen. Nat\u00fcrlich kann dies zeitaufw\u00e4ndig und unn\u00f6tig sein.<\/p>\n\n\n\n<p>Hier sind die wichtigsten Elemente, die Sie mit Anmerkungen versehen sollten.<\/p>\n\n\n\n<p>Beginnen Sie mit dynamischen Komponenten, die Benutzerinteraktionen, verborgene Zust\u00e4nde oder ereignisgesteuerte Funktionen beinhalten. <\/p>\n\n\n\n<p>Diese w\u00e4ren mit einem statischen Wireframe nur schwer darstellbar, so dass Anmerkungen immer notwendig sind.<\/p>\n\n\n\n<p>Dieser Wireframe ist ein gutes Beispiel:<\/p>\n\n\n<div class=\"wp-block-image-align aligncenter \">\n<figure class=\"wp-block-image aligncenter is-style-default\"><img decoding=\"async\" src=\"https:\/\/decode.agency\/wp-content\/uploads\/2022\/06\/wireframe-example-3.png\" alt=\"\"><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center\">Quelle: <a href=\"https:\/\/uxmovement.com\/wp-content\/uploads\/2010\/09\/wireframe-annotations.png\" target=\"_blank\" rel=\"noopener\">UX-Bewegung<\/a><\/p>\n\n\n\n<p>Wenn Sie Funktionen haben, die auf unterschiedliche Weise implementiert werden, m\u00fcssen diese m\u00f6glicherweise erl\u00e4utert werden. In dieser Anmerkung wird zum Beispiel erkl\u00e4rt, wie die App die Funktion der Einkaufslisten nutzt:<\/p>\n\n\n<div class=\"wp-block-image-align aligncenter \">\n<figure class=\"wp-block-image aligncenter is-style-default\"><img decoding=\"async\" src=\"https:\/\/decode.agency\/wp-content\/uploads\/2022\/06\/this-annotation-explains-the-apps-take-on-the-shopping-lists-feature.png\" alt=\"\"><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center\">Quelle: <a href=\"https:\/\/www.behance.net\/gallery\/32614399\/UX-Wireframes-for-Online-Grocery-Shopping-Mobile-App\" target=\"_blank\" rel=\"noopener\">Volodymyr Melnyk<\/a> <\/p>\n\n\n\n<p>Anmerkungen sind auch f\u00fcr Wireframes n\u00fctzlich, die den Ablauf einer App beschreiben. Sie k\u00f6nnen bestimmte Aktionen, Effekte oder Verhaltensweisen beschreiben, wenn der Benutzer die App durchl\u00e4uft. Hier sehen Sie, wie sie angewendet werden k\u00f6nnen:<\/p>\n\n\n<div class=\"wp-block-image-align aligncenter \">\n<figure class=\"wp-block-image aligncenter is-style-default\"><img decoding=\"async\" src=\"https:\/\/decode.agency\/wp-content\/uploads\/2022\/06\/user-flow-wireframe.png\" alt=\"\"><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center\">Quelle: <a href=\"https:\/\/www.behance.net\/gallery\/50446361\/Fancykitchentoolscom-User-flow\" target=\"_blank\" rel=\"noopener\">Dixie Pacheco | Behance<\/a><\/p>\n\n\n\n<p>Anmerkungen sind auch hilfreich, um Pop-up-Meldungen wie Fehlerdialoge zu dokumentieren. In der Tat sollte ein guter Wireframe die Benutzeroberfl\u00e4che und den Text zur Fehlerbehandlung enthalten, da dies eine sorgf\u00e4ltige Planung erfordert.<\/p>\n\n\n\n<p>Schlie\u00dflich sollten Sie CTAs wie Anmeldeschaltfl\u00e4chen 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.<\/p>\n\n\n<div class=\"wp-block-image-align aligncenter \">\n<figure class=\"wp-block-image aligncenter is-style-default\"><img decoding=\"async\" src=\"https:\/\/decode.agency\/wp-content\/uploads\/2022\/06\/Annotated-wireframe-for-mobile-app.png\" alt=\"\"><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center\">Quelle: <a href=\"https:\/\/dribbble.com\/shots\/2713680-Annotated-wireframe-for-mobile-app\" target=\"_blank\" rel=\"noopener\">Jen Blatz | Dribbble<\/a><\/p>\n\n\n\n<p>Herauszufinden, was man beschriften soll, ist eine Sache. Aber wann sollte man es tun?<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Wann_sollte_man_Anmerkungen_machen\"><\/span>Wann sollte man Anmerkungen machen?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Als Faustregel gilt: Je einfacher das Wireframe ist, desto mehr Anmerkungen m\u00fcssen Sie machen. Das bedeutet, dass Skizzen umfangreicher kommentiert werden m\u00fcssen als ein High-Fidelity-Mockup.<\/p>\n\n\n\n<p>Ein grobes Wireframe mit nur einfachen Formen und Platzhaltern ist ohne Kontext nur schwer zu verstehen. <\/p>\n\n\n\n<p>Daher k\u00f6nnen Anmerkungen den Kontext und die Erz\u00e4hlung darlegen, die helfen, den Zweck Ihres Wireframes vollst\u00e4ndig zu vermitteln.<\/p>\n\n\n\n<p>Sehen Sie sich das folgende Beispiel an. Stellen Sie sich vor, Sie sehen es zum ersten Mal <strong>ohne Anmerkungen<\/strong>. Die Chancen stehen gut, dass Sie nichts von dem verstehen, was vor sich geht.<\/p>\n\n\n<div class=\"wp-block-image-align aligncenter \">\n<figure class=\"wp-block-image aligncenter is-style-default\"><img decoding=\"async\" src=\"https:\/\/decode.agency\/wp-content\/uploads\/2022\/06\/Including-annotations-on-this-low-fidelity-wireframe-makes-it-easier-for-developers-and-other-non-designers-to-understand-the-prototypes-details-and-functions.png\" alt=\"\"><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center\">Quelle: <a href=\"https:\/\/ux4sight.com\/blog\/design-to-dev-app-handoff-dont-drop-the-annotated-doc\" target=\"_blank\" rel=\"noopener\">UX4Sight<\/a><\/p>\n\n\n\n<p>Es gibt zwei Ans\u00e4tze f\u00fcr die Erstellung von Kommentaren &#8211; w\u00e4hrend oder nach dem <a href=\"https:\/\/decode.agency\/article\/benefits-of-app-wireframing\/\" target=\"_blank\" rel=\"noopener\">Wireframing<\/a>.<\/p>\n\n\n\n<p>Die Methode nach dem Wireframing scheint die naheliegendste zu sein, hat aber ihre Schw\u00e4chen. Sie k\u00f6nnten vergessen, warum Sie ein bestimmtes Element eingebaut haben oder wie es sich verhalten soll. <\/p>\n\n\n\n<p>Wenn Sie nicht alles separat dokumentieren, werden Sie Ihr Wireframe immer wieder in Frage stellen.<\/p>\n\n\n\n<p>Das Kommentieren w\u00e4hrend des Wireframings ist der bessere Ansatz. So k\u00f6nnen Sie jeden Gedanken und jede Logik festhalten, damit Sie sie nicht vergessen. <\/p>\n\n\n\n<p>Das Dokumentieren zwingt Sie au\u00dferdem, den Prozess zu durchdenken.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Bewaehrte_Verfahren_fuer_die_Erstellung_von_Wireframe-Anmerkungen\"><\/span>Bew\u00e4hrte Verfahren f\u00fcr die Erstellung von Wireframe-Anmerkungen<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Das Anbringen von Anmerkungen mag einfach erscheinen, aber man kann dabei leicht Fehler machen und weitere Missverst\u00e4ndnisse riskieren. Hier sind einige bew\u00e4hrte Verfahren, die Sie beachten sollten:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Halten Sie die Anmerkungen kurz<\/h3>\n\n\n\n<p>Pr\u00e4gnanz ist ein wesentliches Merkmal einer guten Anmerkung. Denken Sie daran, dass sie dazu da sind, Ihr Wireframe zu verdeutlichen. <\/p>\n\n\n\n<p>Wenn sie lang und ausschweifend sind, k\u00f6nnten sie Ihr Publikum noch mehr verwirren. Sie sollten aber auch nicht zu kurz sein, um nicht zu vage zu wirken.<\/p>\n\n\n\n<p>Ein guter Ansatz ist es, sich nicht an der L\u00e4nge zu orientieren. Konzentrieren Sie sich vielmehr auf die Mindestanzahl von W\u00f6rtern, um Ihren Standpunkt wirksam zu vermitteln.<\/p>\n\n\n\n<p>Die Anmerkungen zu diesem Wireframe beispielsweise m\u00f6gen wortreich erscheinen, aber jeder Satz tr\u00e4gt tats\u00e4chlich zur allgemeinen Erkl\u00e4rung bei.<\/p>\n\n\n<div class=\"wp-block-image-align aligncenter \">\n<figure class=\"wp-block-image aligncenter is-style-default\"><img decoding=\"async\" src=\"https:\/\/decode.agency\/wp-content\/uploads\/2022\/06\/wordy-annotations-example.png\" alt=\"\"><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center\">Quelle: <a href=\"https:\/\/www.konrad.com\/research\/ux-design-process\" target=\"_blank\" rel=\"noopener\">Konrad<\/a><\/p>\n\n\n\n<p>Das Anbringen von Anmerkungen unterscheidet sich nicht so sehr vom Schreiben von UX-Texten. Bringen Sie es auf den Punkt, f\u00fcgen Sie nur das N\u00f6tigste ein, und bearbeiten Sie r\u00fccksichtslos.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Nummerieren Sie Ihre Anmerkungen<\/h3>\n\n\n\n<p>Eine gute und g\u00e4ngige Praxis ist es, Ihre Anmerkungen zu nummerieren.<\/p>\n\n\n\n<p>Dies hat den Vorteil, dass Ihre Wireframes sauber und \u00fcbersichtlich bleiben. Wenn Sie Pfeile verwenden, um das Element mit der Anmerkung zu verkn\u00fcpfen, kann dies zu unn\u00f6tigem Durcheinander f\u00fchren. <\/p>\n\n\n\n<p>Au\u00dferdem k\u00f6nnen Sie durch die Nummerierung alle Anmerkungen in einer Spalte unterbringen, was die Lesbarkeit f\u00fcr den Betrachter erleichtert. Auch das Hinzuf\u00fcgen neuer Anmerkungen ist auf diese Weise einfacher.<\/p>\n\n\n\n<p>Achten Sie bei der Platzierung von Nummernbeschriftungen darauf, dass sie sich vom Rest des Drahtmodells abheben. Verwenden Sie nach M\u00f6glichkeit eine kontrastreiche Farbe, die sonst nirgendwo auf dem Drahtgitter vorhanden ist. <\/p>\n\n\n\n<p>Ein gutes Beispiel ist unten abgebildet:<\/p>\n\n\n<div class=\"wp-block-image-align aligncenter \">\n<figure class=\"wp-block-image aligncenter is-style-default\"><img decoding=\"async\" src=\"https:\/\/decode.agency\/wp-content\/uploads\/2022\/06\/UX-annotations.png\" alt=\"\"><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center\">Quelle: <a href=\"https:\/\/medium.com\/the-marvel-journal\/how-to-build-wireframe-presentation-decks-for-clients-886435e7141d\" target=\"_blank\" rel=\"noopener\">The Marvel Journal | Medium<\/a><\/p>\n\n\n\n<p>Beachten Sie, wie sich die rot nummerierten Symbole visuell von dem schwarz-wei\u00dfen Farbschema des Drahtgitters abheben.<\/p>\n\n\n\n<p>Bei der Verwendung von Anmerkungen ist die Sichtbarkeit der Schl\u00fcssel &#8211; Sie m\u00f6chten nicht, dass der Betrachter die nummerierten Symbole als Teil Ihrer Benutzeroberfl\u00e4che erkennt.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Fokus auf Nutzervorteile<\/h3>\n\n\n\n<p>Die Anmerkungen sollten sich nicht nur auf das Element oder seine Funktion konzentrieren. Sie sollten auch die <strong>Vorteile <\/strong>f\u00fcr die Benutzererfahrung hervorheben. <\/p>\n\n\n\n<p>Der einfachste Weg, dies zu tun, besteht darin, einen Grund f\u00fcr jede Wahl hinzuzuf\u00fcgen.<\/p>\n\n\n\n<p>Anstatt z. B. zu sagen: &#8222;Dies ist eine verborgene Men\u00fcleiste&#8220;, sollten Sie dies durch folgende Aussage erg\u00e4nzen: &#8222;Dies ist eine versteckte Men\u00fcleiste. <\/p>\n\n\n\n<p>Wir haben sie verwendet, weil sie dazu beitr\u00e4gt, die Benutzeroberfl\u00e4che weniger un\u00fcbersichtlich und benutzerfreundlicher zu gestalten.<\/p>\n\n\n\n<p>F\u00fcr 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. <\/p>\n\n\n\n<p>Aber auch wenn Sie mit einem Entwickler sprechen, ist es n\u00fctzlich, die Vorteile darzulegen, da dies den Kontext f\u00fcr die Entwicklung liefert.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Die_besten_kommentierten_Wireframe-Tools\"><\/span>Die besten kommentierten Wireframe-Tools<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Die meisten Wireframing- und Mockup-Tools bieten die M\u00f6glichkeit, Anmerkungen zu machen. Dies kann sehr praktisch sein, da Sie dies bereits w\u00e4hrend der Erstellung des Wireframes tun k\u00f6nnen.<\/p>\n\n\n\n<p><a href=\"https:\/\/balsamiq.com\" target=\"_blank\" rel=\"noopener\">Balsamiq<\/a> ist eines der Tools, die \u00fcber eine robuste Anmerkungsfunktion verf\u00fcgen. Es bietet Designern eine breite Palette von Annotations-Elementen f\u00fcr verschiedene Situationen. Hier sind ein paar von ihnen als Referenz:<\/p>\n\n\n<div class=\"wp-block-image-align aligncenter \">\n<figure class=\"wp-block-image aligncenter is-style-default\"><img decoding=\"async\" src=\"https:\/\/decode.agency\/wp-content\/uploads\/2022\/06\/annotation-elements.png\" alt=\"\"><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center\">Quelle: <a href=\"https:\/\/balsamiq.com\/learn\/ui-control-guidelines\/annotations\/\" target=\"_blank\" rel=\"noopener\">Balsamiq<\/a><\/p>\n\n\n\n<p>Wie Sie sehen k\u00f6nnen, ist es einfach, Wireframes in Balsamiq zu annotieren. Und da Sie dieselben Elemente verwenden, k\u00f6nnen Sie die Anmerkungen projekt- oder team\u00fcbergreifend standardisieren.<\/p>\n\n\n\n<p>Wenn Sie jedoch nach der Erstellung des Wireframes Anmerkungen machen m\u00f6chten, ist <a href=\"https:\/\/www.goodannotations.com\/tools\/wireframe-annotation-tool\" target=\"_blank\" rel=\"noopener\">Good Annotations<\/a> ein gutes Tool <a href=\"https:\/\/www.goodannotations.com\/tools\/wireframe-annotation-tool\" target=\"_blank\" rel=\"noopener\">.<\/a><\/p>\n\n\n\n<p>Dabei handelt es sich um ein webbasiertes Tool, mit dem Sie alles mit Anmerkungen versehen k\u00f6nnen. Laden Sie einfach das Drahtgitter hoch, und schon sind Sie startklar.<\/p>\n\n\n<div class=\"wp-block-image-align aligncenter \">\n<figure class=\"wp-block-image aligncenter is-style-default\"><img decoding=\"async\" src=\"https:\/\/decode.agency\/wp-content\/uploads\/2022\/06\/web-based-tool-for-annotations-.png\" alt=\"\"><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center\">Quelle: <a href=\"https:\/\/www.goodannotations.com\/tools\/wireframe-annotation-tool\" target=\"_blank\" rel=\"noopener\">Good Annotations<\/a><\/p>\n\n\n\n<p>Sie k\u00f6nnen Elemente aus der Symbolleiste anklicken und ziehen, um Anmerkungselemente auf Ihrem Drahtgitter zu platzieren. <\/p>\n\n\n\n<p>Sie k\u00f6nnen auch g\u00e4ngige Formen wie Sterne und H\u00e4kchen hinzuf\u00fcgen, um Ihre Anmerkungen weiter zu bereichern.<\/p>\n\n\n\n<p>Eine gute Anwendung dieses Werkzeugs ist ein praktisches \u00dcberarbeitungs- und Feedback-Tool. <\/p>\n\n\n\n<p>Wenn Sie Ihr Drahtmodell senden, kann es jemand zu Good Annotations hochladen und dann sein Feedback als Anmerkungen einf\u00fcgen. Die Tatsache, dass es online ist, bedeutet, dass jeder dies \u00fcberall tun kann.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Bei_Anmerkungen_geht_es_vor_allem_um_Klarheit\"><\/span>Bei Anmerkungen geht es vor allem um Klarheit<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Wireframes brauchen Klarheit. Das Letzte, was Sie wollen, ist, dass Sie Ihre Stakeholder und Ihr Entwicklungsteam falsch kommunizieren oder in die Irre f\u00fchren. Ohne Anmerkungen laufen Sie Gefahr, dass dies geschieht.<\/p>\n\n\n\n<p>Gl\u00fccklicherweise lassen sich Anmerkungen leicht in jedes Wireframe einbauen. Sie m\u00fcssen sich nur die Zeit und M\u00fche nehmen, Ihre Gedanken zu sammeln und sie zu dokumentieren. <\/p>\n\n\n\n<p>Sicherlich ist das mit etwas Arbeit verbunden, aber diese M\u00fche wird sich sp\u00e4ter auszahlen.<\/p>\n\n\n\n<p>M\u00f6chten Sie mehr \u00fcber Wireframing erfahren? Hier finden Sie unseren <a href=\"https:\/\/decode.agency\/article\/mobile-app-wireframing\/\" target=\"_blank\" rel=\"noopener\">ausgezeichneten Leitfaden f\u00fcr Einsteiger<\/a>. Au\u00dferdem haben wir hier eine Liste mit 18 der <a href=\"https:\/\/decode.agency\/article\/mobile-app-wireframe-examples\/\" target=\"_blank\" rel=\"noopener\">besten Wireframe-Beispiele<\/a> zur Inspiration. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>Dieser Leitfaden f\u00fchrt Sie durch die Grundlagen von Anmerkungen zu Wireframes, einschlie\u00dflich ihrer Bedeutung, ihrer Funktionsweise und ihrer Verwendung.<\/p>\n","protected":false},"featured_media":55940,"template":"","tags":[],"article_category":[],"class_list":["post-63924","article","type-article","status-publish","has-post-thumbnail","hentry"],"cmb2":{"custom_author_metabox":{"custom_author1_id":"60999","custom_author2_id":"","custom_author3_id":""},"pages_metabox":{"page_footer_cta":"cta3"},"feature_metabox":{"featured_blog_post":""},"related_article_metabox":{"related_article_id_1":"63890","related_article_id_2":"63892","related_article_id_3":"63890"}},"_links":{"self":[{"href":"https:\/\/decode.agency\/de\/wp-json\/wp\/v2\/article\/63924","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/decode.agency\/de\/wp-json\/wp\/v2\/article"}],"about":[{"href":"https:\/\/decode.agency\/de\/wp-json\/wp\/v2\/types\/article"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/decode.agency\/de\/wp-json\/wp\/v2\/media\/55940"}],"wp:attachment":[{"href":"https:\/\/decode.agency\/de\/wp-json\/wp\/v2\/media?parent=63924"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/decode.agency\/de\/wp-json\/wp\/v2\/tags?post=63924"},{"taxonomy":"article_category","embeddable":true,"href":"https:\/\/decode.agency\/de\/wp-json\/wp\/v2\/article_category?post=63924"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}