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/)

Advertisements