صمم صفحة رئيسية أفضل باستخدام StoryBrand Framework

نشرت: 2022-03-11

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

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

ما هو الهدف من الصفحة الرئيسية؟

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

لقد تحسنت الصفحات الرئيسية بسرعة على مدار العقود القليلة الماضية بفضل التحليلات وفرق التسويق والتصميم التي أدخلت تحسينات على الأداء بناءً على تلك البيانات.

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

باستخدام بيانات التحليلات هذه ، يمكن لمصممي UX تحسين وضع العبارة التي تحث المستخدم على اتخاذ إجراء ، وتحسين سرعة الموقع ، واختبار A / B ، واستخدام مقاطع الفيديو لجذب الزوار ، واستخدام صور عالية الجودة لجذب انتباه الناس ، وتضمين أدوات المراسلة لتحسين أداء الصفحة الرئيسية. ومع ذلك ، هل سيضمن هذا ولاء وثقة المستهلكين؟

يتبع Slack أفضل ممارسات تصميم الصفحة الرئيسية لإنشاء تصميم يركز على المستخدم
تركز صفحة Slack الرئيسية على الفوائد التي تعود على الزائر.

ثلاث مزالق شائعة عند تصميم الصفحات الرئيسية

تواجه الشركات - ومن خلال مصممي الإضافات - ثلاث مآزق رئيسية عند إنشاء صفحة رئيسية:

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

ما هو إطار عمل StoryBrand؟

على الرغم مما تعتقده بعض الشركات ، فإن الشعار لا يساوي العلامة التجارية. بعيد عنه؛ العلامة التجارية هي الوعد الذي يكمن وراءه سبب وجودها.

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

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

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

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

كيفية استخدام StoryBrand مع العميل

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

يقارن ميللر بناء قصة براند بكتابة قصة من أجل سيناريو. قام بتقسيمها إلى سبع نقاط مؤامرة.

الهيكل الأساسي لإطار عمل StoryBrand
صورة من بناء قصة العلامة التجارية لدونالد ميللر.

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

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

  1. الشخصية : العميل دائمًا هو بطل القصة وليس العلامة التجارية. الأمر متروك لمصممي UX لمعرفة ما يريده العملاء من العلامة التجارية ، عادةً من خلال بحث UX واختبار المستخدم. إنهم بحاجة إلى التركيز على الرغبات التي تدفع الناس ، أو أشياء مثل الحفاظ على الموارد المالية ، أو توفير الوقت ، أو بناء شبكات اجتماعية ، أو اكتساب المكانة.
  2. لديه مشكلة : الشرير في StoryBrand arc هو مشكلة الشخصية. من المفيد تجسيد هذه المشكلة وفهم أن منتجات الشركة تشبه الأسلحة التي يمكن للعميل استخدامها للتغلب عليها. تميل الشركات إلى التركيز على حل المشكلات الخارجية ، لكن العملاء يشترون حلولًا للمشكلات الداخلية . لدى الناس ثلاثة مستويات من الصراع:
    - خارجي (تحاول معظم الشركات حل المشكلات الخارجية)
    - داخلي (مثل الإحباط والترهيب وانعدام الأمن)
    - فلسفي (ما أهمية هذه القصة؟)
  3. ويلتقي بدليل : الدليل هو العمل أو العلامة التجارية. يحتاج العملاء إلى شخص ما لرعاية المشكلة. سيكون تصورهم للعلامة التجارية أمرًا حاسمًا لثقتهم. يجب توصيل شيئين:
    - التعاطف (أظهر فهمًا للألم الذي قد يشعر به العميل)
    - السلطة (ستمنح العميل الثقة في أن العلامة التجارية قادرة على مساعدتهم)
  4. من يعطيهم خطة : يُظهر العمل للعميل ما يحتاج إلى القيام به بعد ذلك. لا يزال العملاء غير متأكدين مما إذا كانوا سيشترون حتى تظهر لهم خطة عمل بسيطة. يمكن لمصممي UX توضيح الخطوات التالية بالضبط للعملاء. يمكنهم أيضًا تخفيف أي قلق قد يكون لدى العميل من خلال معالجة المخاوف المتعلقة بالمنتج أو الخدمة.
  5. ويدعوهم إلى اتخاذ إجراء : الدعوات الفعالة للعمل تسهل عمليات الشراء أو الاشتراك.
  6. هذا يساعدهم على تجنب الفشل : ما هي المخاطر بالنسبة للعميل؟ ماذا سيخسرون إذا لم يشتروا من هذه الماركة؟
  7. وينتهي بالنجاح : أخبر العملاء كيف يمكن لهذا الإجراء المحدد تغيير حياتهم. أظهر لهم كيف ستبدو حياتهم بعد شراء المنتج وكيف سيجعلهم هذا القرار يشعرون. ثلاث طرق قوية ينهي رواة القصص القصة بها هي السماح للشخصية بما يلي:
    - الفوز بالقوة أو المركز
    - ابحث عن شخص ما أو شيء ما يجعلهم كاملين
    - جرب شكلاً من أشكال الإدراك الذاتي الذي يجعلها متكاملة أيضًا

ورقة عمل إطار عمل StoryBrand الهيكل الأساسي لإطار StoryBrand
صورة من StoryBrand Brandscript.

كيفية استخدام StoryBrand Framework في الصفحة الرئيسية

يجب ألا تكون الصفحة الرئيسية حول الأعمال التجارية أبدًا. يجب أن يكون حول عملائها المحتملين.

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

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

العنوان الرئيسي

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

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

خلق الثقة من خلال إظهار السلطة

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

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

أفضل ممارسات تصميم الصفحة الرئيسية: التركيز على العميل
تضع صفحة ZeBrand الرئيسية التركيز بشكل مباشر على العميل.

دعوة للعمل

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

هناك نوعان من العبارات التي تحث المستخدم على اتخاذ إجراء:

  1. العبارات المباشرة التي تحث المستخدم على اتخاذ إجراء مخصصة للأشخاص الذين يعرفون أنهم على استعداد للشراء أو الاشتراك ، وتتضمن لغة مثل "شراء" أو "اشتراك" أو "البدء". سيؤدي النقر فوق CTAs هذه إلى نقل المشتري مباشرةً إلى نموذج لإكمال معاملته.
  2. العبارات الانتقالية التي تحث المستخدم على اتخاذ إجراء مخصصة للزوار غير المستعدين تمامًا للشراء بعد. قد يحتاجون إلى مزيد من الوقت والمعلومات قبل الالتزام. تأتي هذه في شكل أنواع من الأزرار "مزيد من المعلومات" أو "جرِّب مجانًا" أو "ابق على اتصال".

قد تجمع بعض العبارات التي تحث المستخدم على اتخاذ إجراء بين الاثنين ، أو تضعهما جنبًا إلى جنب (غالبًا ما يُنظر إليها على أنها زوج من أزرار "اشترِ الآن" و "معرفة المزيد").

نصائح تصميم الصفحة الرئيسية: مجموعة أزرار الحث على اتخاذ إجراء
لدى Canary Labs عبارة بارزة تحث المستخدم على اتخاذ إجراء لإجراء عملية شراء ، بالإضافة إلى زر أقل بروزًا للحصول على مزيد من المعلومات

إشراك الصور

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

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

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

نص قصير

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

يجب على مصممي UX مساعدة العملاء على مشاركة قصتهم بأبسط طريقة.

يتضمن التصميم الجيد للصفحة الرئيسية نصًا أقل
يستخدم Squarespace الحد الأدنى من النص على صفحته الرئيسية.

الصفحات الرئيسية الناجحة تجيب على الأسئلة الرئيسية

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

  • ماذا يعملون؟
  • كيف يمكنهم مساعدتي؟
  • ماذا علي أن أفعل لشراء أو المشاركة؟

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


اسمحوا لنا أن نعرف ما هو رأيك! يرجى ترك أفكارك وتعليقاتك وملاحظاتك أدناه.

• • •

مزيد من القراءة على مدونة Toptal Design:

  • هل كل الاتجاهات تستحق العناء؟ أشهر 5 أخطاء في UX يصنعها مصممو الويب
  • كيفية تصميم صفحة مقصودة فعالة
  • بنيت للتحويل - أفضل ممارسات تصميم الصفحة المقصودة
  • الدليل النهائي لتصميم مواقع التجارة الإلكترونية
  • الدليل الشامل لهندسة المعلومات