Reading/Web/Desktop Improvements/Fifth prototype testing/ja

ベクター2022のデザイン決定について皆さんのフィードバックをお聞きできないでしょうか. ここで言うビジュアルデザインとは、文字の体裁やボタン類、枠線、背景、余白などを考えます.

説明
以下にご留意ください：
 * 1) このページの内容を評価
 * 2) 以下のフォームを使ってこのページに新しい節を作ります（設問が用意してあります. ）
 * 3) できた節に答えを記入してください.
 * これらは試用版のため、ほとんどの機能は動きませんし、触ってみてバグやおかしな挙動に気付くかもしれません.
 * 「新しい節のフォーム」はあいにくビジュアルエディタ（VE）と互換性がありません. ビジュアルエディタをご使用の場合は、手動で新しい節を作り、そこにフィードバックの質問集を転記します（以下の各問. ）
 * 全ての節を検討する必要はありません. 皆さんが最も関心のあるものに集中してください.
 * デザイン、特に視覚面の設計は、主観的かもしれません. もちろん誰でも自分の意見を表明する権利があるわけですが、皆さんの意見が簡潔で使いやすいデザインを目指す私たちのデザインの目標とどう関連するのか、できるだけ論理的に説明するようお願いします.
 * ここに提示していないけれど、優れた選択肢があるかもしれません. 示された選択肢よりも優れていると考えるなら、ぜひ代案を提案してください.  デザイン案／コード書きが好きなみなさんは、自作の試作版やデザイン画などの提案を添付してください（必須用件ではありません. ） デザインファイル：Figma（フィグマ）、Sketch（スケッチ）、Google Drawing（Googleドロー）. 試作版：GitHub（ギットハブ）.
 * 自作のアイデアを提出するときは、このページを編集しないでください. フィードバックのフォームに記入してください.
 * アマチュアのデザイナーの皆さんにも協力してもらいたいですし、経歴の長い専門職の皆さんも尊重します. 受け取ったフィードバックは全件、目を通す所存ですし、最終的にはデザインの専門家の判断にゆだねて最終案を決定する計画です.
 * 回答をメールで送信する方がよければ、宛先はアドレス [mailto:Olga@wikimedia.org olga@wikimedia.org]宛てにお願いします.



フィードバックの設問を読む

 * 1) メニュー — 新しいタブで試作版を開きます.  https://di-visual-design-menus.web.app/Brown_bear. Which option do you prefer and why? Please make sure to check the search menu, user menu, language menu, and tools menu.
 * 2) 枠線、背景色 — 新しいタブで試作版を開きます.  https://di-visual-design-borders-bgs.web.app/Zebra. Which option do you prefer and why?
 * 3) 目次と選択中の節 — 試作版を新しいタブで開いてください：https://di-visual-design-toc-active.web.app/Otter.  Which option do you prefer and why?
 * 4) ヘッダ内のロゴ — 新しいタブで試作版を開きます.  https://di-visual-design-header-logo.web.app/Panda. Which option do you prefer and why?
 * 5) リンク文字列の色 — 試作版を新しいタブで開きます：https://di-visual-design-link-colors.web.app/Salmon.  Is there any additional work you think needs to be done before we make this change?
 * 6) フォントの大きさ — 新しいタブで試作版を開きます.  https://di-visual-design-font-size.web.app/Hummingbird. Do you have any concerns with the proposed font size?

Background and context
Over the past two years we have made various structural changes to the interface. We have moved the search box, the language switcher, and the table of contents. いくつかのリンクとツールをメニュー欄にまとめました. And we have limited the content width, added a sticky header, and moved the page title above the page toolbar. Now, with all of these various elements situated in the updated interface, we are turning our attention to the overall look. Some initial questions our team has been considering are:
 * How can we use visual design to improve the interface?
 * 外装にもう少し、個性を持たせたほうが良いですか？（たとえばレガシー版ベクターの青い罫線とかグラデーションほか）
 * At what point there's too much of it, such that it might become distracting or make the interface confusing?
 * What if we do as little as possible, and take a super minimalist approach similar to the original Wikipedia interface?

Historically our approach has been simple and functional. There is little styling (if any) to the HTML elements, which simplifies the interface both for people using it and for people designing and building it. It also means that our visual design is rather timeless. We don't chase the trends and don't need to make changes every couple of years. 以下の画面キャプチャを比べてみると、モノブック（Monobook）とレガシー版ベクター（Legacy Vector）が視覚的なデザイン要素をあまり活用していなかったことがわかります（主に枠線と背景色のみ採用. ）



メニュー
We use several menus in our interface. Thus far our approach to how we style menus has not been consistent. We have an opportunity, with Vector 2022, to develop a more accessible and consistent approach to the styling of our menus. In their most simple form menus have two elements: a menu trigger, and menu items. 青色か黒色か（メニューのトリガーと選択肢の両方）、太字にするかしないか（メニューのトリガー）検討中です.

選択肢を盛り込んだ試作版のリンク：https://di-visual-design-menus.web.app/Brown_bear



枠線と背景
インタフェースの領域を示すため、枠線や背景色を付けるほうが良いですか？ 実施するならどんな見た目が良いですか？ すでに「背景」節と文脈の節で述べたように、モノブックもベクターも背景色や枠線を使い、内容とインターフェースを区切っています. Backgrounds and borders can also add personality to the interface. However, it is difficult to know how functional or necessary they are. いくつかのオプションを設けて、枠線と背景色を増やしたり濃くしてあります.

選択肢を盛り込んだ試作版のリンク：https://di-visual-design-borders-bgs.web.app/Zebra



目次に表示中の節を示す
目次は今回、記事に対して脇（右書きで左）に配置して固定、ページをスクロールしてもいつでも見えるようにしました. 新機能として、その時点で読んでいる節を目次に表示するようにしました. （これを「選択中の節」active sectionと呼ぶことにします. ） 現状では、記事用タブとトークページ用タブのパターンを踏襲して、選択中の節は目次内で黒色で、選んでいない節は青色でそれぞれ示します. We like this pattern because it is simple, not distracting, and used elsewhere. 選択中の節を示すため、その他の書式設定を使っても良いかもしれません.

選択肢を盛り込んだ試作版のリンク：https://di-visual-design-toc-active.web.app/Otter



ヘッダー内のロゴ
Monobook とレガシー Vector のどちらも角形のウィキペディアのロゴと大きな地球を組み合わせてあります. 2022年版ベクターにさまざまな変更が加わったことから、より小さめで長方形に配置したロゴを端にレイアウトした方がバランスが良さそうです. しかしながら、さまざまな選択肢を試してみたいと思いました. これらの選択肢を試すなら、ぜひさまざまな画面サイズで実施してください. 画面サイズに応じて、レイアウトのバランスが変動するからです.

選択肢を盛り込んだ試作版：https://di-visual-design-header-logo.web.app/Panda



リンクの色
The World Wide Web Consortium (W3C) have Web Content Accessibility Guidelines. これらのガイドラインでは、リンクの色コントラストを最小にしてあります. 「使いやすさとアクセス性の両面から、リンクには既定で下線を付けるべきです. さもなければ、リンク文字列には地の文との比率を最小で 3:1 とすること、さらに彩色しない指標（一般に下線）をほどこし、マウスを当てたりキーボード操作でフォーカスしたときに現れるように指定します. 」 既定ではリンク文字列に架線をつけないため、私たちがリンク文字列に採用する色はコントラスト要件 3:1 を満たす必要があります. 地の文とリンク文字列の色について、コントラストを調べるには、WebAIM 提供のコントラストチェッカーを利用します.

さらに加えて、提案の青色のリンクはすでにウィキメディアのデザインのスタイルガイドに採用されており、私たちのモバイル版のウェブサイト、あるいはさまざまなプロジェクトのロゴにも採用されており、一貫性が保てると予想されます.

提案した色を盛り込んだ試作版：https://di-visual-design-link-colors.web.app/Salmon 

フォント サイズ
The mission of our movement is to provide all of the world's knowledge to as many people as possible. Currently the majority of the knowledge we offer is in the form of text. Research has shown that typographic settings (such as font size, line length, and line height) influence the experience of reading, both in terms of general comfort (i.e. eye strain and fatigue), and comprehension and retention. Therefore it is important for us to use optimal typographic settings in our interface. An important factor to keep in mind when determining what is optimal for our projects is that people engage both in in-depth reading, as well as scanning of text.

当プロジェクトのこれまでの段階で、行の長さに関する調査を読み、結論として私たちのプロジェクト群では 1 行あたり半角で 90文字–140文字の範囲が最適と結論しました（追記へのリンク）. Recently we have spent time reading research studies about font size. The most convincing, and directly applicable, research we have found thus far is a 2016 study that used eye-tracking to evaluate the affects of font size and line spacing for people reading Wikipedia:

Using a hybrid-measures design, we compared objective and subjective readability and comprehension of the articles for font sizes ranging from 10 to 26 points, and line spacings ranging from 0.8 to 1.8 (font: Arial). Our findings provide evidence that readability, measured via mean fixation duration, increased significantly with font size. Further, comprehension questions had significantly more correct responses for font sizes 18 and 26. These findings provide evidence that text-heavy websites should use fonts of size 18 or larger and use default line spacing when the goal is to make a web page easy to read and comprehend. Our results significantly differ from previous recommendations, presumably, because this is the first work to cover font sizes beyond 14 points.

Firstly, we need to convert the measure used by the researchers (points) into the measure that browsers ultimately render (px). The conversion is: 1px = 72pt / 96. So the range studied in the research (10–26 points) is equivalent to 13.3–34px. Their conclusion, 18 points, is equal to 24px.

''' So should we increase the font size to 24px? ''' The research studied in-depth reading, however people often scan the page in order to find a certain piece of information. This is a different reading behavior, that arguably benefits from a smaller font size than in-depth reading does. Our conservative proposal, taking into account scanning, is to increase the font size to 16px to begin with. (We would be increasing the maximum width of the article as well, from 960px to 1050px.) As a next step, we will plan to conduct our own research to further study font size on Wikimedia wikis.

Annotated bibliography of typography and readability research

提案した大きさのフォントを盛り込んだ試作版：https://di-visual-design-font-size.web.app/Hummingbird

Feedback

 * Reading/Web/Desktop Improvements/Fifth prototype testing/Feedback