صفحة «تتبع طلبي»، حيث يُدخل العميل رقم هاتفه ويرى حالة طلبه دون إنشاء حساب، صفحة صغيرة لكنها كثيرة الزيارات في معظم مواقع التجارة الإلكترونية البنغلاديشية، حيث الشراء كضيف هو القاعدة. وفي هذا المتجر، كان عرض النتائج مبنيًا ومختبرًا بوضوح على الهاتف فقط: ضيق، نصي فقط، بلا صور منتجات، وفارغ في معظمه على شاشة الكمبيوتر.
ما الذي كان ينقص التخطيط الأصلي
كانت الصفحة تعمل (فالعميل يرى حالة طلبه فعلًا)، لكن العرض لم يكن على المستوى. غياب الصور المصغرة كان يجبر العميل الذي لديه طلب بعدة عناصر على قراءة الأسماء بعناية للتأكد مما استلمه؛ وبيانات الفوترة والشحن كانت متداخلة كنص عادي دون فصل بصري؛ وعلى شاشة الكمبيوتر بدا عمود بعرض الهاتف في منتصف صفحة عريضة غير مكتمل.
إعادة التصميم
كانت التعديلات محدودة عمدًا، لا إعادة بناء كاملة:
- صور مصغرة للمنتج في كل عنصر، أضيفت عبر المرشح
woocommerce_order_item_nameومقيدة بهذه الصفحة وحدها حتى لا تؤثر على طريقة عرض العناصر في أي مكان آخر في WooCommerce. - بيانات الفوترة والشحن في بطاقة واضحة، مفصولة بصريًا عن جدول عناصر الطلب بدلًا من تداخلها في كتلة نص واحدة.
- حاوية أعرض على الكمبيوتر، لتستفيد الصفحة من المساحة المتاحة بدلًا من عمود بعرض الهاتف يطفو وسط فراغ أبيض.
- ترتيب جديد على الهاتف، بنقل عنوان العميل فوق جدول الطلب، ليكون أول ما يتأكد منه «هل سيصل هذا إلى المكان الصحيح؟» قبل التمرير لرؤية محتوى الطلب.
أهم الدروس
- الصفحة المبنية والمختبرة على حجم شاشة واحد فقط تتراجع بصمت على كل الأحجام الأخرى؛ ومن المفيد فحص الطرفين عن قصد.
- تقييد مرشح القالب بنطاق ضيق (صفحة واحدة، سياق واحد) يتجنب الآثار الجانبية على بقية عرض المنصة.
- يجب أن يتبع ترتيب التخطيط على الهاتف ما يحتاج القارئ إلى التأكد منه أولًا، لا أن يكون مجرد نسخة مصغرة من ترتيب الكمبيوتر.
اقرأ أيضًا: التحكم المخصص في ظهور الأعمدة على الهاتف، أعمالنا في تصميم UI وUX.
هل تواجه قيدًا مشابهًا في لوحة إدارة WooCommerce أو WordPress لديك؟ لنتحدث؛ فـ ArtinTech Solution تبني هذا النوع تحديدًا من أدوات المتاجر المخصصة.