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].

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. أظهرت الأبحاث أن إعدادات الطباعة (مثل حجم الخط وطول الخط وارتفاع السطر) تؤثر على تجربة القراءة، سواء من حيث الراحة العامة (أي إجهاد العين والتعب) والفهم والاحتفاظ. لذلك من المهم بالنسبة لنا استخدام إعدادات الطباعة المثلى في واجهتنا. من العوامل المهمة التي يجب مراعاتها عند تحديد ما هو الأمثل لمشاريعنا أن يشارك الأشخاص في القراءة المتعمقة وكذلك مسح النص ضوئيًا.

في مرحلة سابقة من المشروع ، قرأنا دراسات بحثية تتعلق بطول الخط وخلصنا إلى أن ما بين 90-140 حرفًا في كل سطر هو الأمثل لمشاريعنا ( رابط نحو التقريض). لقد أمضينا مؤخرًا وقتًا في قراءة الدراسات البحثية حول حجم الخط. البحث الأكثر إقناعًا وقابلية للتطبيق بشكل مباشر ، والذي وجدناه حتى الآن هو دراسة أجريت عام 2016 استخدمت تتبع العين لتقييم تأثير حجم الخط وتباعد الأسطر للأشخاص الذين يقرؤون ويكيبيديا:

باستخدام تصميم مقاييس مختلطة ، قمنا بمقارنة قابلية القراءة الموضوعية والذاتية والفهم للمقالات لأحجام الخطوط التي تتراوح من 10 إلى 26 نقطة ، وتباعد الأسطر من 0.8 إلى 1.8 (الخط: Arial). تقدم النتائج التي توصلنا إليها دليلًا على أن قابلية القراءة ، المقاسة من خلال متوسط مدة التثبيت ، زادت بشكل ملحوظ مع حجم الخط. علاوة على ذلك ، كان لأسئلة الاستيعاب إجابات صحيحة بشكل ملحوظ لأحجام الخطوط 18 و 26. توفر هذه النتائج دليلاً على أن مواقع الويب التي تحتوي على نصوص ثقيلة يجب أن تستخدم خطوطًا بحجم 18 أو أكبر وتستخدم تباعد الأسطر الافتراضي عندما يكون الهدف هو تسهيل قراءة صفحة الويب وفهمها. تختلف نتائجنا اختلافًا كبيرًا عن التوصيات السابقة ، على الأرجح ، لأن هذا هو العمل الأول لتغطية أحجام الخطوط التي تتجاوز 14 نقطة.

أولاً ، نحتاج إلى تحويل المقياس الذي استخدمه الباحثون (النقاط) إلى المقياس الذي تعرضه المتصفحات في النهاية (بكسل). التحويل : 1px = 72pt / 96. لذا فإن النطاق المدروس في البحث (10-26 نقطة) يعادل 13.3 - 34 بكسل. استنتاجهم ، 18 نقطة ، يساوي 24 بكسل.

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

Annotated bibliography of typography and readability research

رابط للنموذج الأولي بحجم الخط المقترح: https://di-visual-design-font-size.web.app/Hummingbird

Feedback

 * Reading/Web/Desktop Improvements/Fifth prototype testing/Feedback