request_url_withoutHTTP=,canonical_url_withHTTP=,canonical_url_withoutHTTP=,request_url_withoutHTTP_realspaces=. Webdesign (Seite 1 von 2) « Tags « Blog « Bernhard Häussner
Bernhard Häussner
Tags: Artikel mit dem Tag «Webdesign» durchstöbern

Tags!?

31.01.2010, 12:31
Visualisierung von Tag-Beziehungen
Visualisierung von Tag-Beziehungen

Wann solle man Tags benutzen? Wann nicht? Warum überhaupt? Wie bereichern Tags meine Webseiten? All diese Fragen habe ich mir gestellt, als ich laß, dass Robert Hartl sich gegen Tags ausspricht und zwar zugunsten der „Einfachheit“. Ich hatte die Tags eigentlich immer für eine Bereicherung gehalten, nicht nur für reinen Web-2.0-Trend. Und warum?

Ich achte durchaus minimalistische Konzepte. Zu viele Funktionen sind verwirrend (feature creep). Aber Webdesign sollte wohl nicht möglichst minimalistisch sein, wie etwa about:blank, sondern eher möglichst minimalistisch aussehen. Das bedeutet Features werden vor dem flüchtigen Betrachter „versteckt“ und lenken nicht ab, wenn jedoch eine bestimmte Funktion gesucht wird, war sie die ganze Zeit dort zu erreichen, wo man sie erwartet hat. Kurze Suche (intuitiv) und kleine Ablenkung (übersichtlich) sind beide erstrebenswert. Da gilt es Kompromisse zu finden. Am einfachsten ist es Funktionsumfang, der nicht gefragt ist, zu entfernen. Aber sind Tags nutzlos?

Zunächst sollten wir uns axiomaisch auf eine sinvolle Definition des Begriffs „Tag“ einigen. Tags sind Schlagwörter, die Informationsstücken, wie Blogartikeln, zugeordnet werden, in einer N:M-Relation. In meinem Blogdesign verwende ich als „Übersetzung“ meist „Themen“. Heute ist mir aufgefallen, auch mashable.com nutzt „Topics“. Der Begriff des Themas weckt schon einige Assoziationen: Ein Thema ist etwas großes, umfassendes. Tags, die nur mit einer Minimalanzahl Informationsstückchen zu verbinden sind, sind irreführend; ebenso mehrere Tags (fast) das selbe Thema vertretend. Dann ist die Zuordnung zu schwammig, ein einheitlicher Überbegriff und bessere Differenzierung ist gefragt. Ihre volle Stärke entfalten Tags, wenn sich ihre Themengebiete nicht zu viel, aber auch nicht gar nicht überschneiden.

Robert Hartl benutzt in seinem Blog „Kategorien“, die ich mit dem Konzept der Tags beschreiben würde, denn der Begriff „Kategorien“ kann mit Ausschließlichkeit konnotiert werden und ein Eintrag ist nicht nur einer Kategorie zugeordnet. Nur finden sich diese Kategorien als hierarchische Gliederungspunkte in der Navigation. Außerdem ist die Anzahl der Kategorien klein. Sogar die Kategorien eines Eintrags werden in der Art eines Breadcrumbs angezeigt. Durch all diese Design-Signale erscheinen uns die Kategorien wie paarweise disjunkte Mengen, haben aber bei näherem Betrachten große Überschneidungen, die bei Kategorien unerwartet sind, hier liegt die Domäne der Tags. Tags sind nicht als Kategorie, etwa in Navigationsmenüs zu missbrauchen, auch nicht konzeptionell.

Die konventionelle Darstellung des Konzepts „Tag“ ist die Tagcloud, in der die Tags, meist alphabetisch angeordnet, je größer Dargestellt werden, desto mehr Einträge mit ihnen verknüpft sind. Diese Darstellung gibt dem Leser eine Übersicht, zu welchen Themen die meisten Informationen verfügbar sind. Gerade bei Informationsquellen mit sehr diversen Themen, wie einer privaten Website, kann der Leser allein an der Label-Identität selten erkennen, woran er ist. Durch eine alphabetische Sortierung wird ein gezielter Suchvorgang nach genau einem Interessengebiet erleichtert.

Mashable.com: Tagcoud mit Topics dezent im Foooter platziert

Mashable.com: Tagcoud mit Topics dezent im Foooter platziert

Um die „Einfachheit“ beizubehalten, zeige ich in meiner Sidebar nur ein paar wenige, wichtige Tags an, denn zu diesen umfangreichen Themen ist beim Stöbern, also dem erkundenden Surfen, mit hoher Wahrscheinlichkeit „für jeden etwas dabei“. Nahe findet sich der Link zur ausführlichen Tagcloud mit vollem Umfang auf einer eigenen Seite, denn es sammeln sich doch einige Tags an, obwohl ich versuche die Zahl der Tags klein zu halten, nicht nur aus ideologischer „Einfachheit“, sondern um die oben genannten Forderungen der klaren Differenzierung und Singularität zu erfüllen.

Dabei bekomme ich leider einen Nachteil der Tags zu spüren: den erheblichen Pflegeaufwand. Aufgrund ihrer Größe (zweidimensionale Fläche zurzeit 5696) und rekursiven Ähnlichkeitsberechnungen sind die Tagbeziehungen schwierig zu analysieren (ich helfe mit mir einer 3D-Tagcloud mit Processing) und darum auch schwierig herzustellen, ohne dabei zu viel Redundanz zu schaffen. Mit wachsender Anzahl wird die Gefahr einer Vernachlässigung seltener und alter Tags immer größer. Da jedoch auch die Anzahl analysierbarer Verbindungen steigt, kann der Computer immer besser helfen. Implementiert habe ich mir eine Funktion die, nachdem ich einige Tags zu dem Eintrag gewählt habe, über andere Einträge verknüpfte Tags vorschlägt. Noch raffinierter wäre es, Tags von Einträgen vorzuschlagen, die nach N-Gramm-Analyse einen hohen Dice-Koeffizient aufweisen. Selbst dann ist das Anlegen neuer Tags noch nicht einfach.

Glücklicherweise wächst mit mehr Pflege auch der Informationsgehalt der Tags. Ich habe stundenlang das selbstorganisierende 3D-Clustering meiner Tags angesehen, durch die Zufallsstartpositionen ergibt sich jedes Mal eine neue Anordnung, immer entdeckte ich erstaunliche Systematik in der Anordnung. Der Computer scheint (gewisse Aspekte) meines eigenen Werks besser zu kennen als ich selbst.

Wie selbstverständlich argumentiert Robert Hartl mit der möglichen Überforderung neuer User mit der (für das schnelllebige Internet schon traditionellen) Tagcloud. Dies scheint mir jedoch schon sehr bald nicht mehr zeitgemäß. Die junge Internet-Generation erweist sich Konzeptverständig und Medienkompetent. Das Argument erübrigt sich also schon bald aus sozialen und biologischen Gründen. Polemisch formuliert: Die Zielgruppe der Internetseiten sind Internetnutzer, also warum auf Offliner Rücksicht nehmen? Ich frage mich, ob man bei der Einführung der allgemeinen Schulpflicht begonnen hat, beim Schreiben auf Analphabeten-Verständlichkeit zu achten. Um wieder auf die sachliche Ebene zurückzukehren: Erfahrene User wollen auch ihre „Power-Tools“, finden diese aber bei geschickter Gestaltung auch wenn die Zusatzfunktionen die unbeholfenen Benutzer nicht verschrecken.

Bei Tag-Kombinationen mit boolescher Algebra wird es schon eher kompliziert. Dass auch das übersichtlich machbar ist, beweist einer der Vorreiter in Sachen Social-Tagging, delicious:

Vergessen darf man auch nicht, dass das Konzept des Taggings eigentlich nicht neu ist: In Bibliotheken (Ja, mit Büchern und so) werden die Medien im Katalog mit Schlagwörtern versehen, sodass der Benutzer Literatur zu einem bestimmten Thema finden kann. Keine Bibliothek verzichtet deshalb auf Kategorien wie Fachbereiche, aber diese sind eben ausreichend groß und klar gewählt, so dass sich (meistens) keine Konflikte ergeben. Zusätzlich braucht man jedoch eine weitere Organisationsmöglichkeit im Kleinen. Weil sich hier die Bereiche überschneiden wählt man Schlagworte, die sich nicht gegenseitig ausschließen.

Die Nische in der die Tags einzusetzen sind ist also die filigrane Themenzuordnung. Und die Internet-Form der Schlagwörter „Tags“ mit Erscheinungsbild „Tagcloud“ wird vielleicht bald ein unumstrittenes Werkzeug dazu sein.

Kommentare: keine

Pagination - Design von Umblätterern und Seitenlisten

20.12.2009, 16:51
Pagination Widgets

Pagination Widgets

Obwohl das Umblätten von Seiten mit entsprechenden Widgets etwas sehr alltägliches im Web ist, gibt es noch immer einige konkurrierende Widget-Designs. Darum habe ich mir Gedanken gemacht, welche Prinzipien diesen zu Grunde liegen, und jeweils Vor- und Nachteile anhand von 10 Beispielen erörtert.

Die Art und Weise auf die Wordpress das Blättern löst, nämlich mit Vor- und Zurücklinks, die als ältere/jüngere Bezeichnet sind, findet sich zwar heute überall, hat aber trotzdem einige Probleme, die den Leser orientierungslos in der Seitenfolge zurücklassen:

Der Leser weiß z.B. nicht wohin er blättert, da die Knöpfe nicht mit vor/zurück, sondern mit der Metainformation älter/jünger verknüpft sind. Zudem weiß der Leser genauso wenig, wohin der überhaupt blättern kann, da nicht kommuniziert wird, wie umfangreich der Seitenstapel ist.

Das nächste Problem tritt erst gar nicht auf: In einem unbegrenzten Seitengewirr interessiert es den Benutzer natürlich auch nicht, wo er sich in diesem befindet. Überflüssig zu erwähnen, dass dies nur behelfsmäßig aus der URL entnommen werden kann.

Wenn man beginnt diese Probleme zu lösen kommt man schnell auf die Idee, einfach alle Seiten(zahlen) anzuzeigen. So hat man schnell einen Überblick über die Anzahl der Seiten. Nur dumm, wenn man sich dann nicht mehr traditionell immer weiter durchklicken kann, sondern Nachdenken erfordert wird: Man muss das Kurzzeitgedächtnis üben, da man nach dem Lesen der Seite noch wissen muss, welche Nummer diese Seite hatte. Entschuldigend muss man sagen, dass das Design von TAB, wo ich dieses Negativbeispiel gefunden habe noch ganz neu und ziemlich experimentell ist, denn der Fokus liegt hier auf der Anzeige des Textes in Spalten, deren Anzahl sich an die Browserfenstergröße anpassen sollte. Das Paging ist hierbei noch nur halbherzig gelöst.

Hier eine traditionelle Lösung, diesmal mit auffalllend gestalteten Blätter-Links. Leider versäumt auch kunstmark.com dem Surfer zu zeigen, wo er sich denn nun befindet. Hier bahnt sich auch schon langsam ein weiteres Problem an: Mit wachsender Seitenzahl nimmt das Blätter-Widget immer mehr Platz ein. Vorteilhaft ist natürlich, dass man auf jeden Fall immer zu jeder Seite kommt.

Das Problem mit der Riesengröße lässt sich beheben, indem einige Seiten weggelassen werden, wie auf Nerdcore. Hier ist auch dank roter Hinterlegung eindeutig zu Erkennen, auf welcher Seite man denn ist.

Ein weiterer Lösungsansatz ist es, dem Leser die Gesamtzahl der Seiten und auch die aktuelle Seite anzuzeigen. So etwas findet sich auf Gamestar.com in geschickter Kombination mit letze/erste Seite Links, welche benötigt werden, wenn diese Seiten nicht numerisch repräsentiert sind. Ein kleines assoziations-erschwerendes Manko ist vielleicht, dass Blätter-Links und Seitenübersicht getrennt auf die beiden Seitenränder verteilt sind.

Eine komplexe Lösung, die sehr auf das Surfverhalten angepasst ist, benutzt vBulletin, hier auf unixboard.de. Einige Seiten werden als Quicklinks angeziegt, unzweifelhaft wird angezeigt wo man ist und wie viele Seiten es gibt, und Links zur ersten und letzen Seite ermöglichen schnelles Springen. Außerdem öffnet ein kleiner Button ein Eingabefeld, mittels dem man zu jeder Seite springen kann.

Dieses Widget ist gut angepasst auf die Verhaltensweise des Benutzers: Anfangs wird man vielleicht noch jede Seite des Threads lesen, dann vielleicht etwas springen. Auch der Quereinsteiger kann sich dank blau hervorgehobener Orientierungshilfe sofort ein Bild seiner Position machen. Da den Leser von Foren oft auch nur interessiert, was zuletzt passiert ist, findet sich auch der Link zur letzten Seite an Prominenter Stelle.

Dieser reiche Funktionsumfang zieht natürlich auch Probleme mit sich (KISS). So sind die in der Liste weggelassenen Seiten nicht repräsentiert und die Vor/Zurück Pfeilchen fallen etwas klein aus, obwohl dies wohl die meist benutze Funktion sein dürfte. Das Widget benötigt also etwas Eingewöhnung.

Ein - wie ich hoffe nahezu perfektes - Design findet sich auf den Seiten meines Journals. Die Vor/Zurück-Links sind auffallend gestaltet und schleißen die Seitenliste ein, in welcher nur das direkte Umfeld der aktuellen Seite angezeigt wird, alle anderen Seitenzahlen werden weggelassen, was durch Auslassungspunkte angedeutet wird. Erste und letzte Seite werden dann wieder angezeigt. Zudem finden sich miniatur-Pfeilchen, welche das Überspringen von einigen Seiten ermöglichen bzw. den Bereich der angezeigten Zeitenzahlen verschieben.

Damit hoffe ich alle benötigen Funktionen und Informationen in einem klaren, platzsparenden Widget zu vereinen.

Technisch gesehen benutze ich eine kleine Modifikation des von Sweetcron verwendeten PaginateIt von Brady Vercher.

Sehr einfach aber natürlich mit dem geringsten Funktionsumfang funktioniert das umblättern bei Twitter - auf Knopfruck werden weitere Einträge gealden. Das ist hier möglich, da der Fokus auf Aktualität und „realtime“ liegt, es gibt also keinen Grund zwischen Seiten hin und her zu springen. Die Seitenzahlen würden sich auch ständig ändern.

Sehr abstrakt und gut für Menschen mit neugierigem Forschungsdrang geeignet, ist das Paging auf Shimones Lifestream. Statt Seitenzahlen finden sich jeweils drei kleine Kreischen, die aktuelle Seite wird durch den gefüllten Kreis angezeigt. Wie man sieht lösen sich einige Probleme, wenn es nur 3 Seiten gitbt von selbst.

Der Grund, warum ich mich mit Ursachen und Wirkung von Usability-Problemen im Berich der Pagination beschäftigt habe, ist die Tatsache, dass mein Lifestram (powered by Sweetcron) mit einem denkbar unpraktischem Pager kam: Keine Vor-/Zurück-Buttons, daneben unechte Vor-/Zurück-Buttons, und hier im Beispiel von simon.dynamicmushroom.com befinden wir und übrigens auf Seite 16.

Ungelöstes Problem

Ein Problem, das ich noch nicht wirklich lösen konnte, ist die Verschiebung von Seiten und die unlogische Leserichtung bei chronologisch rückwärts sortierten Journalen. Wenn neue Einträge hinzu kommen, verschieben sich die älteren um deren Anzahl nach hinten und damit beständig auf andere Seiten.

Bei Twitter und Wordpress wird das gelöst, indem die Seitenzahlen weggelassen werden und Permalinks auf Einträge angeboten werden.

Man könnte zum Beispiel auch die Seiten Rückwärts aufbauen, also bei der Seite mit der höchsten Zahl beginnen und dann nach 1 blättern, so würden sich die Seiten nicht mehr verschieben. Es wäre interessant zu sehen, wie das der User aufnimmt.

Wo möglich sollte man im Web das Aufteilen auf Seiten sowieso unterlassen. Schließlich ist der Traffic für das Laden von Text heute vernachlässigbar. Probleme ergeben sich natürlich, wenn viele Medien eingebettet sind. Ich mag darum z.B. nicht die Gravatars und Kommentarseiten.

Kommentare: 1 Einträge

Fraktale klicken

27.03.2009, 14:22
DHML fun

DHML fun

Letzte Woche bin ich über I could not stop auf dhteumeuleu gestolpert, wo es auch noch ein paar andere nette Javascript (DHTML) Spielereien zu sehen gibt. Mir waren diese roten und schwarzen Kacheln des Originals etwas zu langweilig, und so habe ich beschlossen (da die Demo ja auch unter einer CC-Lizenz steht) mal ein paar andere Bilder aus zu testen, die lustige Muster ausspucken.

Zuerst hatte ich vor etwas ähnliches wie das hier zu basteln, doch das stellte sich als nicht zu einfach heraus, da die schrägen Linien beim Unterteilen nicht richtig aneinander passen. Darum habe ich zunächst einen Rand und ein paar vertikale und horizontale Streben eingebaut, die sich dann immer weiter unterteilen Lassen.

» Demo

Dann wollte ich etwas Farbe ins Spiel bringen und habe noch die bisher weißen Zwischenfelder mit (sehr) bunten Farbvariationen gefüllt. Das ergibt dann ein paar nette, mehr oder weniger zufällig angeordnete Farbkacheln.

» Demo

Wenn sich das Ganze mit Farbe abspielt, kann man die inneren Verzweigungen eigentlich auch weg lassen. Das Ergebnis sind noch buntere Bilder. Leider hat man kaum noch Kontrolle über die Farbkomposition.

» Demo

Am Ende habe ich dann noch, nur um zu sehen, wie sich Schrägen machen, ein weiteres Derivat erstellt. Diesmal sind die Quadrate in zwei Dreiecke unterteilt und unterteilen sich bei Mausklick noch weiter. Im Endeffekt entsteht ein total zufälliger Mix aus Dreieckflächen, der ein wenig an Tangram erinnert.

» Demo

Die Muster sind dann so etwas wie teils zufällige, teils interaktiv gestaltete Fraktale.

Kommentare: 4 Einträge

Cyberguide 3

31.12.2008, 17:35
Cyberguide 3

Cyberguide 3

Da Bookmarks zu unübersichtlich sind und zu lange brauchen um gefunden zu werden und da diese ganzen Speed Dial und wie sie heißen zu wenig anzeigen und in jedem Browser konfiguriert werden wollen, benutze ich fast seit ich HTML kann eine Browser-Startseite mit allen wichtigen Links und Suchfunktionen. Diese geht nun in die 3. Runde und ist ab sofort verfügbar: Cyberguide 3.

Wen die ganze Geschichte interessiert, der lese hier nach. Sie hat folgende neue Festures:

  • regelmäßige, floatende Linkboxen
  • überarbeitete Links
  • auf diesen Host migriert, vielleicht wird sie irgendwann dynamisch.

Besonders empfehlenswert ist die Firefox-Erweiterung NewTabURL mit der man die Cyberguide automatisch in neuen Tabs öffnen kann.

Kommentare: keine

SVG - Flash killer

27.12.2008, 15:11

Inzwischen ist Flash eine recht weit verbreitete Technik, wenn es um Multimedia-Elemente und Animationen auf Webseiten geht. Eigentlich verwunderlich, da es proprietär ist, man ein Browser-Plugin benötigt und es für Suchmaschinen und Textbrowser kaum verwertbar ist. Es wird meist nicht einmal W3C-Konform in XHTML-Dokumente eingebunden.

Zum Glück gibt es eine Alternative: Scalable Vector Graphics (SVG). Diese Auszeichnungssprache für Vektorgraphiken ist nicht nur frei verfügbar, sondern auch vom W3C standardisiert. Alle Browser, die ich habe, unterstützen SVG nativ ohne Plugin, nur IE tanzt mal wieder aus der Reihe, kann aber mit einem Plugin aufgewertet werden.

Wenn man XHTML-Dokumente erstellen kann, muss man kaum etwas lernen um SVG-Inhalte zu Erstellen. Beides sind XML-Dateien und SVG benutzt auch CSS. Die SVG-Syntax ist zudem recht intuitiv. Nur bei Pfaden wird es etwas kompliziert (per Hand). Dafür gibt es mit Adobe Illustrator und Inkscape recht gute Editoren.

Die Animationen werden wahlweise im Javascript-ähnlichen ECMAScript oder in SMIL geschrieben. Dank des XML-Formats können SVG-Dateien auch leicht von PHP oder anderen Parsern erstellt und bearbeitet werden. In Verbindung mit AJAX lassen sich dann soger komplexe Web-Anwendungen basteln, und das mit Dynamischen Pfaden, Weichzeichnern, Transparenz, Masken, Klonen usw.

Der Grund SVG nicht einzusetzen ist die Browseruntertütztung: Es wird von Browsern meistens nicht sehr vollständig unterstützt.

Wie auch immer, noch ein paar Beispiele: Ich habe mal ein interaktives Spiel gebastelt, es existiert eine Demo eines Graphen dessen Dateien in Echtzeit vom Server geholt werden. Es gibt sogar ein jQuery Plugin für SVG. Es steckt also sehr viel Potential in SVG, man kann nur hoffen, dass es irgendwann auch so gut unterstützt wird wie HTML.

Kommentare: keine
[ Seite 1 2 ] Nächste Seite »
 
Χρόνογραφ
© 2008-2017 by Bernhard Häussner - Impressum - Login
Kurz-Link zur Homepage: http://1.co.de/