Diese Idee ist auf mein Konzept angepasst, dass ich für die Mozilla Design Challenge 09 eingereicht hatte. Ohne den Inhalt der Tabs zu kennen, versuche ich mittels Baumstruktur Interessengebiete in Gruppen zu fassen.


Da es hier im Detail darum geht, nach welchen Regeln Tab-Gruppen erstellt werden, sollte dieser Gedankengang für andere Konzepte übertragbar sein. Das angestrebte Ziel ist es, möglichst wenige, gut sortierte Tab-Gruppen am Ende zu erhalten. Um meine Idee nahe zu legen, erkläre ich sie zunächst Schritt für Schritt und danach erst, warum etwas passiert.


Browser wird geöffnet. Dabei wird ein „Geburtsbaum“ eingerichtet und die Startseite geöffnet. Wie der Name „Geburtsbaum“ schon sagt, werden hier Bäume geboren, genauer gesagt Tab-Bäume. Der erste Ast in diesem Baum ist die Startseite. Für den „Geburtsbaum“ gilt eine extra Regel: „Alle Tabs (Superior Tabs), die neu geöffnet werden, gehören anfangs dem „Geburtsbaum“ an. Erst wenn von einem neuen Tab (Superior Tabs) aus ein weiterer Tab (Sub Tab) geöffnet wird, werden diese zwei zusammenhängenden Tabs in eine eigene Tab-Gruppe überführt“. Diese Auskopplung gilt solange die Tab-Gruppe aus mehr als einer Seite besteht“. „Superior Tabs“ sind Tabs die durch das Klicken auf das Plus-Zeichen oder per STRG+T entstehen – „ Sub Tabs“ entstehen beim Öffnen eines Links von einer Seite zu einer anderen (z.B. durch einen „mittleren Maustaste“-Klick auf einen Link). Dieser Geburtsprozess der Tab-Gruppen verhindert, dass ein User 50 Tabs mit STRG+T öffnet und er danach 50 Tab-Gruppen hat. Die weiteren Ausführungen beschäftigen sich ausschließlich mit der Baumstruktur eines Tabs, der diesen Geburtsprozess durchlaufen hat und somit eine eigene Tab-Gruppe darstellt (kurzum, nur mit „Sub Tabs“).


Bisher würde das Ganze so aussehen:


Bild1


Der oberste Punkt auf dem Bild (der Stern) ist der Starter, er begründet die Gruppe. Darunter ist die erste Seite (Seiten und Tabs sind weiße Kästchen), von der ein Tab abgeleitet wurde.


Da das Generieren von Tab-Gruppen nach der obigen Regel wenig Sinn für „erwachsene Tabs“ macht, habe ich mir eine weitere Regel ausgedacht: „Werden von einer Seite mehr als zwei Tabs geöffnet, wird die Tab-Baum-Struktur solange hochgegangen, bis die vorliegende Regel das nächste Mal verletzt wird oder bis der Tab-Starter erreicht ist, um einen Ast auszuhängen und eine neue Ast-Gruppe zu bilden“.

Diese Regel scheint etwas kompliziert, doch Grafiken helfen diese leichter zu verstehen.


Bild2Bild3













Wie man auf den Bildern sieht, wird die neue Gruppe (gelb) in den bisherigen Baum eingebunden. Dies hat den Vorteil, dass die Zuordnung weiterhin anpassbar bleibt. Da der User zwischen den einzelnen Tabs hin und her springen kann, muss die Baumstruktur flexibel sein, dies zeigt folgendes Beispiel. Wir nehmen an, dass ein User zunächst mehrere Tabs und dann anschließend weitere Tabs an einem höher gelegenem Knotenpunkt erstellt. Dies hätte zur Folge, dass eine weitere Ast-Gruppe gebildet wird und sich die Baum-Struktur der zweiten Ast-Gruppe verändert.


Bild4

Da nicht nur neue Tabs geöffnet, sondern auch Tabs geschlossen werden können, stellt sich bei dieser Baumstruktur die Frage, wie sie sich verhält und vor allem, wie sie sich verhält, wenn Tabs/Knotenpunkte geschlossen werden, die für mehrere Ast-Gruppen von Bedeutung sind. Beim Schließen eines Tabs werden die unteren Strukturen einfach an den nächst höheren Knotenpunkt angehängt. Sind die Bedingungen, um eine Ast-Gruppe darzustellen, nicht mehr erfüllt, wird die Gruppe aufgelöst und in die obere eingegliedert. Wird allerdings wie im nächsten Bild ein wichtiger Verbindungsknoten gelöscht (ist auf dem Bild mit einem ‚x‘ markiert), stellt sich die Frage: „Welche von den beiden Gruppen darf jetzt den von beiden beanspruchten Tab einbinden?“.


Bild5aBild5b













Die Antwort ist, dass der Tab der Gruppe angehört, die ihn zuletzt besaß. Dadurch wird verhindert, dass einzelne Tabs ständig zwischen den verschiedenen Ast-Gruppen hin und her springen.


Bis jetzt war es für den User relativ egal, welche Tabs welcher Ast-Gruppe angehören und ob eine Ast-Gruppe erstellt oder aufgelöst wird, da er nach meinem Konzept noch alle Tabs wie gewöhnlich geöffnet hat. Erst wenn eine Tab-Ast-Gruppe minimiert wird, bekommen die darin enthaltenen Tabs eine Bedeutung, da sie fest ausgelagert werden. Siehe Bild: Es zeigt eine Tab-Ast-Gruppe, auf die einmal geklickt wurde (auf dem Bild sind zwei minimierte Tab-Gruppen zu sehen).


Bild6

Es wäre sehr ärgerlich, wenn man in einer minimierten Ast-Gruppe ein paar Tabs löschen würde und plötzlich die ganze Ast-Gruppe verschwindet, da diese nicht mehr der Regel entspräche und somit woanders eingegliedert würde. Um dieses zu verhindern, schlage ich das Einfrieren der minimierten Tab-Struktur vor. Dadurch wäre es möglich, einzelne Tabs zu löschen, ohne dass die Ast-Gruppe woanders eingegliedert wird. Stellt der User aus einer minimierten Tab-Ast-Gruppe einen einzelnen Tab wieder her, so wird dieser „aufgetaut“ und es gelten die Standardregeln.


Bild7aBild7b

Bild7c

























Beim Speichern einer Tab-Gruppe wird die zugrunde liegende Baum-Struktur mitgespeichert. Da der User weitere Tabs einer bereits gespeicherten Gruppe hinzufügen kann, schlage ich vor, diese direkt unterhalb des Starters einzubinden, was zur Folge hätte, dass die bisherigen Gruppen-Strukturen nicht beeinflusst würden.



Der Vorteil dieser Methode:

Sie ermöglicht es einem, viele Internetseiten in wenige, strukturierte Gruppen zusammen zu fassen, deren Struktur ableiten lässt, woher man kommt. Ein kleines Beispiel: Nehmen wir an, das folgende Bild würde eine Google-Suche darstellen, dann wäre die erste Seite das Google-Suchergebnis. Verschiedene Suchergebnisse würden in Form von geöffneten Tabs darauf folgen. Einer dieser Tabs wäre ein Wikipedia-Artikel, von dem wir aus weitere Links öffnen. Solange wir dabei nicht mehr als zwei Tabs von einer Seite aus öffnen, gehört die ganze Struktur der „Google-Gruppe“ an (rot). Erst wenn der User mehr als zwei Tabs von einer Seite aus öffnet, wird eine neue Ast-Gruppe gebildet (gelb). Diese beinhaltet alle Tabs des Baumes bis hin zum Wikipedia Artikel (der auch enthalten ist). Für den User ist es nicht so wichtig genau zu wissen, wie die zweite Tab-Gruppe entstanden ist. Für ihn ist vielmehr wichtig, dass er in der zweiten Tab-Gruppe sieht, woher er kommt, nämlich von Wikipedia.


Bild3



Nachteil:

Der User wird in den meisten Fällen nicht verstehen, warum eine neue Tab-Gruppe gebildet wurde (dies ist meiner Meinung nach zu vernachlässigen, da der gewünschte Effekt erzielt wird). Wie tauglich letztendlich meine vorgeschlagen Methode ist, kann nur ein Feldtest beweisen.


Anfügen möchte ich hier noch, dass ich automatisierte Konzepte für wesentlich geeigneter halte als Konzepte, die das Tab-Gruppieren dem User überlassen. Zudem sollte immer darauf geachtet werden, das möglichst wenige Klicks nötig sind und die Mauswege kurz gehalten werden. Soweit zu dieser Idee. Mich würde interessieren, was ihr darüber denkt und wo ihr die Stärken/Schwächen seht.



Grüße

Paradiesstaub



PDF: Idee – Wie man Tabs sinnvoll gruppieren könnte

Creative Commons-Lizenz: Namensnennung 3.0 Vereinigte Staaten von Amerika

Advertisements

Die folgende Idee ist mein Beitrag für die diesjährige Design Challenge von Mozilla Labs. Das Problem, das es zu lösen gilt: „Erfinde Tabs neu – Wie können wir Tabs erstellen, mit ihnen navigieren und mehrere Webseiten in demselben Browserfenster handhaben?“


Tipp: Am besten das Video in hoher Auflösung im Vollbildmodus ansehen (falls es ruckelt, kann man hier das Video herunterladen – ansonsten hilft auch dieses Plug-in). Mockup 1, Mockup 2, Mockup 3

Die folgenden Punkte erläutern meine Idee abschnittsweise. Einige Punkte des Videos werden erneut angesprochen und tiefer ausgeführt, da im Video dazu die Zeit fehlte (Mozilla wollte, dass die eingereichten Videos möglichst kurz sind).



Wie ich zu dieser Idee kam:

Anfangs verfolgte ich den Gedanken, Tabs irgendwie durch Grafiken abzulösen, um dadurch Platz zu sparen. Doch nach einer Weile leuchtete es mir ein, dass kleine Grafiken wesentlich weniger Informationen herüber bringen können als herkömmliche Tabs plus kleine Webseiten-Icons. Zudem sollte die Lösung des Problems es ermöglichen, viele Tabs einfach zu handhaben, samt Navigation. Auch sollte der Ressourcenhunger möglichst niedrig sein, da ich die Menschen in Afrika und Asien nicht ausschließen möchte (wahrscheinlich werden sie in 5 Jahren immer noch langsame Computer mit geringen Bildschirmauflösungen mehrheitlich nutzen). Mein bisheriger Weg war also eine Sackgasse. Darauf kam mir die Idee, dass man herkömmliche Programmfenster minimieren kann, warum eigentlich nicht auch Tabs. Da das Minimieren von einzelnen Tabs wenig Sinn ergeben würde, war der Gedanke nahe, ganze Gruppen zu minimieren. Somit war der Gedanke geboren, Tabs zu gruppieren und zu minimieren. Darauf folgend machte ich mir ein paar Gedanken, wie dies am Besten zu handhaben wäre. Das Ergebnis sind die folgenden Punkte und wenig Schlaf (das Ausbrüten dieser Idee hat mich an jenem Tag bis um 5 Uhr morgens wach gehalten).



Aufbau und Erklärung:

Von Anfang an war das Ziel klar, ich wollte möglichst wenigen Menschen mit meiner Idee vor den Kopf stoßen. Die Nutzer sollten nicht gezwungen sein, ein neues System zu nutzen, vielmehr sollte es ein „wenn-ihr-wollt,-dann-könnt-ihr-es-nutzen“ sein. Im Grunde ist alles, was ich hinzugefügt habe, diese kleine Leiste (Tab-Gruppen-Menü), die unterhalb des aktiven Tabs erscheint, sobald man mit der Maus über den aktiven Tab fährt.

Einzelner Tab




Alle anderen vorgeschlagenen Knöpfe dienen der logischen Fortführung der Idee und ihrer Struktur (mit Ausnahme von den Punkten 1 & 2 ich konnte es einfach nicht lassen, diesen Vorschlag zu unterbreiten).


Zoomansicht - Minibild 1



Zoomansicht - Minibild 2



Zoomansicht - Minibild 3



Erläuterung - Großansicht


1 – Knopf 1 erlaubt das Wechseln zwischen verschiedenen Bildschirmmodi (Durchwahlbutton). Normal-Modus = zeigt normale Firefox Ansicht | Small-Modus = Zeigt nur notwendige Bildschirmbereiche (Lesezeichen befinden sich oberhalb, siehe Punkt 2) | Full-Modus = Gleicht F11-Modus.


2 – Lesezeichen befinden sich oberhalb und teilen sich den Platz mit anderen Elementen im „Small-Modus“ (ist der Modus auf den Mockups). Es werden nur so viele Lesezeichen angezeigt, wie Platz vorhanden ist (ausgehend von links). Lesezeichen, die aus Platzgründen nicht angezeigt werden können, sind nur im „Normal-Modus“ sichtbar.


3 – Ladestatus


4 – Wenn der Knopf 4 aktiv ist, wird das „Tab-Gruppen-Menü“ angezeigt, sobald man mit der Maus über den aktiven Tab fährt. Mit dem Aktivieren des Knopfes wird zugleich auch ein weiterer Knopf sichtbar: der „Alle-Tabs-und-alle-Gruppen-minimieren“-Knopf (siehe folgenden Punkt 5).


5 – Der „Alle-Tabs-und-alle-Gruppen-minimieren“-Knopf minimiert, wie der Name schon sagt, alle Tabs zu minimierten Tab-Gruppen (siehe Bild – Punkt 13). Minimierte „Tab-Gruppen“ befinden sich immer rechts.


6 – Der „Tab-Gruppe-speichern“-Knopf speichert alle Tabs, die der Gruppe zum Zeitpunkt des Speichervorgangs angehören (im Nachhinein können diese noch bearbeitet werden). Tab-Gruppen werden ähnlich wie Lesezeichen gespeichert, der einzige Unterschied ist, dass anstatt eines Lesezeichens ein Ordner angelegt wird, in dem sich die jeweiligen Tabs in Form von Lesezeichen befinden. Alle Lesezeichen, die sich in einem Tab-Gruppen-Ordner befinden, gehören der Tab-Gruppe an. Eine Tab-Gruppe kann ebenso wie ein „normales Lesezeichen“ mit Schlagwörtern versehen werden. Lesezeichen, die sich in einem Tab-Gruppen-Ordner befinden, sind nicht wie „normale Lesezeichen“ einzeln über die Adressleiste aufrufbar (damit soll verhindert werden, dass Seiten ungewollt als „normale Lesezeichen“ deklariert werden).


7 – Knopf 7 ermöglicht eine Textsuche in der Tab-Gruppe (siehe Bild). Die Möglichkeiten, die sich daraus ergeben, liegen auf der Hand.


8 – Knopf 8 hat zwei Funktionen. Erstens zeigt er auf, wie viele Tabs sich in der Tab-Gruppe befinden, und zweitens listet er nach einem Klick auf ihn eine Liste aller Tabs auf, die sich in der Tab-Gruppe befinden. Da sich die Liste nach unten hin öffnet, ist wesentlich mehr Platz vorhanden, um die Informationen der Tabs darzustellen, als es bei horizontalen Tabs möglich wäre.


9 – Knopf 9 minimiert alle Tabs innerhalb dieser Tab-Gruppe sowie die Gruppe selbst. Das Icon der am hierarchisch höchst gelegenen Internet-/Ausgangsseite wird am rechten Rand der Tableiste angezeigt (siehe Bild – Punkt 13). Wie Tab-Gruppen gebildet werden, behandle ich in einem extra Punkt weiter unten.


10 – Knopf 10 Schließt alle Tabs dieser Tab-Gruppe. Um eine versehentlich geschlossene Tab-Gruppe wiederherzustellen, schlage ich ein Extrafeld auf der „neuen Tab-Seite“ vor, die mit Firefox 3.5 eingeführt werden soll.


11 – Der grüne Pfeil ermöglicht das Minimieren/Wiederherstellen einzelner Tabs. Dies ist besonders vorteilhaft, wenn die Tab-Gruppe minimiert ist, da man trotzdem die Kontrolle über sie behält.


12 – Knopf 12 schließt einzelne Tabs (bietet gleiche Vorteile wie in Punkt 11 beschrieben).


13 – Knopf 13 zeigt eine minimierte Tab-Gruppe. Nach einem links-Klick auf diese öffnet sich das „Tab-Gruppen-Menü“ (auf der Abbildung wurde zudem ein Menü aktiviert).



Wie Tab-Gruppen gebildet werden:

Das automatische Erstellen von Tab-Gruppen bildet den Kern meiner Idee. Liefert der Prozess nicht die gewünschten Ergebnisse oder ist er gar für die Menschen unverständlich, werden sie das Konzept nicht mögen.

Um es zu verdeutlichen, möchte ich eine kleine Metapher nutzen:


– Mit dem Öffnen der ersten Internetseite pflanzt man einen Baum im Browser.

– Jeder Tab, der von der Ursprungsseite aus gestartet wird, ist ein Ast dieses Baumes und somit Teil der Tab-Gruppe.


– Startet man einen leeren Tab oder ruft ein Lesezeichen auf, so wird ein neuer Baum gepflanzt, der wiederum beliebig viele neue Äste haben kann.


– Auch entsteht ein neuer Baum, wenn von einem bestehenden Ast aus ein weiterer Tab erstellt wird. Dann wird der ursprüngliche Tab, von dem der neue Tab aus geöffnet wurde, selbst zu einem neuem Baum. Das klingt weit komplizierter als es ist.


Der Vorteil dieser Methode ist, dass sie es ermöglicht, unterschiedliche Internetseiten in eine Tab-Gruppe zusammen zu fassen, ohne dass diese beim Öffnen neuer Tabs ins Unermessliche anwächst. Das folgende Bild demonstriert dies noch einmal anhand einer Google Suche.


Grouping Tabs

Abschließend bleibt noch zu sagen, dass es meines Erachtens eine Drag & Drop-Möglichkeit für einzelne Tabs zwischen den verschiedenen Tab-Gruppen geben sollte (wie diese sich im Einzelnen verhalten, wäre noch zu überdenken).



Schlusswort

Jede Idee, die man erträumt, kann immer weiter gedacht werden. Deswegen setze ich hier – für mich – einen Schlusspunkt. Klar könnte man irgendwie kleine Bilder einbauen, die die Übersichtlichkeit minimierter Tabs in der Gruppe zusätzlich erhöhen oder man könnte alle Tabs einer Gruppe einfärben, oder oder oder…

Als Schaffender muss man sich für eine Form entscheiden. Ich hoffe, sie gefällt euch, und lade euch gleichzeitig ein, sie weiter zu gestalten.



Paradiesstaub


Mozilla Labs Design Challenge Summer 2009 – minimizing Tab Groups – PDF


Dieses Werk steht unter folgender Creative Commons-Lizenz: Namensnennung 3.0 Vereinigte Staaten von Amerika (http://creativecommons.org/licenses/by/3.0/us/)