Monatsarchiv für Januar 2011

Inspiration mal anders…

So langsam wirds ernst und wir wollen und werden uns dem “Look & Feel” der Anwendung widmen.

Um auf vielfältige und gute Ideen zu kommen, suchen wir nach Inspirationen aller Art. Es kommt bisweilen auch vor, dass Apfelkuchen gebacken wird, denn wir wollen ja nichts unversucht lassen, um auf die besten Ideen zu kommen…


In diesem Sinne, läuten wir das Feinkonzept ein!

Koordinaten Visual

Koordinaten Visuals sind Visualisierungen, in denen verschiedene Anbieter mit ähnlichen Funktionen bezogen auf bestimmte Begriffe miteinander verglichen werden. So wird sichtbar, welcher Anbieter worauf Schwerpunkte setzt und wie die eigene Anwendung sich von ihnen abhebt.

In der Ausarbeitung erscheinen die Koordinaten Visuals nach der ausführlichen Analyse verschiedener Social Bookmarking Systeme. In diesem Zusammenhang stehen sie hier auf dem Blog leider nicht, dennoch können die Darstellungen vllt einen ersten Eindruck vermitteln. Wir haben 5 Social Bookmarking Systeme mit der zu konzipierenden Anwendung verglichen. Die Anbieter sind:

In dem ersten Koordinaten Visual werden Aspekte der Funktionweise miteinander verglichen:




Das zweite Koordinaten Visual vergleicht Aspekte des Aussehens. Diese haben wir gesondert untersucht, da darauf in der zu konzipierenden Anwendung ein besonderer Schwerpunkt liegen soll:

Cloud-Übersicht

Nach der Gegenüberstellung im vorherigen Blog-Eintrag, sind wir zu dem Entschluss gekommen, dass wir in der Cloud-Übersicht eine Zoomfunktion anbieten. Da wir nicht abschätzen können, wieviele Clouds die Nutzer haben werden, muss die Übersicht auch für eine große Anzahl von Clouds funktionieren.

Funktionen der Cloud-Übersicht

- Profil/ Einstellungen

  • Avatar, Nickname
  • Passwort
  • (Ort, Alter)
  • allg. Tag-Bearbeitung
  • Anzeige aller Follower
  • Freundesliste (Freunde suchen+hinzufügen, alle Mitglieder durchsuchen)

- Papierkorb für Clouds

- Zoomfunktion um Überblick zu verschaffen

  • 100%  => Cloud-Funktionen werden bei hover angezeigt
  • die minimale Zoomstufe wird noch festgelegt


Unterstützung beim freien Anordnen

Um den Nutzer bei der individuellen Anordnung seiner Clouds in der Übersicht zu unterstützen, werden ihm Tools angeben. Mit denen kann sich der Nutzer bspw. Oberthemen anlegen, um die er seine Clouds schließlich anordnet. Diese Strukturierungshilfen stehen auch innerhalb der Cloud zur Verfügung



Dock-Station

Der Nutzer kann sich durch Zoomen und Panning eine Cloud aussuchen, darauf klicken und gelangt dadurch zu seinen Links. Damit er nicht jedesmal zwischen Cloud und Cloud-Übersicht wechseln muss, kann der Nutzer mehrere Clouds auf einmal öffnen. Dadurch zieht er die entsprechenden Clouds auf die Dock-Station. Über Pfeile innerhalb der Cloud kann er zwischen den ausgesuchten Clouds hin- und her navigieren ohne die Cloud-Übersicht aufrufen zu müssen. Die Dock-Station könnte sich entweder…

… am oberen Bildschirmrand oder…

… am unteren Bildschirmrand befinden.


Anordnung der Clouds

Für die Anordnung der einzelnen Clouds in der Cloud-Übersicht haben wir folgende 3 Möglichkeiten miteinander verglichen:

Kategorien Raster Freie Anordnung
- macht erst bei einer Menge an Clouds Sinn
- Zuordnen nicht immer möglich/erwünscht
- Clouds selbst stellen Kategorien dar
- Aufwand für Nutzer
- kein Wiedererkennungs durch Anordnung
- benötigt viel Platz
- horizontales Scrollen

+ deutliche Abgrenzung zur Cloud-Ansicht
+ kein Panning nötig
+ geordnet, aufgeräumt

- Überblick geht schnell verloren
- kein Wiedererkennungswert durch Anordnung

+ Filterfunktion besser als bei Kategorien möglich
+ platzsparende Visualisierung
+ wenig Aufwand

- Platzproblem
- aufwendiges Panning bei vielen Clouds

+ Verbindungen der Clouds können visuell dargestellt werden (zu einem Oberthema)
+ Clouds können auch frei angeordnet werden> wenig Aufwand

> Nachteile könnten durch Zoomfunktion gelöst werden

Stream – Update

Es gibt einen Update in Sachen Link-Stream. Im Stream können nicht nur aktuelle Bookmarks der Community bzw. der eigenen Follower eingesehen werden, sondern darüber hinaus die eigenen Aktivitäten nachvollzogen werden. Bookmarks die ich anlege, erscheinen dabei in dem eigenen Stream. Außerdem können Links temporär im Stream gespeichert werden, wenn ich sie nicht gleich als Bookmark einer Cloud zuordnen, sondern nur schnell speichern möchte, um ihn evtl zu einem späteren Zeitpunkt noch einmal anzusehen. Im Stream kann ich diese Links bis zu einer Woche lang noch ansehen und bei Bedarf einfach in eine Cloud herein ziehen. Ansonsten werden sie gelöscht.



Es muss darauf geachtet werden, dass ersichtlich ist, welche Links bereits als Bookmark in einer Cloud gespeichert, und welche nur als temporärer Link vorhanden sind. Da das Anlegen von temporären Links besonderns schnell gehen muss, sucht der Nutzer hierfür kein Bild aus, um dies zu bearbeiten, stattdessen wird entweder das Favicon, das Logo oder ein automatisch generiertes Bild der Seite verwendet. Erst wenn der Nutzer sich dafür entscheidet den Link doch als Bookmark in eine Cloud zu ziehen, wird er angeregt die Einstellungen für diesen Bookmark zu verändern.

Update ermöglicht: schnelles Speichern temporärer Links!

Tool Modus & Hintergründe

Wir haben uns Gedanken darüber gemacht, wie eigene Clouds besser strukturiert werden könnten bzw. wie der Nutzer dabei unterstützt werden soll. Unsere Idee: Funktionen in der Toolbar…

Sobald einer der Modi aktiviert wird, sind die Bookmarks zwar noch zu sehen, aber nich mehr bearbeit- und verschiebbar. Folgende Modi sind angedacht:

  • Hinzufügen eines Oberbegriffs, dem die Bookmarks durch Nähe zugeordnet werden können. Ist etwas auffälliger als eine einfache Kritzelei auf dem Hintergrund, tritt aber gegenüber dem Link in den Hintergrund.
  • Es können Punkte gesetzt werden, die durch Linien verbunden werden. So entstehen Bereiche, in denen Bookmarks zu bestimmten Themen gesammelt werden können.
  • kleine Kritzeleien wie ein Ausrufezeichen, Fragezeichen, ein Pfeil oder kurze Notizen, die auf dem Hintergrund platziert sind. Diese könnten alternativ nicht auf dem Hintergrund, sondern über dem Link, wie eine Art Overhead Folie zu sehen sein.


Hintergrund Templates

Manchmal ist es auch interessant Bookmarks in einen Hintergrund zu integrieren. Um ein einigermaßen einheitliches Erscheinungsbild bzw. ‘Look & Feel’ zu erzeugen, könnte es Hintergrund Templates geben, die nach und nach erweiterbar sind. Zunächst kann ein dunkler und ein heller Hintergrund zur Verfügung stehen. Denkbar sind jedoch auch thematische Hintergründe, auf denen jeweils mit Strichzeichnungen Objekte gezeichnet sind (Landkarte, Schaufenster, Bücherregal…).

Darstellung der Clouds

Durch die Anordnung der einzelnen Links entsteht eine individuelle Link-Cloud. Befindet man sich innerhalb der Link-Cloud, wird diese durch den Rand des Bildschirms begrenzt. Eine weitere Darstellung der Link-Cloud wird für die Übersicht benötigt, in der die Nutzer alle ihre Link-Clouds auf einen Blick anschauen kann.

Form der Cloud

Die Form der Cloud soll sich an den Charakeristika einer Wolke orientieren (locker, flockig, rund, geschmeidig,..). Zunächst überlegten wir, dass die verkleinerte Anordnung der Links die Form der Cloud bestimmen könnte, diese wirkt jedoch immer noch sehr hart und kantig (s. Abb. mittlere Spalte). Um dies zu umgehen, wählten wir einen Kreis, als runde und vor allem auch ruhige Form, die sich deutlich von der Form der Links abhebt.

Repräsentatives Bild für die Cloud

Damit der Nutzer beim Anlegen der Clouds kein eigenes Bild extra hochladen muss, wollten wir als Bild die angeordneten Links verwenden. Werden alle Links einer Cloud dafür verwendet, werden diese in der Übersicht so klein dargestellt, dass sie nicht mehr erkennbar und unverständlich sind. Clouds könnten durch unterschiedliche Hintergründe unterschieden werden. Werden aber Standard-Hintergründe benutzt, ist zwischen den Clouds keine Unterscheidungskraft mehr gegeben (s. Abb). Somit kamen wir zu dem Entschluss einen runden, größeren Ausschnitt der Cloud als Bild zu verwenden, ähnlich einem “Guck-Loch”. Der Nutzer könnte die Möglichkeit haben, einen Ausschnitt zu wählen, den er am ehesten mit der entsprechenden Cloud verbindet. Somit greift wieder der Wiedererkennungswert, ähnlich wie bei den Links. Wie durch die Abbildung deutlich wird, können bei gleichem Hintergrund die runden Ausschnitte besser voneinandern unterschieden werden.

Die Abbildung zeigt nur erste grobe Versuche, welche Form eine Cloud haben könnte. Über die konkrete Gestaltung werden wir uns noch Gedanken machen.

Möglichkeiten für das Anbringen der Cloud-Funktionen bei hover:

panning

Nach den W3C Stats arbeiten bereits viele Nutzer mit einer 1024 x 768 Pixel Bildschirmauflösung (20%) oder einer höheren (76%) (Quelle: http://www.w3schools.com/browsers/browsers_display.asp Stand: Januar 2010). Wir haben uns für eine Cloud Größe von 1920 x 1080 Pixeln (Full HD) entschieden, damit Nutzer mit einem großen Bildschirm, die Fläche ihres Bildschirms komplett für ihre Cloud nutzen können. Es kann daher in einigen aber nicht allen Fällen davon ausgegangen werden, dass die Nutzer die komplette Größe einer Cloud auf ihren Bildschirmen dargestellt bekommen. Wir haben uns also dem Problem gewidmet, wie eine Cloud dargestellt wird, wenn nicht der volle Darstellungsbereich sichtbar ist…

Zunächst einmal soll ‘Panning‘ möglich sein. Panning bedeutet das Verschieben eines Bildausschnitts. Dabei wird der Hintergrund per drag & drop versetzt. Durch das schnelle Nachladen des Hintergrunds erscheint so der Eindruck, dass er verschoben wird. Auf diese Weise kann sich der Nutzer Ausschnitte der gesamten Fläche nacheinander ansehen. Ergänzend sollte irgendwie erkenntlich werden, wo man sich gerade auf der Cloud befindet. Das heißt wie viel rechts, links, oben und unten von der aktuellen Position noch vorhanden ist. Dazu haben wir zunächst Pfeile angedacht, mit einer Zahl, um zu zeigen, wie viele Links sich in der jeweiligen Richtung noch versteckt befinden (siehe scribble). Dies wäre aber wieder eine zusätzliche Anzeige an jedem Bildschirmrand, die Platz weg nehmen würde. Auch nur die Anzeige von Pfeilen nimmt Platz ein. Wir haben uns nun für ein Navigationsfenster entschieden, das der Nutzer sich zusätzlich anzeigen lassen kann, wenn er dies möchte. Dies zeigt immer den aktiven Ausschnitt der Cloud, allerdings ohne Anzahl der nicht zu sehenden Links. So kann der Nutzer sich eine Detail- und Übersichtsanzeige nebeneinander darstellen lassen.

Link löschen

Für die Funktion “Link löschen” wird häufig die Metapher des Papierkorbs eingesetzt. So könnten einzelne Bookmarks per Drag & Drop auf einen Papierkorb in der Toolbar gezogen und damit gelöscht werden. Diese Metapher hat sich mittlerweile durchgesetzt,  ist den meisten Nutzern bekannt und erfordert damit nur wenig Lernaufwand. Dennoch haben wir weitere Ideen dazu gesammelt, um eine spannende Alternative zu finden:




  • der Mauszeiger verwandelt sich in einen “Lösch-Stift”  - ähnlich eines Tintenkillers. Damit können einzelnen Bookmarks durchgestrichen und somit gelöscht werden
  • ein Lösch-Button befindet sich direkt auf dem Bookmark
  • weitere Metaphern: Knüllpapier/Knüllecke;  personifizierter Papierkorb
  • Mauszeiger verwandelt sich in Lösch-Kreuz, alle Links die damit angeklickt werden, werden gelöscht.
  • ein “Schwarzes Loch” wird von der Toolbar genommen und zum Löschen auf die entsprechenden Bookmarks per Drag & Drop gezogen. Diese werden daraufhin “eingesaugt”.

Link teilen & Freunde

Der Nutzer hat die Möglichkeit

  • Mitglieder der Community zu durchsuchen und als Freunde hinzuzufügen
    (> über private Übersicht/Cloud-Übersicht/Home möglich)
  • sich seine Freundesliste anzuzeigen (> jederzeit über Toolbar)
  • einzelne Links an Freunde zu verschicken (> über Button am Link selbst)
  • Links von Freunden zu empfangen


Link verschicken & empfangen

Nach langem hin und her überlegen….




….kamen wir zu folgender Lösung:


Klickt der Nutzer auf den Button “Teilen” am Link, öffnet sich das Dialogfenster “Teilen”, in dem die Freundesliste angezeigt wird. Um einen Link mit einem oder mehreren Freunden zu teilen, zieht er die entsprechende Person(en) per Drag & Drop in die mittlere Spalte, wodurch eine neue “Konversation” eröffnet wird. Einzelne Links können nun von der Cloud in das Konversations-Fenster hineingezogen werden, diese werden synchron an den Freund verschickt, ein Senden-Button wird nicht benötigt. Antwortet der Freund mit einem neuen Link, ist dieser ebenfalls direkt sichtbar und als empfangener Link markiert. Wird ein Link hineingezogen, hat der Nutzer noch die Möglichkeit eine kleine Nachricht hinzuzufügen. Diese Interaktion ermöglicht eine Art “Live-Chat”, über den Freunde schnell Links hin und herschicken können. Dabei ist zu bemerken, dass das Verschicken des Links im Fokus steht, nicht das Versenden von Nachrichten. Deshalb ist die Anzahl der Zeichen – ähnlich einer SMS – begrenzt und kann nur zusammen mit einem Link verschickt werden.

Links können nicht nur mit Freunden geteilt werden, sondern auch per Mail verschickt sowie u.a. auf facebook oder twitter gepostet werden. Das Verschicken von Links an Mitglieder der Community, die keine Freunde sind, ist nicht möglich. Damit sollen ‘Spam-Links’ verhindert werden. Weiterhin gibt es noch eine History, in der bereits verschickte Nachrichten nachverfolgt werden können.

Ist das Dialogfenster mit der Freundesliste nicht geöffnet, wird der Nutzer über den Button in der Toolbar auf neu empfangene Links aufmerksam gemacht. Neben dem Teilen-Button erscheint die Anzahl der empfangenen Links.

Hinzufügen neuer Freunde

Freundesanfragen müssen zunächst bestätigt werden, erst wenn sie erlaubt wurden, ändert sich der Status von Mitglied zu Freund und das Verschicken von Links ist möglich. Deshalb ist das Hinzufügen neuer Freunde im Dialogfenster “Teilen” (s. Abb. oben) nicht möglich. In seiner privaten Übersicht hat der Nutzer die Möglichkeit, alle Mitglieder der Community zu durchsuchen und Freundesanfragen zu verschicken.