Adaptive Skalierung: Design von Online-Shops für große Bildschirme

    Ich mache Sie auf eine Übersetzung des Artikels " Responsive Upscaling: Großformatiges E-Commerce-Design " von Christian Holst aufmerksam.

    Die Revolution im Bereich Responsive Design steht vor der Tür (falls dies noch nicht geschehen ist!), Und obwohl Online-Shops Responsive Design nicht so aggressiv aufgenommen haben wie andere Branchen, erfreut es sich immer noch großer Beliebtheit.

    Die meisten Überlegungen zum Responsive Design gingen lange Zeit nicht über die Gestaltung des Übergangs zwischen mobiler und Desktop-Oberfläche hinaus. Es ist an der Zeit, ein wenig auf die Möglichkeiten zu achten, diese Grenzen über den Standard-Desktop-Bildschirm hinaus zu erweitern, um eine Benutzeroberfläche zu erstellen, die zu modernen Breitbildschirmen passt . Schauen Sie sich das an:

    1. Nur 18% der 50 führenden US-Onlineshops , die wir Anfang dieses Jahres getestet haben, passten ihr Design an große Bildschirme an (während 94% dieser Websites ihr Design an mobile Geräte anpassten).
    2. Fast drei Viertel des elektronischen Verkaufs werden immer noch auf PCs und nicht auf Mobilgeräten getätigt (siehe hier , hier und hier ).
    3. Etwa ein Drittel dieser Benutzer kommt von Bildschirmen, die breiter als 1350 Pixel sind (siehe hier , hier und hier ). (Hinweis: Natürlich gibt es einen Unterschied zwischen der Breite des Bildschirms und der Breite des Browserfensters - die tatsächliche Anzahl der Benutzer mit einem Browser mit der angegebenen Breite ist geringer. Wir empfehlen, die Größe des Browserfensters in Ihrer Webstatistik zu überwachen, um ein vollständigeres Bild davon zu erhalten, wie wichtig dieses Segment für Ihre Website ist .

    Basierend auf diesen Statistiken können wir sagen, dass sich die Entwicklung einer speziellen Benutzeroberfläche für Benutzer mit großen Bildschirmen lohnt. Tatsächlich kann das Design für große Bildschirme der nächste Trend im responsiven Design von Online-Shops sein.

    In diesem Artikel werden wir untersuchen, wie Online-Shop-Designer mithilfe der adaptiven Skalierung eine Benutzeroberfläche speziell für Benutzer mit großen Bildschirmen entwerfen können. Wir lernen ein Grundprinzip und damit 11 Ideen, wie verschiedene Elemente der Online-Shop-Oberfläche angepasst werden können. Mit diesen Ideen können wir einige der Interaktionsprobleme lösen, die wir im Verlauf unserer Forschung beobachtet haben. Dieser Artikel wurde ursprünglich vom Baymard Institute veröffentlicht.


    Viele kommerzielle Websites verwenden auf großen Bildschirmen keinen Leerraum. Ergebnis: Oft ist viel weißer Raum von ziemlich abgeschnittenen Suchergebnissen umgeben. ( Bild vergrößern )

    Beachten Sie den weißen Bereich, der die eher beschnittenen IKEA-Suchergebnisse umgibt. Bei der Untersuchung der Produktliste im Online-Shop wurde deutlich, dass Benutzer in der Nische der Produkte, die nach ästhetischen Merkmalen ausgewählt wurden, wie z. B. Wohnkultur, große Vorschauen benötigen, um das Produkt richtig bewerten zu können. Das Entfernen von freiem Speicherplatz ist eine der vielen Ideen für die adaptive Skalierung von Online-Shops, auf die Sie achten sollten.

    Leerer Raum, der in der Regel vor allem durch den großen Bildschirm entstanden istEs bleibt ungenutzt und erscheint als breites Weißmeer, wenn der ursprüngliche Seiteninhalt auf ein schmales Design zugeschnitten wird, das sich am Laptop-Bildschirm orientiert. Zumindest sollte der Inhalt etwas mehr Luft haben, bei Monitoren mit großer Diagonale sollte zwischen den Elementen etwas Freiraum sein.

    Darüber hinaus können Sie bei der "adaptiven Skalierung" viel weiter gehen und die Benutzeroberfläche mit einem großen Bildschirm verbessern . Sie können Leerzeichen verwenden, um Bilder zu vergrößern, Produktspalten hinzuzufügen, den Seitenkontext besser anzuzeigen und den Zugriff auf kontextbezogene Vorgänge (Filtern, Sortieren, "In den Warenkorb" usw.) zu vereinfachen.

    Das Grundprinzip der adaptiven Skalierung: gleicher Inhalt, unterschiedliche Darstellung


    Es gibt zwei Möglichkeiten, um leeren Speicherplatz zu entfernen: Platzieren Sie zusätzlichen Inhalt auf der Seite (d. H. Inhalt, der nur in hoher Auflösung angezeigt wird) und zeigen Sie den aktuellen Inhalt in einer anderen Form an (d. H. Elemente verschieben, Format ändern, vergrößern usw.). .d.).

    Sie werden feststellen, dass alle Beispiele in diesem Artikel veranschaulichen, wie der aktuelle Inhalt anders dargestellt werden kann.(manchmal grundlegend anders). Der Grund dafür ist, dass das Hinzufügen völlig neuer Inhalte, die nur in großen Auflösungen angezeigt werden, in den meisten Fällen keine gute Idee ist. Natürlich gibt es Ausnahmen, aber wenn der Inhalt nicht wichtig genug ist, um ihn in einer "Standard" -Desktopform anzuzeigen, ist er höchstwahrscheinlich nicht wichtig genug, um auf großen Bildschirmen angezeigt zu werden. Zeigen Sie auf allen Geräten denselben Inhalt an, verpacken Sie ihn jedoch anders. ( Bild vergrößern ) Ein großer Bildschirm bedeutet nicht, dass der Benutzer plötzlich eine beschnittene Seite erhalten möchte, die schwer zu sehen ist. Ebenso bedeutet ein kleinerer Bildschirm nicht




    dass der Benutzer keine Informationen benötigt, die zuvor auf der Site gesehen wurden. Zeigen Sie daher den gleichen Inhalt an, „packen“ Sie ihn jedoch anders, damit er auf einem großen Bildschirm angezeigt werden kann.

    Auf keinen Fall sollten wichtige Inhalte zur Seite hinzugefügt werden, nur weil auf der Seite Platz dafür ist. Auf die gleiche Weise sollten wichtige Inhalte nicht beschnitten werden, nur weil der Bildschirmbereich begrenzt ist (siehe Testergebnisse „ Wie sollten sich Ihre mobilen und Desktop-Websites unterscheiden? “, In denen dieses Prinzip beschrieben wird). Der einzige Fall, in dem neue Inhalte auf dem großen Bildschirm hinzugefügt werden können, ist, wenn diese Inhalte nur auf dem großen Bildschirm sinnvoll sind, auf normalen jedoch nicht benötigt werden.

    Die universelle Regel: Das Auftauchen neuer Inhalte in großer Auflösung ist eine alarmierende Glocke . In einigen Fällen mag dies gerechtfertigt sein, aber im Grunde genommen ist der Inhalt entweder zu unwichtig, um auf dem Standardbildschirm angezeigt zu werden, und Sie müssen ihn dann von der erweiterten Version ausschließen, oder er ist wirklich wichtig und muss unabhängig von der Größe angezeigt werden Bildschirm. Es ist klar, dass wichtige Inhalte im verfügbaren Raum unterschiedlich dargestellt werden können, aber dieser Inhalt muss in der einen oder anderen Form in allen Versionen des Designs vorhanden sein.

    Ideen zur adaptiven Skalierung von Online-Shops


    Unter Berücksichtigung der oben beschriebenen Regel der Unveränderlichkeit von Inhalten werden wir einige der vielen Möglichkeiten der adaptiven Skalierung betrachten , die für Online-Shops funktionieren können.

    Alle nachfolgenden Beispiele werden mit Hilfe von Skizzen gezeigt, die Screenshots von Wayfair.com überlagern. Momentan passt sich das Desktop-Design von Wayfair.com nicht an (dh die Seiten werden nicht skaliert und das Layout ändert sich nicht, wenn die Größe des Browserfensters geändert wird), weder nach rechts noch nach links - die Seitenbreite bleibt unabhängig von der Größe des sichtbaren Bereichs des Bildschirms fest. Dies ist jedoch ein gutes Beispiel dafür, wie verschiedene Arten von Seiten eines Online-Shops an große Bildschirme angepasst werden können.

    In der Praxis werden wahrscheinlich andere Elemente auf der Seite neu erstellt und möglicherweise skaliert (insbesondere Elemente wie Kopf- und Fußzeile). Für unsere skizzenhaften Illustrationen ist es jedoch ausreichend, sie ein wenig zu verschieben. Diese Beispiele dienen als Inspiration . Je nach Nische und Tätigkeitsbereich scheinen Ihnen einige geeigneter zu sein als andere.

    Integriertes Berechtigungsfenster


    Das Autorisierungsfenster kann auf dem großen Bildschirm weniger aufdringlich gestaltet werden, wenn Sie die modale Anzeige verlassen und stattdessen das Formular im sichtbaren Teil der Seite korrigieren. Dann ist das Formular nicht so auffällig, da es nicht mehr die gesamte Seite blockiert. Dies bleibt spürbar, da es unmittelbar nach dem Laden (über der Hauptebene) oben auf der Seite angezeigt wird. Das Fenster mit dem Berechtigungsformular wird als Inhalt der Spalte über der Hauptebene eingebettet. ( Bild vergrößern ) Dies erleichtert Benutzern, die keine Berechtigung zum Ignorieren haben möchten




    bilden, weil es nicht mehr speziell ausgeschaltet werden muss. Gleichzeitig haben die meisten Befragten in unseren Usability-Studien die Standarddialogfelder einfach geschlossen, ohne sie überhaupt gelesen zu haben, und sie häufig als „Popups“ eingestuft (siehe Artikel „ Vermeiden Sie diese 5 Arten von Grafiken für Online-Shops “). Das ist ein bisschen selektive Blindheit. Solche Personen haben möglicherweise einen größeren Wunsch, sich das Autorisierungsformular anzusehen, wenn es nicht modal angezeigt wird, sondern in der Hauptspalte über dem Inhalt. Wenn sie ein Element betrachten, müssen sie nicht ihre ganze Aufmerksamkeit darauf verwenden, herauszufinden, wie es ausgeschaltet werden kann.

    Quicklinks aus dem Header und Keller


    Die beliebtesten Links aus der Überschrift (z. B. Mein Konto oder eine Bestellung für einen autorisierten Benutzer aufgeben) und aus dem Keller (Service und Fragen) können im Block auf der Hauptseite angezeigt werden, wenn Platz vorhanden ist. Natürlich sollten Links an der gleichen Stelle im Kopfmenü und in den Abschnitten des Untergeschosses verfügbar bleiben . Auf dem großen Bildschirm können diese Links einfach auf der Hauptseite dupliziert werden . Beliebte Links aus der Kopf- und Fußzeile werden im Block auf der Hauptseite als Quicklinks angezeigt. ( Bild vergrößern ) Dies ist ein gutes Beispiel für Inhalte, auf die auf der Seite weiterhin zugegriffen werden kann, die jedoch anders angezeigt werden.




    Dies ist kein neuer Inhalt, nur der aktuelle Inhalt wurde anders angezeigt, insbesondere für Benutzer mit großen Bildschirmen. Insbesondere in diesem Beispiel sollten Schnellverknüpfungen etwas gedämpft sein, um nicht die Aufmerksamkeit des Hauptinhalts auf sich zu ziehen.

    Eingebauter Karussellschieber


    Das Karussell auf der Hauptseite weist viele Schnittstellenprobleme auf, und es ist immer notwendig, es mit großer Sorgfalt zu implementieren (siehe acht Anforderungen für das Karussell, die im Verlauf unserer Forschung erhalten wurden). Auf dem großen Bildschirm kann das Karussell natürlich einfach vergrößert werden, wodurch die gesamte Funktionalität der Diashow erhöht wird. Wenn die Folien jedoch quadratisch oder sogar vertikal ausgerichtet sind, kann das vergrößerte Karussell den Rest des Inhalts über den Rand des sichtbaren Bereichs hinaus senken - auf der Hauptseite sehen Sie weniger, obwohl der sichtbare Bereich größer geworden ist! Die Lösung besteht darin, das Karussell durch eine Reihe von zwei oder drei Dias in einer Reihe zu ersetzen, die gleichzeitig angezeigt werden. Die Objektträger im Karussell werden durch eine Reihe regulärer Objektträger ersetzt. ( Bild vergrößern )




    Wenn die Gesamtzahl der Objektträger der Anzahl der Spalten entspricht, können Probleme mit den Funktionsmerkmalen des Karussells vermieden werden, indem eine statische Anordnung der Objektträger in mehreren Spalten verwendet wird. Wenn es mehr Folien als Spalten gibt, müssen Sie natürlich das Karussell verlassen oder neue Zeilen hinzufügen.

    Eingebauter Einkaufskorb


    Nachdem der Benutzer das Produkt in den Warenkorb gelegt hat, hoffen die meisten Besitzer von Online-Shops auf eines von zwei Dingen: Der Benutzer sucht nach anderen Produkten, die in den Warenkorb gelegt werden können, oder gibt eine Bestellung für Waren im Warenkorb auf. Wenn der Benutzer nach anderen Produkten sucht, ist dies definitiv gut für den Verkauf. Auf der anderen Seite bedeutet dies, dass der Benutzer seine Wahl zu bereuen beginnt , insbesondere wenn er viel Zeit damit verbracht hat , die Site zu erkunden, als er nach zusätzlichen Waren gesucht hat. Ein Standardknallkorb wird integriert, wenn der Benutzer Produkte hinzufügt. ( Bild vergrößern )




    Durch die Integration eines Standard-Popup-Warenkorbs (im Header verfügbar) in den Inhalt erstellt der Verkäufer eine Übersicht für den Benutzer von Waren, die sich bereits im Warenkorb befinden. Und erinnert sich so an die wundervollen Produkte, die der Benutzer bereits gefunden hat (die natürlich vor dem Verlassen gekauft werden müssen!). Dies ermöglicht dem Benutzer einen schnellen Zugriff auf eine Bestellung und hilft dabei, den Verkauf abzuschließen.

    Darüber hinaus haben wir während unserer Erkundung der Homepage und der Kategorienavigation häufig beobachtet, dass Personen wieder geöffnet wurdenWarenkorb nur um den Namen der zuvor hinzugefügten Produkte zu sehen. Sie können beispielsweise den Warenkorb öffnen, um den Modellnamen der Kamera anzuzeigen, die gerade hinzugefügt wurde, um einen geeigneten Koffer zu finden. Der standardmäßig eingeblendete Warenkorb erleichtert das Auffinden verwandter Produkte, da Sie die aktuelle Produktliste direkt mit den Artikeln im Warenkorb vergleichen können.

    Zusätzliche Warenspalte


    Eine der naheliegendsten Möglichkeiten, den leeren Bereich in der Warenkachel zu beseitigen, besteht darin, die Waren so neu anzuordnen , dass sie in eine zusätzliche Spalte passen. Dies kann die Anzahl der auf dem Bildschirm sichtbaren Produkte deutlich erhöhen. Im folgenden Beispiel kann der Benutzer nicht sechs, sondern zehn Produkte sehen. Das Produktlistenraster ist so angeordnet, dass zusätzliche Spalten auf den großen Bildschirm passen. ( Bild vergrößern ) Mit diesem Ansatz können Sie die Liste der Produkte erheblich anpassen




    unter der großen Leinwand, aber mach es vorsichtig. Wenn die Anzahl der Spalten zu groß ist, wird die Anzeige der Kachel möglicherweise schwieriger. Benutzer lesen die Informationen und können nur schwer von Zeile zu Zeile springen (aus diesem Grund hat der Text eine optimale Zeilenlänge ).

    Begrenzen Sie daher Ihre Produktliste auf eine Breite von fünf bis acht Spalten (abhängig von der Größe der Elemente in der Liste und der Nische des Produkts), damit sich Benutzer nicht in der Informationsflut verlieren.

    Größere Abbildungen der Produkte in der Liste


    Eine andere naheliegende Möglichkeit, den großen sichtbaren Bereich in der Produktliste zu nutzen, besteht darin , jedes Element in der Liste zu vergrößern , um den Bildschirm auszufüllen. Beispielsweise können Sie die Produktvorschau erheblich vergrößern, sodass der Benutzer das Design jedes Produkts detaillierter betrachten kann. Dies ist ein greifbarer Vorteil für Nischen von Produkten, die durch das Erscheinungsbild beworben werden, da es für den Benutzer viel einfacher ist, das zu schmeckende Produkt zu wählen, wenn die Menge der übertragenen visuellen Informationen maximal ist. Elemente der Produktliste werden vergrößert, Bilder mit hoher Auflösung geladen und die maximale Menge an visuellen Informationen übertragen. ( Bild vergrößern )




    Vorsicht wird auch hier nicht schaden. Eine einfache Skalierung des Bildes führt häufig zu einer starken Erhöhung der Höhe der Listenzeile (wir gehen davon aus, dass die Proportionen erhalten bleiben). Infolgedessen verringert sich die Anzahl der Produkte pro Seite erheblich. Beachten Sie die Abbildung oben - die zweite Zeile in der Liste wurde fast vollständig außer Sichtweite gedrückt.

    Der Kompromiss beim Vergrößern des Bildes in der Produktliste lautet daher wie folgt: Wenn Sie den Detaillierungsgrad der visuellen Daten für jedes Produkt erhöhen , schränken Sie die Übersicht der verfügbaren Produkte ein, da weniger Produkte im sichtbaren Bereich platziert werden.

    Skalieren und Neuerstellen einer Produktliste


    Wenn Sie die beiden vorherigen Lösungen kombinieren, falls der Bildschirm des Benutzers erweitert wird, dh indem Sie Spalten hinzufügen und die einzelnen Elemente in der Produktliste erweitern, erhalten Sie die besten Ergebnisse. Es gibt mehr visuelle Daten für jedes Produkt, während die Übersicht gespeichert wird. Die Produktkachel wird neu erstellt, um zusätzliche Spalten anzuzeigen, auch wenn die Elemente in der Liste eine untere Grenze in der Höhe erreichen. Elemente der Warenliste werden gleichzeitig vergrößert und in zusätzliche Spalten umgeordnet. ( Bild vergrößern ) Dadurch kann sich der Listeneintrag erhöhen.




    um zusätzliche visuelle Informationen anzuzeigen, ohne jedoch die Höhe zu erhöhen, sodass Sie bei der Anzahl der auf dem Bildschirm sichtbaren Produkte Kompromisse eingehen mussten. Durch das Hinzufügen von Spalten wird die Anzahl der Produkte im sichtbaren Bereich sogar erhöht. Es stellt sich heraus, dass wir sowohl die Gesamtzahl der Produkte auf dem Bildschirm als auch den Detaillierungsgrad der einzelnen Produkte erhöhen.

    Klebefilter


    Eine andere Möglichkeit, leeren Raum zu beseitigen, besteht darin, das Bedienfeld mit Filtern zu fixieren und im sichtbaren Bereich des Bildschirms als „klebriges“ Element zu sortieren . Auf diese Weise erhält der Benutzer zusätzliche Informationen zu dem Produkt, das er gerade betrachtet, sowie einen schnellen Zugriff auf die Verwaltung der Listenparameter. Das Filterfeld kann als Seitenfeld angezeigt werden, das an den Rändern des Bildschirms angebracht ist. ( Bild vergrößern ) Feste Inhalte sind eine effektive Methode, um Speicherplatz zu nutzen, wenn der Hauptinhalt nicht sehr breit ist. Wenn Sie Inhalte am Rand des Bildschirms erfassen, sollten Sie dies jedoch nur entlang der Achse tun, auf der genügend Platz vorhanden ist, um sie zu platzieren, d. H. Entlang der Achse, auf der zu viel Platz vorhanden ist. Z.B,




    Erfassen Sie keine Inhalte am oberen oder unteren Bildschirmrand, ohne Regeln anzuwenden, die auf der Höhe des sichtbaren Bereichs basieren (z. B. eine höhenbasierte Medienabfrage), mit der überprüft wird, ob Speicherplatz benötigt wird.

    Bei entsprechender Überprüfung der Regel kann die klebrige Seitenwand der Filter jedoch auch in mehrere Spalten unterteilt werden, wobei die Parameter in zwei oder drei Spalten unterteilt werden. Wenn das Filterpanel horizontal ist , können Sie es ganz oben am Bildschirm anbringen, sofern die Höhe des sichtbaren Bereichs dies zulässt. Wenn horizontal viel freier Speicherplatz vorhanden ist, können Sie dieses Bedienfeld beim Blättern zur Seite verschieben. Sie können auch die Höhe des Browserfensters verwenden, um die Reduzierung der Einstellungen dynamisch anzupassen . Filter - Die Anzahl der Parameter, die bis zu einem bestimmten Schwellenwert angezeigt werden, nimmt mit zunehmender Bildschirmhöhe zu.

    Kürzlich angesehene Artikel


    Als die Befragten während des Tests auf die Produktseite gingen und feststellten, dass das Produkt am Ende nicht zu ihnen passte, setzten sie entweder die Suche fort oder verließen die Website. Es liegt natürlich im Interesse des Verkäufers, die Rückkehr zu den vorherigen Bildschirmen zu ermöglichen. Indem Sie Angebote mit alternativen Optionen und verwandten Produkten oder eine Liste kürzlich angesehener Produkte in der Seitenleiste anzeigen, geben Sie dem Benutzer sofort die Fluchtwege, die er wählen kann, wenn das Produkt, das er gerade betrachtet, für ihn nicht geeignet ist. Produktangebote oder eine Liste kürzlich angesehener Produkte können auf der Seite platziert werden, um die Navigation zwischen den Produkten zu vereinfachen. ( Bild vergrößern )




    Ein vereinfachter Übergang von Produkt zu Produkt kann die Bereitschaft des Benutzers, die Suche fortzusetzen, erheblich beeinträchtigen. Natürlich kann in gleicher Weise gefördert und wird Produktkategorie . Erinnern Sie sich beispielsweise an Benutzerszenarien - wechselt der Benutzer zwischen Produktlisten und Seiten hin und her oder kann er von einem Produkt zum anderen wechseln?

    Manchmal kann die Möglichkeit, von Produkt zu Produkt zu wechseln, attraktiv sein, da der Benutzer ein vollständigeres Bild der Angebote der Website erhält. Ein Szenario mit einem solchen Übergang führt jedoch auch zu vielen Konflikten. Stellen Sie daher sicher, dass der Pfad, den Sie zur Förderung von Einheiten anbieten, ein ausgewogenes Verhältnis zwischen der Kategorie und den Produktkarten aufweist, auf die sich der Benutzer begibt.

    Klebrige Produktzusammenfassung


    Produktkarten sind lang. Sie können Bilder , Beschreibungen, Spezifikationen, Bewertungen, Vorschläge für alternative und verwandte Produkte , Fragen usw. enthalten. Alle unsere Usability-Studien haben gezeigt, dass mehr Informationen fast immer besser bedeuten (sofern der Inhalt von guter Qualität ist - also nützlich, zuverlässig und mehr oder weniger genau). Dies bedeutet auch, dass der Benutzer manchmal sehr weit von der Hauptproduktbeschreibung entfernt sein kann (dies ist der Name, der Preis, mögliche Produktoptionen und die Schaltfläche "Kaufen"). Um immer den Kontext anzuzeigen und die Schaltfläche "Kaufen" in Reichweite zu halten,Platzieren Sie die klebrige Zusammenfassung des Produkts auf dem freien Platz des großen Bildschirms und befestigen Sie sie am oberen Rand des sichtbaren Bereichs, wenn der Benutzer einen Bildlauf nach unten durchführt. Eine kurze Zusammenfassung des Produkts und die Schaltfläche "In den Warenkorb" werden am oberen Bildschirmrand angezeigt, wenn der Benutzer die lange Seite der Produktkarte nach unten scrollt. ( Bild vergrößern ) Die Produktübersicht kann im Grunde genommen eine leicht modifizierte Version des Designs sein, das für den Artikellistenartikel verwendet wird. Wenn die Zusammenfassung am oberen oder unteren Rand des Bildschirms festgelegt ist, kann sie enger gestaltet werden. Auf die eine oder andere Weise geht es darum , den Benutzerkontext ständig anzuzeigen,




    Sie haben die Möglichkeit, den Namen, die Kosten und alle Produktoptionen zu sehen, auch wenn der Benutzer sich eingehend mit den Bewertungen befasst hat. Halten Sie die Schaltfläche In den Warenkorb natürlich immer in Reichweite, wenn ein Benutzer eine begeisterte Bewertung eines zufriedenen Kunden liest.

    Bestellübersicht und Support


    Während der Kaufabwicklung wird kein übermäßiger horizontaler Speicherplatz verwendet, da diese Seiten in der Regel eine Konzentration erfordern und Formulare in mehreren Spalten zu schwerwiegenden Usability-Problemen während des Kaufvorgangs führen können. Auf der großen Leinwand ist ein Meer von leeren weißen Raum kann für die verwendet wird Zusammenfassung der Bestellung und Support - Informationen. Eine Zusammenfassung der Bestellung kann in allen Phasen der Auftragserteilung ein unveränderliches Element sein, um Sie stets an die Waren zu erinnern, von denen der Benutzer nur wenige Schritte vom Kauf entfernt ist. Die Bestellübersicht und Support-Details werden in der Seitenleiste angezeigt, wenn auf dem Bildschirm Platz dafür ist. ( Bild vergrößern ) Währenddessen unterstützen Details,




    Diese befinden sich normalerweise im Keller und können so angehoben werden, dass sie leicht zugänglich sind, wenn der Benutzer bei der Bestellung auf Schwierigkeiten stößt. Wenn Sie sich Sorgen über eine Überfülle von Supportanrufen machen, können Sie Supportdetails selektiver anzeigen, je nachdem, wie viele Schritte des Bestellvorgangs bereits ausgeführt wurden und ob Validierungsfehler aufgetreten sind.

    Adaptive Skalierung für Online-Shops


    Es ist erstaunlich, wie wenige Onlineshops derzeit ihr Website-Design für große Bildschirme optimiert haben. Sogar 18% der Top-Online-Händler, die Websites anbieten, die für große Bildschirme optimiert sind, haben nur einen kleinen Schritt in diese Richtung getan. Angesichts des großen Anwendersegments mit großen Bildschirmen ist der Bereich der adaptiven Skalierung gereift und hat Potenzial.

    Vergessen Sie bei der Verwendung der adaptiven Skalierung nicht das Grundprinzip"Gleicher Inhalt, andere Präsentation." Entweder ist sogar ein kleiner Teil des Inhalts für alle Benutzer wichtig, oder es ist nicht wichtig genug, um Benutzer auf großen Monitoren zu stören. Die Tatsache, dass der Benutzer mehr Platz auf seinem Bildschirm hat, bedeutet nicht, dass er einen Stapel minderwertiger Inhalte sehen möchte. Suchen Sie stattdessen nach Möglichkeiten, vorhandene Inhalte auf andere Weise anzuzeigen, damit die Benutzeroberfläche für Benutzer mit großem Bildschirm besser wird.

    11 in diesem Artikel beschriebene Ideen basieren auf dem Prinzip des gleichen Inhalts und der unterschiedlichen Darstellung - nehmen Sie den aktuellen Inhalt der Seite und skalieren Sie ihn oder ändern Sie den Ort, irgendwo signifikanter, irgendwo weniger:

    1. eingebautes Autorisierungsfenster
    2. Quicklinks aus dem Header und Keller
    3. eingebauter Karussellschieber
    4. eingebauter Einkaufskorb
    5. zusätzliche Warenspalte
    6. vergrößerte Bilder der Waren in der Liste
    7. Skalieren und Neuerstellen der Produktliste
    8. klebriger Filter
    9. Kürzlich angesehene Artikel
    10. klebrige Produktübersicht
    11. Bestellübersicht und Support

    Haben Sie weitere Ideen, um einen Online-Shop für einen großen Monitor anzupassen? Teile sie in den Kommentaren. Es ist Zeit, Online-Shops für Benutzer mit großen Monitoren anzupassen.

    Jetzt auch beliebt: