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

Chúng tôi mong bạn có thể cung cấp phản hồi về một vài quyết định về mặt thiết kế trực quan cho Vector 2022. Thiết kế trực quan tức là việc thiết kế các từ ngữ, nút, viền, phông nền và khoảng trống.

Hướng dẫn
Xin hãy lưu ý:
 * 1) Xem trang này để hiểu bối cảnh
 * 2) Tạo một mục mới trên trang này bằng cách sử dụng mẫu dưới đây (nó sẽ được điền sẵn trước với những câu hỏi để bạn trả lời).
 * 3) Điền phản hồi của bạn trong mục bạn mới tạo.
 * Đây là những nguyên mẫu, hầu hết các tính năng sẽ không hoạt động, và có thể bạn sẽ bắt gặp một số lỗi.
 * "Mẫu mục mới" rất tiếc là không tích hợp với trình Sửa đổi trực quan (VE). Nếu bạn đang sử dụng VE, xin hãy tạo một mục mới bằng tay và copy và dán các câu hỏi phản hồi vào (được liệt kê dưới đây).
 * Bạn không cần phải xem lại từng mục; hãy tập trung vào những mục nào bạn thấy thú vị nhất.
 * Thiết kế, và cụ thể là thiết kế trực quan, có thể mang tính chủ quan. Trong khi chúng ta đều có quyền nêu lên ý kiến của mình, chúng tôi mong các bạn hãy cố hết sức giải thích ý của mình, và việc những ý đó có mối liên hệ thế nào đến mục đích thiết kế nhắm tới tính đơn giản và tính khả dụng của chúng tôi.
 * Có thể sẽ có những lựa chọn tốt hơn không được liệt kê ở đây. Hãy thoải mái gợi ý những gì khác mà bạn nghĩ sẽ tốt hơn so với những lựa chọn được trình bày. Nếu bạn có khả năng thiết kế và/hoặc phần code, đừng chần chừ gửi cho chúng tôi bản thử hoặc nguyên mẫu của ý tưởng của chính bạn (không bắt buộc). Các file thiết kế: Figma, Sketch, Google Drawing. Nguyên mẫu: GitHub.
 * Nếu bạn gửi ý tưởng của riêng mình, xin hãy đừng sửa đổi trang này; hãy thêm chúng vào mẫu phẩn hồi của bạn.
 * Chúng tôi trân trọng những nhà thiết kế nghiệp dư, và tôn trọng những nhà thiết kế đã có kinh nghiệm. Chúng tôi sẽ xem xét tất cả các phản hồi và ý tưởng, và sau cùng sẽ dựa vào đánh giá của các nhà thiết kế có kinh nghiệm để đưa ra quyết định cuối cùng.
 * Nếu bạn muốn gửi phản hồi qua email, hãy gửi tới [mailto:Olga@wikimedia.org olga@wikimedia.org].

Xem trước Câu hỏi Phản hồi

 * 1) Menu — mở nguyên mẫu trong tab mới: https://di-visual-design-menus.web.app/Brown_bear. Bạn thích lựa chọn nào hơn, tại sao? Hãy chắc chắn rằng bạn đã xem menu tìm kiếm, menu người dùng, menu ngôn ngữ và menu công cụ.
 * 2) Viền và nền — mở nguyên mẫu trong tab mới: https://di-visual-design-borders-bgs.web.app/Zebra. Bạn thích lựa chọn nào hơn, tại sao?
 * 3) Mục đang đọc trong mục lục — mở nguyên mẫu trong tab mới: https://di-visual-design-toc-active.web.app/Otter. Bạn thích lựa chọn nào hơn, tại sao?
 * 4) Logo ở thanh đầu trang — mở nguyên mẫu trong tab mới: https://di-visual-design-header-logo.web.app/Panda. Bạn thích lựa chọn nào hơn, tại sao?
 * 5) Màu liên kết — mở nguyên mẫu trong tab mới: https://di-visual-design-link-colors.web.app/Salmon. Còn điều gì bạn nghĩ chúng tôi nên làm thêm trước khi chúng tôi thực hiện thay đổi này?
 * 6) Kích cỡ font — mở nguyên mẫu trong tab mới: https://di-visual-design-font-size.web.app/Hummingbird. Bạn có lo ngại gì với kích cỡ font được đề xuất không?

Bối cảnh
Trong vòng hai năm qua, chúng tôi đã thực hiện nhiều thay đổi về mặt cấu trúc đối với giao diện. Chúng tôi đã di chuyển hộp tìm kiến, nút thay đổi ngôn ngữ, và mục lục. Chúng tôi đã sắp xếp những liên kết và công cụ nhất định vào các menu. Và chúng tôi đã giới hạn độ rộng nội dung, thêm một thanh đầu trang dính, và di chuyển tên bài viết lên trên thanh công cụ trang. Giờ đây, với tất cả những yếu tố này được đặt vào trong giao diện đã cập nhật, chúng tôi sẽ chuyển sự chú ý của mình vào bộ mặt tổng thể. Một số câu hỏi ban đầu mà nhóm chúng tôi đang cân nhắc là:
 * Chúng tôi có thể sử dụng thiết kế trực quan để cải thiện giao diện như thế nào?
 * Chúng tôi có nghĩ có tồn tại giá trị trong giao diện không nếu như nó có một chút cá tính thêm vào (ví dụ như đường màu xanh và màu nền nhạt dần đi (gradient) trong bản Vector cũ)?
 * Ở điểm nào thì sẽ là quá nhiều, đến mức nó khiến làm sao nhãng hoặc khiến giao diện bị rối?
 * Sẽ ra sao nếu chúng tôi làm ít nhất có thể, và tiếp cận theo hướng siêu tối giản tương tự như giao diện Wikipedia ban đầu?

Trong quá khứ, cách tiếp cận của chúng tôi vẫn luôn là đơn giản và thiết thực. Có ít sự tạo kiểu (nếu như có bất cứ chút gì) đối với các yếu tố HTML, thứ khiến làm đơn giản giao diện cho cả người sử dụng nó và người thiết kế và xây dựng nó. Thế cũng có nghĩa là thiết kế về mặt trực giác của chúng tôi sẽ không bị lỗi thời. Chúng tôi không chạy theo xu hướng và không cần phải thay đổi sau mỗi vài năm. Nhìn vào các bức screenshot dưới đây, có thể thấy Monobook và Vector cũ đều dùng thiết kế trực quan một cách tối giản (chủ yếu là màu nền và viền).

Menu
Chúng tôi sử dụng một số menu khác nhau trong giao diện. Cho đến giờ, hướng tiếp cận của chúng ta trong việc thiết kế menu vẫn chưa được thống nhất. Chúng ta có một cơ hội, với Vector 2022, để phát triển một hướng tiếp cận gần gũi và ổn định hơn trong việc thiết kế menu. Ở dạng đơn giản nhất, menu có hai yếu tố: nút bung menu và các mục trong menu. Chúng tôi đang cân nhắc giữa màu đen và xanh (cho cả nút bung menu lẫn các lựa chọn) và in đậm hay không in đậm (cho nút bung menu).

Liên kết tới nguyên mẫu với các lựa chọn: https://di-visual-design-menus.web.app/Brown_bear

Viền và nền
Chúng tôi có nên thêm viền và nền để giúp phân chia các khu vực của giao diện, và nếu có thì nên thiết kế chúng thế nào? As we mentioned in the Background and context section above, both Monobook and Vector use backgrounds and borders to separate the interface from the content. Backgrounds and borders can also add personality to the interface. However, it is difficult to know how functional or necessary they are. We've created several options with progressively more/darker borders and backgrounds.

Link to prototype with options: https://di-visual-design-borders-bgs.web.app/Zebra

Active section in the table of contents
The table of contents is now on the (left) side of the article, and is fixed in place so it remains visible as you scroll down the page. A new feature is that the table of contents indicates which section of the article you are currently reading (we call this the "active section"). Currently, following from a pattern used on the Article/Talk tabs, the active section in the table of contents is black, and the non-active sections are blue. We like this pattern because it is simple, not distracting, and used elsewhere. We could also use additional styling to indicate the active section.

Link to prototype with options: https://di-visual-design-toc-active.web.app/Otter

Logo in the header
Monobook and Legacy Vector both feature a square Wikipedia logo with a large globe. Given the various changes to Vector 2022 a smaller, rectangular logo in the corner may fit the layout better. However, we wanted to make sure to try various options. Please remember to try these options at various screen sizes, as the balance of the layout shifts depending on your screen size.

Link to prototype with options: https://di-visual-design-header-logo.web.app/Panda

Link colors
The World Wide Web Consortium (W3C) have Web Content Accessibility Guidelines. These guidelines define a minimum contrast level for links: "For usability and accessibility, links should be underlined by default. Otherwise, link text must have at least 3:1 contrast with surrounding body text, and must present a non-color indicator (typically underline) on mouse hover and keyboard focus." Since we do not underline links by default, our link color choice must meet the 3:1 contrast requirement. In order to check the contrast of our links with our body text we can use the contrast checker provided by WebAIM.

Additionally, the proposed blue link color is already part of the Wikimedia Design Style Guide, and is used on our mobile websites as well as in various project logos, so we would be gaining consistency.

Link to prototype with proposed colors: https://di-visual-design-link-colors.web.app/Salmon

Font size
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.

In a previous phase of the project we read research studies regarding the line length and concluded that between 90–140 characters per line is optimal for our projects (link to writeup). 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

Link to prototype with proposed font size: https://di-visual-design-font-size.web.app/Hummingbird