Reading/Web/Desktop Improvements/第5回試作品テスト

This page is a translated version of the page Reading/Web/Desktop Improvements/Fifth prototype testing and the translation is 76% complete.

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

説明

  1. このページの内容を評価
  2. 以下のフォームを使ってこのページに新しい節を作ります(設問が用意してあります。)
  3. できた節に答えを記入してください。

以下にご留意ください:

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

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

  1. メニュー — 新しいタブで試作品を開きます: https://di-visual-design-menus.web.app/Brown_bear 気に入ったのはどの選択肢で、その理由は? チェックする箇所は、検索メニュー、利用者メニュー、言語切り替えメニュー、ツールメニューのすべてをお願いします。
  2. 枠線、背景色 — 新しいタブで試作品を開きます: https://di-visual-design-borders-bgs.web.app/Zebra 気に入ったのはどの選択肢で、その理由は?
  3. 目次と選択中の節 — 試作品を新しいタブで開いてください: https://di-visual-design-toc-active.web.app/Otter 気に入ったのはどの選択肢で、その理由は?
  4. ヘッダー内のロゴ — 新しいタブで試作品を開きます: https://di-visual-design-header-logo.web.app/Panda 気に入ったのはどの選択肢で、その理由は?
  5. リンクの色 — 試作品を新しいタブで開きます: https://di-visual-design-link-colors.web.app/Salmon この変更の実施前に、作業をしておく必要があると思われる点は、他にも何かありませんか?
  6. フォント サイズ — 新しいタブで試作品を開きます: https://di-visual-design-font-size.web.app/Hummingbird 提案されたフォントの大きさに何か心配な点はありますか?

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)が視覚的なデザイン要素をあまり活用していなかったことがわかります(主に枠線と背景色のみ採用。)

Comparative interfaces
 
Screenshot of Hindi Wikipedia with Monobook skin
 
Screenshot of Japanese Wikipedia with Legacy Vector skin

検討した変更点

メニュー

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

1) トリガーも項目名も青色

 

2) トリガーは青色、項目名は黒色

 

3) トリガーは黒色、項目名は青色

 

4) トリガーも項目名も黒色

 

枠線と背景

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

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

1) minimalist

 

2) 記事の高さに枠線を引く

 

3) 記事の枠線 + ヘッダに下線を引く

 

4) table of contents line + header underline

 

5) table of contents line + page title underline

 

6) 記事の枠線 + ヘッダの背景色(ベタ塗り)

 

6) 記事の枠線 + ヘッダの背景色(グラデーション)

 

8) 記事以外の部分に背景色を塗る(グラデーション)

 

9) 記事以外の部分に背景色を塗る(ベタ塗り)

 

目次に表示中の節を示す

目次は今回、記事に対して脇(右書きで左)に配置して固定、ページをスクロールしてもいつでも見えるようにしました。 新機能として、その時点で読んでいる節を目次に表示するようにしました。(これを「選択中の節」active sectionと呼ぶことにします。) 現状では、記事用タブとトークページ用タブのパターンを踏襲して、選択中の節は目次内で黒色で、選んでいない節は青色でそれぞれ示します。 このパターンのほうが簡略であり、気が散らないこと、どこでも使える点からこちらを推しています。 選択中の節を示すため、その他の書式設定を使っても良いかもしれません。

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

1) ミニマリスト(最もシンプル)

 

2) 太字

 

3) 文字に背景色

 

4) 罫線と枠線

 

5) 罫線と枠線 (2)

 

ヘッダー内のロゴ

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

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

1) 長方形のロゴ、左側

 

2) 正方形のロゴ、左側

 

3) 正方形のロゴ、左側(グラデーション)

 

4) 長方形のロゴ、中央揃え

 

リンクの色

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

現在のリンク色
本文#202122との対照性 テスト結果 テスト結果へのリンク
青色のリンク #0645ad 1.89対1 失敗 結果のリンク
閲覧済リンク #0b0080 1.01:対1 失敗 結果のリンク
提案中のリンク文字列の色
本文#202122との対照性 テスト結果 テスト結果へのリンク
青色のリンク #3366cc 3対1 成功 結果のリンク
閲覧済リンク #795cb2 3.06対1 成功 結果のリンク

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

提案した色を盛り込んだ試作版: 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. 調査により、 文字組みの設定(具体的には文字サイズ、1行の長さと高さ)は閲読経験を左右し、読みやすさ全般(つまり目の負担や疲れ)も、読解や記憶も影響を受けると判明しました。[2][3][4][5] 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.[6][7]

当プロジェクトのこれまでの段階で、行の長さに関する調査を読み、結論として私たちのプロジェクト群では 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.[8]

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.[9][10] 調査で取り上げた範囲(10–26ポイント)は、13.3–34px に換算されます。 結論では 18 ポイントすなわち 24px に匹敵します。

では、文字サイズは 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. (この機会に記事の最大幅も増やす予定で、960px から 1050px になります。) 次の手順としては、ウィキメディアのウィキ群を対象に、文字サイズに関する独自の調査を掘り下げる予定です。

タイポグラフィと読みやすさ研究の注釈付き書誌について

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

フィードバック

脚注

  1. 色のコントラストとアクセス性に関して、WCAG 2 コントラストと色の要件を理解すること: 「リンクの指標を色彩のみに設定する場合」。
  2. Hussain, Sohaib, Ahmed, Qasim Khan, (2011-11-01). "Web readability factors affecting users of all ages". Australian Journal of Basic and Applied Sciences, 2011, 5 (11), pp. 972 - 977.
  3. Nanavati, Bias (2005). "Optimal Line Length in Reading--A Literature Review". Visible Language, v39 n2 p121-145 2005.
  4. Banerjee, Majumdar, Majumdar (2011-01). "Readability, Subjective Preference and Mental Workload Studies on Young Indian Adults for Selection of Optimum Font Type and Size during Onscreen Reading". Al Ameen Journal of Medical Sciences.
  5. Patterson, Tinker (1940). "How to make type readable; a manual for typographers, printers and advertisers, based on twelve years of research involving speed of reading tests given to 33,031 persons". Harper & Brothers Publishers.
  6. TeBlunthuis, Bayer, Vasileva (2019-08). "Dwelling on Wikipedia: investigating time spent by global encyclopedia readers". OpenSym '19: Proceedings of the 15th International Symposium on Open Collaboration.
  7. Moran (2020-04-05). "How People Read Online: New and Old Findings". Nielsen Norman Group.
  8. Rello, Pielot, Marcos (05-2016). "Make It Big! The Effect of Font Size and Line Spacing on Online Readability". Conference on Human Factors in Computing Systems.
  9. Schaeffer, Kyle (30-09-2008) "CSS Font-Size: em vs. px vs. pt vs. percent"
  10. ポイントからピクセルへの換算