Thinking About Web 2.0 And Beyond

Web 2.0 ist – seit geraumer Zeit – in aller Munde. Es stellt an sich eine Redefinition des Verhaltens und der Methoden, wie Menschen miteinander im Internet kommunizieren und interagieren, dar. Services werden anders genutzt als noch bei Web 1.0, „Social Networking“ steht im Vordergrund.

Um gute User Interfaces designen zu können, muss man auch über eine fundierte Kenntnis der zugrunde liegenden Technik verfügen, spielen doch „Oberfläche“ und „Gerüst“ mehr als ineinander. Die Trennung dieser Bereiche verschwimmt zunehmend, klare Aufgabenverteilungen bei Beteiligten im Designprozess werden immer schwieriger zu definieren.

Der Kreativität sind keine Grenzen gesetzt, gleichzeitig geht der Trend allerdings immer mehr zu ästhetischen, einfachen Interfaces. So auch z.b bei Microsoft, einem Unternehmen, das nicht unbedingt für intuitive Interfaces stand: Windows Vista hat das Wort „Einfach“ erstmals im Produkt-Claim verankert und 2007 soll es wieder mal eine abgespecktere Office-Version geben. Apple ist beim Produktdesign natürlich immer noch das Maß aller Dinge. iLife Blogs haben eine ganz eigene Ästhetik und Oberflächen von Applikationen wie iCal, iTunes und iPhoto sind Produkte einer neueren Generation von guten User Interface Designern.

Das Web allerdings wird immer mehr von Usern selbst gestaltet – z.B. Wikis und Weblogs. Im folgenden nun ein gutes Video, welches den Web 2.0 Sachverhalt recht gut veranschaulicht.

Web 2.0 Links:

suprglu
del.icio.us
flickr
technorati
wikipedia
blogging

Sortierfunktion im Web

Sortierfunktion bei tuwis++

Seit ca. Beginn des WS 2006/2007 „erfreut“ uns tuwis++, das zentrale Informationsmedium für Studenten auf der TU Wien mit einem neuen Feature:
Die abonnierten LVA’s können nun endlich nach Belieben angeordnet werden, was vor allem bei zwei verschiedenen Studienrichtungen die Übersicht enorm erleichtert.

Nur: Jedes Mal, wenn ich die LVA-Anordnung ändere, muss die Seite neu laden – ein Graus, wenn ich die oberste LVA an die unterste Stelle befördern will.

Sortierfunktion bei tuwis

Sortierfunktion bei myspace.com

Bei der online-Plattform myspace.com (Hierfür gibts auf diesem Blog schon einen eigenen Design-Life Eintrag) verhält es sich ähnlich wie bei tuwis++: Nach jedem „Up Up“ oder „Down“ befehl (hiermit verwalte ich die Reihenfolge der Songs auf meinem Profil) kommt die Seite um einen Refresh nicht herum.

Sortierfunktion bei mysapce

Geht das nicht besser?

Das Sortieren in diesen beiden Beispiel-Web-Applikationen dauert so seine Zeit, sie stehen allerdings sinnbildlich für eine ganze Reihe weiterer Implementierungen dieser Funktion auf anderen Seiten. Allerdings lassen sich Internetanwendungen User Interface – technisch mit gängigen, weit verbreiteten Technologien wie PHP (in Verbindung mit CSS) oder Flash (wem das nicht gefällt, sei Java Script mit script.acolo.us Library ans Herz gelegt) viel besser designen als in reinen HTML / CSS Tagen.

Es wäre doch viel komfortabler, nicht nach jedem Up / Down – Befehl neu zu laden, sondern die Änderungen erst nach erfolgtem Sortiervorgang (z.B. per Drag and Drop) zu übernehmen.

Apple Produktbestellung

Auf Apples Website kann man sich einen eigens konfigurierten Rechner zusammenstellen lassen – ganz nach seinen persönlichen Vorstellungen. An sich ist das nichts besonderes, zumal es eine Reihe anderer (kleinerer) Anbieter gibt, die ihren Kunden ein ähnliches Service bieten.

Im speziellen ist es allerdings die dynamische Aufbereitung dieses Bestellvorgangs. Apple hat hier kein Dropdown-Menu für die Komponentenauswahl herangezogen (würde bei wenigen Optionen auch keinen Sinn machen), sondern Radiobuttons. Ein Bild der jeweiligen Komponente links neben dem Text ermöglicht es den Usern, sehr schnell zu gewissen Produkten zu scrollen, ohne sich durch ein Text-Wirrwarr mit dubiosen Festplatten-Seriennummern schlagen zu müssen.

Preisaddition und -subtraktion

Besonders gut hat mir die (einfache) Implementierung des Preis – Additions- und Subtraktionsvorganges gefallen. Wähle ich Festplatte A mit 120 GB, steigt mein Preis natürlich an. Gleichzeitig wird mir jedoch angezeigt, um wieviel billiger ich Festplatte B erstehen könnte, wieviel Geld ich als Käufer also spare.

Sobald ich eine Option anwähle, werden die anderen daran angepasst.
Dieses relative Referenzmodell (es wird bei jedem Produkt nur angegeben, wieviel mehr oder weniger es kostet) erweist sich in dieser speziellen Situation als sehr praktisch.

Myspace.com

Myspace.com ist mit derzeit mehr als 130 Mio. Usern zur größten Online-Blog-Community der Welt avanciert – Tendenz: steigend.

Index von Myspace

Das ist die Startseite, den man zu sehen bekommt, wenn man Myspace.com aufruft. Keine auf Anhieb erkennbare Struktur, nur ein paar Table-förmige Einträge („Cool New People“, „Cool New Videos“) findet man hier vor. Viel zu viele Schriftarten und -größen bestimmen das Schriftbild; langweilige Farben und Unübersichtlichkeit lassen Zweifel am ästhetischen Erscheinungsbild der Seite aufkommen.

Warum dann so erfolgreich?

Sofort drängt sich die Frage auf: „Wie kann eine Seite, die so aussieht, täglich soviele neue User anziehenen?“. Myspace ist eine Online Community, die im Gegensatz zu anderen Communities viel mehr auf das Networking-Prinzip setzt. Adde ich eine Person zu meiner Friends List, erscheine ich gleich dort in seiner/ihrer Buddy-List. Ich wiederum werde nun von anderen Usern gefunden, geaddet, usw.

„______ is in your extended Network“ – Der Myspace – Slogan

So ist man in Windeseile in des anderen „extended network“. Myspace hat somit einen sehr hohen emotionalen Wert bei den Usern, man ist schnell unter Menschen.

Gerade für Musiker oder Musik-Konsumenten birgt die Sub-Plattform Myspace-Music ungeahntes Potenzial. Nahezu jeder namhafte Interpret, engagierter Newcomer und Vertreter der Undergroundszene ist vertreten. Songs können gestreamt und online gestellt werden, schnell ist der Kontakt mit potenziellen Fans hergestellt.

Funktionalität

Sobald man registrierter Benutzer bei Myspace ist, steht man nun vor der Frage, wie man sein Profil nun an seine eigenen Vorstellungen anpassen kann, ist doch das Standard-Layout (blau/weiss) nicht jedermanns Sache.

Ganz im Gegensatz zu anderen Blog-Communities, auf denen man nur aus einer bestimmten Anzahl aus Funktionen / Layouts wählen kann, wird einem bei Myspace vollkommen freie Hand gelassen.

Das hat natürlich Vorteile. So kann man das Aussehen ebendieser persönlichen Seite (mit viel Ausdauer und Kenntnis der Materie) ohne Einschränkung an seine eigenen Wünsche anpassen und trotzdem vom gesamten Umfang der Community profitieren.

Das zentrale Design- und Usability Defizit von Myspace ist jedoch, wie man sein Profil editiert. Mittels HTML-Code und CSS nämlich, die man als Textfetzen an einer völlig unintuitiv gewählten Stelle in den Profilsettings einfügt (unter „Edit Profile > About Me > Bio“).

Das völlig veraltete Layout von Myspace basiert noch auf Tabellen, die in weiteren Tabellen verschachtelt sind. Diese Table-tags beschreibt man als User nun per CSS. Allerdings muss man hierfür erst lange im Internet recherchieren, welche Elemente an welcher Stelle im Layout stehen (Namen wie „.whitetext12, .lightbluetext8, .orangetext15″ sprechen NICHT für sich selbst), wenn man nicht eines der zahlreichen Chaos-Code-Layout Tools verwenden will.

Eingefügtes HTML und CSS in Myspace

Wer schon einmal HTML Code editiert hat, dem stößt obiges Bild sauer auf. Fernab jeglicher Übersicht schlägt man sich im Code-Wirrwarr herum, man kann die Tags ja nicht umbenennen.

Menschen, die mit HTML/CSS und Design generell nichts am Hut haben, können dem Browsing-Spass aufgrund der uneingeschränkten Möglichkeit Code-Schnipsel einzubauen ein jähes Ende bereiten. So ist es nicht weiter verwunderlich, das aufgrund mangelnder Kompetenz solche „Designs“ herauskommen:

Myspace-Alltag: Viel mehr schlechte als gute Layouts

Lösungsansätze

Ein simpler Lösungsansatz wäre eine Umbennung der Tags in sprechendere Namen wie z.B: „Contact_Table“ für die Tabelle, die die Kontakt-Buttons enthält. Ein Myspace-interner HTML-Editor, bei dem vor allem Anfänger nicht viel falsch machen können, wäre ebenso eine Möglichkeit.

Über kurz oder lang muss sich Myspace.com vielmehr an HTML und CSS Standards der W3 orientieren. Tabellen sind im Webdesign schon lange nicht mehr die optimale Lösung zum Erstellen von Layouts, viel besser wäre es, vermehrt auf DIVs und CSS zu setzen. Natürlich ist man, wenn man sich an Standards hält, viel eingeschränkter, als wenn man dies nicht tun würde. Im Endeffekt ist ein strukturierteres, übersichtlichers, leicher und logischer zu bedienendes Myspace im Sinne aller Nutzer/innen.

Link:
Myspace

Youtube: Ineligible

Fehlermeldungen sind dann schlimm, wenn man als User nachher noch ratloser als vorher ist. So auch bei YouTube.com. Nach dem Ausfüllen des Registrierungsformulars bot sich mir folgende Fehlermeldung:

„Sorry. Based on the information you have submitted to us, you are ineligible to register for YouTube.com“

Nicht einmal ein Error-Template wird angezeigt, stattdessen ein weißer Screen mit ebendiesem Satz. Youtube entschuldigt sich zwar höflich ( „Sorry.“ ), hat die Registrierungsdaten anscheinend auch erhalten ( „Based on the information you have submitted to us …“ ) und das Wort „ineligible“ bedeutet – laut Wörterbuch – folgendes:

ineligible, adj.

unqualified, unsuitable, unacceptable, undesirable, inappropriate, unworthy; ruled out, disqualified, disentitled

Selbst nach mehrmaligem Wiederholen des Registrierungsvorgangs bot sich mir immer wieder dasselbe Schauspiel, ich sei laut der ärgerlichen – und sehr direkten – Fehlermeldung „unqualifiziert“, „unpassend“, „inakzeptabel“, ja sogar „unwert“ mich bei Youtube zu registrieren.

Im Idealfall besucht man als User eine andere, ebenso große Video-Online-Community. In diesem Fall habe ich als User einen anderen Browser geöffnet und die Registrierung wiederholt. Mit Erfolg.

Aus Mangel an wirklich guten Alternativen (kann mich mit Google Video nicht anfreunden) ist man oft an diese eine Applikation angewiesen. Und steht dann in speziellen Fällen mit einem weißen Screen, ohne Layout und einer „unqualifiziert“, „unpassend“, „inakzeptabel“, ja sogar „unwert“ formulierten Fehlermeldung da.

Digital Web Magazine

Das Digital Web Magazine ist ein Non-Profit-Web-Magazin, das sich an professionelle Webdesigner und -entwickler richtet.

Für das Magazin schreiben hauptsächlich Webautoren und Designer, deren Artikel dann auf der Homepage veröffentlich werden.

Die Macher des DWM haben auf ein einfaches, übersichtliches Layout gesetzt, das das Lesen der Artikel erleichtert. Wenig Werbung, dezente Farben und klare Linien bestimmen das Erscheinungsbild.

Was mir bei dieser Internetseite besonders positiv aufgefallen ist, ist die Sortierfunktion, durch die sämtliche Artikel aus dem Archiv nach gewissen Kriterien geordnet werden. Weder ein dropdown-menu noch eine excelhafte Zeilen/Spalten-Aufteilung finden sich hier.

Die Suchkriterien (Artikel nach „topic“, „date“, „author“, „title“, „type“ sortieren) wurden als Menüpunkte direkt in die Navigation eingebettet. So kann man die Texte besonders einfach auffinden, ohne vorher eine Suchmaske zu Gesicht zu bekommen.
Im Hauptfenster werden die Links zu den Artikeln dann nicht einfach nacheinander angeordnet, sondern zusätzlich gleich gruppiert und mit Kategorie-Bezeichnungen versehen. Das steigert die Effizienz bei der Artikelrecherche.

Video – „Artikel Sortieren“