مبادئ ايدا “AIDA” في تصميم صفحات الهبوط

سنتحدث في هذا المقال عن طريقة إستخدام التصميم لتحقيق مبادئ ايدا AIDA التسويقة  ولعل يخطر ببالنا( أوبرا عايده ) لتشابه الإسم 🙂  , ايدا هو إختصار ل 4 مبادئ استخدمت في الدعاية والتسويق التي توضح مجموعة من الأحداث المشتركة التي قد تحدث عند تفاعل المستخدم مع صفحات الهبوط والاعلان .

 

مبادئ-ايدا-aida-في-تصميم-صفحات-الهبوط

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

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

 

A: Attention (لفت الانتباه)

هي أول وأهم خطوة حيث تعتمد بقية الخطوات عليها , فكيف ستجعل الزائر يتفاعل اذا لم تجذب انتباهه ؟!!

مبادئ-ايدا-aida-في-تصميم-صفحات-الهبوط

ان التصميم الجيد والمتميز  من أهم عوامل جذب الإنتباه .

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

وان طرق جذب انتباه المستخدم عامة تتغير طول الوقت مع تغير التكنولوجيا  . وهذه بعض الطرق المشهورة والتي تستخدم  حاليا .

 

 

النصوص الكبيرة

 

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

مبادئ-ايدا-aida-في-تصميم-صفحات-الهبوط

مبادئ-ايدا-aida-في-تصميم-صفحات-الهبوط

مبادئ-ايدا-aida-في-تصميم-صفحات-الهبوط

السلايدرات (sliders)

 

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

 

مبادئ-ايدا-aida-في-تصميم-صفحات-الهبوط

 

مبادئ-ايدا-aida-في-تصميم-صفحات-الهبوط

 

مبادئ-ايدا-aida-في-تصميم-صفحات-الهبوط

 

 

 

التأثيرات المتحركة (Animation)

قديما كنا نعتمد علي الفلاش في عمل التاثيرات المحتركة , أما اليوم فلم تعد التأثيرات المتحركة مشكلة مع وجود تاثيرات السي اس اس “CSS3 animations ” التي انتشرت سريعا .واذا استخدمت التأثيرات الحركية بشكل صحيح فستكون طريقة ممتازة لجذب الانتباه الي موقعك.

وهذه بعض الأمثلة علي ذلك :

مبادئ-ايدا-aida-في-تصميم-صفحات-الهبوط

The Expressive Web

مبادئ-ايدا-aida-في-تصميم-صفحات-الهبوط

Reverdand Danger

 

مبادئ-ايدا-aida-في-تصميم-صفحات-الهبوط

Quazar

I: Interest (الإهتمام)

الاهتمام وهو ثاني مبدأ في ايدا . وفي هذه الخطوة نكون قد جذبنا انتباه المستخدم بالفعل والان نريده أن يهتم بما نقدم فكيف نفعل ذلك؟!

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

*توضيح الفوائد والمميزات باختصار  . فالمستخدمين لايريدوا أن يقرأوا فقرات طويلة لا يفيدهم فيها الا نقاط قليلة.

* الخطوات والقوائم والأيقونات والنقاط  إلخ …. نستطيع إستخدامها في توصيل المعلومة بسرعة

وهذه بعض الأمثلة :

مبادئ-ايدا-aida-في-تصميم-صفحات-الهبوط

Evernote تظهر 3 فوائد كبيرة الي جانب الصور بمجرد تحميل الصفحة.

 

مبادئ-ايدا-aida-في-تصميم-صفحات-الهبوط

صفحة الهبوط ل Basecamp تدخل في صلب الموضوع مباشرة من خلال توضيح 3 فوائد رئيسية.

 

 

مبادئ-ايدا-aida-في-تصميم-صفحات-الهبوط

ونري صفحة  Sparrow تستخدم أقسام محدده وواضحة لعرض فوائد تطبيقهم.

 

 

 

D: Desire (الرغبة)

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

 

توليد الرغبة يعتبر امر اساسي ، فالشركات توظف خبراء متخصصين في التسويق لخدمة اهداف حملاتها لتحقيق هذه الرغبة. وسوف نركز حول كيفية تطبيق هذا من خلال تصميم الويب.

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

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

مبادئ-ايدا-aida-في-تصميم-صفحات-الهبوط

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

مبادئ-ايدا-aida-في-تصميم-صفحات-الهبوط

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

مبادئ-ايدا-aida-في-تصميم-صفحات-الهبوط

التأثير الإجتماعي

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

الدليل الاجتماعي يمكن ان نربطه اكثر بالجانب النفسي ، لكنه في الاساس يصف لنا اتباع افراد لأشخاص آخرون في اجراء ما او في اتجاه معين.

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

مبادئ-ايدا-aida-في-تصميم-صفحات-الهبوط

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

مبادئ-ايدا-aida-في-تصميم-صفحات-الهبوط

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

مبادئ-ايدا-aida-في-تصميم-صفحات-الهبوط

والجودة مهمة فاستخدمها لصالحك واستغل العدد الكبير لصالحك ,و هذا يمكن حين تظهر عدد متابعي تويتر واعجابات الفيسبوك او روابط RSS  .

 

مبادئ-ايدا-aida-في-تصميم-صفحات-الهبوط

 

A: Action(التفاعل)

 

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

 

عملية الطلب

 

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

 

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

 

 

مبادئ-ايدا-aida-في-تصميم-صفحات-الهبوط

 

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

مبادئ-ايدا-aida-في-تصميم-صفحات-الهبوط

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

وأيضا اجعل من السهل للمستخدم القيام بالفعل, عن طريق توفير أكثر من فرصة للقيام بالفعل .وينبغي ادراج عنصر الفعل مع (الزر ) مع التصميم من البداية وجعله واضحا في الصفحة .

 

مبادئ-ايدا-aida-في-تصميم-صفحات-الهبوط

 

 

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

طريقة العرض Z

طريقة العرض Z  هي طريقة بسيطة ومثالية لتنفيذ مبادي ايدا .فهي طريقة مؤثرة تقود المستخدم خلال كل خطوة لتوصله في النهاية لعنصر الفعل .

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

مبادئ-ايدا-aida-في-تصميم-صفحات-الهبوط

مبادئ-ايدا-aida-في-تصميم-صفحات-الهبوط

مبادئ-ايدا-aida-في-تصميم-صفحات-الهبوط

مبادئ-ايدا-aida-في-تصميم-صفحات-الهبوط

وفي النهاية :

يمكن ان تمثل معرفة مباديء نظرية AIDA  وكيفية تنفيذها خطوة بخطوة فائدة كبيرة لمصممي الويب.

وعلى الرغم من سهولة وبساطة النقاط التي تمت مناقشتها في اعلى المقالة ، الا انها تتطلب مهارة خاصة في اخراجها بشكل ناجح وفعال.

 

 

المصادر:

WIKI

tutsplus

مقالات ذات صلة

8 تعليقات

  1. أسامة محمد
    19 فبراير,2014 في 1:55 ص - Reply

    موضوع مفيد جدا ومهم تسلم ايدك 🙂

    • محمد ماهر
      19 فبراير,2014 في 1:57 ص - Reply

      شكرا علي مرورك الكريم

  2. lmomtaz
    19 فبراير,2014 في 3:00 ص - Reply

    مقال رائع جدا

    • محمد ماهر
      19 فبراير,2014 في 5:05 ص - Reply

      شكرا علي مرورك 🙂

  3. muha sy
    19 فبراير,2014 في 8:58 م - Reply

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

    • محمد ماهر
      15 أبريل,2014 في 2:44 م - Reply

      شكرا

  4. محمد قطاج
    15 أبريل,2014 في 3:24 ص - Reply

    مشكور أستاذ محمد على الموضوع المميز. هل من الممكن توضيح جزئية “أسلوب العرض Z” بشكل أوضح من فضلك؟ لم أفهمها جيدا بعد.
    تحياتي لك ولفريق العمل

اضف رد