يجب أن تعمل النافذة المنبثقة في Shopify على شاشة صغيرة مع شريط متصفح متحرك ولوحة مفاتيح ظاهرة. ينبغي أن يكون فهم العرض سريعًا وإكمال الحقول سهلًا والعثور على زر الإغلاق ممكنًا من دون بحث. اختبر التفاعل من لحظة الوصول حتى الإغلاق، لا لقطة متوازنة في المحرر فحسب.
قدّم وعدًا قصيرًا ومكتملًا
امنح العنوان وظيفة واحدة، وضع شروط العرض الأساسية بالقرب منه. واطلب الحد الأدنى من المعلومات اللازمة للتسجيل. وإذا جمعت تفضيلًا اختياريًا، فاشرح الغرض منه ولا تحوّل النافذة الصغيرة إلى استبيان.
استخدم أدوات النماذج في Sendvio للحفاظ على اتساق الخطوط والمسافات مع المتجر. اسمح للنص بالالتفاف طبيعيًا بدلًا من تصغير كل تسمية لفرض ترتيب سطح المكتب على شاشة ضيقة. وقد تحتاج النسخة الأطول في لغة أخرى إلى تصميم أبسط أو مساحة رأسية إضافية.
رتّب المحتوى المفيد لا تكوين سطح المكتب
على الهاتف، أعطِ الأولوية للوعد والشروط الأساسية والحقل وزر الإرسال وزر إغلاق ظاهر. يمكن تصغير صورة زخرفية كبيرة أو حذفها إذا دفعت النموذج إلى أسفل المساحة المتاحة. لا ينبغي أن يضطر العميل إلى تجاوز رسم للعلامة كي يفهم المعلومات المطلوبة.
اسمح للحاوية بالتمدد أو التمرير عند الحاجة بدلًا من فرض ارتفاع ثابت على نص متغير. فقد يغيّر العنوان المترجم أو رسالة التحقق أو تكبير نص النظام المساحة المطلوبة. إذا كان التصميم لا يعمل إلا عندما تكون كل جملة بأقصر صيغة ممكنة، فهو غير جاهز لاستخدام العملاء المعتاد.
حافظ على التسلسل البصري نفسه بعد التبسيط. حذف صورة غير ضرورية يختلف عن حذف شرط جوهري للعرض. وينبغي للنموذج الأقصر أن يظل موضحًا للاشتراك وفائدته. لا تعالج ازدحام العناصر بتصغير نص الموافقة حتى يصبح موجودًا تقنيًا لكنه عسير القراءة.
اترك القرار للزائر
اجعل زر الإغلاق ظاهرًا ومريحًا للنقر. تحقق من إمكانية استخدام النموذج بلوحة المفاتيح ومن عدم اختفاء موضع التركيز خلف الطبقة المغطية. وينبغي أن تحدد رسائل الخطأ المشكلة قرب الحقل المعني من دون محو المعلومات التي أدخلها المستخدم بالفعل.
فكّر في توقيت ظهور النافذة. فقد يسبب مقاطعة المتسوق قبل أن يفهم الصفحة انزعاجًا أكثر من الاهتمام. اختر لحظة تناسب العرض، واختبرها من منظور زائر جديد ومشترك عائد وشخص يتسوق بالفعل.
اختبر الحالة عند ظهور لوحة المفاتيح
انقر داخل حقل على هاتف فعلي أو في اختبار جهاز مماثل. تحقق من إمكانية الوصول إلى الحقل ورسالة الخطأ وزر الإرسال وزر الإغلاق بعد ظهور لوحة المفاتيح. ثم انتقل بين الحقول وجرّب إدخالًا طويلًا. قد تتغير المساحة المرئية في المتصفح خلال هذه الإجراءات، لذا لا تكفي لقطة شاشة قبل الكتابة.
في نموذج حواري، ينبغي أن ينتقل التركيز بلوحة المفاتيح إلى مربع الحوار، وأن يظل داخله ما دام مفتوحًا، ثم يعود إلى موضع منطقي عند إغلاقه. وينبغي أن يتيح مفتاح Escape الإغلاق المتوقع حيثما كان ذلك مدعومًا. اختبر أيضًا باستخدام تقنية مساعدة مناسبة لجمهورك؛ فالمحاذاة المرئية وحدها لا تثبت أن تسميات الحقول ورسائل الخطأ تُعلن بوضوح.
اختبر أصغر حالة استخدام واقعية
افتح النموذج على هاتف ضيق، وضع التركيز في كل حقل، ثم أرسل بيانات صحيحة وغير صحيحة. أدر الجهاز وكبّر النص وافحص رسالة النجاح. وتأكد من إعادة الزائر إلى صفحة قابلة للاستخدام بعد الإغلاق.
قِس الاشتراكات الصحيحة والتفاعل اللاحق إلى جانب معدل تحويل النموذج. التصميم الذي يجمع العناوين بجعل مغادرة المتجر صعبة ليس تحسينًا مفيدًا. ينبغي للنموذج تقديم فرصة واضحة مع إبقاء تجربة التسوق سليمة.
راجع تكرار ظهور النافذة ضمن التصميم أيضًا. فمن يغلقها ينبغي ألا يواجه المقاطعة نفسها مع كل انتقال فوري بين الصفحات. استخدم ضوابط العرض المتاحة في إعدادك واختبر زائرًا عائدًا إلى جانب زائر جديد. كما ينبغي ألا يستمر عرض مطالبة اكتساب اشتراك لشخص أكمل الاشتراك بالفعل، لأن حالته تغيرت.
إذا خيبت النتائج التوقعات، فافصل بين الظهور والفائدة. قد تجمع النافذة عناوين قليلة بسبب ضعف العرض أو تطفل التوقيت أو تعطل خطوة تقنية. افحص هذه الأسباب قبل زيادة إلحاح ظهورها. أفضل تحسين هو نموذج يستطيع الناس فهمه وإكماله أو إغلاقه براحة، ثم مواصلة التسوق.