Lectura/Web/Mejoras a la IU de escritorio

From MediaWiki.org
< Reading‎ | Web
Jump to navigation Jump to search
This page is a translated version of the page Reading/Web/Desktop Improvements and the translation is 54% complete.
Outdated translations are marked like this.
Other languages:
Deutsch • ‎English • ‎español • ‎français • ‎polski • ‎русский • ‎中文 • ‎日本語
Annotated screenshot of the current Vector skin. The article content will not be changed, but other areas could be improved.

Nuestra interfaz de escritorio se ha modificado a lo largo de los años; sin embargo, desde que se presentó la apariencia Vector (el diseño predeterminado del sitio), muchos de esos cambios los han llevado a cabo voluntarios y están disponibles únicamente como prototipos, scripts de usuario, accesorios y apariencias mantenidas por voluntarios. Creemos que es hora de que llevemos algunas de esas ideas a la experiencia por omisión. Durante los próximos dos años, el equipo de lectores web realizará investigaciones y creará mejoras a la experiencia de escritorio basadas en esas investigaciones y herramientas existentes. Nuestras metas: hacer que los wikis de Wikimedia sean más acogedores tanto para los lectores nuevos como para los editores, así como más fáciles de usar y más veloces para todos (para editores nuevos y veteranos).

Este proyecto se encuentra en las primeras etapas de debate. No existe aún ningún plan ni desarrollo concreto. Necesitamos de su colaboración y comentarios relativos a las áreas focales del problema; asimismo, queremos sus reflexiones respecto a las ideas iniciales de diseño que presentamos a continuación.

Cómo ayudar

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?

Research and ideas: Please edit the "Phase 1: Design ideas" sections below, to add new ideas, notes, links to past discussions, links to existing gadgets/scripts, links to good external design-patterns to consider, etc.

Individual testing: Once development begins, we will make the ongoing work available directly via a new skin option in Preferences. You will be able to individually opt-in and test the changes.

Whole wikis: We are also looking for any wikis that are interested in helping with widespread testing, such as changing the local default for logged-out site users. If you think your community might be interested, please ask us if you have any questions, then start a local discussion, and once there is local consensus add a link to that discussion on the talk page.

Siéntase libre de externar comentarios y reflexiones en la página de discusión, en cualquier idioma.


Suscríbase a Boletín:Novedades sobre las mejoras de escritorio para recibir notificaciones cuando se añadan subsecciones aquí. Los anuncios de hitos importantes se entregarán a todos los wikis a través de MassMessage.

October 2019: Technical Research pt 2

We have published the results of our technical research in preparation for beginning the work on the project. In particular, we have focused on gathering more information on the following:

Septiembre de 2019: informe de investigación en Wikimanía

Resumen en PDF de la investigación, publicada en el marco de Wikimanía 2019 (en inglés)

During Wikimania 2019, we interviewed editors with the goal of sharing the plans for our upcoming Desktop improvements project, and collecting valuable feedback on a number of preliminary design ideas. Our research consisted of user interviews, a free-form feedback exercise, and a presentation with breakout groups for more focused discussion. We have published a report and a PDF summary (in English) of the feedback we received. Overall, we received positive feedback on the focus areas selected, as well as the individual prototypes for ideas. However, we were also able to identify areas for improvements.

We will be iterating over this feedback over the next few weeks and plan on developing a prototype that we can test with a wider audience across wikis.

En este pase de diapositivas mostramos 19 de las ideas que hemos puesto a prueba. Para obtener mayor contexto, lea el informe completo y comparta sus comentarios en la página de discusión.

Septiembre de 2019: uso en el escritorio y análisis de datos de comportamiento

As a part of our research process, we wanted to learn more about the way people currently use the site. In particular, how often they use available functionality such as links in the sidebar, language switching, and search. We have published our results. Overall, usage of sidebar links is low - only about 0.5% of all logged out users and 1.6% of all logged-in desktop users clicked on one of the pages linked in the sidebar. Language switching usage varied, generally based on the size of the wiki, with smaller wikis switching languages more often.

Agosto de 2019: investigación y lluvia de ideas en Wikimanía

Diapositivas utilizadas en la sesión de Wikimanía

Wikimania provided us with the opportunity to speak with experienced members of our communities. Over the five days of the conference we were able to share the plans for the project, and collect valuable feedback on a number of design ideas. Our research consisted of user interviews, a free-form feedback exercise, and a presentation + brainstorming session (you can see the slide-deck we used at the side). We will soon be publishing the summary of the feedback, as well as interview session results.

Agosto de 2019: investigación técnica

To explore different technical possibilities for the project, the team spent a week hacking on different approaches to a single problem - how to enable the sidebar in the desktop experience to be collapsible. We are hoping to use the results from these experiments to determine the technical architecture for the improvements, as well as the skin we would like to build these improvements within. Here is a list of the experiments themselves:

Planteamientos de problemas

  1. Los wikis de Wikimedia no son acogedores
    Wikimedia wikis’s desktop sites are not a welcoming or familiar experience for new readers. It does not match the expectations created by the modern web and our other platforms (the Android and iOS apps as well as the mobile website).  It feels disorienting and disconnected due to the haphazardly organized navigation and interface links. In turn, this causes readers and editors to have less trust in Wikimedia wikis, to be less likely to explore Wikimedia wikis, and eventually, to use our sites less than they otherwise would (i.e. a decrease in retention).
  2. Los wikis de Wikimedia no son fáciles de utilizar
    Readers (new readers especially) are unable to intuitively perform basic functions like switching languages, searching for content, or adjusting reading settings. Additionally there is a lot of clutter that distracts from the content they are interested in. New editors are faced with a similar barrier; an interface that is not welcoming or intuitive and is cluttered.  It is difficult for them to perform basic tasks necessary for contribution, such as setting up an account, opening the editor, or learning how to use special pages for moderation purposes (e.g. history pages to find&revert vandalism). All users can have problems with the sites not being properly "responsive", which leads to issues like really wide content or really narrow content (depending on screen and window sizes). By keeping the status quo, we are preventing people who are eager to contribute from being able to do so (i.e. experience bias).
  3. No es fácil entender el modelo de wikis de Wikimedia
    Currently, a very small percentage of readers understand how Wikimedia wikis function. Our interfaces do not highlight the inner workings of the site in an intuitive way. Many readers are not aware that the content they are reading is written by volunteers and updated frequently, or that they can potentially contribute as well.

In addition, the large difference in experiences among our various products (desktop, apps, and the mobile web), makes it difficult for readers to know the connections between our products and to associate them with the content itself.  This creates a lack of unity in the concept of Wikimedia sites.

Resumen por audiencia:

Lectores nuevos Una experiencia indeseable.— Abrumadora, desorientadora, inusual, irritante, no de fiar
Lectores existentes No es un entorno de lectura/aprendizaje ideal.— Hay desorden, una falta de énfasis en el contenido, las acciones populares y la amplitud de los conocimientos con que se cuenta, además de la presencia de una navegación obtusa
Editores nuevos Difficult to get started — intimidating, confusing, disorganized, exclusive
Editores existentes Not an ideal editing/community environment - lack of emphasis on useful actions, disorganized tools, many tools given prominence are not helpful


Here are the outcomes we're working towards:

  • Make it easier for readers to focus on the content
  • Provide easier access to everyday actions (e.g. search, language switching, editing)
  • Put things in logical and useful places
  • Increase consistency in the interface with other platforms - mobile web and the apps
  • Eliminate clutter
  • Plan for future growth


Here is a list of things we would explicitly like to keep in mind:

  • Not touching the content - no work will be done in terms of styling templates or to the structure of page contents themselves
  • Not removing any functionality - things might move around, but all navigational items and other functionality currently available by default will remain
  • No drastic changes to the layout - we're taking an evolutionary approach to the changes and want the site to continue feeling familiar to readers and editors


Este es el cronograma aproximado que hemos planificado. Se modificará a medida que se haga progreso:

  • Fase 1.ª (mayo-septiembre de 2019): investigación, dilucidamiento de áreas donde podríamos generar valor, búsqueda de enfoques
  • Fase 2.ª (julio-noviembre de 2019): desarrollo de áreas prioritarias, elaboración de bocetos y prototipado de ideas, inicio de conversaciones
  • Fase 3.ª (octubre de 2019-enero de 2020): constantes pruebas con usuarios y ajustes de diseño
  • Fase 4.ª…: por determinar


Below is a draft of the core metrics we want to measure through the course of the project. As we define the changes we want to make with more specificity, we will expand and iterate on this list.

Increase utility among our existing audiences, proxied by:

  • Interacciones
    • Aumentar las búsquedas por sesión un 5 % por lo que dure el proyecto
    • Aumentar los cambios de idioma por proyecto un 5 % por lo que dure el proyecto
  • Afinidad
    • Aumentar los sentimientos positivos y la percepción de familiaridad del sitio (lo cual se medirá con encuestas y pruebas con usuarios)
    • Aumentar los sentimientos de confianza y credibilidad (medibles con encuestas y pruebas con usuarios)

Proceso de investigación y diseño

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.

Fase 1.ª: investigación y estudios, dilucidamiento de áreas donde podríamos generar valor, búsqueda de enfoques (mayo-septiembre de 2019)

Página principal: /Investigación y diseño: fase 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:

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:

  • Creación de un entorno más centrado y «tranquilo» para la lectura mediante la consolidación o plegamiento opcional de enlaces de navegación, incluidos:
    • Navegación principal de barra lateral
    • Herramientas de artículo
    • Herramientas personales
  • Cambio de idioma
  • Búsqueda
  • Navegación del artículo/sumario

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)

Página principal: /Investigación y diseño: fase 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.

Fase 1.ª: ideas de diseño

Algunas de las muchas ideas que se han sugerido figuran a continuación. Añada cualquier idea importante que conozca, así como cualquier enlace:

NOTA para editores:

  • Editen la versión en inglés para añadir ideas y enlaces, o comenten en la página de discusión.
  • No se preocupe por las marcas «tvar» si no las conoce. Las añadiremos después.

Focusing on the content, distinguish content from user-interface

Easier access to everyday actions

  • Sticky header with search, table of contents, edit links
  • 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
  • Jump to the top of the page

Putting things in logical and useful places

  • Consolidated user menu (e.g. collapsing things like "Log out", "Preferences", and "Beta", inside a dropdown menu)
  • Preferences for logged out users
  • 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