Bibelthek: Buch-/Kapitelauswahl ohne Scrollen – 8 Prototypen

Zum Ticket „Insbesondere mit Laptops ist es aktuell schwierig, in den Büchern zu scrollen“. Alle Varianten nutzen die echten Daten aus dem Seiten-Markup (data-book-selector: 77 Bücher inkl. deuterokanonischer Bücher, data-max-chapter je Buch) und zeigen die komplette Strecke Buch → Kapitel. Jede Karte ist ein live klickbarer Prototyp – über Desktop / Mobil umschaltbar.

Problem 1 · Vertikales ScrollenZwei schmale, verschachtelte Scroll-Spalten (AT/NT) – mit Trackpad und Mausrad mühsam zu treffen.
Problem 2 · EntdeckbarkeitVolle Buchnamen nur als Tooltip, Kapitelanzahl unsichtbar, deuterokanonische Bücher versteckt „unter der Scroll-Kante“.
Problem 3 · Scrollen am DesktopScrollen ist auf Laptops generell schwierig – horizontal noch mehr, weil das Mausrad nur vertikal scrollt. Horizontale Muster kommen daher nicht in Frage; alle Varianten hier sind vertikal oder komplett scrollfrei.
Bewertung pro Variante: ⬤ löst das Problem · ◐ löst es teilweise (jeweils für die drei Probleme oben).
Jede Karte lässt sich per Breit-Schalter auf volle Seitenbreite (~1400 px) ziehen, um das Verhalten auf echten Desktop-Screens zu beurteilen.

Fazit & Empfehlung

Die bessere Lösung wäre, vor allem auf großen Displays der Ansicht mehr Platz zu geben, damit alle Bücher direkt sichtbar und auswählbar sind. Bewertet an den drei Problemen (Scrollen, Entdeckbarkeit, Desktop-Tauglichkeit):

Runde 2 · Iterationen von Variante 5 (Ziel: das Dropdown auf der Lese-Seite, z. B. bibeltv.de/bibelthek/GNB/1-mose-1)

Diese Runde ist gezielt für das Buch-/Kapitel-Dropdown auf der Lese-Seite (nicht die Bibelthek-Übersicht): Auf großen Bildschirmen soll nicht gescrollt werden müssen, und die Bedienung soll „super“ sein. Alle sechs Varianten bauen auf #5 (Suche) auf – jede hat oben ein Typeahead-Suchfeld, das live filtert und Direktsprünge wie „Ps 23“ auflöst. Bücher stehen dabei immer als einfache, senkrechte Liste in Buchreihenfolge – auch wenn das AT auf zwei Spalten aufgeteilt wird, werden die Bücher zuerst Spalte 1 komplett von oben nach unten befüllt und erst danach Spalte 2, nicht im Zickzack quer über die Spalten verteilt; beide AT-Spalten teilen sich dabei einen gemeinsamen Scrollbereich (scrollen als ein Block, nicht getrennt). Als vierte Dimension kommt Übersetzungen dazu – die echten Optionen der Seite: EÜ, ELB, GNB, HFA, LUT, NGÜ, NIV, SLT. Damit der Scrollfrei-Anspruch nicht nur behauptet, sondern nachprüfbar ist, simulieren alle sechs Mocks unten bewusst eine großzügige Desktop-Dropdown-Höhe (~780 px) statt der knappen Kartenhöhe aus Runde 1.

5.1 · 2 Spalten (AT/NT als Liste)Wie #1, aber als echte Liste statt Kachel-Raster, plus Suche oben. Buch-Klick wechselt weiterhin in die Kapitel-Ansicht.
5.2 · 3 Spalten (AT, NT, Kapitel)Kapitel-Spalte ist immer sichtbar und lebt live mit dem aktiven Buch mit – kein Ansichtswechsel mehr nötig.
5.3 · 4 Spalten (AT×2, NT, Kapitel)AT wird auf zwei Spalten aufgeteilt (1–25 / 26–50, streng senkrecht in Reihenfolge, ein gemeinsamer Scrollbereich) – dadurch passt auch das AT auf reale Desktop-Höhen ohne Scrollen.
5.4 · 4(–5) Spalten (Übersetzungen, AT×2, NT, Kapitel)Zusätzlich eine Übersetzungs-Spalte links – Übersetzung, Buch und Kapitel in einem einzigen scrollfreien Panel.
5.5 · 4 Spalten (Übersetzungen, AT ungeteilt, NT, Kapitel)Gegenprobe zu 5.4: gleicher Spaltenaufbau, aber AT ohne Split – zeigt, warum der Split in 5.3/5.4 den Unterschied macht.
5.6 · Adaptiv (5.3 ⇄ 5.4)Eine Komponente statt zwei: Übersetzungs-Spalte erscheint per Container-Query erst, wenn wirklich genug Platz da ist – sonst automatisch 5.3.

Empfehlung für die Lese-Seite

Favorit: Variante 5.6 – 5.3 und 5.4 sind kein Entweder-oder: der entscheidende Kniff (die Zwei-Spalten-Aufteilung des AT, die die längste Spalte auf ~25 Zeilen halbiert und die 4-Spalten-Ansicht auf normaler Laptop-Breite tatsächlich scrollfrei macht) bleibt in beiden Zuständen identisch. 5.6 kombiniert sie zu EINER Komponente, die sich per Container-Query selbst an die tatsächlich verfügbare Panel-Breite anpasst: genug Platz (großer Desktop-Monitor) → Übersetzung mit anbieten (= 5.4); reicht es nicht → automatisch nur AT (2 Spalten), NT, Kapitel (= 5.3). Damit muss die Seite nicht zwischen zwei Varianten wählen, sondern bekommt beide, je nach Fenster.