Mikrointeraktionen sind kleine Details, die den Kontakt des Benutzers mit einem elektronischen Gerät reibungslos und mühelos machen. Als überzeugter UI-Evangelist stimme ich dieser Aussage zu 100 % zu. Ich denke, das Entwerfen von Mikrointeraktionen ist Teil des UI-Prozesses, da es hauptsächlich auf der Ästhetik der Leistung basiert, die die allgemeine Benutzererfahrung verbessert. Heute zeige ich Ihnen einige Mikrointeraktionsbeispiele, die helfen, Inhalte effektiv und verlustfrei vom Desktop auf das Handy zu übertragen.
Das Hauptproblem? Arbeitsbereich
Die Desktop-Breite beginnt bei 1920 px, während die mobile Standardeinstellung 375 px beträgt. Dies ist ein großer Unterschied in der Anzeigekapazität, und der Inhalt muss zu beiden passen. Natürlich interpretieren UI/UX-Designer und -Forscher die Inhaltsübertragung so, wie sie möchten.
Ich nenne Ihnen zwei Beispiele für trendige Plattformen: Fiverr und Udemy. Wir haben eine Suchleiste und ein schönes Bild im Heldenbereich. Abhängig von Ihrem Designer wird es in beide Richtungen gehen – Sie können ein Heldenbild wie Fiverr.com (Der vorrangige Inhalt in diesem Abschnitt ist die Suchmaschinewas in beiden Fällen deutlich sichtbar ist) oder den Inhalt 1:1 übertragen, wie es Udemy.com getan hat (sowohl Suchleiste als auch das Bild sind vorhanden).
Wir leben in Zeiten von „mobile first“
Die mobile Version muss ein Spiegelbild des Desktops sein, hier gibt es keine Möglichkeit, Verknüpfungen zu erstellen. Schauen Sie sich einfach die Grafik unten an.
Bereits im Jahr fast jede einzelne Branche mindestens 50 % ihres Traffics von mobilen Geräten. Diverse Studien zeigen, dass ab August 2022 62,06 % des gesamten Website-Traffics stammt von Benutzern mobiler Geräte und 92,1 % der Internetnutzer greifen mit einem Mobiltelefon auf das Internet zu. Nirgendwo hinlaufen, nirgendwo vor dem Handy verstecken.
Das bedeutet, dass Mobile derzeit die dominierende Technologie in der digitalen Welt ist und nicht das „nice to have“-Feature, wie noch vor wenigen Jahren. Darüber hinaus hat Google durch seine „Google Mobile First-Indexierung“-Programm, fördert und unterstützt stark den mobilen Ansatz, wenn es um SEO und damit um geschäftliche Belange geht.
Gut strukturierte Informationsarchitektur – Fallstudie
Die wichtigste Aufgabe beim Übertragen von Inhalten zwischen Desktop und Mobile besteht darin, alle Inhalte an beiden Haltepunkten zu halten, auch auf Kosten einer unterschiedlichen Zusammensetzung einzelner Komponenten.
Mit „Komposition“ meine ich den Aufbau einer gut strukturierten Informationsarchitektur (Informationshierarchie). Der vorrangige Inhalt muss sofort sichtbar sein, dann der sekundäre und der tertiäre Inhalt (oft ist ein Auslöser erforderlich, um ihn anzuzeigen).
Im ersten Fall kann man bei der Konvertierung einige Zugeständnisse machen, obwohl es nach Ansicht vieler eine unverzeihliche Sünde gegen gute UX-Design-Praktiken ist. Bei komplexen digitalen E-Commerce-Produkten, Marktplätzen und Serviceplattformen ist davon jedoch eher abzuraten.
Oder sollte es nicht?
Werfen wir einen Blick auf Spotify und seinen Abschnitt „Beliebt“ in Künstlerprofilen.
Die ersten beliebtesten Songs sind in der Desktop-Version sichtbar. Weitere fünf sind unter dem „mehr sehen“-Button versteckt (das ist also unser Auslöser). Auf dem Handy stehen Ihnen nur fünf Songs zur Verfügung, ohne die Option, die Liste zu erweitern. Warum ist das so? Ehrlich gesagt, ich habe keine Ahnung.
Alles, was ich sicher weiß, ist, wie man dieses UX-Unglück mit einer einfachen Mikrointeraktion beheben kann.
Lösung? Mikrointeraktionen transformieren Inhalte
Das Spotify-Problem lässt sich leicht durch Mikrointeraktionen lösen, genauer gesagt durch den oben erwähnten Trigger, der versteckte Inhalte aufdeckt. Ein einfacher, mobiler Link-Button, der in der Desktop-Version verwendet wird, bittet darum, unten platziert zu werden, um die anderen fünf Songs anzuzeigen.
Dank Mikrointeraktionen ist das Durchsuchen mobiler Inhalte nicht nur einfach und zugänglich, sondern auch unterhaltsam und ansprechend für die Benutzer. Daher lohnt es sich, sie aus einer breiteren Perspektive zu betrachten. Standardmäßig, Mikrointeraktionen sind eher visuell (animierte Ladebildschirme, Fehlermeldungen, Feuerwerksherzen auf Tiktok usw.) Aber in diesem Artikel nähere ich mich dem Thema an Usability-Niveau.
Ich zeige Ihnen, wie Mikrointeraktionen nicht-invasiv dabei helfen, Inhalte vom Desktop auf die mobile Version zu quetschen und gleichzeitig die Benutzeroberfläche zu vereinfachen, damit sie nicht mit Inhalten überladen wird.
Das Spotify-Beispiel ist cool, aber schauen wir uns weitere Möglichkeiten an, die Mikrointeraktionen bieten.
Verwenden Sie Mikrointeraktionen, um die häufigsten Usability-Probleme zu lösen
1. Wischen Sie nach links/rechts
Klassisch. Sie reduzieren nicht nur die Höhe der mobilen Seite, indem Sie einen bestimmten Abschnitt nach links oder rechts wischen, sondern Sie können zusätzliche Optionen anzeigen, die unter versteckten Schaltflächen verfügbar sind.
2. Komprimieren langer Tabellen in erweiterbare Kacheln
Tische… einer der größten Albträume von Designern. Durch die Komprimierung der Tabellenreihen zu interaktiven Kacheln (oft mit implementiertem Akkordeon) werden Inhalte, die zu breit für den Bildschirm sind, in Form einer mobilen Kachel schön eng.
3. Wenn Sie eine Taste gedrückt halten, werden zusätzliche Optionen angezeigt
Erhalten Sie Zugriff auf kontextbezogene Optionen, die normalerweise auf dem Desktop sichtbar sind, aber ausgeblendet oder in der mobilen Version enthalten sein müssen, um ein kompakteres Gefühl und Aussehen zu erreichen.
4. Durch Klicken auf eine Kachel werden zusätzliche Inhalte angezeigt
Mit dieser Option komprimieren Sie den Desktop-Inhalt intuitiv auf eine kleinere Form, während der Inhalt 1:1 bleibt, wodurch die Benutzeroberfläche vereinfacht und die allgemeine Benutzererfahrung bereichert wird.
5. Hamburger-Menü
Zu guter Letzt der Klassiker Nummer zwei – Hamburger. Passt das gesamte Menü an Mobilgeräte an, wodurch die Navigation kompakt und für Benutzer leicht zu finden ist.
6. Kürzere Fußzeile
Das ist das letzte, was ich verspreche. Lassen Sie uns überprüfen, wie brillant Hubspot die Größe einer wirklich hohen Fußzeile verringert hat, indem eine Mechanik verwendet wurde, die der aus dem Hamburger-Menü ähnelt. Absolut umwerfender Ansatz zur Transformation von Inhalten.
Der Usability-Aspekt von Mikrointeraktionen ist nicht nur eine unschätzbare Hilfe bei der Aufrechterhaltung der Inhaltskonsistenz sowohl auf dem Desktop als auch auf Mobilgeräten. Es verbessert auch die Benutzererfahrung und das Engagement, indem Mechanismen eingeführt werden, um die Benutzeroberfläche der App auf einer kleinen Smartphone-Oberfläche zu vereinfachen, sowie zusätzliche grafische und interaktive Aspekte. Nützliches und Spaß können zusammengehören.
Der Einsatz von Mikrointeraktionen schlägt drei Fliegen mit einer Klappe:
- Danke an die Kompatibilität von Desktop- und mobilen Inhalten wird Google die Anwendung besser indizierenwas ein enormer Vorteil für das Geschäft ist (Ihr Marketing wird es lieben),
- Vereinfachung der mobilen Schnittstelle ist sehr praktisch für gute UX/UI-Praktiken – kleinere Bildschirmfläche, kompaktere Ansicht. Kudos an die Designer für die Erstellung einer einfachen, anspruchslosen und angenehmen App.
- nützlich kann schön sein! Die Einführung interaktiver Abschnitte verbessert das allgemeine Erscheinungsbild eines digitalen Produkts erheblich. Ganz zu schweigen von einer besseren Benutzerbindung!
Vielen Dank für Ihre Aufmerksamkeit!
Wir haben bereits Tonnen von Inhalten vom Desktop auf das Handy verschoben, können wir Ihnen einen Rat geben?
Wir wissen, wie schwierig es ist, auszuwählen, was kommt und was geht, wenn man mobile Versionen von Desktop-Apps erstellt. Wenn Sie mit unseren Produktdesignern sprechen und weitere Informationen erhalten möchten, rufen Sie uns an, indem Sie eine kostenlose 1-stündige technische Beratung buchen. Ohne weitere Bedingun.
