Schlagwort-Archiv: UX

Icons – kleine Symbole mit großer Wirkung

Icons sind heute nicht mehr wegzudenken und daher eine weitverbreitete und beliebte Möglichkeit um eine Website aufzuwerten. Doch nicht nur im Internet sind Icons zu finden – auch im Alltag wie beispielsweise am Fahrkarten- oder Geldautomaten trifft man auf Icons.

Was ist ein Icon?

Das sind kleine Symbole, die eine Aussage vermitteln und in jeder Sprache und Kultur verständlich sind. Im besten Fall sollten sie ohne zusätzlichen Text verstanden werden können.

Warum verwendet man sie?

Das Hauptziel  ist, dass Nutzer:innen effizient Inhalte erkennen und verarbeiten. Wenn Nutzer:innen auf dem Bildschirm die Inhalte betrachten, erkennen sie das Icon schneller als den umgebenden Text. Icons müssen Texte unterstützen und nicht ersetzen. Sie lockern textlichen Inhalt auf und haben daher den psychologischen Zweck wie ein Zeilenumbruch – das Auge wandert automatisch zum Icon.

Vorteile von Icons

Es gibt viele Vorteile, wenn Sie Icons in Ihrem User Interface nutzen:

  • sind mit einem kurzen Blick schnell zu verstehen
  • werden international verstanden
  • optisch ansprechend und können Designs verbessern
  • lockern Textwüsten auf
  • sind platzsparend

Welche Arten gibt es?

Vor einigen Jahren waren sie noch sehr detailliert und realistisch gestaltet, teilweise auch bunt eingefärbt. Heutzutage sind sie in den meisten Fällen flach und reduzierter gestaltet. Mittlerweile haben sich zwei Arten etabliert: Outline und Filled Icons.

Outline Icons bestehen aus Konturen. Diese Art zeichnet sich durch einen höheren Detailgrad aus als Filled Icons. Sie nehmen weniger Raum ein und wirken daher filigraner.

Jedoch gibt es bei Outline Icons leider auch Skalierungsprobleme. Skalierte Icons weisen eine stärkere Strichstärke auf, was zu einem ästhetischen Bruch führt. 

Daher sollten Sie beim Verwenden von Outline Icons darauf achten, dass jedes Icon beim Skalieren dieselbe Strichstärke hat, um ein einheitliches und harmonisches Gesamtbild zu erhalten.

Filled Icons sind einfarbige Symbole, die durch eine Fläche entstehen. Diese Icons nehmen mehr Raum ein als ein Outline Icon und haben oftmals weniger Details.

 

Filled Icons eignen sich gut für Online Anwendungen, die wenige, aber dennoch plakative Icons benötigen. Der Vorteiler dieser Art ist, dass sie keinem Verhältnisfaktor unterliegen. Das bedeutet, sie können beliebig skaliert werden, ohne dass es einen optischen Bruch gibt. Daher reicht es in den meisten Fällen aus, die Größe vornerein zu definieren.

Outline oder Filled?

Es gibt Untersuchungen, welcher Stil von Nutzer:innen schneller erfasst wird. Einen klaren Gewinner gab es dabei leider nicht.

Zusammenfassend lässt sich aber sagen, dass ein gut gestaltetes Icon, das mit seiner Form die dahinterliegende Funktion deutlich repräsentiert, schneller erkannt wird als solche, bei denen das nicht der Fall ist. Dabei spielt es keine Rolle, welchen Stil das Icon hat.

Wie wähle ich Icons aus?

Sie sollten bei der Auswahl oder Gestaltung konsistent sein und nicht zwischen Outline und Filled hin und her wechseln. Denn das erschwert Nutzer:innen das Erfassen der Inhalte.

 

 

Daher gilt für beide Arten: Wenn möglich, wählen Sie ein Icon, das die tatsächliche Funktion darstellt und sich nicht nur symbolisch darauf bezieht. So wird die Abbildung mit dem Taschenrechner-Icon links schneller erfasst als das rechte.

Tipps bei der Auswahl und Gestaltung

Auf Bedeutung achten

Icons mit missverständlicher Bedeutung sollten Sie vermeiden. Müssen Nutzer:innen überlegen, was das Icon zu bedeuten hat, ist der Einsatz des Icons nicht hilfreich.

Auf Details verzichten

Icons mit grafischen Details sollten Sie reduzieren. Idealerweise halten Sie sie so einfach wie möglich. Eine schnelle Erkennbarkeit ist in diesem Fall zielführender als das detaillierte, naturgetreue Abbild. Nichtsdestotrotz sollen sich die Icons ins Gesamtbild einfügen und einheitlich gestaltet sein. Vermeiden Sie 3D Effekte, 3D-Perspektiven und Schlagschatten. Je mehr Effekte vorhanden sind, desto mehr Zeit und Anstrengung für die Interpretation brauchen Nutzer:innen.

Links ein Icon mit 3D-Perspektive und rechts ohne

 

 

 

 

Einheitliche Gestaltung

Wie bereits erwähnt, sollten Sie vermeiden, Stile miteinander zu vermischen. Wechseln Sie nicht zwischen Outline und Filled Icons hin und her.

Symbolik der Aktionen

Achten Sie darauf, dass Sie ein Objekt verwenden, das Nutzer:innen kennen und mit einer entsprechenden Aktion verbinden können. Beispiel: Beim Versenden einer Nachricht kann das mit einem Papierflieger symbolisiert werden. Das Blatt Papier steht für die geschrieben Nachricht und die Form des Flugzeuges repräsentiert die Aktion des Versendens.

Komplexe Icons mit Text-Label

Icons mit Text-Labels erklären die Funktion klarer. Das hilft vor allem bei komplexen Funktionen, die nicht bildlich dargestellt werden können.

Quelle: Spotify

Fazit

Icons sind ein einfaches, aber effektives Mittel, um eine Website intuitiv und einprägsam zu gestalten. Im Großen und Ganzen sollten sie selbsterklärend und ergänzend sein. Berücksichtigen Sie dabei vor allem diese vier wichtigen Faktoren: Größe, Farbe, Platzierung und Konsistenz.

Was macht eine Landingpage erfolgreich?

Erfolgreiche Landingpages sind besonders wichtig im Online-Marketing und mittlerweile fast genauso wichtig, wie eine Unternehmens-Webseite selbst. Doch was ist eigentlich eine Landingpage? Was zeichnet sie aus? Und was macht Landingpages erfolgreich? Diesen Fragen wollen wir hier nachgehen.

Was ist eine Landingpage?

Der Name verrät es eigentlich schon: eine Landingpage ist eine beliebige Webseite, auf der Nutzer:innen durch eine Aktion landen. Es gibt also eine Vorgeschichte und eine konkrete Absicht, was Nutzer:innen auf dieser Landingpage tun möchten.

Woher kommen Nutzer:innen?

Häufig kommen Nutzer:innen von externen Touchpoints auf die Landingpage. Typische Ausgangspunkte sind:

  • Google AdWords
  • Facebook Ads
  • Social Media Postings
  • Suchmaschinen
  • Gewinnspiele
  • Print-Kampagnen
  • Externe Webseiten (Blogs, Newsportale, Vergleichsportale, etc.)
  • Eigene URLs

Landingpages können auch beliebige Unterseiten von einer Webseite sein. Damit ist aber weniger die Homepage, also die Startseite der Webseite gemeint. Diese ist als Landingpage zu allgemein gehalten. Auf der Homepage werden oft viele verschiedene Zielgruppen angesprochen und viele unterschiedliche Inhalte dargestellt. Das besondere an Landingpages ist, dass häufig nur eine Zielgruppe angesprochen wird und auch nur eine bestimmte Aktion oder ein Ziel ausgeführt werden soll.

Welche Ziele können Landingpages haben?

Die Ziele können unterschiedlich sein. Es muss nicht immer gleich eine Bestellung sein. Häufige Ziele sind:

  • Whitepaper Download
  • Anmeldung zu einem Event (Webinar, Schulung etc.)
  • Newsletter Anmeldung
  • Kontaktaufnahme durch Kontaktformular
  • Telefonanrufe für Erstberatung, telefonische Bestellung etc.
  • Bestellung eines Produktes

Wichtig ist bei den Zielen darauf zu achten, an welcher Stelle der Customer Journey sich Nutzer:innen befinden. Äußerst selten wird bei einem ersten Kontakt gleich ein Produkt bestellt.  Nutzer:innen möchten sich lieber zuerst informieren und abwägen, bevor ein teures Produkt gekauft wird.

Ein typischer Anwendungsfall für eine Landingpage

Die typischen Landingpages sind Seiten, die auf eine Anzeigen-Kampagne folgen. Google hat mit seinen AdWords die Wichtigkeit von Landingpages in den Fokus gerückt. Eine typische Anwendung ist beispielsweise die folgende: Sie erstellen eine Kampagne zu einem bestimmten Keyword und verlinken diese AdWords Kampagne auf die dafür optimierte Landingpage. Das kann eine Unterseite Ihrer Unternehmens-Webseite sein. Wenn die Kampagne jedoch auf ein bestimmtes Produkt oder ein Thema aufbaut und eine besondere Zielgruppe ansprechen soll, kommen Sie mit einer Unterseite schnell an Ihre Grenzen.

Konkretes Beispiel einer Landingpage:  

Sie verkaufen Schuhe und möchten den Online-Kanal stärker ausbauen. In Ihrem Schuhladen haben Sie sich in den letzten Jahren besonders in dem Bereich Kinderschuhe als Experte positioniert.

Die Unternehmens-Webseite spricht alle Zielgruppen gleichermaßen an und soll das breite Produkt-Spektrum zeigen.

Wenn Sie nun eine Anzeigen-Kampagne zu dem Thema „Perfekt sitzende Kinder-Winterstiefel“ schalten, macht es Sinn, für die Landingpage eine eigene Bild- und Farbsprache zu entwickeln, die speziell Eltern und Kinder in der Winterzeit anspricht. Selbst die Headline-Schrift kann dabei das Thema emotional herausstellen. Das macht deutlich, dass Sie mit einer eigenständigen Landingpage viel freier in der Gestaltung sind.

Zudem kommt es auf einen überzeugenden Inhalt an. Es ist wichtig, dass sie sich inhaltlich auf Ihr Spitzenprodukt für diese Kampagne konzentrieren. Positionieren Sie sich als Experte und erklären, was beim Kauf von Kinder-Winterstiefeln besonders wichtig ist und was bei den meisten Kinderstiefeln für die optimale Passform fehlt. Stellen Sie die Vorteile Ihres Produktes heraus und unterstützen Sie Ihre Aussage durch vertrauensfördernde Testimonials oder Kunden-Bewertungen.

Beschränken Sie die Landingpage bewusst auf ein Produkt, damit die Nutzer:innen im Verkaufsprozess nicht abgelenkt werden von anderen Produkten. Am Ende der Landingpage steht eine Aktion im Mittelpunkt, die Nutzer:innen keineswegs übersehen können: Der Kauf dieses Winterstiefels.

Je überzeugender Ihre Argumentationskette aufgebaut ist und je ansprechender Ihr emotionales Design dargestellt ist, desto höher werden Ihre Verkaufszahlen und der Erfolg der Landingpage sein. Header und Footer können ganz individuell gestaltet sein, oftmals auch ganz reduziert mit Logo im Header und Onlinekauf Details und Kontaktinformationen im Footer.

Das zeichnet eine Landingpage aus:

  • Nutzer:innen landen durch eine konkrete Aktion auf einer Landingpage.
  • Es gibt einen externen Auslöser, eine Vorgeschichte
  • Es gibt ein konkretes Ziel, was Nutzer:innen auf der Landingpage verfolgen
  • Die Zielgruppe ist eingegrenzt und konkreter
  • Oft sind Header und manchmal auch Footer reduziert
  • Meist entfällt die Navigation, um vom Ziel nicht abzulenken

Der Weg zu einer erfolgreichen Landingpage

Da Landingpages im Online-Marketing eine große Wirkung haben, werden sie häufig als eigene Maßnahme betrachtet und erhalten ein abgewandeltes Design im Vergleich zur Unternehmens-Webseite. Durch Optimierungen im Design und im Inhalt kann der Erfolg einer Landingpage maximiert werden.

Das macht eine Landingpage erfolgreich:

  • Reduzierter Inhalt, der sich auf eine Lösung des Anliegens konzentriert
  • Bewerben von einem Produkt, einer Aktion oder einer Kontaktaufnahme
  • Keine Ablenkung durch andere Produktgruppen oder weitere Aktionen
  • Ein individuelles Design, das perfekt abgestimmt ist auf die Zielgruppe und das Thema
  • Eine eigene Bildsprache, die emotional positiv heraussticht
  • eigene Headline-Schrift, die das Thema emotional unterstreicht
  • Eine überzeugende Argumentationskette, die in aussagekräftigen Headlines schnell vermittelt wird
  • hochwertige und auffallende Microinteractions
  • Vertrauensbildende Kundenstimmen oder Bewertungen
  • Ein deutlicher Call-to-Action am Ende der Landingpage, der von Nutzer:innen mit Überzeugung geklickt wird.

Gute Beispiele für Landingpages

Jede Regel für Landingpages kann natürlich gebrochen werden. Wichtig ist allein, dass die Landingpage Nutzer:innen überzeugt.

Airbnb

Quelle: airbnb.de

Airbnb schafft es mit seiner Landingpage neuen Gastgebern die Vorteile und Freude zu zeigen, wenn sie eine Unterkunft bei Airbnb teilen. Vor allem die persönliche Nähe zu weltweiten Gastgebern wird deutlich. Dies wird besonders durch die Bildwelt und die Handschrift vermittelt. Die richtigen Fragen im interaktiven Formular zeigen auf, wie einfach der Einstieg ist. Zudem bietet die Plattform den Interessenten viel Unterstützung  an und macht damit den Einstieg so leicht wie möglich. Der Call-to-Action ist als Sticky-Button jederzeit präsent und sticht als einziger Button mit der roten Farbe heraus. Die Navigation im Header entfällt. Dafür sind in der Footer-Navigation hilfreiche weiterführende Links aufgelistet. 

Bugatti

Quelle: bugatti-smartwatches.com

Mit der Smartwatch Landingpage schafft es Bugatti Nutzer:innen in die Luxuswelt der Automarke eintauchen zu lassen. Zudem werden währenddessen alle Vorteile der Luxus-Smartwatch aufgeführt. Die Landingpage ist etwas lang. Man kennt diese Fülle an Inhalten bereits von Produktpräsentationen der Marke Apple oder Samsung. Es scheint fast je teurer das Produkt umso länger der Argumentationsaufbau, damit am Ende keine Zweifel mehr bestehen. Die Landingpage glänzt mit zahlreichen Scrolleffekten und Microinteractions, die den langen Inhalt auf interessante Weise hervorheben. Zudem spielen 3D und selbstablaufende Videos eine große Rolle. Im Footer findet man einen gigantischer Call-to-Action Button zu einem externen Shop, in dem man die Uhr kaufen kann.

Samsung

Quelle: samsung.com

Die Samsung Landingpage toppt die Länge der Webseite bei weitem. Aber auch hier gibt es einige gute Ideen. Zum einen kann die Landingpage durch eine Sticky-Anker-Navigation angesteuert werden. Pre-Order ist der präsenteste Button, der immer oben rechts platziert ist. Die gesamte Navigation der Samsung Webseite ist unter einem Hamburger Icon oben rechts versteckt und lenkt somit Nutzer:innen nicht ab.

Lufthansa 

Quelle: miles-and-more-kreditkarte.com

Die Landingpage der Lufthansa für die Miles and More Kreditkarten stellt gleich zwei Produkte gleichzeitig vor. Durch den Vergleich der Gold Credit Card mit der Blue Credit Card werden die Vorteile des teuren Produktes deutlich. Zudem kann die Zielgruppe immer noch das Einstiegsprodukt wählen, falls sie noch nicht ganz überzeugt ist. Das schöne an der Landingpage sind die zwei Sticky-Warenkorb-Buttons in der Mitte der Seite. Somit bleibt der Call-to-Action präsent im Fokus.

Fazit

Zusammenfassend gibt es vier Faktoren die für die Erstellung einer guten Landingpage wichtig sind:

  • Reduzierung auf eine Aktion und eine konkrete Zielgruppe
  • Überzeugender Inhalt als Argumentationskette aufgebaut
  • Ein emotionales Design das sich von den Wettbewerbern abhebt
  • Eine klare Nutzerführung mit einem Call-to-Action am Ende

Wenn Sie selbst eine Landingpage erstellen wollen, überlegen Sie sich, welche Unterseiten Ihrer Unternehmensseite besonders häufig besucht werden. Unabhängig von der Webseite sollten Sie zudem ermitteln, welche Produkte und Themen besonders nützlich für Interessenten sind, in denen Sie Nutzer:innen eine Lösung bieten können.

Benötigen Sie Hilfe bei der Umsetzung einer Landingpage? Ob für Inhalt, Konzept, Design oder technische Umsetzung – wir unterstützen Sie gerne! 

Vergleich der Websites aller Parteien im Bundestag

Der große Parteien Website Check 2021

1. Worum geht es beim Parteien Website Check?

Die Bundestagswahl 2021 steht vor der Tür. Die wichtigste Frage dabei natürlich: Wer wird Nachfolger:in von Angela Merkel? Die CDU-Politikerin ist seit 2005 Amt – damals waren Smartphones, Websites und mobiles Internet bei weitem noch nicht so verbreitet wie heute. Der Kampf um Wählerstimmen spielt sich nicht nur bei Veranstaltungen und auf Wahlplakaten ab, sondern natürlich auch im Internet. Eine aussagekräftige Website ist daher das A und O. Wir haben die Websites der Parteien im Bundestag auf Herz und Nieren geprüft und in folgenden Bereichen bewertet:

  • Navigation
  • Conversion
  • Zielgruppen
  • Design
  • Joy of Use
  • Inhalt

Bei der möglichst sachlichen Analyse ging es nicht um persönliche Präferenzen im Design, sondern darum, wie die einzelnen Bereiche für die Partei-Website und Nutzer:innen funktionieren. Jede einzelne Kategorie wurden mit Punkten von 1-10 bewertet, wobei 10 das Maximum darstellt. So konnte aus User Experience Sicht festgestellt werden, welche Webseiten besser funktionieren als andere.

Unabhängig von der UX-seitigen Prüfung der Webseiten wurden die Seiten auch auf das Thema der Bundestagswahl hin bewertet.
Kommunizieren die Parteien ihre Ziele und Vorhaben deutlich auf den Webseiten?
Werden Nutzer:innen abgeholt mit den Inhalten?
Werden wichtige Informationen verständlich und schnell vermittelt?

All diese Bereiche und Fragen flossen in die Bewertungen der einzelnen Seiten mit ein. Im folgenden fassen wir die Ergebnisse des Parteien Website Check kurz zusammen.

Sie möchten gerne den vollständigen Parteien Website Check als Download erhalten? Dann füllen Sie bitte am Seitenende das Formular aus. Anschließend schicken wir Ihnen den Parteien Website Check 2021 gerne als PDF zu.

2. Die CDU Website

2.1 Die Übersicht

Die Website der CDU
Die Website der CDU

2.2. Navigation

Das Menü ist an sich sinnvoll und kompakt gehalten, allerdings gibt es Abstriche bei der Sichtbarkeit des CDU-Wahlprogramms. Weniger nutzerfreundlich ist auch die Menüführung, da alle Unterseiten der zweiten Menübene nur zufällig erreicht werden können. Minuspunkte gibt es zudem für die Farbwahl des Menüs, da es durch den farbverlauf teilweise schlecht lesbar ist.

2.3 Conversion

Es gibt keinen Newsletter, worüber Nutzer:innen über aktuelle Themen der CDU informiert werden können. Für Anfragen gibt es ein Kontaktformular, dass aber unnötigerweise auf mehrere Schritte aufgeteilt ist und viele Daten abfragt, die in einer Standard-Kontaktanfrage unnötig sind. Das lässt die Kontaktaufnahme komplizierter erscheinen, als sie ist.
Zum Herunterladen von weiteren Informationen werden Downloads auf den Detailseiten am Ende der Seite platziert. Teilweise werden sie auch nur als unterstrichener Text im Fließtext dargestellt, was nicht wirklich zu erkennen ist.

2.4 Zielgruppen

Die Nutzerführung über die Navigation der CDU-Website ist nicht ideal, da nur die erste Menüebene abgebildet ist. Die meiste Navigation passiert über die Artikel, wobei die einzelnen Seiten besser vernetzt sein könnten. Da die klassischen CDU-Wähler tendenziell älter sind, könnte die Website mit der Menge an Inhalten und Bewegtbild eher abschrecken.

2.5 Design

Das Design wirkt modern und durch die vielen Bilder und Videos auch emotional ansprechend. Durch die vielen sich bewegende Elemente ist der erste Eindruck etwas überfordernd. Insgesamt macht das Design einen guten Eindruck, die Startseite lädt dazu ein ins Detail zu gehen. Auf den Detailseiten wird es jedoch schnell langweilig, da Nutzer:innen immer wieder auf dieselben Seiten gelenkt werden und die einzelnen Inhaltsseiten sich nur textlich unterscheiden.
Die Bildsprache der CDU-Website ist im Ganzen betrachtet einheitlich, passen zur Marke und sind im Einklang mit dem Text. Allerdings wirken die Personenportraits sehr steif und unecht.

2.6 Joy of Use

Es gibt interaktive Elemente auf der Website, wie eine Pinnwand und einige Kartenelemente. Das macht die Website spannender. Mehr erklärende Videos im Content wären gut.
Die vielen animierten Elemente machen die CDU-Website lebhafter, sind aber teilweise nicht optimal platziert, sodass sie vom Inhalt ablenken. Es gibt Hover-Effekte und Microinteractions, allerdings nicht bei allen Elementen.

2.7 Inhalt

Alle Inhalte werden schnell geladen, was eine reibungslose Nutzung gewährleistet. Auf der Startseite wird leider nur mit dem Logo wirklich klar, dass es sich um die Website der CDU handelt. Die Inhalte sind aktuell und treffen die Erwartungen an die Seite.

3. Die SPD Website

Die Website der SPD
Die Website der SPD

3.1 Die Übersicht

3.2 Navigation

Das Menü der SPD-Website ist kompakt mit wenigen Hauptmenüpunkten und bietet damit eine schnelle Übersicht. Das Programm steht als vermeintlich wichtigster Punkt an erster Stelle. Leider gibt es auch bei diesem Menü kein Flyout. Entsprechend sind detailliertere Themen über das Menü nicht zu erkennen, sondern erst über die Verteilerseiten. Nutzer:innen müssen eigenständig über die einzelnen Detailseiten zu den einzelnen Themen finden. Das Design der Navigation ist durchschnittlich. Die Navigationspunkte sind auf einer weißen Hintergrundfläche platziert, sodass die Lesbarkeit immer gewährleistet ist.

3.3 Conversion

Es gibt keinen richtigen SPD-Newsletter, um sich auf dem Laufenden zu halten, sondern lediglich einen Telegram-Channel sowie Social-Media-Kanäle.
Es gibt unterschiedliche Kontaktmöglichkeiten und auch ein Formular. Ansprechpartner der SPD werden keine dargestellt, nur der Parteivorstand ganz allgemein. Das Kontaktformular ist durch die vielen fetten Linien etwas unübersichtlich. Die Markierungen der Felder ist sehr verwirrend, da klassischerweise die Pflichtfelder gekennzeichnet werden. Hier ist es jedoch genau andersherum und die optionalen Felder sind gekennzeichnet.

3.4 Zielgruppen

Die Nutzerführung ist mangelhaft, da sich Nutezr:innen nur anhand von Detailseiten weiterklicken können. Ein Flyout oder zumindest eine Übersicht der Detailseiten wäre sinnvoll.
Die typischen Nutzerszenarien sind abgedeckt durch das Parteiprogramm, Mitglied werden, Pressekontakt etc.
Die Zielgruppe findet sich in der Website kaum wieder. Die Gestaltung ist sehr plakativ, allerdings extrem textlastig. Das dürfte keiner Zielgruppe der SPD wirklich gut gefallen.

3.5 Design

Die SPD-Website ist sehr plakativ und an sich optisch auch ansprechend, allerdings ist das Rot zu extrem. Es gibt sehr Bilder, wovon die meisten Olaf Scholz portraitieren. Das Wahlprogramm wird immer wieder prominent hervorgehoben. Das Rot könnte kreativer eingesetzt werden, um die Masse zu vermeiden.
Der erste Eindruck der SPD-Website ist grundsätzlich nicht schlecht, aber leicht überfordernd. Es gibt extrem viele rote Flächen, sehr viele Buttons, dazwischen auch noch Bilder und Text.
Es gibt einige eigene Schwarz-Weiß-Bilder, die sich mit vielen Stockbildern durchmischen. Dadurch wirkt die Bildwelt nicht einheitlich. Zudem sind einige Texte leider viel zu lang.

3.6 Joy of Use

Es gibt einige Scroll-Interaktionen auf der Seite, was die Nutzung insgesamt spannender macht. Durch Popups werden wichtige Inhalte angeteasert, die aber nach mehrmaligem Aufrufen der Seite eher störend sind. Weitere interaktive Elemente oder Microinteractions gibt es nicht.

3.7 Inhalt

Durch das Logo in Bild- und Textform wird direkt klar, dass es um Politik geht. Ansonsten gibt es keinen allgemeinen Einstieg in die SPD, sondern direkt einen Themeneinstieg. Die Übersichtsseiten sind ausgeglichen mit Text und Bild gefüllt. Die Detailseiten jedoch sind geprägt von Textwüsten. Dabei wurden augenscheinlich Print-Dokumente 1:1 ins Web übertragen. Die Inhalte der Seite sind aktuell.

4. Die Grüne Website

Die Website der Grünen
Die Website der Grünen

4.1   Die Übersicht

4.2   Navigation

Das Menü ist reduziert auf wenige Menüpunkte. Das Programm als erster Menüpunkt ist gut platziert. Eine Art CTA stellt der Punkt „Aktiv werden“ dar, da er separiert und hervorgehoben ist. Dieser Punkt steht immer im Vordergrund und sticht durch die Farbgebung hervor.

Auf der Startseite gibt es keinen Slider, dafür ein Headerbereich mit großem Bild und CTA zu Informationen zur Bundestagswahl, sodass Nutzer:innen hier direkt zum wichtigsten Thema abgeholt werden.

4.3   Conversion

Ein direkter Link zur Newsletter-Anmeldung befindet sich klein im Footer. Auf der Startseite der Grünen-Website gibt es zwei Anmeldeformulare – eins für den Wahlkampf und eins für eine Spende. Es werden keine Vorteile für den Newsletter kommuniziert, sondern nur, dass allgemeine Updates zu erwarten sind. Entsprechend können keine individuellen Inhalte ausgespielt werden.

Das Formular ist an sich nutzerfreundlich, durch den Datenschutz-Text allerdings sehr lang. Es gibt leider kein Kontaktformular, sondern nur allgemeine Kontakte mit E-Mails-Adresse, Telefonnummer, Adresse und Fax. Alle einzeln dargestellten Personen sind mit kompletten Kontaktdaten sowie Social-Media-Verlinkungen dargestellt.

4.4   Zielgruppen

Die Nutzerführung geschieht hauptsächlich über die Detailseiten. Diese sind teilweise sehr lang, wodurch die weiterführenden Teaser sehr weit unten auf der Seite sind. Es gibt keine Ankernavigation auf der Seite, um direkt zu bestimmten Themen springen zu können. Auf den Detailseiten werden nicht immer weiterführende Teaser angeboten, sodass Nutzer:innen in Sackgassen landen.

Die tendenziell jüngere Zielgruppe der Grünen kann sich teilweise wiederfinden. Zwar sind die Themenbereiche gut dargestellt, allerdings sollten es deutlich weniger Textwüsten sein, damit die Inhalte schneller überflogen werden können (Bilder, Icons, Stichworte wären gut).

4.5   Design

Die Übersichtsseiten sind gut gestaltet, die Detailseiten optimierungsbedürftig. Das CD der Grünen wurde für die Website modern interpretiert, was insgesamt sehr stimmig wirkt. Der erste Eindruck der Seite ist insgesamt gut, nur das Grün über den Bildern wirkt nicht gesund.

Die Bildsprache ist zum Großteil einheitlich und stimmig mit einem guten Mix aus Illustrationen und Fotografien. Durch diese Mischung wirkt die Seite deutlich jünger. Die Schriftgrößen sind gut gewählt, nur einige Headlines sind zu groß.

4.6   Joy of Use

Es gibt keine interaktiven Elemente. Zumindest ein Kartenmodul zur Ansicht der lokalen Grünen-Parteigruppen wäre nett. Es sind keine Microinteractions vorhanden, aber zumindest fast immer Hovereffekte.

4.7   Inhalt

Beim ersten Blick auf die Seite ist an der Farbe zu vermuten um welche Partei es handelt. Eine richtige „Aufklärung darüber, um welches Thema, welche Partei es sich handelt, gibt es nicht.

Insgesamt gibt es inhaltlich zu viele sehr lange Texte, was sich nicht gut lesen lässt. Diese Texte sind immerhin durch Headlines und Absätze unterteilt. Es gibt einige aktuelle Inhalte wie News und Presseartikel.

5. Die FDP Website

Die Website der FDP
Die Website der FDP

5.1   Die Übersicht

5.2   Navigation

Das Menü hat im Vergleich mehr Hauptmenüpunkte, ist aber trotzdem sehr übersichtlich. Die Hauptmenüpunkte lassen sich nicht klicken, nur die im Flyout stehenden Unterseiten. Das Flyout funktioniert gut und auch die Anzahl der Unterseiten ist weder zu viel noch zu wenig.

Die Menüleiste der FDP-Website ist an bekannter Stelle oben platziert, ebenfalls sticky und hat einen weißen Hintergrund, sodass die Lesbarkeit immer gegeben ist. Es gibt auf den Detailseiten keine Breadcrumb zur Orientierung.  

5.3   Conversion

Die Newsletter-Anmeldung ist per Link im Footer platziert. Zusätzlich dazu gibt es ein großzügig platziertes Formular auf einiges Seiten. Das Formular ist reduziert mit nur einer Pflichtangabe, der E-Mail-Adresse. Wozu die Handynummer abgefragt wird, ist fraglich. Der Datenschutz ist hier nicht anzuhaken, sondern wird automatisch vorausgesetzt.

Es gibt kein Kontaktformular, nur allgemeine Kontaktinformationen mit E-Mails-Adresse und Postanschrift, sowie den einzelnen Anschriften der Landesverbände. Beim Pressekontakt sind einige FDP-Ansprechpartner dargestellt mit allen nötigen Kontaktinformationen.

5.4   Zielgruppen

Nutzer:innen werden unabhängig von der Navigation über Teaser auf den Detailseiten weitergeleitet. Die Auswahl dabei ist manchmal zu groß, manchmal gibt es aber auch gar keine Weiterleitung und damit eine Sackgasse. Die typischen Nutzerszenarien sind abgedeckt, wobei kein Austausch oder Interaktion mit Nutzer:innen stattfindet.

5.5   Design

Die FDP-Seite ist insgesamt optisch ansprechend, wobei die Detailseiten sehr textlastig sind. Das CD wurden für die Website berücksichtigt und modern interpretiert. Die Elemente wirken insgesamt stimmig und der erste Eindruck lädt zum Weiterklicken ein.

Die Bildsprache ist nicht einheitlich. Es gibt Schwarz-Weiß-Bilder, die sehr dramatisch wirken und dazu farbige eher harmonisch wirkende Bilder. Das wirkt insgesamt eher weniger passend.

Die Schriftgrößen sind gut gewählt, teilweise gibt es aber zu viel Text und an anderen Stellen gibt es zu wenig Inhalte, bzw. die Inhalte werden in Akkordeons versteckt.

5.6   Joy of Use

Es gibt keine interaktiven Elemente, außer Tabs und Akkordeon. Microinteraktions sind nicht vorhanden und auch Hovereffekte gibt es nicht überall. Dadurch sind klickbare Elemente nicht unbedingt zu erkennen.

5.7   Inhalt

Das Logo ist auf der FDP-Startseite in der Navigationsleiste präsent. Sonst gibt es keine Hinweise auf die Partei, das Thema oder die Schwerpunkte. Die Texte sind insgesamt zu lang. Die Kernthemen werden optisch hervorgehoben, konkurrieren optisch aber mit den allgemeinen Themen, sodass Nutzer:innen vielleicht nicht direkt auf die Forderungen/Kernthemen kommen.

Es gibt aktuelle Inhalte wie News der FDP, die aber eher versteckt sind, da sie nicht über das Menü aufzufinden sind.

6. Die Linke Website

Die Website der Linke
Die Website der Linke

6.1   Die Übersicht

6.2   Navigation

Das Menü ist an sich sinnvoll und kompakt gehalten. Der Menüpunkt Wahlen steht an erster Stelle und enthält als Unterpunkt das Wahlprogramm, was in diesem Wahljahr sehr sinnvoll ist. Das Flyout ist versteckt hinter einem Hamburger-Menü, dass sich oben rechts einblendet beim Runterscrollen. Im Footer findet man zudem eine Sitemap, die einen guten Gesamtüberblick über die Webseite liefert. Die Hierarchie der Seiten könnte hier jedoch besser visualisiert werden. Durch die gleiche Schriftgröße ist die Linke-Website nicht scannbar.   

6.3   Conversion

Es gibt einen Newsletter, über den sich die Nutzer:innen über aktuelle Themen und die Linke allgemein informieren können. Auf der Startseite und den Folgeseiten wird der Newsletter mit verschiedenen Teasern beworben, dabei werden die Vorteile kommuniziert. Die Anmeldung ist sehr einfach und reduziert. Leider ist der Newsletter nicht auf die Interessen der Nutzer:innen individuell anpassbar.

Für Anfragen gibt es ein Kontaktformular, sowie den Kontakt zur allgemeinen Pressestelle der Linken. Zudem gibt es im Footer einige Telelfon-Hotlines wie Bürgerdialog oder Mitgliedsfragen. Das Kontaktformular ist übersichtlich, könnte noch weiter reduziert werden. Leider gibt es nahezu keine Mitarbeiterbilder, was mehr Vertrauen und Nähe schaffen könnte.

6.4   Zielgruppen

Die Nutzerführung über die Navigation und das Hamburger Flyout ist gut. Eine weitere Nutzerführung findet über die Artikel statt, wobei die einzelnen Seiten besser vernetzt sein könnten. Durch auffällige Teaser wie „die Linke fordert“ werden die Forderungen der Partei deutlich auf zahlreichen Seiten kommuniziert. Das grenzt die Linke klar von ihren Wettbewerbern ab und hilft den Nutzer:innen sich zu entscheiden. Somit schafft es die Linke besonders gut auf die typischen Bedürfnisse der Wähler:innen einzugehen.

Die Bildsprache zeigt zahlreiche Bilder von aktiven Mitgliedern. Dies entspricht der Zielgruppe der Partei und vermittelt ein authentisches Bild und Vertrauen. Die Webseite ist in einem schlichten, modernen und zeitlosen Stil dargestellt, das sowohl ältere als auch jüngere Zielgruppen gleichermaßen anspricht.

6.5   Design

Das Design wirkt modern, ansprechend und einfach. Das Rot als Akzentfarbe überwiegt, wird jedoch gut kombiniert mit anderen Farbtönen aus dem Corporate Design. Dadurch wirkt das Design sehr abwechslungsreich. Die Linke-Seite spricht mit ihren abwechslungsreichen Modulen und nutzerorientierten Content-Aufbereitung eine breite Zielgruppe von jung bis alt an. Die ansprechende Darstellung schafft es die Lesezeit auf den Detailseiten zu erhöhen.

Die Bildsprache zeigt viele aktive Mitglieder. Die Bilder sind harmonisch, vielfältig und authentisch. Der Nutzer erhält einen positiven Eindruck von den Mitgliedern. Die Headlines und Texte sind alle gut lesbar. Die Detailseiten werden gut unterteilt mit Unterüberschriften und hilfreichen Teaser-Elementen.

6.6   Joy of Use

Die Joy of Use reduziert sich bei der Webseite auf das Design, die Teaser und die Bilder. Interaktive Elemente, Animationen oder Scroll-Effekte gibt es nicht. Davon könnte es mehr geben. Interaktive Karten wären hilfreich für die Darstellung der Wahltour oder des Bundesausschusses. Hier wurden stattdessen einfache Akkordeons oder Filter verwendet.

6.7   Inhalt

Alle Inhalte werden schnell geladen, was eine reibungslose Nutzung gewährleistet. Auf der Startseite wird durch das Logo, die Spitzenkandidaten und zahlreiche Kampagnen-Teaser deutlich, um welche Partei es sich handelt.

Die Detailseiten sind sehr nutzerorientiert aufbereitet. Die Forderungen der Linken werden bei jedem Thema deutlich herausgestellt. Die Texte scheinen speziell für das Medium Web aufbereitet worden zu sein. Dieses verlängert die Lesezeit der Nutzer:innen vornehmlich. Die Inhalte sind aktuell und treffen die Erwartungen an die Seite.

7. Die AfD Website

Die Website der AfD
Die Website der AfD

7.1   Die Übersicht

7.2   Navigation

Das Menü ist übersichtlich mit sechs Hauptmenüpunkten. Durch das einfache Flyout erhalten die Nutzer:innen einen guten Überblick über die Unterseiten der zweiten Ebene. Weitere Unterseiten sind durch die Übersichtsseiten und Teaser erreichbar. Einige Begriffe in der Navigation ähneln sich sehr, teilweise gibt es Doppelungen, die vermieden werden könnten.

Die Hauptnavigation ist sticky auf blauem Hintergrund. Die Lesbarkeit und Schriftgröße ist gut gewählt. Die Hover-Effekte animieren zum Klicken. Das AfD-Logo ist sehr prominent oben links platziert. Der Headerslider bietet zwar einen ersten Einblick in die Fokusthemen, wirkt aber unübersichtlich und überladen. Die viele Bewegung durch den Zoom-Effekt und der Wechsel der Slides bringen Unruhe in die Seite.

7.3   Conversion

Der AfD-Newsletter wird nicht prominent im Footer oder in den Teasern beworben. Man findet ihn leider erst über die Suche. Der Mehrwert für die Anmeldung wird nicht kommuniziert. Das Anmeldeformular ist sehr kompakt gehalten mit den nötigsten Formularfeldern. Es gibt keine Kennzeichnung von Pflichtfeldern. Dies wird leider erst bei der Fehlereingabe deutlich. 

Es gibt unterschiedliche Kontaktmöglichkeiten, wie ein kompaktes Kontaktformular, eine Deutschlandkarte mit direktem Link zu den AfD-Landesverbänden-Webseiten, Telefonnummern mit Sprechzeiten und allgemeine Kontaktdaten. Ansprechpartner werden keine dargestellt, nur der Parteivorstand ganz allgemein.

7.4   Zielgruppen

Die Nutzerführung ist teilweise mangelhaft, da sich viele Unterseiten doppeln oder thematisch ähneln. Hier könnten Inhalte besser zusammengefasst werden, und der Fokus auf eine klare eindeutige Nutzerführung gelegt werden.

Der gesamte Content der Webseite hat einen klaren Fokus auf Parteiziele und bedient die nutzerorientierten Szenarien oftmals nur mit der Verlinkung PDFs, teilweise auch gar nicht.  Die Zielgruppe findet sich in der Webseite nur bedingt wieder. Zwar entsprechen die Bildwelten häufig den Parteiplakaten und vermitteln ein einheitliches Bild, es könnten jedoch mehr Bilder von AfD-Mitgliedern dargestellt werden. Somit bleibt der Eindruck zwar professionell, jedoch etwas unnahbar und inszeniert.

7.5   Design

Die AfD-Website ist sehr plakativ und an sich optisch ansprechend. Der Inhalt wirkt manchmal schnell überfordernd durch die zahlreichen Headlines und Texte auf den Bildern. Die Bilder, vor allem die Plakatmotive sind hochwertig und wecken Emotionen. Die Bildauswahl ist harmonisch, wirkt durch die ähnliche Darstellung von Einzelpersonen auf Dauer aber langweilig und inszeniert. Hier wäre mehr Authentizität sinnvoll.

Die Textlängen sind häufig eher kurzgehalten. Es könnte an einigen Stellen mehr erklärenden Text zu den Downloads geben, um nicht nur Print-Content abzubilden. Unter Programm gibt es häufig lange Absätze und Textwüsten, da der Print-Content unverändert als Text abgebildet ist. 

7.6   Joy of Use

Es gibt einige wenige Scroll-Animationen auf der Startseite, was jedoch nicht besonders auffällt. Auf der Startseite gibt es einen Wahl-Countdown, der automatisch runterzählt.  Die Animation im Header-Teaser, sowie der Wechsel der einzelnen Slides ist eher überfordernd und hektisch. Zoom-Hovereffekte auf einzelnen Teasern sind ansprechend jedoch nicht einheitlich gehalten.

7.7 Inhalt

Durch das Logo in Bild- und Textform wird direkt klar, um welche Partei es sich handelt. Der Einstieg auf der Webseite läuft ansonsten über die Themen und das AfD-Wahlprogramm.

Die Startseite wird schnell geladen. Bei den Unterseiten sind die Ladezeiten vor allem durch die häufigen Download-Teaser zu lang und sollten optimiert werden. Die inhaltliche Darstellung auf den Unterseiten ist optimierungsbedürftig. Häufig wird der Inhalt als PDF oder Download dargestellt. Eine inhaltliche Zusammenfassung würde den Nutzer:innen helfen. Die Inhalte der AfD-Seite sind aktuell.

8. Zusammenfassung

Übersicht aller Parteien Websites. Grafik: MOSAIQ GmbH
Fakt ist: Keine der Seiten sticht positiv heraus, da alle Seiten positive und negative Aspekte haben. Betrachtet man aber nur das Design, so ist die Seite der SPD am unattraktivsten, da das Rot zu dominant eingesetzt wird. Gefolgt von dem Design der AfD, dass durch ähnliche Elemente überladen wirkt und auf den Unterseiten eher langweilig ist.

Die Seiten der FDP und Grüne sind im Design etwas reduzierter, dadurch angenehm schlicht, ohne dabei langweilig zu wirken. Auf der CDU-Seite bewegt sich viel, was vom eigentlichen Inhalt eher ablenkt. Aus Nutzer:innensicht gibt es keine Seite, die schlecht zu benutzen war. Was aufgefallen ist: Die Kanzlerkandidat:innen werden bei allen Seiten sehr in den Vordergrund gerückt. Das Programm zur Wahl ist bei einigen Seiten aber leider eher weniger im Fokus. Die Linke stellt auf den Unterseiten die Forderungen und Lösungen zum Wahlprogramm am besten dar.

Hier zeigt sich auch, dass eine spezielle Aufbereitung des Inhalts für Online-Medien einen klaren Vorteil für die Verweildauer bietet.

 

Anfrage für den vollständigen Parteien Website Check:

Hinweise zu unserem Datenschutz

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.