Monatsarchiv für Februar 2011

Schrift der Anwendung

Wir haben uns verschiedene Schriften angeschaut, die für die Anwendung in Frage kommen. Eine Auswahl zeigt die untere Abbildung. Zunächst haben wir auch Schriften getestet, die nicht unbedingt websicher sind, da sich mit CSS3 mittlerweile Schriften gut einbetten lassen. Um dennoch kein Risiko einzugehen, haben wir uns letztendlich dafür entschlossen, auf eine websichere Schrift zurückzugreifen. Unter anderem haben wir uns von folgender Liste inspirieren lassen: Verbreitung von Schriftarten im Web.

Die Entscheidung ist auf die “Lucida Grande” gefallen, die im Gegensatz zu den anderen Schriften auch sehr klein noch klar und deutlich lesbar ist.

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.

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.

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!

Profile

Über Profile kann sich der Nutzer nähere Informationen zu Links, Clouds oder einzelnen Mitgliedern anzeigen lassen. Diese Funktion ist als zusätzliche Leiste bzw. Fenster, das eingeblendet wird, innerhalb der Anwendung immer erreichbar. Nach den Gestaltungsversuchen beim Link (s. vorheriger Blogeintrag) haben wir die favorisierten Stile für die Profile umgesetzt, von denen eine Auswahl in folgender Abbildung zu sehen ist. Dabei standen die unterschiedlichen Stile im Fokus, die Farben, Inhalt und Anordnung der Elemente sind nicht ausgereift.

Die mit einem roten Punkt markierten Profile haben uns letztendlich am besten gefallen. Beim dritten Profil von links ist die Grundform sehr definiert und gerade, wird aber durch den leichten Versatz mit Transparenz aufgelockert. Das Profil ganz links fällt durch seinen sehr starken Selbst-Gemacht-Charakter auf. Durch den freien Pinselstrich wirkt es allerdings zu aufdringlich und führt zu einem sehr unruhigen Gesamteindruck. Deshalb haben wir uns entschieden, eine Mischung der beiden markierten Stile zu versuchen.

Diese Vorstellung eines gekonnt-sauber-selbstgemachten Stils :) , der nicht zu unfertig wirkt, brachte uns auf die Idee, die Anwendung im Copic-Style umzusetzen. Mit Copics lassen sich große Flächen gleichmäßig ausfüllen und weiche Farbübergänge realisieren. Bei schnell gezeichneten Copic-Entwürfen überlagern sich teils die verschiedenen Striche, wodurch der “Self-made-Look” stärker sichtbar ist. Erste Entwürfe zu diesem Look werden im folgenden Blogeintrag gezeigt.

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.

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