تصميم صفحة هبوط احترافية بأفكار ابداعية لعملاء 2022
نحن نعرف كيف تبدو “الاحترافية”. فلماذا يصعب جعل صفحاتنا تبدو صحيحة؟
عند التصميم ، ندرك الآلاف من القرارات الدقيقة اللازمة لإنشاء صفحة.
قرارات مثل:
أين يجب أن نضع الصور؟
هل هذا تباعد كاف؟ هل هذا كثير من التباعد؟
هل كل شيء يتماشى مع كل شيء آخر؟ هل يجب على هذا العنصر كسر هذه القاعدة بسبب هذا السبب؟
ما مقدار الحشوة التي يجب أن نعطيها لكل قسم؟ ماذا عن هذا الرسم التوضيحي هنا؟ هناك شيء لا يبدو صحيحًا.
وهذه الآلاف من الأسئلة لا تساعدنا حقًا في تحديد ما تحتاجه صفحاتنا للانتقال من “مظهر الهواة” إلى “التصميم الجميل”.
لذا فإن السؤال هو ، هل هناك طريقة أسهل؟
دعنا نستكشف 3 تقنيات بسيطة لإنشاء صفحات ذات مظهر أكثر احترافية
فوق أنماط التصميم
استخدم أسرار UX المفتوحة
اجعلها سهلة المسح
الثواني الخمس الأولى مهمة
كثيرًا في الواقع ، انتهى بهم الأمر إلى تقديم مفهوم “اختبار الخمس ثوانٍ”.
في الأساس ، إنها طريقة UX سريعة تُستخدم للتأكد من أن الرسالة التي تنقلها صفحتك واضحة للمستخدمين.
اختبار الخمس ثوانٍ قيد التنفيذ:
ابحث عن صديق (أو شخص غريب ودود) لديه بعض الوقت الإضافي للمساعدة في صفحتك.
تظهر لهم صفحتك لمدة 5 ثوانٍ.
ثم اطلب منهم متابعة الأسئلة.
بسيط جدا أليس كذلك؟
لكن الأهمية تكمن بالطبع في الأسئلة.
أهم الأسئلة التي يجب طرحها، هي:
- ما هي الصفحة التي تبيع أو تعرض؟
- ما الفوائد التي ستحصل عليها من العرض؟
- ما هو اسم الشركة التي تقدم لك هذا العرض؟
كما لاحظت ، فهي تستند إلى ما يمكن تذكره على الفور من صفحتك. وأفضل جزء – لست بحاجة بالضرورة إلى أفراد من الجمهور المستهدف.
إنك تختبر الوضوح وليس الطلب.
وينتهي الأمر بأن يصبح الوضوح عاملاً هائلاً عند الحديث عن جعل الصفحة تبدو احترافية.
لكن لفهم السبب ، نحتاج أولاً إلى التحدث عن الانطباعات الأولى.
لماذا الانطباعات الأولى مهمة للصفحات المهنية؟
تذكر عندما قلنا أنه يمكنك فقط “معرفة” متى تبدو الصفحة احترافية أم لا؟
حسنًا ، جزء من ذلك يتعلق بالانطباعات الأولى.
في غضون فترة زمنية قصيرة فقط ، يشكل العميل المحتمل رأيًا حول صفحتك ، ومدى جديرة بالثقة ، وما الذي يجعلهم يشعرون بها.
وعندما أقول فترة قصيرة من الوقت ، أعني ذلك.
وفقًا للدراسات ، يتم تشكيل الانطباعات الأولى في 500 مللي ثانية.
ويستند إلى هذا الانطباع الأول بأن المستخدمين يتخذون قرارهم الأول بشأن صفحتك.
يمكن أن يتخذ العملاء المحتملون القرارات عند زيارة صفحتك
انقر فوق CTA الرئيسي الخاص بك (إذا كانوا مهتمين على الفور).
مرر لأسفل لمعرفة المزيد حول عرضك (إما لأنهم فضوليون أو لأن لديهم بعض الأسئلة التي كانوا بحاجة إلى إجابة قبل النقر).
لقد ارتدوا (إما لأن نيتهم في النقر على رابط صفحتك لا تتطابق مع توقعاتهم ،
أو أنهم ليسوا مهتمين فقط (ليسوا جزءًا من جمهورك المستهدف) أو أنهم حصلوا على “شعور سيء” من صفحتك.
إذا أخذنا هذه الفكرة عن أهمية الانطباعات الأولى وقلة الوقت المتاح لنا لتكوينها …
الآن نعود إلى موضوع الوضوح.
الوضوح مهم لأننا لا نحصل على الكثير من الوقت مع العملاء المحتملين
تخبرنا معظم النصائح المتعلقة بالعناوين الرئيسية للصفحات المقصودة دائمًا أن نكون واضحين ،
وأن نجعل عرضنا واضحًا ، وإذا أمكن ، اذكر أكبر فائدة ستجنيها منه.
والمنطق بسيط.
إذا جعلت العملاء يفكرون في شيء “ذكي” ، فإنه يفسد الانطباعات الأولى. إنه ليس ذكيًا ، إنه فوضى.
وهذا هو سبب وجود أنماط التصميم في الجزء المرئي من الصفحة.
تبدو أنماط التصميم فوق النموذج هكذا:
وهذه الأنماط هي مزيج من 3 عناصر.
العنوان + CTA + فيديو أو صورة
إنها “مجموعة ثلاثية الاتجاهات” تعمل لعدة أسباب:
إنه يتبع مبدأ التصميم الخاص بـ “قاعدة رقم 3” ، والتي تساعد على تقسيم المحتوى ،
وتزيد من جاذبيته المرئية وتجعله لا يُنسى.
أنت لا تعرض نصًا وزرًا فقط (مما يجعل الصفحة تبدو “أساسية”).
يمكن أن يؤدي استخدام الصور أو مقاطع الفيديو الجيدة إلى تضخيم المشاعر والمساعدة في توضيح رسالتك بشكل أسرع من الكلمات.
(على سبيل المثال ، تكون صورة الكتاب على الصفحة المقصودة أقوى من مجرد قول “كتاب إلكتروني مجاني!”).
يتبع التسلسل الهرمي المرئي ، مما يقلل من التعقيد.
هذا يعطيها أمرًا متأصلًا غير معلن عنه عندما يجب عليك قراءة المحتوى. العنوان ، ثم الصورة أو الفيديو ، ثم الزر أو النموذج.
إذا كنت تريد حقًا رؤية المزيد من هذه الأنماط قيد التنفيذ ، فما عليك سوى البحث عن “Landing Pages” على Behance.
سترى هذا التنسيق في الجزء المرئي من الصفحة في كل مكان ، ولسبب وجيه.
هذا هو السبب في أن وجود شيء جيد في الجزء المرئي من الصفحة يقطع شوطًا طويلاً.
وإذا كنت تريد معرفة مكان الحصول على صور رائعة لصفحتك ، فقد أعدت Kickofflabs مقالة رائعة حول الموضوع مع قائمة جيدة بمصادر مدفوعة ومجانية.
قائمة مصادر الصور المجانية لصفحات الهبوط:
ولكن ماذا لو كنت لا تريد استخدام نمط تصميم مثل المذكور أعلاه؟
لست بحاجة إلى ذلك ، طالما أنك تجد طريقة لتضمين صورة أو مقطع فيديو أو تصميم مرئي بطريقة ما (كما هو الحال في الخلفية).
لأن هناك شيئًا ما يتعلق بعدم وجود لون عادي واحد يضيف أضعافًا مضاعفة إلى الصفحة.
الصورة مهمة للغاية.
وبما أنني أريد مقارنة النقطة وتوجيهها إلى المنزل ، فإليك صفحة هبوط واحدة بدون خلفية (وهي من نموذج)
وإليك صورة (والتي ، من المفارقات ، هي في الواقع فيديو في الخلفية. لكن الصورة الثابتة جيدة جدًا لذا سأحتفظ بها):
سيبدو الشخص ذو الصورة الجيدة دائمًا أكثر احترافًا.
والآن بعد أن توصلنا إلى أفضل طريقة للتنظيم في الجزء المرئي من الصفحة ، دعنا نستكشف القواعد الأخرى التي يجب أن نطبقها لبقية الصفحة …
2) استخدم أسرار UX المفتوحة
لذا ، فإن تجربة المستخدم (التي تعني تجربة المستخدم) شيء غريب يجب دراسته.
يرجع ذلك أساسًا إلى أنه كلما نظرت إلى أفضل الممارسات ، كلما أدركت مدى وضوحها.
ثم ينتهي بك الأمر إلى ركل نفسك لأن صفحاتك تنتهي بكسر كل قاعدة واضحة للويب.
لهذا السبب يطلق عليهم أسرار UX المفتوحة – إنها واضحة جدًا ومع ذلك فإننا نخرق هذه القواعد طوال الوقت.
تتضمن أسرار UX المفتوحة:
فقط تسطير النص الذي هو ارتباط. لا تستخدمه للتأكيد على النص. وذلك لأننا نربط بالفعل نصًا مسطرًا بروابط على مواقع أخرى.
إذا وضعنا خطًا تحت النص العادي ، فإننا نرسل إشارات مختلطة فقط.
كن متسقًا قدر الإمكان. إذا أنشأت تباعدًا يبلغ 24 بكسل ، فافصل بين جميع المسافات المتشابهة في الصفحة بمقدار 24 بكسل.
اجعل كل ما تبذلونه من h1s بنفس الحجم. h2s نفس الحجم. كل هذا يساعد صفحتك.
استخدم أشياء مثل H1s و H2s و H3s وما بعده (واستخدم العلامات الصحيحة في html الخاص بك).
يستخدمها الأشخاص الذين يستخدمون برامج قراءة الشاشة (البرامج التي تقرأ النص بصوت عالٍ) لتقديم صفحتك بشكل أفضل للمستخدمين.
لا تعرف أبدًا ما إذا كان شخص ما تستهدفه يستخدمها. يساعد أيضًا في تحسين محركات البحث.
قم بتجميع الأشياء معًا لتقليل التعقيد البصري. حسنًا ، هذه ليست قاعدة “واضحة” تمامًا ، لكنها مبدأ تصميم جيد.
تميل العناصر الأقرب إلى أن يتم تجميعها معًا بصريًا (ونفسيًا). يمكنك استخدام اللون لعمل نفس الشيء.
16 بكسل. هناك مقولة مستمرة مفادها أن “16 بكسل يجب أن تكون الحد الأدنى أو على الأقل” مكان جيد للبدء “لأسباب تتعلق بإمكانية الوصول”. غير صحيح.
المشكلة هي أنني سمعت هذه العبارة مرات عديدة افترضت أنها كانت كذلك.
لا يوجد معيار رسمي لحجم الخط ، ولكن نظرًا لأن 16 بكسل هو الحجم الافتراضي للمتصفحات ، لذلك يبدو أن هذا الرقم يتم طرحه كثيرًا.
أفضل سيناريو حقيقي هو استخدام أحجام وحدات الخطوط مثل النسب المئوية أو em (ليس أقل من 1em) التي تتناسب مع حجم الشاشة ومستوى التكبير / التصغير.
راجع هذين الرابطين هنا إذا كنت ترغب في البحث عن المزيد.
https://www.w3.org/QA/Tips/font-size
https://w3-lab.com/website-font-size-guidelines/
اجعل الأزرار تبدو مثل الأزرار. اجعلها دائرية ، وامنحها القليل من الظل ، وعندما يحوم الماوس فوقها ، اجعلها أغمق في اللون.
ستندهش من مدى تضافر مثل هذه الأشياء الصغيرة بمرور الوقت.
انظر إلى صفحاتك المفضلة وستلاحظ أنهم جميعًا يتبعون قواعد تجربة المستخدم هذه (والمزيد أيضًا)
لكن هناك مبدأ أخير لم نتحدث عنه.
اجعلها سهلة المسح
لنكن صادقين ، فالاحتمالات أنك لم تقرأ كل كلمة في هذه المقالة. لقد قمت بالقشط قليلاً لأن لديك حياة.
وهو ما يرام!
لكن عليك أن تدرك أن عملائك المحتملين سيفعلون الشيء نفسه
وفقًا للدراسات ، سيميل المستخدمون إلى الانتقال السريع إلى المعلومات ذات الصلة التي يبحثون عنها وتجاهل كل شيء آخر.
لهذا السبب كنت أقوم بتقسيم هذه المقالة إلى “أقسام”. الفكرة هي أنك يجب أن تحاول أن تفعل الشيء نفسه.
فيما يلي كيفية تحسين إمكانية المسح لصفحاتك:
استخدم النقاط (مثل النقطة التي تقرأها الآن. فهي تساعد في أن تكون موجزة ومفيدة فيما يتعلق بمزاياك)
تسليط الضوء على الكلمات الرئيسية (يُعد الكتابة بالخط العريض أو استخدام الألوان خيارًا)
استخدم عناوين فرعية ذات مغزى (اسأل نفسك “ما الذي يجب أن يعرفه العملاء المحتملون” ، واجعل هذا العنوان الفرعي الخاص بك)
اجعل طول الجملة قصيرًا ، بحيث يتراوح بين 60-80 حرفًا حتى تسهل قراءته.
لا تريد أن يفقد العملاء مكانهم لأن جملتك طويلة جدًا لدرجة أنهم يفقدون مكانهم عندما ينتقلون إلى السطر التالي)
احتفظ بفكرة واحدة لكل فقرة (واحتفظ بفقراتك بأقل من 3 جمل. إذا كنت بحاجة إلى المزيد ، فقم بتقسيمها أو كن أكثر إيجازًا)
قم بتضمين أهم المعلومات الخاصة بك يؤدي أعلى في الصفحة. أقل أهمية ومعلومات داعمة أسفل الصفحة.
معرفة ما إذا كان يمكنك نصف عدد الكلمات بعد الانتهاء من صفحتك. كلمات أقل تعني فوضى أقل.
لذلك نأمل أن يساعدك هذا في إنشاء صفحات ذات مظهر أفضل وأسهل في القراءة.
قد يهمك أيضاً: افضل تصميمات جرافيك ستتصدر التريند في 2022 تعرف عليها
