Grafikdesign für Rittler und co, das die Erschaffung von AI in Anlehnung an Michelangelos Foto der Erschaffung von Adam zeigt
Webdesign & E-Commerce

5 UX-Elemente, die man für eine gute, mobile Website benötigt

Eine Webseite ohne Optimierung für mobile Endgeräte ist also ein absolutes No-Go. Das sind unsere Tipps aus der Werbeagentur für eine gute User Experience!

Die meisten User und Userinnen sind mobil online - und das nicht nur einmal täglich, sondern für die meisten Dinge, die sie im Netz erledigen. Eine Website ohne Optimierung für mobile Endgeräte ist also ein absolutes No-Go. Ohne UX für die Mobile User geht nichts. Das sind unsere Tipps aus der Werbeagentur für eine gute User Experience!

user experience, Rittler und Co, handy, tablet, laptop, rechner  02

Warum muss es UX für Mobile sein?

Usability ist wichtig: Niemand ruft auf dem Smartphone gerne Inhalte auf, deren winzige Texte unlesbar sind, deren mikroskopisch kleine Buttons nicht erkennbar sind und deren Grafiken man nur mit der Lupe wahrnimmt. Mobile heißt erst einmal, dass alles eine Nummer kleiner erscheint. Trotzdem muss die Webseite lesbar und vor allem nutzbar sein.

UX für Mobile heißt also, die gewohnten Inhalte für den kleineren Bildschirm zu optimieren - bei gleichzeitig hervorragenden Inhalten, denn darauf legen die Suchmaschinen nach wie vor Wert. Responsives Website-Design ist ein Muss, denn Google empfiehlt es. 

#1 Vom Mobile zu Desktop statt umgekehrt

Früher kopierte man die Inhalte der für den Desktop erstellten Website einfach in die mobile Version. Heute heißt es Mobile First: Die meisten User gehen von der mobilen Variante aus vielleicht noch einmal an den PC, umgekehrt wird es aber nichts.

Das bedeutet: Die Inhalte werden von der kleinen Variante (optimiert für den Bildschirm des Smartphones) hin zur großen Variante für den Desktop entwickelt. Texte sind von Anfang an kurz, Bilder sind niemals nur Deko-Elemente. Flash und JavaScript sind Ballast, die mobil nicht benötigt werden.

#2 Darstellungsbereich anpassen

Vertikales Scrollen kann vermieden werden, wenn der Darstellungsbereich an mobile Touchscreens angepasst wird. Das ist einfach: Statt die Elemente untereinander anzuordnen, werden sie versteckt. Durch das Antippen hingegen werden sie sichtbar. Option zum Schließen nicht vergessen: Die Inhalte verdecken oft den kompletten Screen, wenn sie erst einmal geöffnet sind. Größe und Abstand der Tofu-Elemente müssen an mobile Devices angepasst sein, und eine Mouse-over-Funktion wird überhaupt nicht benötigt.

Übrigens gehören (und das weiß eigentlich auch jede Werbeagentur) in der Mobile Version vieles schon auf die Startseite. Das gilt für die Buchungsmaske genauso wie die Option, sich über bekannte Log-Ins anzumelden (beispielsweise "über Google anmelden").

#3 Bottom-Sheet

Webseiten bieten Icon-Elemente wie Suche, Warenkorb und dergleichen oft im oberen Bereich. tatsächlich geht die Tendenz im mobilen Bereich jedoch dahin, dass die Icons unten sitzen. Warum? Weil die meisten Smartphone-Nutzer ihre Touchscreens mit dem Daumen bedienen. Und der kommt einfach unten besser ran. UX heißt schließlich nicht, dass es gut aussieht, sondern, dass es für den User oder die Userin eine tolle Erfahrung ist - mit allen Sinnen, natürlich inklusive dem Tastsinn

Über den geschickten Einsatz von Analytics-Daten findet die Webdesign Agentur übrigens heraus, welche Seiten besonders oft aufgerufen werden, eine höhere Priorität benötigen und deshalb im Vordergrund platziert werden sollten - oder doch im oberen Bereich der Mobile Version der Webseite, damit die Seiten sofort auffallen.

#4 Content = Text + Video + Bild

... und alles soll auf jedem Mobile Device optimal wirken. Doch wie funktioniert das?  Im Grunde lässt sich jeder Text lässt  durch Icons ersetzen. Die optimale Schriftgröße des Textes liegt dabei zwar bei 16 px, aber aufgrund der unterschiedlich großen mobilen Screens sollte die Schriftgröße grundsätzlich auch skaliert werden.

Alle anderen Inhalte müssen schnell laden, denn der Page-Speed ist wichtig. Das ist ein wichtiger Ranking-Faktor bei Google, und eine zu lange Ladezeit vergrault User und Userinnen. Bilder, Videos und Audio-Inhalte sollten in der Mobile-Version also gegebenenfalls komprimiert und skaliert sein. Ob die Inhalte optimal dargestellt werden, kann man beispielsweise über Ryte checken (free account möglich).

#5 Suchverhalten über Voice und Visual

Die normale Googlesuche mit einzelnen Keywords wird heute nicht mehr so häufig genutzt. Viele Menschen stellen ihre Fragen an Siri, Alexa und anderen. Longtail ist dementsprechend ein wichtiges Stichwort. Fotosuche spielt ebenfalls eine immer wichtigere Rolle. Daher muss jede Werbeagentur Graz beachten, dass Inhalte auch über nice und visual auffindbar sind. Und vielleicht macht es sogar Sinn, die nötigen Elemente für die Suchfunktion auf der Webseite zu integrieren.

Anfrage senden
rittler&du
Designerin Martina Nette
Noch Fragen?
alles klar oder noch fragen? melde dich bei uns
Martina Nette