Die negativen Auswirkungen von Mobile-First-Webdesign auf den Desktop

• Wenn ein für Mobilgeräte optimiertes Layout unverändert auf den Desktop hochskaliert wird, werden Bilder, Text und Abstände übermäßig groß, und die über lange Seiten verteilten Informationen verschlechtern die Nutzbarkeit durch Content Dispersion
• Da mehr als 55 % des weltweiten Web-Traffics von Mobilgeräten stammen, ist Mobile First weit verbreitet. In Kombination mit Minimalismus und auf große Bilder fokussiertem Design sinkt jedoch die Informationsdichte auf dem Desktop erheblich.
• Der Vergleich von verstreuten und kompakten Layouts in 13 qualitativen Usability-Tests zeigte, dass verstreute Seiten das Auffinden und Verstehen von Informationen erschweren.
• Verstreute Inhalte erhöhen durch mehr Scrollen und Klicken die Interaktionskosten und können dazu führen, dass zusammengehörige Informationen über mehrere Bildschirme hinweg im Gedächtnis behalten werden müssen, was kognitive Belastung, Frustration und Vertrauensverlust nach sich ziehen kann.
• Auf dem Desktop sollten wichtige zusammengehörige Informationen im selben Viewport gebündelt werden, und mobile-only Muster wie Akkordeons sollten nur eingeschränkt eingesetzt werden.

---

Was ist Content Dispersion?

• Content Dispersion ist das Phänomen, dass Inhalte responsiver Webseiten auf großen Laptop- oder Desktop-Bildschirmen übermäßig groß und in die Länge gezogen wirken.
• Wenn eine Mobile-First-Seite auf dem Desktop gerendert wird, erzeugen bildschirmfüllende Bilder, aufgeblähte große Schrift und übermäßiger Negativraum lange Seiten, die mehr Scrollen erfordern.
• Wenn die Streuung nur in einigen Abschnitten auftritt, ist das möglicherweise kein großes Usability-Problem. Wenn jedoch der Großteil der Seite betroffen ist, ist der kumulative Effekt meist negativ.
• Auf Geräten mit großem Bildschirm erhöht Content Dispersion die kognitive Belastung, die Interaktionskosten, die Schwierigkeit beim Verständnis von Inhalten und die Frustration der Nutzer.

Designtrends, die Content Dispersion erzeugen

• Der Mobile-First-Ansatz bedeutet, zuerst für Mobilgeräte zu entwerfen und dann für Tablets und Desktops anzupassen.
  • Da mehr als 55 % des weltweiten Web-Traffics von Mobilgeräten kommen, ist dieser Ansatz weit verbreitet.
• Minimalismus entfernt Designelemente, die für die Kernfunktion oder Botschaft einer Website nicht notwendig sind.
  • Um einen überladenen Eindruck zu vermeiden, wird viel Negativraum verwendet.
  • Dadurch verringert sich die auf einem Viewport sichtbare Menge an Inhalten, was zu langen Seiten mit geringer Informationsdichte führen kann.
• Ein auf große Bilder fokussiertes Design hängt mit dem Trend zusammen, auf modernen Webseiten hochauflösende Bilder in großem Format zu verwenden.
  • Große Bilder können Aufmerksamkeit erzeugen, aber textbasierte Inhalte auch übermäßig auseinanderziehen.
  • Einige große Bilder auf einer Desktop-Seite können gut funktionieren.
  • Wenn es zu viele große Bilder gibt, werden textbasierte Inhalte zwischen den Bildern über die ganze Seite zerstückelt.

Vorgehensweise der 13 Usability-Tests

• Die Tests kombinierten 13 qualitative Usability-Tests mit halbstrukturierten Interviews.
• Verglichen wurde die Kombination aus zwei Layouts und zwei Seitentypen.
  • Layouts: kompakt, verstreut
  • Seitentypen: Startseite, Produktseite
  • Insgesamt wurden 4 Prototypen verwendet.
• Für die verstreuten Prototypen wurden reale Desktop-Webseiten mit geringer Inhaltsdichte, viel Negativraum und großer Schrift identifiziert und neu aufgebaut.
• Die kompakten Versionen wurden separat erstellt, verwendeten aber dieselben Inhalte wie die ursprünglichen Seiten.
• Die Nutzer führten in allen 4 Prototypen offene Aufgaben aus und nahmen anschließend an Diskussionen teil, in denen die beiden Versionen jedes Seitentyps verglichen wurden.
• Die vollständige Forschungsmethodik ist auf einer separaten Methodenseite beschrieben.

Usability-Probleme durch verstreute Inhalte

• Wenn die Streuung weite Teile einer Seite betrifft, kann sie die gesamte User Experience stark beeinträchtigen.
• Die wichtigsten Probleme sind:
  • größere Seitenlänge und höhere Interaktionskosten
  • höhere kognitive Belastung
  • Schwierigkeiten beim Aufbau eines konzeptuellen Modells der Seite
  • mehr Frustration
  • geringeres Vertrauen

• Mehr Scrollen und Klicken

  • Content Dispersion erzeugt lange Seiten, die mehr Scrollen erfordern, und mobile-only Designelemente wie Akkordeons verlangen mehr Klicks, um auf Inhalte zuzugreifen.
  • Wenn eine Mobile-First-Website auf großen Bildschirmen gerendert wird, werden Inhalte verstreut und die Seite wird lang; in Kombination mit Minimalismus und bildzentriertem Design verstärkt sich dieser Effekt.
  • Wenn Inhalte über mehrere Viewports verteilt sind, wird es schwieriger, bestimmte Informationen auf der Seite zu finden.
  • Die Testteilnehmer hatten auf der verstreuten Produktseite größere Schwierigkeiten, Informationen zu finden, als in der kompakten Version.

• Desktop-Probleme mobiler Muster

  • Akkordeons können auf Mobilgeräten viele Informationen auf engem Raum einklappen, Seiten verkürzen und Nutzern helfen, direkt zu Bereichen ihres Interesses zu gelangen.
  • Auf großen Bildschirmen ist das Problem langer Seiten relativ geringer, sodass Akkordeons zur Fragmentierung von Inhalten führen und die Interaktionskosten beim Auffinden wichtiger Informationen deutlich erhöhen können.
  • Ein Teilnehmer sagte über das Produktinformations-Akkordeon im verstreuten Prototypen, dass er jeden Eintrag öffnen und schließen musste, um die Informationen zu lesen.
  • Ein anderer Teilnehmer bewertete die kompakte Seite als besser, weil sie weniger Klicks erforderte und die Informationen direkt sichtbar waren.

• Erhöhte kognitive Belastung

  • Je größer die Bilder und je breiter der Negativraum, desto stärker wird textbasierter Inhalt über mehrere Viewports fragmentiert.
  • Wenn zusammengehörige Inhalte durch Bildschirmgrenzen getrennt werden, fällt es Nutzern schwerer, sie als eine Einheit wahrzunehmen.
  • Für Bewertungen oder Entscheidungen müssen Informationen aus verschiedenen Viewports erinnert oder durch Vor- und Zurückscrollen wiedergefunden werden, wodurch das Kurzzeitgedächtnis leicht überlastet werden kann.
  • Kompakte Layouts zeigen mehr Informationen im selben Viewport, reduzieren die kognitive Belastung und ermöglichen eine leichtere Navigation.
  • Auch die Art der Bilder beeinflusst, wie stark Fragmentierung wahrgenommen wird.
    • Informative Bilder können zusätzliche Belastung verringern, selbst wenn sie auf großen Bildschirmen groß dargestellt werden, weil Nutzer Zeit investieren, um daraus nützliche Informationen zu gewinnen.
    • Dekorative Bilder haben keinen Informationswert; Nutzer scrollen an ihnen vorbei, ohne sie zu betrachten, und müssen große Illustrationen überwinden, um zu nützlichen Inhalten zu gelangen, was das Gefühl der Fragmentierung verstärkt.

Auswirkungen auf konzeptuelle Modelle und Vertrauen

• Verstreute Seiten erschweren wegen der verlängerten Seite und der Belastung des Arbeitsgedächtnisses die Bewertung des vom Website vermittelten Konzepts und den Aufbau eines konzeptuellen Modells.
• Beim Startseiten-Prototypen reagierten Teilnehmer, dass es schwieriger sei, 4 bis 5 Angebote zu verstehen, wenn sie sie im Gedächtnis behalten müssten, statt sie gleichzeitig zu sehen und ihren Umfang zu erfassen.
• Auf Produktseiten mussten Nutzer Kaufkriterien wie Preis, Produktdetails und Bewertungen getrennt konsumieren und erinnern, wenn diese über mehrere Viewports verstreut waren.
• Wenn wichtige Informationen zusammenstehen oder auf weniger Viewports verteilt sind, lässt sich ein konzeptuelles Verständnis des Produkts oder des angebotenen Werts leichter aufbauen.
• Die Illusion der Vollständigkeit kann auf verstreuten Websites stärker auftreten.
  • Farbblöcke können im Viewport starke horizontale Linien erzeugen, oder breiter Negativraum kann den Eindruck vermitteln, die Seite sei zu Ende.
  • Wenn Scroll-Hinweise fehlen, die auf weitere Inhalte aufmerksam machen, können Nutzer Inhalte übersehen.
• Wenn sich Usability-Probleme summieren, können verstreute Websites so wirken, als hätten sie wenig Inhalt und seien schwer zugänglich.
• Manche Nutzer können den Eindruck gewinnen, dass ein Unternehmen Informationen versteckt; in diesem Fall kann das Vertrauen sinken.
• Nutzer bevorzugten kompakte Layouts besonders dann, wenn ihr Ziel darin bestand, die Website zu erkunden und das Angebot insgesamt zu verstehen.

Wann Content Dispersion hilfreich sein kann

• Wenn eine ganze Seite verstreut ist, sind die kumulativen Auswirkungen auf die Usability meist negativ, aber in bestimmten Situationen kann sie die Erfahrung auch positiv beeinflussen.
• Wenn die Menge an Inhalten pro Viewport sinkt, können Nutzer sich jeweils auf einen hervorgehobenen Inhalt konzentrieren, und das Gefühl von Informationsüberlastung kann abnehmen.
• Eine geringere Inhaltsdichte innerhalb des Viewports kann beim Hervorheben von Informationen in folgenden Fällen hilfreich sein:
  • wenn komplexe Inhalte Stück für Stück verstanden werden müssen
  • wenn Nutzer sich an die angezeigten Inhalte erst gewöhnen müssen und zu viele Informationen sie überfordern könnten
  • wenn hochwertige Bilder gezeigt werden
• Große Produktfotos können Mehrwert bieten, weil Nutzer Produktdetails leichter betrachten können.
• Bilder mit hohem Informationswert können die Streuung rechtfertigen, während Füllbilder oder Bilder, die nur visuelles Interesse erzeugen sollen, ohne zusätzlichen Nutzen lediglich Streuung verursachen.
• Beim Startseiten-Prototypen war der Bildwert geringer, sodass positive Effekte der Content Dispersion weniger stark beobachtet wurden.

Empfehlungen für Desktop-Design

• Desktop-Rendering sollte gesondert bewertet werden.
  • Wenn große Teile einer Seite auf dem Desktop übermäßig gedehnt wirken, sollte geprüft werden, ob wichtige Inhalte für besseres Überfliegen neu gestaltet werden sollten.
• Der Wert von Bildern sollte geprüft werden.
  • Große Bilder, die helfen, den Kontext eines Produkts oder einer Dienstleistung zu verstehen, sollten priorisiert werden.
  • Es sollte abgewogen werden, ob ein großes Bild den Grad an Streuung rechtfertigt, den es auf dem Desktop verursacht.
• Wichtige zusammengehörige Inhalte sollten im selben Viewport gebündelt werden.
  • Es sollte berücksichtigt werden, welche Informationen für das Verständnis des Angebots am wichtigsten sind, und es sollten Designs gewählt werden, die Vor- und Zurückscrollen reduzieren.
• Mobile-only Interaktionen und Designelemente sollten eingeschränkt werden.
  • Der Einsatz von Akkordeons auf dem Desktop sollte reduziert werden.
  • Es sollte ein adaptives Design erwogen werden, das dieselben Inhalte desktopfreundlicher darstellt.
• Streuung sollte nur begrenzt als Strategie eingesetzt werden, um Aufmerksamkeit auf Kernpunkte oder komplexe Inhalte zu lenken.

Fazit

• Verstreute Inhalte auf minimalistischen Desktop-Seiten können Ablenkung reduzieren und Aufmerksamkeit auf Kernpunkte oder komplexe Informationen lenken.
• Wenn jedoch eine ganze Seite nach Mobile First, Minimalismus und bildzentriertem Design aufgebaut ist, nehmen die Usability-Probleme auf dem Desktop zu.
• Wenn Inhalte über mehrere Viewports hinweg gedehnt und fragmentiert werden, fällt es Nutzern schwerer, Informationen aufzunehmen und zu verstehen.

[GN⁺]

Meinungen auf Hacker News

• Danny O’Brien betrieb den alten Blog Oblomovka und prägte um 2007 herum den Begriff hinternet.
  Damals begann gerade die breite Öffentlichkeit, in ein Internet einzutreten, das zuvor von einer technischen Elite für sich selbst betrieben worden war. Hinternet bezeichnete die Vorstellung, dass es ein Internet mit ausgefeilter Technik und Werten gebe und daneben ein Internet aus Viagra-Spam und Pop-up-Bannern.
  Früher konnte die technische Elite das Hinternet weitgehend meiden, so wie man eine gefährliche Gegend meidet, aber normale Menschen hatten keinen solchen Unterscheidungsmechanismus und machten deshalb eine deutlich schlechtere Internet-Erfahrung.
  Heute ist der Großteil des Internets zum Hinternet geworden, und auch essenzielle Systeme wie Banken, Hypotheken, Autozahlungen und Versorgungsrechnungen werden mobile first gestaltet und verwenden unter dem Vorwand „echter Nutzerverifizierung“ dunkle Praktiken, die auf offenen Plattformen kaputtgehen.
  War das frühere Hinternet eine zwielichtige Gasse, in der gefälschte Uhren verkauft wurden, gleicht es heute eher einer Dystopie vertikaler Informationsintegration, die im Hintergrund von quasi-staatlichen Stellen betrieben wird; um sich beim IRS einzuloggen, muss man die Identitätsmanagement-Plattform id.me nutzen, die nebenbei auch Waren verkauft.
  Es gibt Versuche, kleine gepflegte Gärten anzulegen, aber der Erfolg ist sehr uneinheitlich, und aus Sicht Einzelner gibt es kaum einen Anreiz, am Hinternet teilzunehmen, außer für Dinge, die unbedingt nötig sind.
  Aus dieser Perspektive ist „Mobile-First-Webdesign“ nur ein Symptom, das aus einem größeren Kontext herausgelöst wurde.

  • Dieses Konzept des hinternet ist interessant, aber in der Erklärung fehlt etwas.
    Auf der einen Seite stehen die gebildeten Eliten aus Wissenschaft, Militär und Regierung als legitime Gründer, auf der anderen die Massen, die nach dem Eternal September dazukamen.
    Am Ende werden die Neuankömmlinge – Händler, Spekulanten und Betrüger – gewissermaßen zu Unternehmen und Banken der neuen Welt eingebürgert. Betrachtet man die Dotcom-Ära als Kolonisierungsgeschichte, wird die Elite zu den Indigenen, die von ihrem eigenen Land verdrängt wurden, was auch gut zu heutigen Erzählmustern passt.
    Was in dieser Fabel aber fehlt, sind die tatsächlichen normalen Menschen.
    Die Dotcoms, Web 2.0 und der Aufbau von Imperien von 1997 bis etwa 2010 waren weiterhin vor allem ein Randereignis, bei dem bestehendes Geld und bestehende Macht ins Internet wanderten und sich ein paar raue „Unternehmer“ anschlossen; 99 % blieben Zuschauer und werden nun sozusagen in die Viehgehege getrieben.
    Die Möglichkeit eines Internets der Menschen besteht weiterhin, aber klassische Probleme wie Trittbrettfahrerei und die Tragik der Allmende sind kaum gelöst, und an diesem Punkt wirken „Web 3.0 und das Blockchain-Web“ tot.
    Um wieder zu einem öffentlichen, hochwertigen und großen Internet zu gelangen, muss man die Geschichte und Narrative des Internets sowie die Frage, wer die tatsächlichen Stakeholder sind, genauer betrachten.
  • Allein anhand der Erklärung ist schwer zu verstehen, was hinternet sein soll.
    Ich weiß nicht, ob damit das schwer zu bedienende Internet der 90er rund um IRC und Usenet gemeint ist oder die Schattenseite des 90er-Internets mit kostenlosen Hosting-Angeboten und illegalen Inhalten.
    Ich sehe nicht recht, inwiefern das 90er-Internet mit Foren, IRC, Viagra-Spam und goatse dem heutigen, von Dark Patterns und einigen wenigen Megakonzernen beherrschten, sterilisierten Internet ähnelt.
  • Letztlich kommt es der Umgebung nahe, die Menschen mit geringer Computerkompetenz auf dem Windows-Desktop erleben.
    Durch die mobile Nutzung nimmt Computeranalphabetismus nicht ab, sondern eher zu; man klickt auf den falschen Link, installiert eine Browser-Toolbar und wird dann nach und nach von Dark Patterns infiziert.
    Wenn Verwandte sich wegen Computerproblemen melden, sehe ich diesen Zustand ziemlich häufig.
  • Wenn es wenigstens auf dem iPad funktioniert, hat man schon Glück, und es ist ebenfalls ein Glück, wenn es einen nicht dazu bringt, sein Leben an grundlegende Telekommunikationsanbieter wie Verizon oder T-Mobile zu verpfänden.
    Wenn ich Ausdrücke wie „phonish“ oder „phonishness“ benutze, bekomme ich immer Downvotes, aber Smartphones haben das Leben eher schlechter als besser gemacht und geben einem das Gefühl, dass Menschen dem Computer dienen.
    Ich freue mich auf die nächste Plattform.
  • Ehrlich gesagt erinnere ich mich nicht mehr daran, wann ich zuletzt Werbung oder simples Phishing gesehen habe.
    Abgesehen vom Spam-Ordner bin ich dem kaum ausgesetzt; der Rest ist komplett kuratiert und auf „anständige“ Bereiche zugeschnitten, fast wie privilegierte Internet-Wohnlagen.
    Ich habe kein Geld, bin aber in Bezug auf Wissen wohl reich, und das wirkt wie eine Tragik der Allmende, in der technisch unkundige Schichten als Kanonenfutter für Werbung und kostenpflichtige Dienste wie YouTube dienen.

• Mit der Zeit wird immer klarer, dass Frontend wahrscheinlich der schwierigste Teil des Stacks ist.
  Viele glauben, man könne einfach eine Bootstrap-React-App irgendwie zusammenschustern und sie sei perfekt, aber eine komplexe UI zu schreiben, die in allen Browsern, auf allen Geräten, mit allen assistiven Technologien und in allen Sprachen funktioniert, ist extrem schwierig.
  Dafür braucht man tiefes Wissen über HTML, CSS und die zugehörigen Web-APIs, und gute Frontend Engineers sind selbst bei Big Tech sehr selten.
  UX-Designer, die auch über solche Dinge nachdenken, sind noch seltener, und solche Leute sind eine Million Dollar wert.

  • Ich habe mehrere Jahre als Frontend-Entwickler gearbeitet und dabei sowohl die Schwierigkeit als auch die Tatsache gespürt, dass diese Schwierigkeit weiterhin nicht anerkannt wird.
    Am Ende bin ich ins Design gewechselt, weil ich dachte: Wenn ich schon keinen Respekt bekomme, muss ich wenigstens nicht ständig auf dem Laufband neuer Technologien rennen.
    Ich habe auch Backend-Entwicklung gemacht, und die ist auf ihre Weise schwierig, aber wenn es ums Geld geht, würde ich Backend dem Frontend vorziehen.
    Nachdem ich Design, Backend und Frontend gemacht habe, haben sich in meinem Kopf zwei Achsen gebildet: Anerkennung und Einmischung.
    Design bekommt viel Anerkennung, weil das Ergebnis visuell ist, aber jeder hat eine Meinung dazu, „wie man es besser macht“, und mischt sich leicht ein.
    Beim Backend mischt sich außer anderen Engineers niemand ein, aber wenn es gut gemacht ist, funktioniert es einfach so, wie es ohnehin sollte, sodass es schwer ist, dafür Anerkennung zu bekommen.
    Frontend liegt dazwischen: Wenn es gut aussieht und gut funktioniert, bekommt man ein gewisses Maß an Anerkennung, aber selbst wenn die App schnell und responsiv ist, geht etwa die Hälfte des Verdienstes manchmal an den Designer.
    Gleichzeitig sagen Leute auf Basis anderer Apps: „So sollte es funktionieren“, und Frontend-Entwickler müssen es irgendwie zum Laufen bringen – zwischen dem, was der Designer abgesegnet hat, und dem, was das Backend unterstützt.
  • Gute Frontend Engineers sind nicht nur selten; es scheint auch häufig so zu sein, dass gerade die Besten die Frontend-Arbeit verlassen.
    Man wird müde, den ganzen Tag mit Kollegen zu streiten, die zwar programmieren können, aber kein Gespür für Design haben, und die Eigenschaften, die einen guten Frontend Engineer ausmachen, eignen sich auch gut für den Wechsel in Rollen mit geringeren psychischen Kosten.
  • Ich habe UI immer als den schwierigsten Teil des Stacks gesehen, und heute gilt das umso mehr.
    Frontend-Entwickler haben es nicht mit objektiven Maschinen zu tun, sondern mit subjektiven Menschen; sie müssen sich außerdem mit Designern und Product Managern auseinandersetzen und sind durch Backend Engineers und Infrastruktur eingeschränkt.
    Sie müssen Dinge auf verschiedenen Geräten und in verschiedenen Browsern zum Laufen bringen, ein Framework verwenden, das jemand anderes ausgewählt hat, und dürfen dabei nichts kaputtmachen.
    Respekt an alle Frontend-Entwickler.
  • In einem früheren nichttechnischen Job musste ich eine interne Web-App verwenden, die voller solcher Fehler war.
    Alles hatte Padding: der Text hatte Padding, die Box um den Text hatte Padding, und die Tabellenzeile, die diese Box enthielt, hatte noch größeres Padding.
    Das Ergebnis war, dass auf einen normalen 1080p-Bildschirm nur etwa vier Tabellenzeilen passten und jede Zeile kaum tatsächliche Informationen enthielt.
    Außerdem war aus irgendeinem Grund die Schriftgröße über die Viewport-Breite definiert, wodurch die App auf älteren 4:3-Displays nahezu unbenutzbar war.
  • Ich stimme völlig zu, dass Frontend-Arbeit sehr komplex ist und in letzter Zeit noch komplexer geworden ist, sehe sie aber nicht als den schwierigsten Teil des Stacks, weil man sich normalerweise keine Sorgen um Skalierung machen muss.
    Man denke an Systeme, die täglich, wöchentlich oder monatlich zig Milliarden Vorgänge verarbeiten müssen, mit Daten-Caching und Data Warehouses, Echtzeitbenachrichtigungen, Queue-Workloads, verschiedensten API-Requests, Synchronisierung zwischen Backend-Systemen, mehreren Datenspeichern, Multi-Region-Skalierung, Redundanz und dem Umgang mit Backend-Ausfällen.
    In komplexer Websoftware sind solche Backend-Probleme üblich.
    Das Frontend, das an dieses Backend angebunden ist, hat wegen automatisierter Backend-Prozesse normalerweise seltener mitten in der Nacht Probleme und muss sich weniger um Nutzerzahlen und Datenvolumen sorgen.
    So schwierig die anfängliche Frontend-Entwicklung oder die Wartung aufgrund von Browseränderungen auch sein mag: Wenn die Entwicklung abgeschlossen ist, handelt es sich um statischen Code, der mit einem deutlich komplexeren darunterliegenden System interagiert, und dieses darunterliegende System verlangt bei jeder Änderung von Daten und Geschäftsanforderungen weiterhin Aufmerksamkeit.

• Das Problem ist nicht Mobile-first versus Desktop, sondern Designer, die immer noch nicht verstehen, dass das Web dynamischer Content ist, der sich an Bildschirmgröße und -form der Nutzer anpassen muss.
  Das Web ist kein statisches Medium wie Papier und auch nicht an eine bestimmte Größe oder Form gebunden, also sollte man es nicht so behandeln.
  Web-„Designer“ sollten nicht versuchen, Content gewaltsam in eine bestimmte Größe oder Pixelauflösung zu pressen; weil Bildschirmauflösungen und Seitenverhältnisse so unterschiedlich sind, muss Content entsprechend fließen können.
  Auch für sehbehinderte Nutzer, die die Schrift vergrößern müssen, verschlechtert sich die Barrierefreiheit deutlich, wenn Content beim Vergrößern der Schrift stark kaputtgeht.

  • So etwas sagt sich leicht, aber wenn man es selbst implementiert, ist es wirklich schwierig.
  • Entgegen der Aussage, es sei „kein statisches Medium wie Papier“, bekomme ich häufig Print-first-Seitenlayouts, die aus dynamischen Daten erzeugt werden.
    Solche Seiten müssen ebenfalls in mobilen und Desktop-Browsern funktionieren und überall gut aussehen, und das ist gar nicht so schwierig.
    Es dauert nur etwas länger, und Media Queries sowie ein wenig JavaScript machen es möglich.
  • Ich arbeite mit Agenturen, die aus dem Print-Bereich kommen, und dazu hätte ich wirklich viel zu sagen.
    Gleichzeitig ist das selbst für Leute, die das schon lange machen, ein chaotisches Feld.
    Heutzutage bringe ich meinen Designhintergrund ein, versuche mich möglichst stark in die Entwurfsphase einzuklinken, und nach Implementierung und Deployment bitte ich sinngemäß: „Meldet mir alles, was in irgendwelchen obskuren Viewports kaputtgeht, die nur 1 % der Nutzer verwenden.“ Dann behebe ich es in der Review-Phase oder im Betrieb mit CSS-Patches und viewport-spezifischen Media Queries.
  • Dem kann ich überhaupt nicht zustimmen.
    Es gibt einen Grund, warum die Textzeilenlängen in allen gedruckten Büchern im Großen und Ganzen ähnlich sind, und die Lesebreite sollte immer begrenzt sein.
  • Eine gute UI über so viele Plattformen hinweg zu entwerfen wie im „Web-Frontend“ ist enorm schwierig.
    Die Breite kann 300 px oder 1920 px betragen, die Eingabe kann per Maus erfolgen, nur per Touch, mit beidem oder mit keinem von beidem.

• Hamburger-Menüs und piktografische Icons
  Ich verstehe, warum man sie auf Mobilgeräten verwendet.
  Wenn es nur Platz für Inhalte gibt, ergibt es Sinn, nur wenige Funktionen als kleine Icons zu platzieren und den Rest der Aktionen im Hamburger-Menü zu verstecken.
  Aber wenn Platz vorhanden ist, ist diese Verwendung schrecklich.
  Im besten Fall erhöht sie die Zahl der Schritte, im schlimmsten führt sie zu Unfällen, weil man herumexperimentiert, um herauszufinden, was ein Icon tut.
  Wenn Undo zuverlässig funktioniert, wäre es noch halbwegs okay, aber offenbar hat man entschieden, dass selbst das kaputt sein darf.
  Wie in den früheren Apple HIG sollten auf dem Desktop häufig genutzte Aktionen aus den Menüs herausgeholt und auf beschriftete Buttons gelegt werden, damit Nutzer nicht Verstecken spielen müssen, sondern die Frage „Was kann ich tun?“ beantworten können.
  Undo lässt sich später nur schwer nachrüsten, also sollte man es von Anfang an einbauen, um den Preis des Experimentierens zu senken.
  Leider hat mobiles Design so vollständig die Kontrolle übernommen, dass UI-Designer selbst bei Apps, die fast ausschließlich auf dem Desktop genutzt werden, und selbst wenn intern jemand Desktop-Design verteidigt, Hamburger-Menüs, Piktogramme und kaputtes Undo wählen.
  Außerdem sind auch Modals mit voller Wucht zurückgekehrt, aber wegen meines Blutdrucks höre ich hier auf.

  • Für piktografische Icons gibt es meiner Meinung nach keine Entschuldigung.
    Selbst ein fünf Jahre altes Billigtelefon wie das moto e4 hat ein 1280x720-Display, und es gibt genug Pixel, um Icons mit Labels zu versehen.
    Piktografische Icons kommen einem Design gleich, das sagt: „Wir hassen unsere Nutzer und wollen, dass sie das wissen.“
    Auch Hamburger-Menüs lassen sich oft vermeiden, wenn man sich die Zahl der Optionen ansieht.
    Auch die Gmail-App könnte Icons in eine horizontale Leiste setzen, verwendet aber den Hamburger; gleichzeitig gibt es aber eine untere Leiste für Chat, Video und Spaces, obwohl Platz angeblich so wichtig ist.
  • Die obere Navigationsleiste meiner Website habe ich so gebaut, dass sie horizontal scrollbar wird, wenn der Inhalt nicht hineinpasst: https://www.winstoncooke.com/
    Ich mache mir ein wenig Sorgen, dass Nutzer nicht erkennen, dass es weitere Optionen zum Scrollen gibt, aber ich bevorzuge das gegenüber einem Hamburger-Menü, das sich öffnet und den Inhalt überdeckt.
    Denn man kann alle Optionen und die zugehörigen Wörter sehen.
    Auf dem Desktop ist so eine Behandlung nicht nötig.
  • Ich stimme zu, dass piktografische Icons die Auffindbarkeit verschlechtern.
    Ich denke allerdings, dass Designer sie mögen, weil es damit einfacher ist, über mehrere Sprachen hinweg ein konsistentes Design beizubehalten.
    Eine deutsche Lokalisierung kann zum Beispiel schwer unterzubringen sein.
  • Der Ausdruck „Piktogramme“ fasst es wirklich gut zusammen.
    Ich würde hier auch versteckte kontextabhängige Optionen hinzufügen.
    Optionen, die nicht verfügbar sind und deshalb deaktiviert, also ausgegraut dargestellt werden, sind zumindest gut, weil sie zeigen, dass unter passenden Bedingungen etwas möglich ist.
    Modernes Design versteckt solche Optionen jedoch, und wenn man die magischen Bedingungen nicht kennt, unter denen sie erscheinen, sieht man sie nie.
    Ubiquitis Unifi ist ein Beispiel.
    Auf der Seite zur Verwaltung von Switch-Ports gibt es keine Option „Select All“; erst wenn man mindestens einen Port auswählt, erscheint diese Option auf magische Weise.
    Sie ist nicht nur versteckt, auch der Kontext ist falsch.
    Wenn sie als deaktivierte Checkbox vorhanden gewesen wäre, hätten alle sofort bemerkt, wie offensichtlich dumm es ist, dass die Checkbox „Select All“ deaktiviert ist, wenn kein Port ausgewählt ist.
  • Die größten Gegner solcher Argumente sind meiner Meinung nach neue Nutzer.
    Wenn zu viel auf dem Bildschirm ist, sind sie schnell eingeschüchtert, und genau diese Leute dominieren Fokusgruppen.
    Deshalb scheinen Designer an diese eine schreckliche Regel gefesselt zu sein.

• Diese Studie ergibt praktisch keinen Sinn.
  Diese Seiten sind nicht dafür konzipiert, auf minimalem Raum maximale Information zu vermitteln, sondern um Produkte zu verkaufen.
  Wenn man behaupten will, dass die Verteilung von Inhalten negative Auswirkungen hat, muss man anhand des Zwecks messen, für den die Seite gestaltet wurde.
  Hier wurden ausdrücklich E-Commerce- und Produktseiten untersucht, also wären die relevanten Kennzahlen, welche Seite einen höheren Produktwert vermittelt hat, welche eine höhere Conversion Rate hatte, welche einen höheren NPS hatte und welche die Markenaffinität stärker verbessert hat.
  Tragbare Lautsprecher verkauft man nicht über Spezifikationen, sondern über aspirative Bilder vom Einsatz am Strand.
  Wenn man ein Akkordeon mit Produktdetails aufgeklappt zeigt und fragt: „Wie gut glauben Sie, das Angebot verstanden zu haben, das diese Seite vermittelt hat?“, bekommt man natürlich höhere Umfragewerte.
  Es wäre eher überraschend, wenn die dichtere Seite besser konvertiert hätte.
  Das ist, als würde man eine Studie entwerfen, derzufolge der harte Sitz eines F1-Rennwagens schlecht ist, dann jede Menge Schaumstoff anbringen und testen, welche Variante bequemer ist, um dann zu erklären, sie sei besser, obwohl die eigentliche Kennzahl nur die Rundenzeit ist.

  • Ich bin spät in diesem Thread, aber dem stimme ich zu.
    Die Designentscheidungen, die der Artikel kritisiert, sind nicht das Ergebnis von Mobile-first Design.
    Tatsächlich sahen Websites Ende der 2000er, bevor responsives Design allgegenwärtig wurde, auch schon so aus.
    Zum Beispiel Apple: https://www.versionmuseum.com/history-of/apple-website
  • Genau das habe ich die ganze Zeit beim Lesen gedacht.
    Im Grunde wird die Informationsdichte von Marketingflyern oder Werbetafeln verglichen und dann gesagt, dass sie nicht alles vermitteln; aber genau das ist ihr Zweck.
    Werbung ist keine Spezifikationstabelle, sondern soll beim Betrachter den Wunsch nach dem Produkt wecken.
  • Die Methode „Tragbare Lautsprecher verkauft man nicht über Spezifikationen, sondern über aspirative Bilder vom Einsatz am Strand“ mag bei manchen Zielgruppen funktionieren.
    Für mich kann sie dagegen ein starkes Signal für minderwertigen Unsinn sein.

• Viele Websites ändern ihre UI komplett, wenn man die Fenstergröße ändert.
  Manchmal möchte ich den Browser nur eine Monitorhälfte einnehmen lassen und daneben etwas anderes platzieren, aber auf modernen Websites scheitert das oft, weil die UI unbenutzbar wird, sobald man das Fenster verkleinert.

  • Das ist der responsive Teil von „responsivem Design“.
    Wenn es gut gemacht ist, ist es großartig, aber es stimmt auch, dass viele Websites zu aggressiv reagieren, als hätten sie tatsächlich nur zwei Größenkategorien getestet.
  • Ich würde gern Beispiele sehen.
    Meinst du, dass Funktionen und Inhalte nicht mehr zugänglich sind, wenn man die Ansicht verkleinert?

• Ich hasse Websites, die nützliche Inhalte in eine schmale Spalte in der Mitte packen.
  Noch schlimmer ist, dass auch Websites, die früher normal waren, immer weiter kaputtgehen.
  Das passiert meist, wenn ein neues Management hereinkommt und das Produkt mit einer „Mobile-first“-Vision „neu denken“ will.
  Patreon ist in letzter Zeit ein gutes Beispiel.
  Und in manchen Fällen verschwindet eine normale Website ganz und wird durch crapp wie Venmo, Amazon Alexa oder Chamberlain ersetzt.

• Wirklich unhandlich ist, dass es keine gute Touch-Alternative zu hover gibt.
  Das ist ein zu nützliches UX-Element, um es beim Wechsel zu Mobile-first einfach wegzuwerfen.
  Alles andere liegt eher auf der Seite von „nicht so schwer“.
  Unter den zu lösenden Problemen liegt die Aufgabe, Dinge auf vielen Bildschirmgrößen plausibel aussehen zu lassen, bei Zeitaufwand und Komplexität ziemlich weit unten.

  • Auf Touchscreens denke ich, dass langes Drücken sowohl hover als auch den Rechtsklick abdeckt.
    Zumindest nutze ich es so in Firefox Mobile, wenn ich Alternativtext von Bildern sehen will.
    Eine echte Hover-Erkennung wäre wohl möglich, aber ohne Stylus dürfte die UX eher schlecht sein.
  • Beim Xperia Sola war mit dem Touchscreen ein hover-ähnlicher Effekt möglich.

• Aus Sicht eines Webdesigners stimme ich dem ein wenig nicht zu.
  Die im Artikel genannten Beispiele funktionieren besser mit einfachem Content pro Bildschirm.
  Sie sind visuell leichter zu erfassen, und die komprimierten Versionen haben oft mehrspaltige Layouts, die ich persönlich nicht mag.
  Hohe Content-Dichte passt zu Desktop-Anwendungen, aber nicht zu etwas, das im Grunde eine Broschüren-Website ist.

  • Interessant an dem Artikel ist dennoch, dass er auf tatsächlicher Usability-Forschung basiert.
    Gut ist, dass es nicht einfach nur der Eindruck von irgendjemandem ist.
  • Stimme zu.
    Es ist schwer zu glauben, dass Marketingseiten nach Jahrzehnten der Evolution und des Testens nicht bei dem angekommen sind, was Nutzer tatsächlich wollen, statt bei dem, was sie sagen, dass sie wollen.
    Für Internet-Natives ist Scrollen ein sehr natürliches Verhalten.
    Große Bildschirme für visuelle Vergleiche zu nutzen, ist ebenfalls nützlich, aber die Beispiele im Artikel sind nicht gut.
    Dort heißt es, „dieselben Informationen wurden in einem 2x2-Grid angeordnet, damit man mehrere Dienste gleichzeitig vergleichen kann“, aber ich weiß nicht, was es da zu vergleichen gibt.
    Es sind unterschiedliche Dienste.
    Das Beispiel mit den Produktspezifikationen gefällt mir, aber das ist eher ein objektives Usability-Problem, weil mehr Klicks nötig sind, um mehr Informationen zu sehen.
  • Als weiterer Webdesigner stimme ich zu.
    Man muss sehen, dass die Screenshots „verkleinert“ sind und die mehrspaltige Anordnung dadurch reichhaltig und visuell ansprechender wirkt.
    Ich bin vollständig dafür, horizontalen Raum zu nutzen, aber das, was wir über Call-to-Action-Buttons gelernt haben, führt zu Designs mit einem einzelnen Element.
  • Eigentlich stimme ich dem Titel des Artikels bis zu einem gewissen Grad zu, aber die Beispiele sind nicht gut.

• Mehr als bei Broschüren- oder E-Commerce-Sites nervt mich Mobile-first-Design bei Produktivitätsseiten und Tool-Oberflächen.
  Wer greift auf solche Tools normalerweise mit dem Smartphone zu?

  • Ich hatte kürzlich das Pech, eine rein mobile App zur Identitätsprüfung verwenden zu müssen.
    Namen und Adressen früherer Arbeitgeber und Wohnorte über eine mobile Tastatur einzugeben, war schon schmerzhaft, aber die Datumseingabe war noch schlimmer.
    Der Datepicker begann beim aktuellen Monat und Jahr und ließ sich nur monatsweise weiterblättern, sodass ich für die Eingabe meines Geburtsdatums etwa 550-mal tippen musste.
    Ich hatte durchaus Lust, das bei der EEOC zu melden, weil es ältere Arbeitnehmer als geschützte Gruppe unverhältnismäßig betrifft, aber das wäre keine gute Art gewesen, mich der HR meines neuen Arbeitgebers vorzustellen.
  • Es gibt auch Menschen, die stark vergrößern müssen, um etwas nutzen zu können.
    Praktisch entspricht das einer Ansicht auf einem kleinen Bildschirm, und das ist eine WCAG-Anforderung.