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

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

مراحل تصميم نموذج التسجيل بالموقع Signup … هل الامر معقد لهذه الدرجة؟

أنا افضل التفكير العلمي في التصميم للويب، فكل شيء عبارة عن مراحل منظمة، لكل منها خطوات ثم ستصل للنتيجة … الصورة السابقة لخصت الخطوات الخاصة بتصميم نموذج التسجيل بالموقع والتي سنناقشها بالتفصيل في السطور التالية …

1. التخطيط: ما هي الحقول الضرورية، الكلمات التي تصف الحقول والفقرات التوضيحية.
2. الهوية: المسافات، الفونت، الألوان … كل العوامل التي تؤثر في الشكل الجرافيكي للنموذج.
3. الاستخدام: كيف ستبدوا الحقول عندما يبدأ المستخدم في ادخال المحتوى، التحقق من الخانات.
4. التأكيد: بعدما يضغط المستخدم علي زر “التسجيل بالموقع” ماذا سيحدث؟

الخطوات بالتفصيل …

أولا: تحديد الحقول الضرورية والخطوط العامة

وأنت تخطط لعملية التسجيل بالموقع يجب أن تضع في ذهنك وتحدد بدقة الهدف الاساسي من هذه العملية … ألا وهو أن تجعل المستخدم يكمل تحقيق الهدف الذي جاء الموقع من أجله …

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

ثانياً : الهوية Branding، الوحدة Unify، التيبوغرافي Typography

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

• يجب أن يكون نوع الفونت المستخدم بالموقع هو نفس الفونت المستخدم في صفحة التسجيل بالموقع بما انها جزء من الموقع.
• ألوان شعار الموقع، يجب أن تكون هي الدليل في إختيارك لألوان فونت وحقول النموذج.
• ضع الشعار في مكان بارز وواضح في صفحة التسجيل بالموقع.
• راعي المسافات بين كل العناصر الرئيسية و المتشابهة في النموذج.
• زر التسجيل بالموقع أو زر Call To Action يجب أن يكون هو الاكبر في الصفحة وبلون بارز (البرتقالي أو الاحمر) قدر الامكان، فكلاهما ينقلان معنى “القوة والثبات”

الفشل في كسب ثقة المستخدم في عملية التسجيل بالموقع = فقدان مستخدم أو عميل محتمل.

ثالثاً : كيف سيبدوا النموذج Form عندما يبدأ المستخدم في إدخال محتوى الحقول؟

يجب أن تكون بذهنك فكرة عامة عن كيف سيبدوا النموذج Form بكل حقولة عندما يبدأ المستخدم في إدخال البيانات بداخله، كذلك حدد مكان ظهور الخطأ في عملية التحقق Validation ولونه.

• الرسائل التنبيهية التي تظهر للمستخدم أثناء مليء حقل ما بنموذج التسجيل بالموقع، أجعلها مفيدة اما أن تضع تعليمات عن كيفية مليء الحقل أو عن لماذا تطلب منه هذه المعلومة؟
• أنت المصمم، رجاءاً لا تترك للمطور تحديد كيف وأين يظهر مكان الخطأ!
• اجعل الرسائل النصية التي تظهر ذات معنى ولها علاقة بالخطأ الذي ارتكبه المستخدم، وليست رسالة مقالية لا تفيد المستخدم بشيء.
• اجعل رسائل الخطأ التي تظهر للمستخدم في عملية التحقق Validation ترشد المستخدم لأول الطريق، كيف سيحل هذه المشكلة، وان كان الامر يتطلب ان ينتقل المستخدم لصفحة اخرى ادرجها كرابط في رسالة الخطأ.
• من الممكن أن تمنع المستخدم من ارتكاب الخطأ بطريقتين، الطريقة الاولى اعرض تنبيهات ترشد المستخدم للطريقة الصحيحة التي يملأ بها هذا الحقل، الطريقة الثانية أمنعه من الخطأ … مثلاً اذا كنت تطلب من المستخدم أن يكتب 14 خانة فقط في حقل “كلمة المرور” اذاً اجعل ال Input لا يقبل إلا  14 حرف فقط.
• اخبر المبرمج – اذا لم يكن سيستخدم طريقة للتحقق الفوري أثناء كتابة المستخدم للحقول – أخبره بألا يجب أن تٌمسح الحقول الصحيحة التي كتبها المستخدم عندما يتم تحميل الصفحة مرة أخرى.
• اذا كان نموذج تسجيل الدخول به أكثر من 3 حقول اعرض للمستخدم عدد الأخطاء التي وقع فيها في رسالة الخطأ التي ستظهر له.
• رسائل واماكن ظهور الخطأ هي فن النصيحة للمستخدم، تخيل انك مكانه ولا تعلم أي شيء عن الويب كيف لك ان تعلم الطريق الذي تسلكه لتحل المشكلة؟

رابعاً: التأكيد … ماذا افعل بعدما أتممت كل الحقول؟

عملك كمصمم او مهندس تجربة الاستخدام للموقع لا يتوقف عند وضع تصور لما يفعله المستخدم حتي يضغط زر “التسجيل بالموقع”، بل يجب ان تضع تصور لما سيحدث بعد ذلك.

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

نصائح عامة

• راعي ترتيب الحقول، مثلاً ليس منطقياً أن تطلب رقم الهاتف  قبل تسأل المستخدم عن اسمه!
• نموذج التسجيل بالموقع، عبارة عن محادثة، يجب أن تضع مقدمة “لماذا اجري معك هذه المحادثة ايها المستخدم؟”، حدد الهدف من كل سؤال و رتب الاسئلة -الحقول- منطقياً.
• اضافة عدد اكبر من الحقول Input تعني وقت أطول في انجاز هذه العملية الاعتراضية – أقصد التسجيل بالموقع.
• لا تكرر الحقول.

ماذا عن بقية الصفحة التي يوجد بها نموذج التسجيل بالموقع؟

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

البعض قد يضع نموذج التسجيل بالموقع في Pop Up، في هذة الحالة احرص علي أن تجعلها واضحة بدون مشتتات، واجعل الخلفية الباهتة للـ Pop Up تلعب نفس الدور الذي تلعبه الخلفية في الصفحة المنفصلة للتسجيل.

أفكار أخرى …

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

• التسجيل بحسابات التواصل الاجتماعي، حاول أن تجعله خياراً ثانوياً وليس اجبارياً، بعض المستخدمين لا يفضلون مشاركة حساباتهم الاجتماعية مع كل المواقع التي يسجلوان بها.
• هناك بعض الاضافات التي تساعد المطورين في تحديد الاخطاء التي ربما قد يقع بها المستخدم عندما يملأ حقول عملية التسجيل … مثلا Mailcheck إضافة jQuery ، اذا كتب المستخدم مثلا في حقل البريد user@gnail.com تخبره بالخطأ وتقول له “هل تقصد user@gmail.com ؟
• موضوع سابق بمعمل ألوان ناقش فكرة التسجيل بدون إدخال أي بيانات، عن طريق QR Code.
• بعض المصممين قد يضع عنوان الInput بداخله، وهي ممارسة ممتازة لا تقلل من تجربة الاستخدام.