Mikro-Inaktionen: Ein kleiner Charme, der eine großartige Benutzererfahrung schafft.

Nicht nur schöne Websites machen! Der Kunde hat eingegeben. "Verwirrt". Drücken Sie die Taste. "Wie gehst du ruhig?

Hast du dich jemals so gefühlt? Sie beabsichtigen, die Website gut zu entwerfen. Layout ist perfekt, perfekt, aber wenn andere es versuchen. Stattdessen heißt es in dem Feedback "Die Website sieht still aus." "Drücken Sie diese Taste und was ist passiert? Nicht sicher." Oder schlimmer ist, dass sich der Benutzer verwirrt fühlt, nicht sicher, ob die Aktion, die er vor einem Moment durchgeführt hat, erfolgreich oder gescheitert war.

Dieses Problem ist wie "Haare, die die Berge bedecken", die viele Menschen übersehen. Wir widmen uns einem großen Gesamtbild. Bis zum Vergessen, dass die Benutzererfahrung des Benutzers (Benutzererfahrung) durch ein kleines Detail verursacht wird, das aus einem Vortrag besteht, bei dem Nicken erforderlich sind oder die darauf reagieren, die Website ist gleich. Wenn es ruhig ist, gibt es keine Reaktion. Unterscheidet sich nicht vom Gespräch mit der Wand, was den Benutzer dazu veranlasst, sich unsicher zu fühlen, und klicken Sie möglicherweise, um Ihre Website sofort zu schließen!

Aufforderung für Abbildungen: Vergleichsbilder. Eine Seite ist ein noch aussehender Website -Bildschirm. Seien Sie lebhaft, der Benutzer ist verwirrt und zeigt auf die Taste. Die andere Seite ist der gleiche Bildschirm, aber nach dem Drücken tritt eine kleine Animation auf der Taste auf. Der Benutzer lächelte glücklich.

Warum ist die "schöne" Website "langweilig" und "verwirrend"?

Der Hauptgrund, warum die Website wunderschön aussieht, ein "trockenes" Erlebnis oder "verwirrend" entsteht aus der "Konversation" zwischen Benutzern und Systemen. Wir konzentrieren uns in der Regel auf "Datenpräsentation (Präsentation)", bis "Interaktion (interaktiv)" vergessen ".

Vorstellen:

• Mangel an Reaktion (Mangel an Feedback): Wenn der Benutzer auf die Schaltfläche "Produkte zum Korb hinzufügen" klicken, ist jedoch nichts passiert. Keine Bestätigungsnachricht Es gibt kein Korbsymbol, das sich bewegt oder Zahlen erhöht. Die erste Frage im Kopf des Benutzers ist "Eh ... ich habe gedrückt?" Und vielleicht wiederholt drücken. Oder schlimmer noch, dass die Website kaputt ging und dann verstorben ist
• Statisches Design: Die Website wird nur zu einer "digitalen Broschüre" ist wunderschön, aber nicht lebhaft. Scrollen Sie, um Informationen, Klicks oder Aktionen anzuzeigen. Es ist gefroren, ohne den Charme, der die Benutzer dazu bringt, bleiben oder wieder zurückkommen
• Unklare Statusänderungen: Der Benutzer weiß nicht, was das System derzeit tut, z. B. beim Hochladen der Datei. Wenn es keine Ladeleiste oder Animation gibt, teilen Sie den Fortschritt mit. Der Benutzer kann denken, dass die Website hervorragend ist und dann auf Aktualisierung drücken, was dazu führt, dass alles bricht!

All dies geschah, weil wir vergessen haben, auf die Details zu achten, die als Micro-Inaktionen bezeichnet werden, ist der Schlüssel, um die normale Website in ein unvergessliches und wirklich leicht zu bedienendes Erlebnis zu verwandeln.

Aufforderung für Abbildungen: Einfache Infografik -Bilder zeigen das Gehirn des Designer -Einseiten -Fehllayouts, Farbe, Schriftart (großes Bild). Die andere Seite, die mit kleinen Symbolen wie dem Lade -Symbol, dem Checkmark -Symbol wie Symbol mit Funken aufgegeben wird. Wurde aber zu einem schwachen Grau vermittelt, das übersehene übersehen wurde

Lassen Sie die "ruhige" Website fortgesetzt ... Die Ergebnisse sind beängstigender als nur "langweilig".

Wenn Sie eine Website haben, deren Antworten nicht nur das Gefühl haben, sich gelangweilt zu fühlen, wirkt sich auch Ihre Geschäftsziele unerwartet direkt aus. Wenn diese Probleme lange Zeit bleiben, werden Sie Ihre Website essen:

• Grenzrate (Back -Rate) höher: Wenn der Benutzer hereinkommt, fühlt sich verwirrend, verwirrt oder ist der Meinung, dass die Website schwer zu bedienen ist. Sie sind bereit, sofort die Rücktaste zu drücken. Dieses Signal wird an Google gesendet, dass Ihre Website möglicherweise nicht Qualität ausreicht.
• Conversion -Rate (Zielrate) niedriger: Die Möglichkeit für Sie, Kunden zu besuchen (z. B. eine Mitgliedschaft, Bestellung), wird reduziert, nur ein wenig Unsicherheit im Zahlungsprozess. Es kann den Kunden ermöglichen, den Korb leicht zu verlassen. Die Aktualisierung der UX/UI im Webflow, um die Konvertierung zu erhöhen, ist daher ungewöhnlich.
• Die Zuverlässigkeit der Marke nimmt ab: Eine Website, die hart aussieht und nicht reagiert. Lassen Sie Ihre Marke unprofessionell aussehen. Nicht auf Details zu achten und sieht in den Augen der Verbraucher veraltet aus
• Der Benutzer möchte nicht wieder zurückkommen: schlechte Erfahrung. Wird sich besser als die normale Erfahrung erinnern, wenn sich der Benutzer frustriert fühlt, wenn er Ihre Website nur einmal nutzt, wenn er wieder zurückkommt, wieder zurück zu kommen.

Sie sehen, die "Stille" der Website ist laut für Ihre Leistung laut. Eine gute Erfahrung durch kleine Details zu schaffen, sind nicht nur "schöne Dinge", sondern auch die "Investition", die benötigt wird.

Eingabeaufforderung für Abbildungen: 2 Diagrammbilder im Vergleich zum ersten Balken mit dem Namen "Silent Web" mit einer hohen Absprungrate, eine weitere niedrige Konvertierungsrate namens "der Website, die auf" eine niedrige Absprungrate, die Konversionsrate mit einem Stirnrunzeln und lächelndem Gesichtskonto hat.

Lösung: Wach das Web auf, um zu leben. "Mikro-International", ein großer kleiner Charme

Die Lösung all dieses Problems ist einfacher als Sie denken, dass "Leben hinzugefügt" und "Dialog" für Ihre Website über das sogenannte "Mikrointernational" (Mikrointegration)

Wenn Sie so einfach wie möglich erklären möchten , ist eine kleine Antwort. Dies geschieht, wenn der Benutzer auf der Website oder Anwendung handelt. Es sind die Details, die die Aktion bestätigen, den Status des Systems mitteilen und auf natürliche Weise navigieren. Macht die Verwendung reibungsloser und zufriedenstellender

Experten der Nielsen Norman Group haben es als das Herzstück der Kommunikation mit Benutzern definiert. Stellen Sie sich ein einfaches Beispiel vor. Dass wir uns jeden Tag treffen:

• Mobile Vibrationen mit "Ting" -Sound, wenn wir drücken, um eine Nachricht zu senden
• Die herzgespritzte Animation, die sich verbreitet, wenn wir in den sozialen Medien "wie" drücken.
• Die Ladestange, die vorwärts lief, um uns zu sagen: "Laden, einen Moment warten!"
• Der vibrierende Kanal, wenn wir die falschen Informationen ausfüllen

Dies sind nicht nur schöne Animationen, sondern "Feedback". Das Wichtigste lässt uns das Gefühl haben, dass das System "Zuhören" und "Reaktion" ist, was dazu beiträgt, Verwirrung zu verringern und ein enormes Selbstvertrauen aufzubauen. Das UX/UI -Design auf dem Webflow, mit dem Kunden klicken und kaufen können. Verwenden Sie dieses Prinzip als Herz

Aufforderung für Abbildungen: Die schöne Infografik zeigt 4-5-Symbole als Beispiel für Mikroinstrumente, wie das Herzschlag-Symbol, das Kreuzikon, zu einer korrekten Marke, einem offenen Symbol mit offener Schließung, einem lebendigen Ladestangensymbol.

Beispiele aus der realen Sache: Mikro-Inaktionen, die Sie jeden Tag treffen (aber nie wussten!)

Oft ist das Beste, was mikro-international ist, dass es reibungslos funktioniert, bis wir es selten bemerken. Aber es macht eindeutig einen Unterschied, schauen wir uns das Beispiel an. Das ist erfolgreich, wenn Sie kleine Charme verwenden

1. Ziehen Sie zum Aktualisieren: In den sozialen Medien wie X (Twitter) oder Facebook, wenn wir am oberen Rand des Feeds stehen und den Finger verwenden, um den Bildschirm nach unten zu ziehen, wird ein Ladesymbol angezeigt. "Laden eines neuen Inhalt

2. Die Animation, die "wie" drückt: Wie Taste ist nicht nur eine normale Taste. Wenn Sie die Herztaste im Instagram oder den Applaus im Medium drücken, gibt es eine kleine Animation. Niedlich und befriedigend erscheint es sofort die Gefühle der Benutzer. Und lassen den emotionalen Ausdruck lebhafter aussehen

3. Formular Fehlerfeedback: Anstelle der roten Nachricht "füllen Sie das Falsche aus" aus. Viele moderne Websites. Zum Beispiel empfehlen Experten von Framer , den Kanal das "Zittern" so zu gestalten, als wollten wir uns sagen: "Hey! Schau hier, was ist los?" Es ist ein sehr intelligenter und freundlicherer Weg.

4. Das Display beim Hinzufügen des Korbs: Führung der E-Commerce-Website, wenn Sie die Schaltfläche "zum Wagen hinzufügen" drücken. Die Taste kann zu einer korrekten Marke ändern. Oder haben Sie eine kleine Animation, bei der es sich um ein Produktbild handelt, das zusammen mit den Nummern auf dem Korb sofort aktualisiert wird. Dies ist eine klare Bestätigung und sicherzustellen, dass Benutzer "Ihr Produkt bereits im Korb ist. Sie können weiterhin einkaufen oder bezahlen".

Ich werde sehen, dass all dies ein kleines Detail ist, das den normalen Gebrauch in eine glatte und unvergessliche Interaktion verwandelt

Eingabeaufforderung für Abbildungen: GIF-Bilder oder 4 kurze Videos, die Beispiele für mikro-internationale beschriebene beschriebene Micro-Internationale zeigen. Zum Beispiel wird der erste Kanal zum Auffrischen gezogen. Die zweite ist eine Animation. Drücken Sie wie Kanal drei die Form, die zittert, wenn die vier falsch sind.

Willst du folgen, wie fange ich an? Einfache Checkliste zum Aufwachen Ihrer Website zum Leben.

Lesen Sie hier, viele Leute möchten es versuchen. Micro-Inaktionen, die mit Ihrer eigenen Website verwendet werden sollen. Die gute Nachricht ist, dass Sie kein Gottheitsprogrammierer sein müssen, Sie können beginnen! Versuchen Sie diese einfache Checkliste. Entdecken Sie Ihre Website.

1. Finden Sie "wichtige Berührungspunkte identifizieren): Versuchen Sie, herauszufinden, was Benutzer auf Ihrer Website tun müssen.
   • Klicken Sie auf die Schaltfläche (Anruf -zu -Artctor)
   • Füllen und Einreichung von Formularen
   • Navigation
   • Hinzufügen von Produkten in den Korb (zum Warenkorb hinzufügen)
   • Warten auf das Laden von Daten (Ladezustände)
2. Fragen Sie sich: "Was möchten Sie wissen?": Was möchten die Benutzer in jedem Touch Point weiterhin weitermachen?
   • Wenn Sie auf die Schaltfläche klicken: Ich möchte bestätigen, dass "auf" klicken "(z. B. Farbwechseln von Schaltflächen, Schatten oder kleine Animationen)
   • Beim Senden des Formulars: Ich möchte wissen, dass "erfolgreich gesendet" oder "es Fehler gibt" (z.
   • Beim Warten auf Download: Ich möchte wissen, dass "das System nicht funktioniert". (Zum Beispiel Ladespinner oder schöne Fortschrittsbar)
3. Beginnen Sie mit etwas Einfachem und dem Start einfach und subtil: Sie müssen nicht sofort komplexe Animationen erstellen. Kleine Veränderungen können viele Unterschiede bewirken
   • Schwebstatus: Wenn der Benutzer die Farbe oder den Verknüpfung ändert oder sich ein wenig bewegt, wenn der Benutzer die Maus abspielt
   • Erfolgsnachricht: Vielen Dank, dass der Benutzer ein Formular gesendet hat.
   • Fokuszustand: Lassen Sie die Füllkanäle eine herausragendere Grenze haben.
4. Verwenden Sie das richtige Tool: eine Webflow -Plattform mit einem in erstellten interaktiven Tool, mit dem Sie diese Dinge erstellen können, ohne einen komplexen Code schreiben zu müssen. Oder wenn Sie mit Entwicklern zusammenarbeiten

Der Schlüssel besteht darin, die Aktionen jedes Benutzers eine "Bedeutung" -Reaktion zu erhalten. Dies kann dazu beitragen, die Benutzererfahrung enorm zu verbessern.

Eingabeaufforderung für Illustrationen: schöne Checkliste Bilder. Zusammenfassung von 4 Schritten oben mit Symbolen in jedem Element (z. B. dem Maussymbol, dem Fragezeichen -Symbol, dem Startraketen -Symbol, dem Symbol, den Werkzeugen)

Fragen, die die Leute neigen, die sich wundern (und die Antwort ist klar!)

Wenn ich über das Hinzufügen von Bewegungselementen auf der Website sprach, habe ich immer Fragen und Bedenken, dass ich eine beliebte Frage zu Mikro-Inaktionen stellte, um hier zu verschwinden.

Q1: Geben Sie Mikro-Inaktionen ein. Werden diese Websites die Website verlangsamen?
A: Nicht immer. Wenn die meisten von ihnen korrekt durchgeführt werden, werden die meisten von CSS-Animationen oder SVG erstellt, was sehr leicht ist und die Lastgeschwindigkeit fast überhaupt nicht beeinflusst. Das Problem ist nur, wenn wir große GIF -Dateien und schwere Videodateien verwenden. Oder ein Skript, das komplexer als notwendig ist, ist das Herz, die richtige Technologie zu wählen.

F2: Es ist notwendig, einen guten Code zu schreiben. Kannst du es tun?
A: Nicht immer notwendig! Wie gesagt, die Plattform No-Code/Low-Code wie Webflow verfügt über ein leistungsstarkes und benutzerfreundliches Interaktionstool. Sie können schwebende Effekte erstellen, Animationen scrollengestützt oder auf Animationen klicken, ohne den Code zu berühren. Wenn Sie jedoch etwas sehr kompliziertes wollen, , einen Experten in UX/UI .

F3: Wie unterscheidet es sich von "Animation" im Web?
A: Der Unterschied ist, dass "Ziele". Allgemeine Animation mag nur dekorativ (dekorativ) sein, wie beispielsweise Hintergründe, die sich hin und her bewegen, aber Mikro-International wird immer eine "Funktion" -Animation (funktional) sein. Es wird als Antwort auf "Trigger" (Aktionen des Benutzers) und "Feedback" (Antwort) mit Bedeutung auftreten.

F4: viel tragen, desto besser, oder?
A: Nein! Unter Verwendung von Mikro-International zu viel oder spektakulärer wird es ärgerlich und stört die Konzentration der Benutzer. Wie Menschen, die in jedem Wort eingreifen, sind die Regeln "Subtilität ist Schlüssel" oder "Schwäche ist der Schlüssel". Es sollte dazu beitragen, die Erfahrung zu verbessern. Nicht um die Szene kämpfen. Das Dark -Modus -Design , das für UX gut ist, verwendet auch die gleichen Prinzipien der Soft -Auflösung.

Eingabeaufforderung für Illustrationen: 2 Cartoon -Charaktere sprechen. Der erste stellt Fragen. (Haben Sie eine Marke über dem Kopf) Die andere Antwort mit Zuversicht. (Es gibt ein helleres Lampen -Symbol). Hintergrund ist ein Symbol für Code- und Design -Tools.

Zusammenfassung: Es ist Zeit, Ihre Website zu wecken!

Wir sind durch die Welt der Mikro-Inaktionen gereist, die bereits genug haben. Es ist zu sehen, dass es nicht nur "Gimmicks" oder "Dekorationen" sind, sondern es ist der "Geist" guter Benutzererfahrung. Es ist ein kleines Detail. Das macht einen Unterschied zwischen der Website, die mit der Website "nett und unvergesslich" "nur nutzt", die "nutzen".

Wenn Sie auf Mikro-International achten, zeigen Sie dem Benutzer, dass Sie in jedem Detail "Pflege" für Vertrauen "sorgen". Navigieren Sie reibungslos durch den Benutzer und verwandeln Sie die trockene Interaktion in ein lebhaftes Gespräch, damit Ihre Marke professionell und modern aussieht.

Also warten Sie nicht! Gehen wir zurück und erkunden Sie Ihre Website. Finden Sie heute einen kleinen Punkt, an dem Sie Leben hinzufügen können. Vielleicht ist es nur so, dass Ihre "Nachricht" -Taste nach dem Klicken leicht lebhaft ist. Das reicht aus, um ein Lächeln und Eindruck für Benutzer zu erzielen.

Es ist Zeit, Ihre Website von "Quiet Broschüre" zu ändern, um ein "Assistent, der bereit ist, sich zu unterhalten"? Lass es uns tun!

Aufforderung für Abbildungen: Das letzte Bild, das es inspiriert hat, ist die Hand des Benutzers. Klicken Sie auf die Schaltfläche auf dem Bildschirm. Und es gibt eine Reihe schöner Licht aus diesem Knopf vermittelt eine großartige Erfahrung, die sich aus einem einzigen Klick ergibt. Mit einer kurzen Nachricht "Jedes Klick ist wichtig".

‍