التصميم الوظيفي للمحتوى والقابلية للإفادة في مواقع الويب

Information Architecture
Web Usability

تطبيق موقع مكتبة الجامعة الأمريكية لمبادئ التصميم المراعي للمستفيد (*):

يقدم لنا مجال تفاعل الإنسان مع الحاسب HCI خمسة مبادئ رئيسة للتصميم المراعي للمستفيد User Centered Design - UCD، اتخذت أساسًا لقائمة مراجعة Check Lists طبقت على موقع مكتبة الجامعة الأمريكية؛ للوقوف على مدى توافر مبادئ التصميم المراعي للمستفيد في التصميم الحالي للموقع، هي: البداهة Intuitiveness، والاطراد Consistency، والبساطة Simplicity، وتجنيب المستفيدين الأخطاء واستمرار النظام حتى مع وقوع الأخطاء Prevention & Forgiveness، وأخيرًا الجماليات Aesthetics. وتم تطبيق قائمة المراجعة هذه للوقوف على مدى الالتزام بمبادئ التصميم المراعي للمستفيد في تصميم موقع المكتبة محل الدراسة، فضلا عن تطبيق التقييم الإيعازي Heuristic Evaluation (**) لرصد مشكلات التطبيق: 

 

أولا: البـداهـة  Intuitiveness 

أمكن من خلال اختبار القابلية للإفادة Usability Tests وعن طريق ملاحظة المشاركين في الاختبار وهم يؤدون المهام المطلوبة منهم داخل الموقع، كم كانت معظم هذه المهام – حتى تلك التي يقومون بها لأول مرة - على درجة معقولة من السهولة، واستغرقت منهم وقتًا يسيرًا، كما أنها لم تتطلب أي تدريب مسبق لأدائها. ويحتوي الجدول رقم (4) على نتيجة تقييم تطبيق مبدأ البداهة في الموقع عن طريق التقييم الإيعازي:

الجدول رقم (4) تقييم تطبيق مبدأ البداهة في الموقع

 

المشــــكلة

درجة الخطورة

درجة الانتشار

تعليق

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

1

مشكلات في عنونة المحتوى

3

2

ساعد الجزء العملي في البحث الخاص باختبار القابلية للإفادة وما سبقه من استبيانات في الوقوف على بعض المشكلات المتعلقة بعنونة المحتوى والروابط Labeling، وطالب (36 %) من العينة المشاركة باستخدام تسميات ومصطلحات غير متخصصة في عنونة المحتوى.

ويمكن تركيز الحل في إجراء المكتبة اختبار ترتيب البطاقات Card-Sort Analysis والذي يساعد إلى حد كبير في حل مشكلة عنونة أقسام الموقع ومحتواه.

2

مشكلات في عنونة الروابط

1

3

مشكلة عدم قدرة المستفيدين على الوصول إلى روابط الموارد الإلكترونية من كتب ومراجع وغيرها، والسبب الرئيس وراء ذلك أن الصفحة التي تتواجد فيها روابط لهذه المصادر الإلكترونية عنوانها هو (إيجاد المقالات Find Articles) ولما كانت هذه التسمية Label لا يُتوقع منها وجود المصادر الإلكترونية تحتها، فقد ضلل ذلك معظم أفراد العينة المشاركة في الاختبار، ولم يستطيعوا الاهتداء إليها.

الحل المقترح:

تغيير مسمى هذه الرابطة إلى المصادر الإلكترونية Electronic Resources وإضافة رابطة إضافية خاصة بالبحث عن المقالات في قواعد البيانات فقط، لها نفس التسمية السابقة

(Find Articles)

 

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

  • اتساق الألوان في جميع صفحات الموقع:
  • استخدام الموقع تشكيلة لونية Palette واحدة في جميع جنباته، حافظ عليها دون تجاوزات.
  • ترتيب عناصر الصفحة:
  • نجح فريق تصميم الموقع في المحافظة على وحدة واتساق تخطيط الصفحات على مستوى الموقع كله، وتـأتّي ذلك بالتوزيع الثابت للكيانات Objects في كل الصفحات. (***)

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

الجدول رقم (5) تقييم تطبيق مبدأ الاطراد في الموقع

 

المشــــكلة

درجة الخطورة

درجة الانتشار

تعليق

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

1

مشكلة عدم الالتزام بالقالب الخاص بتصميم صفحات الموقع

5

3

هناك حالة وحيدة خُوِلفَ فيها هذا المبدأ، هي الصفحة الخاصة بحساب المستعير في المكتبة User Account التي لا تلتزم بالقالب الخاص بتصميم صفحات الموقع، فلا يوجد بها مثلاً ترويسة الصفحة Header ولا الحواشي Footer المتكررة في جميع صفحات الموقع.

تطبيق قالب التصميم الخاص بالموقع على هذه الصفحة.


  • تطبيق مواصفة الطبقات المتتالية للأنماط  CSSفي الموقع:

التزم الموقع بتطبيق مواصفة CSS وهي ما يمكن أن نطلق عليه في العربية مواصفة الطبقات المتتالية للأنماط، والتي تستخدم في إنشاء الصفحات مطردة الإخراج، وفي المعالجة المتقدمة والمعيارية لعناصر الكتابة وغيرها في مواقع العنكبوتية العالمية. فجاءت نوعية الخط Font المستخدم لكتابة النصوص العادية ما بين خط فردانا Verdana وخط إريال Arial وهما من نوعية الخطوط التي صممت خصيصًا للقراءة على شاشة الحاسب. كما التزموا بتخصيص اللون الأسود للنصوص، واللون الأزرق للعناوين الجانبية، واللون البني للروابط التي تمت زيارتها، كما جاءت أحجام هذه الخطوط مطردة في جميع صفحات الموقع، بمعنى أن حجم خط المتن هو 100% دائماً، وحجم خط حواشي الصفحة Footer 80%، وهكذا.

 

ثالثا: البســاطة  Simplicity:

يمكن الوقوف على بساطة الموقع من خلال بساطة تصميم واجهة التعامل من جهة، وبساطة أداء المهام داخل الموقع وبعدها عن التعقيد من جهة أخرى. وفيما يتعلق ببساطة التصميم فالموقع يتبع أسلوب الأعمدة الثلاثة في عرض محتوى الصفحات، وهو الأسلوب المعتمد في سياق تصميم صفحات مواقع الويب.[1] والعمود الأول جهة اليمين مخصص لعرض قائمة الاختيار الرأسية Vertical Menu الخاصة بنظام الملاحة Navigation في الموقع، والأوسط خاص بعرض محتوى الصفحة، والثالث جهة اليسار خاص بعرض صورة مرتبطة أو معبرة عن محتوى الصفحة.

ويعد استخدام الألوان والصور في الموقع استخداماً رشيدًا، فاللون السائد في الصفحات هو اللون الأبيض الذي يمثل لون الخلفية، بينما هناك ثلاثة ألوان للنص، هي: الأسود لمتن الصفحة، والأزرق للعناوين الجانبية والروابط، والبني للروابط التي سبق زيارتها Visited Links. وفيما يتعلق باستخدام الصور في الموقع فلا يوجد أي صفحة بالموقع زاد عدد الصور بها عن صورة واحدة، وهي ما بين صغيرة (105 بكسل عرضًا و106 بكسل طولاً) إلى متوسطة الحجم (180 بكسل عرضًا و265 بكسل طولاً)، وهناك عدد من الصفحات التي تخلو من الصور تماما. ولعل هذا من أهم الأسباب التي تؤدي إلى سرعة تحميل صفحات الموقع بشكل عام.

وفيما يتعلق ببساطة المهام وسهولتها وبعدها عن التعقيد، فقد رأت غالبية أفراد العينة التي استجابت لاستبيان ما قبل الاختبار Pre-test Questionnaire أن الموقع سهل التعامل والاستخدام، وبلغت نسبتهم 84%، كما كان لدى غالبية المشاركين في اختبار القابلية للإفادة الرأي نفسه، وبلغت نسبتهم 75% من مجموع المشاركات.

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

 

رابعا: تجنيب المستفيدين الأخطاء، واستمرار النظام في العمل على الرغم من وقوع الأخطاء Prevention & Forgiveness

كما سبق وأن أشرنا في البند 1/3/6 الخاص بتحليل المهـام التي يقوم بها المستفيدون داخل موقع مكتبة الجامعة الأمريكية أنه يمكن القول بشكل عام إن المهام المختلفة التي يقوم بها المستفيدون داخل موقع المكتبة تتم بسلاسة ومنطقية، وأن تسلسل الخطوات التي تتبع لتنفيذ تلك المهام لا يسمح بوقوع أخطاء. ولم تسجل الدراسة على الموقع أي خرق لذلك إلا في حالتين، كما هو مبين بالجدول رقم (6):

الجدول رقم (6) تقييم تطبيق مبدأ تجنيب المستفيدين الأخطاء

 

المشــــكلة

درجة الخطورة

درجة الانتشار

تعليق

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

1

وجود رابطة فاعلة Active Link للصفحة الرئيسة  Home Page في شريط الملاحة على )الصفحة الرئيسة( نفسها

5

3

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

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

2

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

5

3

وظهرت هذه المشكلة في الصفحة الخاصة بالمساعدة في الجزئية المتعلقة بدليل خدمات المكتبة Library Service Guide، والشكل رقم (4) يوضح هذه المشكلة.

وضع الأيقونة الدالة على صيغة الملف، مثلما هو موضح في الشكل رقم (6)


الشكل رقم (4) مشكلة عدم التنبيه على نوعية الملفات التي سيعرضها المتصفح حال اختيارها
الشكل رقم (4) مشكلة عدم التنبيه على نوعية الملفات التي سيعرضها المتصفح حال اختيارها

ورغم التجاوزات سالفة الذكر إلا أن الموقع التزم في مواضع أخرى بالتنبيه على نوعية الملفات التي سيقوم المتصفح بعرضها سواء بكتابة الصيغة التي عليها الملف بين قوسين مثلما هو موضح في الشكل رقم (5) أو بوضع الأيقونة الدالة على صيغة الملف، مثلما هو موضح في الشكل رقم (6)


 الشكل رقم (5) التنبيه على صيغة الملفات بذكرها صراحةً بين قوسين
الشكل رقم (5) التنبيه على صيغة الملفات بذكرها صراحةً بين قوسين


الشكل رقم (6) استخدام الأيقونات كوسيلة للتنبيه على اختلاف نوعية الملفات
الشكل رقم (6) استخدام الأيقونات كوسيلة للتنبيه على اختلاف نوعية الملفات

 

خامسا: الجمـــاليات Aesthetics

اتضح من تحليل إجابات استبيان تقييم الموقع التي شارك فيها 209 شخص، والخاصة بتقييم المستجيبين للجاذبية الشكلية للموقع أنه يحوز درجة عالية من القبول الشكلي لديهم، ووصلت نسبتهم ثلاثة أرباع العينة تقريباً (حوالي 77,5 %) من العينة، بينما لم يحظ الموقع بالقبول شكلياً من أقل من ربع العينة (حوالي 21,5%) من عينة الدراسة. (راجع الفصل الرابع )

 

  • * راجع قائمة المراجعة الخاصة بتطبيق موقع مكتبة الجامعة الأمريكية لمبادئ التصميم المراعي للمستفيد، (الملحق الأول "أ")
  • **لمزيد من التفصيل حول مفهوم التقييم الإيعازي، ومقياس حجم خطورة المشكلة، ومقياس مدى انتشار المشكلة راجع المقدمة المنهجية .
  • *** الكيان Object هو أي عنصر جرافيكي أو نصي يتم تمثيله بكتل مرئية منفصلة على الشاشة، مثل قوائم الاختيار المنسدلة، أو أي عنصر نصي.
  • [1] McGovern, G., Norton, R. & O'Dowd, C. (2002). The Web Content Style Guide. London: ‎Pearson Education Ltd, 17-19.