Чтение/Веб/Улучшения интерфейса настольной версии

< Reading‎ | Web
This page is a translated version of the page Reading/Web/Desktop Improvements and the translation is 100% complete.

Предыдущая тема по умолчанию для сайтов Викимедиа (Вектор) был развернут в 2010 году. За последнее десятилетие интерфейс дополнился расширениями, гаджетами и пользовательскими скриптами. Большинство из них не были согласованы визуально или между вики. В то же время веб-дизайн, а также ожидания читателей и редакторов претерпели изменения. Пришло время взять некоторые из этих идей и реализовать их по умолчанию для всех пользователей на всех вики, организованным и последовательным образом.

Наши цели — сделать сайты Викимедиа более привлекательными, повысить их полезность для читателей и сохранить полезность для существующих редакторов. Мы измерили рост доверия и позитивного отношения к нашим сайтам, а также полезность наших сайтов (использование повседневных действий, таких как поиск и переключение языка).

В настоящее время, на большинстве сайтов Викимедиа, только вошедшие в систему пользователи могут включить изменения индивидуально. Однако, в большинстве сайтов наши изменения по умолчанию применяются для всех, и зарегистрированные пользователи могут отказаться от них. Мы увеличиваем количество вики-сайтов, где по умолчанию используется «Vector 2022», пока наши улучшения не станут по умолчанию для всех сайтов.

Обновления

Основная страница: Reading/Web/Desktop Improvements/Updates

ноябрь 2023: Визуальные изменения, больше развертывания и смещение фокуса

 
До (?vectorzebradesign=0)
 
После (?vectorzebradesign=1)

Новый стиль, вдохновленный прототипом «Zebra»

В рамках прототипа Zebra #9 , о котором мы писали в последних двух обновлениях, мы развернули два вида визуальных изменений: разделение областей на основе цвета и другие модификации CSS. Как мы сообщали ранее, A/B тест не доказал, что разделение по цвету было улучшением. Вместо этого мы сосредоточились на других модификациях CSS, и сейчас внедряем эти изменения. Чтобы проверить разницу, вы можете использовать параметры URL: ?vectorzebradesign=0 (без изменений) и ?vectorzebradesign=1 (с изменениями). Изменения заключаются в:

  • Сворачиваемое меню (боковая панель, содержание, меню пользователя и меню инструментов, если они не закреплены) имеют более светлый контур и тень.
  • Кнопки «переместить в боковую панель»/ «скрыть» в сворачиваемом меню имеют серый фон вместо квадратных скобок.
  • Главное меню больше не имеет серого фона при размещении в боковой колонке (в закрепленном виде). Вместо этого все меню имеют одинаковый внешний вид при размещении в боковых колонках.
  • Левый и правый столбцы имеют одинаковую ширину.
  • Из-за приведенного выше изменения, ширина контента становится немного уже, когда меню закреплены в обеих колонках.
  • Пробел между содержания и областью контента меньше.

В середине ноября мы внедрили эти изменения в следующие Википедии: французскую, каталонскую, ивритскую, польскую. Мы планируем внедрить эти изменения во все проекты Викимедиа в течение 2-3 недель. Это позволит вносить изменения в будущем, например, в меню «Доступность для чтения».

Продолжается развертывание интерфейса «Vector 2022»

Видео о «Векторе 2022»

Со времени нашего последнего известия, мы изменили внешний вид по умолчанию в нескольких Википедиях: датской, хинди, венгерской, норвежской (bokmål) и шведской. Мы также опубликовали короткое видео о новом внешнем виде. Кроме того, после получения всех логотипов от нашей команды дизайнеров, мы также были готовы продолжить широкомасштабное внедрение в дочерних проектах.

  • The Vector 2022 skin is now the default on all non-English Wikibooks, Wikinews, Wikiquotes, Wikiversity, as well as on Meta-Wiki.
  • We are continuing conversations and scheduling deployments to the remainder of sister projects, beginning with non-English Wikisource, Wiktionary, and Wikivoyage.

Some of these projects may need adjustments, like default settings for limited/full-width at namespaces unique to Wikisource. Gadgets or user scripts may need to be updated, too. We gladly make fixes or assist in making them, depending on whether changes need to be made in the skin itself or a community-controlled code. Reach out to us on the Desktop Improvements talk page or write directly to SGrabarczuk (WMF) if you have any questions or requests for further changes.

Focusing on further desktop and mobile readability improvements

The team has shifted focus onto the Accessibility for reading project. We will work on improvements in typography and introduce dark mode to the Vector 2022 and Minerva skins. Please visit the project page for more details and information on how to get involved.

сентябрь 2023: Results from the Content separation (Zebra #9) A/B test

In June 2023, we ran an experiment which compared different content separation layouts of the interface.

This prototype shows the tested design; we're calling it "Zebra". The goal was to improve readability and focus on the content of the page. The experiment tested the prototype design and compared it to the current all-white Vector 2022 design. The results of the experiment showed:

  1. A 3% increase in pageviews per session in the treatment group attributed to Zebra
  2. A 3.4% decrease in edits per session in the treatment group attributed to Zebra
  3. A 17% decrease in the click rate of the table of contents
  4. An 87% increase in the page tool pins per session

After reviewing the settings of our test, we did not find any issues that would result in data inconsistencies. Next, we studied other factors which might affect the results of the test. We noticed that a significant amount of the decrease in edits and pageviews came from screen sizes narrower than 1200 px. We combined these results with the results of our user tests.

These did not indicate significant differences in readability between the test and control designs.

Our conclusion was that the prototype did not, in its tested form, improve readability and could negatively affect edits.

We decided not to proceed with the deployment of this prototype in its tested form. Instead, we plan to improve readability and focus on the content through the following:

  1. Introducing changes to the typography, focused on improving readability and content comprehension. This is the goal of the new project, Accessibility for reading
  2. Introducing improvements to Zebra, optimizing for narrower screens, and repeating the tests.

Какова была наша цель?

Представьте гардероб.

До этого интерфейс…

...не оправдывал ожиданий. ...был загроможден и интуитивно не понятен. ....не выделял сторону сообщества. ...не соответствовало мобильной версии.

  1. Интерфейс версии для рабочего стола сайтов Викимедиа не соответствовал ожиданиям, создаваемым современными веб-платформами. Оно кажется дезориентирующим и разрозненными. Навигация и ссылки интерфейса были организованы несистематично.
  2. Был беспорядок, который отвлекал пользователей от того, за чем они пришли. Читателям было сложно сосредоточиться на контенте. У них не было возможности интуитивно переключать языки, искать контент или настраивать параметры для удобного чтения. Новички не могли воспользоваться своей интуицией, чтобы создать учетную запись, открыть панель редактирования или узнать, как использовать страницы, не содержащие статей, для целей модерации.
  3. Очень небольшой процент читателей понимал, как функционируют сайты Викимедиа. Многие читатели не знали, что контент, который они читали, был написан добровольцами и часто обновлялся, или что они потенциально также могли бы внести свой вклад в проекты.
  4. Большая разница в восприятии интерфейса нашей настольной и мобильной версии, а также приложении, затрудняла читателям подключаться к нашим продуктам. В концепции сайтов Викимедиа отсутствовало единство.

Как вносятся изменения

Принципы

Мы не касаемся контенту. Мы не удаляем никакой функционал. Мы не меняем тему, кроме «Vector»-a. Нас вдохновляют существующие гаджеты. Мы не вносим серьезных изменений за раз.

  1. Мы работаем только над интерфейсом. Не выполняется никакой работы с точки зрения оформления шаблонов, структуры контента страницы, поддержки карт или кросс-вики-шаблонов.
  2. Интерфейсы, отличные от «Vector», выходят за рамки наших настроек. Мы остановили поддержку устаревшего «Vector»-a и начали развертывать наши функции как части нового «Vector»-a по умолчанию.
  3. Хотя наши изменения легко заметны, мы применили эволюционный подход и хотели, чтобы сайты по-прежнему казались бы знакомым читателям и редакторам. Каждая функция обсуждалась, разрабатывалась и внедрялась отдельно.
  4. Мы протестировали наши улучшения в сотрудничестве с различными добровольческими сайтами Викимедиа, внедрившими изменения первыми. В этом участвовали как Википедии, так и другие проекты Викимедии.
  5. Как до разработки, так и после развертывания мы собирали данные (через A/B-тестирование, раундов отзывов по прототипам и т.д.). В случае значительно отрицательных результатов, мы обязались откатить наши изменения.
  6. Мы проанализировали множество сайтов Викимедиа и заметили множество полезных гаджетов. Некоторые из них определенно заслуживали того, чтобы их оставили и они стали бы частью интерфейса по умолчанию.
  7. Элементы интерфейса были перемещены, но все элементы навигации и другие функциональные возможности, доступные ранее по умолчанию, остались.


План и график развертывания

Теперь новый интерфейс готов к развертыванию по умолчанию в любой вики.

The timeline

Список сайтов Викимедиа, которые внедрили первыми (тестовые сайты) 

Первая группа сайтов (отмечена как ※ в графике выше):

Вторая группа сайтов (отмечена как † в графике выше):

Третья группа сайтов (отмечена как ‡ в графике выше):

Четвертая группа сайтов (отмечена как § в графике выше):

Первая группа малых сайтов (отмечена как ¶ в графике выше): 

Участие и Связь

  • Подпишитесь на вестник!
  • Перевод: помогите нам перевести соответствующие страницы:
Приоритетные переводы 

Топ-3

  1. Чтение/Веб/Улучшения интерфейса настольной версии
  2. Чтение/Веб/Улучшения настольной версии/Часто задаваемые вопросы
  3. Reading/Web/Desktop Improvements/Features

Другие приоритетные переводы

  1. Template:Reading/Web/Desktop Improvements/Talk page intro
  2. Template:Reading/Web/Desktop Improvements/Features/Navigation
  3. Template:Reading/Web/Desktop Improvements/Header
  4. Чтение/Веб/Улучшения интерфейса настольной версии/Новости
  5. Reading/Web/Desktop Improvements/Repository#posts
  6. Template:Reading/Web/Desktop Improvements/Office hours announcement

Прямая ссылка на все переводы


Какие функции были добавлены

Основная страница: Reading/Web/Desktop Improvements/Features