Zur Navigation Zum Inhalt Kontakt Menu Komponente finden Übersicht Web (Legacy) Prinzipien Grundlagen Barrierefreiheit Design System Guidelines Deutsch Français Italiano English Unsere Gestaltungsprinzipien Nutzerzentriert Wiedererkennbar Inklusiv Reduziert Ganzheitlich Selbsterklärend Aufgabenorientiert Passend SBB Markenportal Logo Digitale Uhr Nutzungsrechte Basis-Farben Funktionale Farben Off-Brand Farben Icons Fahrplan-Icons Piktogramme Über Barrierefreiheit Über diesen Guide Kontakt Weitere Informationen Product Owner User Research Interaction Design Visual Design Development Content Design Testing Was ist ein Design System?​ Designing Coding FAQ Hilfe Prozess Contribution Kontakt Übersicht Basis Komponenten Übersicht Releases Design Tokens Komponenten Roadmap Übersicht Basis Informationen Übersicht Basis Komponenten Sinn & Zweck Community Assets Anleitung Power-Apps Digitale Werbebanner SAP App Icons NBC

Übersicht

Was macht die Komponente?

Stellt unterschiedliche Informationen und Funktionen zur Verfügung.

Wann soll die Komponente eingesetzt werden?

Zur Ergänzung von Inhaltsseiten.

Regeln

  • Die Komponente wird immer in der Marginalspalte (rechts) eingesetzt.
  • Es können mehrere Komponenten in der Marginalspalte untereinander platziert werden.
  • Beim Scrollen werden alle Boxen in der Marginalspalte sticky. Die einzelnen Boxen werden sukzessive minimiert, sobald sie am oberen Rand des Viewports angelangt sind.
  • Einzelne Boxen im gescrollten Zustand können vom Benutzer aufgeklappt werden.
  • Es darf im gescrollten Zustand immer nur eine Box aufgeklappt sein.
Zustände und Varianten

Zustände

Der Next Best Click Container hat keine Viewport übergreifenden Zustände, da sie sich unterschiedlich verhalten.

Varianten

Aktion

Darstellung der Komponente Next Best Click Container zur Auslösung von Aktionen

Kontakt

Darstellung der Komponente Next Best Click Container als Information zu den Kontaktmöglichkeiten

Link

Darstellung der Komponente Next Best Click Container als Linkliste zu anderen Themen

Download

Darstellung der Komponente Next Best Click Container mit mehreren Download Dateien

Chat

Darstellung der Komponente Next Best Click Container zum Starten des Live-Chat

Verhalten

Desktop

  • Alle Next-Best-Click Optionen sind auf Inhalts-Seiten in der Margin-Spalte (rechten Spalte) angeordnet.
  • Beim Scrollen werden alle Boxen in der rechten Spalte sticky. Die einzelnen Boxen werden sukzessive minimiert, sobald sie an den oberen Rand des Viewports (unterhalb des Sticky Headers) angelangt sind (respektive bei schon minimierten Boxen jeweils darunter).
  • Im minimierten Zustand bleiben alle Boxen jederzeit für den User zugängig/erreichbar.
  • Der User kann dann jeweils eine Box öffnen (und auch wieder schliessen).
  • Im gescrollten Zustand kann jeweils nur eine Box zugleich geöffnet sein.
  • Die NBC-Box bleibt solange sticky, bis der User am Ende der Content-Area angelangt ist. Scrollt der User weiter nach unten werden die Boxen mit dem Content nach oben weggescrolled.
  • Scrollt der User danach wieder nach oben, erscheint auch die NBC-Box wieder und bleibt wieder sticky.
Darstellung des Verhaltens eines Next Best Click Containers auf Desktop und grösseren Auflösungen

Sonderfall NBC-Box innerhalb eines Accordion

  • Bei der Anwendung einer NBC-Box innerhalb eines Accordion wird diese nie minimiert.
  • Es darf nur eine NBC-Box in einem Accordion eingesetzt werden.
  • Beim Scrollen bleibt die NBC-Box sticky am oberen Rand bis zum Ende der Content-Area des Accordions, dannach wird die Box mit dem Content weitergescrollt.
Darstellung des Verhaltens eines Next Best Click innerhalb eines Akkordeons

Tablet

  • Alle Next-Best-Click Optionen sind jederzeit über das sticky Element rechts unten verfügbar.
  • Auf Klick öffnet sich ein Layer mit allen NBC-Komponenten im offenen Zustand nebeneinander (zweispaltige Darstellung).
  • Das Icon im Sticky-Element wechselt dann zum Schliessen-Button (Toggle-Button).
  • In der Tablet-Variante werden die NBC-Boxen am Ende der Content-Area redundant (offen) dargestellt.
  • Scrollt der User in den entsprechenden Bereich (und darüberhinaus) wird das Element zum Öffnen des NBC-Layers ausgeblendet.
  • Scrollt der User wieder nach oben erscheint auch das Sticky-Element wieder.
Darstellung des Verhaltens eines Next Best Click Containers auf Tablets

Mobile

  • Alle Next-Best-Click Optionen sind jederzeit über das Sticky-Element rechts unten aufrufbar.
  • Auf Klick öffnet sich ein Layer mit allen NBC-Komponenten im geschlossenen Zustand.
  • Es kann jeweils nur eine Komponente einzeln geöffnet werden.
  • Das Icon in dem Sticky Element wechselt zum Schliessen-Icon (Toggle-Button).
  • In der mobilen Variante werden die NBC-Boxen am Ende der Content-Area redundant (offen) dargestellt.
  • Scrollt der User in den entsprechenden Bereich (und darüberhinaus) wird das Element zum Öffnen des NBC-Layers ausgeblendet.
  • Scrollt der User wieder nach oben erscheint auch das Sticky-Element wieder.
Darstellung des Verhaltens eines Next Best Click Containers auf Mobiles

Spezifikationen

Design

Komponente finden

Web (Legacy)

Basics Brand Brand Divider Divider Typografie Typografie Components Accordion Accordion Autocompletion Autocompletion Breadcrumb Breadcrumb Button Button Captcha Captcha Checkbox Checkbox Checkboxpanel Checkboxpanel Datepicker Datepicker Lightbox Lightbox Fileselector Fileselector Ghettobox Ghettobox Link Link Loading Indicator Loading Indicator Mediagallery Mediagallery Mediaslider Mediaslider NBC NBC Notification Notification Pagination Pagination Processflow Processflow Radiobutton Radiobutton Radiobuttonpanel Radiobuttonpanel Searchfield Searchfield Select Select Tab Tab Table Table Tag Tag Textarea Textarea Textexpand Textexpand Textfield Textfield Timefield Timefield Toggle Toggle Tooltip Tooltip Usermenu Usermenu
Impressum Kontakt Datenschutz Cookie Einstellungen