التصميم للمحتوى … الاستراتيجية الكاملة لصناعة مواقع ويب تناسب محتواها

كتبه أحمد مجدي 22 أبريل 2014

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

مسؤولية مصمم الويب لا تنتهي عندما يسلم الموقع للعميل، فبحكم أن المصمم يسعى إلى تجربة استخدام كاملة وناجحة للموقع الذى يعمل عليه لذا وجب عليه أن يهتم بكل ما يؤثر في تلك التجربة، وهل هناك عنصر أكثر أهمية وله تأثير أساسي على تجربة الاستخدام الكلية لمواقع الويب من محتواها؟

التصميم للمحتوى بدلاً من صناعة المحتوى

design-for-content-colorslab
عندما تصمم دون ان تمتلك المحتوى الحقيقي… تأكد انك تسئ لنفسك قبل ان تسئ لمستخدم الموقع

مصمم المواقع قد يستطيع انتاج:

  • موقع سهل الاستخدام.
  • أو مطابق لهوية الشركة.
  • قد يساعد مدير الموقع بوضع تخيل لتوزيع المحتوى.
  • أو بإقتراح محتوى في الواجهة التي يسلمها كأن يضع “نص مؤقت قريب من المحتوى الحقيقي للموقع”.

لكن الأكيد أن صناعة المحتوى  هو مسؤولية أشخاص آخرين غير المصمم أو المطور. مهمتنا الحقيقية هي التصميم للمحتوى وليس صناعة المحتوى نفسه.

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

علاقة المصمم بالمحتوى

يجب ان يتخلى المصمم عن فكرة الجمالية اللانهائية لواجهات المواقع التي يصنعها، تخلى عن الموناليزا التي بداخلك، واهتم بالأهم بالمحتوى.
يجب ان يتخلى المصمم عن فكرة الجمالية اللانهائية لواجهات المواقع التي يصنعها، تخلى عن الموناليزا التي بداخلك، واهتم بالأهم بالمحتوى.

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

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

عواقب تجاهل المحتوى = تكلفة باهظة

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

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

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

كيف تتعامل مع المحتوى؟

بداية، العميل الذي يأتيك ولا يمتلك تصور عن ما لايقل عن 90% من المحتوى الذي يرغب أن يضعه بالموقع، أخبره أن يعود ويستثمر وقتاً أطول في تحديد المحتوى الذي يريد وضعه على الموقع، لأنك ستضيع وقتك في تصميم موقع “لمحتوى مجهول” قد لا يعرضه التصميم بشكل جيد.

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

يمكن أن نحدد الخطوات التي يتعامل بها المصمم مع المحتوى كالتالي:-

how-to-design-for-content-infographic-colorslab

  1. احصل على نسخة من المحتوى الحقيقي للموقع
  2. حلل المحتوى، وقم بتصنيفه إلى ثلاث مستويات:-
    1. أخضر: للمحتوى الهام وهو ما تريد أن يرسخ بذهن زائر الموقع.
    2. أحمر: للمحتوى الغير هام، ويحذف في حالات الـ Responsive.
    3. أصفر: محتوى متأرجح، يتم الرجوع للعميل فيه للتأكد من أهميته أو عدم أهميته.
  3. حدد علاقة المحتوى ببعضه، لتحدد كيفية هيكلة وترتيب المحتوى.
  4. قم بإنشاء خريطة الموقع Sitemap بإستخدام احدى البرامج مثل، MindNodePro

افهم جيداً طبيعة الكتابه للويب

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

  • سيلجأ لك العميل صاحب الموقع -بصفتك خبير في مجالك- لسؤالك عن نصائح لكتابة المحتوى، هل لديك اجابة؟
  • بادر أنت بنصيحته كيف يمكن أن يكتب محتوى أفضل للويب، بالنهايه هذا يصب في جودة الموقع الذي تعمل عليه.
  • يجب أن تكون لك نظره نقدية عندما يقدم لك العميل محتوى موقعه، لتدرك ما اذا كان مناسباً أم غير مناسب، ولماذا غير مناسب؟

انتباه المستخدم للقراءة

مصدر البحث هو منظمة inma
مصدر البحث هو منظمة inma

اظهرت الابحاث أن متوسط الوقت الذي يبقى فيه الانسان البالغ منتبهاً هو 2.8 ثانيه فقط، وهو ما يقرب من مقدار الوقت الذي يستغرقه لقراءة 140 حرفا أو قراءة عنوان مقاله Title على الويب أو عنوان خبر.

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

محتوى البروشور المطبوع لا يصلح كمحتوى ويب

هذا الكلام المنمق والفخم هو كصور الـ Stocks المزيفة لا تفيد المستخدم بشئ
هذا الكلام المنمق والفخم هو كصور الـ Stocks المزيفة لا تفيد المستخدم بشئ

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

في صناعة المحتوى على الويب، هذا النوع “الفخم” الانشائي من الكلام يطلق عليه McContent فهو يوضع بالموقع ليملأ فراغ تماماً كصور ال Stocks المزيفة والتي لا توضح شيئاً عن تخصص الموقع وهدفه.

محتوى يركز على الزائر وليس الشركة

يجب ان يكون اهتمام الحديث الموجه هو على القارئ وليس على المتكلم
يجب ان يكون اهتمام الحديث الموجه هو على القارئ وليس على المتكلم

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

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

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

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

كما علينا أن ندرك أن كلاً من تصميم الموقع ومحتوى الموقع يجب أن يعملاً جنبا إلى جنب. فإذا كنت تريد صناعة مواقع ويب إستثنائية حقاً، تحتاج إلى التأكد من أن الموقع الذي تصممه يلائم المحتوى الذي سيوضع به 100%.

إذا كان لديك افكاراً حول شكل العلاقة التي يجب أن تكون بين المصمم والمحتوى شاركنا بها في التعليقات …

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

أحمد مجدي
مهندس تجربة الاستخدام، متخصص في تصميم واجهات مواقع، تطبيقات الويب والموبايل منذ عام 2006، ورئيس تحرير معمل ألوان. تويتر: @ahmedmagdi


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

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

  • مشير عبد الحليم

    مقال أكثر من رائع
    كنتم قد سألتم سؤال على صفحة المعمل على فيسبوك : كمصمم ماهي العبارة التي تؤمن بها ؟ فأجبت أنا : ” المتحوى هو الملك ” فتعجب الجميع ومعظمهم لم يفهم الجمله ولكل من لم يفهمني أهدي لهم مقال حضرتك 🙂
    يبقى التحدي الأكبر مع العميل يحتاج المصمم ألا يكون سلبيا أو مجرد أداه لتنفيذ خيال العميل بل عليه أن يتحلى بالصبر لإقناعه بما يجب فعله لخدمة محتوى الموقع فقط وهذه ثقافة مفقودة في عالمنا العربي.

    • أبو عمر

      إضافة رائعة لمقال متميز .. تحياتي

  • مصطفى وهبه

    موضوع مميز و رائع حقا عزيزي احمد سدد الله دوما خطاك .

  • راشد المري

    شكراً لك مقال جميل ونصائح قيمة ومهمة

  • أبو عمر

    من أجمل المقالات التي قرأتها في الفترة الماضية .. شكرا لك

  • أبو ريتاج

    مقال رائع شكراً لك

  • محسن بخيش

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

    • للأسف هذا ما يحصل معي احيانا في العمل. وهذا ما يجعل اغلب المواقع متشابهة ولايوجد هناك افكار ابداعية جديده.

  • AlHasan AlDasooqi

    ما شاءالله ،،، محتوى ومقالة رائعة والله 🙂
    تسلم إيدك

  • محمد عيساني

    موضوع رائع وغاية في الاهمية بارك الله فيك اخ احمد

  • عماد عادل

    مقال “وجيز” ويقدم أطنانًا من المعلومات. شكرا 🙂
    ومن هذا المنطلق، أنا في أي تصميم موقع سواء كان لي أنا أو للعميل، فأنا أركز على ما يهم الزائر فقط.

  • أزو عبدالله

    مدونتك جعلتني أدرك أن تصميم المواقع ليس مجرد إختيار ألوان وخطوط وصور بل هو فلسفة!

  • عبد الغفور

    ماشاء الله موضوع شييق ورائع

    اخي انا لست مبرمج وهدفي من الدخول الى الموضوع هو اني في صدد بناء مشروع يعتبر كشبكة تعليمية ..

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

    وسؤالي :

    – هل يمكنك تصميم شبكات اجتماعية وتكون بنفس تقنية وجودة الالوان التي استخدمتها هنا ؟

    في انتظار ردك اخي أحمد

    تقبل تحياتي

  • اين تدوينات جديده ؟؟؟ لماذا لا يوجد مدير ؟؟

  • ihab haji

    حقا مقال رائع مشكورين ^_^

  • عبدالمجيد الدهاسي

    شكرا لك اخي بالتأكيد
    نعم وقد عانيت كثيراً من هذه المشكلة ..

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

    من خلال تجربتي اتخذت قرار انه لا بد من اخذ عينه حقيقية لما سوف يكتب في الموقع ومعاينة تصميم الموقع عليه

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

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

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

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

  • mehdi lamaaffar

    المقال رائع وفيه الكتير من الاشياء التي استفدت منها ولكن لم اجد هذه المواصفات داخل هذه الصفحة التي تقرؤها انت الان فمثلا لماذا هذه العبارة موجودة “الوقت المقدر لقراءة هذا المقال: 5 دقيقة, 12 ثانية” زائد اني لم احب تقسيم الصفحة الى tab معاذا هذا كل شيء رائع و شكرا .

  • اشكرك على المعلومات القيمة…. مقال رائع