إذا كانت الأحذية هي المكون الأخير لأي ملابس، فإن تذييل موقع التجارة الإلكترونية هو العنصر الأخير في تصميم البيع الخاص به. من خلال التركيز على العنصر السفلي، أي التذييل، تصبح مواقع الويب الحديثة جاهزة لعرض شخصيتها بكل طريقة ممكنة. في بيئة التجارة الإلكترونية التنافسية، هناك ما يكفي من الأفكار الأصلية والإبداع واتجاهات التصميم. قبل تنويع تذييل موقع التجارة الإلكترونية، يجدر النظر في نقاط مهمة. ما الذي يجب وضعه أولاً وما هي أفضل طريقة للقيام بذلك؟ تتضمن مجموعتنا من تصميمات التذييل الملهمة بعض الخيارات المثيرة للاهتمام.
إقرأ أيضاً: 13 اتجاهات تسويق التجارة الإلكترونية لعام 2019
إحصائيات مثيرة للاهتمام من Chartbeat. أظهرت دراسة لسلوك 25 مليون مستخدم مدى عمق تصفحهم للصفحات. اتضح أن انتباه المستخدم ينجذب إلى المساحة الموجودة أسفل خط الطي. عند تلقي المزيد من المعلومات المفيدة من الناحية العملية، يبقى الزائرون لفترة أطول في المنطقة التي تبلغ 1200 بكسل من أعلى الصفحة (مع متوسط شاشة رأسية تبلغ 700 بكسل في المتصفح)، أو خلف الشاشة الثانية.
وقت العرض (بالثانية) / المسافة من أعلى الصفحة (بالبكسل)
هناك فجوة كبيرة في مدة مشاهدة الشاشتين الأولى والثانية. TOP هو 4 ثواني، تصل المدة إلى الحد الأقصى (16 ثانية) عند 1200 بكسل من الأعلى ومع مزيد من التمرير، تنخفض ببطء.
نسبة الزوار (%) / المسافة من أعلى الصفحة (بالبكسل)
جزء كبير من الزوار (أكثر من 25٪) لا ينتظرون حتى تحميل المحتوى ويبدأون في تمرير الصفحة. وهذا يعني أن 75% فقط سيرون القمة أولاً. المنطقة الأكثر مشاهدة في الصفحة هي 550 بكسل (أعلى خط الطي مباشرةً).
تبدد الدراسة الأسطورة القائلة بأن المستخدمين لا ينتقلون إلى أسفل الصفحة ويشاهدون كل المحتوى. يعتبر التذييل أيضًا مهمًا لموقع التجارة الإلكترونية الحديث، كما أن له مزاياه الخاصة.
ستخبرك هذه النصائح العشر بكيفية تصميم تذييل موقع الويب بشكل جميل - وفقًا لقواعد التكوين في تصميم الويب وحل المهام ذات الأولوية. قم بتطبيق الأساليب الأكثر ملاءمة لتحسين سهولة الاستخدام وتجربة المستخدم وحتى زيادة المبيعات.
تقليديا، يتم تغطية المسائل التنظيمية والقانونية المطلوبة في تذييل الموقع. تم تصميم الإشعارات بنص أقل وضوحًا، مما يحرر مناطق أخرى من الصفحات لعناصر ذات معنى أكبر. وفيما يلي قائمة عينة للنظر فيها:
يجب أن يستوفي موقع الويب الذي يبيع المنتج المتطلبات القانونية ويقدم معلومات حول الإجراء وفترات الإرجاع. موقعه في التذييل مناسب لكل من مورد البيع والزوار.
متجر على الإنترنت للعلامة التجارية Yves Rocher: تذييل بملء الشاشة بتصميم جميل للطبقات المتناوبة. يبلغ عن الشركة والبنية التحتية لموقع البيع - بدءًا من تتبع الطلب وحتى سياسة البيانات الشخصية. هناك أيضًا نصائح حول استخدام المنتج والمكافآت والعروض الترويجية
يخضع تجار المكملات الغذائية لمتطلبات قانونية متزايدة. مسؤولية. هناك عدد لا بأس به من الأشياء التي ينبغي عليهم/لا ينبغي عليهم ذكرها على موقع المبيعات الخاص بهم. يتم تمييز الروابط إلى المعلومات القانونية بالخط العريض لتحسين الرؤية.
يتناسب التذييل الذي يحتوي على صورة خلفية جميلة بشكل عضوي مع التصميم العام للموقع. ليس هناك حدود واضحة، بل المحتوى نفسه بمثابة فاصل
موقع بيع بتصميم قديم جميل للرأس والتذييل. ضمان 100 عام ضد عيوب المواد والتشطيب. شروط الإرجاع مصحوبة بقصص مثيرة للاهتمام... اتضح أنه ليس كل شيء محزنًا للغاية مع معلومات التجارة الإلكترونية الضرورية
عند تحديد عدد روابط التذييل، لا تبخل بالمساحة السلبية - سيكون لذلك تأثير مذهل على الإدراك البصري وتحسين إمكانية القراءة. القاعدة العامة هي أنه إذا حافظت على التسلسل الهرمي البصري، فسيتم ملاحظة العناصر المركزية بشكل أسرع (يمكن استخدامها لصالحك!).
بفضل النمط البسيط والقائمة المنسدلة الثابتة، يمكن للمتجر عبر الإنترنت توفير تذييل واسع
حول كمية كبيرة من المساحة السلبية الدقيقة (بين العناصر الصغيرة) يمكننا أن نقول هذا: طالما أن جميع المعلومات الضرورية موجودة، فهي مقروءة ويمكن إدراكها بسرعة - كل شيء على ما يرام
يعد التذييل الواسع لموقع القهوة استكمالًا ممتازًا لتكوين تصميم نظيف، حيث يوجد الكثير من المساحة السلبية الكلية ("الهواء" بين الأقسام / الأقسام)
إقرأ أيضاً: أكثر من 30 مثالًا وفكرة لتصميم أزرار الإجراءات المستهدفة
يتحدث التصميم الأنيق للتذييل عن الكثير عن المورد نفسه. من المهم ملاحظة: يبقى المشتري هنا لفترة أطول قليلاً من بقاءه في الأجزاء الأخرى من الصفحة. فرصة مناسبة لدعوة أخيرة أخرى تحث المستخدم على اتخاذ إجراء. غالبًا ما يكون هذا اشتراكًا/رسالة إخبارية، ولكن يمكنك أيضًا ربط مكالمة CTA بتسجيل الحساب.
لدى Greetabl الجزء السفلي المصمم بشكل متواضع من صفحاته والذي يتضمن دعوة للاشتراك. مع الحد الأدنى من العناصر، يصبح النداء ملحوظا، ويتناغم مع الخلفية الفيروزية ويتحول إلى زخرفة للموقع
تصميم جميل مع عبارات تحث المستخدم على اتخاذ إجراء في أسفل الصفحات. هيكل منشئ موقع البيع عالمي. وقد تمت ترجمته إلى 35 لغة لعملائه المليون.
يعد الوصول إلى عربة التسوق من أسفل الموقع طريقة رائعة لتحسين سهولة الاستخدام وخصائص البيع للموقع.
من الممتع النظر إلى موقع البيع الخاص بشركة تقديم الطعام وهو مناسب للمشتري
يعد الجزء السفلي من الموقع مثاليًا للمعلومات التي لا يتم عرضها كثيرًا: حول الشركة وشروط الخدمة وسياسة الخصوصية. في هذه الحالة، وظيفة التذييل هي إنقاذ الجميع. عندما يشعر شخص ما بالضياع في بيئة التجارة الإلكترونية، يصبح مهتمًا بالبنية التحتية للتجارة الإلكترونية، وينتقل بشكل غريزي إلى أبعد من ذلك...
المساحة السلبية ضرورية لسهولة قراءة المحتوى. بشكل عام، "التذييل" ليس لأغراض التنقل، على عكس القائمة أو خريطة الموقع. في حالات نادرة فقط، تضع مواقع التجارة الإلكترونية فئات منتجات فردية في التذييل (
في كثير من الأحيان، لا يتم إعطاء التذييل الاهتمام الكافي عند إنشاء موقع ويب. يعتقد الكثير من الناس أن هذا ليس عنصرًا مهمًا، لذا يمكن تركه لتقدير المصمم.
لأن تذييل موقع الويب المناسب للزائرين يمكن أن يصبح عنصرًا آخر يعمل على التحويل. وعلى الرغم من أن هذا ليس هو الحال عندما يكون من المنطقي اختبار عنصر ما وتحسينه بكل الطرق الممكنة، إلا أنه لا يزال يستحق النظر في خيارات مختلفة لتنفيذه.
1) تذييل معلومات بسيط
فهو يوفر المعلومات الأساسية التي تحتاجها:
الحد الأدنى الأساسي الذي لا يصرف الانتباه عن العبارة التي تحث المستخدم على اتخاذ إجراء في نهاية الصفحة. مناسب لمعظم المواقع ويسمح للزوار بالتنقل في الموقع إذا وصلوا إلى تذييل الصفحة.
يمكنك تنويعها عن طريق إضافة معلومات اتصال مهمة: الهاتف، البريد الإلكتروني، عنوان المؤسسة. في هذه الحالة، بالطبع، تحتاج إلى مراقبة الإجراء والبناء على تنفيذ عبارة الحث على اتخاذ إجراء على الصفحة. إذا كان هناك هاتف ملحوظ هناك، فلا داعي لتكراره في الطابق السفلي.
2) تذييل يركز على البحث
تخيل أن لديك متجرًا إلكترونيًا يحتوي على عدد كبير من المنتجات المختلفة. يمكن أن يرتبك الزائر بسهولة، لذا فإن إجراء بحث في أسفل الموقع سيكون بمثابة مساعدة أخرى لضمان وصوله إلى الصفحة الصحيحة. هذه هي الحالة النادرة عندما تكون الرحلة غير المتوقعة غير ضرورية على الإطلاق.
يعد "Labyrinth" أحد أكبر المتاجر عبر الإنترنت في روسيا. انظر كيف يستخدم البحث في تذييل الموقع. على اليسار، كـ "مساعدة"، توجد روابط للأقسام الرئيسية للمتجر. يوجد أسفل البحث نظام ملاحة مساعد. بالإضافة إلى ذلك، على الجانب الأيمن، تعتبر الشبكات الاجتماعية التي تحتوي على عدد الإعجابات عنصر ثقة وإثباتًا اجتماعيًا في زجاجة واحدة.
ولعل العيب الرئيسي في "المتاهة" هو أن الطابق السفلي نفسه مثقل إلى حد ما، وحتى على الرغم من البحث الملحوظ، يمكن أن يتحول إلى متاهة مينوتور لمستخدم عديم الخبرة.
3) عرض عناوين الكتالوج
في بعض الأحيان تلجأ المتاجر عبر الإنترنت إلى تقنية مختلفة. على سبيل المثال، في لقطة الشاشة أعلاه، يمكنك أن ترى أن متجر الأقواس والأقواس يعرض جميع الفئات مباشرة في التذييل.
وتتمثل ميزة هذا الأسلوب في أن الزائر الذي يصل إلى نهاية الصفحة يمكنه بسهولة (وبنقرة واحدة) الوصول إلى الفئة التي يحتاجها.
بالإضافة إلى ذلك، يرجى ملاحظة أنه يوجد على الجانب الأيمن اشتراك إخباري - وهذا تنسيق شائع آخر عندما ندعو الزوار للاشتراك في نشرتنا الإخبارية في أسفل الموقع.
4) تتدفق العبارة التي تحث المستخدم على اتخاذ إجراء بسلاسة في التذييل "الخفيف".
على سبيل المثال، إذا كنا نتحدث عن موقع ويب مكون من صفحة واحدة، فمن الأفضل أحيانًا ترك تركيز الزائر بالكامل على العبارة التي تحث المستخدم على اتخاذ إجراء، مما يجعل تذييل الموقع خفيفًا قدر الإمكان.
لقد فعلنا شيئًا مشابهًا لأحد عملائنا. والنتيجة مرئية في لقطة الشاشة. يتم التركيز على الهاتف وزر الحث على اتخاذ إجراء.
5) نموذج "اتبعني".
هناك شركات غير مصممة للبيع المباشر. عادةً ما يشترك العملاء المحتملون أولاً في قائمة البريد الإلكتروني للشركة أو يتابعون مدونتها. وفقط بعد فترة طويلة قرروا تقديم طلب.
في هذه الحالة، من المنطقي تصميم تذييل الموقع على شكل خيارات ممكنة لمزيد من التواصل المجاني مع الشركة:
يأتي أكثر من نصف عملائنا الحقيقيين إلى وكالتنا بعد مدونة أو كتاب. لذلك، لا تقلل من أهمية العمل طويل الأمد مع العملاء المحتملين من خلال "التدريب".
6) نقوم بتوجيه الزائر إلى أعلى الصفحة
إذا وصل الشخص إلى تذييل المتجر عبر الإنترنت، فهذا يعني أنه لم يجد ما يحتاج إليه أبدًا. لقد نظرنا بالفعل في خيار البحث والقائمة الكاملة لفئات الكتالوج في تذييل الموقع. الحل الآخر هو وضع زر "الرجوع إلى الأعلى" بشكل بارز والذي سيرسل الزائر إلى أعلى الصفحة.
7) نحن نساعدك على رؤية العبارة التي تحث المستخدم على اتخاذ إجراء
يستخدم هذا المثال من المحاسبة عبر الإنترنت Elba تقنية مثيرة للاهتمام. في التذييل، ينظر حرف الشركة مباشرة إلى زر الحث على اتخاذ إجراء. وبذلك يوجه أنظار زوار الموقع إلى هذا الزر. أولئك. يساعد "تذييل الموقع" بشكل كبير على إجراء المكالمة بشكل أفضل.
دعونا نلخص ذلك
قد لا يكون تذييل الموقع أحد أهم عناصر الصفحة، لكنه لا يزال يستحق اهتمامًا أكبر مما يحظى به حاليًا. عند البدء في تصميم "الطابق السفلي"، عليك أولاً الانتباه إلى ما يريد الجمهور المستهدف رؤيته هناك.
فكر بشكل محدد في منطق التفاعل مع موقعك والدعوة إلى اتخاذ إجراء على الصفحات. ومن ثم ستقوم بتصميم تذييل مناسب ومفيد للزوار.
هذا كل شئ! اراك يوم الاربعاء.
مرحبا عزيزي قراء المدونة. اليوم أريد أن أتحدث إليكم عن الشكل الذي يجب أن يكون عليه التذييل في تصميم الويب الحديث. سنطلع أيضًا على بعض الأمثلة معك ونحصل على بعض النصائح الممتازة للاستخدام. :-)
إذا كنت قد لاحظت بالفعل أنه في السنوات القليلة الماضية، أصبح المزيد والمزيد من التذييلات تظهر بحجم أكبر. وهذا بدوره يوفر تصفحًا واستخدامًا أفضل للموقع. بطبيعة الحال، سيكون من الأصح جعل التذييل ليس جميلًا فحسب، بل أيضًا أكثر ملاءمة وعمليًا. بمعنى آخر، كل هذا يتوقف على المصمم.
حسنًا، دعونا الآن نلقي نظرة على بعض الأمثلة العملية والجميلة:
كما تعلم، يمكنك العثور على صفحة "خريطة الموقع" في جميع مواقع الويب تقريبًا. هذا بالفعل خيار تنقل قديم. لماذا لا تقوم بإنشاء خريطة أكثر كثافة في أسفل الموقع، في رأيي أنها مريحة للغاية، ولا يتعين عليك أيضًا البحث عن جميع أنواع الصفحات ذات التنقل الكامل.
يمكن أن يتضمن التنقل كامل المواصفات أكثر من 50 رابطًا في الموقع، وهذا بدوره له تأثير جيد جدًا على:
تحسين محركات البحث.سيسهل هذا التنقل بشكل كبير استخدام الموقع من قبل روبوتات البحث والمستخدمين.
تحسين الملاحة.وهذا يجبرهم على عرض صفحات موقعك بشكل أفضل، حيث يمكنهم تجاهل هذه الصفحات أو ببساطة عدم رؤيتها. وهذا بدوره يقلل من معدل الارتداد.
تتكون جميع قوالب WordPress من عدة ملفات مسؤولة عن معالجة وعرض جزء أو آخر من المدونة - الرأس والمحتوى الرئيسي والشريط الجانبي والتذييل. اليوم سنتحدث عن هذا الأخير. التذييل (تذييل الموقع) هو الجزء السفلي منه بكل المحتوى. غالبًا ما يتم استخدامه من قبل مشرف الموقع لتوفير معلومات مثل تاريخ الإنشاء وحماية حقوق الطبع والنشر والعنوان وما إلى ذلك. ولكن ليست جميعها سهلة التنفيذ؛ فبعضها ببساطة لا يحتوي على خيارات بسيطة لإضافة معلومات إلى التذييل.
أولاً، دعونا نقرر نوع الموقع، وما الذي يمكن وضعه في الطابق السفلي لتحسين العوامل السلوكية.
معلومات الاتصالالأكثر ملاءمة لمتاجر الويب. إن وضع عنوان بطاقة السفر أو رقم الهاتف أو عنوان البريد الإلكتروني لمتجر أو مؤسسة وما إلى ذلك في الطابق السفلي يسمح للشخص بتقديم طلب أو الشراء بشكل أسرع.
ملاحةأو تكرار كتلة التنقل مناسب لأي نوع من المواقع. وهذا مهم جدًا للصفحات الطويلة. وفي هذه الحالة، لن يضطر المستخدم إلى العودة إلى الأعلى للانتقال إلى القسم المطلوب. ولكن إذا كنت لا ترغب في وضع كتلة تنقل في التذييل، فيمكن تنفيذ العودة السريعة إلى الأعلى باستخدام .
الإشارات المرجعية الاجتماعية,إذا كان محتوى موقعك يتضمن مناقشة جماعية، أو قمت بنشر مراجعات للأحداث المتعلقة بتطوير الموضوع، فيمكنك وضع روابط للشبكات الاجتماعية التي تقوم فيها بالترويج للمورد في التذييل. تعتبر سحابة العلامات، بالإضافة إلى كتلة التنقل الإضافية، مناسبة لجميع أنواع المواقع. لن يكون وضع سحابة علامات ثلاثية الأبعاد في التذييل مناسبًا للمستخدمين فحسب، بل سيكون جميلًا أيضًا من منظور التصميم.
من الضروري ملاحظة أن فرصة النقر على روابط التذييل إذا لم تكن جميلة وغنية بالمعلومات تقترب من الصفر بسبب عدم وضوح مثل هذا التذييل.
من أجل إنشاء تذييل جميل وغني بالمعلومات، نلفت انتباهكم إلى أشهر أعمال استوديوهات تصميم الويب:
1. حل التصميم لاستوديو الويب الفرنسي KDIGIT:
2. تصميم التذييل بواسطة استوديو تصميم الويب SNOWDEN Industries:
3. الحل التصميمي لتذييل شركة Uforia CMS السويدية:
4. تصميم تذييل أنيق من Tapbots:
5. تذييل استوديو تصميم الويب التصاميم الجاهزة:
6. تصميم التذييل الميكانيكي:
7. تصميم تذييل جميل:
كما أتمنى أن تكون قد فهمت بالفعل، يتم تنفيذ كل هذه التذييلات على أساس صور خلفية جميلة وكتل من المعلومات الموضوعة عليها. إذا لم يكن من المفترض أن تواجه أي صعوبات خاصة في إنشاء صورة خلفية، فمن حسن الحظ أن هناك العديد من برامج تحرير الصور مثل Photoshop لهذا الغرض، ومن خلال وضع المعلومات بشكل سريع ومريح في الكتل، يكون ذلك ممكنًا.
أسهل طريقة لإضافة كتل من المعلومات إلى التذييل هي إضافة كتلة من عناصر واجهة المستخدم إلى منطقة إدارة WordPress. لإنشاء مثل هذه المجموعة من الأدوات، تحتاج إلى فتح قائمة المسؤول->المحرر وفي العمود الموجود على اليمين، حدد ملف jobs.php، الذي نضيف فيه الكود:
إذا (function_exists("register_sidebar")) Register_sidebar(array("name" => "تذييل الشريط الجانبي"، "before_widget" => ""، "after_widget" => ""، "before_title" => "
هذا هو الرمز الخاص بتسجيل مجموعة جديدة من الأدوات في لوحة الإدارة، حيث يكون "الاسم" هو اسم الأداة، و"before_widget" هو رمز HTML المعروض قبل الأداة، و"after_widget" هو رمز HTML المعروض بعد القطعة، بالإضافة إلى الكود الموجود قبل رأس العنوان وبعده. تتم إضافته عادةً إلى بداية ملف jobs.php.
احفظ محتويات jobs.php وانتقل إلى قسم "الأدوات". إذا تم كل شيء دون أخطاء، فستجد كتلة جديدة هناك:
لذلك، قمنا بعرض كتلة جديدة من الأدوات في قائمة الإدارة، والآن نحتاج إلى عرض عناصر واجهة المستخدم لهذه الكتلة على الموقع. للقيام بذلك، افتح قائمة المسؤول -> المحرر وحدد ملف footer.php على اليمين، بالمناسبة، يمكن عرض كتل الأدوات هذه ليس فقط في التذييل، ولكن أيضًا في أي مكان آخر على الموقع.
في ملف footer.php أضف الكود التالي:
ونضع هذا الكود بعد السطور