Zwei Milliarden Menschen, also mehr als die Hälfte aller Internetnutzer, surfen ausschliesslich übers Handy. Schätzungen zufolge wird diese Zahl innerhalb der nächsten vier Jahre auf 72,5% ansteigen. Wer also ausschliesslich für die Desktopnutzung konzipiert, hat ein grosses Problem.
Viele von uns könnten nicht auf ihr Smartphone verzichten. Wir brauchen es, um mit unseren Freunden zu kommunizieren, Filme zu streamen, Essen zu bestellen, Einkäufe zu bezahlen, Erinnerungen festzuhalten und Nachrichten zu konsumieren. Kein Wunder, setzen immer mehr Unternehmen bei der Konzeption ihrer App, Website oder Software auf Mobile-first.
Was versteht man unter Mobile-first Design?
2010 verkündete der damalige Google CEO Eric Schmidt, dass das Unternehmen sich bei seinen Designpraktiken zukünftig verstärkt auf Mobile-Nutzer konzentrieren würde. Mobile-first bedeutet also nichts anderes, als dass man beim Entwurf von digitalen Produkten mit der mobilen Version startet, die dann an grössere Bildschirme angepasst wird, mit dem Ziel, ein besseres Nutzererlebnis zu schaffen. Indem du deine Website zuerst für Smartphones entwirfst, gewährleistest du nämlich, dass die User auf jedem Gerät ein einwandfreies Erlebnis haben.
Schmidt ging sogar so weit zu sagen: «Die Antwort sollte immer Mobile-first sein. Setzen Sie darum stets Ihr bestes Team und Ihre beste App auf Ihre Mobile App.»
Diese Vorteile bringt Mobile-first Design
Es ist grundsätzlich leichter, mit dem Mobile Design anzufangen und das Design anschliessend für Desktop anzupassen als umgekehrt. Der Grund dafür ist, dass die Version fürs Smartphone in der Regel eine reduzierte ist, die nur das Wichtigste beinhaltet. Mehr lässt sich später einfach hinzufügen. Und weil das Mobile Design so schlank und einfach gehalten ist, lässt es sich auch schneller und weniger aufwendig fertigstellen. Damit eignet es sich bestens als Test-Version. Zudem erfordert es die Les- und Sichtbarkeit von Inhalten auch auf kleinem Bildschirm, was wiederum Menschen mit eingeschränktem Sehvermögen zugutekommt. Und ein Design, das für Menschen mit Sehschwäche funktioniert, funktioniert auch für alle anderen. Und zu guter Letzt: Da das Design bei Mobile-first stark reduziert ist, kommen die wichtigsten Inhalte zuerst. Das macht sie auch für Menschen mit kognitiven Einschränkungen zugänglich.
Tipp 1: Mobile-first = Content-first
Beim Mobile-Design sollten alle für die Nutzer relevanten Inhalte vorhanden sein – und sonst nichts. Alles weitere macht die Seite unübersichtlich und lenkt die User ab.
Wähle einen inhaltsorientierten Ansatz und strukturiere das Design um deine Hauptbotschaft herum. So vermeidest du Chaos und Ablenkungen.
Aufgrund der beschränkten Platzverhältnisse musst du deine Inhalte einer visuellen Hierarchie unterstellen. Das Wichtigste wird am plakativsten dargestellt, weniger bedeutende Elemente rücken in den Hintergrund.
Tipp 2: einfache Navigation
Das Hamburger-Menü hat sich vielfach bewährt, um nebensächliche Inhalte im Menü bündeln. Allerdings verringern versteckte Navigationsschaltflächen wie diese laut einer Studie die Auffindbarkeit von Inhalten um 21%.
Leider ist es in den meisten Fällen nicht möglich, alle Links auf einmal auf der Seite anzuzeigen und versteckte Navigationsflächen somit unverzichtbar. Die Lösung heisst: Kombinavigation. So sieht der Nutzer die für ihn relevantesten Optionen auf einen Blick, der Rest ist im Hamburger-Menü untergebracht.
Tipp 3: Links- & Rechtshänder
Linkshänder bedienen ihr Handy mit der linken Hand und Rechtshänder mit der rechten. Logisch, oder? Auf der obigen Abbildung siehst du, wie gut die verschiedenen Bereiche auf einem durchschnittlichen Handyscreen erreichbar sind. Die blaugrünen Bereiche sind am besten erreichbar, die rötlichen Bereiche am schlechtesten.
Wie du vielleicht bemerkt hast, sind die beiden Abbildungen für die linke und für die rechte Hand nicht identisch. Um sicherzugehen, dass jede und jeder problemlos an Klickflächen herankommt, ist es schlau, diese in der unteren Mitte des Bildschirms zu platzieren.
Die Hauptnavigation wäre am unteren Rand am besten aufgehoben, da sie dort zugänglich, aber nicht im Weg ist.