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

ألوان الروابط
لدى اتحاد شبكة الويب العالمية (W3C) إمكانية الوصول إلى إرشادات محتوى الويب. تحدد هذه الإرشادات الحد الأدنى من مستوى التباين للروابط: "لسهولة الاستخدام وإمكانية الوصول ، يجب تسطير الروابط افتراضيًا. بخلاف ذلك ، يجب أن يحتوي نص الرابط على تباين 3:1 على الأقل مع النص الأساسي المحيط به ، ويجب أن يقدم مؤشرًا غير ملون (مسطرًا عادةً) عند تحريك الماوس وتركيز لوحة المفاتيح. " نظرًا لأننا لا نضع خطًا تحت الروابط افتراضيًا ، يجب أن يفي اختيار لون الارتباط بمتطلبات التباين 3:1. للتحقق من تباين روابطنا مع النص الأساسي لدينا ، يمكننا استخدام [مدقق التباين https://webaim.org/resources/linkcontrastchecker/] المقدم من [h ttps://webaim.org/ WebAIM].

بالإضافة إلى ذلك ، فإن لون الارتباط الأزرق المقترح هو بالفعل جزء من [1$ دليل أسلوب تصميم ويكيميديا] ، ويتم استخدامه على مواقع الويب للجوال الخاصة بنا وكذلك في العديد من شعارات المشاريع ، لذلك سنكتسب الاتساق.

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

حجم الخط
تتمثل مهمة حركتنا في توفير كل معرفة العالم لأكبر عدد ممكن من الناس. Currently the majority of the knowledge we offer is in the form 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). لقد أمضينا مؤخرًا وقتًا في قراءة الدراسات البحثية حول حجم الخط. البحث الأكثر إقناعًا وقابلية للتطبيق بشكل مباشر ، والذي وجدناه حتى الآن هو دراسة أجريت عام 2016 استخدمت تتبع العين لتقييم تأثير حجم الخط وتباعد الأسطر للأشخاص الذين يقرؤون ويكيبيديا:

"باستخدام تصميم مقاييس مختلطة ، قمنا بمقارنة قابلية القراءة الموضوعية والذاتية والفهم للمقالات لأحجام الخطوط التي تتراوح من 10 إلى 26 نقطة ، وتباعد الأسطر من 0.8 إلى 1.8 (الخط: Arial). تقدم النتائج التي توصلنا إليها دليلًا على أن قابلية القراءة ، المقاسة من خلال متوسط مدة التثبيت ، زادت بشكل ملحوظ مع حجم الخط. علاوة على ذلك ، كان لأسئلة الاستيعاب إجابات صحيحة بشكل ملحوظ لأحجام الخطوط 18 و 26. توفر هذه النتائج دليلاً على أن مواقع الويب التي تحتوي على نصوص ثقيلة يجب أن تستخدم خطوطًا بحجم 18 أو أكبر وتستخدم تباعد الأسطر الافتراضي عندما يكون الهدف هو تسهيل قراءة صفحة الويب وفهمها. تختلف نتائجنا اختلافًا كبيرًا عن التوصيات السابقة ، على الأرجح ، لأن هذا هو العمل الأول لتغطية أحجام الخطوط التي تتجاوز 14 نقطة." Firstly, we need to convert the measure used by the researchers (points) into the measure that browsers ultimately render (px). التحويل : 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. فهل يجب علينا زيادة حجم الخط إلى 24 بكسل؟ البحث قام بدراسة القراءة المعمقة، ولكن غالبًا ما يقوم الأشخاص بفحص الصفحة للعثور على جزء معين من المعلومات. هذا سلوك قراءة مختلف، يمكن القول إنه يستفيد من حجم خط أصغر مما تفعله القراءة المتعمقة. Our conservative proposal, taking into account scanning, is to increase the font size to 16px to begin with. سنزيد الحد الأقصى لعرض المقالة أيضًا ، من 960 بكسل إلى 1050 بكسل. 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