Responsive UX-Design
Mobile Zielgruppen begeistern
mit Responsive UX-Design.
Mobile Zielgruppen begeistern
mit Responsive UX-Design.
Was ist Responsive UX-Design?
Unter Responsive Web Design versteht man die Anpassung eines Webdesigns an verschiedene Bildschirmgrößen.
Responsive Web Design hat sich weltweit flächendeckend durchgesetzt. Es ist derzeit der Standardansatz, mit dem die überwiegende Mehrzahl von Webseites und Webapps im World Wide Web ihre Benutzeroberfläche gestalten.
Responsive UX-Design geht einen wichtigen Schritt weiter als die Standard Versionen von Responsive Web Design. Es passt sich entsprechend der Nutzungserfahrung von Desktop-und mobilen Usern an. Dabei folgt es dem Grundsatz:
Auf dem Desktop als moderne Website,
auf dem Smartphone wie eine App.
Responsive UX-Design hält also an dem Prinzip fest, unterschiedliche Bildschirmgrößen mit einem flexiblen Designansatz zu bedienen. Auf Desktop-Computern mit ihren großen Screens liefert Responsive UX-Design eine moderne Website aus. Auf den kleinen Bildschirmen von Smartphones fühlt sich Responsive UX-Design wie eine Mobile App an.
Damit ist Responsive UX-Design die richtige Antwort des Webesigns auf die stark steigende mobile Nutzung.
Voraussetzungen für Responsive UX-Design
Responsive UX-Design benötigt keine speziellen Technologien, sondern wird mit den Standards der Frontent-Entwicklung HTML5, CSS3 und JavaScript realisiert. Es handelt sich eher um eine Weise, diese Standardtechnologien einzusetzen.
Es sollten außerdem die technischen Voraussetzungen erfüllt sein, die heute für Webanwendungen im allgemeinen gelten:
- Leistungsfähiger Webserver:
Ein schneller Webserver ist die grundlegende Basis für Benutzerfreundlichkeit.
- Leichtgewichtiger Code:
Um auch unter den Bedingungen älterer Mobildfunknetze schnell zu reagieren, sollte der Code der Responsive Design Plus Anwendungen auf alle überflüssigen Elemente verzichten.
- Progressive Web App:
PWA ergänzen das App-Feeling des Responsive UX-Design mit ihren spezifischen App-Funktionalitäten wie Push-Notifications und Offline-Verfügbarkeit
- Lazy Loading:
Bilder und andere Medien wie z.B. Videos sollten erst dann geladen werden, wenn sie im Browser-Fenster erscheinen sollen. So werden der First View und die Interaktivität der Webanwendung schneller für den User verfügbar.
- Asynchrones Laden:
Ausgelagerte Ressourcen wie z.B. JavaScript Dateien sollten soweit möglich asynchron zum Seitenaufbau geladen werden. Damit wird der Hauptthread entlastet und die Seite wird schneller sichtbar. Die Herausforderung besteht darin, die volle Funktionalität und dass korrekte Design schnellstmöglich bereitzustellen und dennoch asynchron zu laden.
Responsive UX-Design-Elemente
NAVIGATION
Overlapping Sidebar
Abbby ergänzt die mobile Navigation durch einen zweiten schnell zugänglichen Navigationsbereich. Er ist als Sidebar organsiert, die per Tab seitlich ins Bild fährt. Diese überlappende Sidebar muss die Struktur der Hauptnavitagion nicht übernehmen. So werden ausgewählte Inhalte auch tieferere Navigationsebenen direkt zugänglich gemacht.
NAVIGATION
Mobile Bottom Navbar
Auf kleinen Bildschirem ermöglicht Abbby den Einsatz einer fixierten Navigationsleiste am unteren Bildrand. Hier werdem dem User wichtige Funktionen wie Kontakt-Funktionen oder die Suche direkt zugänglich gemacht.
NAVIGATION
Back Button
Ein Back Button oben links ermöglich den schnellen Wechsel zur nächst höheren Inhaltssebene.
SCROLL MANAGEMENT
Mobile Footer
Große Footer-Bereiche können in den Desktop-Version von Websites eine wichtige Rolle spielen. Sie bieten oftmals eine Reihe verschiedener Informationen (Kontaktdaten, Social-Links, Hinweise etc.) und Navigationsmöglihckeiten (Teil-Navigationen oder Sitemaps) an. Daher werden sie in mehreren Spalten organisiert, die auf kleineren Bildschirmen untereinander angeordnet werden und somit eine lange und überflüssige Scroll-Sektion am Ende jeder Seite erzeugen.
Das mobile Footer-Konzept von Abbby vermeidet dieses lange Footer-Scrollen. Navigationselemente werden in App-Links umgewandelt. Wichtige Kontaktmöglichkeiten werden in einer Mobilen Navigationsleiste am unteren Rand des Screens fixiert.
SCROLL MANAGEMENT
Accordion Elemente
Accordion-Elemente organisieren strukturierte Inhalte komfortabel. So werden beispielsweise Feature-Listen, FAQ, Jobangebote oder gebündelte Argumente übersichtlich organisiert.
Sichbar ist immer nur der Inhalt, der gerade gelesen bzw. vom User durch Klick oder Tab sichtbar gemacht wird.
Accordions sind auch in der Desktopversion nützlich. Ihre volle Stärke spielen sie im mobilen Bereich aus, wenn sie unötiges Scrollen auf kleinen Screens vermeiden.
PAGE TRANSITIONS
Preloader
Preloader erscheinen als Zwischenstadium eines Seitenübergangs.
Sie bestehen aus einem Fading-Effekt für die gesamte Seite und einem grafischen Element, dass den Fortschritt beim Laden der Seite simuliert.
So machen Preloader alle Seitenübergänge sanfter und geschmeidiger.
CONTENT ORGANISATION
Cards
Cards eignen sich sehr gut, um Content für die mobile Nutzung zu organisieren.
CONTENT ORGANISATION
Card-Slider
Card-Slider organisieren Cards für die Bedienung per Klick auf dem Deskop oder mit Wischgesten auf dem Touchscreen.
SUCH-FUNKTIONEN
Onsite- und Fullscreen-Suche
Insbesondere bei Webangeboten mit vielen und tief strukturierten Inhalten wie etwa Webshops oder Messe-Websites sind Suchfunktionen für die User sehr wichtig. Sie ermöglichen es, schnell und direkt zu den richtigen Inhalten zu gelangen.
Daher sollten sie selbst auch schnell und direkt zugänglich und außerdem komfortabel zu bedienen sein. Entweder als permanent eingebundene Onsite-Search oder als bei Bedarf sichtbare Fullscreen-Search bzw. als eine Kombination beider.