Nachdem Wikipedia kürzlich ein typographisches Facelift erhalten hatte, präsentiert ein internes Projektteam nun einen Prototypen, der einen Ausblick auf ein möglicherweise umfassenderes Redesign erlaubt.
Auf mediawiki.org/wiki/Winter sind Nutzer dazu aufgerufen, mit dem „Winter Prototype“, wie es heißt, zu spielen. Ich habe mir die neue Umgebung einmal näher angeschaut und getestet. Zunächst ist hierzu zu sagen, dass der Begriff „Prototyp“ in diesem Fall den Entwicklungsstand treffend beschreibt. Zu hoch sollte man also die Erwartungen an das neue Interface nicht schrauben. Weder ist der Prototyp voll funktionstüchtig, noch, das zeigen auch die nachfolgenden Screens, wird die Testseite auf mobilen Endgeräten zufriedenstellend ausgegeben.
Es gibt eine Vielzahl von Wikipedia-Initiativentwürfen externer Designer, die alle auf das Potenzial verweisen, das Wikipedia in Bezug auf das eigene Webdesign bietet. Der wohl bekannteste Entwurf dürfte wikipediaredefined.com sein. Nicht, dass sich Wikipedia nicht seit der Gründung im Jahr 2001 kontinuierlich verändern und auch verbessern würde, eine zentrale Entwicklung bleibt bis heute allerdings unberücksichtigt: Responsive Design.
Die Unterstützung von Responsivität ist eine der treibenden Gründe für ein Redesign. Dank entsprechender Versionen werden derzeit Wikipedia-Seiten auch ohne Responsive Design auf Tablets und Smartphones endgeräteoptimiert ausgegeben. Offenbar plant man bei Wikipedia aber die Verschlankung auf nur eine, eben responsive Lösung. Darüber hinaus möchte man die unterschiedlichen Designlinien innerhalb der Interface-Versionen harmonisieren beziehungsweise, wie es auf der Projektseite heißt, synchronisieren.
So sieht das neue Wikipedia aus (Desktop)
Die wichtigste funktionelle Änderung ist die Integration einer am oberen Fensterrand fest sitzenden Menüleiste, in der zentrale Funktionen, etwa auch die Suche, permanent sichtbar sind – auch dies ein von der Wikipedia-Projektgruppe ausgelobtes Ziel. Rechts neben dem Wikipedia-Logo befindet sich ein Hamburger-Icon, das den Zugang zu ein entsprechenden Menü ermöglicht. Und hier kommt mein erster Kritikpunkt.
Meines Erachtens tut man den Nutzern keinen Gefallen, wesentliche Inhalte, wie es es die Inhaltsangabe zum Artikel nun einmal ist, in ein solches Menü auszulagern respektive sie dort zu verstecken. Ein Hamburger-Icon ist zwar ein visueller Hinweis darauf, dass weiterer Inhalt vorgehalten wird, allerdings vermag ein solch dezentes Symbol nicht erklären, um welche Art von Inhalt es sich handelt. Sind es seitenzugehörige Inhalte, wie hier bei Wikipedia, oder sind es übergeordnete Inhalte, wie in der Regel üblich? Auch deshalb ist ein Hamburger-Icon nicht in der Art und Weise selbsterklärend wie etwa die Lupe als Kennzeichnung für die Suche oder ein Fragezeichen als Kennzeichnung für die Hilfe. Auch erfordert ein Zugriff über ein solches Dropdown-Menü auf untere Bereiche der Seite einen Klick mehr, was sich in Zahlenwerte bemessen schwerlich als Verbesserung verkaufen lässt. Last but not least könnte die unkonventionelle Form des Icons, das an ein E erinnert, weniger versierte Nutzer zusätzlich überfordern. In der jetzigen Form ist das Hamburger-Menü im Wikipedia-Prototyp unausgereift.
Weitere Verschiebungen/Änderungen im Content: Auffällig ist die Verlagerung der Sprachversionen. Aktuell befinden sich diese in der linken Spalte (siehe Abb. unten). Im Prototyp sind die Sprachen in der rechten Spalte ganz zu oberst angeordnet. Ich habe da meine Zweifel, ob diese prominente Position gerechtfertigt ist; sie wäre es meiner Meinung nach nur dann, wenn die Mehrheit der Nutzer regelmäßig zwischen den Sprachversionen wechseln würde. Das mache ich persönlich in der Tat recht häufig. Wie sieht es bei den dt-Lesern aus?
Action-Menü im Content
Auf dem Desktop erscheinen innerhalb des Action-Menüs bei einer Monitorauflösung von mehr als 1230 Pixel in der Breite zusätzlich zu den Icons Funktionsbegriffe z.B. „Read“ und „Edit“ (siehe Abb. oben), wodurch die Menüzeile stark in den Vordergrund rückt. Zu stark? Ich finde schon, weil sie nun zu sehr vom eigentlichen Inhalt ablenkt.
Im Vergleich die aktuelle Umgebung (Desktop)
Es folgen die Tablet- und Smartphone-Versionen des Prototyps.
Redesign Wikipedia (Tablet)
Im Vergleich die aktuelle Umgebung (Tablet)
Redesign Wikipedia (Smartphone)
Nicht zu übersehen ist, dass das Interface noch nicht auf die Größe des Smartphone-Bildschirms optimiert wurde. Das Vorhalten der rechten Spalte (Abb. rechte Seite) ist auf Smartphones unvorteilhaft, weil auf diese Weise Texte unnötig klein dargestellt werden. Zudem überlagern sich im Prototyp noch verschiedene Elemente, wie etwa der Text im Content und die oberen Menüleiste.
Eine Weile wird es wohl noch dauern, bis wir ein Rollout der neuen responsiven Umgebung sehen werden. Anders ist das neue Interface, aber ist es besser? Wie sagte Jonathan Ive so schön: „… it’s very easy to be different, but very difficult to be better.“ Wikipedia wäre nicht Wikipedia, wenn nicht auch in diesem Fall gemeinschaftlich um Verbesserungen gerungen würde.
Zeilen sind immer noch viel zu lang.
kein Mensch liest gern über 120 Anschläge.
das war immer schon das größte Defizit, und mehr Durchschuss wird dem auch nicht helfen…
alles andere sind nur “moderne” Kinkerlitzchen, die aber im vergleich relativ egal sind.
die Wahl einer Serifenlosen für den Fließtext ist nebenher meiner Meinung nach auch fragwürdig (wenn schon lange Zeile, dann bitte bessere Zeilenbildung) …
Wikipedia muss in erster Linie funktionieren und die Hauptfunktion ist nun mal einen Text lesbar zu machen. So gesehen: Durchgefallen.
Wahrscheinlich bin ich überkritisch, aber ich finde so gut wie alle Änderungen negativ. Die Inhaltsangabe gehört für mich in den Artikel, ohne das man erst etwas anklicken muss. Das “Action Menü” finde ich aufdringlich und nicht hilfreich, wer hat schon jemals die “Discussions” zu einem Artikel lesen wollen? Dort stehen üblicherweise uralte “Diskussionen” über völlig belanglose Themen wie Formatierungen und Co. Hier mal am Beispiel einer Metal Band, was man dort normalerweise zu erwarten hat:
https://de.wikipedia.org/wiki/Diskussion:Machine_Head
Genauso überflüssig die Versionsgeschichte (“Last updated”), dafür versteckt sich die Druckversion hinter einem weiteren Klick und funktioniert noch nicht einmal?! Hat man im Action Menü die am meisten genutzten Funktionen platziert oder einfach irgendwelche? Die prominente Sprachversion macht für mich auch wenig Sinn, ich nutze das nur wenn in der deutschen Wikipedia die Exklusionisten mal wieder die Hälfte weg gelassen haben und wechsle zur englischen Version.
Ich mag mittlerweile die mobile Seite auf dem Desktop. Die Zeilen sind kürzer und alles ist sehr viel aufgeräumter und moderner.
Auf dem Desktop (Firefox) ist der Prototyp responsive, allerdings nicht auf mobilen Geräten.
Ja, wird schon werden. Habe dort mal meinen Kommentar hinterlegt:
” I suggest to use margins in percentage, not fix, so you get more air, esp. on bigger screens. And don’t use centered tags in the sidebar. I mean don’t use it anywhere.
Provide larger vertical top-margins in the sidebar for headlines, so you get your structure more visible.
And you should keep the text together with a max-width of the main-div, so you get no more than about 75 letters in one line. This is for readability reasons.
Don’ be afraid of “wasting” space. Let it breathe!
Thx for reading.”
-> Christopher:
genau, einfach max-width definieren.
ansonsten:
Zentrierte Tags sind unleserlich.
Ränder dürfen ruhig mitwachsen, bei breiterem Fenster.
Mal sehen, wird schon werden.
auch wenn ich jetzt (eventuell) ‘schimpfe’ kassiere – SEHEN und STAUNEN!
(SO hätte das werden müssen…):
https://www.behance.net/gallery/16219877/Wikipedia-Redesign-Concept
Das Problem ist, dass es zwei unterschiedliche Nutzungsanforderungen gibt. Der “Nur”-Leser braucht die ganzen Links zu Diskussionen, Versionsgeschichte etc. nicht wirklich. Er kann weder mit den Diskutanten noch mit den Editoren wirklich was anfangen.
Andererseits sind gerade diese Seiten für die Autoren äußerst wichtig. Das Design muss hier den Spagat schaffen, dass für einen Neuautoren im “Autoren-Modus” die Website nicht wesentlich anders aussieht als wenn er nicht im “Autoren-Modus” ist.
@Christopher: Ich bin strikt gegen eine erzwungene Verkürzung der Zeilenlänge und würde sie als der Usability schwer abträglich bewerten.
Wikipedia ist nämlich ein Nachschlagewerk, kein Roman. Viele Artikel sind mittlerweile ausgesprochen lang. Meist braucht der User aus dieser Informationsfülle nur einen Brotkrumen. Damit ist die Navigierbarkeit der einzelnen Seite von höchster Wichtigkeit. Ich muss mir schnell einen Überblick über den Artikel verschaffen können. Ein Inhaltsverzeichnis hilft hier nur bedingt. Intuitiver und schneller ist es, zu scrollen und nach Information Ausschau zu halten, die zu dem gesuchten Stichwort passt: sei es ein passendes Foto, eine Tabelle oder schlicht die sichtbare Häufung eines bestimmten Stichwortes. (Hier sind prinzipiell dieselben Erwägungen von Belang wie die von Krug in “Don’t Make Me Think”, besonders in Chapter 2, für ganze Websites beschriebenen.)
Die jüngsten Webdesign-Trends – übergroße Schrift, sehr kurze Zeilen, viel ungenutzter Weißraum – mögen bei Texten, die man ausschließlich linear von vorn bis hinten liest, funktionieren. (Das trifft oft nicht einmal auf Blog- und Nachrichtenartikel zu!)
Bei anderen Informationsformen machen sie ab einer gewissen Länge eine sinnvolle Navigation völlig unmöglich, weil das Scrollen zu einem endlosen Akt wird. Einen Wikipedia-Artikel lese ich im seltensten Fall linear. Oft lese ich drei verschiedene Abschnitte parallel: Etwa springe ich von der ausführlichen Beschreibung eines politischen Konflikts kurz wieder hoch zur groben historischen Einordnung, um dann unten ins Quellenverzeichnis zu schauen und schließlich wieder mit der Lektüre der ausführlichen Beschreibung fortzufahren. Usability-Optimierung ist eine komplexe Angelegenheit; Schnellschüsse, die gern mit “kein Mensch” beginnen, sind hier oft kontraproduktiv.
Wenn ein Artikel so bedeutend ist, dass man ihn von A bis Z lesen möchte, zieht man das Browserfenster schmal. So einfach ist das.
Ich meine mich übrigens an eine Lesbarkeits-Studie zu erinnern, die zu dem Ergebnis kam, dass die Zeilenlänge keinen so starken objektiv messbaren Einfluss auf die Lesbarkeit besitzt wie weithin angenommen und dass in erster Linie das Lesevergnügen beeinflusst wird. Ein Roman sollte also sicher keine Zeilen mit 120 Anschlägen aufweisen. Bei Sachtexten stehen aber andere Erfordernisse als Lesevergnügen im Vordergrund. (Hierzu sehr interessant war, falls ich mich recht erinnere, die “Lesetypografie” von Willberg und Forssman.)
Die Wahl einer Serifenlosen halte ich übrigens auf dem Desktop für richtig und notwendig, weil hier (a) niedrig auflösende Bildschirme und (b) Windows dominieren. Das Schriftrendering von Windows ist leider auch mit ClearType sehr schwach. Die beste Lesbarkeit gewährleistet hier eine auf die Bildschirmdarstellung hin optimierte Arial.
Für mich persönlich funktioniert die Wikipedia in ihrer aktuellen Form exzellent. Ich freue mich auch, dass ich auf Desktop und Smartphone zwei sehr unterschiedliche Darstellungsformen habe, die auf das jeweilige Medium hin angepasst sind: hohe Informationsdichte und leicht zugängliche Funktionalität auf dem Desktop; Minimalismus auf dem Smartphone.
@t2dM: Ein wunderschön anzusehendes Konzept, das mit der Realität nicht viel zu tun hat.
Vergleiche doch mal das Bildmaterial in dem Entwurf mit dem Bildmaterial eines durchschnittlichen Wikipedia-Artikels. Siehst du hier irgendein fullscreen-taugliches Foto? Hier eine startseitentaugliche Grafik?
So ein Konzept würde funktionieren, wenn eine riesige Schar von Grafikern und Fotografen auf Wikipedia unterwegs wäre, die nichts anderes zu tun hätte, als Infografiken aufzuhübschen und glanzvolle Fotos von Politikern, Stars und Sternchen zu schießen und kostenfrei hochzuladen. (Letzteres dürfte übrigens zu einem Proteststurm von Fotografen führen, die mit glanzvollen Fotos ihre Familie ernähren.)
Der Effekt wäre übrigens, dass sich angesichts des hohen grafischen Niveaus niemand mehr trauen würde, eigenes Bild- oder Grafikmaterial von hohem Informationswert hochzuladen. Denn je “cleaner” das Design ist, desto unangenehmer fällt “nicht-cleane” Grafik aus dem Rahmen.
Wikipedia ist eine Mitmach-Enzyklopädie. Wer das nicht berücksichtigt, dessen Redesign-Entwurf ist schon durchgefallen.
@david: danke dir – alles sicher korrekt. ich konnte mir aber nicht helfen – für mich zählt nicht immer ‘form follows function’, ‘bin da zu sehr augenmensch… und ‘grafisches niveau’ kann man ja sicher vorgeben/automatisieren. alles chaotische kann man auch ‘einboxen’. ein (sagen wir) cleaner ‘rahmen’ relativiert etwaige abgebildete unordnung(en) recht gut.
fullscreen-tauglichkeit und ‘ansprechendes’ bei geposteten pics sind schon zu ‘suchen’ – auch da hast du sehr recht. aber der anspruch wächst auch mit der anforderung, meine ich. und sicher sind 99% der mitmacher weder fotografen noch designer.
ich möchte jedoch animiert weden zum mitmachen – es muss mir gefallen, wie mein output (wissensgehalt mal ausser acht gelassen) zu einem sehenswerten/lesenswerten input wird bei wikipedia.
information KANN schön sein!