ليس من الواضح أنك بحاجة إلى التمرير للأسفل أثناء التسجيل

I received some very valid feedback today from a user. I’m not sure if there’s already a good way of dealing with this issue or not. If not, I’d say it’s something worth thinking about how to improve.

The user completed the signup form as seen here:

But after all visible fields were completed, it wasn’t immediately clear that the user would have to scroll down to find the final required field/checkbox:

Sure, there’s some slight fading of the content, but that’s not very obvious for most people.

I’m not sure what the best approach would be to improve this—perhaps a visual hint that scrolling is needed? Or simply expanding the signup modal so all fields are visible?

And is there something I can do immediately that would improve the signup flow for my users?

Looking forward to hearing your thoughts! :slight_smile:

EDIT: This seems related to @sam’s post a couple years ago: You have not completed all user fields UX on signup should be improved

إعجاب واحد (1)

It really depends on the operating system; on some OSes the scrollbars are super minimized, specifically OSX.

I do agree with the underlying complaint, but you have to understand that it’s contextual to the browser and OS as well.

You can make a minor CSS adjustment to allow the modal to get taller on desktop devices, this should do it:

.d-modal.create-account .login-form form {
  max-height: 70vh
}

At the moment our default max-height is more restrictive, I can probably allow it to get a little taller by default… but there’s always going to be a point where the scroll cut-off isn’t obvious for someone with X number custom fields added. I really hate that macOS does this hidden scrollbar behavior.

6 إعجابات

Thanks @awesomerobot, I’ll give that a try! (I assume you meant max-height: 70vh; which seems to work perfectly!)

And I do appreciate that this primarily an issue on MacOS, @codinghorror. However, 1/3 of my desktop users are on MacOS, so it’s not an insignificant part of my audience.

Thanks again both of you!

Oops, yes exactly! Fixed it above.

6 إعجابات

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

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

إعجابَين (2)

هل يمكننا تعطيل أشرطة التمرير في مربع التسجيل باستخدام CSS والسماح للمستخدم بالتمرير؟

شكرًا لك @awesomerobot. الأمر أفضل مع هذا التخصيص.

إعجاب واحد (1)

عند التطبيق

.d-modal.create-account .login-form form {
  max-height: 70vh
}

لاحظت تأثيرًا جانبيًا غريبًا على iPhone 6:

أوه، هذا بالتأكيد غريب، لا أستطيع تكرار ذلك… هل تعرف أي إصدار من iOS هو؟

إعجابَين (2)
  • آيفون 6 بلس
  • نظام تشغيل iOS 12.4.5

نفس النتيجة باستخدام متصفح سفاري وفايرفوكس.

لقد تم طرح هذه المسألة مرة أخرى هنا: https://meta.discourse.org/t/not-obvious-that-sign-up-box-scrolls/149486

إن حل هذه المشكلة أمر معقد، لأن معظم أجهزة اللمس تخفي أشرطة التمرير افتراضيًا، ونموذج التسجيل لدينا موجود داخل نافذة منبثقة (modal)، كما أن طول نموذج التسجيل قد يتغير إذا تمت إضافة حقول إضافية، وتختلف ارتفاعات المتصفحات.

بخلاف التغيير الكبير المتمثل في نقل نموذج التسجيل إلى صفحة كاملة بدلاً من النافذة المنبثقة… أعتقد أن هناك عدة حلول ممكنة، وقد يؤدي أحدها (أو كلاهما) على الأرجح إلى تحسين الوضع:

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

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

يجب أن يكون إجبار ظهور شريط التمرير أمرًا بسيطًا للتجربة أولًا، @codinghorror/@sam، هل لديكم أي ملاحظات حول ذلك؟

6 إعجابات

أعجبني هذا الحل أكثر، @vinothkannans هل يمكنك توليه؟

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

10 إعجابات

تم تنفيذ ذلك في طلب الدمج المفتوح أدناه

11 إعجابًا

يبدو هذا جيدًا، أعتقد أنه يجب أن يكون أكثر وضوحًا الآن!

أضفت تغييرًا إضافيًا أزال الهامش واستخدم “أدخل” بدلاً من “أدخل” في الرسائل المطلوبة (نستخدم “أدخل” في رسائل التحقق، لذا قمت بنسخها).

8 إعجابات

شكرًا لك. على الرغم من أنني لا أملك المهارات (أو الشجاعة) لتطبيق هذا التصحيح. آمل أن تظهر هذه الميزة في التحديثات المستقبلية في أقرب وقت ممكن.

أعتقد أنه يجب تمييز مربع النص الإدخال باللون الأحمر للإشارة إلى ما ينقص.

بالمناسبة، فشلت مستخدمة ثانية في إنشاء حساب بسبب هذه المشكلة للتو…

تم دمج طلب السحب الآن.

3 إعجابات