Call to Action, was sie sind und was ihre Bedeutung ist.

Calls-to-Action sind Aufforderungen zum Handeln. Calls to Actions sind im Webdesign und vor allem im Bereich Usability genau unterscheidbare Elemente, die den Surfer zu einer Handlung auffordern. Offensichtlich werden diese Elemente in Weboberflächen, wenn man nur an das Konzept der Benutzerfreundlichkeit denkt, von enormer Bedeutung und müssen mit äußerster Präzision berücksichtigt werden.

Normalerweise nehmen Call To Actions in Webschnittstellen das Aussehen aktiver Schaltflächen an, die den Surfer nach dem Anklicken dazu bringen, eine genau definierte Aktion durchzuführen (eine Zahlung, Eingabe von Daten in ein Formular, ein Kaufverfahren usw.). )

Angesichts der Brisanz des Themas gibt es genaue Regeln, um Calls To Actions erfolgreich und optimal zu gestalten. Einige sehr interessante Vorschläge werden von der Website gegeben TOLLES MAGAZIN, Das gibt eine ziemlich große und detaillierte Illustration mit realen Beispielen.

Daher ist es für alle Webdesigner, sowohl Experten als auch Nicht-Experten, sehr wichtig, die Aspekte zu bewerten, die einen Cll To Action positiv oder negativ beeinflussen können. Lassen Sie uns also noch einmal über Zugänglichkeit und Benutzerfreundlichkeit sprechen. Begriffe, die in letzter Zeit in Vergessenheit geraten und ich verstehe nicht warum.

Das (richtige) Copywriting für Websites und soziale Netzwerke

Der Call-to-Action hört jedoch nicht nur beim grafischen Aspekt auf:

Da es sich um ein wichtiges Element des überzeugenden Marketings handelt, ist es klar, dass es auch inhaltlich bewertet werden muss. Das heißt, was sich hinter einem Call to Action verbirgt und warum der Navigator genau dort und nicht woanders klicken muss.

Der Call To Action ist ein echter Call-to-Action, die Aktion, die Sie veranlassen müssen oder die Sie ausführen möchten und in deren Rahmen Sie fallen überzeugende Kommunikation denn ist der nutzer einmal auf unserer seite angekommen, dürfen wir ihn nicht wieder gehen lassen, sondern müssen ihn sogar davon überzeugen, etwas zu tun, was für beide, also für uns und den nutzer, zum vorteil werden kann. Ich bin der Meinung, ehrlich gesagt, ich weiß es genau, dass 10.000 tägliche Besuche mit einer Absprungrate von 99% weniger nützlich sind als 500 mit einer Absprungrate von 10% und einer Conversion-Rate von 5 oder sogar 10% .

Wir sind uns bewusst, dass die Leistung der Website in Bezug auf die Anzahl der Besucher und die Absprungrate auch von der Art der Website abhängt, aber es stimmt auch, dass eine Unternehmenswebsite dafür gemacht ist "Geschäfte machen" und die Puppen nicht zu kämmen, und daher ist es wichtig, dass der Besucher länger als 30 Sekunden "bei uns" oder besser gesagt auf der Website bleibt und Aktionen ausführt, zu denen wir versucht haben, ihn zu veranlassen. Ansonsten, wovon reden wir?

Zum Beispiel im Fall von Unternehmensseiten ist es sehr wichtig Kontakt aufnehmen mit dem Besucher, bei E-Commerce-Sites ist dies erforderlich Produkte verkaufen, im Falle von Informationsseiten ist dies erforderlich Aufmerksamkeit katalysieren ggf. Bitte um Schlusskommentar; es gibt auch die Möglichkeit, nur zu wollen Marken machen, und es kann viel weniger Zeit in Anspruch nehmen, aber das ist eine andere Geschichte.

La Aufruf zum Handeln ist fester Bestandteil von überzeugendes Texten: Sie müssen alle Zweifel des potenziellen Kunden ausräumen, um ihn zum Handeln zu bewegen. Ich sage nicht, um ihn zu täuschen, wohlgemerkt, sondern um ihm den wahren Wert des Produkts (oder der Dienstleistung), die Sie verkaufen, und vor allem den tatsächlichen Bedarf, der manchmal unausgesprochen ist, verständlich zu machen.

Die Zugänglichkeit von Calls-to-Actions ist eng mit zwei Aspekten verbunden: der Semantik der Labels, die zur Kennzeichnung einer Aktion verwendet werden, und der Art und Weise, wie diese Aktion ausgeführt wird.

Die Semantik von Calls-to-Actions sollte selbsterklärend sein. Eine Schaltfläche, ein Link, sollte eine Bezeichnung haben, die genau die Aktion identifiziert, die der Benutzer ausführen wird. Ich habe kürzlich die Änderungen gesehen, die einige soziale Netzwerke und CMS in den Aufrufen zum Hochladen von Bildern vorgenommen haben: Im Grunde haben wir jetzt zwei Schaltflächen mit der Aufschrift "Bild auswählen". Unglaublicherweise fehlt eine Schaltfläche mit der Aufschrift "Fotos hochladen". Das sorgt für Verwirrung bei den Nutzern, auch wenn man bedenkt, dass jeder, der mit einem Screenreader surft, eine Vision hat seriale der Seite, d.h. es fehlt der globale Blick, der für Benutzer typisch ist, die mit einem visuellen Browser navigieren.

Vage Bezeichnungen sollten vermieden werden, generisch oder unklar. Ein Label, das vermieden werden sollte, ist "Hier klicken". Wenn Sie mit einem Screenreader eine Seite durchsuchen, die ähnlich gekennzeichnete Calls-to-Action enthält, hören Sie eine endlose Folge von „(link) Hier klicken“, die Ihnen keine nützlichen Informationen über die Art der Aktion geben, die Sie aktivieren werden .

Eine weitere zu vermeidende Sache ist der Missbrauch von Attributen title einige Verknüpfungen. Wenn es diskret verwendet wird, kann dieses Attribut wertvolle kontextbezogene Informationen über die auszuführende Aktion liefern, aber wenn es überbeansprucht wird, wird die Seitennavigation zu einer Tortur. Tatsächlich ordnen Screenreader jedem Link einen eigenen Titel zu und lesen ihn vor dem Inhalt des Elements.

Aus grafischer Sicht und unter berücksichtigung der bedürfnisse von sehbehinderten nutzern sollten jene elemente, die an eine aktion erinnern, deutlich sichtbar und erhaben sein, mit groß genugen schriftarten, um ein leichtes lesen zu ermöglichen. Am wichtigsten ist, dass einige Optimierungen auf CSS-Ebene verwendet werden sollten, damit sich solche Elemente an Änderungen der Schriftgröße anpassen können, die ein sehbehinderter Benutzer auf der Seite vornehmen kann. Nicht zuletzt sollten sie einen ausreichenden Farbkontrast zwischen Text und Hintergrund aufweisen, um Probleme mit Farbenblinden zu vermeiden.

nginx: ein neuer Webserver

JavaScript und seine korrekte Verwendung

In Bezug darauf, wie diese Aktionen ausgelöst werden, müssen wir über JavaScript nachdenken.

Denken Sie daran, dass JavaScript und Barrierefreiheit nicht unvereinbar sind, solange Sie einige einfache Best Practices beachten. Eine davon betrifft Links und wie man sie auch bei deaktiviertem oder nicht unterstütztem JavaScript zugänglich hält. In diesem Sinne ist zwischen effektiven Links (die den Nutzer auf eine neue Seite führen oder die ohnehin auf Ressourcen verlinken) und Trigger-Links, also Links ohne eigentlichen Inhalt, die aber dazu dienen, JavaScript-Aktionen „auszulösen“, zu unterscheiden.

Eine zu vermeidende Praxis ist das von Links ohne Wert für das Attribut hrefals <a href="" id="trigger" >...</a>. In Browsern ohne JavaScript-Unterstützung wie Lynx führt ein solcher Link dazu, dass die Seite komplett neu geladen wird. Natürlich können wir den Trigger komplett mit JavaScript generieren, aber dann ist der Link nicht verfügbar, wenn JavaScript nicht unterstützt oder deaktiviert ist. Viele statische Websites verwenden diese Technik auch, um permanente Links zu generieren, da der Browser die aktuelle Seite als den fehlenden Attributwert betrachtet href.

Daher ist es notwendig, diesem Attribut einen Wert zuzuweisen, auch unter Berücksichtigung der Tatsache, dass für die XHTML-Spezifikationen das Attribut href Es darf nicht leer sein. Aber welches? Viele haben sich dafür entschieden, das Hash-Zeichen (#) als Füllung zu verwenden. Allerdings hat auch diese Lösung Einschränkungen, da wir bei deaktiviertem oder nicht unterstütztem JavaScript den Effekt haben, einen Verweis auf einen nicht vorhandenen Anker zu erstellen, der diejenigen, die mit nicht-visueller Hilfstechnologie im Internet surfen, desorientieren kann.

Die Lösung liegt natürlich irgendwo dazwischen: Wir können tatsächlich einen Anker erstellen, der auf den tatsächlichen Inhalt der Seite verweist. Bei Inhalten, die über JavaScript generiert werden, können wir einen Ansatz wie diesen verwenden:

Hilfe Die E-Mail muss das Format username@domain.extension haben

Lassen Sie uns unser div stylen, das wir mit JavaScript verstecken. Wenn JavaScript nicht unterstützt oder deaktiviert wird, bleibt unser div einfach sichtbar. Um es auszublenden, verwenden wir eine CSS-Klasse, auf die beim Laden des Dokuments verwiesen wird:

.hidden { Position: absolut; oben: -1000em; }

Sowohl jQuery als auch Prototype haben Methoden zum Ausblenden eines Elements, aber denken Sie daran, dass sie die Deklaration verwenden display: none. Diese Deklaration wird leider von Screenreadern interpretiert, die teilweise JavaScript unterstützen, wodurch sie daran gehindert werden, den Inhalt eines Elements zu lesen. Wenn wir an dieser Stelle jQuery verwenden, können wir schreiben:

$('#trigger').click(function() { $('#email-help').removeClass('hidden'); });

Auf das Einfügen der Erklärung habe ich bewusst verzichtet return false; weil einige Screenreader in der Lage sind, ein Ereignis zu interpretieren click, was in manchen Fällen einem Tastaturereignis entspricht. Wenn ich eine solche Erklärung eingefügt hätte, wären solche Programme dem Ziel des Links nicht gefolgt und hätten daher den Inhalt unserer div nicht lesen können. Der einzige unangenehme Effekt für normale Browser ist, dass der Anker in der URL der aktuellen Seite hinzugefügt wird, was jedoch in keiner Weise die Zugänglichkeit und Benutzerfreundlichkeit beeinträchtigt.

Mit entsprechenden Modifikationen gelten die gleichen Beobachtungen auch für Schaltflächen, natürlich unter Berücksichtigung der Unterschiede in der Kasuistik verfügbarer JavaScript-Ereignisse.

Das erste Usability-Prinzip, das für Calls-to-Action gilt, ist dasIdentifizierbarkeit. Ein Call to Action sollte für den Nutzer immer sofort erkennbar und seine Funktion leicht verständlich sein. Dabei spielen zwei Aspekte eine Rolle:

• Layout des Call-to-Action
• Kennzeichnung des Call-to-Action

Jeder Aspekt ist untrennbar mit dem anderen verbunden. Das Layout eines Call-to-Action sollte niemals seine Wiedererkennung beeinträchtigen. Ein Button auf einem Formular, wie auch immer mit CSS modifiziert, sollte den Benutzer immer denken lassen "Jetzt klicke ich hier". Tatsächlich sollte der Benutzer laut Steve Krug klicken, ohne darüber nachzudenken, ob das, was er sieht, eine Schaltfläche ist oder nicht. Die Aktion sollte sofort erfolgen (innerhalb von etwa 300 Millisekunden, genau wie durch aktuelle Untersuchungen zur Benutzererfahrung festgestellt).

Der zweite Aspekt hängt stattdessen damit zusammen, wie ein Aufruf zum Handeln wörtlich definiert wird. Etiketten sollten einfach, klar und selbsterklärend sein. Ein Beispiel ist die Übersetzung des Eintrags „Speichern“ im Kontextmenü von Mac OS X-Anwendungen: Im Italienischen wurde dieser Eintrag als „Aufzeichnen“ wiedergegeben, was in Bezug auf die Übersichtlichkeit sicherlich nicht die beste ist. Wenn also eine Schaltfläche eine Suchmaschine starten soll, sollte die Bezeichnung "Suchen" lauten und so weiter. In diesem Fall sollte die Vorstellungskraft dem gesunden Menschenverstand weichen: Die Konventionen sind in diesem Fall sehr nützlich.

Es wäre klar, dass es noch so viel zu diesem Thema zu schreiben gäbe, aber der Zweck dieses langen Artikels ist mehr als alles andere, die Menschen zum Nachdenken anzuregen, sich bewusst zu machen, was getan wird, und vor allem zu verstehen, dass ein einfacher Knopf das ist sollte dazu verleiten, mit Ihnen in Kontakt zu treten oder eine E-Mail oder eine Anfrage zu senden, ist dies keine so triviale Sache.

Design für Unternehmen, Sketchin: „Immer mit der Veränderung beginnen…“