Entwerfen fokussierter Schnittstellen für eine bessere Einbindung der Benutzer

Benutzereingriff ist eine knifflige Metrik, die für verschiedene Projekte auf unterschiedliche Weise erreicht werden kann. Die meisten Designer denken an das Schnittstelle wenn sie über interaktivität sprechen, aber Seiteninhalt kann auch die Benutzerinteraktion fördern. Für eine bessere Einbindung der Benutzer ist dies wichtig fesselnde Inhalte schreiben, und diesen Inhalt präsentieren in einem eingängigen Design.

Es ist viel einfacher gesagt als getan, aber wenn Sie einige Grundlagen kennenlernen, haben Sie kein Problem damit fokussierte Benutzeroberfläche mit großartigem Inhalt für Ihre Projekte.

In diesem Beitrag zeige ich Ihnen, wie Sie steigern können Benutzerinteraktion und inhaltliches Engagement auf webbasierten Schnittstellen. Dies sind die zwei gebräuchlichsten Methoden, um Besucher anzusprechen, und wenn Sie können die Erfahrung optimieren Sie werden kein Problem damit haben, diese lukrative Zeit für die Seitenmetrik zu erhöhen.

Capture Neuheit

Das Konzept von Neuheit Definiert ein Ereignis oder eine Sache, die im Allgemeinen neu ist, oftmals sehr neu und aufgrund des Kontextes eindeutig ist. Neuartige Ereignisse fangen unsere Aufmerksamkeit auf, weil sie auffallen. Dies gilt auch für das Interface-Design, wobei die Elemente Elemente darstellen, die scheinbar wirken Springe von der Seite.

Ich habe kürzlich einen großartigen Beitrag gefunden, in dem die Bedeutung der Neuheit im Zusammenhang mit dem Engagement diskutiert wird. Benutzer scheinen zu sich auf neue Erfahrungen, Schnittstellen und Elemente der Benutzeroberfläche konzentrieren weil sie anders sind Allein die Tatsache, anders gestaltet zu sein, zieht häufig die Aufmerksamkeit auf sich.

Ein bekanntes Beispiel ist der Call-to-Action-Button auf den meisten Zielseiten. Sie können auch mit Neuheit bauen Hintergrundfotos, Illustrationen oder App-Screenshots, wie auf der Uber for Business-Landingpage.

Diese Seite hat einen Call-to-Action-Button, aber sofort meine Aufmerksamkeit geht zu den Screenshots. Sie animieren beim ersten Laden, so dass dies kombiniert wird Neuheit des Designs mit Bewegung Aufmerksamkeit erregen.

Eine Alternative wäre die Verwendung von GiftRocket dargestellte Symbole als Links weiter in die Website eintauchen.

Beide Beispiele Nutze die Neuheit zu ihrem Vorteil. Sie können nicht immer mehr Personen auf die Website ziehen, aber Sie werden bessere Ergebnisse sehen, wenn Sie ihre Aufmerksamkeit auf sich ziehen auf viszeraler Ebene zuerst.

Das Design ist die erste Sache Besucher sehen und Sie müssen ihre Aufmerksamkeit auf sich ziehen innerhalb von Sekunden weiteres Engagement fördern.

Skimmable Typografie

Studien haben gezeigt, dass die meisten Benutzer Scannen Sie eine Webseite anstatt es Wort für Wort zu lesen. Sie möchten wahrscheinlich Menschen dazu bringen, Ihre Inhalte zu lesen, aber Sie können nur so viel tun.

Die beste Alternative ist das Erstellen anpassbarer Inhalt mit Schlagzeilen, fettgedrucktem Text und Bildern, die zeigen, was Sie sagen wollen. Mir fällt zumindest ein drei mächtige Schreibtechniken Sie können in Ihren Inhalten dazu beitragen Lesbarkeit erhöhen:

1. Inhalt teilen mit klaren Untertiteln
2. Absätze aufteilen um sie kleiner zu machen
3. Verwenden Sie Listen mit Aufzählungszeichen um Ihre Punkte schneller zu teilen

Das Ziel ist es, Ihre Leser zu behalten die Seite nach unten bewegen mit welchen Mitteln auch immer. Inhalt klein halten in mundgerechten Brocken Sie werden es viel einfacher haben, Aufmerksamkeit zu erlangen und die Leute weiter in die Website zu bringen.

Im Quick Sprout-Blog finden Sie ein Beispiel für diesen Schreibstil. Der Inhalt wurde von Neil Patel geschrieben und er schreibt oft sehr langformatige Inhalte, aber er bricht die Absätze zusammen jeweils in 1-3 Sätze.

Wenn Sie haben richtige Schlagzeilen, und verwenden Bilder / Aufzählungspunkte Im gesamten Inhalt werden die Benutzer viel weiter skizzieren und lesen. Seien Sie auch sicher Erhöhen Sie die Menge an Leerzeichen zwischen den Absätzen. Ränder und Polsterungen Beide spielen eine große Rolle in der Layoutgestaltung und Lesbarkeit.

Text so gestalten, dass es tatsächlich geht Spaß zu lesen. Langweilige Kopie wird nicht locken, aber auch Spaß, der zu klein ist oder keinen Kontrast aufweist.

Ins Auge fallende Bilder

Eine aktuelle Fallstudie von Backlinko schlägt diese Seiten vor mit mindestens einem Bild allgemein Rang höher als Seiten ohne Bilder. Dies ist aus SEO-Sicht großartig.

Aber wie sieht es mit der Einbindung der Benutzer aus? Wenn Sie das eine Bild behalten können oberhalb der Falte oder ganz oben Es wird auch die Aufmerksamkeit der Besucher auf sich ziehen, bevor sie abprallen. Denken Sie daran, dass neuartige Seitenelemente dazu neigen, sich anzulocken.

Wenn Sie ein Bild (oder viele Bilder) über die Seite verteilt haben, werden Sie brechen die Monotonie auf von langweiligen Textblöcken. Benutzer können machen Sie eine Pause vom Lesen um das Bild zu würdigen oder eine Verbindung zwischen dem Bild und dem geschriebenen Inhalt herzustellen. Aber wie bei den meisten Designtechniken ist Qualität mehr wert als Quantität.

Eine Moz-Fallstudie ergab, dass qualitativ hochwertige Bilder dazu neigen Besucher halten auf der Seite viel länger. Auf der anderen Seite, Bilder von schlechter Qualität arbeite nicht so gut und in einigen Fällen verursachten sie Besucher zu hüpfen Sie schneller als ohne Bilder. Sie sollten versuchen, mindestens ein Bild aufzunehmen, das heißt relevant für den Inhalt und das bietet dem Leser einen Mehrwert.

TechCrunch tut dies mit vorgestellten Bildern in ihren Artikeln, in denen Sie häufig eine finden vorgestellte Foto über der Falte.

WordPress erleichtert das Hinzufügen von Bildern mit der Post-Thumbnail-Funktion. Sie können für jeden Beitrag, den Sie schreiben, ein eindeutiges Foto festlegen und diese zwingen, oben auf der Seite anzuzeigen. Dies ist eine perfekte Möglichkeit, den Besuchern einen Einblick zu geben worum es beim Inhalt geht, und zu erhöhen CTR für verwandte Post-Widgets, die auch das Postminiaturbild enthalten.

Kontrast von Seitenelementen

Wenn Sie auf einen bestimmten Bereich auf einer Seite aufmerksam machen möchten, dann Asymmetrie ist dein bester Freund. Kontrast treibt einen harten Keil zwischen bestimmten Bereichen eines Designs oder bestimmten Inhaltsblöcken.

Besucher sind natürlich verwöhnen in Richtung Kontrast weil es anders ist Große Nebeneinanderstellungen von Farbe, Größe oder Leerraum ziehen das Auge an bricht die Form von allem anderen im Layout.

Mein Lieblingsbeispiel für kontrastierende Seitenelemente ist vielleicht die Homepage von Sketch. Es wurde viel Kontrast gefunden zwischen den beiden Call-to-Action-Tasten, eine zum Herunterladen einer Sketch-Testversion und die andere zum Kauf einer Kopie.

Der Kauf-Button verwendet eine volle Hintergrundfarbe viel heller als andere Farben in der Kopfzeile. Der Schaltflächentext ist auch heller im Vergleich zur kostenlosen Testschaltfläche. Dies führt die Besucher zur Schaltfläche "Jetzt kaufen" ausschließlich von visuellen Reizen.

Sie bemerken ein ähnliche Technik auf der Homepage von Optin Monster. Diese Kopfzeile hat nur eine Schaltfläche mit der Bezeichnung "OptinMonster jetzt anfordern". Es ist ein hellgrüner Knopf auf blauem Hintergrund ohne weitere grüne Elemente in Sicht.

Die Farbe, Größe und Form ziehen alle Ihre Aufmerksamkeit auf sich kontrastiert zu allem anderen in der Kopfzeile. Direkt neben der Schaltfläche befindet sich ein kleiner Textlink für eine Videovorschau. Es ist wahrscheinlich ein großartiges Video und verdient Aufmerksamkeit, aber nicht so sehr wie der CTA-Button für Trial / Signup.

Für ein Blog haben Sie möglicherweise unterschiedliche Voraussetzungen für die Einbindung von Benutzern. Eine gängige Wahl ist a Newsletter-Anmeldeformular wie das Beispiel auf Aeolidia.

Wenn Sie bis zum Ende des Inhalts blättern, werden Sie a Fancy-Shmancy-Anmeldungsfeld Nur für das Newsletterformular konzipiert. Es hebt sich vom Rest der Seite mit ab eine einzigartige Hintergrundfarbe, lustige Typografie und ein süßes King Triton-Symbol.

Der beste Weg, um mit Kontrast zu entwerfen, ist, Beispiele zu studieren und einfach zu experimentieren. Sehen Sie, was funktioniert und was nicht Tracking-Metriken mit A / B-Tests. Wenn Sie nach weiteren Beispielen suchen, sehen Sie sich diese Codrops-Dokumentation mit vielen Tipps und Bildschirmen von asymmetrischen Live-Websites an.

Benutzerinteraktion fördern

Es gibt so viele Möglichkeiten, Besucher für eine Website zu interessieren, aber die häufigste ist es Lass sie Sachen machen. Dies gilt sowohl für statische Blogs als auch für dynamische soziale Websites. Dafür gibt es keine Tricks, die für alle passen. Sie können alles tun, um Benutzer zu erstellen fühle mich mit der Seite beschäftigt.

In einem statische Seite, Sie könnten viel hinzufügen ähnliche Links für mehr lesen oder einschließen Bild-Diashows. Du kannst auch Formulare hinzufügen für Benutzerkommentare oder einen E-Mail-Newsletter.

Wenn es darum geht dynamische Schnittstellen, Der Zweck der Website besteht in der Regel darin, die Einbindung der Benutzer zu fördern. Die größte Hürde ist Benutzer unterrichten wie die Site funktioniert und wie man sich richtig mit der Schnittstelle beschäftigt.

In diesem Beitrag von KissMetrics finden Sie Informationen zu den Techniken der Benutzerbindung. Eine der besten Strategien, die ich gefunden habe, ist es zu tun eine geführte Tour entwerfen das führt Besucher durch jedes der Hauptmerkmale.

Denken Sie darüber nach, wie verwirrend die Aussicht auf Twitter für einen brandneuen Nutzer wäre. Wenn sie keinem folgen und keine Anhänger haben, warum sollten sie dann twittern??

Das “Folgen Sie den Vorschlägen” Box während der Anmeldung hilft neuen Benutzern Machen Sie sich mit der Funktionsweise von Twitter vertraut. Mit dieser Funktion werden neue Benutzer darauf vorbereitet fange an zu fangen mit der Plattform und zu Experimentieren Sie mit Funktionen wie folgt, Tweets und private Nachrichten.

Abgesehen von einer geführten Tour möchten Sie auch machen Sie die Schnittstelle einfach. Hauptmerkmale sollten sein 1-2 Klicks entfernt über das Dashboard oder die Hauptseite des Benutzers. Intuitive Schnittstellen brauche Erklärung, und Einfachheit Aufmerksamkeit erregt viel schneller.

Durch das Verständnis all dieser Techniken ist es einfacher, Schnittstellen zu erstellen Probleme der Benutzer lösen, und ermutigen neue Benutzer zum Beitritt. Wenn Sie nach mehr suchen Tipps zum UX-Design Schauen Sie sich diese verwandten Beiträge an:

• Ein Benutzer, der eine Taktik für die Einbindung des Onboarding verwendet (thinkapps.com)
• Eine Lektion für schrittweises Engagement (uxbooth.com)
• Gehen Sie nicht davon aus, dass neue Benutzer lernen möchten, wie Sie Ihr Produkt verwenden (uxdesign.cc)