7 häufige Fehler bei reaktionsschnellen Modellen

Responsive Design ist mehr als nur ein beliebter Designtrend Dies ist eine praktische Antwort auf die große Verlagerung des Browsers vom Desktop zum Handy. Um im aktuellen Stand der Branche bestehen zu können, müssen Webdesigner mehrere Bildschirmgrößen und Geräte unterstützen. Ein Responsive Approach (RWD) löst viele dieser Probleme.

Bild mit freundlicher Genehmigung von PlasmaComp, http://www.plasmacomp.com/blogs/are-you-making-these-responsive-design-mistakes

Bild mit freundlicher Genehmigung von PlasmaComp, http://www.plasmacomp.com/blogs/are-you-making-these-responsive-design-mistakes

Als Übergangsphase, die Ideen formt, haben Modelle im Entwurfsprozess einen hohen Stellenwert. In diesem Artikel werden die häufigsten Modellfehler beim Entwerfen in RWD beschrieben, sodass Sie sicherstellen können, dass Ihr Schritt zur Reaktion ein Schritt vorwärts und nicht zurück ist.



01. Entwerfen für Geräte, nicht für Bildschirme

Gemäß Daten von OpenSignal bereitgestellt Derzeit gibt es 24.093 verschiedene Android-Geräte auf dem Markt, gegenüber 18.796 im Vorjahr - und das gilt nicht einmal für iOS und andere Geräte.

Diese unglaubliche Vielfalt macht es unmöglich, einzelne Geräte anzusprechen. Eine intelligentere Strategie besteht darin, sich auf die Größe des Bildschirms zu konzentrieren.

Bild mit freundlicher Genehmigung von Luke Wrobelwski: https://www.flickr.com/photos/lukew

Bild mit freundlicher Genehmigung von Luke Wrobelwski: https://www.flickr.com/photos/lukew

Denken Sie nicht an Wearables, Telefone, Tablets oder Desktops. Teilen Sie Ihre Modelle durch:

  • Mikrobildschirme
  • Kleine Bildschirme
  • Mittelklasse
  • Groß
  • Extra groß

Bestimmte Bildschirmabmessungen sind eine zuverlässigere Messgröße für die Größenbestimmung, da viele Geräte variieren. Denken Sie an die verschiedenen Bildschirmgrößen für Telefone: Einige sind größer als kleine Tablets.

nass auf nass Ölgemälde Probleme

Wenn Sie sich auf die Bildschirmgröße konzentrieren, können Sie sich auch nicht auf die Gerätegröße für reaktionsfähige Haltepunkte verlassen. Dies ist ein weiterer Fehler, der im Folgenden beschrieben wird.

Spielzeuggeschichte 4 hinter den Kulissen

02. Verlassen Sie sich nur auf Gerätegrößen für Haltepunkte

Es ist immer ein neues Gerät um die Ecke, und selbst wenn Sie die Haltepunkte jedes verfügbaren Geräts berücksichtigen, wird Ihre reaktionsfähige Site zu kurz kommen, wenn das nächste große Gerät auftaucht.

Bild mit freundlicher Genehmigung von Stephanie Walter, http://www.inpixelitrust.fr/blog/illustration-content-is-like-water-et-traduction-responsive-webdesign-present-et-futur-de-ladaptation-mobile/

Bild mit freundlicher Genehmigung von Stephanie Walter, http://www.inpixelitrust.fr/blog/illustration-content-is-like-water-et-traduction-responsive-webdesign-present-et-futur-de-ladaptation-mobile/

Wie in erklärt Best Practices für die Web-Benutzeroberfläche durch UXPin , 'Build to the Design, nicht das Gerät':

  • Beginnen Sie mit dem Zuerst mobil Ansatz: Erstellen Sie ein Modell für den kleinsten Bildschirm und skalieren Sie es dann. Als Referenz ist das iPhone im Hochformat 320 Pixel breit.
  • Wenn viele Ihrer Benutzer tragbare Geräte haben, müssen Sie Mikrobildschirme mit noch kleineren Auflösungen in Betracht ziehen. Die Apple Watch - die kleinste nach der Pebble Time - hat eine Breite von 272 Pixel.
  • Fügen Sie hinzu, wenn sich Ihr Design angespannt anfühlt Medien-Anfragen Nehmen Sie die erforderlichen Layoutänderungen vor, damit Ihr Design komfortabel ist und bei jedem Schritt gut funktioniert.
  • Das Design für eine maximale Breite von 2000 Pixel deckt alle bis auf die derzeit größten verfügbaren Displays ab. Gemäß die neuesten Browserstatistiken von W3Schools 99 Prozent der Besucher haben Auflösungen, die unter diese 2000 Pixel fallen.
  • Eingeben reaktionsschnelle Haltepunkte basierend auf den Anforderungen des Designs, um diesen unangenehmen Zwischenzustand zu vermeiden, der zwischen gängigen Gerätegrößen liegt. Das Erstellen eines Designs, das auf die Bildschirmgröße reagiert, liegt in der Natur von RWD.

03. Touch-Steuerelemente ignorieren

Touch-Steuerelemente sind einer der großen Vorteile der meisten Mobilgeräte: Sie machen Spaß, sind intuitiv und sparen Zeit. Vernachlässigen Sie sie auf einigen Geräten nicht, da andere sie nicht verwenden können. Hier sind einige Tipps zum Einfügen von Touch-Steuerelementen:

  • Kennen Sie die Best Practices für jedes Gerät. Auf kleinen Bildschirmen ist die untere linke Ecke der einfachste Ort für den Daumenzugriff. Platzieren Sie also Ihre am häufigsten angeklickten Elemente dort. Bei Tablets sind die oberen Ecken jedoch erstklassige Immobilien, da sie unterschiedlich gehalten werden.
  • Tippziele (wie CTA-Schaltflächen) müssen ausreichend dimensioniert sein. Ein Minimum von 44 Punkten entspricht fettfingerfreundliche Richtlinien.
  • Der empfohlene Abstand zwischen den Elementen beträgt mindestens 23pt, um ein Klicken auf das falsche Element zu vermeiden.
  • Passen Sie sich an das Fehlen von Schwebezuständen an. Sie können klickaktivierte Funktionen ersetzen oder die Hover-Elemente von Anfang an im nativen Zustand anzeigen.
  • Das Rad nicht neu erfinden. Gemeinsame Handgesten Wischen funktioniert am besten für die Navigation und andere Funktionen, da sie bereits vom Benutzer gelernt wurden.

04. Verknüpfen mit Inhalten, die nicht für Handys geeignet sind

Sie können weder Besucher auf anderen Seiten noch auf Inhalten auf Ihrer Website oder anderswo verknüpfen. Das Problem für reaktionsschnelle Erlebnisse besteht darin, dass Ihre geräteunabhängige Website auf nicht reaktionsfähige Webseiten verweist.

Wenn Ihre reaktionsfähige Website auf externe Websites verweist, können Sie nur eine alternative Website in Betracht ziehen. Wenn Sie jedoch auf Websites und Ressourcen verlinken, die Sie steuern, einschließlich Mikro-Websites oder Partner-Websites, möchten Sie sicherstellen, dass alle eine durchweg positive Reaktionserfahrung bieten.

05. Schlechte Planung für größere Bildschirme

Ich schlage einen Ansatz vor, der zuerst mobil und nicht nur mobil ist. Während kleinere Bildschirme möglicherweise beliebter sind, stammen 42% des Datenverkehrs immer noch von Desktop-Besuchern. Beide Seiten des Bildschirmgrößenspektrums müssen berücksichtigt werden.

Bild mit freundlicher Genehmigung von UXPin

Bild mit freundlicher Genehmigung von UXPin

Hier einige Ratschläge von Der Leitfaden zu Mockups für die Betrachtung des 'großen Bildes':

  • Sie müssen mehr tun, als nur kleinere Bildschirmdesigns zu vergrößern. Nutzen Sie den zusätzlichen Platz, indem Sie neue Elemente hinzufügen oder die visuelle Hierarchie neu strukturieren.
  • Überprüfen Sie die Qualität der Bilder. Auf größeren Bildschirmen können sie unschärfer erscheinen.
  • Überprüfen Sie ebenfalls die Lesbarkeit der Zeilenlängen. Zwischen 45 und 75 Zeichen ist optimal. Sie können eine verwenden Lesezeichen von Chris Coyer um die Linienlängen Ihres Designs zu testen.
  • Vergrößern Sie die Schriftarten nicht zu stark. Übergroße Schriftarten nehmen einen erheblichen horizontalen Platz ein, was dazu führen kann, dass Leser langsamer werden oder den Inhalt überspringen.

06. Konsistente Navigation über Bildschirmgrößen hinweg

Eine konsistente Navigation innerhalb eines Geräts ist auf jeden Fall eine gute Sache. Aber heiraten Sie nicht mit einem Layout und versuchen Sie, es auf anderen Geräten immer wieder neu zu erstellen. Dies widerspricht dem, worum es bei Responsive Design geht.

Gopro Held 4 Cyber ​​Montag Angebote

Bild mit freundlicher Genehmigung von FiveSimpleSteps (Desktop)

Bild mit freundlicher Genehmigung von FiveSimpleSteps (Desktop)

Bild mit freundlicher Genehmigung von FiveSimpleSteps (mobil)

Bild mit freundlicher Genehmigung von FiveSimpleSteps (mobil)

Eine gewisse Konsistenz ist jedoch gut, um eine konsistente UX aufrechtzuerhalten. Bestimmte Elemente sollten gleich bleiben, um eine erkennbare Benutzeroberfläche zu erstellen und Benutzern die Verwendung der Benutzeroberfläche auf einem neuen Gerät vorzuschlagen. Diese Elemente sollten konsistent bleiben:

  • Link- oder Schaltflächenbeschriftungen
  • Schriften
  • Farbbehandlungen

Unterschiedliche Bildschirmgrößen erfordern jedoch unterschiedliche Navigationssysteme. Die folgenden Elemente sollten nicht konsistent bleiben, da sie die Nuancen bestimmter Bildschirmgrößen berücksichtigen:

  • Knopfgröße
  • Visuelles Layout
  • Navigationsfunktionen - einschließlich Touch-Steuerelemente

Beispielsweise kann eine Desktop-Navigation statisch am oberen Bildschirmrand angezeigt werden. Wenn Sie das Layout für den mobilen Bildschirm überarbeiten, können Sie die Navigation dauerhaft gestalten und verkleinern, um aus dem Weg zu gehen (wobei jedoch ein ähnliches Farbschema, eine ähnliche Typografie und ähnliche Tastenbeschriftungen beibehalten werden).

07. Inhalt ausblenden

Ein weit verbreitetes Missverständnis entschied einst, dass mobile Benutzer in Eile sind und nur eine kleinere Version der 'vollständigen Website' wünschen. Inhalte wie Kontaktinformationen und Wegbeschreibungen wurden priorisiert, während andere Inhalte ausgeblendet wurden.

Jetzt wissen wir, dass die meisten mobilen Benutzer überhaupt nicht mobil sind 68% der Nutzung erfolgt zu Hause . Die meisten Benutzer möchten die vollständige Site auf einem mobilen Gerät. Nicht gekürzt, sondern neu formatiert.

Bild mit freundlicher Genehmigung von UXPin

Bild mit freundlicher Genehmigung von UXPin

Das bevorzugte Gerät einer Person zu kennen, ist nicht dasselbe wie den bevorzugten Inhalt zu kennen. Wenn Inhalte für Benutzer auf einem Gerät relevant sind, sind sie wahrscheinlich für Benutzer auf einem anderen Gerät relevant.

Darüber hinaus müssen Sie Aufgabenabläufe für mehrere Geräte berücksichtigen. Benutzer starten häufig eine Aufgabe auf einem Gerät und beenden sie auf einem anderen, wobei sie zwischen ihnen wechseln. Durch das Einschränken von Inhalten in Abhängigkeit von Geräten wird auch die Interaktion des Benutzers eingeschränkt.

Präsentieren und priorisieren Sie Inhalte für verschiedene Bildschirmgrößen unterschiedlich nach fortschreitender Verbesserung , aber verstecken oder beschränken Sie niemals den Inhalt selbst.

Konvertieren Sie 2D-Bilder in 3D-Photoshop

Weiterführende Literatur

Die Tipps hier sind nur eine Vorschau auf das, was im kostenlosen eBook verfügbar ist UX Design Trends 2015 & 2016 .

Durch die Analyse von 71 der besten UX-Beispiele von heute werden in diesem Handbuch nützliche Trends in einfache Designtaktiken für das alltägliche Design zerlegt.

Wörter: Jeremy Girard

Jeremy Girard ist der Leiter des Bereichs Webdesign / -entwicklung in Providence, Rhode Island Technologieberater von Envision . Er unterrichtet auch Website-Design und Front-End-Entwicklung an der Universität von Rhode Island. Er trägt Inhalte zum freie Designbibliothek von der kollaborativen Prototyping-App UXPin.

So was? Lese das!

  • Wie man Modelle entwirft, die Entwickler nicht hassen werden
  • 7 Best Practices zum Erstellen von Modellen
  • 15 häufige Fehler, die Designer machen