Kontextuelle Suche und Wischen: umfassender UX-Leitfaden

Eine mobile App wird in Sekunden beurteilt. Nicht nach Features. Nicht nach der Anzahl der Schaltflächen. In Sekunden – der Zeit, die du brauchst, um zu finden, was du suchst, und zu tun, was du tun möchtest. Deshalb habe ich so viel Zeit in die kontextbezogene Suche und die Wisch-Navigation in TAMSIV investiert.

Wichtige Erkenntnisse:
- Die vereinheitlichte Suche durchsucht gleichzeitig Aufgaben und Memos mit Gewichtung nach Relevanz und Aktualität.
- Die kontextbezogene Suche priorisiert Ergebnisse aus dem aktuellen Kontext (Gruppe, Ordner), ohne andere auszuschließen.
- Das Swipe-to-Dismiss mit einem Schwellenwert von 100px ist der Sweet Spot zwischen versehentlicher und beabsichtigter Geste.
- Die Flüssigkeit einer App ist die Summe Hunderter unsichtbarer UX-Mikroentscheidungen.

Warum ist die Suche der erste Qualitätsindikator einer App?

Wenn ein Benutzer eine Produktivitäts-App öffnet, sucht er etwas. Eine Aufgabe, ein Memo, eine Information. Wenn die Suche langsam, schlecht ausgerichtet oder nicht vorhanden ist, scheint die gesamte App kaputt zu sein. Dies ist eine Tatsache, die die Nielsen Norman Group seit Jahren dokumentiert.

In TAMSIV ist die Suche kein einfaches Textfeld, das oben auf dem Bildschirm platziert ist. Es ist ein vereinheitlichtes System, das gleichzeitig Aufgaben, Memos und Kalenderereignisse in allen für den Benutzer zugänglichen Kontexten abfragt.

Der SearchService ist ein Singleton, der alle Suchanfragen zentralisiert. Er verwendet die PostgreSQL-Volltextsuche über Supabase für schnelle und relevante Ergebnisse, selbst bei Tausenden von Elementen.

Wie funktioniert die Gewichtung der Suchergebnisse?

Nicht alle Ergebnisse sind gleichwertig. Wenn du "Meeting" eingibst, möchtest du wahrscheinlich das Meeting von morgen, nicht das von vor 3 Monaten. Das Gewichtungssystem berücksichtigt zwei Achsen:

1. Die textliche Relevanz: Titel > Inhalt > Checklisten. Eine Übereinstimmung im Titel ist mehr wert als eine Übereinstimmung im Textkörper. PostgreSQL ts_rank verwaltet dies nativ.
2. Die Aktualität: Kürzlich erstellte oder geänderte Elemente werden bevorzugt. Ein abnehmender Koeffizient basierend auf dem Datum der letzten Änderung bestraft alte Ergebnisse.

Diese doppelte Rangfolge ist entscheidend. Ohne sie würde eine Suche nach "Bericht" 200 Ergebnisse in einer unverständlichen Reihenfolge zurückgeben. Damit sind die ersten 3 Ergebnisse fast immer die richtigen.

Ich habe dieses System mit dem Inhaltscache optimiert, um kostspielige Anfragen bei jedem Tastendruck zu vermeiden. Das Debounce von 300 ms in Kombination mit dem Speichercache macht die Suche nahezu sofort.

Was ist kontextbezogene Suche und warum ändert sie alles?

Die "klassische" Suche behandelt alle Ergebnisse gleich. Du suchst nach "Budget", du erhältst alle Elemente, die "Budget" in der gesamten App enthalten. Das ist korrekt, aber nutzlos, wenn du mitten in der Arbeit in einer bestimmten Gruppe bist.

Die kontextbezogene Suche von TAMSIV funktioniert anders: Sie priorisiert Ergebnisse aus dem aktuellen Kontext, ohne andere auszuschließen. Wenn du dich in einer Gruppe "Marketing" befindest, erscheinen die Ergebnisse dieser Gruppe zuerst, gefolgt von persönlichen Ergebnissen und dann von anderen Gruppen.

Wie funktioniert das technisch?

• Der SearchService empfängt den aktuellen Kontext (Gruppen-ID, Ansichtstyp) als Parameter.
• Die Abfrage fügt einen Relevanz-Boost für Elemente des aktuellen Kontexts hinzu.
• Die Ergebnisse werden sortiert: aktueller Kontext → persönlich → andere Gruppen.
• Keine Ergebnisse werden gefiltert – nur die Reihenfolge ändert sich.

Dieses Verhalten ist inspiriert von der FilterBar des Agendasystems, die das gleiche Prinzip der kontextbezogenen Filterung anwendet. Der Benutzer sieht zuerst das, was in seinem Arbeitskontext relevant ist.

Das ist eine UX-Feinheit, die man nicht bewusst bemerkt, die aber den ganzen Unterschied macht zwischen einer App, in der du sofort alles findest, und einer App, in der du dich abmühst.

Wie implementiert man ein zuverlässiges Swipe-to-Dismiss in React Native?

Swipe-to-Dismiss ist ein Navigationsmuster, das Benutzer lieben – wenn es gut funktioniert. Die Wischgeste vom Bildschirmrand zurück ist auf Mobilgeräten zu einem Reflex geworden.

In TAMSIV habe ich dieses Muster auf allen Detailbildschirmen (Aufgabe, Memo, Ereignis) mit einem präzisen technischen Stack implementiert:

• GestureDetector von react-native-gesture-handler zur Gestenerkennung
• Animated.View für die flüssige Animation des Slides
• Ein benutzerdefinierter Hook useSwipeGesture, der die gesamte Logik kapselt

Der kritische Punkt: der Auslöseschwellenwert. Zu niedrig (30px), wird das Wischen versehentlich beim Scrollen ausgelöst. Zu hoch (200px), muss der Benutzer Kraft aufwenden und die Erfahrung ist mühsam.

Nach Dutzenden von Tests habe ich den Schwellenwert auf 100 Pixel kalibriert. Das ist der Sweet Spot – hoch genug, um Fehlalarme zu vermeiden, niedrig genug, um natürlich zu sein. Dieser Schwellenwert wird mit einer minimalen Geschwindigkeit kombiniert: Ein langsames Wischen, selbst über 100px hinaus, löst die Rückkehr nicht aus.

Eine klassische Falle in React Native: Man muss immer die Komponenten von react-native-gesture-handler (TouchableOpacity, FlatList, ScrollView) in den Bereichen von GestureDetector verwenden, niemals die von react-native. Andernfalls geraten die Gesten in Konflikt und das Wischen funktioniert nicht mehr. Das ist ein Gotcha, das ich auf die harte Tour entdeckt und in den Projektkonventionen dokumentiert habe.

Welche Mikro-UX-Entscheidungen trennen einen Prototyp von einem Produkt?

Die Flüssigkeit einer App ist kein Feature. Es ist die Summe Hunderter von Mikro-Entscheidungen. Jede ist einzeln unsichtbar. Zusammen machen sie den Unterschied zwischen "diese App ist gut" und "diese App ist genial".

Hier sind die Mikro-Entscheidungen, die in TAMSIV den größten Einfluss haben:

1. Das Such-Debounce von 300 ms: Keine Anfrage bei jedem Tastendruck. Der Benutzer tippt fertig, dann startet die Suche. Unmerklich, aber es reduziert die Anzahl der Anfragen um das Zehnfache.
2. Die persistenten Ergebnisse während des Ladens: Wenn du deine Anfrage änderst, bleiben die alten Ergebnisse sichtbar, bis die neuen eintreffen. Kein weißes Flackern.
3. Die Übergangsanimation von 250 ms: Der Sweet Spot für Bildschirmübergänge. Schneller wirkt schlampig, langsamer wirkt langsam. Material Design bestätigt diesen Bereich.
4. Das haptische Feedback beim Wischen: Eine leichte Vibration, wenn der Schwellenwert erreicht ist, bestätigt die Aktion, ohne auf den Bildschirm zu schauen.
5. Das Trägheitsscrollen bleibt erhalten: Wenn du durch Wischen zurückgehst, befindet sich die Liste an der gleichen Position wie zuvor. Kein Zurück zum Anfang.

Jede dieser Entscheidungen hat Zeit für Refactoring gekostet. Aber genau das verwandelt eine funktionale App in eine App, die Menschen jeden Tag nutzen.

Wie misst man die Flüssigkeit einer mobilen Anwendung?

Die Flüssigkeit wird nicht nur in FPS gemessen. Hier sind die Metriken, die ich in TAMSIV überwache:

• Time-to-first-result: Die Zeit zwischen dem ersten getippten Buchstaben und der Anzeige des ersten Suchergebnisses. Ziel: < 200 ms.
• Gesture recognition rate: Der Prozentsatz der korrekt erkannten Wischbewegungen im Vergleich zu Fehlalarmen. Ziel: > 98 %.
• Navigation depth: Die Anzahl der Taps, die erforderlich sind, um beliebige Inhalte zu erreichen. Ziel: maximal 3 Taps.
• Perceived performance: Das Gefühl von Geschwindigkeit, unabhängig von den Rohmetriken. Animationen und das Design der Interaktionen spielen eine wichtige Rolle.

Das Admin-Dashboard ermöglicht es mir, diese Metriken in Echtzeit zu verfolgen und Regressionen zu erkennen, bevor Benutzer sie melden.

Welche Auswirkungen hat die Sprachsuche auf die Navigation?

Die Textsuche ist nur ein Teil der Gleichung. Mit dem integrierten Diktiergerät bietet TAMSIV eine noch schnellere Alternative: die implizite Sprachsuche.

Wenn du sagst "Wo ist der Marketingbericht von letzter Woche?", erstellt die KI nicht nur ein Element – sie sucht in deinen vorhandenen Daten und antwortet dir. Es ist die Sprachpipeline, die diese Anfrage verarbeitet, nicht der SearchService, aber das Ergebnis ist dasselbe: Du findest, was du suchst, ohne zu tippen.

Die Kombination aus Textsuche + Sprachsuche + Wisch-Navigation schafft ein Erlebnis, bei dem die App hinter der Aktion verschwindet. Du denkst nicht mehr über die Benutzeroberfläche nach – du tust, was du tun musst.

FAQ

Funktioniert die TAMSIV-Suche offline?

Die Suche verwendet einen lokalen Speichercache, der die letzten Ergebnisse und häufig aufgerufene Elemente speichert. Für eine vollständige Suche mit aktuellen Ergebnissen ist eine Verbindung erforderlich, da die Volltextsuche serverseitig über Supabase ausgeführt wird.

Kann man in Checklisten und Anhängen suchen?

Ja, die Suche umfasst Titel, Inhalte von Aufgaben und Memos sowie Checklisten-Elemente. Dateinamen von Anhängen werden ebenfalls indiziert. Das System gewichtet die Ergebnisse, um Übereinstimmungen in Titeln zu bevorzugen.

Funktioniert das Swipe-to-Dismiss überall in der App?

Das Swipe-to-Dismiss ist auf allen Detailbildschirmen aktiv: Aufgabendetail, Memodetail, Kalenderereignisdetail. Es ist nicht auf den Hauptnavigationsbildschirmen (Tabs) aktiv, um Konflikte mit dem Wischen zum Tab-Wechsel zu vermeiden.

Wie geht die Suche mit privaten vs. geteilten Gruppen um?

Die Suche respektiert streng die RLS-Richtlinien von Supabase. Du siehst nur die Ergebnisse, auf die du Zugriff hast: deine persönlichen Elemente und die Elemente der Gruppen, denen du angehörst. Die Kontextualisierung beeinflusst nur die Reihenfolge, niemals die Berechtigungen.