يجب أن يتم تصميم المواقع وبرمجتها من وجهة نظر المستخدم، لا من وجهة نظر مالك الموقع. فذوق المالك ورؤيته يجب ألا يقيّدا حركة المطورين، أو يبعداهم عن المعايير الأساسية من بساطة وسهولة استخدام. رأي المالك ليس ملزمًا، أما منظور المستخدم فهو الذي يجب أن يُقدَّم على أي شيء آخر.
عليك كمطور أن تضع نفسك دائمًا مكان المستخدم، وأن تعيش تجربته وهو يستخدم التطبيق أو الموقع.
دعنا نستكشف أهم مبادئ تصميم مواقع وتطبيقات الويب وتطويرها، التي تجعل الاستخدام سهلًا وممتعًا، وتجربةً يحب المستخدم أن يكررها:
- الهدف الرئيسي: المستخدم أولًا.
- الجودة.
- تميّز المحتوى.
- البساطة.
- الموقع الإلكتروني كائن حي.
- التصميم.
1. الهدف الرئيسي: المستخدم أولًا
ما الهدف الرئيسي من إنشاء هذا الموقع؟ هل تريد توصيل معلومة أم الترفيه؟
تحتاج إلى هدف عام للموقع، ثم تحدد كيف تصل إليه عبر مراحل متعددة، تصطحب خلالها الزائر ببساطة وانسيابية حتى يتحقق الهدف.
ويجب أن يكون لكل شيء داخل الموقع غرض محدد يخدم الهدف الكلي.
ماذا نعني بأن المستخدم أولًا؟
يجب أن يقوم تصميم الموقع وتطويره على واقع مستخدمه، وأن نجيب عن هذه الأسئلة:
- ما خبرات هذا المستخدم وإمكاناته؟
- ما توقعاته عند استخدام هذا المنتج؟ وما الحد الأدنى لهذه التوقعات؟
- كيف ترتقي به ليؤدي المهام المعقدة؟
يجب أن يكون المستخدم ملّاحًا بارعًا داخل الموقع، وأن يشعر بأنه كفء لاستخدامه.
الموقع المعقد في نظر المستخدم موقع فاشل. لن يصف المستخدم مطوري الموقع بالعباقرة لأنهم أنتجوا تطبيقًا صعب الاستخدام، بل سيكره كل من شارك فيه، لأنه ببساطة شعر بالعجز أمام منتج كان يُفترض أن يقدم له خدمة، أو يحمل معلومة كل ما يريده هو الوصول إليها.
لذلك، عند التفكير في المستخدم، يمكنك الانطلاق من هذه الفكرة: استخدم المعرفة التي اكتسبها المستخدم من الواقع، وطوّعها لأداء المهام المختلفة داخل التطبيق.
فمثلًا، عندما تفتح الثلاجة تجد جانبًا للمشروبات، وجانبًا للمأكولات، وفي الأعلى قسم الأطعمة المجمدة. إذن هناك محطات وصول سريع، وهناك أماكن لمهام تحتاج إلى سلسلة من الخطوات، كالفرق بين أن تأخذ مشروبًا مباشرة من الرف الأمامي، وأن تُجهّز طعامًا مجمدًا يحتاج إلى عدة خطوات حتى يصبح جاهزًا.
التواصل مع المستخدم
كيف تتواصل مع المستخدم بفاعلية؟ وأي نوع من التفاعل تريده بينك وبين زوار الموقع؟
اعلم أن الغالبية العظمى من الزوار يريدون الوصول إلى هدفهم بسرعة، لذلك من المهم أن تخاطبهم بوضوح، وألا تتوقع أن لديهم معرفة مسبقة بأي مهمة. لا تقل: "المستخدم يعرف كيف يتم هذه المهمة، فسأوفر الجهد ولن أشرح التفاصيل"، فأنت بذلك تبني على أساس ربما لا يكون موجودًا.
واسمح لي بهذا الوصف، لكن لا بد أن تنزل إلى أرض الواقع، وأن يكون تصميمك "تصميمًا بسيطًا لمستخدم غبي".
حرية المستخدم داخل الموقع
يجب أن يحصل المستخدم على ما يريد بسهولة. ففي يوتيوب مثلًا ترى صورة مصغرة للفيديو واسمه، وكلاهما رابط يوصلك إلى الهدف ومشاهدة الفيديو، والغرض من ذلك تسهيل الوصول إلى المحتوى.
2. الجودة
نحاول دائمًا وضع معايير للجودة، حتى إننا وضعنا قوائم لقياس جودة المواقع الإلكترونية، لكن كل هذا ليس كافيًا.
فالجودة تنبع أساسًا من تعمّق المطور وممارسته لعمله بفهم نابع من حب وشغف بما يفعل.
مثلًا: هذه الصورة ذات الخلفية البيضاء كان الأفضل أن تكون بخلفية شفافة مع قليل من الظل والتحديد، وهذا الجدول المليء بالأرقام كان الأفضل أن يكون رسمًا بيانيًا، مع إتاحة تحميل البيانات المفصلة عند الحاجة... وهكذا.
لذلك، نعم، المقاييس والمعايير تعيننا على إنتاج محتوى عالي الجودة، لكن العامل الأساسي هو سعي المطور وراء كل ما هو نموذجي لخدمة هدفه، بغض النظر عن مجاراة المقاييس.
قياس الجودة عملية مساعدة ومكمّلة، لكنها ليست ملزمة في كل الأحوال. الملزم هنا هو رؤية المطور لما هو مهم لتوصيل الرسالة، ولما يساعد على إنتاج تجربة متميزة للمستخدم أولًا.
بعد ذلك يمكن الاستعانة بقياس الجودة كمرحلة تصحيح وتحسين لما هو جيد في الأصل. أما إنتاج محتوى يفتقر إلى الجودة من الأساس، ثم محاولة معايرته على مقاييس الجودة، فهو ترقيع سينتج عنه جنين إلكتروني مشوه.
وإذا نظرت إلى باقي العناصر التي سنتحدث عنها، فستجدها كلها تندرج تحت بند الجودة. لكن المقصود هنا هو الجودة الشاملة: من جودة الفكرة، مرورًا بجودة التخطيط والتنفيذ، والعمل الدؤوب على المراجعة والاختبار والتجربة، حتى بعد انتهاء المشروع ووصوله إلى المستخدمين. والجودة هنا تطلب منك أيضًا أن تفتح قنوات اتصال بينك وبين المستخدم النهائي، لتعرف كل المشكلات والاقتراحات من وجهة نظره، وأن تضع آليات للاستفادة من هذه المعطيات الجديدة بما يتناسب مع أهداف المشروع.
3. تميّز المحتوى
في بداية عام 2019 كان يمكنك أن تقول إن هناك ما يقرب من ملياري موقع إلكتروني.
عدد رهيب، وأن تتميز وسط هذا الحشد الهائل ليس بالأمر السهل.
لن تصل إلى هذا التميز بدورة تدريبية لا تكف عن إخبارك بأنك ستحترف تصميم المواقع في أقل من ساعة، أو أنك ستصبح في نهايتها مصمم مواقع لا مثيل له. كل هذا محض غش وخداع!
يمكنك في نهاية التدريب أن تتقن كتابة الأكواد التي شُرحت، بل وأن تتكون لديك فكرة عن طبيعة العمل في تصميم المواقع ومتطلباته، ولا مشكلة في ذلك أبدًا. لكن لا تتوقع من عالم الإنترنت، في ظل هذه المنافسة الشرسة، أن يفسح لك مكانًا بين المتميزين بعد يوم، أو حتى شهر، من المذاكرة الجادة.
هذا النوع من النجاح السريع لا يتحقق إلا على طاولة الروليت، ولا مجال للمقامرة وسط مطوري الإنترنت المجتهدين.
ولا أريد بهذا الكلام أن أُحبطك، لكني أتحدث عن سنّة كونية: الأشياء العظيمة لا تحدث بين ليلة وضحاها، بل بعد عمل جاد ودؤوب ومتواصل نحو الهدف. إذا حاولت أن تقفز إلى قمة الجبل مرة واحدة فلن تستطيع، فالطريق الوحيد إلى القمة هو التسلق بتأنٍّ وهدوء، وتحمّل السقوط، بل وأن تحب السقوط كما تحب التسلق، لأن السقوط هو ما سيمنحك الخبرة لتصعد أسرع وأكثر أمانًا.
لكن ما علاقة كل هذا بالتميز؟ لا ننسَ أننا نتحدث عن التميز.
هناك خبر مفرح: فرغم هذه الأعداد المليارية من المواقع، فإن أغلبها مجرد نسخ مكررة من مشاريع ناجحة. لا جديد في هذه النسخ، بل أغلبها رديء، ولا يضمن بقاءه على الإنترنت إلا بخدمات مجانية هي في الأصل مقرصنة من مصادر أصلية. نعم، وللأسف، أحد الأساليب المتبعة لإبقاء موقع رديء قيد الاستخدام أن يقدم خدمات مجانية، حتى لو كانت محتوياتها مسروقة.
إذن هناك تحدٍّ لكي تتميز، لكنه ليس بالصعوبة التي توحي بها الأرقام ذات الأصفار التسعة. التميز ينبع أصلًا من الفكرة. وربما تكون الفكرة موجودة بالفعل، لكن التميز يظهر في التطبيق. وحتى إذا سبقك أحد إلى التطبيق بالطريقة نفسها، فقد تتميز في قدرتك على التواصل مع المستخدمين والزوار بفاعلية، أو في سرعة تقديم الخدمة... وهكذا.
راجع كل جزئية في الموقع، وتوقف لتسأل: ما أهمية هذه الصورة في دعم المضمون؟ وماذا يضيف هذا العنوان إلى المحتوى؟ وما الذي يمكن حذفه من هذه الفقرة للتبسيط دون الإخلال بالمعنى؟ فكيف توصل رسالتك إلى المستخدم بدقة وسهولة، بعيدًا عن المبالغة، هو العنوان الرئيسي للتميز.
4. البساطة
وضوح الهدف، وإدراك أن الموقع في الأصل وسيلة اتصال بينك وبين المستخدم، هما ما سيساعدك على إبقاء الأمور بسيطة.
تخيل معي أنك تقف أمام هاتف عليه عشرة أزرار تحمل الأرقام من صفر إلى تسعة، ثم تقف أمام سنترال أمامك فيه مئات الأزرار. إذا طُلب منك أن تضع سعرًا لكل منهما، ستقدّر الأول بعشرات الجنيهات والثاني بالآلاف. لكن إذا طُلب منك إجراء مكالمة، فستختار الهاتف، مع أنه الأقل قيمة مادية، لأنه بالنسبة لك الأعلى قيمة من حيث قدرته على تنفيذ المهمة. وهذا ما يحدث مع مستخدم الموقع.
لن ينشغل المستخدم بعبقرية الأكواد التي تجعل الموقع يبدو كلوحة تحكم في مركبة فضاء، بل يهمه المهمة التي يريد تنفيذها، أو المعلومة التي يبحث عنها، وسيبحث عن أبسط وأسرع طريق إلى هدفه.
إذن، كما أسلفنا، تحتاج البساطة إلى هدف واضح، يمكن تقسيمه عمليًا إلى هدف رئيسي وأهداف فرعية، بحيث تقف عند كل تفصيلة في الموقع وتسأل: ما دورها في خدمة هدف هذه الجزئية؟ وكيف يتكامل ذلك مع الهدف الكلي؟
يجب طرح كل هذه الأسئلة في مرحلة التخطيط، لتحديد الرسالة المطلوب توصيلها، والوقوف على أفضل الطرق لتحقيقها.
وهذه عملية مستمرة لا تنتهي، فحتى بعد التنفيذ يجب أن تسأل: ماذا يمكنني أن أحذف دون الإخلال بالهدف والمضمون؟ وماذا يمكنني أن أضيف لتسهيل هذه العملية أو توضيح هذه الرؤية؟ وهذا ما يقودنا إلى المبدأ التالي.
5. الموقع الإلكتروني كائن حي
التطبيق أو الموقع الإلكتروني كائن حي، يتنفس الكهرباء ويتغذى على المعلومات. لذلك يجب أن يكون هناك شرح مفصل لكل مرحلة من مراحل تكوينه، من الفكرة إلى خطة العمل، مرورًا بكل مراحل التنفيذ والاختبار والصيانة.
فهذا المنتج سيحتاج إلى التعديل والتطوير لاحقًا، وهذه البيانات التفصيلية هي ما سيساعده على مواكبة النجاح والتقدم نحو المزيد.
تخيل أن تطبيقًا إلكترونيًا نجح نجاحًا باهرًا، وأصبح له ملايين الزوار يوميًا، وأنت لا تملك رسمًا تشريحيًا لهذا الكائن! كيف ستضيف إليه ميزة جديدة، أو تجعله أسرع مثلًا؟ يمكنك ذلك في كل الأحوال، لكن إذا عملت على التطبيق بشكل أعمى، دون معرفة واقع التطبيق الذي يعمل حاليًا ويخدم الملايين، فقد تصيبه ببساطة بالتلف أو الأعطال، ولو لبعض الوقت. ودعني أخبرك أن ذلك سيكون كارثيًا، وخسارة كبيرة لثقة العملاء. وكم من مشاريع فشلت لأنها لم تستطع التعامل مع نجاحها والاستفادة مما وصلت إليه.
لذلك، ومنذ اللحظة الأولى، يجب أن توثّق جميع المراحل بشكل منهجي ومفصل: أولًا استعدادًا لمعالجة المشكلات التي ستواجهك أثناء التنفيذ، وثانيًا لتتمكن مستقبلًا من إضافة إمكانات جديدة وقدرات أعلى لهذا المنتج، حتى يواكب التطور المستمر على الإنترنت.
6. التصميم
عندما نتحدث عن تصميم الموقع، فنحن لا نتحدث فقط عن تخطيط الصفحات أو شكلها الخارجي. فالتصميم هو الحد الفاصل بين النجاح والفشل: هو جسم الموقع الذي يتحرك به في الفضاء الإلكتروني، بينما الأكواد هي العقل المفكر ومتخذ القرار، وقواعد البيانات هي القلب النابض لهذا الكائن الرقمي.
الأسس العامة للتصميم الجيد
- يجب أن يتكامل التصميم العام مع فكرة التطبيق وهدفه.
- الحفاظ على نظام ألوان موحد ومريح للعين أمر ضروري.
- تنظيم المعلومات بشكل منطقي ومتوقع.
- استخدام النصوص بإيجاز شديد، وبأسلوب سهل القراءة.
- تمكين المستخدم من طباعة النصوص الطويلة.
وفيما يلي بعض المبادئ التي يجب مراعاتها عند تصميم المواقع والتطبيقات الإلكترونية وتطويرها:
- التماسك.
- التنقل داخل الموقع.
- النصوص.
- الألوان.
- الصور والأشكال والرسومات.
- أشياء لا تفعلها.
التماسك
يجب أن يكون الموقع متماسكًا، بمعنى أن هناك أجزاء أساسية ثابتة في جميع صفحاته، مثل القوائم الرئيسية وذيل الصفحة، لا تتبدل ولا تتغير أبدًا. هذا ما يمنح الموقع هويته، ويجعل عقل المستخدم، بعد أول صفحة، يبدأ في توقع مكان القوائم وشكل الروابط وألوانها، فلا يُجهَد أثناء التنقل، لأن الخطوط الرئيسية للصفحة انطبعت في ذهنه، ويبقى المحتوى الرئيسي وحده هو ما يتغير مع التنقل.
التنقل داخل الموقع
يجب أن يكون هناك تسلسل منطقي لترتيب المحتويات داخل الموقع، يجعل التنقل بين صفحاته رحلة منطقية لها أساس في عقل المستخدم. بعبارة أخرى: أن يتوقع المستخدم ما سيجده أسفل الصفحة، وأن يشعر بالمعلومة قبل أن يجدها. ويعتمد العقل في ذلك على المنطق، وعلى الخبرات التي اكتسبها من استخدام مواقع الويب المختلفة.
النصوص
- نوع الخط: الخطوط القياسية أسهل في القراءة. ابتعد عن الخطوط المزخرفة، فأنت لا ترسم لوحة سريالية، بل تريد توصيل معلومة من خلال هذه النصوص.
- حجم الخط: يجب ألا يقل حجم الخط عن 16 بكسل، مع مراعاة أن يكون لون الخلفية مكمّلًا للون النص، مثل الأبيض والأسود، أو النص الأصفر على خلفية زرقاء داكنة.
- تنظيم المعلومات: نظّم المعلومات بطريقة سهلة القراءة، وتجنب النصوص الطويلة. فعنوان مباشر مع بعض النقاط الواضحة التي تلخص المضمون أفضل بكثير، ويمكن إتاحة رابط لتحميل النص الكامل أو طباعته. والأفضل من ذلك استخدام الرسومات التوضيحية لتوصيل المعلومة.
- الجداول: تجنب الجداول المليئة بالأرقام والبيانات، واستبدلها برسم بياني يستخدم الألوان للتعبير عن القيم، فتصل المعلومة بنظرة سريعة.
الألوان
تُستخدم الألوان لإبراز المحتوى وترتيب أهميته. وهناك نظريات واسعة في استخدام الألوان، فلكل لون دلالة تعبيرية: الأحمر مثلًا يعبر عن الأهمية القصوى، وربما الخطر الشديد، لذلك يجب استخدامه بحذر. إذن استخدام اللون دون معرفة دلالته سيشتت المستخدم، وستصبح الألوان سلاحًا عكسيًا لا يخدم الهدف.
الأغراض الأساسية من استخدام الألوان:
- إبراز ما هو مهم وما هو أقل أهمية.
- تحديد الأماكن الوظيفية في الصفحة.
- ربط عناصر الصفحة المرتبطة ببعضها.
- تسهيل توصيل المعلومة.
وكما نعلم، لكل لون دلالة، والألوان النابضة والساطعة يجب استخدامها باقتصاد، وعند الحاجة فقط.
الصور والأشكال والرسومات
كما يقال: الصورة بألف كلمة. فاختيار الصور المناسبة لموقعك، التي تخدم الهدف، يساعد على توصيل المعلومة بسرعة وبساطة شديدة. لكن، كما في الألوان، يجب استخدام الصور لخدمة الهدف فقط، وعند الضرورة، بعيدًا عن المبالغة والتكديس.
وإذا لم تكن الصورة جيدة ومناسبة، فاستبدالها بنص معبّر أفضل.
يجب أن تكون الصورة:
- ذات صلة بمحتوى الموقع.
- تخدم الهدف أو تقدم معلومة.
- بالنوعية والحجم والشكل المناسب.
- تضيف قيمة إلى التصميم العام.
أشياء لا تفعلها
هناك أشياء يجب أن تتجنبها أثناء تصميم تطبيقك الإلكتروني وتطويره:
- لا تجعل صفحتك مكتظة بالمحتويات.
- لا تُفرط في استخدام الرسومات، بل استخدمها فقط لدعم المحتوى.
- لا تستخدم خلفيات تشتت المستخدم وتعيقه عن قراءة المحتوى.
- لا تستخدم نصوصًا طويلة، بل قسّمها إلى فقرات بسيطة ومباشرة وسهلة القراءة.
- لا تصمم لمتصفح بعينه أو لحجم شاشة بعينه، بل يجب أن يعمل تصميمك بكفاءة أيًّا كان نوع المتصفح أو إصداره، وأيًّا كان نوع الجهاز أو حجم شاشته.