Link bearbeiten & Tags hinzufügen

Wir haben uns unter anderem damit beschäftigt, wie der Bearbeitungsmodus aussehen könnte, wenn ein Nutzer einen Link hinzufügen und ihm Tags vergeben möchte. Folgendes ist dabei heraus gekommen…

Durch den Abdunklungseffekt ist klar, dass jetzt der Link bearbeitet wird. Das ganze ist noch nicht in einem Raster angeordnet, daher auch noch nicht 100% an der richtige Position, aber es zeigt schon mal einen Eindruck.

Beim ersten Screen kann eine URL eingegeben und gewählt werden, ob es sich um einen Web-Link oder ein Video handelt. Anschließend wird die Webseite im unteren Teil angezeigt, um sich von der Seite für das Link Bild oder die Tags inspirieren zu lassen. Darüber öffnet sich dann der Teil, in dem das Bild an den Rahmen angepasst werden kann. Dabei kann zwischen den vorgeschlagenen Bildern auf der linken Seite, einem Screenshot oder einem eigenen Bild gewählt werden. Oben werden die verschiedenen Linkformen angezeigt. Klickt der Nutzer auf das Bild, erscheint das komplette Bild mit reduzierter Deckkraft der Teile, die nicht im Rahmen liegen, damit der Nutzer einen Ausschnitt wählen kann, der später angezeigt werden soll.


Auf der rechten Seite können Tags vergeben werden. Auch hier werden Vorschläge für Tags angezeigt, die der Nutzer einfach nur per Drag&Drop den eigenen hinzufügen muss. Bei den Vorschlägen kann zwischen den eigenen Tags, Tags der Seite oder Tags, die der Nutzer mit dem System übereinstimmend hat gewählt werden. Das Linkbild wird als kleinrer Ansporn und Fortschrittsanzeige zum Taggen zu Beginn sehr desaturiert dargestellt. Je mehr Tags der Nutzer vergibt, desto mehr wird von dem Bild wieder in voller Leucht- und Farbkraft angezeigt…

Link-Design

Da wir uns für einen “Copic-Stil” entschieden haben, sollte der Link natürlich auch so dargestellt werden, dass er sich gut in das Gesamtbild einfügt.

Der Versuch ein lockeres Aussehen durch eine nicht klar abgegrenzte Form zu zeigen, wirkt zu unruhig und chaotisch:
Daher habe wir versucht die Copic Struktur in eine Fläche zu integrieren, die an sich ruhig und definiert ist, aber auch das würde zu unruhig wirken und zu viel des Guten sein:
Zu guter Letzt haben wir uns dafür entschieden, den Link mit einer klaren, definierten Form zu umrahmen und so ein bisschen Ruhe in die vielen Formen zu bringen. Die klaren Flächen sind auch bei anderen Elementen, wie bspw. den Profilhintergründen wieder zu finden. Um doch noch den Copic ins Spiel zu bringen, ist an einer der Seiten ein Copicstrich entlang gemalt, der das ganze etwas auflockert…

Der Nutzer kann sich bei MouseOver zusätzlich eine Suchmaske sowie RSS Feeds anzeigen lassen. Auch das muss bei dem Entwurf beachtet werden.

Dieser Entwurf wirkt insgesamt zu bollig und unruhig…
Ein anderer Ansatz war, die Schrägen, die in dem Design immer wieder vorkommen, aufzugreifen und die RSS Feeds dadurch etwas lockerer zu gestalten. Die Überschriften können aber nicht türkis geschrieben werden, weil nur alles Aktive in der Anwendung türkis sein soll. Die farbliche Unterlegung hebt zwar bei MouseOver den aktuellen Feed hervor, macht aber evtl. Probleme in der Umsetzung in Zusammenhang mit der Schräge des Rahmens.
Dieser Entwurf wirkt relativ schlicht, bringt aber dennoch die wichtigsten Infos unter. Bei MouseOver soll die ansonsten leicht graue Schrift ganz weiß und unterstrichen angezeigt werden, da RSS Feeds bei MouseOver häufig unterstrichen werden.

Link Entwürfe

Inspiriert von unserer Moodchart haben wir uns zunächst Gedanken darüber gemacht, wie der “Self-made-Look” bei den Link-Rahmen umgesetzt werden kann. Dieser Rahmen erscheint bei MouseOver und enthält die wichtigsten Link-Funktionen sowie eventuell eingestellte interaktive Elemente, wie die Suchmaske oder die RSS-Feeds. Außerdem haben wir verschiedene Texturen für den Hintergrund und Icons ausprobiert.

Die Ergebnisse sind in den folgenden drei Abbildungen zu sehen. An den rot markierten Link-Stilen wollen wir weiterarbeiten.

Link-Formen festgelegt

Ein Erkennungsmerkmal der Links sind deren Formen. So wird der Wiedererkennungswert gefördert, wenn Links unterschiedliche Formen annehmen können. Wenn wir alle denkbaren Formen für Links ermöglichen würden, könnten wir nicht mehr gewährleisten, dass der Link eindeutig als Interaktionselement zu erkennen ist und auch nicht mehr planen, wo die Funktionen direkt am Link angebracht werden können. Mehr kann im Blogeintrag “Linkdarstellung” nachgelesen werden. Deshalb haben wir 6 verschiedene, miteinander harmonierende Formen entwickelt.

Diese sind naürlich nicht aus dem Nichts entstanden. Wir haben mit bis zu 80 verschiedenen Logos und möglichen Bildern getestet, wie gut sich diese in unterschiedliche Formen einpassen lassen. Dabei haben sich nach und nach sehr nützlich und weniger brauchbare Varianten hervorgetan. Die untere Abbildung zeigt die endgültigen 6 Link-Formen. Wichtig dabei war uns, dass die einzelnen Formen deutliche Unterschiede aufweisen, leicht verspielt wirken und einem einheitlichen Raster von 23×23px folgen. Dieses Raster ergibt sich aus der Mindestgröße für Buttons unserer Anwendung.

Link Darstellung – Update

Um sich auf einer Cloud zusätzliche Informationen zu einem bestimmten Bookmark anzuzeigen, muss es eine Art Button auf dem Link geben, über den sich der Nutzer zusätzliche Informationen aufrufen lassen kann. Dieser Button muss zusätzlich irgendwo auf dem Link angebracht werden. Dies könnte z.B. durch ein kleines Icon unterhalb des Bildes gelöst werden…

Die Scribbles sind noch nicht final, sondern erst mal eine Idee, wie Links und Clouds aussehen könnten.

Bearbeitungs-Modus

Folgende Funktionen stehen dem Nutzer bisher im Bearbeitungs-Modus zur Verfügung:

  • Link-Bild bearbeiten
  • Zugriffsrechte für den Link einstellen (öffentlich/privat)
  • Link in andere Cloud verschieben
  • (evtl. Tags bearbeiten, momentan noch nicht im Scribble zu sehen)

In der Mitte des abgedunkelten Bearbeitungs-Modus befindet sich die Maske des späteren Links. Darüber stehen verschiedene Formen für das Link-Bild bereit. Links werden dem Nutzer Bilder der Zielseite vorgeschlagen, von denen er eines auswählen und per Drag & Drop auf die Maske in der Mitte ziehen kann. Weiterhin hat der Nutzer die Möglichkeit das ausgewählte Bild mit der Panning-Geste zu verschieben oder zu skalieren, um das Bild bestmöglich in die Formmaske einzupassen.

Gefällt dem Nutzer keines der vorgeschlagenen Bilder, kann er sich über die unteren Pfeile – ähnlich einem Accordion – die Zielseite anzeigen lassen und einen beliebigen Screenshot davon machen. Um den Nutzer bestmöglich beim Erstellen des Link-Bilds zu unterstützen, kann er ungewünschten Weißraum über die Pipette mit der Hintergrundfarbe des Logos ausfüllen, das Bild um einen festen Winkel drehen oder für die Hintergrundfarbe ein helles oder dunkles Grau wählen.

Damit sich der Nutzer jederzeit orientieren kann, wird ihm rechts eine kleine Übersicht der Cloud angezeigt, in der der ausgewählte Link markiert ist. Bei Bedarf kann er den aktuellen Link auch in eine andere Cloud verschieben.

Es gilt zu klären, ob das Vergeben der Tags ebenfalls in diesem Bearbeitungs-Modus oder separat in einem anderen Abdunklungsfenster stattfindet. Dazu muss das Tagging genauer durchdacht und der dafür nötige Platz abgeschätzt werden.

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.

Link Darstellung

Wir haben uns lange mit der Frage beschäftigt wie der Link dargestellt werden kann. Das Problem ist, die Links eindeutig als solche erkennen zu können und trotzdem eine hohe Wiedererkennung zu ermöglichen. Darüber hinaus ist ein Ansatz, wichtige Funktionen direkt auf dem Link zu platzieren. Um den Link eindeutig als Interaktionselement zu erkennen und klar planen zu können, wo die Funktionen angebracht werden, muss der Link eine einheitliche Gestaltung haben. Zunächst haben wir über einfache Quadrate nachgedacht. Da dabei jedoch die hohe Wiedererkennungskraft des einzelnen Links verloren gehen würde, muss das System mehr Varianten zulassen. Eine andere Idee ist ein Format anzulegen, dessen Vielfaches in einer Linkform enthalten ist. So wären viele Formen möglich und gleichzeitig eine Einheit zu erkennen. Dennoch ist der Wiedererkennungswert immer noch nicht besonders hoch, da die Formen zwar etwas unterschiedlich, auf den ersten Blick aber immer noch zu ähnlich sind. Ein Lösungsansatz, um viereckige Formen zu verwenden, die trotzdem einen hohen Wiedererkennungsgrad haben liegt darin, die Ecken verschiebbar zu machen, sodass eine Vielzahl an Formen möglich ist. Das Problem bei dieser Lösung ist, dass das Gesamterscheinungsbild bei zu vielen Formen sehr unruhig wird.

Nimmt man alle Überlegungen zusammen, kommen wir auf folgende Lösung. Es gibt 5-6 verschiedene, miteinander harmonierenden Formen, aus denen ausgewählt werden kann. Diese Formen sind verpspielt und mit schrägen Kanten. Wird die Maus über das Linkbild bewegt, wird die Form durch einen Rahmen zu einem Rechteck ergänzt, sodass ein ruhigeres Bild entsteht. Auf dem Rahmen sind klicksensitive Bereiche für Funktionen platziert. So können die Tags oder der ganze Link bearbeitet werden, der Link kann geteilt und wenn er öffentlich ist auch bewertet werden.

All-in-one-link

Da der Link an sich das Hauptelement der Anwendung ist, haben wir uns ihm als erstes gewidmet.

Die Überlegung ist essentielle Funktionen auf dem Link, also der Grafik, die den Link repräsentiert selbst zu platzieren. So wären wichtige Funktionen direkt dort angebracht wo sie benötigt werden. Wichtige Funktionen könnten der Abruf von RSS Nachrichten, eine Suchmaske, Hinzufügen von Tags etc. sein.

Probleme

Bei diesem Ansatz muss davon ausgegangen werden, dass die Grafiken immer groß genug sind, um Funktionen und Informationen darauf abzubilden. Kleine Icons würden als Darstellungsfläche nicht ausreichen. Eine Minimalgröße der Grafiken könnte für dieses Problem eine Lösung bieten, allerdings wäre die Gestaltungsfreiheit des Nutzers damit eingeschränkt. Eine weitere Frage ist, welche Funktionen überhaupt ‘essentiell’ sind. Für unterschiedliche Zwecke werden auch verschiedene Funktionen attock benötigt. Trotzdem sollte der Link in den Funktionen, die dem Nutzer für ihn zur Verfügung stehen und im Aussehen eine konsistente Linie besitzen.

Eine Möglichkeit ist, die Rückseite des Links für Funktionen zu nutzen. Bei Klick auf ein kleines Icon rechts unten am Link kann der Link umgedreht und dann bearbeitet werden.

Der Link wird zur Hälfte abgedunkelt, wenn der Nutzer mit der Maus darüber fährt. Es erscheinen Informationen und Buttons, über die RSS Feeds, eine Suchmaske und eine Bearbeitungsmaske für Tags aufgerufen werden können. Gleichzeitig hat der Nutzer immer noch die Möglichkeit über die obere Hälfte zur Zielseite zu gelangen.
Beim Darüberfahren erscheinen auf dem Link die einzelnen Funktionen. Die Darstellungsfläche des Links ist dabei in Funktionen aufgeteilt:

Das Linkbild wird um eine Funktionsleiste erweitert. Bei Klick auf eine Funktion fährt sich eine Bearbeitungsmaske aus: