Wikipedia Redesign Desktopversion

Wikipedia testet neues Interfacedesign

Wikipedia Redesign Desktopversion

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)

Wikipedia Redesign Hamburger-Menü

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

Wikipedia Page Actions Menu

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)

Wikipedia Desktopversion  (aktuell)

Es folgen die Tablet- und Smartphone-Versionen des Prototyps.

Redesign Wikipedia (Tablet)

Wikipedia Redesign Tabletversion

Im Vergleich die aktuelle Umgebung (Tablet)

Wikipedia Tabletversion (aktuell)

Redesign Wikipedia (Smartphone)

Wikipedia Redesign Smartphoneversion

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.

17 Kommentare zu “Wikipedia testet neues Interfacedesign

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

  2. 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:
    http://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.

  3. Ich mag mittlerweile die mobile Seite auf dem Desktop. Die Zeilen sind kürzer und alles ist sehr viel aufgeräumter und moderner.

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

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

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

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

  8. @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!

  9. und ‘grafisches niveau’ kann man ja sicher vorgeben/automatisieren.

    Das halte ich für unrealistisch. Geometrische Grafiken sind zum Beispiel oft unmittelbar Output von Mathematik-Software. So etwas ist nun einmal nicht „hübsch“.

    alles chaotische kann man auch ‘einboxen’.

    Das ist ja der aktuelle Ansatz. Das Konzept auf Behance sieht deshalb so hübsch aus, weil es auf die „Einboxung“ verzichtet. Ohne die Hochglanzfotos u. a. von Mandela und Nelson als zentrale Elemente – sicherlich keines davon unter einer freien Lizenz stehend – wäre es bloß ein weiteres langweiliges 08/15-Grid-Design.

    Interessanter wäre der Entwurf, wenn er sich solchen Bildmaterials bedienen würde, das der Wikipedia tatsächlich zur Verfügung steht.

    • you wrote:
      „Interessanter wäre der Entwurf, wenn er sich solchen Bildmaterials bedienen würde, das der Wikipedia tatsächlich zur Verfügung steht.“

      ich bin deiner meinung. ich mag zwar ‚plakatives’… aber interessant wäre es wirklich zu sehen, wie ein mehr bildlastiges design mit normalen bildern funktionierten würde. würde das layout ‚hässlicher‘..? spannend…
      ich wünsche mir eigentlich im grunde nur etwas mehr bildlastigkeit – von mir aus nur im kopfbereich. ein nützlicher anstoss von wikipedia wäre es, kreative und rechteinhaber zu BITTEN, den fundus gezielt zu füllen. geschützt wären die werke ja immer noch dabei. und es wäre fast wie ein zusätzliches instrument für die rechteinhaber, bei den leuten ‚anzukommen‘. das problem wäre dann eventuell, dass zuviele angebote eintrudeln und man polls starten müsste :)
      geht der gedanke zu weit?

      • ein nützlicher anstoss von wikipedia wäre es, kreative und rechteinhaber zu BITTEN, den fundus gezielt zu füllen. geschützt wären die werke ja immer noch dabei.

        Eine sehr attraktive Idee, der jedoch der Freiheitsgedanke der Wikipedia entgegenstehen würde:

        Wikipedia distributes content throughout the world with no restrictions on how people use it. Legally, we could use any copyrighted material for ourselves that is either licensed to us by the owner, or that fits the definition of „fair use“ under US copyright law. However, we favor content that everyone can use, not just Wikipedia. We want them to be free to use, redistribute, or modify the content, for any purpose, without significant legal restrictions, particularly those of copyright.

        To honor its mission, Wikipedia accepts incoming copyright licenses only if they meet Wikipedia’s definition of „free“ use. This is a higher standard than we would need just for our own use. But our ability to use a work does not guarantee that others may use it. We reject licenses that limit use exclusively to Wikipedia or for non-commercial purposes. Commercial use is a complex issue that goes well beyond a company’s for-profit status, another reason to be careful. In fact, we reject any licenses with significant limitations. That is not free enough.

        (Quelle)

  10. Zum „Dual-Use“, also Für Leser & Bearbeiter:
    Durch das unmittelbare Anbieten von Diskussionen und Bearbeitung der Artikel werden Nur-Leser darauf hingewiesen, dass ebendieses einfach, erwünscht und normal ist und zum Mitmachen animiert, quasi ein unaufdringliches, „niederschwelliges“ Angebot, und das halte ich für wichtig.

    -> david bezüglich der Zeilenbreite
    Ah, ja, stimmt schon.
    wobei dein Lösungsvorschlag, Fenster verkleinern wohl, nur für die ist, die sich bewusst sind, man könne Fenster auch verkleinern und dann wäre Text angenehmer zu lesen.

    • In der jetzigen Form, zumal in der Desktop-Umgebung, ist das Vorhalten der Editierfunktionen alles andere als unaufdringlich, wie ich finde. Es ist so prominent, dass es vom eigentlichen Inhalt und vom Lesen abhält.

      Stichwort Niedrigschwelligkeit: Denke, dass es in diesem Zusammenhang weniger eine Frage der grundsätzlichen Accessibility ist, sondern vielmehr – das zeigt ja die aktuelle Umgebung –, wie prominent man die Funktionalitäten für Editoren abbilden muss. Die meisten Editoren dürften mit dem System vertraut sein. Die brauchen diesen, sorry, „Icon-Schmarn“ nicht. In eckige Klammern gesetzte Textlinks reichen da vollkommen aus. Ich verstehe das „Action-Menu“ so, dass man bei Wikipedia nachdrücklich neue Editoren ansprechen möchte. Tatsächlich, wie Stefan es schreibt, um Leser (noch stärker) zum Mitmachen zu animieren.

      • Wen das Vorhalten der Editierfunktion vom Lesen des Artikels abhält, dem ist mit einem Redesign nicht geholfen – da müsste man schon mit Ritalin operieren. :)

        In der Tat unglücklich ist die linke Navigationsleiste: sehr lang; der Sinn einiger Items wird sich wohl nur erfahrenen Wikipedianern erschließen. Damit lädt sie eher zum Ignorieren denn zum Stöbern ein.

        Zeitweise waren die einzelnen Abschnitte auch individuell ausblendbar. Schade, dass man diese Anpassung wieder zurückgenommen hat. Hintergrund ist wohl, dass man die Besucher animieren will, sich näher über die Wikipedia und die Möglichkeiten des Mitmachens zu informieren. Wie oben beschrieben, dürfte die Mammut-Navigation hier kontraproduktiv sein.

        Gestaltung muss die ideellen Zielsetzungen respektieren. Ein Redesign, dass die Editierfunktion hinter einem Icon oder einem Menü versteckt, würde sich nie durchsetzen – und das ist gut so.

  11. @david:

    Zeitweise waren die einzelnen Abschnitte auch individuell ausblendbar. Schade, dass man diese Anpassung wieder zurückgenommen hat. Hintergrund ist wohl, dass man die Besucher animieren will, sich näher über die Wikipedia und die Möglichkeiten des Mitmachens zu informieren.

    Nein, der einzige Grund für die Entfernung war die schlechte Performance des Codes, der diese Klappmenüs realisiert hat. Ich fand die eingeklappte Variante auch besser, als Autor benutze ich aber noch den früheren Skin vor dem jetzigen, der ist mMn am ehesten auf die Autoren zugeschnitten. Natürlich spielt da auch die Gewohnheit eine Rolle.

    Übrigens wird dieser Winter-Skin in einer ähnlichen Form wie jetzt wahrscheinlich nie eingesetzt werden. Es wird sich Grundlegendes in der Code-Struktur der Wikipedia-Seite ändern, sodass alle von den Autoren gebastelten „Add-Ins“ (jeder Benutzer kann persönliches JavaScript und CSS einbinden und damit die Seite anpassen) die Hufe hochreißen werden. Dazu natürlich die Umgewöhnung, die weiteren Mauswege und die JS-Lastigkeit. Da wird extremer Widerstand aus der Community kommen. Den gab es schon bei der Typographie-Änderung, bei Zwangsaktivierung des Medienbetrachters (Popup bei Klick auf Bild) und eines Visuellen Editors mit Macken im Betastadium für Leser. Demnächst soll noch das Diskussionssystem hin zu einer forenartigen Struktur umgekrempelt werden.

    Bei deim Typographie-Update wurde auch schon mal kurzzeitig die Zeilenbreite halbiert, mit dem Effekt, dass die ganzen Bilder, Tabellen usw. nun noch weniger Platz auf dem halben Bildschirm hatten und rechts einfach ein dicker weißer Rand war. Wenn also die Zeilenbreite sinnvoll reduziert werden soll, müsste man Elemente wie Bilder oder Tabellen an den Rand bekommen, was aber gar nicht so einfach ist, da man MediaWiki-Tabellen nahezu beliebig mit CSS gestalten kann und so ein riesiger Wildwuchs entstanden ist, den man für so ein Redesign erst einmal sortieren müsste – da werden aber die Autoren der Artikel protestieren, weil ihre Tabellen einfach auf das Schema X vereinfacht werden, Vereinheitlichungswahn usw.

    Ich gehe also davon aus, dass die Grundstruktur des bisherigen Wikipedia-Designs noch weiter bestehen wird, denn die hat sich eigentlich seit der Gründung nicht verändert, man hat immer nur die Fassade neu gestrichen. Das Haus umzubauen, obwohl es die Bewohner eigentlich so mögen, wie es ist, werden sie nicht zulassen.

Kommentar verfassen

Folgende HTML-Elemente können verwendet werden: <b> <i> <img src="meineurl"> <a> <blockquote>