wake-up-neo.com

Eine Handlungsaufforderungstaste nach links oder rechts ausrichten?

Wir erstellen eine Online-Präsentation, und der größte Teil des Textes auf den Seiten ist zentriert. Auf der letzten Seite mit CTA führt die Schaltfläche zu einer anderen Website, die linksbündig ausgerichtet ist. Ich wurde gebeten, es nach rechts auszurichten, da einige glauben, dass CTAs auf der rechten Seite gehören und während es zentriert ist, scheint es verloren zu gehen (es ist ein großer grüner Knopf).

Ich habe Lukews Artikel über " primäre und sekundäre Aktionen in Webformularen " gelesen. Aber dies wird als großartiges Beispiel für Schaltflächen im Webformular angesehen. Gibt es eine Studie, die den Augenfluss aus zentriertem Text untersucht? und Bilder auf Knopfdruck, bevorzugt das westliche Auge. Wenn ich mir das Diagramm mit den Pfeilen anschaue, würde ich sagen, dass die Schaltfläche für die rechte Ausrichtung tatsächlich vorzuziehen ist, da ein Auge benötigt, um schneller zur Schaltfläche zu gelangen.

mockup

bmml source herunterladen - Wireframes erstellt mit Balsamiq Mockups

6
Igor-G

Beste Übung

Dort finden Sie viele Informationen zu CTA-Tests und -Theorien. Aber Sie werden nicht viel finden, das Ihnen sagt, was Sie mit der horizontalen Ausrichtung tun sollen. Der Grund ist, es hängt von Ihrem Design ab.

Die Norm

Wenn Ihre Kollegen darüber sprechen möchten, was häufiger üblich ist , sollten Sie sich wie vorgeschlagen richtig ausrichten. Dies wird häufiger als links verwendet, da es bedeutet, dass Sie sich in einer Sequenz vorwärts bewegen (zumindest für uns von links nach rechts). Umgekehrt finden Sie viele CTAs, die nach links ausgerichtet sind.

Den Kontext anpassen

In Ihrem Fall ist der Inhalt der Website größtenteils zentriert, wodurch der Benutzer darin geschult wird, sich entlang der vertikalen Mittelachse zu bewegen. Es schafft auch eine ästhetische Umgebung, die Symmetrie begünstigt. In diesem Zusammenhang würde ich die Schaltfläche zentrieren. Für Sehbehinderte gibt es hier ein kurzes Drahtmodell, um der dominanten Ausrichtungsachse zu folgen.

Using dominant axis of alignment

Das Problem finden

Wenn Sie Probleme mit Benutzern haben, denen eine zentrierte Schaltfläche fehlt, müssen Sie sich fragen, ob Sie die richtige Skalierung, den richtigen Abstand und die richtige Unterscheidung von der umgebenden Ansicht angegeben haben. Wie Sie sicher wissen, ist die Ausrichtung nicht der einzige Faktor im Spiel.

Was noch wichtiger ist: Wissen Sie mit Sicherheit, dass es übersehen wird? Manchmal ist ein Mangel an Klicks nicht auf mangelnde Sichtbarkeit zurückzuführen. Wissen Benutzer, was sie beim Klicken erwarten können? Haben Sie sie ausreichend motiviert?

Nicht, dass es viel bedeutet, aber hier ist die Bestätigung, dass zentriert von Smashing Mag funktionieren kann.

Das Auffinden einer Schaltfläche zum Aufrufen von Aktionen in der Mitte eines Weblayouts ohne (oder erheblich kleinere und deemphasierte) flankierende Elemente kann eine effektive Methode sein, um Aufmerksamkeit zu erregen und eine Aktion zu locken.

7
plainclothes

Beginnen wir mit dem Warum ...

  • Ihr Inhalt ist heute zentriert. Wenn Benutzer auf der Seite navigieren, werden sie erwarten, dass der nächste Inhalt zentriert ist.
  • Heute haben Sie einen großen grünen, mittig ausgerichteten Knopf. Es wird nicht genug bemerkt.
  • Warum wird es nicht bemerkt? Schwer zu sagen, ohne den genauen Inhalt zu betrachten, aber es ist wahrscheinlich, dass:
    • Die Schaltfläche ist konkurriert um Aufmerksamkeit mit den Grafiken, der Farbpalette und dem Volumen des Inhalts darüber.
    • Der Benutzer ist nimmt die Schaltfläche als Teil des Inhalts wahr. Mit anderen Worten, Sie machen zu gute Arbeit, um das Layout zu harmonisieren, weil Sie den Benutzer anleiten, zentrierte Inhalte zu lesen, sodass der Benutzer weiterhin die zentrierte Schaltfläche als Teil des Inhaltsflusses und nicht als interaktives Element wahrnehmen.

Warum könnte die Ausrichtung von links nach rechts helfen?

  • Indem Sie die Schaltfläche aus dem zentrierten Fluss herausnehmen, erzeugen Sie eine absichtliche kognitive Dissonanz . Dies gibt dem Benutzer eine absichtliche kognitive Pause vom Inhaltsfluss, die ihn dazu veranlasst, das ausrichtungsbrechende Element genauer zu bewerten. Sie kann dann die CTA-Schaltfläche leichter als interaktive Komponente wahrnehmen.

Warum ist das wichtig?

  • Wenn Sie den kognitiven Prozess verstehen, können Sie ein besseres Design erstellen.
  • Unter Verwendung des obigen Frameworks wissen wir, dass der eigentliche Ansatz darin besteht, eine kognitive Unterbrechung für den Benutzer zu schaffen, damit er die CTA-Schaltfläche klarer wahrnehmen kann.
  • Während die Ausrichtung eine Möglichkeit ist, dies zu tun, gibt es mehrere andere (zum Vergrößern auf das Bild klicken):

(you can use color/font/shadow to create dissonance, improve the perception of interactability through skeuomorphism or 3D effects, or use grid-breaking to create intentional dissonance.

  • Die Abbildung zeigt, dass es andere Möglichkeiten gibt, eine bessere CTA-Betonung zu erzielen, ohne dass Sie Ihr Layout unterbrechen müssen (wenn dies für Sie/den Kunden stilistisch wichtig ist).

Dieses Framework hilft Ihnen auch dabei, eine Entscheidung für die Ausrichtung von links nach rechts zu treffen, wenn Sie sich für eine Dissonanz der Ausrichtung entscheiden. Die Ausrichtung nach links ist eine natürlichere Wahl, da sie ausreicht, um die Ausrichtung in der Mitte zu unterbrechen und gleichzeitig den Erwartungen des Benutzers an das Lesen von links nach rechts zu entsprechen. Deshalb wird es häufiger auf Websites gesehen.

Die Ausrichtung nach rechts kann zu einer stärkeren kognitiven Dissonanz führen (der Benutzer erwartet, dass er nach unten und links geht, um den nächsten Inhalt zu lesen, geht jedoch nur nach unten oder unten und rechts), geht jedoch zu Lasten einer möglichen Desorientierung Ergebnis.

2
tohster

Was wird der CTA tun? Je nachdem, was das Drücken der Taste bewirkt, führt dies wahrscheinlich zu einer anderen Platzierung. Wenn es beispielsweise zu einer anderen Seite führt, kann es sinnvoll sein, es für ein Desktop-Design rechts zu platzieren, da die meisten Desktop-Betriebssysteme die Schaltflächen next/ok unten rechts verwenden.

Man könnte argumentieren, dass eine neutrale Mittelstellung in den meisten Fällen funktionieren kann.

0
Daniel Zahra

Nach Fittsches Gesetz :

die Zeit, die erforderlich ist, um sich schnell zu einem Zielbereich zu bewegen, ist eine Funktion des Verhältnisses zwischen der Entfernung zum Ziel und der Breite des Ziels.

Sie können auch das Gutenberg-Diagramm betrachten, aber laut Forschungsstudie von Nielsen ist dieses Endzone Konzept nicht wirklich so nützlich, obwohl es meiner persönlichen Erfahrung nach so lange funktioniert, wie die Elemente kurz sind.

Jetzt gibt es einen stark recherchierten und verfolgten Trend: Schaltflächen links platzieren ... solange sich der gesamte Container oben rechts befindet. Ich habe das selbst viel getestet (CTAs sind mein Brot und Butter) und fand es sehr interessant. Container oben rechts mit linksbündigen Schaltflächen schlägt normalerweise Container oben rechts mit rechtsbündigen Schaltflächen für mehr als 50%.

Wenn Sie Ihr Formular jedoch in der Mitte platzieren, sollte die Schaltfläche zentriert oder rechtsbündig sein (und hier ist Fitt Laws nützlich, daher habe ich es erwähnt, rechnen Sie nach und Sie werden sehen). Denken Sie daran, dass dies auch von der Breite Ihres Formulars abhängt. Persönlich neige ich dazu, kleinere Formulare (nicht mehr als 400 Pixel Breite) zu erstellen und wirklich große Schaltflächen zu verwenden, wobei normalerweise die gesamte Breite des Formulars verwendet wird. Ich habe viel darüber recherchiert und es funktioniert, aber natürlich müssen Sie Ihre eigenen Tests durchführen.

Schließlich: Denken Sie neben der Platzierung daran, Kopie, Abstand (lassen Sie Platz für die Schaltfläche!), Größe und Farbe zu verwenden.

0
Devin