UX-Learnings mit dem Bookmark-Service Crabbit

29.02.2016 | Code

Bei der Entwicklung eines simplen Bookmark-Services kann man viel lernen. Zum Beispiel, dass einfach immer am schwierigsten ist.

Ein neuer Bookmark-Service dürfte so ziemlich der überflüssigste Beitrag zur Web-Gemeinschaft sein. Dennoch habe ich mir als neuestes Entwicklungs-Projekt einen Bookmark-Service mit dem Namen "crabbit.io" ausgesucht. Der Entschluss entstand spontan, als ich mal wieder mit dem Feature-Overload von Diigo und dem Werbe-Overload von Delicious haderte. "Back to the roots" dachte ich und stellte mir einen Bookmark-Service in der puristischsten und nutzerfreundlichsten Form vor.

Screenshot Bookmark-Service Crabbit

Kaum mehr als zwei Wochen waren dafür eingeplant. Inzwischen sind knapp vier Monate vergangen. Auch wenn Design-Thinker und Lean-Jünger jetzt aufschreien werden, nehme ich mir einfach die Zeit für viele "nebensächliche" Details. Und gewinne dafür jede Menge Learnings. Ein paar von den Learnings, vor allem zur Interaktion, zur User-Experience und zum Frontend-Coding, stelle ich kurz vor.

Einfach ist am schwierigsten

Crabbit sollte erst einmal eine ganz normale Bookmark-Plattform werden. Als USP wollte ich dem Nutzer jedoch die Möglichkeit geben, aus denTags eine individuelle Seitennavigation zu bauen, um das Auffinden und Sortieren von Bookmarks zu erleichtern. Natürlich soll der Nutzer auch zu einzelnen Bookmarks Tags hinzufügen oder entfernen können, kurz, er soll die größtmögliche Flexibilität und Kontrolle über seine Bookmark-Sammlung erhalten.

Wie bei anderen modernen Web-Applikationen sollen bei Crabbit möglichst viele Arbeitsschritte über das Frontend ermöglicht werden, ohne dass die Seite neugeladen werden muss. Wie sehr diese Frontend-Technik die intuitive Bedienbarkeit fördert, kann man wunderbar bei Trello, Slack, Feedly oder bei den Google-Anwendungen bewundern. Die Komplexität im Hintergrund fällt dem normalen Nutzer durch die einfache und flexible Bedien-Oberfläche kaum auf. Um es vorweg zu nehmen: Ich war selbst überrascht, wie enorm aufwändig die Entwicklung solcher Oberflächen sein kann.

Beispiel Crabbit

Was einem Nutzer kaum bewusst sein dürfte: Wenn man eine intuitive Nutzeroberfläche mit Drag&Drop und Co. bauen will, muss man die Komplexität der Backend-Entwicklung zusätzlich noch einmal im Frontend nachbilden, da das Frontend über Ajax permanent mit dem Backend-Code interagiert. Um es in Zahlen auszudrücken: Das HTML-Template der Bookmark-Sammlung umfasst bei Crabbit weniger als 100 Code-Zeilen (HTML und PHP). Das ist das, was der Nutzer beim ersten Aufruf der Seite zu sehen bekommt. Es kommen jedoch noch über 1000 Code-Zeilen JavaScript hinzu (ohne Bibliotheken), um alle Interaktions-Möglichkeiten zu realisieren. Und die Interaktionsmöglichkeiten wirken auf den ersten Blick erst einmal recht simpel.

Die grundsätzliche Herausforderung kann man sich so vorstellen: Die Seite wird nicht neu geladen, sie muss aber dennoch permanent ihren aktuellen "Zustand" kennen. Als Beispiel: Wenn der Nutzer ein völlig neues Tag zu einem Bookmark hinzufügt, dann müssen auch alle anderen Elemente (die übrigen Bookmarks, die Tag-Suche, die Tag-Navigation etc.) dieses Tag kennen, um damit arbeiten zu können, zum Beispiel um den Tag als Vorschlag bei einer Auto-Suche anzubieten. Außerdem muss immer klar sein, welche Tags wo bereits in Gebrauch sind, um eine doppelte Verwendung auszuschließen. Und dieser Zustand ist bei jedem Bookmark und auch bei der Navigation und der Tag-Suche anders. Bei Crabbit habe ich diese Herausforderung mit zahlreichen automatisch generierten Daten-Arrays und Daten-Objekten gelöst. Bei (fast) jeder Interaktion durch den Nutzer müssen all diese "Daten-Speicher" aktualisiert werden, damit sie den aktuellen Zustand der Seite korrekt wiedergeben und man dem Nutzer jederzeit die richtige Antwort auf seine Interaktion geben kann.

Ich drösel das alles mal anhand einiger sehr kurzer Videos auf (jeweils 10 bis 20 Sekunden).

Crabbit: Die Tag-Suche

Bestehende Tags kann man entweder über ein Suchfeld finden, oder über eine komplette (einblendbare) Tag-Liste auswählen:

Crabbit: Die Tag-Navigation

Auf der linken Seite kann man eine Navigation bauen. Die erste Ebene sind "Folder", hier kann man jeden beliebigen Namen wählen. Die zweite Ebene besteht nur aus Tags, d.h. hier kann man nur aus bereits bestehenden Tags auswählen. Im Video sieht man auch drei verschiedene Eingabe-Methoden: Der User kann entweder die "Return-"Taste nutzen, einen Tag aus der Autocomplete-Suche auswählen oder den Save-Button nehmen. Die drei Methoden dürften den normalen Gebrauch entsprechen, müssen aber per JavaScript tatsächlich explizit implementiert werden:

Crabbit: Responses

Die Eingabefelder reagieren auf falsche Nutzereingaben mit entsprechenden Responses. Bei der zweiten Navigations-Ebene bekommt man zum Beispiel einen Hinweis, wenn ein Tag in der Navi schon verwendet wird oder wenn es keinen entsprechenden Tag gibt. Ob dem Nutzer diese Responses reichen, um die Logik per Trial&Error zu erlernen, muss sich dann noch zeigen:

Crabbit: Drag&Drop und Delete

Es gibt außerdem die Möglichkeit, die Tags in der Navigation frei zwischen verschiedenen Foldern hin und her zu schieben sowie Tags und (leere) Folder zu löschen. Vor allem die Lösch-Logik war nicht so einfach zu entwickeln, da Folder, die noch Tags als Unterpunkte haben, natürlich nicht gelöscht werden sollten. Insgesamt ist man so aber recht frei und flexibel im Aufau von individuellen Navigationen.

Crabbit: Bookmark-Tags

Im letzten Video sieht man die ganze Komplexität der Interaktion: Ein Bookmark erhält ein komplett neues Tag. Gleichzeitig wird die Tagliste unter dem Suchfeld mit dem neuen Tag ergänzt. Außerdem wird der neue Tag in allen Autocompletes eingefügt (z.B. Autocomplete in der Navigation, Autocomplete in den anderen Bookmarks).

Den Tag füge ich zunächst als neuen Punkt in der Navigation ein. Anschließend lösche ich den Tag aus dem Bookmark. Da der Tag mit keinem anderen Bookmark verknüpft und damit leer ist, wird er automatisch überall herausgelöscht: Aus der Navigation, aus der Tag-Liste und aus allen Autocompletes auf der Seite. Sieht vielleicht einfach aus, aber um den Status der Seite ohne Neuladen permanent in dieser Form aktuell zu halten, ist sehr viel recht komplexer Code notwendig.

Fazit

Crabbit ist noch lange nicht fertig, selbst bei diesen Basis-Funktionen gibt es noch viel zu tun. Nicht zuletzt braucht es noch Hover- und Klick-Effekte, ein paar Logiken müssen noch umgeschrieben werden und da wäre dann auch noch die ganze Mobile-Variante. Ganz zu schweigen von dem eigentlichen Bookmarklet, das bei jedem Bookmark-Service das primäre Tool für die Interaktion ist, denn die Bookmarks müssen ja erst einmal irgendwie in die Plattform rein. Da bleibt also noch viel spannende Arbeit übrig, im Moment peile ich den frühen Sommer als Livegang an. Wenn euch jetzt schon was auffällt, gerne per Kommentar…

Mehr davon? In der Artikelsammlung "Code" gibt es weitere spannende Beiträge. Wenn du ein Web-Projekt von A-Z erstellen willst, findest du im Themenüberblick viele Artikel zu jedem Schritt.

blog comments powered by Disqus