صورة المجموعة وصورة القطعة: كيف توضح الفرق عند اختيار منتج واحد في متجرك

المشكلة التي نعالجها

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

المدخلات التي تجهزها

قبل تعديل الصفحة، جهّز جدولًا بسيطًا لمنتج تجريبي واحد، ولنفترض أنه «طقم فناجين تجريبي» من ثلاث قطع: فنجان، وصحن، وغطاء.

1. صورة المجموعة: تُظهر القطع الثلاث معًا.
2. صورة لكل قطعة: إن وُجدت، وتُظهر القطعة وحدها.
3. رمز القطعة كما تعتمده أنت داخل المتجر.
4. القطعة المختارة حاليًا: لا شيء، أو قطعة واحدة.
5. جملة قصيرة تصف ما يشمله الطلب.

القاعدة الأساسية

لا تدع صورة واحدة تؤدي دورين. للصورة وظيفة واحدة ظاهرة للزائر: إما أن تقول «هذه المجموعة» أو تقول «هذه القطعة التي اخترتها». ضع تسمية نصية قصيرة تحت الصورة الكبيرة، واكتبها كنص حقيقي لا داخل الصورة.

فروع القرار

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

الفرع الثاني: اختار قطعة ولها صورة خاصة. اعرض صورة القطعة صورةً رئيسية، وتحتها «القطعة المختارة: الفنجان». أبقِ صورة المجموعة مصغرة بتسمية «المجموعة كاملة» حتى لا يظن أنها اختفت.

الفرع الثالث: اختار قطعة ولا صورة خاصة بها. لا تعرض صورة المجموعة بصمت كأنها صورة القطعة. اعرضها مع ملاحظة مرئية: «هذه صورة المجموعة، ولا تعرض هذه القطعة وحدها». هذا أفضل من صورة تُوهم.

الفرع الرابع: تعارض بين الصورة والرمز. إذا ظهرت صورة صحن لقطعة رمزها يخص الفنجان، فهذا خطأ بيانات وليس مسألة تصميم.

شروط التوقف

أوقف النشر وراجع البيانات في الحالات التالية:

1. قطعة مختارة بلا أي صورة، لا خاصة ولا مجموعة.
2. اسم القطعة في الملخص لا يطابق التسمية تحت الصورة.
3. صورة قطعة تظهر فيها قطع إضافية لم تقصدها، لأن الزائر سيفهمها جزءًا من الطلب.
4. زر الإضافة إلى السلة يبقى فعّالًا مع حالة غير مفهومة.

لا تحاول ترقيع هذه الحالات بنص طويل. أصلح البيانات أولًا.

مثال تطبيقي كامل

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

اختيارات اختيارية لا إلزامية

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

اختبار قبول صغير

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

1. افتح الصفحة دون اختيار. المتوقع: صورة المجموعة وتسميتها.
2. اختر القطعة الأولى. المتوقع: صورتها وتسمية «القطعة المختارة» باسمها.
3. اختر القطعة بلا صورة. المتوقع: صورة المجموعة مع الملاحظة الصريحة.
4. ألغِ الاختيار. المتوقع: العودة إلى حالة البداية.
5. اطلب من شخص لا يعرف المنتج أن يقول بكلماته ماذا سيصله. إن ذكر قطعة غير التي اخترتها فالتصميم يحتاج مراجعة.

يُعد الاختبار ناجحًا إذا طابقت التسمية والملخص الاختيار الفعلي في الحالات الخمس.

الخلاصة

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

المصادر