Overflow Navigation Pattern – Problematik und Lösung

Die Problematik vom Overflow Pattern

Overflow Pattern erzeugt eine Viewport-Box, deren Inhalt horizontal und vertikal versteckt oder durch Scroll zugänglich gemacht werden kann.

Wenn die Navigationselemente von dem Nutzer der Webseite nicht schnell gefunden werden, ist der Nutzer nach ein Paar Sekunden wieder weg. Für den Erfolg einer Webseite oder einer Applikation ist eine klare Navigation ausschlaggebend.

Im Artikel “The Overflow Pattern” machte uns Brad Frost vor ein Paar Jahren auf ein Probleme des Patterns aufmerksam:

• Bilder sind abgeschnitten
• Wörter laufen einfach aus
• Wichtige Inhalte werden versteckt

Im folgenden Artikel konzentrieren wir uns auf die Problematik des Navigations-Patterns, betrachten drei konzeptionelle Ansätze und erarbeiten und gemeinsam eine eigene Lösung mit CSS.

Wer verwendet die “Horizontal Overflow Navigation”?

Das Horizontal Overflow Navigation Pattern wird unter anderem von  Google, Apple und The Guardian für deren Navigation verwendet. Schauen wir uns die Navigation dieser drei Webseiten an.

Die Lösungsansätze

Wie können wir den Nutzen über die versteckten Navigationspunkte informieren und ihm zeigen, dass es noch weitere Inhalte in der Navigation gibt.

• Frage: Können wir Scrollbalken anzeigen?
  Antwort: Machbar, aber Scrollbalken erzeugen eine Unruhe in der Gestaltung.
• Frage: Können wir “weiter” und “zurück” Pfeile einbauen?
  Antwort: Machbar, aber es wäre vom Vorteil für die Benutzerfreundlichkeit wenn die Webseite auch ohne JavaScript auskommen würde.
• Frage: Können wir visuelle Indikatoren einbauen?
  Antwort: Ja, Ein Hinweis zeigt dem Nutzer eine Aufforderung zum Handeln.

Der Prototyp

Flexbox ist die Perfekte Lösung für die moderne Variante des Overflow Patterns.
Flexbox-items sitzen auf einer horizontalen Axe und wachsen mit dessen Inhalt per se. Flexbox-items laufen bei Platzmangel über die Kanten des Elternelements und erzeugen ein Overflow.

Die Navigations Box bekommt die Eigenschaften: overflow: auto; display:flex; und der Inhalt der Box bekommt die Eigenschaft flex-grow: 1;.

Visualisierung und Markup für den ersten Prototypen:

<div class="nav-container">
  <div class="nav">
    <nav class="nav__list">
      <a href="#" class="nav__list-link">Philosophie</a>
      <a href="#" class="nav__list-link">Lösungen</a>
      <a href="#" class="nav__list-link">Workshops</a>
      <a href="#" class="nav__list-link">Team</a>
      <a href="#" class="nav__list-link">Blog</a>
      <a href="#" class="nav__list-link">Kontakt</a>
    </nav>
  </div>
</div>

.nav-container {
  max-width: 800px;
  margin: 0 auto;
  background-color: white;
}
.nav {
  display: flex;
}
.nav__list {
  flex-grow: 1;
}
.nav__list-link {
  text-decoration: none;
  color: rgba(38, 60, 82, 1);
  padding: 0 1em;
  height: 70px;
}

Entfernung von Scrollbalken

Scrollbalken sehen in jedem Browser unterschiedlich aus und deren Gestaltung stimmt nicht mit unserer überein. Damit die User überall eine konsistente Navigation haben, werden wir die Scrollbalken verstecken.

/*
  1. hides the scrollbar on webkit browsers
  2. hides the scrollbar on Egde
  3. enables smooth scrolling on mobile
  4. hide the scrollbar on firefox and fix the height
*/


.nav-container {
  height: 70px;  /*[4]*/
  overflow: hidden;  /*[4]*/
}
.nav {
  -webkit-overflow-scrolling: touch; /*[3]*/
  -ms-overflow-style: -ms-autohiding-scrollbar; /*[2]*/
}
.nav::-webkit-scrollbar { /*[1]*/
  display: none;
}

Einbau von Scroll Indikatoren

Mit dem Einbau von den Scroll Indikatoren werden die User auf das Scrollverhalten hingewiesen.

Recherche

Wie machen es die Anderen?

• Google hat eine absolut positionierte Box mit einem linearen Verlauf im rechten Bereich der Navigation, diese ist auf der rechten Seite jedoch nicht anklickbar.
• Guardian und Apple verstecken ihre Navigations-Links ohne Hinweise und lassen den Nutzer raten ob es noch mehr Inhalt zu entdecken gibt.

Lösung

Vor ein Paar Jahren hatte Роман Комаров(Roman Komarov) eine Idee zu Scroll-Schatten, die von Lea Verou noch verbessert wurde. Wie werden diese Idee für unsere Lösung verwenden.

Wir haben zwei Boxen. Die .nav Box erzeugt einen unbeweglichen Container und die .nav_list erzeugt einen beweglichen Container. Beide Boxen bekommen unterschiedliche Verläufe.

Die .nav Box bekommt zwei Radiale Verläufe links und rechts. Diese Verläufe sind unsere Scroll Indikatoren.

Die .nav__list Box bekommt auch zwei lineare Verläufe. Sie liegen oberhalb von den .nav Verläufen und dienen als Fade Objekte, mit denen die Scroll Indikatoren versteckt werden.

.nav {
  background-repeat: no-repeat;
  background-image: 
    radial-gradient( 
      farthest-side at 100% 50%, 
      rgba(57,255,20,1),
      rgba(57,255,20,0) 
    ),         
    radial-gradient( 
      farthest-side at 0% 50%, 
      rgba(57,255,20,1), 
      rgba(57,255,20,0)
    );
  background-position: 
    100% 50%, 
    0% 50%;
  background-size: 1rem 100%;
}
.nav__list {
  background-repeat: no-repeat;
  background-image: 
    linear-gradient(
      to left,
      rgba(255,255,255,1) 0%,
      rgba(255,255,255,1) 30%,
      rgba(255,255,255,0) 100%
    ),         
    linear-gradient(
      to right,
      rgba(255,255,255,1) 0%,
      rgba(255,255,255,1) 30%,
      rgba(255,255,255,0) 100%
    );
  background-position: 
    100% 50%, 
    0% 50%;
  background-size: 2rem 100%;
}

Reihenfolge in der Navigation ändern

Wenn ein Restaurant oder ein Ort bei Google gesucht wird, passt sich die Reihenfolge der Navigation entsprechend an. Auf einem mobilen Gerät sind die priorisierten Links gleich zu sehen.

Wir können dieses Feature sehr einfach mit der Flexbox order Eigenschaft implementieren.

Einfach die CSS class .nav__list-link--is-prioritized an einen oder mehrere Links in einer Navigation vergeben.

<a href="#" 
     class="nav__list-link nav__list-link--is-prioritized">
  Workshops
</a>

  /*
    1. logo should be always on the left
    2. prioritized items order should be 
        higher than logos order and lower than 0.
  */
  .nav__list-link--logo { 
    order: -10;
    margin-right: auto;
  } /*[1]*/
  .nav__list-link--is-prioritized { order: -1 } /*[2]*/

Fazit

Wie haben eine leichte Responsive-Navigation mit Hilfe von Overflow Pattern erstellt. Die Scroll Indikatoren informieren den User über den versteckten Inhalt.

Pro

• Fühlt sich natürlich an – just swipe
• Eine gute Alternative für ein Burger Icon
• Kann an vielen stellen wiederverwendet werden
• Standardmässig Responsive
• CSS Scroll Snap kann hinzugefügt werden
• Links können priorisiert werden
• Wenig code
• Funktioniert ohne Javascript
• Moderne Lösung mit Flexbox

Contra

• Heatmaps zeigen gefälschte Statistiken an
• Dropdown können nicht eingebaut werden
• Elemente werden ausserhalb des Sichtfeldes positioniert
• Die technische Implementation von Scroll Indikatoren ist schwer zu verstehen

Finales Resultat

Hier ist die finalisierte und durchgetestete Overflow Pattern Demo.