Alle Beiträge von

Das sollten Sie bei der Gestaltung von Formularen beachten

Formulare begegnen uns tagtäglich. Ohne Formulare hätten Nutzer keine Möglichkeit, Kontaktanfragen zu verschicken, etwas zu buchen/bestellen oder auch einen Newsletter zu abonnieren. Formulare sind zentraler Bestandteil im digitalen Umfeld geworden – und oftmals der finale Schritt, mit dem User zu Kunden/Interessenten oder Kontakten werden. Umso wichtiger, dass sie nutzerfreundlich gestaltet sind und den Nutzer bei seiner Eingabe unterstützen. Statt ihm Steine in den Weg zu legen, soll dem Nutzer der Weg bis zum Abschicken so leicht wie möglich gemacht werden.

Wofür werden Formulare eingesetzt?

Formulare kommen für die unterschiedlichsten Zwecke zum Einsatz. Sie begegnen dem Nutzer alltäglich auf Websites und dienen dazu, Daten zu erheben (z.B. im Zuge einer Bestellung oder einer Gewinnspielteilnahme), zu verarbeiten (z.B. bei einer Anfrage) oder auch zu schützen (durch Login/Anmeldemaske). Sie bilden damit die Grundlage für eine Kommunikation mit dem Nutzer – nicht zuletzt auf Social-Media-Kanälen ist ein Eingabefeld notwendig für das Veröffentlichen einer Nachricht.

Im Wesentlichen kommen Formulare in den folgenden Kontexten vor:

  • Transaktionen (Bestellungen, Überweisungen etc.)
  • Login- und Registrierungsmasken
  • Kontaktformulare (Fragen, Support, Rückruf, Anfragen etc.)
  • Datensammlung (Gewinnspiele, Newsletter-Anmeldung, Umfragen etc.)
  • Beitragseinstellung (Blogbeiträge, Kommentare, Posts etc.)
  • Gestaltungstipps für Formulare

    Eine gute Gestaltungslösung für ein Formular hängt von einigen Aspekten ab. Von der Länge des Formulars, von Art und Umfang der zu erhebenden Daten sowie vom Kontext bzw. der Art der Einbindung auf der Website. Dabei ist zu beachten, wie der erste Eindruck auf den Nutzer wirkt: Ist das Formular unübersichtlich und unstrukturiert, weiß der Nutzer nicht sofort, was er zu tun hat. Gibt es viele Eingaben, kann das dazu führen, dass der Nutzer gleich zu Beginn vergrault wird. Eine schnell erfassbare, übersichtliche Struktur, gut erkennbare, klar beschriftete Eingabefelder sowie eindeutig ausgewiesene Pflicht- und optionale Felder machen dem Nutzer das Leben leichter.

    Übersichtliche, schnell erfassbare Struktur des Formulars

    Formulare sollten grundsätzlich immer so kurz wie möglich gehalten werden und keine unnötigen Daten abfragen. Je kürzer das Formular, umso schneller kann es der Nutzer überblicken und erkennt, was vom ihm gefordert wird.

    Jedes Feld sollte hinsichtlich des Mehrwerts der erhobenen Daten hinterfragt werden. Bietet eine – wenn auch optionale – Angabe keinen Zusatznutzen, sollte diese auch nicht abgefragt werden. Dadurch wird die Chance, dass der Nutzer das Formular vollständig ausfüllt, erhöht. Alternativ sollte in Erwägung gezogen werden, das (optionale) Daten zu einem späteren Zeitpunkt abzufragen – mit dem Ziel, die Hürde des Ausfüllens im ersten Schritt für den Nutzer gering zu halten.

    Mithilfe von Weißraum lassen sich inhaltlich zusammengehörige Einheiten (z.B. Adressfelder) gemeinsam gruppieren und logisch zu trennende Elemente (z.B. Gewinnspielfrage und persönliche Daten) optisch voneinander distanzieren.

    Es sollte vermieden werden, Formulare mehrspaltig zu gestalten und mehrere Formularfelder nebeneinander zu platzieren – insbesondere dann, wenn diese inhaltlich nicht zusammengehören. Damit wird von den Achsen abgewichen und es erschwert dem Nutzer die Orientierung in der gelernten Struktur des Formulars. Solche zusätzlichen Felder werden vom Nutzer schnell übersehen. Nur vereinzelt gibt es Kombinationen wie PLZ und Ort, Straße und Hausnummer oder Vorname und Nachname, bei denen eine Ausnahme gemacht werden kann.

    Formularelemente und Auswahloptionen

    Dropdown-Menüs bei nur zwei oder drei Optionen sollten vermieden werden. Diese lassen sich als Radiobuttons nebeneinander oder untereinander platzieren (z.B. bei der Auswahl der Anrede). Dies hat den Vorteil, dass die möglichen Attribute auf den ersten Blick zu sehen sind und der Nutzer nicht erst das Dropdown-Menü öffnen muss. Bei mehr als vier Optionen sind Drop-Down Menüs wiederum eine gute Wahl, um Platz zu sparen. Dies gilt allerdings nur bis zu einer bestimmten Anzahl an Optionen. Bei mobilen Screengrößen sind zu lange Dropdowns nicht sehr nutzerfreundlich. Diese mögen noch funktionieren, wenn die Liste alphabetisch/chronologisch bzw. erwartungskonform sortiert ist (z.B. Listen mit Jahreszahlen, Länderauswahl), so dass der Nutzer weiß, bis wohin er scrollen/wischen muss. In anderen Fällen sollte gegebenenfalls in Erwägung genommen werden, das Dropdown durch seine Suche mit Vorschlagsfunktion zu ersetzen. Der Nutzer tippt den gewünschten Begriff und erhält die relevanten Ergebnisse.

    Pflichtfelder ausweisen

    Pflichtfelder sollten als solche zwingend gekennzeichnet werden, um zu vermeiden, dass der Nutzer bei Nichtausfüllen durch eine Fehlermeldung überrascht und frustriert wird. Ob man anstelle der Pflichtfelder optionale Felder ausweist, sollte davon abhängig gemacht werden, wie viele Felder der jeweiligen Art im Formular vorhanden sind. Die Art der Felder, von denen weniger vorhanden sind, wird gekennzeichnet. Hat man mehr Pflichtfelder, sollten demnach die optionalen Felder ausgewiesen werden. Damit reduzieren sich notwendige Hinweise und ermöglichen, dass der Nutzer das Formular schneller erfassen kann.

    Fazit

    Allgemein lässt sich sagen, dass Formulare möglichst einfach für den Nutzer erstellt werden sollten – leichte Verständlichkeit und Bedienbarkeit sind hier die Stichworte. Wenn es um Conversion-Optimierung geht, steht und fällt einiges mit Formularen. Mit folgenden Tipps gelingt es Ihnen, ein nutzerfreundliches Formular zu erstellen:

  • 1. Formulare so kurz wie möglich halten und keine unnötigen Daten abfragen
  • 2. Zugunsten einer schnellen Orientierung sollten Formulare möglichst einspaltig gestaltet werden
  • 3. Beim Ausfüllen direkt bestätigen, wenn die Eingabe korrekt ist (bspw. mit grünen Häkchen am Ende des Formularfelds)
  • 4. Zusammengehörige Felder logisch gruppieren
  • 5. Formularfelder an Art und Größe der gewünschten Eingabe anpassen
  • 6. Bei weniger als 4 Optionen Dropdown-Menüs vermeiden, diese als Radio-Buttons neben oder -untereinander platzieren
  • 7. Pflichtfelder kennzeichnen
  • 8. Formularelemente eindeutig beschriften
  • 9. Hinweise zu einzuhaltenden Formatierungen platzieren (z.B. Datumsformat TT.MM.JJ)
  • 10. Im Falle fehlerhafte Daten die Fehler auflisten und dem Nutzer eine Hilfestellung bieten
  • 11. Jeweiligen Stellen optisch hervorheben, an denen Daten oder eine Auswahl korrigiert werden müssen
  • 12. Buttons für die primäre Aktion (Absenden eines Formulars) links und bündig zu den Eingabefeldern platzieren
  • 13. Fortschrittsanzeige oberhalb der Formularelemente integrieren, die den aktuellen Status signalisiert und dem Nutzer dadurch zeigt, wo er steht und was noch vor ihm liegt, bis er die Formularstrecke erfolgreich abgeschlossen hat
  • Onepager: Die Allzweckwaffe für erfolgreiche Kampagnen

    Landen Sie beim Surfen auch immer häufiger auf Webseiten, die aus nur einer Seite bestehen und durch die Sie sich scrollend navigieren? Kein Wunder, denn die sogenannten Onepager sind zurzeit die beliebteste Art, Kampagnen, Produkte und Projekte online zu präsentieren. Und das zurecht: Die minimalistischen Webseiten bieten oft ein außergewöhnliches Nutzererlebnis, durch das die präsentierten Inhalte länger im Gedächtnis bleiben.

    Was ist ein Onepager?

    Onepager sind Webseiten im Single Page Design: Sie bestehen nur aus einer Seite und enthalten keine weiteren Unterseiten. Ein Onepager ist typischerweise länger als eine normale Webseite, navigiert wird durch Scrollen und über eine evtl. vorhandene Navigationsleiste. Einzelne Themenbereiche sind durch unterschiedliche grafische Darstellungen voneinander abgegrenzt.

    Wofür eignet sich ein Onepager?

    Für die Darstellung einer überschaubaren Menge an Informationen zu einem klar eingegrenzten Thema.
    Beliebt sind Onepager vor allem für die Präsentation von:

    • Kampagnen
    • Produkteinführungen
    • Projekten
    • Veranstaltungen
    • digitalen Visitenkarten kleinerer Firmen oder Freiberufler

    Die Reduzierung auf ein Kernthema und dessen wichtigste Fakten macht Onepager zur idealen Fläche für die Online-Präsentation einzelner Kampagnen.

    Onepager sind andererseits nicht geeignet für die Präsentation ganzer Unternehmensportfolios und komplexer Informationen. Corporate Websites größerer Unternehmen sollten nach wie vor als klassische Webseite mit mehreren Navigationsebenen umgesetzt werden.

    Typische Elemente, die auf Onepagern zum Einsatz kommen:

    Scrolling & Parallaxing

    Beispiel: http://moto.oakley.com

    http://moto.oakley.com

     

    Flat Design

    Beispiel: http://www.beoplay.com/products/beoplayh6

    http://www.beoplay.com/products/beoplayh6

     

    (Interaktive) Infografiken

    Beispiel: www.olympicstory.com


    www.olympicstory.com

     

    (Interaktives) Storytelling

    Beispiel: http://gla-class.mercedes-benz.com/com/de/#!/roadtrip

    http://gla-class.mercedes-benz.com/com/de/#!/roadtrip

    Vorteile von Onepagern

    Setzt man Onepager richtig ein, bieten sie einige Vorteile gegenüber einer klassischen Webseite:

    • Konzentration auf das Wesentliche
      Der Fokus liegt klar auf dem vorgestellten Thema, wichtige Inhalte werden nicht übersehen, der User schaut sich den gesamten Inhalt an.
    • Effektive Userführung bis zur Conversion
      Ein Onepager nimmt den User an die Hand und führt ihn durch die Präsentation. Der Argumentationsaufbau entspricht einem Verkaufsgespräch.
    • Übersichtlich, einfach und intuitiv zu bedienen
      Ungestörter Lesefluss durch wenige bis keine Klicks. Der User gelangt schnell und bequem zu den gewünschten Informationen.
    • Schnellere Umsetzung als bei einer komplexen Webseite
    • Gleiches Nutzererlebnis auf allen Endgeräten (auch Mobile) durch responsive Design

    Nachteile von Onepagern

    Die Reduzierung auf das Wesentliche bringt naturgemäß auch einige Nachteile mit sich, die bereits bei der Konzeption berücksichtigt werden sollten (und für die es gute Lösungen gibt):

    • Gelernte Navigationsroutinen werden nicht bedient
      Trotz intuitiver Bedienung finden sich manche User auf Onepagern nicht zurecht, da die üblichen Navigationselemente fehlen.
    • Erschwerte Suchmaschinenoptimierung durch nicht vorhandene Unterseiten
      Ein Onepager kann immer nur auf ein Haupt-Keyword und dessen themenverwandte Keywords optimiert werden.
    • Hohe Ladezeiten oder ruckelndes Scrollen bei zu hoher Anzahl an Bildelementen

    6 Dinge, die bei der Umsetzung eines Onepagers beachtet werden sollten

    1. Onepager für einen konkreten Zweck einsetzen
      Einzelne Kampagnen, Produkte, Events oder Projekte präsentieren.
    2. Orientierung erleichtern
      Fixierte Navigationsleisten, Scroll-Spy, Call-to-Actions und Smooth Scroll nehmen dem User die Unsicherheit.
    3. So gut wie möglich für Suchmaschinen optimieren
      Haupt-Keyword definieren und verwenden, einzelne Abschnitte über Hash-URLs erreichbar machen, HTML-Struktur optimieren.
    4. User zur Conversion führen
      Den Weg des Users durch die Seite mit einer Conversion abschließen (z.B. Kontaktformular, Download, Link zum Onlineshop, Newsletter-Anmeldung, Kontaktdaten oder Anfahrtsskizze).
    5. Durch Responsive Design für optimales Nutzererlebnis auf allen Endgeräten sorgen.
    6. Seite nicht zu lang gestalten! Niemand will 20 Minuten lang scrollen, um das Ende einer Story zu erfahren.

    Beispiele für Onepager:

    Für einige unserer Kunden haben wir bereits Onepager umgesetzt, zum Beispiel:

    Auch unsere eigene Startseite ist im Stil eines Onepagers gestaltet: www.mosaiq.com

    Wäre ein Onepager auch für Ihr Projekt das Richtige?

    Wir beraten Sie gern ausführlich zu Vor- und Nachteilen und finden mit Ihnen gemeinsam die perfekte Lösung für Ihre Aufgabe!

    > Kontakt aufnehmen

    Mehr zum Thema: Kampagnen, Microsites


    Influencer Marketing – Segen oder Fluch?

    Gemessen an Traditionsberufen wie Lehrer/in oder Polizist/in gibt es Influencer noch nicht wirklich lang – dennoch sind sie mittlerweile in aller Munde und sorgen für große Aufmerksamkeit. Die einen lieben sie, die anderen hassen sie. Ein gesundes Mittelmaß scheint es nicht zu geben. Oder?

    Was steckt hinter dem Beruf?

    Gerade auf Instagram tummeln sich immer mehr Influencer, die Zahl nimmt immer weiter zu. Eine Ausbildung braucht man für den Beruf nicht und es gibt auch keine fest vorgegebene Followeranzahl die man erreichen muss, um sich selbst Influencer nennen zu können. Fakt ist jedoch auch, dass der Markt eine gewisse Sättigung spürt. Die Nischen werden immer kleiner und heute ist es bei weitem nicht mehr so einfach wie noch vor ein paar Jahren, mit seinen Inhalten ein großes und vor allem kaufstarkes Publikum zu erreichen. Durch die zahlreichen Reality-TV-Formate werden jedes Jahr zahlreiche neue Influencer bekannt, die mal mehr und mal weniger erfolgreich sind.

    Gehören mit zu den erfolgreichsten deutschen Influencern: Die Stuttgarter Zwillinge Lisa und Lena.
    Gehören mit zu den erfolgreichsten deutschen Influencern: Die Stuttgarter Zwillinge Lisa und Lena.

    Für was können Influencer werben?

    Kurz gesagt: für alles! Bei der Auswahl des richtigen Influencers für die eigene Marke sollten allerdings zwei wesentliche Fragen berücksichtigt werden.

    Gehören die Follower des Influencers zur Marken-Zielgruppe?
    Und ist es authentisch, wenn der Follower für mein Produkt wirbt?

    Eine 20-jährige Influencerin, die auf ihrem Kanal hauptsächlich über Mode und Beauty berichtet, wäre als Werbegesicht einer Versicherung beispielsweise eher ungeeignet. Ein Reiseblogger, der gerne viel in der Natur unterwegs ist, wäre hingegen ein gutes Werbegesicht für eine Marke, die Zelte oder anderen Campingbedarf verkauft.

    Braucht man das jetzt oder nicht?

    Social Media bestimmt unseren Alltag immer mehr und gerade die jüngeren Generationen können sich ein Leben ohne Instagram & Co. gar nicht mehr vorstellen. Nach einer Auswertung des statistischen Bundesamtes nutzten im vergangenen Jahr 89% der 16-24-Jährigen soziale Netzwerke zur privaten Kommunikation. (Quelle: destatis)

    Ende 2020 hat Instagram Zahlen zur weltweiten Nutzung mitgeteilt:

  • Mehr als eine Milliarde aktive Konten weltweit
  • Über 500 Millionen nutzen Instagram Stories täglich
  • Mehr als 90% der Nutzer folgen einem Unternehmen auf Instagram
  • 180 Millionen aktive Unternehmensaccounts gibt es auf Instagram

    Betrachtet man die Zahlen, ist es nur logisch, dass Instagram mittlerweile auch als Werbeplattform fungiert. Influencer sind ein Teil dieser Strategie geworden und helfen dabei, Inhalte und Produkte bekannt zu machen.

    Influencer als Vorbilder?

    Viele folgen zahlreichen Influencern und sehen in ihnen auch durchaus Vorbilder. Und hier liegt auch ein ernstzunehmendes Problem, da sich manche Influencer dieser Vorbildfunktion nicht wirklich bewusst sind – ob wissentlich oder unwissentlich. Eine der ersten und nach wie vor erfolgreichsten Influencern ist Bianca Claßen, besser bekannt als Bibi. Auf Instagram folgen der jungen Frau knapp 8 Millionen Menschen und auch auf YouTube ist ihr Kanal sehr beliebt. Da ihre Follower größtenteils minderjährig sind, musste sie schon oft Kritik einstecken, da die beworbenen Produkte auf ihrem Kanal das Budget ihrer Zielgruppe bei weitem sprengen. (Quelle: praxistipps.focus.de)

    Umfragen im Netz zeichnen eine Gratwanderung beim Influencer Marketing nach. So geben vor allem die jungen Zielgruppen an, in den letzte 12 Monaten ein Produkt gekauft zu haben, dass ihnen von Influencern präsentiert wurde. Gleichzeitig haben Influencer im Allgemeinen keinen guten Ruf und viele User sind der Meinung, dass die Influencer den Nutzen der Produkte die sie bewerben, nicht hinterfragen und zu viel Werbung machen. (Quelle: horizont.net)

    Sinnfluencer – die Lösung?

    Dass man als Influencer auch mit wichtigen Themen wie Nachhaltigkeit oder Politik viele Menschen erreichen kann, beweisen die sogenannten Sinnfluencer. Auf ihren Kanälen gibt es keine Werbung für Make-up-Produkte oder Sportbekleidung, sondern es geht um Themen wie die Klimakrise, Rassismus oder Gleichberechtigung. Beispiel Louisa Dallert: Der Sinnfluencerin folgen mittlerweile über 450.000 Menschen auf Instagram. Sie engagiert sich gesellschaftlich und wenn es Werbung auf ihrem Kanal gibt, dann für ein Fairphone, das dank austauschbarer Module länger hält.

    Dem Instagram Account von Luisa Dallert folgen über 460.000 User.
    Dem Instagram Account von Luisa Dallert folgen über 460.000 User.

    Fazit

    Man kann zusammenfassend sagen, dass es durchaus Menschen gibt, die mit Influencer Marketing abgeholt und zum Produktkauf angeregt werden. Dreh- und Angelpunkt ist die geschickte Platzierung, denn allzu offensive und plumpe Werbung schreckt eher ab. Da es im Netzt zahlreiche Seiten gibt, die extrem schlechte Influencer Werbung publik machen, wollen wir ein positives Beispiel hervorheben.

    Zum Weltfrauentag 2018 kreierte die Parfümeriekette Douglas gemeinsam mit drei bekannten Beauty-Influencerinnen eine „Kiss-Kollektion“. Fast 50% der Bestellungen im Online-Shop kamen über einen Link der Influencerinnen und sogar die Filialbesuche stiegen in der Kooperationszeit um 10 % an. Ein voller Erfolg für Douglas aber natürlich auch, weil die Auswahl der passenden Influencer gut durchdacht war.

  • Battle of the tools – XD vs. Figma

    Seit der Veröffentlichung von Adobe XD und Figma im Jahr 2016, wurde es für den modernen UX-Designer nicht leichter, sich für das beste Design-Tool zu entscheiden. Mittlerweile gibt es mit Figma, Adobe XD, InVision und Sketch vier große Player im Prototyping- und Design-Tool Wettbewerb. Bei diesem kurzen Vergleich beschränken wir uns auf Figma und XD.

    Vorstellung der Design Softwares

    Figma


    Figma ist ein cloudbasiertes Design-Tool, das komplett über den Browser läuft. Es bietet Lösungen für UI & UX Design, Prototyping, Grafik Design und Wireframing. Zusätzlich gibt es noch diverse Offline-Features für Windows, macOS und Mobile Endgeräte. Das Preismodell erstreckt sich über 3 unterschiedliche Pakete: Starter (kostenlos), Professional (12 $ /Monat) und Organization (45 $ /Monat). Je nach Paket stehen dem Nutzer oder der Organisation mehr Funktionen zur Verfügung.

    Die Kernfunktionen

    Zu den Kernfunktionen von Figma zählen Browser und Desktop Support, Cloud-basiertes Arbeiten, Multi-Plugin Support, sowie Figma Mirror – eine App, die eine Vorschau der Designs auf dem Smartphone ermöglicht. Das Hauptmerk legt Figma jedoch auf das kollaborative Arbeiten in Echtzeit. Dies wird durch folgende Funktionen ermöglicht:

  • Kommentieren: Kommentare können an der betroffenen Stelle hinterlassen und Personen getaggt und informiert werden.
  • Multi-People Editing: Mehrere Nutzer können gleichzeitig in derselben Datei arbeiten.
  • Copywriting: Externe Copywriter oder Content Creator können in Echtzeit Inhalte erstellen.
  • Plattform Unabhängigkeit: durch browserbasiertes Arbeiten, spielt das Betriebssystem kein Rolle.
  • Vor- und Nachteile von Figma

    Vorteile:

  • Figma bietet ausgereiftes kollaboratives Arbeiten in Echtzeit. Kein anderes Designtool kann hier wirklich mithalten.
  • Dateien können einfach und schnell geteilt werden, ohne, dass diese überhaupt exportiert und importiert werden müssen.
  • Das cloud-basierte Arbeiten verschafft eine Unabhängigkeit von Betriebssystemen und ermöglicht so den Zugriff für jedermann.
  • Dem Nutzer steht eine riesige Bibliothek von Erweiterungen zur Verfügung.
  • Alles in einem Tool. Mit Figma sind keine weiteren Design-Tools nötig, da es für alles eine Lösung anbietet.
  • Nachteile:

  • Eine Internetverbindung ist unabdingbar. Nutzer müssen also immer „online“ sein um mit Figma zu arbeiten.
  • Es werden mindestens 4 GB RAM und eine Grafik-Karte mit der Kapazität von Intel HD 3000 oder mehr benötigt.
  • Durch lokale Caches, kann es dazu kommen, dass der Nutzer nicht den aktuellen Stand sieht.
  • Dem Nutzer ist es nicht möglich globale Farben festzulegen, wodurch Konsistenz im Design verloren gehen kann.
  • Adobe XD


    XD ist ein vektorbasiertes Design-Tool vom Unternehmen Adobe Inc., welches Adobe Photoshop als Programm zum Entwurf von grafischen Oberflächen ablöst. Auch XD bietet für die ganze Design-, Konzept- und Prototyping- Palette Lösungen an. Erhältlich ist das Design-Tool für Windows und macOS und bietet ähnlich zu Figma eine Mobile-App für die Vorschau von mobilen Designs. Nutzer müssen sich zwischen drei Abo-Varianten entscheiden um XD zu verwenden: Starter-Abo, für den privaten Gebrauch (kostenlos); Einzelprodukt-Abo, für Einzelanwender und kleine Teams (11,89 € /Monat) oder die ganze Creative Cloud, mit allen Programmen von Adobe (59,49 € /Monat).

    Kernfunktionen

    Zu Adobe XD’s Kernfunktionen gehören Web, Desktop und Mobile Support, Offline Co-Editing, Drag and Drop Artboard Guides und Multi-App Integration. Den Fokus legt XD auf global verwendbare Komponenten und das Prototyping. Das Besondere am Prototyping mit XD sind Features wie Stimmen- und Sprach- Interaktionen sowie „Auto Animation“.

    Vor- und Nachteile von XD

    Vorteile:

  • XD besticht mit Zuverlässigkeit und einer ausgeklügelten Infrastruktur.
  • Bearbeiten von wiederverwendbaren Elementen und das responsive Skalieren von Gruppen und Objekten vereinfachen die Arbeit.
  • Interaktive Prototypen machen Produkte schon in der Designphase erlebbar und eignen sich für fortgeschrittene Usability Tests.
  • Nutzer die mit Adobe Programmen vertraut sind, haben es einfach sich in XD einzuarbeiten
  • Cloud-Speicher Funktion und cloud-basierte Echtzeit Kollaboration.
  • Einfaches exportieren von Designs und von Assets
  • Nachteile:

  • Nutzer sind teilweise eingeschränkt beim Erstellen und Bearbeiten von Formen
  • Keine Bildbearbeitungs-Funktionen, sodass diese extern bearbeitet werden müssen
  • Ständige Updates und Upgrades beeinflussen die User Experience zum Teil negativ.
  • Die freie Variante von XD bietet nur eine sehr limitierte Funktionalität des Features kollaboratives Arbeiten.
  • Fazit

    Ein klares Ergebnis, welches Tool am besten ist, lässt sich nicht so einfach bestimmen. Letzten Endes kommt es auf die persönlichen Präferenzen an: Legt man eine höhere Gewichtung auf plattformunabhängiges & kollaboratives Arbeiten, so empfiehlt sich eher Figma als das designierte Programm zu wählen. Als Abonnent der Adobe Creative Cloud ist XD ein sehr gutes ergänzendes Tool in Zusammenhang mit beispielsweise Photoshop und Illustrator. Damit bietet sich eine solide Gesamtlösung für alle Anwendungsfälle. Figma ist das ausgereiftere Tool mit wenigen Vorteilen gegenüber XD, wobei diese Vorteile keine Auswirkungen auf das Endprodukt haben. Als Abonnent der Creative Cloud, die XD bereits beinhaltet, sind die Vorteile von Figma nicht weitreichend genug, um einen Wechsel anzustreben.

    Buttons – Gestaltung, Platzierung und Nutzen

    Wenn es um die Gestaltung eines digitalen Produktes geht, sind Buttons nicht weg zu denken. Buttons ermöglichen Nutzern Aktionen auszuführen und Entscheidungen zu treffen. So einfach sie auch aussehen mögen: Es gibt bestimmte Regeln, die befolgt werden sollten, um ein Button-Konzept sinnvoll zu gestalten.

    Die Auflösung finden Sie am Ende des Artikels.

    Button Varianten und ihre Hierarchie – nicht jeder ist gleich

    Für eine gute User Experience haben Webseiten oder Apps im besten Fall mehr als eine Button-Variante. Anhand der verschiedenen Button-Varianten kann der Nutzer unterscheiden, was wichtig ist und was nicht. Dabei kann zusätzlich zwischen den folgenden Buttons unterschieden werden:

    Call-to-action

    Ein CTA-Button hat die höchste Priorität und sollte dementsprechend dargestellt werden. In den meisten Fällen fordert dieser Button den Nutzer auf sich „anzumelden“, „jetzt zu kaufen“ oder zu „registrieren“. CTA-Buttons werden im Grunde dort eingesetzt, wo möglichst viele Klicks generiert werden sollen.

    Primär-Button

    Buttons mit einer hohen Priorität können genauso wie Call-to-action-Buttons gestaltet sein, aber auch weniger auffällig. Jedoch sollten sie stärker ins Auge fallen als ein Sekundär- oder Tertiär-Button. Primär-Buttons sind ein wichtiges Element, denn sie helfen dem Nutzer beispielsweise Vorgänge auszuführen, wie „Nächster Schritt“, „Speichern“, „Starten“.

    Sekundär-Button

    Sekundäre Buttons sind in der Größe, Farbe und Form weniger auffällig gestaltet. Sie haben meist eine Alternativ-Funktion, wie beispielsweise „Abbrechen“ oder „Zurück“. Sekundär-Buttons werden oft neben Primär-Buttons platziert und bilden dadurch die alternative Funktion.

    Tertiär-Button

    Tertiäre Buttons werden in der Regel kleiner gestaltet, sie tauchen aber oft in Verbindung mit Icons auf, die die Funktion unterstreichen. Mit diesen Buttons lassen sich beispielsweise Dinge „Bearbeiten“, „Löschen“ oder „Hinzufügen“.

    Button-Größe – wie groß darf er sein?

    Ein Button sollte so groß sein, dass er auffällig genug ist und zugleich mit dem Mauscursor oder dem Finger gut getroffen werden kann. Dabei ist Fitts‘ Gesetz zu beachten. Es besagt, dass Elemente umso schwerer zu treffen sind, je weiter weg und je kleiner sie sind. Und je wichtiger Buttons sind, desto größer und auffälliger sollten sie sein. Diese Zusammenhänge sind sehr einfach und leicht nachvollziehbar – und doch werden sie in vielen Anwendungen ignoriert.
    Die Richtlinien der Desktop-Betriebssystem-Hersteller sehen für Buttons eine Höhe zwischen 21 und 23 Pixeln vor – als Minimalgröße.
    Bei Touch-Bedienungen werden deutlich größere Buttons benötigt. Die Fakten sind eigentlich klar: Studien zeigen, dass der durchschnittliche menschliche Zeigefinger 16 bis 22 Millimeter breit ist – manchmal auch deutlich breiter. Die Fingerspitze, mit der wir Touchscreens bedienen, ist zwischen 8 und 10 Millimetern breit.

    Google Vorgaben für Buttongrößen im Material Design

    Platzierung – wo der Nutzer sie erwartet

    Buttons sollten im besten Fall dort platziert werden, wo der Nutzer sie am einfachsten findet oder dort wo er sie erwartet. Der Nutzer sollte nicht nach Buttons suchen müssen. Buttons sollten nur für wirklich wichtige Aktionen verwendet werden. Es sollte vermieden werden zu viele Buttons einzusetzen. Sobald der Nutzer zu viele Möglichkeiten hat, wird ihm die Entscheidung schwerfallen. Im schlimmsten Fall entscheidet er sich am Ende gar nicht. Inhalte und Button sollten im besten Fall in einer Reihenfolge platziert werden, die so auch in einem persönlichen Gespräch stattfinden könnte.

    Zustände – Button ist nicht gleich Button

    Ein Button kann folgende Zustände haben:

  • Default: Dieser Zustand zeigt an, ob der Button aktiv oder inaktiv ist. Das bedeutet, ob er geklickt werden kann oder nicht.
  • Focus: Der Button wurde mithilfe der Tastatur hervorgehoben.
  • Hover: Fährt der Nutzer mit der Maus über den Button, verändert sich zum Beispiel dessen Farbe. So wird signalisiert, dass der Button klickbar ist.
  • Pressed/Active: Ein Zustand, der angezeigt wird, wenn der Nutzer auf den Button klickt und hält (pressed) oder geklickt hat (active).
  • Progress/Load: Dieser Status wird notwendig, wenn die Aktion nicht unmittelbar ausgeführt wird, sondern in Arbeit ist oder eine gewisse Ladezeit benötigt.
  • Disabled: Dieser Zustand zeigt dem Nutzer, dass der Button inaktiv ist. Dieser kann aktiviert werden, wenn beispielsweise bestimmte Voraussetzungen erfüllt werden.
  • Label – was machen Buttons?

    Ein gutes Button-Label verrät dem Nutzer, was er mit dem Klickt auslöst. Wichtig hierbei ist es, den Text möglichst kurz zu halten. Buttons mit langem Text verlieren an Wirkung. Begriffe wie „Ok“, „Ja“ und „Nein“ sind oftmals irreführend und nicht aussagekräftig. Daher sollten optimalerweise Verben wie beispielsweise „Speichern“ oder „Bearbeiten“ verwendet werden.

    Fazit

    Zusammenfassend lässt sich sagen, dass der Nutzer intuitiv handeln sollte, ohne lange darüber nachdenken zu müssen. Buttons sollten so gestaltet werden, dass der Nutzer sofort erkennt, was klickbar ist und zu welchem Zweck.

    Auflösung des A-B-Testings:

    Richtig ist Antwort B. Ein häufiger Fehler der gemacht wird, ist den Call-to-action Button als erstes zu platzieren, da dieser als erstes wahrgenommen werden soll. Doch das ist in diesem Fall nicht notwendig, da der Button bereits visuell hervorgehoben ist. Ebenso sollten Inhalte und Buttons so angeordnet sein, dass sie den Verlauf eins persönlichen Gesprächs wiedergeben.