it-swarm.com.de

Techniken und / oder Beispiele für lange Verkaufsseiten?

Ich habe in den letzten Monaten mit einer Reihe von UX-Experten zusammengearbeitet, und obwohl ich mich geweigert habe, den Weg der "langen Form" zu beschreiten, haben sie mich immer wieder in diese Zeit zurückversetzt. Es besteht ein 100% iger Konsens darüber, dass Langform der richtige Ansatz für mein wenig verstandenes und möglicherweise steileres Lernkurvenprodukt ist.

Angesichts dieser Position versuche ich, die richtige "Langform" -Technik zu erlernen. Ich habe den größten Teil des Texts fertig, aber jetzt suche ich:

A) Methoden zur Verbesserung oder Optimierung für maximales Geschichtenerzählen und Verkaufsattraktivität (Psychologietaktik) und

B) eine klare Demonstration oder starke Beispiele dafür, wie der Inhalt visuell richtig gestaltet werden kann.

Könnten Sie mir diesbezüglich bitte einige Informationen geben?

Beispiele für Langformseiten sind sozusagen ein Dutzend (Sie können eine Million WSO-Treffer sehen, ohne wirklich goldene Beispiele zu finden), daher suche ich nach Beispielen oder Techniken für "Cream of the Crop". Noch besser wären Einzelheiten oder ein Tutorial, das bewährte Muster erklärt, die funktionieren.

1
ylluminate

Es gibt dieses Buch von Caroline Jarrett: " Formulare, die funktionieren: Entwerfen von Webformularen für Benutzerfreundlichkeit (interaktive Technologien) ".
Sie teilt ihre jahrelange Erfahrung bei der britischen Regierung in sehr langen Formen mit.

Außerdem kann ich einige Ideen vernichten:

  1. Brechen Sie das Formular in Seiten. Denken Sie nicht lange Form = viel Schriftrolle . Machen Sie jede Seite zu einem Abschnitt der Daten, der irgendwie verwandte Felder enthält. Setzen Sie am unteren Bildschirmrand ein Artefakt mit [prev] und [next] Schaltflächen und die Seitenzahl also: [page 3 of 8].
  2. Wenn das Formular lang ist, ist es wichtig, die Hilfe in der Nähe des zugehörigen Felds verfügbar zu machen. Im Idealfall würde ich Anweisungen direkt unter dem zugehörigen Feld anzeigen.
  3. Verwenden Sie das sogenannte "zweispaltige" Layout mit Beschriftungen links von den Eingabefeldern. Bei kleinen Formularen ist das Festlegen der Beschriftungen über den Formularen kein Problem. Bei langen Formularen bietet die zweispaltige Anordnung Vorteile wie größere und damit besser lesbare Beschriftungstexte, Formulare mit reduzierter Höhe, die auf den ersten Blick weniger entmutigend sind und weniger Bildlauf erfordern. Machen Sie die 2-Spalten auch 3-Spalten mit 1-Label, 2-Feld und 3-der lokalen Hilfe-Schaltfläche.
  4. Wenn der Benutzer auf ein Feld klickt, um es anzuzeigen, wird es direkt unter dem Feld angezeigt und die verbleibenden Felder mit einer jQuery-ähnlichen Animation nach unten verschoben. Die Animation hilft dem Benutzer zu sehen, wohin die anderen Felder gegangen sind, falls sie unter die Falte gerutscht sind.
  5. Verwenden Sie für die Eingabefelder unterschiedliche Größen, je nach der erwarteten erwarteten Textlänge. Dies ist ein netter Hinweis für den Benutzer und hilft auch, sich schnell neu zu konzentrieren (im Gegensatz zu einer Spalte mit gleich großen Eingaben, die den Benutzer zwingt, die Beschriftungen erneut zu scannen).
  6. Zeigen Sie dem Benutzer, wo der Fokus liegt, beispielsweise durch eine geringfügige Änderung der Hintergrundfarbe des Felds.
  7. Verlieren Sie in Bezug auf das vorherige/nächste Artefakt natürlich nicht die Benutzereingaben, wenn sie vorherige Seiten überprüft.
  8. Viele Formulare heben die Beschriftungen und Ränder hervor. Ich ziehe es vor, sie zu dimmen, um den Eingabetext auffälliger, einfacher und schneller zu überprüfen. Aber dies ist meine Referenz.
  9. Apropos Grenzen: Je mehr Dinge in der Form vorhanden sind, desto höher ist die kognitive Arbeit, die erforderlich ist, um sie zu erfassen. Ich mag es, sie so minimalistisch wie möglich zu machen. Zeigen Sie beispielsweise eine sehr helle Hilfetaste nur an, wenn der Fokus das zugehörige Feld erreicht, und markieren Sie sie nur beim Bewegen des Mauszeigers.
  10. Zeigen Sie niemals ein Eingabefeld rechts von einem vorherigen an, es sei denn, sie sind vollständig verwandt, wie z. B. name first[_____] second[_____]. Auf diese Weise riskieren Sie, den Benutzer in die eine oder andere Wahl zu verwechseln oder einfach die zweite zu übersehen.
2
Juan Lanus