So verbessern Sie das Design der Benutzererfahrung durch die Optimierung der interstitiellen Angst
Veröffentlicht: 2018-06-30
Heute sprechen wir über etwas, das uns alle zusammenzucken lässt: Interstitielle Angst – ja, das klingt schrecklich und ehrlich gesagt ist es aus der Sicht eines Designers wirklich nicht großartig. Wir werden jedoch mein Bestes tun, um diese Stirnrunzeln auf den Kopf zu stellen, indem wir alles besprechen, was Sie wissen müssen, einschließlich der Möglichkeiten, wie Sie während des gesamten Designprozesses optimierte Interstitial-Angst erreichen können.
Interstitielle Angst ist das Gefühl der Irritation, das Sie bekommen, wenn Sie mit einer Webseite oder einem App-Design interagieren und etwas einfach nicht stimmt. Es wird nicht geladen, verzögert oder funktioniert einfach nicht so, wie es sollte. Ich werde später noch genauer auf diesen Satz eingehen, aber es ist wichtig zu wissen, was er ist und wie wichtig er im UX-Design ist.
Wenn es um Design geht, müssen Marken die Verbraucher und ihr digitales Erlebnis im Auge behalten. Sie müssen Plattformen schaffen, die spannend und ansprechend sind und ihrem Publikum genau das bieten, wonach es sucht.
Das liegt nicht nur am Inhalt, sondern auch an der Optik und Haptik des Designs. Es geht darum, wie Benutzer von einer Seite eines Inhaltsblocks zur nächsten gelangen. Und wenn es verwirrend oder verzögert ist, werden die Benutzer diese interstitielle Angst verspüren, die sie von Ihrer Seite und Ihrer Marke als Ganzes abschreckt.
Vermarkter und Geschäftsinhaber – hören Sie zu! Dieser Leitfaden zu Interstitial-Angst kann Ihnen helfen, Ihre Website- und App-Designs zu verändern, um Conversions, Verkäufe und Markenidentität insgesamt zu fördern.
Was ist optimierte interstitielle Angst?
Erstens, bevor wir mit der Optimierung beginnen, bezieht sich interstitielle Angst auf den momentanen Spannungszustand, den Benutzer zwischen einer Aktion und einer Reaktion erleben. Wenn ich mich beispielsweise auf einer Website befinde und auf eine Schaltfläche (Aktion) klicke, um zu einer anderen Seite zu navigieren, muss diese Seite geladen (Antwort) werden, bevor ich sie anzeigen kann.
Wenn Sie vor dem Breitbandzugang geboren wurden, werden Sie mit langsam ladenden Webseiten nur allzu vertraut sein – der ultimative Angstmacher! Dies, zusammen mit verzögertem Feedback und Latenzproblemen, sind normalerweise die Hauptgründe für Verzögerungen, die ein Benutzer zwischen seiner Aktion und der erwarteten Reaktion erleben wird.
Sie denken vielleicht, dass diese Gedanken und Gefühle flüchtig sind – aber sie haben einen tiefgreifenden Einfluss auf die Benutzer und bleiben bei ihnen, auch wenn sie unbewusst sind. Die Benutzer werden unweigerlich die Langsamkeit Ihrer Website merken und dies mit einer Ineffizienz Ihrer gesamten Marke gleichsetzen.
Und das bedeutet eine Katastrophe für zukünftige Conversions, Leads, Verkäufe und Wachstum.
Ist optimierte interstitielle Angst wichtig für die Benutzererfahrung?
Wenn Sie es vorziehen, glückliche Menschen zu haben, die auf Ihre Website zurückkehren, dann ja! Ein benutzerzentriertes Design ist von entscheidender Bedeutung, um die Angst vor UX-Design zu reduzieren und Ihre Marke und Ihr Geschäft zu fördern. Im Ernst, interstitielle Angst kann leider tiefgreifende Auswirkungen auf die Leistung Ihrer Website oder App haben.
Während der Web 2.0-Konferenz im Jahr 2006 enthüllte Marissa Mayer, damals Google-Vizepräsidentin, Untersuchungen, die ergaben, dass eine Verzögerung der Ladezeit von 0,5 Sekunden zu einem Rückgang des Traffics auf der Google-Suchseite um 20 % führte.
Einer von fünf Benutzern hat die Site verlassen, weil er eine halbe Sekunde lang blockiert war … lassen Sie das einfach auf sich wirken.
Denken Sie jetzt darüber nach, was das möglicherweise in Bezug auf Ihre Website bedeuten könnte. Wenn Sie sich dafür entscheiden, Geschwindigkeits- und Leistungsprobleme unbeaufsichtigt zu lassen, wie lange wird es dauern, bis Ihre Benutzer ähnliche Ängste verspüren und letztendlich entfremdet sind? Nicht lange, so Mayer.
Betrachten Sie es so. Ihre Website könnte mit den richtigen Antworten gefüllt sein. Ihre sozialen Kampagnen können bei Ihrer Zielgruppe perfekt ankommen. Ihre kreativen Designs könnten die Aufmerksamkeit des perfekten Kunden auf sich ziehen. Es zählt jedoch nichts, wenn diese Personen nicht auf die Informationen zugreifen können, die Sie stundenlang auf Ihrer Website erstellt haben.
Die Leute wollen nicht nur gute Inhalte, sie wollen Effizienz. Sie wollen, was sie wollen, wo sie es wollen, aber vor allem wann sie es wollen. Wenn Ihre Website bei diesem Prozess zu Verzögerungen führt, werden Verbraucher wahrscheinlich woanders nach den Informationen, Produkten oder Dienstleistungen suchen, nach denen sie ursprünglich gesucht haben.
Optimierte interstitielle Angst zur Verbesserung des UX-Designs verwenden
Das Letzte, was Sie wollen, ist ein UX-Design, das sich negativ auf die Erfahrung Ihrer Website-Besucher auswirkt. Daher ist die Verwendung von optimierter Interstitial-Angst eine großartige Möglichkeit, die Wahrscheinlichkeit zu verringern, dass Ihre Benutzer auf langsame Ladegeschwindigkeiten oder Übergangsprobleme stoßen.
Bevor wir die Möglichkeiten skizzieren, ist es wichtig zu verstehen, dass es zwei miteinander verbundene Komponenten gibt, die die interstitielle Angst ausmachen: Übergangsangst und Zeitangst.
Übergangsangst
Betrachten wir zunächst die Übergangsangst, die Menschen erleben können. Dies ist der erste Schritt der Sequenz und bezieht sich auf die Angst, die sich aus der Übergangszeit zu einem anderen Bildschirm oder einer anderen Seite ergibt. Dieser Übergang von einem Abschnitt einer Site oder einem Schritt eines Prozesses zu einem anderen muss vollkommen nahtlos sein. Wenn ein Benutzer Reibungsverluste erfährt, wird dies letztendlich den Prozess behindern und das, was ein kontinuierliches Erlebnis sein sollte, unterbrechen.
Ein gutes Beispiel für Übergangsangst ist während der Checkout-Phase einer Online-Transaktion, die ein Benutzer durchführt. Angenommen, Sie haben alle Artikel, die Sie bei Amazon kaufen möchten, in Ihren Warenkorb gelegt. Sie sind bereit, Ihre Bestellung zu bezahlen und beginnen mit den Schritten, um Ihren Kauf zu überprüfen.
Alles scheint nach Plan zu laufen, Sie werden jedoch feststellen, dass Sie, wenn Sie auf Kauf abschließen klicken, auf die Homepage von Amazon weitergeleitet werden.
"Ist meine Bestellung abgeschlossen?"
"Wurde ich angeklagt?"
„Wo ist die E-Mail, die meine Bestellung bestätigt?“
Dies sind alles mögliche Fragen, die Sie sich in Panik stellen könnten, wenn Sie nicht den erwarteten Übergangsbildschirm oder die erwartete Seite erhalten haben. Die plötzliche Veränderung führt zu einem Anstieg der Angst – das ist nur unser natürlicher Instinkt.
Selbst wenn es eine einfache Lösung gibt – selbst wenn es nur ein vorübergehender, kleiner Schluckauf war – reicht es aus, die Leute abzuschrecken und sie mit einer Negativität zu füllen, die sie auch in Zukunft begleiten wird. Und es kann sogar dazu führen, dass sie Ihre Website verlassen und ihren Kauf vollständig beenden.
Zeitliche Angst
Die zweite Form der interstitiellen Angst konzentriert sich auf die Spannung, die durch die Zeit entsteht, die ein Benutzer zum Laden einer Seite benötigt, auf die ein Benutzer zuzugreifen versucht. Dies geschieht, nachdem ein Benutzer zu der neuen Seite oder dem neuen Bildschirm gewechselt hat, bezieht sich jedoch speziell auf die Zeit, die zum Laden aller Seiteninhalte benötigt wird.
Je länger dies dauert, desto ängstlicher werden Sie natürlich, und in bestimmten Situationen kann es ziemlich stressig sein – denken Sie auch hier an einen Kaufprozess.
Sie versuchen beispielsweise, Tickets für ein Ed Sheeran-Konzert zu kaufen. Sie erwarten, dass es schwierig sein wird, Tickets zu bekommen und dass die Website möglicherweise langsamer als gewöhnlich ist, aber Sie erwarten dennoch, dass Sie den normalen Buchungsprozess durchlaufen, wenn Sie das Glück haben, die Tickets zu kaufen.
Sie erreichen die Zahlungsphase des Buchungsprozesses – Sie haben Ihre Tickets fast erhalten! Wenn Sie jedoch auf "Jetzt bezahlen" klicken, wechselt der Bildschirm zu einem Bildschirm, der nur zu etwa 25 Prozent geladen ist. Sie können nicht erkennen, ob Sie die Tickets bezahlt haben oder nicht, und der Bildschirm scheint einzufrieren.
„Soll ich die Seite aktualisieren?“
"Was ist, wenn ich zweimal zahlen muss?"
„Habe ich meinen Platz in der Warteschlange verloren?“
Dies ist ein Paradebeispiel für zeitliche Angst und ein häufig erlebtes noch dazu. Sie sind buchstäblich in der Schwebe, ob Sie die Tickets erhalten haben oder nicht.
Und es ist eine, die wir alle auch nachempfinden können. Sie sind sich nicht sicher, was Sie tun sollen, Sie sind sich nicht sicher, ob Sie etwas falsch gemacht haben – Sie wissen nur, dass sich der Prozess verzögert und Ihre Endergebnisse möglicherweise nie erreicht werden.
In kleinerem Maßstab kann diese Angst jedoch spürbar sein, wenn eine Seite nicht geladen wird. Sie müssen sich nicht in der Endphase einer Transaktion befinden. Wenn Sie wirklich ein neues Kleid kaufen möchten, aber die Produktbilder Ihres bevorzugten Online-Händlers nicht geladen werden, müssen Sie schlicht und einfach woanders suchen.
Und das will Ihre Marke nicht.
So verbessern Sie die Benutzererfahrung durch optimierte interstitielle Angst
Lassen Sie uns dies der Einfachheit halber noch einmal in die zuvor identifizierten Arten der interstitiellen Angst unterteilen. Beginnen mit…
So reduzieren Sie Übergangsangst
Der optimale Weg, Übergangsangst zu reduzieren, ist die Verwendung von subtilen Animationen und Übergängen zwischen den Bildschirmen. Wieso den? Nun, dies sollte den Benutzern helfen, sich allmählich an den Wechsel zwischen Seiten oder Bildschirmen anzupassen, die ansonsten ganz anders aussehen würden.
Wie Online-Unternehmen erkannt haben, ist es ein besserer Ansatz, zu lernen, wie sie Übergangsangst zu ihrem Vorteil kanalisieren können, als zu versuchen, sie ganz zu beseitigen. Durch das Erstellen von Übergangselementen – wie das Anbieten einer Snippet-Vorschau oder ein Ausblick auf das, was im nächsten Abschnitt erwartet wird – können Benutzer voraussehen, was als nächstes passieren wird, anstatt sich Sorgen zu machen.
Ladezeiten und Langsamkeit sind in manchen Fällen unvermeidlich. Und der Versuch, diese Probleme zu beheben, kann mehr Zeit in Anspruch nehmen und mehr Irritationen verursachen, als Marken es wünschen. Die Integration dieser Animationen ist jedoch eine einfache und effektive Möglichkeit, einen nahtlosen Übergang zu schaffen, der die Positivität und Aufregung steigert.
Stellen Sie sich anhand eines praktischen Beispiels aus der Praxis vor, wie Sie um 6:00 Uhr morgens von Ihrem Wecker geweckt werden (kein schöner Gedanke, ich weiß!). Machen Sie diese Erfahrung noch schlimmer, indem Sie sich vorstellen, wie Sie reagieren würden, wenn gleichzeitig Ihr Schlafzimmerlicht unerwartet angeht. Sie wären schockiert, nervös, wütend, verärgert und wahrscheinlich verwirrt.
Wenn Ihr Schlafzimmerlicht jedoch im Laufe der Zeit, in der Ihr Schlummeralarm aktiviert ist, allmählich angeht, haben Sie neun Minuten Zeit, sich an das Licht anzupassen, anstatt überrascht zu werden und in einem Schockzustand zurückzulassen. Dies ist das gleiche Prinzip, das auf den schrittweisen Übergang von Webseiten angewendet wird.
Benötigen Sie Hilfe bei Ihrem Online-Ziel? Diese Webdesign- und Entwicklungsagenturen können Ihnen helfen, Ihre Website von trist zu fabelhaft zu machen!
So reduzieren Sie die zeitliche Angst
Es gibt zwei Schlüsselmethoden, die Sie verwenden können, um dem Problem der zeitlichen Angst entgegenzuwirken. Beide konzentrieren sich auf die Verwendung von Bildern, um etwas Interessanteres als einen leeren Bildschirm zu liefern: eine Ladeanimation und eine Platzhalteranimation.
Animation wird geladen
Die Verwendung einer Ladeanimation wie eines sich drehenden Rads oder einer Ladeleiste kann alles sein, was erforderlich ist, um eine verwirrende Seitenladesequenz in eine zufriedenstellende Benutzererfahrung zu verwandeln. Vielleicht kennen Sie die Ladeanimation von Facebook und haben sie wahrscheinlich schon erlebt.
Was Sie vielleicht nicht wissen, ist, dass die Benutzer je nach Art der für die Animation verwendeten Grafik anders empfinden. Zum Beispiel wurde vorgeschlagen, dass „als den Benutzern eine benutzerdefinierte Ladeanimation in der Facebook iOS-App (links) präsentiert wurde, sie die App für die Verzögerung verantwortlich machten. Aber wenn Benutzern der iOS-System-Spinner (rechts) gezeigt wurde, gaben sie eher dem System selbst die Schuld.“
Setzen Sie diese Technik wieder in einen Kontext – denken Sie an das letzte Mal, als Sie in einem Aufzug waren. Angenommen, Sie waren im 20. Stock und wollten im vierten Stock aussteigen. Wenn sich der Aufzug in Bewegung setzt, sind Sie sich dessen offensichtlich bewusst.
Was aber, wenn Sie keine Vorstellung davon hätten, auf welcher Etage Sie sich befinden. Wie würden Sie wissen, wann Sie aussteigen müssen? Während Sie im Aufzug warten, können Sie in der Regel die Etagennummer sehen. Wenn Sie in den vierten Stock hinuntergehen, wissen Sie, wann der Aufzug zu erwarten ist.
Dies gibt Ihnen nicht nur die Möglichkeit, sich leicht zu wappnen, sondern sorgt letztendlich auch für eine angenehme Fahrt – oder mit anderen Worten, es ist ein reibungsloses Benutzererlebnis!
Und Sie können hier sogar einige Markeninhalte und Animationen integrieren, damit es so aussieht, als wäre alles absichtlich gemacht worden! Dies kann Ihrer Marke und Ihrer Identität eine Verspieltheit und eine kreative Persönlichkeit verleihen, die die Benutzer glücklicher macht, zu interagieren und sich zu engagieren.
Branding ist wichtig und Design beeinflusst das Branding immens. Wenn Sie Probleme mit UX-Angst haben, könnte es zu Ihren Gunsten sein, das Problem zu Ihrem Vorteil zu nutzen und als Reaktion darauf eine spannende und innovative Markenidentität zu festigen.
Platzhalter-Animation
Alternativ können Sie sich für eine Platzhalteranimation entscheiden, die simuliert, wie der tatsächliche Inhalt beim Laden aussieht. Das folgende Beispiel stammt von Medium, das ein einfaches Bild-Drahtmodell als Platzhalter verwendet, während das eigentliche Bild geladen wird.
Dies ist eine einfachere und elegantere Möglichkeit, das Angstproblem zu lösen. Und es funktioniert hervorragend für Marken, die nicht den ganzen Schnickschnack brauchen oder wollen, der aus kreativen und komplizierten Animationen kommt.
Es fördert ein Gefühl und eine Atmosphäre von Eleganz und Raffinesse, die Ihrer Marke eine Autorität verleiht, die sonst durch verzögerte Ladezeiten und angstbesetzte Designs verloren gehen würde.
Verwenden von optimierter interstitieller Angst zum Erstellen von Designs
Nachdem wir nun verstanden haben, was Interstitial-Angst ist, wie sie sich auf den Benutzer bezieht und wie wir sie minimieren können, können wir damit beginnen, Schritte zusammenzufassen, die Designer unternehmen können, um sicherzustellen, dass ihre Designs die UX-Erwartungen der Menschen erfüllen wichtig – die Nutzer!
Basierend auf den skizzierten potenziellen Lösungen sowohl für vorübergehende als auch für temporäre Angst ist klar, dass Bewegung eine wichtige Rolle bei der Verringerung der interstitiellen Angst spielt. Issara Willenskomer von UX in Motion hat ein 'UX in Motion Manifest' erstellt, in dem er die 12 konkreten Möglichkeiten skizziert, die Usability in Ihren UX-Projekten mit Motion zu unterstützen.
Bei interstitieller Angst bedeutet dies:
- Verkürzung der Ladezeit einer Seite oder eines Bildschirms
- Minimierung der Anzahl leerer Bildschirme und Seiten
- Reduzierung von Reibung durch stagnierende Übergänge
Marken können diese 12 beschriebenen Optionen nutzen, um ein dynamisches und intuitives Design zu erstellen.
Sie können auch dynamische Elemente in Unternehmenswebsites integrieren! Schauen Sie sich diese professionellen Websites an, um sich inspirieren zu lassen!
Die 12 Prinzipien von UX in Motion
Bei dem obigen Bild fallen mir zwei Dinge ein. Erstens sind die Bewegungen ziemlich subtil und zweitens ist es ziemlich interessant, wie 12 einfache Bewegungen die Grundlage bilden können, auf der die meisten Animationen aufgebaut sind.
Dies sind nur die Grundlagen, aber sie können auf dynamische und kreative Weise aufgebaut werden, um ein Design zu erstellen, das Interaktivität, Engagement und hoffentlich sogar Verkäufe fördert.
Willenskomer geht auf jedes dieser Elemente sehr detailliert ein, aber zusammenfassend sind sie wie folgt:
- Erleichterung: Das Objektverhalten richtet sich nach den Erwartungen des Benutzers, wenn zeitliche Ereignisse auftreten
- Offset & Delay: Definiert Objektbeziehungen und Hierarchien bei der Einführung neuer Elemente und Szenen
- Parenting: Erstellt räumliche und zeitliche hierarchische Beziehungen bei der Interaktion mit mehreren Objekten
- Transformation: Erzeugt einen kontinuierlichen Erzählfluss, wenn sich der Objektnutzen ändert
- Wertänderung: Erzeugt eine dynamische und kontinuierliche narrative Beziehung, wenn sich das Wertthema ändert
- Maskierung: Erzeugt Kontinuität in einem Schnittstellenobjekt oder einer Objektgruppe, wenn das Dienstprogramm dadurch bestimmt wird, welcher Teil des Objekts oder der Gruppe sichtbar oder verborgen ist
- Überlagerung: Erzeugt eine narrative und räumliche Beziehung zwischen Objekten im visuellen Flachland, wenn geschichtete Objekte ortsabhängig sind
- Klonen: Schafft Kontinuität, Beziehung und Erzählung, wenn neue Objekte entstehen und gehen
- Verdunkelung: Ermöglicht Benutzern die räumliche Orientierung in Bezug auf Objekte oder Szenen, nicht in der primären visuellen Hierarchie
- Parallaxe: Erstellt eine räumliche Hierarchie im visuellen Flachland, wenn Benutzer scrollen
- Dimensionalität: Bietet einen räumlichen narrativen Rahmen, wenn neue Objekte entstehen und gehen
- Dolly & Zoom: Bewahrt Kontinuität und räumliche Erzählung beim Navigieren von Oberflächenobjekten und -räumen
Wenn Sie diese 12 Bewegungsoptionen im Hinterkopf behalten, können Sie sicherstellen, dass Ihr Design auf dem neuesten Stand ist und bei Bedarf Bewegung einbezieht, um Ängste abzubauen und ein Gefühl der Aufregung in Ihrem Website- und App-Design zu fördern.
Alles, was Online-Unternehmen über optimierte interstitielle Angst wissen müssen
Zusammenfassend haben wir uns die interstitielle Angst angesehen, was sie ist und wie sie sich auf die UX von Websites und Apps gleichermaßen auswirken kann. Und es ist nicht nur ein weiterer vorübergehender Designtrend.
Als kurze Zusammenfassung hier einige wichtige Punkte, die Sie bei der zukünftigen Überprüfung des Themas beachten sollten:
- Interstitielle Angst ist der momentane Spannungszustand, den ein Benutzer zwischen einer Aktion und einer Reaktion erfährt, z. B. wenn er auf eine Schaltfläche klickt und darauf wartet, dass die Seite geladen wird
- Es gibt zwei Stadien der interstitiellen Angst: eine vorübergehende und eine zeitliche
- Transitional bezieht sich auf den Wechsel von einem Bildschirm oder einer Seite zu einem anderen
- Zeitlich ist die Zeit, die zum Laden einer Seite oder eines Bildschirms benötigt wird und wie sich dies auf das Verhalten des Benutzers auswirkt
- Die Einführung von schrittweisen Seitenübergängen und Ladebildschirmanimationen hilft Ihnen, eine optimierte Interstitial-Angst und damit ein leistungsfähigeres UX-Design zu erreichen
- Die 12 Prinzipien von UX in Motion definieren die Möglichkeiten, wie Sie Animationen verwenden können, um die Benutzerfreundlichkeit zu verbessern
Interstitielle Angst wird oft übersehen und ist erst seit kurzem ein Diskussionsthema in der Design-, Branding- und Marketingwelt. Aber es ist ein wichtiges Konzept, das Sie in Ihren eigenen Designs verstehen und korrigieren müssen.
Benutzer treffen Urteile basierend auf Web- und App-Design. Sie ziehen ihre eigenen Schlussfolgerungen über Ihre Marke als Reaktion darauf, wie sich Ihre Designs anfühlen. Und wenn sie frustrieren, verwirren oder irritieren, kommen sie nicht wieder.
Hoffentlich haben Sie nach dem Lesen dieses Artikels ein besseres Verständnis des Konzepts. Wenn Sie der Meinung sind, dass wir wichtige Punkte übersehen haben, oder wenn Sie uns Fragen zur optimierten Interstitial-Angst stellen möchten, können Sie dies jederzeit in den Kommentaren mitteilen.
Möchten Sie mehr Design-Einblicke? Melden Sie sich für die DesignRush-Tagesdosis an!
Auch beim App-Design ist die Benutzererfahrung unerlässlich. DesignRush hat eine Liste großartiger App-Design- und -Entwicklungsunternehmen, die ein effektives mobiles Ziel für Ihre Marke aufbauen können.