مقدمة في انقرائية النصوص على الويب

كتبه أحمد مجدي 23 مايو 2012

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

فى هذا المقال سنشرح هذا المفهوم وبعض المصطلحات الأخرى المتعلقة به، وكيف أنها تلعب دور كبير فى تحسين القراءة على الويب،كم سنقدم عدد كبير من النصائح لتحسين وضع النصوص على الويب.

هل هناك نص غير قابل للقراءة ؟

انقرائية النصوص العربية على الويب
انقرائية النصوص العربية على الويب

السؤال الذي يجب أن نجيب عليه، هل هناك نص غير مقروء؟ أليس كل الكلمات يمكن نطقها وقراءتها؟ … مصطلح انقرائية النص/النص القابل للقراءة لا يتعلق بالقدرة على النطق أو قراءة الحروف ولكن يتعلق بعاملين أساسيين:

  1. صلاحية النص للقراءة: تنسيق، توزيع، تلوين النص بشكل يُسهل على عين القاريء أن تقرأ وتمسح الفقرات.
  2. سهولة النص للقراءة: صياغة النص نفسه من كلمات ومفاهيم.

متى يكون النص قابل للقراءة؟

هناك عوامل تجعل النص قابل للقراءة، عوامل تتعلق بالنص نفسه، وعوامل تتعلق بالقاريء … فالنص يكون سهل القراءة اذا ما كان:-

  1. ملائماً لميول القاريء.
  2. ذو بنية لغوية بسيطة.
  3. مُنسقاً بشكل جيد.
  4. واضح الرموز.

 5 شروط أساسية للنص القابل للقراءة على الويب

المعايير الأساسية للحكم على قابلية النصوص للقراءة على الويب
المعايير الأساسية للحكم على قابلية النصوص للقراءة على الويب

خمسة معايير أساسية للحكم على نصوص الويب اذا ما كانت قابلة للقراءة أم لا، هذه المعايير الخمسة هي الأكثر شيوعاً في عالم إنقرائية النصوص على الويب.

1- التسلسل الهرمي للنص 

نموذج للتسلسل الهرمى للنصوص لخبر من موقع بي بي سي العربية
نموذج للتسلسل الهرمى للنصوص لخبر من موقع بي بي سي العربية

أي نص يحتاج إلى معيار يحدد التدرج في طرح فكرة المقالة، فكل مقالة تدور حول فكرة محددة وبالتالي النص يجب أن يكون محدد في تدرجه لطرح هذه الفكرة بشكل منطقي، بالاضافة لمعيار التدرج … النص يجب أن يكون منسقاً تنسيقاً ملائما لهذا التدرج، فيتم تنسيق عناوين الفقرات كلها بلون وحجم واحد، العناوين الفرعية بلون وحجم واحد … الخ، التسلسل الهرمي للنص يساعد القاريء على سرعة الالمام بكل محتوى الفقرة أو المقالة.

2- التباين اللوني بين النص والخلفية

التباين اللونى بين النص والخلفية وفقاً لمبادئ W3C
التباين اللوني بين النص والخلفية وفقاً لمباديء W3C

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

5- المسافة بين السطور

المسافة بين السطور
المسافة بين السطور

المسافة بين السطور عامل اخر مهم في زيادة قابلية قراءة النصوص على الويب، إذا كانت المسافة بين السطور أقل مما يجب سيتسبب هذا في التشويش على المستخدم أثناء قراءته للنص، وإذا كانت المسافة بين السطور أكبر مما يجب سيعطي انطباع بتفكك الفقرة وكأنها هيئات منفصلة عن بعضها البعض، المسافة بين السطور يتم حسابها بأن ترسم خطين:-

  • أحدهما للحد الأخير لأكثر الحروف انزلاقاً عن السطر.
  • خط آخر يحدد أول حرف يظهر في السطر التالي.

4- المسافة بين الكلمات

المسافة بين الكلمات
المسافة بين الكلمات

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

خطأ شائع في المواقع يظهر عن محاولة مساواة الفقرات
خطأ شائع في المواقع يظهر عن محاولة مساواة الفقرات

5- عدد الكلمات في كل سطر

عدد الكلمات فى كل سطر
عدد الكلمات فى كل سطر

يستند هذا المعيار على علم وظائف أعضاء الانسان … فالعين تكون قوس بزاوية محددة بحيث يكون الكلام الذي في نطاقها مقروء دون الحاجة إلى أن يحرك الانسان عنقه ليكمل قراءة السطر الطويل، وأظهرت البحوث أن متوسط هذا العدد من الكلمات حوالي ١٢ كلمة في كل سطر، إذا كان عدد الكلمات في السطر الواحد يتجاوز هذا العدد فإن هذا يؤدي إلى ابطاء عملية قراءة النص لأن القاريء سيبدأ في استخدام عضلات العين والعنق لتعقب السطر حتى ينتهى ومن ثم يبدأ من جديد.

في المقالات التالية التي تتناول هذا المعيار سنحاول اعطاء نصائح اكثر عمقاً لتطبيق هذا المفهوم على المواقع العربية

المراجع

عن كاتب المقال

أحمد مجدي
متخصص بتجربة الاستخدام، مصمم واجهات الإستخدام للويب والموبايل منذ 2008، امتلك خبرة معرفية وعملية عن التصميم الجرافيكي لواجهات الاستخدام والتفكير البصري، عملت مع أصحاب الأعمال التجارية في الشركات الكبيرة، المتوسطة، الصغيرة والأفراد لبناء جسـور بيـن احتياجات المستخدمين وأهدافهم التجارية. تابعني على تويتر: @ahmedmagdi


كل مقالات الكاتب

اترك تعليقك على المقال 26 تعليق

  • ممتاز جدًا أخي أحمد مجدي ..

    سعيد بأن هناك المزيد من امدونات العربيه تكتب في قابليه الإستخدام
    وأيضًا أظن أن نوع الخط أحد العوامل الأساسيه التي تساعد على سهولة القراءه
    وتمييز العناوين

    تحياتي لك وشكرًا 😉

  • جميل ، و أعتقد انني أطبق العديد من هذه التقنيات في مدونتي حيث انني قرأتها في احد الكتب التي توضح كيفية كتابة مواضيع أفضل من ناحية القراءة للمستخدم .

    شكرا أخي الكريم على هذه المدونة الاضافة ، بانتظار قادم تدويناتك

  • رائع الله ينور عليك

  • تصائح رائعه جدزاكم الله الف خير

  • مقال جميل : )

    تعليق على الهامش، اليس كلمة “مقروئية”(وهو اللفظ الاكثر شيوعاً) أفضل من “انقرائية”؟

    • في دراسة بعنوان “انقرائية المحتوى ابعادها وقياسها” للدكتور غسان خالد بادي. توصل فيها الا ان كلمة انقرائية هى الاكثر دقة فى وصف النص القابل للقراءة. رابط المحاضرة ..
      http://www.youtube.com/watch?v=eIEnTv4NzJE

  • موضوع مفيد 🙂 وشكرا على جهدك الواضح به ولكن لدي سؤال هل تري أن نوعية الخط Font Family تختلف وأن أيضا اختلاف اللغة يفرض نمط معين ؟مثلا العربية والأنجليزية ؟

    مثلا بمدونتك هل لو استخدمت خط الأريال Arial سيكون أفضل وأيضا سيكون عبر متصفحات سفارى على الماك أفضل

    شكرا لك

    • حقيقة لم افهم جيدا ما تقصد حسين …

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

      بخصوص الماك فهو معروف ان معالجتة للخطوط تختلف عن غيرة من الاجهزة … الماك لا يجب ان يكون وجهاً للمقارنة، الاصل في تصميم المواقع ان تصممم للأضعف وليس للأقوي … يعني تصمم الموقع لكى يتوافق مع المتصفحات وانظمة التشغيل الاضعف ( ويندوز – انترنت اكسبلورر) أولاً وليس العكس (ماك – سافاري)

  • موضوع مميز فعلاً و يوجد قصور في الفهم لدي الكثير من المطورين و المستخدمين لمبدأ “إنقرائية” النصوص ، وضحت كل شئ باسلوب بسيط و جميل جداً ،، أبدعت !

  • مدونة جميلة بالفعل

    تابع الى الامام

  • شكرا لكم مدونة جميلة جدا بصراحة .. اتمنى لكم التوفيق

  • ابدعت اخي
    موضوع اكتر من رائع

  • مدونة رائعة

    شكرا لكم

  • السلام عليكم، بارك الله فيك على النصائح الجميلة، موفق إن شاء الله.

  • مدونة رائعة شكرا لكم

  • موضوع مميز فعلاً
    شكرا جزيلا لك

  • اشكركم على هذا الموقع الرائع

  • السلام عليكم لقد اطلعت على اغلب التدونات في موقعكم روعة ونتمنى ان تسترو في العطاء ونشر الفائدة
    وخصوصا في مجال تحسن المواقع والمدونات
    شكرا
    نتنى لكم التوفيق

  • رمضان كريم كل عام وانتم بخير

  • رمضان كريم كل عام وانتم بخير

  • مدونة طارق

    موضوع مميز فعلاً

  • Eyad A Masri

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

  • محمد سيد

    شكراً أحمد على المقال وعلى مجهوداتك في إثراء المحتوى العربي، هل يمكن أن تخبرنا بأفضل الخطوط العربية المتاحة من حيث الإنقرائية أو التي تزيد من معدل إنقرائية النص.

  • الله يعافيك ماقصرت
    رائع جداً , مُفيد جداً