Reading/Web/Desktop Improvements/de

Unsere Desktop-Oberfläche hat sich im Laufe der Zeit verändert, aber seit der Einführung des Vector-Skins (dem Standard-Design der Wikimedia-Projekte) wurden die meisten dieser Änderungen von Freiwilligen durchgeführt und sind nur in Prototypen, Benutzerskripten, Helferlein und von Freiwilligen betreute Benutzeroberflächen verfügbar.

Dieses Projekt befindet sich in einem sehr frühen Diskussionsstadium. Es gibt noch keinen konkreten Plan oder irgendeine Entwicklung. Wir benötigen Eure Mitarbeit und Euer Feedback zu den allgemeinen Schwerpunkten des Problems sowie Eure Gedanken zu den ersten Entwürfen unten.

Wie du helfen kannst
Feedback: Please look through these details and subpages, and share your feedback on the talkpage about the ideas and mockups we have collected so far - How could they be further improved? What important considerations are not currently documented?

Recherche und Ideen: Bitte editiere die Abschnitte von Phase 1: Design-Ideen unten, um neue Ideen, Notizen, Links zu früheren Diskussionen, Links zu bestehenden Helferlein/Skripten, Links zu guten externen Designmustern, die berücksichtigt werden sollten, usw. hinzuzufügen.

Individuelles Testen: Sobald die Entwicklung beginnt, werden wir die laufenden Arbeiten direkt über eine neue Skin-Option in den Einstellungen zur Verfügung stellen. Es wird möglich sein, per Opt-in die Änderungen individuell zu testen.

Gesamte Wikis: Wir sind auch auf der Suche nach Wikis, die daran interessiert sind, bei umfangreichen Tests zu helfen, wie z.B. die Änderung des lokalen Standards für nicht angemeldete Benutzer der Website. Wenn du denkst, dass deine Community interessiert sein könnte, frag uns bitte, wenn du irgendwelche Fragen hast, dann starte eine lokale Diskussion, und sobald es einen lokalen Konsens gibt, füge einen Link zu dieser Diskussion auf der Diskussionsseite hinzu.

Längere Kommentare und Anregungen sind auf der Diskussionsseite willkommen (in jeder Sprache).

May 2020: First deployment - officewiki and testwiki
This Monday we deployed the first visual change of the improved version of the desktop skin on our first production wikis - Officewiki (used internally by the WMF) and Testwiki (for general testing purposes). On these wikis, you will notice a reconfiguration of the project logo which is the first portion of our improved header. You can also turn the updated skin version on and off from the sidebar and your user preferences. In the next couple of weeks, we will also be deploying a collapsible sidebar for these wikis, followed by a deployment of these changes to our full set of test wikis.

We have also introduced a query string parameter using which you can see the state of the Vector skin on any wiki by adding the parameter ?useskinversion=2 to the url. Example: Paris on French Wikipedia

Subscribe to our Newsletter and check the previous updates.

Problembeschreibungen

 * 1) Wikimedia-Wikis wirken nicht einladend
 * Die Desktop-Seiten von Wikimedia-Wikis sind für neue Leser keine einladende oder vertraute Erfahrung. Es entspricht nicht den Erwartungen, die das moderne Web und unsere anderen Plattformen (die Android- und iOS-Applikationen sowie die mobile Website) an uns stellen. Durch die willkürlich organisierte Navigation und Schnittstellenanbindungen fühlen sie sich verwirrend und unzusammenhängend an.  Dies wiederum führt dazu, dass Leser und Autoren weniger Vertrauen in Wikimedia-Wikis haben, weniger wahrscheinlich Wikimedia-Wikis erkunden und schließlich unsere Seiten weniger nutzen, als sie es sonst tun würden (d.h. eine Verringerung der Bindung).
 * 1) Wikimedia-Wikis sind nicht leicht zu benutzen
 * Leser (insbesondere neue Leser) können grundlegende Funktionen wie das Umschalten von Sprachen, das Suchen von Inhalten oder das Anpassen von Leseeinstellungen nicht intuitiv ausführen. Zusätzlich gibt es eine Menge Unordnung, die von den Inhalten ablenkt, an denen sie interessiert sind. Neue Autoren stehen vor einer ähnlichen Barriere: einer Oberfläche, die nicht einladend oder intuitiv ist und überladen ist. Es ist schwierig für sie, grundlegende Aufgaben zu erfüllen, die für die Mitwirkung notwendig sind, wie z.B. die Einrichtung eines Kontos, das Öffnen des Editors oder das Erlernen der Verwendung von Spezialseiten für Moderationszwecke (z.B. Seiten für die Versionshistorie zum Auffinden und Zurücksetzen von Vandalismus). Alle Benutzer können Probleme damit bekommen, dass die Seiten nicht richtig „responsiv“ sind, was zu Problemen wie sehr breiten Inhalten oder sehr schmalen Inhalten führt (je nach Bildschirm- und Fenstergröße). Indem wir den Status quo beibehalten, verhindern wir, dass Menschen, die einen Beitrag leisten wollen, dies tun können (d.h. eine Erlebensverzerrung).
 * 1) Das Modell der Wikimedia-Wikis ist nicht leicht zu verstehen
 * Derzeit versteht nur ein sehr kleiner Prozentsatz der Leser, wie Wikimedia-Wikis funktionieren. Unsere Oberflächen heben das Innenleben der Website nicht intuitiv hervor. Viele Leser sind sich nicht bewusst, dass die Inhalte, die sie lesen, von Freiwilligen geschrieben und regelmäßig aktualisiert werden, oder dass sie potenziell auch dazu beitragen können.

Darüber hinaus erschwert der große Erfahrungsunterschied zwischen unseren verschiedenen Produkten (Desktop, Apps und Mobile Web) es den Lesern, die Zusammenhänge zwischen unseren Produkten zu erkennen und sie mit den Inhalten selbst zu assoziieren. Dies führt zu einem Mangel an Einheitlichkeit im Konzept der Wikimedia-Seiten.

Zusammenfassung nach Nutzergruppen:

Ziele
Hier sind die Schlussfolgerungen, die wir anstreben:


 * Den Lesern die Fokussierung auf den Inhalt erleichtern.
 * Leichteren Zugang zu alltäglichen Handlungen bieten (z.B. Suche, Sprachumschaltung, Editieren).
 * Dinge an logische und nützliche Stellen setzen.
 * Erhöhung der Kompatibilität der Oberfläche mit anderen Plattformen – Mobile Web und die Apps.
 * Entfernen von Überflüssigem.
 * Ein Plan für zukünftiges Wachstum.

Einschränkungen
Hier ist eine Liste von Dingen, die ausdrücklich im Hinterkopf behalten bleiben sollten:


 * Keine Veränderung des Inhalts – es wird keine Arbeit in Hinsicht auf Vorlagenformatierung oder die Struktur der Seiteninhalte selbst geleistet.
 * Keine Entfernung von Funktionalität – es können sich Dinge an andere Stellen bewegen, aber alle Navigationselemente und andere Funktionen, die derzeit standardmäßig verfügbar sind, bleiben erhalten.
 * Keine drastischen Änderungen am Layout – wir gehen schrittweise an die Änderungen heran und möchten, dass die Website sich den Lesern und Editoren weiterhin vertraut fühlt.

Zeitplan
Hier ist eine grobe Zeitplanung, die sich je nach Fortschritt ändern wird:


 * Phase 1: Mai bis September 2019: Untersuchung und Recherche, Herausfinden, wo wir Mehrwerte schaffen können, Fokusfindung
 * Phase 2: Juli bis November 2019: Entwicklung von Schwerpunktthemen, Skizzieren und Erarbeiten von Ideen, Durchführung von Gesprächen
 * Phase 3: Oktober 2019 bis January 2020: Kontinuierliche Benutzertests und Designverbesserungen
 * Phase 4+: Wird noch festgelegt.
 * Phase 4: January 2020 - May 2020: Prototype feedback and iteration. Building out first features - new header and collapsible sidebar
 * Phase 5: May 2020 - July 2020: Prototype, user test, and ship at least 4 features to test wikis
 * Phase 6+: July 2020 - TBD: Continuing with feature sequence

Kennzahlen
Nachfolgend steht ein Entwurf der Kernkennzahlen, die wir im Laufe des Projekts messen wollen. Wenn wir die Änderungen, die wir vornehmen wollen, genauer definieren, werden wir diese Liste erweitern und überarbeiten.

Erhöhen des Nutzens für unsere bestehenden Nutzergruppen, gestützt durch:


 * Interaktionen
 * Erhöhung von Suchanfragen um 5% pro Sitzung im Laufe des Projekts.
 * Erhöhung der Sprachumschaltung um 5% pro Projekt im Laufe des Projekts.
 * Verbundenheit
 * Steigerung der positiven und begrüßenden Meinungen in Bezug auf die Website (durch Umfragen und Benutzertests)
 * Steigerung des Vertrauens und der Glaubwürdigkeit (gemessen durch Umfragen und Nutzertests)

Feature Sequence
This is a summarized overview of the features we are considering adding or iterating on throughout the course of the project. A more detailed list is available on a separate page - we encourage looking through that page for more information. As we go through with design, requirements gathering, and user testing for each feature, we will also publish a separate page per feature with more detail. These will be linked from the title of the feature.


 * 1) New Header
 * 2) Collapsible Sidebar
 * 3) Moving language links to the article title bar
 * 4) Sticky site and article headers
 * 5) User Menu
 * 6) Improved search
 * 7) Improved language switching
 * 8) Table of contents
 * 9) Article tools
 * 10) General aesthetic refinements

Research and design process
General note: our process is not particularly strict. It is based loosely on research and design process best practices, however it is also relatively emergent and flexible, in that we are engaging in ad hoc activities and explorations as they feel appropriate. While we've outlined the research and design process in three phases below, in practice the phases overlap. Additionally, for the time being there doesn't seem to be a clear way of separating research activities from design activities (they are interrelated) so we're discussing them together.

Phase 1. Investigation and research, figuring out where we can create value, finding focus (May 2019 – September 2019)

 * Main page: /Research and design: Phase 1

We began by considering the current default experience on desktop (Vector) and asking ourselves: in what ways can we improve upon this? Where are opportunities to modify the interface in order to create a better experience for all readers and editors? How can we make it easier for people to do the things they want to do? How can we create a more pleasing reading environment? Of course while exploring these questions we kept in mind the project's constraints. The research and design activities we engaged in in order to explore these questions included:


 * Understanding the history of the desktop interface
 * Reading previous Wikipedia research conducted by the Wikimedia Foundation or other research institutions and individuals
 * Discussions at our team offsite to develop a shared understanding of the project and generate ideas
 * Winter, Timeless, and other Wikipedia redesigns
 * Reading about redesigns/updates of other large websites (Reddit, Twitter, etc.)
 * Conducting an audit of other large websites to try and glean common structural elements

The output from phase 1 was: a better understanding of the desktop interface, and proposed focus areas for improvements. We didn't have strict criteria for what a focus area could be. Generally speaking it was an idea of an improvement we could make, though at varying levels of specificity, such as: a less cluttered reading experience, or language switching ease. The proposed focus areas are:


 * Creating a more focused and "quiet" reading environment by consolidating or optionally collapsing navigational links, including:
 * Main sidebar navigation
 * Article tools
 * User tools
 * Language switching
 * Search
 * Article navigation / table of contents

Additional, more feature-specific, ideas that came up: reading preferences (e.g. dark mode), share button, larger edit button / add new article button (for smaller wikis) / making it more obvious how to "get involved", article stats / activity summary.

Phase 2. Developing focus areas, sketching and prototyping ideas, starting conversations (July 2019 – November 2019)

 * Main page: /Research and design: Phase 2

The research activities and conversations in phase 1 helped us develop a better understanding of the landscape we were working within (i.e. the desktop interface). It also helped us develop potential focus areas to further investigate (while still remaining open to new ideas). Our next goal was to dig a bit deeper into the focus areas through sketching, prototype, and most importantly conversations with the community. The research and design activities included:


 * Understanding past work, research, and experiments in respective focus areas
 * Obtaining general usage data about the respective focus areas
 * Sketching out and prototyping early ideas to help facilitate conversations
 * Forming early hypotheses
 * User interviews and other feedback at Wikimania
 * Community feedback via MediaWiki (happening soon)
 * User interviews with newcomers and casual readers (happening soon)
 * User testing on usertesting.com (happening soon)

The output from phase 2 will include: reactions to sketches of specific interface improvements within the focus areas, a refined (i.e. more opinionated and informed) sense of which improvements are worth pursuing, a proposal for the sequence in which we could implement proposed improvements.

Phase 3. Continued user testing and design refinements (October 2019 – January 2020)
Phase 3 will be a cycle of: further testing the specific ideas that came out of phase 2, then refining our designs in response to what we learn. There are potentially some things that need to be tested as betas on actual wikis. We will be working to identify these things and figure out how we plan to test them in beta (i.e. what data we would be tracking, and what decisions we'd be making based on what behavior we see).

The output of phase 3 will include: nearly finalized designs (though we usually leave room for additional iterations during implementation) and a plan for what we want to learn as we roll things out in beta, and what decisions/changes we would make based on that information.

Phase 1: Design-Ideen
A few of the many ideas that have been suggested are below. Please add any prominent ideas and links you know of:


 * NOTE for editors: Please edit the English version to add ideas and links, or comment on the talkpage. Don't worry about the "tvar" markup if you don't know it. We will add it in afterwards.

Focusing on the content, distinguish content from user-interface

 * Collapsible sections in sidebar
 * Examples: Hebrew Wikipedia, ...
 * Research: Usability initiative research on collapsible languages links, Usability initiative mockups on collapsible sections within the sidebar
 * Collapsible sidebar
 * Examples: Wide Skin (enwiki script), Hide Vector sidebar (enwiki script), Timeless skin sidebar (responsive-layout), WikiWand, mobileVector (mediawikiwiki gadget), CollapsibleSidebar (kowiki default gadget), ...
 * Floating sidebar
 * Examples: FloatSide (enwiki script), ...
 * Tabs in sidebar to organise all the tools and navigation: 1) TOC, 2) Site navigation, 3) Tools (for editing, page info, gadgets), 4) Bookmarks (feature request)
 * The tab icons serve also to collapse/reveal the sidebar.
 * TOC in sidebar: fixed to the screen, separately scrolled.
 * Example: WikiWand
 * Pin-able infobox: show a pin icon in top-right corner of the infobox. When pushed, pin the infobox on the right side of the screen in a column that stays on-screen and scrolls on its own, similar to the sidebar on the left.
 * Collapsible article sections: see at the bottom of the WikiWand page + add a short scrolling effect.
 * Responsive width
 * Responsive content (enwiki/mw gadget), 3 column CSS (personal css),

Easier access to everyday actions

 * Sticky header with search, table of contents, edit links
 * Examples: FloatHead (enwiki script), FloatHead (another enwiki script), Floater (enwiki script), Winter (historical prototype), Timeless (alternative skin), ...
 * Research: Usability-wiki
 * More prominent language switching (moving the language switcher to the top of the page)
 * Examples: Timeless skin at 1325px or wider and at 1085px or thinner, ...
 * Sticky table-headers
 * Examples: Gadget-StickyTableHeaders (enwiki gadget)
 * Jump to the top of the page
 * Examples: ToTopButton (enwiki script)
 * Paragraph (¶) symbols on headings: visible only when hovering, next to the edit icon, to easily copy links to sections.

Putting things in logical and useful places

 * Consolidated user menu (e.g. collapsing things like "Log out", "Preferences", and "Beta", inside a dropdown menu)
 * Examples: Skin:Timeless, Compact personal bar
 * Preferences for logged out users
 * Examples: Accessibility settings/preferences (T91201), ...
 * Moving article actions from the sidebar to within the article
 * Examples: Winter, Timeless skin at 1085px or thinner, ...
 * Easily navigate through articles - load page content using JS in background without loading the whole page
 * Examples: RevisionSlider, an extension to easily navigate through diffs, and Weekipedia.