Mobile Web­de­sign – 15 Tipps für eine gute UX

„Mobile first!“ ist All­tag gewor­den. Mit über 85% mobi­ler Inter­net­nut­zer sind wir im Zeit­al­ter des vor­ran­gig mobi­len Inter­nets ange­kom­men. Das Mobile Web­de­sign fängt das tech­ni­sche Defi­zit zu grö­ße­ren, sta­tio­nä­ren Auf­lö­sun­gen ab und rich­tet Con­tent und Sei­ten­mo­dule spe­zi­ell auf mobile Inter­ak­tion aus, damit die Nut­zer­er­fah­rung gerä­te­über­grei­fend kon­stant bleibt. Darin liegt die Her­aus­for­de­rung. In die­sem Arti­kel haben wir die Tücken des Mobile Web­de­signs zusam­men­ge­fasst.

TEXT

Viel mehr als nur Infor­ma­tion.

Das Schrei­ben von Con­tent ist schon lange mehr als nur das Auf­be­rei­ten von Infor­ma­tion. Texte müs­sen auf digi­ta­len Platt­for­men und im Zeit­al­ter des Online-Mar­ke­tings auch vie­len tech­ni­schen Anfor­de­run­gen genü­gen, damit sie, nicht nur inhalt­lich, über die POSI­TIVE NUT­ZER­ER­FAH­RUNG IM GESAMT­KON­TEXT ent­schei­den.

01. TEXT­UM­FANG

Auf mobi­len Gerä­ten kann zu viel Text schnell erschla­gend wir­ken. Lange Text­blö­cke sind schwer zu lesen und kön­nen dazu füh­ren, dass Nut­zer über­for­dert sind. IN DURCH­SCHNITT MUSS EIN MOBI­LER NUT­ZER 3 BIS 5-MAL MEHR SCROL­LEN, um den den glei­chen Inhalt zu erfas­sen, den ein Desk­top-User auf einem Bild­schirm sieht. Dazu kommt, dass mobile Nut­zer ihre Ses­sion häu­fi­ger unter­bre­chen und ein Wie­der­ein­stieg bei gro­ßen Text­men­gen schwer fällt.

TIPP
Hal­ten Sie Texte kurz und prä­gnant. Nut­zen Sie Absätze, Über­schrif­ten und Lis­ten, um den Text auf­zu­lo­ckern und die Les­bar­keit zu ver­bes­sern. Wich­tige Text­aus­sa­gen soll­ten sich im mobi­len View­port des Nut­zers befin­den.

Auf mobilen Geräten kann zu viel Text schnell erschlagend wirken. Lange Textblöcke sind schwer zu lesen und können dazu führen, dass Nutzer überfordert sind.
Für klare Schriftarten gilt die Regel, dass die Größe für Fließtext auf mobilen Websites 16 bis 18 px betragen sollte

02. TEXT­GRÖSSE

Für klare Schrift­ar­ten gilt die Regel, dass die Größe für Fließ­text, auch para­graph oder body-text genannt, AUF MOBI­LEN WEB­SITES MIN­DES­TENS 16 BIS 18 PIXEL BETRA­GEN SOLLTE. Alles unter­halb beein­träch­tigt die Les­bar­keit. Umge­kehrt erschwe­ren aber auch zu große oder sehr deko­ra­tive Schrif­ten das Lesen. Es muss also immer im Ein­zel­fall ent­schie­den wer­den, ob eine Schrift­art in der Norm­größe les­bar ist oder ange­passt wer­den muss.

TIPP
Prü­fen Sie die Verkleinerungs­fähigkeit der gewähl­ten Schrift­ar­ten und ver­wen­den Sie für Lese­text maxi­mal 30 bis 40 Zei­chen pro Zeile mit einem Zei­len­ab­stand von 150%. Ein guter Schnell­test: Ist die Copy mit einem Abstand von 40 bis 50 cm zum Smart­phone noch les­bar?

03.TEXTKONTRAST

Text­kon­trast ver­gleicht die rela­tive Hel­lig­keit von Hin­ter­grund zu Schrift­farbe. Das Kon­trast­ver­hält­nis reicht von 1:1 (kein Kon­trast) bis 21:1 (maxi­ma­ler Kon­trast). JE HÖHER DAS KON­TRAST­VER­HÄLT­NIS IST, DESTO LEICH­TER FÄLLT DAS LESEN AUS. Ein guter Richt­wert liegt bei 3:1 bis 8:1 je nach Schrift­größe. In den Richt­li­nien für bar­rie­re­freie Inhalte (WCAG) spricht man von AA-Kon­for­mi­tät - ein Schrift­kon­trast, der für die meis­ten Men­schen wahr­nehm­bar ist. Eine AAA-Kon­for­mi­tät nimmt an, dass das Farb­paar für eine größt­mög­li­che Anzahl von Men­schen wahr­nehm­bar ist.

TIPP
Nut­zen Sie frei ver­füg­bare Con­trast-Che­cker (WCAG) im Netz, um vorab für das Mobile Web­de­sign Farb-Palet­ten für Hin­ter­gründe und Schrif­ten zusam­men­zu­stel­len, die den Kon­trast-Anfor­de­run­gen genü­gen.

Textkontrast vergleicht die relative Helligkeit von Hintergrund zu Schriftfarbe
Erhöhte Lesezeiten steigern die Frustration

04. LESE­ZEIT

Der mobile Nut­zer hat es eilig – ERHÖHTE LESE­ZEI­TEN STEI­GERN DIE FRUS­TRA­TION, wenn man bedenkt, dass ein mobile Sit­zung im Durch­schnitt nur 60 bis 75 Sekun­den lang ist. Eine sta­tio­näre Ses­sion ist im Ver­gleich 2 bis 3-mal so lang. Hinzu kommt die Tat­sa­che, dass Online-Leser 20 bis 30 % mehr Zeit für einen Text benö­ti­gen, als sie für das Able­sen der gedruck­ten Text-Vari­ante brau­chen wür­den.

TIPP
Struk­tu­rie­ren Sie Text­in­halte so, dass Kern­aus­sa­gen und wich­tige Infor­ma­tio­nen prio­ri­siert sind oder sich gra­fisch von weni­ger wich­ti­ge­ren Inhal­ten abhe­ben.

MODULE

CON­TENT EIN­FACH GUT ORGA­NI­SIE­REN.

Zur Umset­zung von Web­site-Con­tent wer­den Bau­steine ver­wen­det, die Inhalte struk­tu­rie­ren und orga­ni­sie­ren sol­len. DIE WAHL DES RICH­TI­GEN MODULS IST GERADE FÜR EINE POSI­TIVE UX IM MOBILE WEB­DE­SIGN ENT­SCHEI­DEND, denn sta­tio­när funk­tio­nie­rende Con­tent-Ele­mente müs­sen nicht zwangs­läu­fig die beste Wahl für mobil sein.

05. POPUPS, MODALS

Feed­back-, News­let­ter- oder Rating-POPUPS SIND LAUT ZAHL­REI­CHER STU­DIEN NICHT SON­DER­LICH BELIEBT. Grund dafür sind oft fal­sche Timings, unpas­sen­der Kon­text oder ein­fach nur die hohe Fre­quenz. Auf mobi­len Gerä­ten wir­ken sie durch ihre Größe noch stö­ren­der und sind oft schwer zu schlie­ßen.

TIPP
Ver­mei­den Sie modale Pop-ups auf mobi­len Web­sites oder set­zen Sie sie nur dann ein, wenn sie ech­ten Mehr­wert bie­ten. Bevor­zu­gen Sie nicht-modale Pop-Ups, die die Inter­ak­tion mit der Web­site nicht unter­bre­chen und Inhalte nur par­ti­ell ver­de­cken.

Vermeiden Sie modale Pop-ups auf mobilen Websites oder setzen Sie sie nur dann ein, wenn sie echten Mehrwert bieten.
Eine komplexe Navigation kann auf mobilen Geräten schnell unübersichtlich werden

06. MOBILE MENU

Eine kom­plexe Navi­ga­tion kann auf mobi­len Gerä­ten schnell unüber­sicht­lich wer­den und die Nut­zer­er­fah­rung nega­tiv beein­flus­sen. DER UMFANG DER SEI­TEN UND UNTER­SCHIED­LI­CHE SEI­TEN­TIE­FEN BEEIN­FLUS­SEN DIE WAHL DES PAS­SEN­DEN MOBILE MENUS. Oft las­sen sich Sei­ten in Pri­mary- und Secon­dary-Grup­pen auf­tei­len, womit sich auch ein Menu in pri­mä­res Haupt­menu und sekun­dä­res Zweit­menu tren­nen lässt. Mehr zum Thema Navi­ga­tion gibt es in die­sem Blog­bei­trag.

TIPP
Ver­wen­den Sie eine ein­fa­che, gut struk­tu­rierte Navi­ga­tion, die zu dem Umfang der Web­site pas­sen. Wäh­rend über­sicht­li­che Sei­ten mit einem Full­screen- oder Bur­ger-Menu aus­kom­men, benö­ti­gen sei­ten­starke Web­sites hier­ar­chi­sche Mul­ti­le­vel- oder Drop­down-Menus.

07. TABS

Das Ver­schach­teln von Inhal­ten ist im Mobile Web­de­sign eine Opti­mie­rungs­maß­nahme, um die Über­sicht­lich­keit von Inhal­ten zu gewähr­leis­ten. TABU­LA­TO­REN SIND DABEI EINE PRAK­TI­SCHE METHODE, UM INFOR­MA­TIO­NEN AUF KLEI­NE­REM RAUM ZU ORGA­NI­SIE­REN, aber auf mobi­len Gerä­ten ver­lie­ren Tabs mit zu vie­len Rei­tern ihre Usa­bi­lity.

TIPP
Stel­len Sie sicher, dass Tab-Rei­ter groß genug und bedien­bar sind. Erset­zen zu breite Tab-Ele­mente für das Mobile Web­de­sign durch ver­ti­kale Akkor­de­ons, um Inhalte zu ver­schach­teln.

Auf mobilen Geräten verlieren Tabs mit zu vielen Reitern ihre Usability
Mediagrids sind nicht wirklich etwas für Smartphone-Dimensionen.

08. MEDIA GRIDS

Gale­rien in Form von Bild­ras­ter, Pro­dukt­ka­cheln oder Blog-Grids machen auf gro­ßen Desk­tops wirk­lich was her, sind aber durch ihre Viel­zahl an Spal­ten und Zei­len nicht wirk­lich etwas für Smart­phone-Dimen­sio­nen. Sta­pelt man das Grid ver­ti­kal, ent­steht schnell eine nut­zer­un­freund­li­che Modul-Höhe.

TIPP
Ver­wen­den Sie respon­sive Bild­ras­ter mit maxi­mal 2 Spal­ten und begren­zen sie die Anzahl der Ele­mente durch eine Pagi­nie­rung oder Nach­lade-Funk­tion. Alter­na­tiv kön­nen Media Grids durch hori­zon­tale Carou­sel-Module ersetzt wer­den.

09. TABEL­LEN

Tabel­len auf mobi­len Gerä­ten sind nur sel­ten über­schau­bar, BESON­DERS WENN SIE GROSS UND KOM­PLEX SIND. Man kann sie hori­zon­tal oder ver­ti­kal scroll­bar anle­gen, ver­schlech­tert damit aber die opti­sche Ori­en­tie­rung zu Zei­len und Spal­ten.

TIPP
Ver­wen­den Sie respon­sive Tabel­len, die sich an die Bild­schirm­größe anpas­sen. Über­le­gen Sie, ob die Infor­ma­tio­nen in einer Tabelle in einer ande­ren Form prä­sen­tiert wer­den kön­nen, wie z.B. in einer Liste oder durch Auf­tei­lung in meh­rere kleine Tabel­len oder Sta­peln von Tabel­len­zel­len, um die Les­bar­keit zu ver­bes­sern.

Tabellen auf mobilen Geräten sind nur selten überschaubar,
In der Regel sind komplexe Diagramme auf Grund Ihrer Breite nicht für die mobile Ansicht geeignet.

10. DIA­GRAMME

Genau wie bei Tabel­len ver­hält es sich mit Säu­len-, Kur­ven- oder Flä­chen­dia­gram­men. IN DER REGEL SIND KOM­PLEXE DIA­GRAMME AUF GRUND IHRER BREITE UND DEN DATEN-DETAILS NICHT FÜR DIE MOBILE ANSICHT GEEIG­NET.

TIPP
Ver­tau­schen Sie die Daten­ach­sen, indem Sie hori­zon­tale Dia­gramme damit ver­ti­kal anord­nen oder erset­zen Sie die gra­fi­schen Dia­gramme durch Lis­ten, die für Mobile Web­de­sign geeig­net sind.

11. PAGI­NIE­RUNG

In der mobi­len Ansicht erhö­hen blät­ter­bare Karus­selle, Slider oder Media Grids oft erheb­lich die Slide-Anzahl, da von Mehr­fach-Slides auf Ein­zel-Slide umge­schal­tet wird. NAVI­GA­TI­ONS-DOTS ODER SEI­TEN­ZAH­LEN SIND IM ZWEI­STEL­LI­GEN BEREICH NICHT MEHR DAR­STELL­BAR.

TIPP
Ach­ten Sie dar­auf, dass Pagi­nie­run­gen über­sicht­lich und bedien­bar blei­ben oder im Sinne der bes­se­ren Inter­ak­tion bes­ser durch Vor-Zurück-Navi­ga­ti­ons­pfeile ersetzt wer­den soll­ten.

Achten Sie darauf, dass Paginierungen übersichtlich und bedienbar bleiben.
Hover-Interaktionen sind nur für stationäre Geräte umsetzbar.

12. HOVERS

Hover-Inter­ak­tio­nen sind nur für sta­tio­näre Geräte umsetz­bar. Expan­die­rende oder erschei­nende Infor­ma­tio­nen wie bei Hot­spots, Tool­tips oder Text-Bild-Over­lays sind mobil nur OnClick abruf­bar – OHNE EXPLI­ZITE CALL-TO-ACTION AUF DER INTER­AK­TI­VEN FLÄ­CHE GEHT DIE GEWÜNSCHTE INTER­AK­TION AM NUT­ZER VOR­BEI.

TIPP
Ach­ten Sie dar­auf, Hover-Inter­ak­tion für mobil text­lich mit einer Call-To-Action für Öff­nen und Schlie­ßen zu ver­se­hen und auf OnClick umzu­rüs­ten.

PER­FOR­MANCE

Schnelle Lade­zei­ten ein abso­lu­tes Muss.

Im mobi­len Web­de­sign sind schnelle Lade­zei­ten essen­zi­ell. EIN GUTER SPEED-INDEX SOLLTE IN DER KON­ZEP­TION DES MOBI­LEN WEB­DE­SIGNS IMMER IM FOKUS BLEI­BEN, um eine schnelle und benut­zer­freund­li­che mobile Web­site zu erstel­len. Hier die wich­tigs­ten Aspekte, die Sie beach­ten soll­ten…

13. MOBILE-FIRST DESIGNS

Begin­nen Sie Kon­zep­tion, Design und Ent­wick­lung immer mit Blick auf mobile Geräte. Ver­ein­fa­chen Sie die Sei­ten­ar­chi­tek­tur, indem Sie mit mög­lichst redu­zier­tem Ein­satz von Res­sour­cen das Lay­out pla­nen und anle­gen.

14. CON­TENT-HIER­AR­CHIE

Legen Sie eine klare Con­tent-Hier­ar­chie fest, um sicher­zu­stel­len, dass die wich­tigs­ten Inhalte zuerst gela­den wer­den und prio­ri­sie­ren Sie Inhalte „Above the Fold“.

15. MEDIEN-INHALTE

Erstel­len Sie eine Medi­enstra­te­gie, um unnö­tig große Gra­fi­ken, Bil­der und Videos zu ver­mei­den und nur die erfor­der­li­chen Bild­grö­ßen im kleinst­mög­li­chen Datei­for­mat zu laden. Ver­wen­den Sie dabei moderne For­mate wie *.SVG für Gra­fi­ken, *.WEBP für Bil­der oder *.WEBM für Videos.

FAZIT

Ein Mobile Web­de­sign ist auf eine sehr redu­zierte Flä­che und die mög­lichst direkte Ver­mitt­lung von Kern­in­for­ma­tio­nen aus­ge­legt. Gleich­zei­tig ist ein Mobile Web­de­sign nicht 1:1 auf ein groß­for­ma­ti­ges und sta­tio­nä­res Gerät über­trag­bar. Die Her­aus­for­de­rung liegt darin, eine gerä­te­über­grei­fende, opti­male User Expe­ri­ence zu schaf­fen, obwohl die Rah­men­be­din­gun­gen an Con­tent und Inter­ak­tion stark von­ein­an­der abwei­chen. Letzt­lich wird man es nicht ver­mei­den kön­nen, indi­vi­du­elle, best­mög­li­che Lösun­gen für spe­zi­elle Hard­ware zu kon­zi­pie­ren, um Abstri­che in der Usi­bi­lity zu ver­mei­den.

Face­book
XING
Lin­ke­dIn
War die­ser Bei­trag hilf­reich?
Wir unter­stüt­zen Sie gerne bei Ihrem nächs­ten Projekt. Von der Kon­zep­tion bis zum Design oder der voll­stän­di­gen Ent­wick­lung einer Web­site.
SAG’
HALLO!
Impressum

//

Datenschutz
PROJEKTANFRAGE
Super, Sie haben bei Ihrem Projekt an uns gedacht. Vielen Dank! Beschreiben Sie kurz, worum es geht, damit wir ein gutes Feedback geben können. Wir melden uns in Kürze zurück. Bis bald!
Von Ihnen im Formular eingegebene Daten speichern und verwenden wir ausschließlich zur Bearbeitung Ihrer Anfrage. Ihre Daten werden verschlüsselt übermittelt. Wir verarbeiten Ihre personenbezogenen Daten im Einklang mit unserer Datenschutzerklärung.

DANKE.

Wir haben ihre Anfrage erhalten und melden uns umgehend.