ترتيب الفقرات النصية لمواقع الويب : مشاركة بغرض اثراء المحتوي العربي

[vivid]

بالبداء نود شكر "منظم" الذي سمح لنا بالنقل , ونشيد بجهودهم
سنقوم بكتابة مجموعة من المقالات خلال هذا الشهر : حوالي 4 مقالات والغرض منها هو تطوير الويب و اثراء المحتوي العربي , ساتحدث في وقت لاحق عن المبادرة
=================================================================================================

مصمم الجرافيك يدرك تماما ان الخطوط الرقيقة ذات اللون الاسود هي الافضل والاريح عند طباعتها علي الورق او كافة انواع المطبوعات , ولكن مهلا! يجب ان ندرك ان الويب يختلف من الصفحات و الاوراق المطبوعة فقد وجد الكثير من مطوري الويب ان اللون الرمادي افضل من الاسود علي صفحات الويب واكثر جمالا ايضا
فلنفترض انك قمت بتعديل الصفحة ولون الكتابة الي الرمادي , هل هذا سيكفي لجعل الزوار في حال افضل ؟ الاجابة قطعا هي لا , فقواعد التبوغرافية تختلف قليلا من الجوال الي الويب!!
سنتحدث في هذا المقال عن قواعد التبوغرافية في جعل نصوص الويب افضل واريح للقراة

الغرض الرئيسي لاي نص علي صفحات موقعك هو مساعدة المستخدم للوصول الي هذفه بصورة افضل و اريح واسرعلسواء الحظ هنالك الكثير من الاراء المتضاربة حول تنظيم الخطوط والكتابات لمواقع الويب , فليست هنالك قواعد صارمة جدا بهذا الخصوص مما يسهل مهمتنا كثيرا
وفي حين يسعي كل مصممي الويب علي صنع مواقع وصفحات ذات تصميم ابداعي , يجب ان لا ننسي الهدف الرئيسي من النصوص علي صفحات الويب وهو مساعدة المستخدم للوصول الي افضل تجربة قراة
و هنالك بعض القواعد المتفق عليها عند تنفيذها تسهل الامر علي مستخدميك وتجعل السير لصالحهم وليس ضدهم

1 - حجم الخط وطوله

حجم وشكل النص علي موقعك يمكن ان يكون له تاثير كبير جدا علي تجربة المستخدم , اجعل النصوص مقراوة للجميع وحتي ضعاف البصر فهم يعانون كثيرا عند رؤية نصوص ذات حجم صغير , وليس ضعاف البصر وحدهم فالزوار قد يشعرون بالغضب عندما يضطرون الي تكبير الصفحة حتي يرو ما تكتبه

بالنسبة لحواسيب سطح المكتب يجب ان يتراوح عدد الحروف علي السطر بين الـ 50 - 70 حرف , كما يجب ان لا يقل حجم الخ عن 16px بالنسبة للفقرات النصية , شاهد المثال:


قارن بين الصورة السابقة وبين الصورة ادناه , فهي مثال لموقع يضع 100 حرف بالسطر الواحد , ويستعمل خط 12px


فلنلقي نظرة الان علي انقرائية النصوص علي شاشات الجوالات والهواتف الخليوية , بالطبع لن نطبق القاعدة السابقة فـ 50-70 حرف في شاشة صغيرة لامعة سيتسبب بصداع شديد للقارئ !

بالنسبة للهواتف المحمولة فـ 30 - 40 جرف بالسطر هي المساحة المثالية و المريحة للعين
شاهد المثال بالاسفل , لتعرف لما يجب ان لا نطبق نظرية سطح المكتب علي الجوال


2 - اللون

لقد قطع الويب شوطا كبيرا منذ ايام مواقع الدردشة والمنتديات , بالكاد تذكرون : "شات الغرام مولع , شات دلدع قلبي منتديات قلبي متعلق بحبالها و موقع ذبحي غلاها وووالخ ههههههه" تلك الصفحات ذات اللون الوردي مع نصوص حمراء , الامر اشبه بغرف اللنوم , حيث يكون النص غير مقراوء و متعب جدا للنظر
اما اليوم فنري تطور ملحوظ في الويب العربي حيث صار الويب العربي يتجه للبساطة فاصبح مصممي المواقع يستخدمون خلفيات بيضاء مع كتابات سوداء ورمادية بعيدا عن الذخرفة

هنالك رئيان , بالنسبة للون الكتابة الاكثر اريحية للعين

1 -يقول أن التباين العالي هو ألافضل، فالنص ألاسود على خلفية بيضاء هو الاكثر اريحية و قابلية للقراة , امازون و مايكروسوفت يريان ان وجهت النظر هذه هي الافضل

2 -والبعض الاخر يقول ان الاسود لون صعب وثقيل علي اللعين , وان الرمادي هو الايسر , قوقل و فيس بوك يتفقان مع هذا الري


تستطيع ان تري الافضل لك , فهل الاسود هو الانسب ام الرمادي؟
يصعب الاجابة علي هذا السوال فالاسود الذي يبدو مريح علي الشاشات الحديثة ذات الاشعاعات الاقل يكون قاسيا للذين يستخدمون شاشات قديمة , والرمادي الذي يكون مريحا وواضحا علي الحاسوب قد لا يكون بنفس درجة الوضوح علي الهواتف المحمولة خاصة اذا استخدمة خارج المنزل او بمكان مكشوف ومعرض لاضاة عاليا

تري WC3 ان الاسود النقي "#000000" هو لون متعب عند النظر اليه لفترات طويلة
اغلب المصممين يستخدمون تدرجات خفيفة من الاسود كـ 0F0F0F و 0D0D0D او 141414
عند الوصول للون الافضل للنصوص من وجهة نظرك من المستحسن ان تقوم بعمل تجارب علي المستخدمين او تسالهم اذا ما كانت النصوص واضحة لهم في مختلف الظروف

3 - تباعد السطور

تعني كلمة "تباعد السطور" المسافة بين كل سطر و الذي يليه ويطلق عليها line height في لغة css
تباعد السطور من الامور المهمة جدا ولن تكتمل تجربة المستخدم الجيدة بدون تباعد اسطر مريح , فيجب اختيار تباعد سطور مع مراعات المسافة , فاذا كان التباعد صغير سيجعل السطور صعبة القراة واذا كان التباعد بعيد فيجعل المستخدم يظن ان كل سطر قائم لحاله وقد يكون مرهق للعين
لسواء الحظ ليس هنالك تباعد نصر متعارف عليه او يمكن استخدامه كـ مقياس ثابت , ولكن هنالك خوارزمية قياس مجتهد عليها و نحن وملائين المطورين نري انها الافضل ولكنها تعتمد علي حجم الخط بالفقرة و طول السطر وعليها يتم قياس التباعد المثالي بين الاسطر


ما لا ينبغي عليك فعله

لا تستخدم اكثر من 3 انواع من الخطوط بالموقع فكثرت اخطوط قد تشتت ذهن المستخدم وتهدم هوية الموقع

لا تستخدم اكثر من 3 الوان للنصوص بالمقال الواحد فكثرت الالوان تسبب ضجيج وتشتت بصري للمستخدم وتجعل الزائر وتلهي المستخدم عن قراة المقال بتركيزه علي الكلمات الملونة

لا تستخدم اكثر من حجمي خط مختلفين بالفقرات فتقلب الخط الي اكثر من حجمين يجعل الزائر يغوص بتفكيره بعيدا عن المقال ويبداء بسوال نفسه : لما استخدمو خط كبير وصغير وعادي هنا هل يعني هذا ان الاكبر هي الاهم ؟ ام ام ام ...الخ

ابتعد عن تلوين النصوص بالاحمر والاخضر فـ 8% من الرجال حول العالم مصابون بعمي الوان ويعتبر اللون الاحمر واللون الاخضر لونين غير مريحان لمصابي عمي الالوان

لا تستخدم النصوص المشعة و الوامضة , تلك التي كانت تستخدم في حقبة 2000-2006 (ايام الويندوز اكس بي و الفيستا ) , فالنصوص ذات الوميض والاشعاعات كانت تستخدم لتجذب انتباه الزائر لشئ معين سواء اعلان او زر معين ولكن الويب اختلف كثيرا , فالنصوص الوامضة تعتبر مثال رديئ واسلوب رخيص هذه الايام وتجعل الزوار ينفرون من الموقع وقد لا يشعرون بالثغة فلا يعودو مجددا

بالنهاية يجب ان تعلم انك اذا طبقت هذه الحلول فستذيد من سهولة و سرعة الوصول للمعلومة بالشكل المريح للمستخدم , ولكننا ندعوك بان تقوم بعمل تجاربك الخاصة فربما تكتشف امرا اخرا , كان لي استاذ بكلية التصميم يخبرنا دوما انه للوصول لحل لمشكلة ماء لابد لنا ان نجرب كل الحلول ثم نختار الحلول الافضل ثم نفلترها حتي نصل للحل الافضل

مقالات اخري اعجبتنا علي منظم ننصح بقراتها :
الطرق المثلي لترتيب الفقرات النصية لمواقع الويب

توقف عن اهدار زمن المستخدم

الدليل الشامل لانشاء صفحة اتصل بنا

الاستراتيجية z لترتيب مواقع الويب

كيف تقنع زوارك لاتخاذ قرار التسجيل ؟

كيف تجعل ارقام الهواتف علي صفحاتك اكثر عملية

الممارسات الفضلي في ترقيم صفحات مواقع المدونات والمواقع علي الويب

قوائم الهامبرغر وكيف تحسن من تجربة الاستخدام

[mmnon.com]

بارك الله فيك
بالتوفيق يارب