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

نود تلقي بعض ملاحظاتكم بخصوص بعض قرارات التصميم المرئي لـ فيكتور 2022. نعني بالتصميم المرئي تصميم النص والأزرار والحدود والخلفيات والتباعد.

تعليمات
لا تنسى:
 * 1) راجع هذه الصفحة في سياقها
 * 2) أنشئ قسمًا جديدًا في هذه الصفحة باستخدام النموذج أدناه (سيتم ملؤه مسبقًا بالأسئلة التي يمكنك الرد عليها).
 * 3) املأ ملاحظاتك في القسم الذي تم إنشاؤه حديثًا.
 * هذه نماذج أولية، ومعظم الميزات لا تعمل، وقد تكون هناك أخطاء أو مفاجآت أخرى ستصادفك.
 * "نموذج القسم الجديد" للأسف غير متلائم مع المحرر المرئي. إذا كنت تستخدم المحرر المرئي، رجاءا أنشئ قسما جديدا يدويًا وانسخ والصق أسئلة التعليقات (المدرجة أدناه).
 * لا تحتاج لمراجعة كل قسم؛ ركزعلى الأشياء الأكثر أهمية بالنسبة لك.
 * يمكن أن يكون التصميم والتصميم المرئي على وجه التحديد تصميمين ذاتيين. الجميع له الحق في إبداء رايه، نطلب منكم فقط أن تفسر و تشرح لنا آراءك، ومدى ارتباطها بأهداف التصميم الخاصة بنا والمتعلقة بالبساطة وسهولة الاستخدام.
 * قد تكون هناك خيارات جيدة لم يتم تقديمها هنا. لا تتردد في اقتراح شيء آخر إذا كنت تعتقد أنه سيعمل بشكل أفضل من الخيارات المعروضة. إذا أعجبك التصميم و/أو الترميز ، فلا تتردد في تضمين نماذج بالأحجام الطبيعية أو نماذج أولية لأفكارك (ليس إجباري). ملفات التصميم: فيجما ، سكتش ، رسومات جوجل. النموذج الأولي: غيت هاب.
 * إذا كنت تعبر عن أفكارك، رجاءا لا تعدل هذه الصفحة؛ قم بتضمينها في نموذج ملاحظاتك.
 * نحن نقدر المصممين الهواة ونحترم المصممين ذوي الخبرة. سندرس جميع التعليقات والأفكار، سنعتمد في الأخير على قرار المصممين الخبراء.
 * إذا كنت تفضل إرسال تعليقات عبر البريد الإلكتروني ، فيرجى إرسال التعليقات إلى [mailto:Olga@wikimedia.org 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. هل حجم الخط المقترح لا يناسب؟

الخلفية والسياق
على مدار العامين الماضيين، قمنا بإجراء العديد من التغييرات الهيكلية على الواجهة. لقد نقلنا شريط البحث, ومبدل اللغات, وجدول المحتويات. لقد قمنا بتنظيم بعض الروابط والأدوات في قوائم. وقمنا بتقييد عرض المحتوى ، وأضفنا  رأسية ثابتة ، ونقلنا عنوان الصفحة أعلى شريط أدوات الصفحة. الآن، مع توفر كل هذه العناصر المختلفة في الواجهة الجديدة، حولنا تركيزنا نحو المظهر العام. حاليا يعمل فريقنا على هذه الأسئلة: معروف أن نهجنا دوما كان بسيطًا وعمليًا. هناك القليل من التصميم (إن وجد) لعناصر HTML ، مما يبسط الواجهة لكل من الأشخاص الذين يستخدمونها والأشخاص الذين يصممونها ويبنونها. هذا يعني أيضًا أن تصميمنا المرئي إلى حد ما صالح على الدوام. الهدف ليس تتبع الترند أو إجراء تغييرات كل عامين. بالنظر إلى لقطات الشاشة أدناه ، يمكننا أن نرى كيف يستخدم مونوبوك و فكتور القديم أو التصميم المرئي بشكل مقتصد (بشكل أساسي الحدود وألوان الخلفية).
 * كيف يمكننا استخدام التصميم المرئي لتحسين الواجهة؟
 * هل تجد فائدة في بعض السمات الإضافية لمظهر الواجهة (كالخطوط الزرقاء والتدرجات في واجهة فكتور القديمة)؟
 * في نقطة يوجد منها الكثير، بحيث تصبح مبعثرة أو تجعل إستيعاب الواجهة صعب؟
 * ماذا لو قمنا بتعديلات قليلة، واتخذنا أسلوبًا بسيطًا للغاية مشابهًا لالواجهة الأصلية لويكيبيديا؟

القوائم
نحن نستخدم عدة قوائم في واجهتنا. حتى الآن ، لم يكن نهجنا في كيفية تصميم القوائم متسقًا. لدينا فرصة ، مع فكتور 2022، لتطوير نهج أكثر اتساقًا ويمكن الوصول إليه لتصميم قوائمنا. تحتوي القوائم في أبسط أشكالها على عنصرين: مشغل القائمة وعناصر القائمة. نحن نفكر في اللون الأزرق مقابل الأسود (لكل من مشغل القائمة وخيارات القائمة) ، وبولد مقابل غير الغامق (لمشغل القائمة).

رابط نحو النموذج الأولي مع الخيارات: https://di-visual-design-menus.web.app/Brown_bear

الحدود والخلفيات
هل يجب أن نضيف حدودًا وخلفيات للمساعدة في تقسيم مناطق الواجهة ، وإذا كان الأمر كذلك فكيف يجب أن تبدو؟ كما ذكرنا في قسم الخلفية والسياق أعلاه ، يستخدم كل من مونوبوك و فكتور الخلفيات والحدود لفصل الواجهة عن المحتوى. يمكن أيضًا أن تضيف الخلفيات والحدود طابعًا مميزًا إلى الواجهة. ومع ذلك ، من الصعب معرفة مدى وظيفتها أو أهميتها. لقد أنشأنا عدة خيارات بحدود وخلفيات أكثر / أغمق تدريجيًا.

الارتباط بالنموذج الأولي مع الخيارات: https://di-visual-design-borders-bgs.web.app/Zebra

القسم النشط في جدول المحتويات
يوجد جدول المحتويات الآن على الجانب (الأيسر) من المقالة ، وهو ثابت في مكانه بحيث يظل مرئيًا أثناء التمرير لأسفل الصفحة. ميزة جديدة هي أن جدول المحتويات يشير إلى قسم المقالة الذي تقرأه حاليًا (نسمي هذا "القسم النشط"). حاليًا ، وفقًا للنمط المستخدم في علامتي التبويب مقالة / نقاش ، يكون القسم النشط في جدول المحتويات باللون الأسود ، والأقسام غير النشطة باللون الأزرق. نحن نحب هذا النمط لأنه بسيط ولا يشتت الانتباه ويستخدم في مكان آخر. يمكننا أيضًا استخدام أسلوب إضافي للإشارة إلى القسم النشط.

رابط إلى النموذج الأولي مع الخيارات: https://di-visual-design-toc-active.web.app/Otter

الشعار في رأس الواجهة
يتميز كل من مونوبوك و فكتور القديم بمربع شعار ويكيبيديا به كرة أرضية كبيرة. نظرًا للتغييرات المختلفة التي تم إجراؤها على فكتور 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. 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.

رابط للنموذج الأولي مع الألوان المقترحة: https://di-visual-design-link-colors.web.app/Salmon

حجم الخط
تتمثل مهمة حركتنا في توفير كل معرفة العالم لأكبر عدد ممكن من الناس. 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." Users often scan the page in order to find a certain piece of information. This, however, wasn't included in the study. To accommodate this, we are recommending a font size of 16px instead of their conclusion of 18px. We would be increasing the maximum width of the article as well, from 960px to 1050px.

Annotated bibliography of typography and readability research

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

المراجع
<!-- This prototype has various options for how menu triggers and menu items are styled. (Menu triggers are the things you click on to open the menus, and menu items are the items within the menu). Please make sure to check the search menu, user menu, language menu, and tools menu. Use the options panel in the bottom corner to try the different options.

This prototype has various options for borders and backgrounds. Borders and backgrounds can divide up the regions of the interface, and frame the content. Use the options panel in the bottom corner to try the different options. Also please try the options at various screen sizes. (Reminder: all of these options would get additional fine tuning.)

This prototype has various options for how the active section in the table of contents is styled. Scroll down the page to see the active section change. You may want to visit a few different pages to see a range of tables of contents. Use the options panel in the bottom corner to try the different options.

This prototype has various options for how the logo is displayed in the header. Please keep in mind that all of these options would get additional fine tuning the spacing. Use the options panel in the bottom corner to try the different options. Also please try the options at various screen sizes.

We are planning on updating the link colors so that they meet the WCGA contrast requirement. The change is quite subtle. Use the options panel in the bottom corner to view the updated link colors. The third and last links in the lead paragraph are automatically rendered as visited links.

We are proposing increasing the font size for article text from 14px to 16px. Use the options panel in the bottom corner to switch between the current font size and the proposed font size. -->