Đọc/Web/Cải thiện phiên bản máy tính/Thử nghiệm nguyên mẫu lần năm

From mediawiki.org
This page is a translated version of the page Reading/Web/Desktop Improvements/Fifth prototype testing and the translation is 90% complete.
Outdated translations are marked like this.

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

  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.

Xin hãy lưu ý:

  • Đâ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 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).

Giao diện so sánh
Screenshot Wikipedia tiếng Hindi với giao diện Monobook
Screenshot Wikipedia tiếng Nhật với giao diện Vector cũ

Các thay đổi được cân nhắc

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 tạo kiểu cho 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

1) nút bung màu xanh, lựa chọn màu xanh

2) nút bung màu xanh, lựa chọn màu đen

3) nút bung màu đen, lựa chọn màu xanh

4) Nút bung màu đen, lựa chọn màu đen

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? Như chúng tôi đã đề cập ở mục Bối cảnh ở trên, cả Monobook và Vector sử dụng nền và viền để chia tách giao diện khỏi nội dung. Nền và viền cũng đồng thời bổ sung cá tính cho giao diện. Tuy nhiên, sẽ khó để biết xem chúng hữu dụng và cần thiết như thế nào. Chúng tôi đã tạo ra một số lựa chọn với nhiều viền và nền tăng dần lên về độ nhiều và tối.

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

1) tối giản

1) minimalist

2) viền bài viết

3) viền bài viết + gạch chân thanh đầu trang

4) đường kẻ mục lục + gạch chân thanh đầu trang

5) đường kẻ mục lục + gạch chân tiêu đề bài viết

6) viền bài viết + nền thanh đầu trang (một màu)

7) viền bài viết + nền thanh đầu trang (màu giảm dần)

8) nền ngoài bài viết (màu giảm dần)

9) nền ngoài bài viết (một màu)

Mục đang đọc trong mục lục

Mục lục giờ nằm ở ngoài (phía bên trái) bài viết, và được cố định ở một chỗ để luôn có thể nhìn thấy nó khi cuộn trang. Một tính năng mới chính là mục lục sẽ chỉ dẫn bạn hiện đang đọc mục nào của bài viết. Hiện tại, theo mô tuýp được sử dụng trên tab Bài viết/Thảo luận, mục đang đọc trong mục lục sẽ có màu đen, và những mục khác sẽ có màu xanh. Chúng tôi thích mô tuýp này bởi vì nó đơn giản, không gây mất tập trung, và được sử dụng ở nơi khác. Chúng tôi cũng có thể sử dụng các cách trình bày khác để chỉ thị mục đang đọc.

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

1) tối giản

2) in đậm

3) nền

4) đường kẻ với viền

5) đường kẻ với viền (2)

Logo ở thanh đầu trang

Monobook và Vector cũ đều xuất hiện một logo Wikipedia hình vuông với một quả địa cầu lớn. Xét những thay đổi của Vector 2022, một logo hình chữ nhật nhỏ hơn ở góc sẽ phù hợp với tổng thể hơn. Tuy nhiên, chúng tôi muốn đảm bảo sẽ thử nhiều lựa chọn khác nhau. Xin hãy nhớ thử những lựa chọn này ở các kích cỡ màn hình khác nhau, vì sự cân bằng của bố cục sẽ thay đổi tùy thuộc vào kích cỡ màn hình.

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

1) Logo chữ nhật bên trái

2) Logo vuông bên trái

3) Logo vuông bên trái (màu giảm dần)

4) Logo chữ nhật ở giữa

Màu liên kết

Tổ chức World Wide Web Consortium (W3C)Hướng dẫn về Tính truy cập được của Nội dung Web. Những hướng dẫn này định nghĩa một cấp độ tương phản tối thiểu cho liên kết: "Vì tính khả dụng và dễ tiếp cận, các liên kết nên được mặc định gạch chân. Nếu không, chữ liên kết phải có độ tương phản ít nhất là 3:1 so với các chữ xung quanh, và phải hiển thị một dấu hiệu chỉ dẫn không phải màu sắc (thường là gạch chân) khi di chuột đến và tập trung bàn phím."[1] Vì chúng ta không mặc định gạch chân liên kết, lựa chọn màu sắc liên kết của chúng ta phải thỏa mãn được yêu cầu tương phản 3:1. Để có thể kiểm tra độ tương phản của liên kết với chữ xung quanh trên Wikipedia, chúng ta có thể sử dụng bộ kiểm tra tương phản do WebAIM cung cấp.

Màu liên kết hiện tại
Màu sắc Tương phản với chữ nội dung #202122 Kết quả kiểm tra Liên kết trỏ tới kết quả kiểm tra
Liên kết xanh #0645ad 1.89:1 Trượt liên kết tới kết quả
Liên kết đã ghé thăm trước đây #0645ad 1.01:1 Trượt liên kết tới kết quả
Màu sắc liên kết đề xuất
Màu sắc Tương phản với chữ nội dung #202122 Kết quả kiểm tra Liên kết trỏ tới kết quả kiểm tra
Liên kết xanh #3366cc 3:1 Qua liên kết tới kết quả
Liên kết đã ghé thăm trước đây #795cb2 3.06:1 Qua liên kết tới kết quả

Ngoài ra, màu liên kết xanh đề xuất vốn đã là xuất hiện trong Hướng dẫn Tạo kiểu Thiết kế Wikimedia, và được sử dụng trên các website trên nền tảng di động của chúng ta cũng như nhiều logo dự án khác nhau, vậy nên chúng ta nên tiến tới thống nhất về mặt màu sắc.

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

Màu liên kết hiện tại

Màu đề xuất


Kích cỡ font

Sứ mệnh của chúng ta là cung cấp tri thức của toàn bộ thế giới đến với càng nhiều người càng tốt. Hiện tại, đa phần tri thức chúng ta cung cấp là ở dưới dạng chữ. Các nghiên cứu đã chỉ ra rằng cài đặt chữ viết (ví dụ như kích cỡ font, độ dài dòng chữ, và chiều cao dòng) ảnh hưởng tới trải nghiệm đọc, cả về độ thoải mái nói chung (mỏi, căng thẳng mắt) và độ đọc hiểu và lưu giữ thông tin.[2][3][4][5] Vì vậy, việc sử dụng cài đặt chữ viết tối ưu trong giao diện của chúng ta là rất quan trọng. Một yếu tố quan trọng cần lưu ý khi quyết định điều gì là tối ưu cho dự án của chúng ta đấy là mọi người tiến hành cả việc đọc sâu cũng như đọc lướt chữ.[6][7]

Trong một giai đoạn trước đây của dự án, chúng tôi đã đọc các nghiên cứu về độ dài dòng chữ và kết luận rằng từ 90-140 chữ một dòng là tối ưu cho dự án của chúng ta (liên kết tới nội dung này). Gần đây, chúng tôi đã dành thời gian đọc các nghiên cứu về kích cỡ font chữ. Nghiên cứu có tính ứng dụng trực tiếp và thuyết phục nhất mà chúng tôi tìm thấy cho tới nay là một nghiên cứu vào năm 2016 sử dụng công cụ theo dõi chuyển động mắt để đánh giá tác động của kích cỡ font chữ và khoảng cách dành cho những người đọc Wikipedia:

Sử dụng một thiết kế có đơn vị đo lai, chúng tôi so sánh khả năng đọc hiểu bài viết chủ quan và khách quan đối với kích cỡ font từ 10 đến 26 điểm, và cách dòng từ 0,8 đến 1,8 (font: Arial). Phát hiện của chúng tôi cung cấp bằng chứng rằng khả năng đọc, được tính bằng thời lượng cố định trung bình, đã tăng lên đáng kể với kích thước phông chữ. Hơn nữa, các câu hỏi về khả năng hiểu có câu trả lời đúng hơn đáng kể cho các cỡ chữ 18 và 26. Những phát hiện này cung cấp bằng chứng cho thấy các trang web có nhiều văn bản nên sử dụng phông chữ có kích thước 18 trở lên và sử dụng khoảng cách dòng mặc định nếu mục tiêu là làm cho trang web dễ đọc và dễ hiểu. Kết quả của chúng tôi có lẽ khác biệt đáng kể so với các đề xuất trước đó, vì đây là công trình đầu tiên đề cập đến kích thước phông chữ vượt quá 14 điểm.[8]

Đầu tiên, chúng ta cần chuyển đổi đơn vị đo được các nhà nghiên cứu sử dụng (điểm) thành đơn vị đo mà các trình duyệt hiển thị cuối cùng (px). Chuyển đổi: 1px = 72pt / 96.[9][10] Vì vậy, phạm vi được nghiên cứu (10–26 điểm) tương đương với 13,3–34px. Kết luận của họ, 18 điểm, bằng 24px.

Vậy chúng ta có nên tăng cỡ chữ lên 24px không? Công trình nghiên cứu nghiên cứu về việc đọc chuyên sâu, tuy nhiên mọi người thường đọc lướt trang để tìm một đoạn thông tin nhất định. Đây là một hành vi đọc khác, được cho là có lợi từ kích thước phông chữ nhỏ hơn so với đọc chuyên sâu. Đề xuất thận trọng của chúng tôi, có tính đến việc đọc lướt, là trước hết tăng kích thước phông chữ lên 16px. (Chúng tôi cũng sẽ tăng chiều rộng tối đa của bài viết từ 960px lên 1050px.) Bước tiếp theo, chúng tôi sẽ lên kế hoạch thực hiện nghiên cứu của riêng mình để nghiên cứu sâu hơn về kích thước phông chữ trên các wiki của Wikimedia.

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

Feedback

Tham khảo

  1. Contrast and Color Accessibility, Understanding WCAG 2 Contrast and Color Requirements: "Nhận diện liên kết chỉ với màu sắc".
  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. Trình chuyển đổi PT sang PX