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.

different mobile and desktop options
Wie kannst du ein tolles Erlebnis sowohl für Nutzer von Desktop Apps, als auch von Mobile Apps erzeugen? Es ist eine Herausforderung.

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.

ebay desktop
The large desktop screen allows eBay’s navigation menu to “suggest” categories that are initially hidden on mobile. Via ebay
ebay app design

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.

Leonardo di Caprio on Tinder
Spotte nicht über Gestensteuerung. Tinder hat auf ihnen ein ganzes Imperium aufgebaut. Via the Loop

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.

spotify desktop and mobile design
Die Desktop App, Mobile App und Tablet App von Spotify. Via Spotify

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.

adobe photoshop desktop design
It’s just not possible to transfer all of Photoshop’s tools to mobile, leading to only hybrids and Lite version on mobile. Via Adobe.
photoshop app design

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.

snapchat car
Während der Beschleunigungssensor für praktischere Funktionen gedacht war, zum Beispiel herauszufinden, wann der Nutzer die Bildschirmausrichtung ändert, fand Snapchat eine kreativere Verwendung für ihn. Via Gizmodo.

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.

skype desktop and mobile design
Skypes Desktop App hat eine linksseitige Navigation, während die Mobile App komplett vertikal ist. Via Skype.

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.

web and app design for blockchain company
Web- und App-Design von Mike Barnes.

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.

Du brauchst ein Desktop oder Mobile App Design?
Unsere kreative Designer-Community entwirft dir etwas Erlebnisreiches!