LinkStream

Über den Link Stream lassen sich in einer Art Zeitleiste alle öffentlichen Bookmarks anzeigen, die aktuell angelegt werden. Zum einen kann der Nutzer einstellen, ob aktuelle Bookmarks aller Nutzer, nur die der Follower oder seine eigenen angezeigt werden sollen. Dabei gibt es die Möglichkeit, Bookmarks, die der Nutzer nur temporär und nicht sofort dauerhaft in einer Cloud speichern möchte, in seinen eigenen Stream zu legen. So kann der Nutzer den Link bis zu einer Woche später noch einmal genauer ansehen und dann entscheiden, ob er den Link als dauerhaften Bookmark speichern möchte. Zum anderen kann der Stream über Tags gefiltert werden, um ihn den Interessen des Nutzers anzupassen.


Über die History können darüber hinaus Bookmarks der letzen 24h, der letzten Woche und des letzen Monats angesehen werden, um die Trends der letzten Zeit nachzuverfolgen. Um den Nutzer nicht mit Unmengen an Bookmarks zu konfrontieren, werden in der History nur die jeweils 15 populärsten Bookmarks dieser Zeitspanne angezeigt. Der Link-Stream kann jeder Zeit eingeblendet werden, während alles andere wie gewohnt angezeigt wird.


LinkStream am rechten Bildschirmrand

Entgegen unseren ersten Überlegungen, den LinkStream aufgrund der Metapher einer Zeitleiste horizontal anzubringen, kann er nun am rechten Bildschirmrand ein- und ausgeklappt werden. Am oberen oder unteren Bildschirmrand würde er zuviel Aufmerksamkeit auf sich ziehen und den Nutzer bei der Bedienung der oberen Toolbar stören. Außerdem wollten wir nicht jeden Rand der Anwendung belegen und haben somit entschieden den LinkStream – genauso wie die Profile – am rechten Bildschirm anzuzeigen.

Die folgende Abbildung zeigt grobe Gestaltungsentwürfe. Dabei war es eine Herausforderung an alle notwendigen Funktionen zu denken und gleichzeitig die Fülle an Bedienelementen platzsparend unterzubringen:
Bei den unteren beiden Entwürfen wurden nun alle benötigten Funktionen berücksichtigt. Allerdings muss die letztendliche Anordnung noch entschieden werden, die Elemente an einem Raster ausgerichtet werden und die LinkStreams für alle Links, für die Links der Follower und für die eigenen unterschieden werden. So kann bspw. zum einen bei den eigenen, aktuellen Links das Avatar-Bild weggelassen werden, zum anderen müssen bei den eigenen Links permanente und temporäre bzw. nicht angelegte unterschieden werden. Links aus dem LinkStream, die der Nutzer bisher noch nicht angelegt hat, kann er einfach per Drag&Drop auf die Cloud ziehen und damit dauerhaft speichern.
Wichtig war uns, dass der LinkStream als zusätzliches Elemente, das ausgeklappt werden kann, nicht zu viel Aufmerksamkeit auf sich zieht. Deshalb haben wir entschlossen die Deckkraft der einzelnen Links zu minimieren und nur bei MouseOver die Links und zugehörige Funktionen in maximaler Deckkraft anzuzeigen. Die Interaktion bei der History folgt einem Accordion.

Entwurf im Copic-Stil

Folgende Abbildung zeigt einen ersten Entwurf im Copic-Stil. Zu sehen sind Ansätze der Toolbar, ein geöffnetes Profil sowie ein Link bei MouseOver. Bei den Farben haben wir uns an drei unterschiedlichen Grautönen orientiert, die auch beim Arbeiten mit Copics oft verwendet werden. Die Signalfarbe, soll frisch wirken, eine Verbindung zur Cloud darstellen, jedoch nicht zu viel Aufmerksamkeit auf sich ziehen. Das bisher gewählte Türkis fügt sich in die Grautöne gut ein und markiert alle klickbaren Elemente. Im Hintergrund ist eine leichte Textur zu erkennen, die aber nicht zu stark und damit zu unruhig wirkt.

Es bleibt noch zu sagen, dass Copics zwar hauptsächlich von Designern eingesetzt werden, es aber viel mehr auf die Wirkung ankommt, die Copics erzeugen. Selbst wenn der Nutzer Copics nicht kennt, sieht er, dass die Oberfläche einen selbst gemachten Charakter hat!

Moodchart

Folgende Gedanken haben wir uns zur Gestaltung gemacht:
Durch dynamische Formen, frische Farben und einem „Self-made-Look“ soll die Zielgruppe emotional angesprochen werden. Durch haptische Anmutung der Elemente wird dem Nutzer eine Wertigkeit dessen vermittelt, was er selbst zusammenstellt, ähnlich einem Tage- oder Skizzenbuch, das überall hin mitgenommen wird und durch die kontinuierliche Erweiterung an Wert gewinnt. Gleichzeitig soll durch eine explorative Oberfläche das Interesse der Nutzer geweckt werden, sodass sie in Aktion treten und sie durch Erforschen und Stöbern ihren Wissensdurst stillen. Es soll ihnen vermittelt werden, dass sie Teil des Systems sind und sie durch ihre Interaktionen das System verändern und mitgestalten können. So wird ihnen ein Anreiz gegeben, die kreativen Möglichkeiten auszuschöpfen und den dafür notwendigen Zeitaufwand in Kauf zu nehmen. Durch eine zu makellose Gestaltung mit perfekten Spiegeleffekten im Web 2.0-Stil kann das Explorative nicht vermittelt werden. Vielmehr würde ein Bruch zwischen der Gestaltung des Systems und der individuell zusammengestellten Bookmarksammlung entstehen.


So ergeben sich für das Look & Feel folgende Adjektive:
  • freundlich
  • locker und verspielt, ohne kindlich zu wirken
  • modern, frisch
  • individuell
  • motivierend
  • haptisch anmutend
  • explorativ

Folgende Moodchart vermittelt einen ersten Eindruck des Look & Feels:

Link Darstellung – Erste digitale Entwürfe

Neben den Scribbles zur Link Darstellung im vorherigen Blogeintrag, haben wir bereits erste digitale Entwürfe umgesetzt. Damit wollten wir herausfinden, in welche Formen am besten ein Screenshot oder ein Logo eingepasst werden kann, welche Probleme dabei entstehen können und wie die Wirkung der einzelnen Formen ist.

Nachfolgende Abbildungen zeigen Quadrate und Rechtecke, die als Passform verwendet wurden. Wie zu erkennen ist, entsteht ein großer Weißraum, wenn ein rechteckiges Logo innerhalb eines Quadrats platziert wird (Bsp.: süddeutsche). So kamen wir auf die Idee eine Pipetten-Funktion anzubieten, mit der dieser Weißraum mit der Farbe des Logos gefüllt werden kann (Näheres dazu wird im Blogeintrag “Bearbeitungs-Modus” weiter oben beschrieben). Eine weitere Überlegung ist, einen festgelegten Winkel im Bearbeitungsmodus vorzugeben, um den Bildausschnitt drehen zu können. Auffällig war auch, dass die meisten Bilder in den Rechtecken besser platziert werden konnten. Dabei handelt es sich jedoch nur um eine kleine Auswahl unterschiedlicher Internetseiten, die sicherlich noch weiter ausgebaut und erprobt werden muss.




Die untere Abbildung zeigt verspielte Formen mit schrägen Kanten und verschiedene Möglichkeiten wie ein und dasselbe Bild unterschiedlich platziert werden kann. Eine Idee war, die vorgeschlagenen Formen so zu wählen, dass manche direkt nebeneinander platziert werden können, sich in gewisser Weise ergänzen und dadurch Beziehungen zwischen Bookmarks dargstellt werden können. Eine Weitere Überlegung ist es anstelle von unruhige Hintergrundbildern dünne Strichzeichnungen auf dem Hintergrund zu platzieren, beispielsweise eine gezeichnete Landkarte, die als Anordnungskriterium für die Bookmarks dienen kann. Dabei sollen sich die eher lockeren Strichzeichnungen von den geradlinigen Kanten der Bilder abheben und somit deutlich eine Trennung zwischen Bookmark und Hintergrund schaffen. Über die Strichzeichnungen könnten auch Kommentare oder Verbindungen zwischen Bookmarks visuell skizziert werden.