Wikipedia: Neues UX Design, entwickelt mit der Community

Mit mehr als 16 Milliarden täglichen Pageviews ist die freie Enzyklopädie Wikipedia eine der meistbesuchten Seiten im Netz – aber bis 2023 ließ ihr UX Design zu wünschen übrig. Die letzte offizielle Version war über zehn Jahre alt, und in der Zwischen­zeit hatten einige Nutzer:innen Hand angelegt: Selbst programmierte Skins und Plug-ins helfen dabei, UX-Fehler zu beheben oder die Website nach eigenen Vorstellungen zu gestalten – wer mag, kann die Inhalte sogar mit Blümchen versehen.

Schuld an der Designflaute sind allerdings nicht die Designerinnen und Designer der Wikimedia Foundation, sondern die filigranen Prozesse, die hinter einem UX-Redesign der Seite stecken. »Wir brauchten ein UX Design, das in über dreihundert Sprachen funktioniert, Accessibility für unterschiedli­che Usergruppen gewährleistet und dennoch den Wiki­pedia-Kultcharakter beibehält«, erklärt Olga Vasileva, die als Produktmanagerin bei der Wikimedia Founda­tion arbeitet. Sie koordinierte das dreijährige Unterfan­gen, Wikipedia in die Gegenwart zu holen. Dabei musste sie nicht nur zwischen dem fest angestellten Wiki­me­dia-Designteam und den zahlreichen Freelan­cer:in­nen vermitteln und zugleich die Erwartungen von mehr als 295 000 Editors auf der ganzen Welt managen, sondern stellte sich auch die zentrale Frage: Wie gestaltet man eine User Experience für das gesamte Internet?

PROJEKT UX-Redesign für Wikipedia
AUFTRAGGEBER Wikimedia Foundation, San Francisco
DESIGN Internes Wikimedia-Designteam sowie 300 Freiwillige aus der Wikipedia-Community
ZEITRAUM Januar 2020 bis Januar 2023

Designprozess: 300 Stimmen vereinen

Zu Beginn des Projekts fand sich ein dreizehnköpfiges Kernteam aus den Bereichen UX Design, Projekt- und Communitymanagement sowie Webentwicklung zusammen. Die Wikimedia-Fest­an­ge­stellten sitzen weltweit verstreut – ihre gemeinsame Sprache ist Englisch. Ähnlich global aufgestellt ist auch die Wikipedia-Edi­tor-­Com­munity, deren eingeloggte Userinnen und User Beiträge schrei­ben und korrigieren und im Austausch mit der Foundation stehen. »Wikipedia ist demokratisch organisiert – wir arbeiten im Prinzip für die User. Das hieß, dass wir in über 300 Sprachen die Editors ansprechen und Zugang zu den Communitytreffpunkten und Foren erhalten mussten«, berichtet Olga Vasileva.

Olga Vasileva ist seit 2016 Principal-Product-Managerin bei der Wikimedia Foundation in Barcelona

In den Community-Hubs wird allerdings nicht immer Englisch gesprochen. Abhilfe schufen freiwillige Übersetzer:innen und einzelne Ambassadors für jede der 300 Communitys, die die Foundation für die knapp drei Jahre Projektdauer in Teilzeit anstellte. So sollte jede Wikipedia-Sprache eine eigene Stimme erhalten.

 UX-Redesign: Probleme aufdecken

Um eine Prioritätenliste für das UX-Redesignprojekt zu erstellen, sammelte das Wikimedia-Team in den Communitys etwa ein Jahr lang Feedback zur be­ste­henden Seite: Welche Bugs tauch­ten im tägli­chen Gebrauch auf? Welche Funktionen fehlten? Wie soll­te sich Wiki­pedia in Zukunft anfühlen?

Außerdem arbeitete das Kernteam gemeinsam mit der Community die spezifischen Bedürfnisse der beiden User­grup­pen heraus: die der Editors auf der einen Seite sowie die der reinen Leserinnen und Leser auf der anderen Seite – wobei noch einmal zwischen eingeloggt und nicht eingeloggt unterschieden wer­den musste.

Nach Abschluss der Researchphase identifizier­te das Wikimedia-Team drei Hauptziele: grundlegen­de Anpassungen für die Spracheinstellungen der Seite, eine Verbesserung des Leseerlebnisses, ein Redesign der Seitennavigation sowie eine höhere Accessibility und die Möglichkeit, die Enzyklopädie visuell zu personalisieren.

Wikipedia: Live-Prototyping für mehr Flexibilität

Im zweiten Schritt entwickelte das Wikimedia-Kernteam eine Vorgehensweise für Entwurf und Test einer neuen Designlösung. Sie arbeiteten mit ei­nem interaktiven Basisprototyp, der den ge­samten Wikipedia-Datensatz umfass­te. Die Entwürfe sollten als API darübergelegt werden, um neben dem Erschei­nungsbild auch die Funk­tion in verschie­denen Sprachen testen zu können.

So wurden eingeloggte User:innen in zuvor ausgewählten Testcommunitys über ein Webbanner eingeladen, die neue Schnittstelle mit den Prototypen zu testen und Feedback zu geben. Auf diese Weise testete und über­arbeitete das Team in anderthalb Jahren fünf Prototypen. »Live-Prototpying hat uns ermöglicht, viel flexibler darauf einzugehen, was die Communitys brauchen. Außer­dem konnten wir so sehen, wie das neue Interface auf unterschied­liche In­halte reagierte, und die User:in­nen in ihrem gewohn­ten Umfeld nach Feedback fragen«, erklärt Rita Ho, Senior-Group-Design-Manage­rin aus Kopenhagen. »Das hätte mit einem stati­schen Entwurf nicht funk­tioniert.«

Rita Ho arbeitet seit 2019 von Kopenhagen aus als Product Design Leader für die Wikimedia Foundation

Das neue Design: Vector 2022

Am Ende stand das neue UX-Default-Design, das seit Januar 2023 in über 90 Prozent aller Wikipedia-Sprachen aktiv ist. Da allerdings einige User:innen an ei­­­ner ­älteren Version hängen, ist das Design als austauschbarer Skin an­gelegt. Wer will, kann im eingeloggten Zustand jederzeit zwischen den Versionen wechseln.

Die wohl auffälligste Veränderung ist die Inhaltsleiste, die bisher oben links in den Artikel eingepasst war und beim Scrollen mit dem Text verschwand. Sie ist jetzt als Sticky-Element angelegt, sodass Nutzer:innen beim Lesen die Inhaltsangabe immer parat ­haben. Zudem lassen sich Unterthemen ein- und ausklappen, um leichter den Überblick zu behalten.

Das generelle Layout der Seite ist stark reduziert. »Wir haben uns überlegt, welche Funktionen User:innen am häufigsten brauchen«, sagt Ho. Das Menü verbirgt sich nun in einem schlichten Burger-Icon, sodass das Auge direkt bei der Suchleiste sowie den Spracheinstellungen und Icons für den Log-in-Bereich landet. Die Suche selbst hat auch aus Development-Sicht ein Upgrade erhalten: Etwa 30 Prozent mehr Ergebnisse tauchen jetzt pro Suche auf.

UX Design: Lesbarkeit und Accessibility

Besonderer Fokus lag auf der verbesserten Lesbarkeit der In­halte. Dazu kontaktierte das Kernteam die Communitys über unterschied­liche Kanäle, um Feedback zu sammeln und gemeinsam mit verschiedenen Nutzer:innen die wichtigsten Proble­me zu iden­tifi­zie­ren. So begrenzte das Team die Zeilenlänge im Inhaltsbereich, um den Zeilensprung zu erleichtern. Dabei orientierten sie sich an Best-­Practice-Beispielen aus Typografie und UX Design. Stärke­re Kon­tras­te in den Schriften und angepasste Farbwerte der weiterführenden Links sollten bei der Orientierung helfen.

Die Neuerungen sollen möglichst vielen User:innen zugute kom­men: »Zahlenmäßig umgelegt wären Nutzer:innen mit Einschrän­kungen wie einer be­einträch­tigt­en Sicht unsere fünftgrößte Sprach-­Com­mun­ity, deshalb legten wir be­son­de­ren Wert auf Features für Personalisierung und Screen­reader-Kompatibi­li­tät nach Web Content Accessibility Guidelines AA Standard«, so Lead User Experience Engi­neer Volker Eckl aus Wien. Er entwi­ckel­te gemeinsam mit Community und Kernteam neue Guide­lines für Editors, die die Accessibility auch in künftigen Artikeln verbessern sollen.

Volker Eckl ist Lead User Experience Engineer bei der Wikimedia Foundation aus Wien.

Wikipedia-Redesign: Launch und Ausblick

Der neue UX-Skin Vector 2022 launchte im Januar 2021 – ein Jahr nach dem 20-jähri­gen Wikipedia-Jubiläum, das die Founda­tion noch im Lockdown gefeiert hatte. Heute sind fast alle Sprachen mit dem neuen UX-Default versehen, nur einige Nach­zügler stehen noch aus. Darunter Deutschland, aber eingeloggte User:in­nen kön­nen Vector 2022 bereits als Betaversion anwählen.

Das Feedback aus der Community ist gemischt: Während einige Leser:innen das Update begrüßen und das verbesserte Interface loben, bemängeln andere, dass sich das Design zu weit vom klas­si­schen Wikipedia-Look entfernt hätte. »Es ist unmöglich, alle Nut­zer:innen mit dem neuen UI glücklich zu machen«, sagt Rita Ho. »Aber uns ist wichtig, dass auch diese kritischen Stimmen gehört werden.« Denn mit dem Feedback der Community will die Foundation Wikipedia auch in den kommenden Jahren noch weiterentwickeln und zusätzliche Customization-Features einbauen.

Die User:innen sollen künftig nicht nur Schriftgrößen und die Sprache einstellen, sondern die Seite auch nach eigenen Vorstellun­gen anpassen können – komplett selbst pro­grammierte Skins sind weiterhin verfügbar. In den neu eingeführten »Com­munity Office Hours« arbeitet das Team eng mit Freiwilligen zusammen, die die Accessibility und generelle Funktionen testen, um Wiki­pedia auch in Zukunft zum Zuhause für das gesamte Netz zu machen.

5 Tipps fürs Management bei mehreren Usergruppen

Wikipedias Lead-Product-Managerin Olga Vasileva gibt wertvolle Tipps fürs Management in Projekten mit mehreren Usergruppen

1. Stakeholder identifizieren. Wer hat welche Erwartungen an das Projekt? Was muss das Design leisten, um sie zu erfüllen?
2. Arbeit mit Fokusgruppen. Repräsentantin­nen und Repräsentanten aus den Stakeholder-Gruppen liefern wertvolle qualitative Insights.
3. Asynchrone Tests. Entwürfe sollten immer separat in einzelnen Gruppen getestet werden. Anschließend kann das Feedback in den nächsten Entwurf eingearbeitet und einer anderen Gruppe vorgestellt werden.
4. Lange Feedbackphasen. Größere Gruppen brauchen in der Regel länger für Feedback. Diese Phasen sollte man von Anfang an im Projektplan berücksichtigen.
5. Offen bleiben. Nicht alle werden mit dem finalen Design glücklich sein. Deshalb ist es wichtig, auch im Nachgang noch Feedback anzunehmen und für die weitere Entwicklung zu sammeln.

Dieser Artikel ist in PAGE 05.2023 erschienen. Die komplette Ausgabe können Sie hier runterladen.

PDF-Download: PAGE 05.2023

Produkt-Details anzeigen

Designmethoden und -prozesse in der Praxis ++ Comeback der Pixelschriften ++ ENGLISH SPECI-AL Jessica Walsh ++ Designsystem für Scania ++ Making-of: UX-Redesign bei Wikipedia ++ Um-weltfreundlich verpacken: Tipps & Ideen ++ Creative AI in Agenturen

9,90 €

AGB