تواصل معي مؤخرًا عميل يمتلك متجرًا إلكترونيًا لبيع الدراجات الكهربائية مبنيًا بواسطة ووكومرس، وكان يشتكي من كثرة استفسارات الزبائن المكررة حول تفاصيل معينة مثل سعة البطارية، ومكان المحرك، ونوع المساعدين، على الرغم من كتابة كل هذه التفاصيل بوضوح في وصف المنتج السفلي.
كانت هذه المشكلة تشكل تحديًا حقيقيًا، لأنها تحتاج إلى ابتكار طريقة مناسبة وجذابة لعرض المواصفات التقنية دون تشتيت الزائر أو إثقال الموقع بأكواد برمجية معقدة، ولهذا فقد عمدت إلى الاعتماد على تحويل الصور الثابتة للمنتجات إلى صور تفاعلية، وفي هذا المقال أوضح لك كيف فعلت ذلك.
لماذا تعد الصور التفاعلية وسيلة قوية لزيادة مبيعاتك؟
أصبحت العناصر البصرية التفاعلية ميزة ضرورية لمتاجر ووكومرس، لأنها:
- تلفت انتباه الزائر، إذ إن التفاعل البصري يجذب عين الزائر فورًا ويكسر الملل.
- تقلل الاستفسارات المتكررة، فعرض المعلومات في مكانها الصحيح، مثل إظهار سعة البطارية فوقها مباشرة، يسهل على الزبون الوصول للمعلومة دون الحاجة للبحث في النص.
- ترفع معدل التحويل، إذ كلما فهم الزبون مميزات المنتج وتفاصيله أكثر وبشكل أسرع، زادت ثقته وسرعة اتخاذ قرار الشراء.
- تزيد فترة بقاء الزائر، حيث إن التفاعل مع الصورة ونقاطها يجعل الزائر يقضي وقتًا أطول في صفحة المنتج، وهذا يعزز الارتباط بالعلامة التجارية.
تنصيب إضافة Image Hotspot by DevVN
لتجنب استخدام الأكواد البرمجية المعقدة في ووردبريس، اخترت إضافة Image Hotspot by DevVN المجانية، وهي تتوافق بشكل ممتاز مع ووردبريس وووكومرس.
حيث انتقلت إلى لوحة تحكم ووردبريس، ثم إلى إضافات > إضافة إضافة، ثم أدخلت اسم الإضافة في مربع البحث، وبعد ذلك نقرت على زر التنصيب الآن، ثم بفعلتها بالنقر على زر التفعيل.
إنشاء الصورة التفاعلية
لإنشاء صورة تفاعلية، انتقلت إلى Image Hotspot ثم Add New Item للانتقال إلى صفحة إضافة صورة تفاعلية، فاخترت أولًا صورة الدبوس أو الإشارة التي ستظهر في الأماكن المناسبة على صورة المنتج من خلال Pins Image، ثم بعد ذلك نقرت على زر Upload Image واخترت صورة المنتج.
بعد ذلك أضفت النقاط أو الدبابيس على صورة المنتج، إذ لإضافة النقطة الأولى نقرت على زر Add Point، ثم سحبت الدبوس إلى المكان الذي أريده على صورة المنتج.
ثم نقرت على الدبوس، فظهرت نافذة إدخال المعلومات التي ستظهر عند وضع مؤشر الفأرة عليها، ثم نقرت على زر Done & Close.
ثم أضفت باقي النقاط بنفس الطريقة، وخصصت لكل منها محتوى مخصصًا، وبعد ذلك نقرت على زر نشر، فظهر كود قصير للصورة التفاعلية قمت بنسخه.
إضافة الصورة في صفحة المنتج
بعد إنشاء الصورة التفاعلية، انتقلت إلى صفحة تحرير المنتج في ووكومرس، ثم أضفت الكود القصير في وصف المنتج حيث أريد أن تظهر الصورة.
وبعد ذلك انتقلت إلى صفحة المنتج في الواجهة الأمامية فظهرت الأيقونات والبطاقات عند تمرير مؤشر الفأرة عليها بشكل صحيح، وبنفس المحتوى الذي أدخلته.
نصائح لضمان نجاح تجربة الصور التفاعلية في متجرك
للحصول على استفادة فعلية من هذه الإضافة، وتجنب أي تأثير سلبي على تجربة المستخدم، أنصحك باتباع النصائح التالية عند عمل الصور التفاعلية:
- عدم وضع عدد كبير من النقاط أو الدبابيس، لأن ازدحام الصورة بها يشتت الزائر ويجعلها تبدو فوضوية، لذلك ركز على إضافة أهم 3-5 نقاط تظهر الميزات التنافسية للمنتج.
- اختصار النصوص التوضيحية، فالهدف من الصورة التفاعلية توفير المعلومة بشكل سريع، لذلك احرص على كتابة نصوص قصيرة ومباشرة، وإذا كان هناك تفاصيل تقنية معقدة، اتركها للوصف.
- جعل ألوان الدبابيس متباينة مع ألوان الصورة، حيث يجب أن تتأكد من تحديد أيقونة للنقاط يتباين لونها بوضوح مع ألوان صورة المنتج لتظهر بشكل لافت للانتباه.
- تحسين حجم الصورة الأصلية، فقبل رفع الصورة أو استخدامها، يجب أن تقوم بضغطها قدر الإمكان مع المحافظة على جودتها.
وختامًا قد لا تكون الصور التفاعلية مناسبة لكافة المنتجات، وكثرة استخدامها في المتجر قد لا يكون مفيدًا دائمًا، لكنها في الحالات التي توفر معلومات مهمة ويحتاجها الزائر عن المنتج تكون ضرورية وتساعد بشكل مباشر على تسريع قرار الشراء في المتجر، لذلك استخدمها في متجرك عندما ترى أن ذلك ملائم ويوفر وقت الزائر.
