LinkStream

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:

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 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.