阅读/网页/桌面版改进

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 71% complete.
快捷方式: DIP
Other languages:
Deutsch • ‎English • ‎español • ‎français • ‎polski • ‎português • ‎čeština • ‎русский • ‎עברית • ‎বাংলা • ‎中文 • ‎日本語
Annotated screenshot of the current Vector skin. The article content will not be changed, but other areas could be improved.

我们的桌面界面随着时间的推移一直在变化,但是自Vector皮肤(默认网站设计)推出以来,这些变化中的大多数都是由志愿者主导的,仅在原型、用户脚本,小工具和志愿者领导的皮肤中可用。我们认为是时候采纳其中一些想法并将它们带入默认体验了。在接下来的几年中,网页阅读团队将基于研究和现有工具来研究和开发对桌面体验的改进。我们的目标是使维基媒体更受新读者和编辑的欢迎,并使所有人(新手和资深编辑)都更容易、快捷地使用。

这个项目处于讨论的早期阶段,尚无具体计划。我们需要您对问题的总体重点领域的协作和反馈,以及您对以下初始设计思想的看法。

您能如何提供帮助

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?

研究与想法:请编辑下面的“第1阶段:设计想法”部分,以添加新的想法、记录、过去讨论的链接、现有小工具/脚本的链接,好的外部设计模式的链接等。

个人测试:开发开始后,我们将通过“参数设置”中的新外观选项直接使正在进行的工作可用。您将可以单独选择加入并测试更改。

整体维基:我们也在寻找对帮助进行广泛测试感兴趣的任何Wiki,例如为登出站点用户更改本地默认值。如果您认为您的社群可能感兴趣,有问题请尽管向我们提问,然后开始进行本地讨论,一旦达成本地共识,请在讨论页面上添加指向该讨论的链接。

欢迎在讨论页面上以任何语言发表更长的评论和想法。

更新

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.

问题陈述

  1. 维基媒体计划不受欢迎
    维基媒体计划的桌面站点对新读者而言并不受欢迎。 它不符合现代网络和我们对其他平台(Android和iOS应用以及移动网站)的期望。由于随意组织的导航和界面链接,它感到迷失方向和断开连接。反过来,这导致读者和编辑者对维基媒体计划的信任度降低,也不太可能浏览维基媒体计划,并且最终使我们的网站使用率比理想上低(即保留率下降)。
  2. 维基媒体不易于使用
    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. 维基媒体计划的模型不容易理解
    当前,只有极少数的读者了解维基媒体计划的功能。 我们的界面无法以直观的方式突出显示网站的内部运作方式。 许多读者并不知道他们正在阅读的内容是由志愿者编写并经常更新的,或者他们也可能做出贡献。

此外,我们的各种产品(桌面版、应用程序和移动版)之间的体验差异很大,这使读者难以了解我们产品之间的联系以及将其与内容本身相关联。这使维基媒体网站的概念缺乏统一性。

不同受众的摘要:

新读者 不受欢迎的经历 - 压倒性的、迷失方向的、陌生的、震撼的、不值得信赖的
现有读者 不是理想的阅读/学习环境 — 混乱、缺乏对内容的重视、缺乏对流行行为的重视、不透明、缺乏对知识的深度和广度的重视
新编辑 难以上手 — 吓人、混乱、混乱无序、排他
现有编辑 不是理想的编辑/社群环境 - 缺乏对有用操作的强调、杂乱无章的工具、许多突出的工具都无济于事

目标

以下是我们正在努力取得的成果:

  • 使读者更容易专注于内容
  • 提供对日常操作(例如搜索、语言切换、编辑)的更轻松访问
  • 把事情放在合乎逻辑和有用的地方
  • 提高与其他平台(移动网络和应用程序)的界面一致性
  • 消除混乱
  • 计划未来的增长

局限性

这是我们明确要记住的事情列表:

  • 不触及内容 - 不会在样式模板或页面内容本身的结构方面进行任何工作
  • 不删除任何功能 - 事情可能会不断变化,但是所有导航项和当前默认情况下可用的其他功能将保留
  • 版面没有大的改变 - 我们正在采用渐进的方式进行变更,并希望该网站继续让读者和编辑感到熟悉

时间线

We'd like to note that due to the effects of the current pandemic on our team and the WMF as a whole, the timeline below is tentative. We still plan on continuing with the same steps and in the same order, but it might take us a bit more time than initially intended. We will update the dates below regularly to reflect this.

以下是大致的计划时间表,该时间表会根据进度而变化:

  • 阶段1:2019年5月至2019年9月:调查和研究,找出我们可以创造价值的地方,寻找重点
  • 阶段2:2019年7月至2019年11月:开发重点领域,草绘和制作原型想法,开始对话
  • 阶段3:2019年10月至2020年1月:持续的用户测试和设计改进
  • Phase 4: January 2020 - May 2020: Prototype feedback and iteration. Building out first features - new header and collapsible sidebar. Deploying header to Office Wiki and Test Wiki
  • Phase 5: May 2020 - July 2020: Prototype, user test, and ship header and collapsible sidebar features to test wikis as default. Deploy header and collapsible sidebar features to all wikis as an opt-in preference
  • Phase 6+: July 2020 - TBD: Continuing with feature sequence

量表

以下是我们在项目过程中要衡量的核心指标的草案。 当我们更具体地定义要进行的更改时,我们将在此列表上进行扩展和更新。

通过以下措施提高我们现有受众的效用:

  • 互动
    • 在整个项目过程中,每次会话的搜索量增加5%
    • 在整个项目过程中,将每个项目的语言切换提高5%
  • 亲和力
    • (通过调查和用户测试)对网站的积极欢迎态度有所增加
    • 信任和可信度的提高(通过调查和用户测试衡量)

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

研究和设计过程

一般说明:我们的流程不是特别严格。它宽松地基于研究和设计过程的最佳实践,但是也相对新兴和灵活,因为我们会酌情进行特别活动和探索。尽管我们在下面的三个阶段中概述了研究和设计过程,但实际上这些阶段是重叠的。此外,目前似乎还没有明确的方法将“研究”活动与“设计”活动(它们是相互关联的)分开,所以我们将它们一起讨论。

阶段1:调查和研究,弄清楚我们可以在哪里创造价值,找到重点(2019年5月–2019年9月)

主页面:/研究与设计:第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:

第1阶段的输出是:更好地了解桌面版界面,并提出了需要改进的重点领域。对于重点领域可能是什么,我们没有严格的标准。一般来说,这是我们可以改进的想法,尽管在不同的特异性水平上,例如:“减少混乱的阅读体验”或“语言切换的便捷性”。拟议的重点领域是:

  • 通过合并或折叠导航链接来创建更加集中和“安静”的阅读环境,包括:
    • 主侧边栏导航
    • 条目工具
    • 用户工具
  • 语言切换
  • 搜索
  • 条目导航/目录

除此之外。有更多针对特定功能的想法:阅读首选项(例如,暗模式)、共享按钮、较大的编辑按钮/添加新的文章按钮(对于较小的Wiki)/使其更明显地“参与”,条目统计/活跃度摘要。

第2阶段:开发重点领域、草图和原型创意,开始对话(2019年7月–2019年11月)

主页面:/研究与设计:第2阶段

第一阶段的研究活动和对话帮助我们更好地了解了所处的环境(即桌面界面)。它还帮助我们开发了潜在的重点领域,以进行进一步的调查(同时仍然对新想法持开放态度)。我们的下一个目标是通过草图、原型以及最重要的是与社群的对话来更深入地研究重点领域。 研究和设计活动包括:

  • 了解过去在各个重点领域的工作,研究和实验
  • 获取有关各个重点领域的一般用法数据
  • 勾画出早期想法并制作原型,以帮助促进对话
  • 形成早期设想
  • Wikimania上的用户访谈和其他反馈
  • MediaWiki的社群反馈(即将发生)
  • 对新手和休闲读者的用户访谈(即将进行)
  • 在usertesting.com上进行用户测试(即将进行)

第2阶段的输出将包括:对重点领域内特定界面改进的草图的反应,对改进有待改进的细化(即更自以为是和见多识广的感觉),关于可以实施拟议改进的顺序的建议。

阶段3:持续的用户测试和设计改进(2019年10月–2020年1月)

第3阶段将是一个循环:进一步测试第2阶段中提出的特定思想,然后根据我们的学习来完善我们的设计。 在实际的维基上,有些东西可能需要进行测试。我们将努力识别这些事物,并弄清楚我们计划如何进行测试(即我们将跟踪哪些数据、以及基于看到的行为我们将做出哪些决定)。

第三阶段的输出将包括:几乎完成的设计(尽管我们通常会在实施过程中留出更多的更新空间),以及一个针对在测试中推出产品时我们想要学习的内容的计划,并根据该决定来要决定/更改怎样的信息。

阶段1:设计思路

下面提出了很多想法其中的一些。 请添加您知道的任何重要构想和链接:

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.

关注内容,将内容与用户界面区分开

轻松进行日常操作

  • 带有搜索、目录、编辑链接的粘性标题
  • 更多主要语言切换' (将语言切换器移至页面顶部)
    • 示例:1325像素或更宽且1085像素或更薄的永恒皮肤,...
  • 粘性表格标题
  • Jump to the top of the page
  • Paragraph (¶) symbols on headings: visible only when hovering, next to the edit icon, to easily copy links to sections.

将事物放在合乎逻辑且有用的地方

  • 综合用户菜单 (例如,在下拉菜单中折叠诸如“注销”、“参数设置”和“测试”之类的内容)
  • 登出的参数设置
  • 将条目操作从侧边栏移动到条目内部
    • 示例:Winter1085像素或更细的Timeless皮肤 ...
  • Easily navigate through articles - load page content using JS in background without loading the whole page

Subpages