القراءة/الوب/تحسينات سطح المكتب/خامس إختيار لنموذج التجربة

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

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

تعليمات

  1. راجع هذه الصفحة في سياقها
  2. أنشئ قسمًا جديدًا في هذه الصفحة باستخدام النموذج أدناه (سيتم ملؤه مسبقًا بالأسئلة التي يمكنك الرد عليها).
  3. املأ ملاحظاتك في القسم الذي تم إنشاؤه حديثًا.

لا تنسى:

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

Comparative interfaces
لقطة من ويكيبيديا الهندية مع واجهة مونوبوك
لقطة من ويكيبيديا اليابانية مع واجهة فكتور القديم

التغييرات المعتمدة

القوائم

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

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

1) الزناد الأزرق والعناصر الزرقاء

2) الزناد الأزرق والعناصر السوداء

3) الزناد الأسود والعناصر الزرقاء

4) الزناد الأسود والعناصر السوداء

الحدود والخلفيات

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

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

1) بسيط

1) minimalist

2) حدود المقالة

3) حدود المقالة + تسطير العنوان

4) سطر جدول المحتويات + تسطيررأسية الواجهة

5) سطر جدول المحتويات + تسطير عنوان الصفحة

6) حدود المقالة + خلفية الرأس (صلبة)

7) حدود المقالة + خلفية العنوان (التدرج)

8) خارج خلفية المقالة (التدرج)

9) خارج خلفية المقالة (صلبة)

القسم النشط في جدول المحتويات

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

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

1) بسيط

2) عريض

3) خلفية

4) خط مع الحدود

5) خط مع حد (2)

الشعار في رأس الواجهة

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

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

1) الشعار المستطيل يسارا

2) الشعار المربع يسارا

3) الشعار المربع يسارا (متدرج)

4) الشعار المستطيل في المركز

ألوان الروابط

لدى اتحاد شبكة الويب العالمية (W3C) إمكانية الوصول إلى إرشادات محتوى الويب . تحدد هذه الإرشادات الحد الأدنى من مستوى التباين للروابط: 

"لسهولة الاستخدام وإمكانية الوصول ، يجب تسطير الروابط افتراضيًا. بخلاف ذلك ، يجب أن يحتوي نص الرابط على تباين 3:1 على الأقل مع النص الأساسي المحيط به ، ويجب أن يقدم مؤشرًا غير ملون (مسطرًا عادةً) عند تحريك الماوس وتركيز لوحة المفاتيح. "[1]

نظرًا لأننا لا نضع خطًا تحت الروابط افتراضيًا ، يجب أن يفي اختيار لون الارتباط بمتطلبات التباين 3:1 . للتحقق من تباين روابطنا مع النص الأساسي لدينا ، يمكننا استخدام [مدقق التباين https://webaim.org/resources/linkcontrastchecker/] المقدم من [h ttps://webaim.org/ WebAIM].

ألوان الارتباط الحالية
لون تباين مع النص الأساسي #202122 نتيجة الاختبار رابط لنتيجة الاختبار
الروابط الزرقاء #0645ad 1.89:1 ❌ مرفوض رابط بالنتائج
الروابط التي تمت زيارتها #0b0080 1.01:1 ❌ مرفوض رابط بالنتائج
الألوان المقترحة
لون تباين مع النص الأساسي #202122 نتيجة الاختبار رابط لنتيجة الاختبار
روابط زرقاء #3366cc 3:1 ✅ مقبول رابط بالنتائج
روابط تمت زيارتها #795cb2 3.06:1 ✅ مقبول رابط بالنتائج

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

Current link colors

الألوان المقترحة


حجم الخط

تتمثل مهمة حركتنا في توفير كل معرفة العالم لأكبر عدد ممكن من الناس. Currently the majority of the knowledge we offer is in the form of text. أظهرت الأبحاث أن إعدادات الطباعة (مثل حجم الخط وطول الخط وارتفاع السطر) تؤثر على تجربة القراءة، سواء من حيث الراحة العامة (أي إجهاد العين والتعب) والفهم والاحتفاظ.[2][3][4][5] لذلك من المهم بالنسبة لنا استخدام إعدادات الطباعة المثلى في واجهتنا. من العوامل المهمة التي يجب مراعاتها عند تحديد ما هو الأمثل لمشاريعنا أن يشارك الأشخاص في القراءة المتعمقة وكذلك مسح النص ضوئيًا.[6][7]

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

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

أولاً ، نحتاج إلى تحويل المقياس الذي استخدمه الباحثون (النقاط) إلى المقياس الذي تعرضه المتصفحات في النهاية (بكسل). التحويل : 1px = 72pt / 96.[9][10] لذا فإن النطاق المدروس في البحث (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

المراجع

  1. ↑ إمكانية الوصول إلى التباين والألوان ، وفهم متطلبات التباين والألوان لـ WCAG 2: "تحديد اللون فقط للروابط".
  2. ↑ حسين ، صهيب ، أحمد ، قاسم خان (2011-11-01). "[تؤثر عوامل قابلية قراءة الويب https://opus.lib.uts.edu.au/handle/10453/117586 على المستخدمين من جميع الأعمار]"المجلة الأسترالية للعلوم الأساسية والتطبيقية ، 2011 ، 5 (11) ، ص 972-977.
  3. ↑ نانافاتي ، التحيز (2005). "طول الخط الأمثل في القراءة - مراجعة أدبية". اللغة المرئية ، 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. ↑ PT نحو PX معدل
Retrieved from "https://www.mediawiki.org/w/index.php?title=Reading/Web/Desktop_Improvements/Fifth_prototype_testing/ar&oldid=6410233"