Computer, Tablet und Smartphone gehören zum Alltag und sind immer um uns. Es gibt nur wenig Gelegenheiten, bei denen wir wirklich „offline“ sind, eigentlich sind wir immer erreichbar. Unser Smartphone haben wir sowieso immer dabei. Den Tag über sitzen wir an unserem Computer und abends, auf der Couch oder im Bett, lesen wir auf unserem Tablet oder Smartphone. Um so wichtiger ist es, dass du deinen Usern ein einheitliches UX-Design bietest.
Schließlich geht es nicht nur darum, dass der Nutzer die Webseite oder App auf dem Computer genau so bedienen kann wie auf dem Handy. Es geht auch darum, dass er anhand eines einheitlichen UX-Designs weiß, dass er immer dieselbe Webseite oder App vor sich hat.
Natürlich sollte eine Webseite oder eben auch eine App so, wie sie auf dem Computer zu sehen ist, nicht eins zu eins für Tablet oder Smartphone übernommen werden. Während wir am PC kein Problem damit haben mit einem großen Bild oder einem Slider begrüßt zu werden, wäre dies am Smartphone eher störend.
Wer will schon weit nach unten scrollen, um den Text der Webseite lesen zu können? Richtig, niemand. Nicht jeder Trend im Webdesign erfüllt das Ziel einer positiven Benutzererfahrung. Zu einem geräteunabhängigen UX-System gehört eben auch ein zum jeweiligen Gerät passendes Design. So sollten sich zwar auf der einen Seite Farben, Logo, Typographie und andere Elemente widerspiegeln, zum anderen aber auf das jeweilige Gerät abgestimmt sein.
Hier erhältst du Tipps für die Erstellung eines positiver Benutzererlebnisse, die nahtlos zwischen verschiedenen Geräten verlaufen, wenn der Benutzer von einem zum anderen wechselt.
Inhaltsverzeichnis:
Geräteunabhängige UX-Systeme sind auf den Nutzer abgestimmt
Wer eine App oder Webseite für verschiedene Geräte erstellt, sollte sich immer die Frage stellen, ob dem User die Funktionen, die er auf dem jeweiligen Gerät erwartet, ohne Probleme zugänglich sind.
So macht es für eine gute User Experience wenig Sinn, wenn der Nutzer auf dem Smartphone in seine Notizbuch-App Videos einfügen kann. Wichtiger ist hier, dass er Zugriff auf die wesentlichen Funktionen der App hat. Am Computer dagegen ist das natürlich anders. Hier sollte auch die Option bestehen, dass Videos, Fotos, etc. eingefügt werden können.
Wenn wir also davon ausgehen, dass bei einem guten UX-Design der User immer im Vordergrund steht, gilt es sich zunächst einmal die Bedürfnisse des Users auf den verschiedenen Geräten anzusehen und dann über die Funktionalität der Applikation zu entscheiden.
Wichtig ist also dem Nutzer ein auf seine Geräte abgestimmte Benutzererfahrung zu bieten. Das Stichwort lautet hier Responsive Webdesign, besser noch – Mobile First Design. Denn egal wie gut die Webseite gepflegt ist und egal wie aktuell die Inhalte sind, ist sie dem Nutzer nicht zugänglich, weil er mit dem Finger, um den Text lesen oder sich die Produkte ansehen zu können, von rechts nach links scrollen muss, wird er die Webseite schnell wieder verlassen.
Um das zu vermeiden und die Absprungrate der Nutzer zu verringern und ihnen ein einheitliches und vor allem geräteunabhängiges UX-Design zu bieten, ist ein mobiles Webdesign unverzichtbar.
Responsiv lässt sich am besten übersetzen mit „reaktionsfähig bleiben“ oder eben „auf jemanden eingehen“. In beiden Fällen ist klar: Mit einem responsiven Design ist gemeint, dass sich das Design der Webseite an das Endgerät anpasst, egal, welche Auflösung es verwendet. Am Ende bedeutet das Flexibilität. Bilder, Logos, Texte, Videos oder Tabellen, die Elemente einer Webseite müssen sich flexibel an das Endgerät anpassen.
Als Webdesigner haben wir natürlich gerne die Kontrolle über alle Geräte. Wir wollen, dass unser Design auf allen Devices „perfekt“ aussieht, müssen uns aber wohl Jeremy Keith anschließen:
„Give up control, not quality.“
Statt feste Pixelwerte verwenden wir nun prozentuale Werte, so dass sich die Webseite immer den Gegebenheiten des Endgeräts des Nutzers anpassen kann. Dieser Umstand bedeutet zwar, dass die Planungs- und Konzeptionsphase einer Webseite aufwendiger ist, die anschließende Pflege verringert sich aber deutlich.
Die neue Maxime lautet: „Mobile First“
Die neue Maxime lautet: „Mobile First“
Für Webdesigner bedeutet das, dass sie von der kleinsten Konstante ausgehen müssen und „Bottom-Up“ programmieren sollten. Das Smartphone ist das Gerät mit der geringsten Leistungsfähigkeit. Wenn also dafür die wichtigsten Informationen und deren Darstellung festgelegt sind, ist es wesentlich einfacher Details hinzuzufügen als diese wegnehmen zu müssen. Dieses Vorgehen bietet sich vor allem an, wenn du eine völlig neue Webseite erstellst.
Einheitliche UX für bestehende Webseiten
Wenn du eine bestehende Webseite für mobile Endgeräte optimieren willst, solltest du dich an dem „Top-Down“ Prinzip orientieren. Dieses Vorgehen wird auch „Graceful Degradation“ genannt und hat die leistungsstarken Systeme wie PC und Notebook im Blick. Natürlich ist das Vorgehen heute nicht mehr zeitgemäß, da viel zu viele Nutzer auf mobilen Geräten eine einheitliche UX erwarten und die Webseite so nicht benutzen können.
Bei der Graceful Degradation wird die Webseite mit einem aufwendigen Display und für die neusten Technologien entwickelt. Funktioniert alles in modernsten Browsern, wird die Webseite auch in älteren Browsern und auf älteren Systemen getestet. Treten dort und natürlich bei den mobilen Endgeräten Probleme auf, wird die Webseite eben für diese schwächeren Systeme abgespeckt. Dies führt zwar dazu, dass moderne Systeme voll ausgereizt werden und neuste Technologien eingesetzt werden können, führt aber auch zu Performance-Problemen. Schwache Systeme oder kleine Displays werden bei diesem Vorgehen bestraft. Meiner Ansicht nach hat das nichts mit einer guten Benutzererfahrung zu tun. Erzwinge die Einfachheit!
Hinzu kommt, dass diese Vorgehensweise der Grundidee des Internets, nämlich das alle Informationen für alle Menschen gleichermaßen zugänglich sind, widerspricht. Auch die Nachrüstung und Erweiterung einer Webseite, die so programmiert ist, ist schwierig.
Content im Vordergrund
Ein moderneres Herangehen ist das „Progressive Enhancement“. Dabei steht der Inhalt einer Webseite im Vordergrund, die Darstellung der Seite, die Browserkompatibilität und die Anpassung der Webseite an verschiedene Displaygrößen wird erst später berücksichtigt.
Die Arbeit des Webdesigners beginnt also damit, die Inhalte der Webseite zu sammeln und zu strukturieren. Erst dann wird die Webseite entwickelt. Beim „Progressive Enhancement“ hat der Webdesigner zunächst eine Webseite im Blick, die dem Nutzer eine gute UX auf dem schlechtesten vorstellbaren System bietet. Wenn in der elementaren Funktion der Webseite alle Informationen dargestellt werden können, wird die Seite Schritt für Schritt verbessert.
Da eine Webseite bei diesem Vorgehen nicht in allen Browsern gleich aussieht, ist es vor diesem Hintergrund nicht sinnvoll mit dem Design der Webseite zu beginnen. Diese Art der Webseitenprogrammierung zwingt den Webdesigner zum Umdenken und dazu, viele Tests durchzuführen.
„User First“ und: Content vor Design
Da Nutzer meistens ins Internet gehen, um Informationen zu suchen und sich zu informieren, sollte dieses Bedürfnis für jeden Webdesigner für eine gute User Experience im Vordergrund stehen. Wenn du die Maxime „User First“ berücksichtigst, stellt sich die Frage nach dem Design kaum. Es geht darum, welche Inhalte der Webseite der Nutzer benötigt und wie er auf diese möglichst schnell, egal auf welchem Gerät, zugreifen kann.
„User First“ und: Content vor Design
So stellt sich eher die Frage, welche Inhalte für den mobilen Nutzer wichtig sind und welche für den, der am Computer sitzt? Davon abhängig sollte das Design der Webseite gestaltet sein. Denn ein Nutzer, der gerade unterwegs ist, hat weder Zeit noch Muße sich durch endlos lange Texte zu quälen. Er möchte eine Information finden und das schnellstmöglich. Wer dagegen gemütlich Zuhause auf dem Sofa liegt, hat kein Problem damit ein wenig nach rechts und links zu gucken. Dieser User wird sehr viel empfänglicher für das Design und eventuelle Features der Webseite sein als ein Nutzer, der auf dem Smartphone nach einer Information sucht.
Keine festen Schriftgrößen verwenden
Auch bei den Schriftgrößen solltest du mit prozentualen Werten arbeiten. Denn: Wenn eine 14pt-Schrift am PC gut zu lesen ist, kann sie am Smartphone eine absolute Quälerei und damit ein Konversionskiller sein. Es gilt also mit Schriftgrößen in prozentualen Werten zu arbeiten und die Lesbarkeit auf den verschiedenen Geräten zu testen. Und wen nicht mit Prozenten, dann mit variablem CSS.
Keine festen Bildgrößen verwenden
Auch die Verwendung von Bildern im responsiven Design ist nicht so einfach. Auch hier sollte dem Nutzer natürlich eine gute UX garantiert sein und so führt uns die Darstellung von Bildern schnell in eine Zwickmühle. Auf Smartphones und auch auf Tablets sollen die Bilder natürlich skaliert werden, am stationären PC mit seinem hochauflösenden Display dagegen dürfen diese scharf dargestellt werden.
Hinzu kommt, dass der Nutzer sich am Smartphone oftmals mit langen Ladezeiten herumärgern muss, wenn die Bilder nicht für das mobile Internet entsprechend aufbereitet sind.
Eine Lösung für dieses Dilemma ist das „Element mit erweiterten Attributen„. Das erlaubt mittlerweile mehrere Bilder für unterschiedliche Größen zu deklarieren. Das bedeutet, das ein Bild nun in verschiedenen Größen auf den Server geladen wird und sich automatisch an das verwendete Endgerät anpasst. Für den Nutzer ist dies ideal, da er sich über kürzere Ladezeiten freuen kann. Gleichzeitig ist aber ein einheitliches UX-Design gewährleistet, da die Bilder auf anderen Devices einfach nur angepasst geladen werden. Ich bin gespannt, wann und ob WordPress dieses Feature im Core einbaut.
Fazit
Um als Webdesigner und Entwickler für eine einheitliche Benutzererfahrung zu sorgen, muss man sich über die verschiedenen Vorgehensweisen im Klaren sein. Außerdem ist man immer davon abhängig, was bereits vorliegt. So ist der Webdesigner natürlich wesentlich freier, wenn er eine Webseite ganz neu erstellt. Wenn schon eine vorhandene Webseite umgestaltet werden soll, kann es mitunter kompliziert werden.
Wichtig ist natürlich auch hier immer, was der Kunde sich wünscht. Aber auch dieser sollte darauf hingewiesen werden, dass seine Webseite nur den nötigen Zweck erfüllt, wenn er den User im Hinterkopf behält. Auch die beste Webseite bringt ihm nichts ein, wenn sie für die User nicht zugänglich ist. Schon aus diesem Grund sollte immer die UX im Vordergrund stehen, ganz geräteunabhängig. Denn nur so wird die Webseite auch ihren Sinn und Zweck erfüllen und der Kunde die Notwendigkeit einsehen, diese aktuell zu halten.
Schreibe einen Kommentar