متجر أردني: ميّز عدم توافر صورة المنتج عن فشل تحميلها
حالتان تبدوان متشابهتين
في صفحة المنتج قد يظهر مربع فارغ في موقف مختلفين تمامًا. الأول أن المتجر لا يملك صورة لهذا المنتج بعد. الثاني أن الصورة موجودة لكن الطلب فشل، ربما لأن اتصال المتصفح ضعف أو انقطع للحظة. إن عُرض الاثنان بالشكل نفسه، قد يظن الزائر أن المنتج بلا صورة فيتركه، أو يظن أن الموقع عاطل فيعيد التحميل بلا فائدة. هذه المقالة تقترح تصميمًا يفرق بينهما. هو اقتراح، وتحقيقه يتوقف على إمكانات موقعكم.
جدول الحالات
اقترح أربع حالات تُسجَّل في المواصفات:
- حالة «لا صورة»: السجل لا يحتوي مسارًا للصورة. الشكل: إطار ثابت برمز محايد ونص مثل «لا توجد صورة لهذا المنتج حاليًا». لا زر لإعادة المحاولة، لأن لا شيء يمكن إعادته.
- حالة «جارٍ التحميل»: المسار موجود والطلب لم ينتهِ. الشكل: إطار بمؤشر هادئ.
- حالة «تعذّر التحميل»: المسار موجود ولكن الطلب فشل. الشكل: إطار بنص «تعذّر تحميل الصورة» وزر «أعد المحاولة».
- حالة «نجاح»: تُعرض الصورة.
قد تضيف حالة خامسة هي «مسار موجود لكن الملف غير صالح»، أي أن الخادم استجاب لكن المحتوى ليس صورة. إن لم تستطيعوا اكتشافها تقنيًا فاتركوها ضمن «تعذّر التحميل».
إجراء إعادة المحاولة
الإجراء المقترح: عند الضغط على الزر تعود الحالة إلى «جارٍ التحميل» ويُعاد الطلب مرة واحدة. إن فشل ثانية تعود «تعذّر التحميل» وتظهر عبارة قصيرة تقترح التحقق من الاتصال. لا تكرر المحاولات آليًا دون حد، حتى لا تستنزف بيانات الزائر. قد يُسمح بمحاولتين يدويتين متتاليتين مثلًا، ثم يُترك الزر ويُضاف نص «جرّب لاحقًا»، والعدد يحدده فريقكم.
مثال افتراضي
منتج وهمي هو كوب خزفي. في السجل مسار للصورة. يفتح زائر الصفحة على اتصال متقطع في الهاتف. يرى إطارًا مع «تعذّر تحميل الصورة» وزرًا. يضغط، وتعود الصورة. في صفحة أخرى منتج جديد لم يُصوَّر بعد، فيرى «لا توجد صورة لهذا المنتج حاليًا» بلا زر. لو عُرض الزر هنا لضغط الزائر عليه عبثًا.
قرارات متفرعة
إذا كان عندكم منتجات بعدة صور، قرر حالة كل صورة على حدة، فقد تنجح الأولى وتفشل الثانية، ولا تُخفِ الناجحة بسبب فاشلة.
إذا كان المنتج بلا صورة لكن فيه وصف دقيق، اجعل النص بارزًا لتعويض الغياب، ولا تضع صورة بديلة عامة توحي بأنها المنتج.
إذا كان الزائر يستخدم قارئ شاشة، اجعل نص الحالتين مختلفًا في الوصف البديل، فلا يُقرأ «صورة» حيث لا صورة.
شروط التوقف
أوقف الإصدار إذا لم تستطع الفرق بين السجل الخالي والطلب الفاشل في بيئة الاختبار، لأن الشاشتين ستختلطان. وأوقفه إذا ظهر زر إعادة المحاولة في حالة «لا صورة».
فحوص القبول
- اختر منتجًا بلا مسار صورة: هل يظهر نص «لا صورة» دون زر؟
- اقطع الاتصال أو احجب الطلب في أدوات المتصفح: هل يظهر «تعذّر التحميل» مع الزر؟
- أعد الاتصال واضغط الزر: هل تظهر الصورة؟
- اجعل الطلب يفشل مرتين: هل يتوقف الزر عند الحد المحدد؟
- هل تختلف النصوص بين الحالتين بما يفهمه شخص لم يشارك في التصميم؟
بهذا يعرف الزائر هل عليه الانتظار أم المحاولة أم الاكتفاء بالوصف.