it-swarm-eu.dev

Sind Bildlaufleisten im Jahr 2020 tot?

Ich habe kürzlich einen Designer sagen hören, dass moderne Webdesigns keine visuellen Bildlaufleisten verwenden - oder zumindest nur beim Scrollen sichtbar sind. Ich bin ein Front-End-Entwickler und habe das nicht wirklich gehört. Ist das wahr? Insbesondere ist meine Frage:

Für eine Web-App, wenn der Inhalt scrollbar ist :

  1. Sollte es jemals sichtbare Bildlaufleisten geben (und warum)?
  2. Sollte es jemals keine sichtbaren Bildlaufleisten geben (und warum nicht)?
92
jbyrd

Ja sollte es.

Sichtbare Bildlaufleisten sind ein Vorteil "Diese Seite ist scrollbar"

Ohne solche visuellen Hinweise könnte die Funktionalität fehlen.

107
colmcq

Einige moderne Designrichtlinien unterscheiden zwar dauerhaft sichtbare Bildlaufleisten, aber nicht alle. Wenn beispielsweise in der Material Design Guide für Menüs ein Menü scrollbar ist, sollte eine Bildlaufleiste angezeigt werden. Wenn Ihr Inhalt scrollbar ist, sollte in jedem Fall klar sein, dass er einen Bildlauf ermöglicht.

Es liegt an einem einzelnen Designer oder einer Richtlinie, ob diese Leistung durch eine Bildlaufleiste angezeigt wird, die deutlich anzeigt, wie viel Sie nach unten scrollen können (traditionell), einen Link "Lesen Sie mehr" oder einen Pfeil, der nach unten zeigt (wie auf vielen modernen App-Homepages oder Blogs) ) oder ein Ausblenden, wenn Sie sich dem Rand des Inhaltsbereichs nähern, was bedeutet, dass Sie diese Richtung verschieben können, um mehr oder klarer zu sehen, aber der Preis selbst ist die notwendige Komponente. Es wäre ein schlechtes Design, Inhalte zu präsentieren, die gescrollt werden können, aber dem Benutzer diese Bildlauffähigkeit nicht anzeigen. Dies könnte den Benutzer frustrieren oder dazu führen, dass er wichtige Informationen oder Handlungsaufforderungen verpasst.

102
sintax

Als Mausbenutzer verabscheue ich scrollbare Inhalte, die mir keinen Blick auf Bildlaufleisten und keinen Zugriff darauf ermöglichen.

  1. Die Bildlaufleiste ist ein Steuerelement. Es ermöglicht mir, schnell durch große Seiten zu navigieren, mit denen kein Finger-Scrolling, Scroll-Wheeling usw. vergleichbar ist. Es gibt mir auch mehr Präzision für die meisten Seiten als mein Scrollrad.

  2. Die Bildlaufleiste gibt mir Informationen. Auf diese Weise kann ich schnell bestimmen, wie lange es dauern wird, den Inhalt der Seite zu lesen (vorausgesetzt, es handelt sich um eine anständige Bildlaufleiste, deren Verhältnis von Griff zu Dachrinne dem Verhältnis von Bildschirm zu Seite entspricht) und wie weit ich durch die Seite gekommen bin . Außerdem kann ich anhand eines Index bestimmen, wo ich mich auf der Seite befinde, wenn ich schnell nach oben und wieder nach unten scrollen möchte.

  3. Die Bildlaufleiste nimmt nur wenig Platz ein. Im Moment ist mein Bildschirm bei 1920 x 1080 = 2,1 Mpx. Das Firefox-Fenster mit dieser Seite hat eine Größe von 1125 x 905 = 1,0 Mpx. Die Bildlaufleiste ist 16 x 816 und nimmt insgesamt 13 Kpx oder 1,3% meines Bildschirms ein. Mein Monitor ist ziemlich nah bei mir, weil ich ihn zum Spielen benutze. Daher neige ich dazu, mein Fenster sowieso schmaler als den Monitor zu halten, sodass die Bildlaufleiste praktisch überhaupt keinen Platz beansprucht.

  4. Es gibt Fälle, in denen ich nicht einmal weiß, dass der Inhalt scrollbar ist, obwohl ich dazu neige, mit dem Rad zu scrollen, ohne die Leiste zu überprüfen. Daher bezweifle ich, dass dies ein großes Problem für Webseiten ist. Für Desktop-Anwendungen, die normalerweise nicht scrollen, wäre dies ein größeres Problem.

  5. Wenn Sie eine versteckte Bildlaufleiste wünschen, sollte diese jedes Mal angezeigt werden, wenn ich manuell scrolle (über Mausrad, Tastaturtasten, Trackpad usw.) und wenn ich meine Maus zum rechten Bildschirmrand bewege.

Mobile Geräte sind schwieriger, da die Bildlaufleiste so viel Platz beansprucht, insbesondere wenn sie groß genug ist, um verwendet zu werden.

  • A. Normalerweise löse ich das Problem, indem ich zur Desktop-Ansicht wechsle (ich habe noch keine Website gesehen, deren mobile Version so gut ist, geschweige denn besser als die Desktop-Version, daher verwende ich sowieso standardmäßig die Desktop-Ansicht). Dann zoome ich weit heraus, scrolle nach unten und zoome dann wieder hinein. Es ist schneller und präziser als der Versuch, beim Vergrößern zu scrollen, zu scrollen, zu scrollen, und erfordert keine griffige Bildlaufleiste. (Außerdem kann ich vergrößern, um Bilder, Diagramme usw. besser sehen zu können, was die meisten mobilen Websites aus unerklärlichen Gründen nicht zulassen.)

  • B. Firefox auf Android hat eine nicht zugängliche Bildlaufleiste, die mir anzeigt, auf welchem ​​Teil der Seite ich mich befinde (sowohl für Desktop- als auch für mobile Versionen einer Site), ebenso wie das Standard-Internet "Browser. Ich verwende diese wie in einem Desktop-Browser mit einer Maus zum Indizieren und Bestimmen der Seitenlänge.

  • C. Ich neige auch dazu, nur große Webseiten auf einem geeigneten Monitor anzuzeigen, daher ist es viel weniger wahrscheinlich, dass ich auf einem mobilen Gerät versuche, durch eine 900-seitige PDF-Datei oder etwas anderes zu scrollen. Wenn Ihre Web-App nie länger als zwei oder drei Bildschirme wird, ist das Scrollen viel weniger ein Problem.

  • D. Es ist auch erwähnenswert, dass das Scrollen mit dem Touchscreen-Finger in der Regel sowohl schneller als auch präziser ist als mit dem Mausrad. Daher muss eine Seite viel größer sein, bevor es schwierig ist, schnell zu navigieren.

Fazit

Bei Maus- (oder Trackpad- oder Trackball-) Setups sollte die Bildlaufleiste meiner Meinung nach immer sichtbar und griffig sein. Es sollte mindestens beim Scrollen oder beim Bewegen der Maus in der Nähe der Bildlaufleiste angezeigt werden.

Bei mobilen Touchscreen-Setups sollte die Bildlaufleiste beim Scrollen immer sichtbar sein, muss aber nicht griffig sein und sollte sich wahrscheinlich verstecken, wenn nicht gescrollt wird, um Platzverschwendung zu reduzieren.

Ich habe mich nicht mit Tablet/iPad oder größeren Touchscreens herumgeschlagen, daher bin ich mir nicht sicher, wie ich mich dabei fühle.

Natürlich ist die Option zum Ändern des visuellen Stils (entweder durch temporäre Cookies oder durch gespeicherte Benutzereinstellungen, je nachdem, ob Ihr Benutzer ein Gast ist oder ein Konto hat) die beste Wahl, aber Sie sollten standardmäßig etwas Funktionales verwenden.

61
MichaelS

Dieser Standpunkt stammt hauptsächlich aus der Mac-Umgebung, in der Bildlaufleisten normalerweise kurz angezeigt werden, wenn Inhalte zum ersten Mal angezeigt und dann ausgeblendet werden. Wenn ein Bildlauf erfolgt (vom Benutzer ausgelöst oder auf andere Weise), wird die Bildlaufleiste erneut angezeigt. Nur der Griff ist sichtbar (als halbtransparenter, abgerundeter schwarzer Balken). keine Pfeile oder Dachrinne. Befindet sich der Cursor beim Anzeigen über der Bildlaufleiste, wird er breiter und ermöglicht das Ziehen mit dem Cursor. Der Inhalt ändert zu keinem Zeitpunkt die Größe. Es verhält sich so, als ob die Bildlaufleiste nicht vorhanden wäre und die Bildlaufleiste oben gerendert wird.

Dies gilt bei Verwendung eines Trackpads oder eines Trackpad-ähnlichen Eingabemechanismus (d. H. Eines Laptops). Bei Verwendung einer Maus werden standardmäßig weiterhin normale Bildlaufleisten angezeigt.

Dies gilt natürlich auch für Mobilgeräte. iOS verwendet fast identisches Verhalten (minus Cursor-Interaktion). Tatsächlich denke ich, dass es unter iOS gestartet wurde (wo Bildlaufleisten zu klein wären, um zuverlässig zu tippen) und auf macOS migriert wurde.

Insgesamt hat dies Vor- und Nachteile:

  • Wenn Sie keinen Platz für Bildlaufleisten schaffen müssen, wird das Seitendesign vereinfacht (weniger störende Elemente) und es wird mehr Platz für den Inhalt geschaffen, insbesondere wenn mehrere Stellen gescrollt werden können.
  • Benutzer auf dem Mac sind an dieses Verhalten gewöhnt und erwarten es.
  • Es gibt keinen Sprung in der Inhaltsgröße, wenn ein Bereich plötzlich scrollbar wird, was auch eine häufige Mehrdeutigkeit behebt, bei der eine Bildlaufleiste benötigt werden kann, solange sie sichtbar ist, und nicht benötigt wird, wenn sie ausgeblendet ist (z. B. aufgrund von Textumbruch).

  • Auf der negativen Seite müssen Sie, wie bereits erwähnt, einen anderen Weg finden, um anzuzeigen, dass der Inhalt scrollbar ist. Kein solches Problem für den Hauptteil einer Webseite, da dies ohnehin erwartet wird, aber je nach den Erwartungen der Benutzer ein Problem für interne Inhalte sein kann. Der anfängliche Blitz hilft, reicht aber nicht immer aus.

  • Die Benutzerinteraktion zum Springen zu einer anderen Stelle im Dokument ist umständlich. Der Benutzer muss seinen Cursor an die Stelle bewegen, an der die Bildlaufleiste angezeigt wird, leicht mit dem Mausrad oder "2-Finger-Bildlauf" scrollen, die Bildlaufleiste greifen, wenn sie angezeigt wird, und an die gewünschte Stelle ziehen. Momentum Scrolling hilft in einigen Fällen, dies zu vermeiden.
  • Da die Bildlaufleiste auf einem transparenten Hintergrund angezeigt wird, kann es bei dunklem Hintergrund schwierig sein, sie zu erkennen. macOS bietet eine weiße alternative Bildlaufleiste, die in diesem Fall verwendet werden kann (ich glaube, Browser wechseln automatisch darauf, wenn der Hintergrund ausreichend dunkel ist, aber nicht 100% narrensicher). Außerdem verleiht es der Leiste ein subtiles Leuchten (oder einen Schatten) als nahezu ausfallsicher.

Wenn möglich, halten Sie sich für solche Dinge natürlich an browser-native Komponenten. Sie werden sicherstellen, dass jeder Benutzer eine natürliche Erfahrung für seine Plattform erhält (ich habe sicherlich viele Websites gesehen, die versucht haben, Momentum-Scrolling und elastisches Scrollen mit grausamen Endergebnissen zu replizieren). Mac-Benutzer werden sich nicht dafür bedanken, dass Sie sichtbare Bildlaufleisten dort erzwingen, wo sie sie nicht erwarten würden, und Windows-Benutzer werden sich nicht dafür bedanken, dass Sie Bildlaufleisten dort versteckt haben, wo sie sie erwarten würden.

26
Dave

Das Entfernen von Bildlaufleisten ist aus meiner Sicht ein weiteres Beispiel für die idiotische und flache Ideologie, Stil über Funktionalität zu setzen. Dies ist von hinten nach vorne, wie es sein sollte, und zeigt mir, dass die Gesellschaft für mich dumm ist. Bildlaufleisten erfüllen einen wichtigen funktionalen Zweck, den andere alternative Methoden nicht immer replizieren können. Ich denke, die Änderung basiert teilweise auf der Vorstellung, dass Menschen Touchscreens verwenden, so dass sie daher nicht benötigt werden, aber viele Menschen tun dies immer noch nicht. Viele alternative Methoden erfordern zusätzliche Konzentration und Finesse, um sie zu manipulieren. Dies ist ein Energieverbrauch, den ich lieber für die Arbeit ausgeben würde, als mit einer schlechten Benutzeroberfläche zu kämpfen. Herkömmliche Bildlaufmethoden gehen normalerweise mit dem Scrollen der Tastatur einher, indem Sie die Pfeiltaste nach unten drücken. Dies ist meiner Meinung nach viel einfacher als bei anderen Methoden, die mehr Konzentration erfordern. Wenn jedoch die Bildlaufleisten entfernt werden, verschwindet manchmal auch das Scrollen der Tastaturpfeile, was eine GROSSE Nummer sein sollte -Nein! Ein Beispiel ist Das große soziale F-Netzwerk hat ständig Irritationen verursacht, da es beim Scrollen durch den Nachrichtenverlauf einen "dynamischen" Bildlaufstil aufweist und beim Scrollen nicht weiß, wo Sie sich in der Konversation befinden, aber dann nach oben scrollen An einem bestimmten Punkt und plötzlich wird eine zusätzliche Ladung Konversationsverlauf geladen, und Sie springen weit voraus, wo Sie sein wollten.

Ich denke, es ist auch teilweise Unwissenheit und teilweise der Wunsch, Ressourcen und Bandbreite auf den Servern zu sparen, um Unternehmen auf Kosten der Benutzererfahrung Geld zu sparen. Es geht auch darum, Dinge für Idioten zu beschwichtigen, um die Verwendung für sehr einfache Befehle "einfacher" zu machen, auf Kosten von Problemen für jeden, der nicht niedergeschlagen ist und vielleicht etwas ganz Außergewöhnliches tun möchte. Ich hoffe, Blockchain läutet das Ende dieser Ära ein, in der die Benutzererfahrung geopfert wird, um Geld zu sparen, und wir können Systeme haben, die schnell funktionieren und sowohl für einfache als auch für fortgeschrittene Benutzer problemlos sind.

Wäre es zum Beispiel nicht großartig, wenn Sie mit Software wie Skype und F Messenger sofort zum Anfang Ihres Nachrichtenverlaufs scrollen könnten, anstatt ewig darauf zu warten, dass Abschnitt für Abschnitt geladen wird?! Ich habe immer vermutet, dass dies Ressourcen beim gleichzeitigen Laden des gesamten Loses spart. Wenn jedoch jemand mit ein wenig Intelligenz und differenziertem Denken dies entwerfen würde (in Blockchain-Kreisen häufiger als in Unternehmen, wie ich hoffe), könnten wir alle unseren Kuchen haben und ihn essen. Wir können Ressourcen sparen (was selbst in der Blockchain noch keine triviale Sache ist) und die gewünschten Informationen sofort abrufen, ohne dieses abscheuliche System zum Laden von Seiten für Seiten in Kauf nehmen zu müssen.

Legen Sie einfach den Rahmen des gesamten Zeitleistenverlaufs in einer Bildlaufleiste zusammen mit den Daten fest, die beim Scrollen angezeigt werden. Sobald Sie die Maustaste loslassen oder das Scrollen beenden, kann dieser bestimmte Abschnitt geladen werden. Wenn Sie direkt zum Anfang zurückkehren möchten, scrollen Sie nach rechts oben und es muss nur die erste Seite geladen werden. Wenn Sie jedoch alles sofort laden müssen, um beispielsweise ein Schlüsselwort zu suchen, geben Sie einfach eine einfache Schaltfläche ein, die bei Bedarf gedrückt werden kann, um den gesamten Nachrichtenverlauf oder den Verlauf des gesamten Bildlaufs abzurufen.

Wenn jemand speziell signalisiert, dass alles geladen werden muss, sollte die Blockchain die Ressourcen aufnehmen. Dies ist der Unterschied zwischen ihm und Unternehmen des alten Modells, von denen ich vermute, dass sie es nur ungern zulassen würden, dass selbst diejenigen, die speziell alles zum Laden benötigen, dies tun können, um ihre Ressourcen für ihr schmutziges Gewinnmotiv zu schützen und den Benutzer zu verarschen. Deshalb brauchen wir Blockchain und vorzugsweise die offene Version.

11
Lex

Aus gemischter Sicht ...

Horizontale Bildlaufleisten sind normalerweise eine schlechte Sache. Dies kann bedeuten, dass Sie für die Bildschirmbreite eines PC-Monitors optimiert sind, was sich nicht gut auf mobile Geräte übertragen lässt. Wenn Sie nach unten scrollen, müssen Sie zum Lesen der gesamten Seite viele Links-Rechts-Bildläufe auf jedem Inhaltsbildschirm ausführen. Umgekehrt haben diese Websites Speicherplatz auf größeren Bildschirmen verschwendet. (Ältere Leser, erinnern Sie sich an Websites mit der Aufschrift "Am besten bei 1024 x 768 angezeigt"? Ja, diese.) Wir sollten uns das 2019 nicht gefallen lassen müssen - dies sind nicht die 1990er Jahre und wir verwenden Netscape Navigator immer noch nicht. Geh einfach nicht dorthin.

Vertikale Bildlaufleisten hingegen sind in Ordnung. Wir sind es intuitiv gewohnt, etwas nach unten zu scrollen - denken Sie beispielsweise daran, wie Sie eine Papierzeitung lesen würden. Die gesamte Seite ist mit nur Auf-/Ab-Schriftrollen gut sichtbar.

Es gibt eine Meinung, dass mehr als 2 oder 3 Bildschirme voller Inhalte zu viel sind. Danach wird es schwierig, Sachen zu finden. Während Bildlaufleisten funktionieren, lassen Sie sich nicht zu Seiten mit unbegrenzter Länge führen!

8
Graham

Ja, Bildlaufleisten sollten sichtbar sein, wenn auch nur aus Gründen der Barrierefreiheit.

Es gibt viele Fälle, in denen das Ausblenden einer Bildlaufleiste Ihre Site/Ihr Programm zwischen frustrierend und grenzwertig unbrauchbar macht:

  • Verwenden von unterstützender Hardware/Software für den Zugriff auf Ihre Seite
  • Verwenden einer Maus ohne Scrollrad
  • Verwenden eines Remotedesktopsystems, das keine Bildlaufereignisse durchläuft
  • Verwenden eines Touchpads, das mit Mehrfingergesten scrollt (die meisten durchschnittlichen Benutzer wissen nicht, dass diese vorhanden sind)
  • Bei Verwendung eines Touchscreens ist die Seite mehr als ein paar Bildschirme hoch, und ich muss irgendwo am anderen Ende der Seite einen Bildlauf durchführen
  • Scrollen Sie mithilfe eines Touchscreens durch eine Seite, die voller Links/Schaltflächen ist (wobei die Tap-and-Flick-Bewegung wahrscheinlich versehentlich etwas aktiviert).

Sichtbare Bildlaufleisten sind eine einfache Möglichkeit, all diese Probleme zu vermeiden. Wenn das Hauptargument Ihres Kollegen ist, dass andere Websites dies tun, hören Sie ihm nicht einmal zu. Gruppenzwang ist kein gültiges Argument, es sei denn, es liegt ein wichtiger, bedeutungsvoller Grund vor warum es ist eine gute Idee, dies zu tun. Diese Art des Denkens ist, wie die <blink> tag wurde populär.

Implementieren Sie auch aus Gründen der Barrierefreiheit keine eigenen Bildlaufleisten. Verwenden Sie die vom System bereitgestellten. Assistive Technologie kann hausgemachte Bildlaufleisten nicht immer identifizieren und als solche bedienen.

7
bta

Eine Bildlaufleiste ist äußerst nützlich

  1. es zeigt dem Benutzer, dass die Seite scrollbar ist
  2. es zeigt dem Benutzer, wo er sich gerade auf der scrollbaren Seite befindet

Sie haben keine Ahnung, wie oft ich sauer und verloren war, weil ein beschissener Designer das Löschen der Bildlaufleiste für eine gute Idee hielt.

3
Solid_Metal

Um die Antwort von MichaelS zu ergänzen,

Auf Tablets und iPads ist eine nicht greifbare Bildlaufleiste vorzuziehen, die beim Nicht-Scrollen ausgeblendet wird. Wie er sagte, ist das Scrollen auf Touch-Geräten viel präziser und sichtbare, griffige Bildlaufleisten sind klobig und nervig. Abhängig von der Seitenlänge ist jedoch eine Schaltfläche "Zurück nach oben" willkommen.

Während ich dies auf StackExchange mit einem 12,9-Zoll-iPad Pro schrieb, bemerkte ich, dass das Hinzufügen einer anständigen (~ 1 cm) Menge Polsterung in einem etwas anderen Ton hilfreich ist, da es das Scrollen ermöglicht, ohne versehentlich Links zu öffnen.

2
Bob Kerman

Eine interessante Frage, mein 2c stammt von einem Entwickler, führt aber UX und hat auch Schnittstellen mit mehreren internen scrollbaren Bereichen entworfen.

Ein paar Punkte:

  1. Sichtbare Bildlaufleisten sollten vorhanden sein, wenn der Inhalt groß genug ist, um einen Bildlauf zu erfordern, da das Vorhandensein einer Bildlaufleiste anzeigt und ermöglicht, dass der Inhalt gescrollt werden kann.
    • Unendliche Schriftrolle ist meine persönliche Vorstellung von der Hölle, besonders wenn Sie auf die Spurleiste geklickt haben und sie ziehen (tangential über)
  2. Wenn der Inhalt nicht gescrollt werden kann, sind Bildlaufleisten ein Anti-Erschwinglichkeits-Hinweis auf Dinge, die nicht passieren können.
    • Ein Edge-Fall sind Dinge, die jetzt nicht gescrollt werden können , aber möglicherweise in der Lage sind, wenn beispielsweise der Inhalt größer wird, was bei Editoren oder anderen häufig vorkommt System mit dynamischer Ausgabe. Insbesondere, wenn Sie die Bildlauffunktion hinzufügen/entfernen, die mit Layouts in Konflikt geraten kann, erhalten Sie einen horizontalen Ruck , wenn der Inhalt erweitert wird und dann die Bildlaufleiste angezeigt wird. (wenn du benutzt overflow: auto beispielsweise). In diesem Fall kann es einfacher sein, eine deaktivierte Bildlaufleiste einzufügen, um anzuzeigen, dass dies ein scrollbarer Bereich ist, aber der Inhalt ist noch nicht groß genug, um ihn zu aktivieren dieses Verhalten.
  3. Horizontale Bildlaufleisten sind normalerweise eine schlechte Idee, wenn sie mit vertikalen Bildlaufleisten kombiniert werden, da sie die implizite Modusauswahl einführen. Wie in ist der Standardwert für einen Maus-Scroll normalerweise ein vertikaler Scroll, aber mit einem impliziten zusätzlichen Tastendruck (oder einer Trackpad-Interaktion) kann ein horizontales Scrollen erreicht werden. Die Komplexität davon wird sehr selten erreicht.
  4. Innerhalb einiger Anwendungsoberflächen (z. B. Slippy Maps) kann das Entfernen aller Bildlaufleisten eine gute Idee sein, da sich der Inhalt in diesem Paradigma unter dem Browserfenster bewegt und nicht umgekehrt. Die Steuerelemente werden von den meisten Benutzern gut verstanden.
  5. Der Versuch, Bildlaufleisten zu formatieren, ist in 99% der Fälle keine gute Idee, es sei denn, Sie möchten viele spezifische benutzerdefinierte Versionen. Ich akzeptiere, dass sie nicht in allen Umgebungen perfekt aussehen und verwenden Sie die Standardeinstellungen des Browsers.
1
dougajmcdonald

Spricht der Designer davon, Bildlaufleisten durch eine schwebende Bildlauftaste nach unten/oben zu ersetzen? Ich denke, es ist vernünftig, weil dies ein Mobile-First-Ansatz ist und ich gesehen habe, dass er in bestimmten Kontexten erfolgreich verwendet wird, aber diese Schaltflächen können Bildlaufleisten in einem Raster nicht ersetzen.

0
Ling