ملخص تصميم المعلومات وتجربة المستخدم للمواقع الإلكترونية — ثانية ثانوي

مقدمة

المادة: البرمجة والذكاء الاصطناعي
المسار: مسار الهندسة وعلوم الحاسب

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

أهداف التعلم

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

شرح الدرس

السؤال الرئيسي: كيف يخطط المصممون لموقع إلكتروني حول مستخدميه، وما المبادئ التي تجعل الصفحة واضحة وسهلة الاستخدام؟ الفكرة الأساسية أن تصميم الويب الجيد يبدأ من المستخدم: شخصية المستخدم توضح من هو المستخدم، والمخطط الهيكلي يحدد مكان كل عنصر، ومبادئ CRAP تجعل الصفحة واضحة، والتصميم المتمحور حول المستخدم يُبقي كل قرار في صالحه.

قد يبدو الموقع منطقيًا لمصممه لكنه يربك زواره؛ لذلك يجب أن يعتمد التصميم على فهم المستخدم واحتياجاته وسياق استخدامه، لا على ذوق المصمم فقط.

شخصية المستخدم (Persona)

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

المخطط الهيكلي (Wireframe)

مخطط أولي يساعد على تحديد أماكن العناصر وأولوياتها، وغالبًا يستخدم تفاصيل بصرية قليلة حتى يركز الفريق على البنية قبل التصميم البصري النهائي. باستخدامه، يمكن النظر في “توزيع المعلومات ومواضعها” بمعزل عن التصميم البصري. فإذا حُددت الزخارف كالألوان والخطوط أولًا، تميل النقاشات إلى الانجراف نحو التفضيلات الشخصية في المظهر؛ لذا فإن تحديد مكان وأولوية المعلومات أولًا يسهّل على أصحاب المصلحة الوصول إلى اتفاق.

المبادئ الأربعة للتصميم (مبادئ CRAP)

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

المبدأ	الغرض	تقنيات وأمثلة
التباين (Contrast)	جعل أولوية المعلومات واضحة وإبراز أهم العناصر فورًا	اجعل العناوين واضحة مقارنة بالنص؛ استخدم تباينًا واضحًا للأزرار المهمة مع مراعاة سهولة القراءة وعدم الاعتماد على اللون وحده
التكرار (Repetition)	تكرار خصائص معينة لتحقيق الاتساق في التصميم ككل، مما يتيح للمستخدمين التنقل دون تشتت	وحّد اللون والحجم والخط للعناوين في كل صفحة؛ طابق تصميم أيقونات النقاط
المحاذاة (Alignment)	محاذاة موضع كل عنصر إلى خط أساس مشترك، مما يمنح الشاشة بأكملها نظامًا	حاذِ العناصر حسب اتجاه اللغة وشبكة التصميم (في العربية يكون اتجاه النص الأساسي من اليمين إلى اليسار)؛ استخدم قواعد محاذاة متسقة
التقارب (Proximity)	وضع المعلومات المرتبطة قريبة من بعضها حتى تُدرَك كمجموعة واحدة من أول نظرة	اجمع صور المنتجات وأسماءها وأسعارها معًا؛ اترك مسافات مناسبة (هوامش) بين العناصر

التصميم المتمحور حول المستخدم (User-Centered Design – UCD)

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

من أهداف التصميم الجيد:

قابلية الاستخدام (Usability): سهولة وفاعلية إنجاز المهمة.
إمكانية الوصول (Accessibility): تمكين الأشخاص ذوي الإعاقة من استخدام الموقع والتفاعل معه.

صمّم انطلاقًا من المستخدم: تخيّل المستخدم (شخصية المستخدم) → خطّط للتخطيط قبل المظهر (المخطط الهيكلي) → طبّق التباين والتكرار والمحاذاة والتقارب (اجعله واضحًا) → قرّر لصالح المستخدم (UCD). تبقى قابلية الاستخدام وإمكانية الوصول هدفين مستقلين يحتاجان اختبارًا ومعايير مناسبة، ولا تكفي المبادئ البصرية وحدها لتحقيقهما.

أمثلة وتطبيقات

مثال 1 (تحديد المبدأ):

الموقف	المبدأ
صورة المنتج واسمه وسعره متجاورة في بطاقة واحدة، تفصلها مسافة عن «منتجات مشابهة»	التقارب
كل عناوين الصفحات بالحجم واللون والخط نفسه	التكرار
زر «اشترِ الآن» بلون بارز وحجم أكبر من بقية الأزرار	التباين
كل النصوص والصور تبدأ من الحافة اليمنى نفسها في موقع عربي	المحاذاة

مثال 2 (ترتيب العمل الصحيح): فريق يصمم موقع مكتبة المدرسة:

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

مثال 3 (عيادة مجتمعية): المستخدم ضعيف البصر يحتاج تباينًا كافيًا ونصًّا قابلًا للتكبير ودعمًا لقارئ الشاشة (إمكانية الوصول)، والمستخدم ذو الاتصال الضعيف يحتاج صفحة خفيفة سريعة التحميل (قابلية الاستخدام في سياقه). ومبادئ CRAP وحدها لا تضمن أيًّا من ذلك.

ملاحظات مهمة

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

المفاهيم الأساسية

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

ملخص الدرس

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

أسئلة للتدريب

1. لماذا يُنشئ المصمم شخصية نموذجية وإطارًا هيكليًا قبل اختيار الألوان والخطوط؟

الإجابة: لأن البدء باختيار الألوان والخطوط (الزخرفة) يجعل النقاش ينجرف نحو التفضيلات الشخصية للمصممين بدلًا من التركيز على احتياجات المستخدم الفعلي. إنشاء شخصية المستخدم أولًا يوضح “من” يصمَّم من أجله ولماذا، والمخطط الهيكلي يحدد “أين” توضع المعلومات وبأي أولوية بمعزل عن المظهر. هذا الترتيب (المستخدم ← البنية ← المظهر) يسهّل على أصحاب المصلحة الوصول إلى اتفاق مبني على احتياجات حقيقية، بدلًا من جدل حول الأذواق الشخصية.

2. في تصميم متجر إلكتروني، صُممت صفحة منتج بحيث تظهر صورة المنتج واسمه وسعره متجاورة في مجموعة واحدة، مع مسافة واضحة تفصلها عن قسم المنتجات المشابهة. أي مبدأ من مبادئ CRAP طُبّق هنا؟ وضّح.

الإجابة: التقارب؛ فتجميع صورة المنتج واسمه وسعره قريبة من بعضها يجعل المستخدم يدرك أنها معلومات مرتبطة (تخص المنتج نفسه) من أول نظرة، بينما تفصلها المسافة الواضحة عن قسم “منتجات مشابهة” لتمييزه كمجموعة منفصلة — وهذا هو جوهر مبدأ التقارب: وضع المعلومات المرتبطة قريبة من بعضها حتى تُدرَك كمجموعة واحدة.

3. عيادة مجتمعية تريد موقعًا إلكترونيًا بسيطًا حتى يعرف المرضى ساعات العمل والخدمات. صنّف اثنين من مستخدميها المحتملين: مستخدمًا ضعيف البصر، وشخصًا بلا إنترنت منزلي. ما احتياج كل منهما؟ ولماذا لا تكفي مبادئ CRAP وحدها لتلبيتهما؟

الإجابة: المستخدم ضعيف البصر يحتاج تباينًا كافيًا بين النص والخلفية، وحجم خط قابلًا للتكبير، ودعمًا لقارئ الشاشة (عبر HTML الدلالية والنص البديل للصور) — وهذا يتعلق بـإمكانية الوصول. الشخص بلا إنترنت منزلي قد يعتمد على بيانات هاتف محمولة محدودة أو نقاط اتصال عامة، فيحتاج موقعًا خفيفًا سريع التحميل يعمل بكفاءة حتى مع اتصال بطيء أو متقطع — وهذا يتعلق بـقابلية الاستخدام في سياق استخدام محدد. مبادئ CRAP (التباين والتكرار والمحاذاة والتقارب) تنظّم الشكل البصري وتجعله أوضح، لكنها لا تضمن دعم قارئ الشاشة تقنيًا ولا سرعة تحميل الصفحة على اتصال ضعيف — فهذان هدفان مستقلان يحتاجان معايير واختبارات إمكانية وصول وقابلية استخدام خاصة بهما، لا مجرد تطبيق مبادئ التصميم البصري.