Die mobile Welle hat kräftig zugeschlagen. Schon 2014 hat in den USA die Internetnutzung mit mobilen Apps Desktop-Apps in den Schatten gestellt) und kurze Zeit später, 2016 wurde weltweit auf Mobilgeräten mehr gesurft als am Desktop. Diese Welle veränderte die Spielregeln für digitales Design.
Noch immer sind Besitzer von Webseiten und Designer damit beschäftigt, aufzuholen. Die Design-Strategien für den Desktop, die sie in den letzten zehn Jahren perfektioniert haben, sind nun zweitrangig geworden und die Macht hat sich zu denen verschoben, die verstehen, wie Design für Mobilgeräte funktioniert.
Für Unternehmer und Designer gleichermaßen hängt das Überleben nun davon ab, die Unterschiede zwischen Design für Desktop- und Mobilanwendungen zu verstehen, und wie man aus beidem das Beste herausholt. In diesem Artikel sehen wir uns einige der besten Vorgehensweisen an, um das ultimative Nutzererlebnis zu erzeugen.
Design für Desktop Apps vs. Mobile Apps: Die großen Unterschiede
—
Bildschirmgröße
Desktop = groß
Das bedeutet mehr als nur die Gelegenheit, mehr Zeug hinzuzufügen. Die Bildschirmgröße hat Einfluss auf alle Designaspekte, besonders die Navigation.
Desktop Apps können feste Navigationsleisten unterstützen, wohingegen Mobilgeräte auf Pullout-Menüs beschränkt sind. Dies ist für die Auffindbarkeit ziemlich wirkungsvoll, dass Nutzer so eventuell Abschnitte finden, die sie bisher nicht kannten. Wusstest du zum Beispiel, dass eBay Motoren und andere Autoteile verkauft? Wenn du ihre mobile Anwendung benutzt, müsstest du dir schon besonders Mühe geben, das zu erfahren.
Mobil = klein
Mobile Apps müssen Platz auf dem Bildschirm sparen, wo immer sie können, daher musst du dir im Klaren darüber sein, welche Elemente wichtig genug sind, sie zu zeigen. Zwei interessante Trends sind aus dieser Hürde entstanden: Minimalismus und das Hamburger-Menü. Beide waren so erfolgreich, dass sie auch ins Desktop-Design durchgesickert sind, wo sie eher stilistische Entscheidung sind als Notwendigkeiten.
Interaktion
Desktop = Cursor
Desktop Apps können vollen Nutzen aus dem Cursor ziehen: Dinge wie Hover-Text oder durch den Cursor ausgelöste Animationen. Dies erlaubt Desktop Apps ganze Seiten nur mit Bildern zu zeigen, bei denen der beschreibende Text nur erscheint, wenn man mit dem Mauszeiger über sie fährt.
Mobil = Gesten
Du kannst bei mobilen Apps nicht mit dem Mauszeiger über ein Bild fahren, aber du hast unzählige Gesten buchstäblich zur Hand. Wischen, schütteln oder das gute alte Drücken geben Anwendungen eine ganz neue Bandbreite an Möglichkeiten (und machen sie unterhaltsamer). Kannst du dir vorstellen, wie langweilig Tinder wäre, wenn man klicken müsste?
Inhalte ordnen
Desktop = Spalten
Jeder Inhalt auf einem Desktop kann im klassischen, mehrspaltigen Format erscheinen – genau wie Print-Inhalte in Zeitungen und Magazinen. Dies bietet sehr viel Flexibilität beim Designen von Layouts und der Positionierung von Text, Bildern und UI-Elementen.
Mobil = Scrollen
Sobald der Inhalt eine bestimmte Länge erreicht, benötigen Mobile Apps langes Scrollen. Und das ist keine schlechte Sache! Mobilanwender bevorzugen sogar durchgängiges Scrollen. Diese Technik spart Platz auf dem Bildschirm, während sie Interaktionen durch Gesten unterhaltsamer macht. Wie Minimalismus und das Hamburger-Menü ist langes Scrollen ein weiterer Trend im mobilen Design, der aufgrund seiner Beliebtheit auf den Desktop übergeschwappt ist.
Mobil = Hochformat und Querformat
Im Gegensatz zu Desktop-Bildschirmen können Mobile Apps zwischen Hoch- und Querformat wechseln. Für Designer und Besitzer von Webseiten ist dies Fluch und Segen zugleich. Zwei Bildschirmausrichtungen ermöglichen mehr Funktionalität und eine bessere Personalisierung, aber kann auch oftmals doppelt so viel Arbeit am Design erfordern.
Funktionalität
Desktop = große Aufgaben
Den Ergebnissen einer Umfrage des Gallup Panels nach zu urteilen, bevorzugen Nutzer Desktop Apps für längere, komplexere Aufgaben. Ein Grund: Bildschirme von Mobilgeräten beschränken die Anzahl der gleichzeitig verfügbaren Funktionen. Das ist ein Grund, weshalb Adobe sich für eine abgespeckte Photoshop-App entschied, statt Photoshop komplett auf Mobilgeräte zu bringen.
Wichtiger noch, es geht um Mentalität. Mobile Apps funktionieren für kurze Sprints und Aufgaben, die sich im Moment ergeben (denk an Preisvergleiche oder deinem Freund zu beweisen, wer den Hund in Game of Thrones spielt). Wenn längere Aufgaben anstehen, wollen Nutzer sich lieber setzen und eine Desktop App mit mehr Funktionen, mehr Inhalt und mehr Eigenschaften nutzen.
Mobil = experimentell
Was Mobile Apps an Funktionalität fehlt, gleichen sie durch Einfallsreichtum wieder aus. Im Moment ist mobiles Design die Speerspitze der Technologie und bietet unzählige, exklusive Features, die eine Desktop App einfach nicht hat.
Hier sind nur ein paar Beispiele:
- Virtual Reality
- Augmented Reality
- Mehrere Kameras
- Beschleunigungs- und Gyroskop-Sensoren
- Mobiles Adressbuch
- Magnetsensoren
Es ist auch nicht immer neue Technik. Manchmal können Apps bestehende Technik auf neue Art nutzen. Snapchat zum Beispiel nutzt den Beschleunigungssensor deines Telefons, um zu wissen, wann du fährst und wechselt zu einem Bitmoji-Auto.
Bewährte Methoden für Desktop Apps und Mobile Apps
—
Was bedeutet all das in praktischer Hinsicht? Was solltest du bei jedem Medium anders machen? Schauen wir uns die genauen Design-Tipps an, um für jedes Medium das Design zu optimieren.
Entwirf die Mobile App zuerst
Wenn du eine Anwendung erstellst, die sowohl für Desktop als auch Mobilgeräte ist, beginne mit der mobilen Version. Es ist leichter, Elemente hinzuzufügen, während du die Bildschirmgröße erhöhst, als Elemente zu entfernen, während die Bildschirmgröße kleiner wird. Zuerst die Desktop App zu machen, erfordert in der Regel mehr zurückrudern zu müssen.
Ordne die Elemente nach Priorität
Mobile Bildschirme haben nur Platz für die wichtigsten Teile deines Designs. Du musst wissen, welche das sind. Liste all deine Designelemente auf und ordne sie nach ihrer Wichtigkeit. Dies hilft später, wenn du entscheiden musst, welche Elemente den besten Platz auf dem Bildschirm bekommen und welche in Hamburger-Menüs versteckt werden. PS: Dies ist genauso hilfreich für Desktop-Designs.
Arbeite mit Spalten
Wie wir bereits gesagt haben, erlauben Desktop Apps mehrspaltige Formate, wodurch wir Optionen wie links- oder rechtsseitige Navigationsmenüs, Sidebars für Widgets und Werbeanzeigen sowie Raum für Kartenstrukturen haben. Das wird auf Mobilgeräten nicht funktionieren, wo eine einzelne, mittige Spalte das Beste ist. Ordne den Inhalt deiner App vertikal (mit den Werbeanzeigen am Ende). Setze Bilder über oder unter den Text, aber nach Möglichkeit nicht daneben.
Nutze die Vorteile von Mobilgeräten
Wir wissen, dass du nicht „noch mehr Arbeit“ hören willst, aber es gibt einen Unterschied zwischen dem Designen für Mobilgeräte und dem einfachen Designen einer Desktop App für ein Mobilgerät. Nutze all die lustigen Sachen, die du mit Mobilgeräten machen kannst, einschließlich einfallsreicher Gestensteuerung und speziellen Sensoren. Diese verbessern nicht nur die Benutzerfreundlichkeit mobiler Apps, sie machen sie auch unterhaltsamer und stechen heraus.
Vergiss nicht die Mentalität
Eine der größten Diskrepanzen zwischen Mobile Apps und Desktop Apps ist die Einstellung des Nutzers. Aufgaben in mobilen Apps sollten schnell auf den ersten Blick verständlich sein. Stell dir vor, jemand versucht deine App zu verwenden, während er zu spät zu seinem Flug kommt. Sie muss schnelle, sporadische Blicke unterstützen und nutzbar sein, während man abgelenkt ist. Lasse die komplexen Aufgaben bei den Desktop Apps.
Mache deine Apps zu Verbündeten
—
Es klingt vielleicht, als wären Desktop Apps und Mobile Apps bittere Rivalen, aber die Wahrheit ist, die meiste Zeit über verwenden Nutzer beide Geräte, selbst für verschiedene Gebiete derselben Aufgabe.
Nimm zum Beispiel Online-Shopping. In der Regel sucht man Produkte auf einem Mobilgerät (wo der Nutzer unterwegs suchen kann) und tätigt dann den tatsächlichen Kauf auf einem Desktop (wo die Tastatur es einfacher macht, die Formulare auszufüllen).
Mit diesem Wissen im Hinterkopf solltest du bei den besten Design-Taktiken für beide Geräte auf dem Laufenden bleiben. Es geht nicht darum, das beste Erlebnis auf dem Desktop zu erzeugen. Oder das beste Erlebnis auf Mobilgeräten. Es geht darum, das beste Erlebnis zu erzeugen. Punkt. Um das zu erreichen, optimiere sowohl die Apps für den Desktop als auch für Mobilgeräte, um alle Faktoren zu berücksichtigen.
