Ich erstelle eine neue persönliche Website und überlege, das Scroll-Snap-Modul von CSS als primäre Navigation zu verwenden. Dies ermöglicht im Wesentlichen, dass die Webseite basierend auf den Positionen der Elemente an bestimmten Orten "einrastet", wenn der Benutzer durch eine Seite scrollt. Es scheint, als könnte es für Benutzer hilfreich sein, aber auch ihre Erfahrung beeinträchtigen, wenn es falsch gemacht wird.
Gibt es daher Designrichtlinien, die ich bei der Verwendung von Fangpunkten beachten sollte? Was macht es effektiver als eine normale scrollende Webseite?
PS Ich kenne bereits die Programmierseite davon - ich frage nicht danach.
Das primäre Gleichgewicht, auf das Sie besonders achten müssen, wenn Sie eine Technik wie Scroll-Punkte verwenden, ist ein Gleichgewicht der Kontrolle . Sie möchten einem Benutzer nicht unnötig die Kontrolle nehmen oder einschränken, wenn Sie ihm helfen können, weil er an eine bestimmte Art der Navigation gewöhnt ist.
(Die in diesem Beitrag verlinkten Folien stammen aus meinem Vortrag über aussagekräftige Animationen )
Als ich zum ersten Mal von der Idee der CSS-Scroll-Snap-Spezifikation hörte, als die E-Mail-Liste im www-Stil Ende letzten Jahres anfing , darüber zu sprechen, dachte ich, dass das Hinzufügen zum CSS-Standard nur zu mehr kaputten Erfahrungen führen würde , da ich so viele schlechte gesehen habe Verwendung von JavaScript-Scroll-Hijacking, und die Technik selbst widerspricht oft meinen Regeln, was beim Animieren zu vermeiden ist . Nachdem ich jedoch darüber nachgedacht hatte, stellte ich fest, dass das Problem eher eine schlechte Implementierung ist, nicht die Technik selbst.
Viele der aktuellen Methoden, die Entwickler verwenden, um die Bewegungen unserer Benutzer auf einer Seite einzuschränken und zu strukturieren, sind allzu oft unnötig, schwerfällig, unsympathisch und frustrierend. CSS Scroll Snap Points versuchen, dies teilweise zu beheben, indem sie eine gute, native Implementierung bereitstellen, um das Scrollen unserer Benutzer zu unterstützen .
Kürzlich haben mehrere Hauptanbieter Unterstützung für CSS Snap Points eingeführt , und als Browser-implementierter Standard bietet es eine zugänglichere, minimal aufdringliche Alternative, um Benutzern zu helfen, effektiv auf bestimmten Arten von Seiten zu navigieren. Es wurden bereits informative Artikel darüber geschrieben , wie man CSS-Snapping-Scroll implementiert , aber da es entweder immens hilfreich oder spektakulär missbraucht werden kann, ist es mindestens genauso wichtig zu wissen, wann und wo man Snapping-Scroll angemessen verwendet.
Das Einrasten an Positionen auf einer Seite ist von Natur aus ein restriktives Verhalten. Schränken Sie die Fähigkeiten der Benutzer nur dann ein , wenn es für sie eindeutig von Vorteil ist.
Dies gilt insbesondere für nicht-mobile Ansichten. Auf großen Bildschirmen gibt es nur sehr wenige Anwendungsfälle für diese Art von Verhalten. Entwerfen Sie niemals standardmäßig damit. Denken Sie daran: Sie müssen dem Benutzer einen erheblichen Gegenwert dafür bieten, dass er seine Kontrolle übernimmt.
Die besten Diashows verwenden sehr wenig Text, um ihre Punkte zu vermitteln; Außergewöhnlicher visueller Inhalt ist der Fokus und das Prinzip. Wenn Sie Fangpunkte verwenden, beschränken Sie den Text auf etwas Kurzes, aber Aussagekräftiges.
Einige besonders gute Beispiele dafür sind die „Vision“-Seite von Wrk, die mit Animationen gefüllte „Über uns“-Seite von Code & Theory und die Fallstudien-Navigation von Vito Salvatore .
Hoffentlich haben Sie bemerkt, dass keine der im obigen Abschnitt verlinkten Websites ausschließlich das Scroll-Snap-Verhalten verwendet – sie ändern sich abhängig von der Art des angezeigten Inhalts. Beide gehen zum regulären Standard-Scroll-Verhalten, wenn sie mehr Inhalte wie Artikel anzeigen oder eine ausführlichere Beschreibung der von ihnen erstellten Arbeit geben.
Das Web ist dynamischer und leistungsfähiger als ein Navigationsverhalten. Snapping hat seine Anwendungsfälle, ist aber nicht für jede Art von Inhalt geeignet.
Hier sind einige besonders gute Anwendungsfälle, die den oben genannten Richtlinien entsprechen:
Die Entwicklung des CSS Snap Points Standards ist spannend! Mit guten Implementierungen von Anbietern können wir davon ausgehen, dass mehr Websites diese Technik nutzen werden, um ihre Benutzererfahrung zu verbessern, indem die präzise Navigation ein wenig einfacher wird. Zugegeben, es ist nur eine kleine Erweiterung unseres Arsenals, aber eine, die unter den richtigen Umständen ihren Platz verdient. Als Designer müssen wir aufpassen, dass wir nicht der Annahme verfallen, dass alle anderen das Web genauso erleben wie wir.