تُعتبر النماذج أحد أهم أنواع التفاعل للمستخدم في المواقع الإلكترونية وتطبيقات الموبايل وغالبًا ما تكون الخطوة الأخيرة لإكمال رحلة العميل وتحقيق هدفه. ينبغي أن يكون المستخدم قادرًا على تنفيذ تلك الخطوة والوصول إلى هدفه بسرعة وبدون ارتباك وهذا يعني تصميم نماذج سهلة الاستخدام وبسيطة. إذًا ينبغي مراعاة المستخدم النهائي عند تصميم النموذج كي لا تُفاجأ بمغادرة المستخدمين للخدمة في اللحظات الأخيرة.
في هذا المقال، سنتعرّف على النماذج العملية البسيطة ومكوّناتها التي تقدم المعلومات الهامة للمستخدم وتساعده على اتخاذ القرار الصحيح باطمئنان.
ما هي النماذج؟
النماذج (Forms) هي الطريقة التي يرسل المستخدم عبرها المعلومات إلى التطبيق أو الموقع الإلكتروني. ويمكنك رؤية النماذج كثيرًا في واجهات المستخدم (User Interfaces) الحديثة؛ فمثلًا إن أي عملية تسجيل دخول أو رد على رسالة في التطبيق أو الموقع أو تحديد خيار للوصول إلى نتيجة أو إنهاء مرحلة، تتطلّب إنهاء نموذج مرتبط بالمهمة.
إن الهدف الأول من تصميم أي نموذج هو جمع البيانات من المستخدمين لذا إن لم يكن النموذج جذاب وسهل الفهم ويمكن التعامل معه ببساطة، لن يملأه أحد. يحاول المصمم دائمًا الخروج بنموذج رائع جذاب وملفت لكن في حقيقة الأمر، لن يهتم المستخدم لروعة النموذج بقدر بساطة التعامل معه. ومع ذلك، إذا كان النموذج مصمم بشكل سيء سيترك في عقل المستخدم أثر سيء قد يبعده عن الخدمة في المرات القادمة.
لمَ النموذج مهم في تجربة المستخدم؟
الهدف من إنشاء صيغة أو نموذج في مراحل معينة من دخول الموقع أو التطبيق هو جمع المعلومات الشخصية للمستخدم مثل البريد الإلكتروني أو تفاصيل خاصة بعمليات تحويل وما إلى هنالك. لكن لمَ قد يختار المستخدم موقعك أو تطبيقك لتنفيذ العملية التي يريدها إذا كان نموذج ملء المعلومات صعب الاستخدام أو الفهم، أو حتى غير جذاب؟ ببساطة، لن يختار تنفيذ هدفه عن طريق خدمتك وسيبحث عن خدمات بنماذج أوضح وأسهل.
إن تصميم نموذج تجربة المستخدم (UX Form) مميز وسهل الاستخدام هو شيء مهم جدًا لأنه يعطي انطباع جيد عن خدمتك ويترك في نفس المستخدم تجربة إيجابية لا تُنسى، فيقرر إعادة التجربة كل مرة ويرتبط بخدمتك إلى الأبد. هذا يعني المزيد من المستخدمين، المزيد من العملاء المحتملين، والمزيد من العملاء الدائمين الأوفياء.
تؤثر تجربة المستخدم (User Experience) على إمكانية الوصول (Accessibility) إلى النماذج. ينبغي أن تكون تجربة المستخدم للموقع أو التطبيق مميزة ومريحة ليسهل على المستخدمين من جميع المستويات التقنية وذوي الإعاقات الذين يعانون من مشاكل جسدية أو بصرية أو غيرها إكمال النماذج وإرسالها ببساطة. كما تؤثر تجربة المستخدم على قابلية استخدام (Usability) النماذج حيث ينبغي أن يحقق المستخدم هدفه ويكمل النموذج بدون خوف أو تردد. لذا لتحقيق نتائج رائعة وزيادة في عدد المستخدمين والعملاء المحتملين ينبغي الاهتمام بتصميم تجربة المستخدم بجميع تفاصيلها.
مكونات النموذج
يتألف النموذج القياسي من خمسة مكونات رئيسية هي: بنية النموذج – حقول الإدخال – مسميات حقول الإدخال – أزرار التنقّل واتخاذ إجراء – الملاحظات والتأكيدات.
بنية النموذج (Structure)
تشير بنية النموذج إلى ترتيب حقول الإدخال والربط المنطقي بين الحقول الفردية. ينبغي أن تكون بنية النموذج واضحة ومفهومة ومنطقية وكأنها محادثة بين المستخدم والنظام.
أهم التوصيات لتصميم بنية النموذج:
الالتزام بحقول أهم المعلومات المطلوبة فقط
ينبغي أن يحتوي التصميم على حقول أهم المعلومات والبيانات التي تريدها من المستخدم بدون أي حقل إضافي أقل أهمية. يميل المستخدمون إلى الهروب والخروج من أي نموذج يطلب ملء الكثير من البيانات فذلك يثير قلقهم ويشتّتهم. اطلب المعلومات التي تحتاجها بالفعل فقط.
ترتيب حقول النموذج منطقيًا
ينبغي ترتيب حقول النموذج من وجهة نظر المستخدم وليس التطبيق أو الموقع. ينتظر المستخدم أن يواجه نموذج يسأل أسئلة وتفاصيل مرتبة منطقيًا وليس عشوائيًا. على سبيل المثال؛ في تطبيقات دفع الفواتير، ليس من المنطقي أن تطلب كتابة العنوان قبل كتابة الاسم الكامل.
ترتيب المعلومات ذات الفئة الواحدة معًا
تخيل نفسك تجري محادثة عادية مع شخص تسأله فيها عن حياته. من الطبيعي أن تدخل بتفاصيل حياته في البيت التي تتضمن الأكل والشرب والأطفال والتسلية ثم تنتقل إلى حياته في العمل فتذكر المكتب وأدوات العمل ووقت العمل. وهنا أيضًا، من الطبيعي أن ترتب المعلومات التي تنتمي إلى مجموعة بيانات متشابهة تحت مسمى معين. مثل ترتيب معلومات الاسم والميلاد تحت بند “المعلومات الشخصية” ومعلومات العنوان ورقم الاتصال تحت بند “معلومات الاتصال”. يساعد هذا الترتيب المستخدم على فهم أفضل للمعلومات التي يجب عليه تعبئتها ويشعر بالأمان وسهولة التنقل أكثر.
ترتيب الحقول في عمود واحد وليس أكثر
لا ينبغي أن يرى المستخدم نموذجًا بأكثر من عمود واحد من حقول الإدخال. في النماذج متعددة الأعمدة (عمودين مثلًا) سيقع نظر المستخدم على المطلوب في بداية العمود الأيمن ثم سيوجّه نظره إلى بداية العمود الأيسر ويكمل التفحص إلى العمود اليميني وهكذا. بهذه الطريقة، يتشتت المستخدم بين عمودين ويشعر أنه ضائع ولا يعرف من أين يبدأ. بينما في النموذج أحادي العمود، يضطر المستخدم إلى إدخال المعلومات واحدة تلو الأخرى في مسار مستقيم إلى الأسفل بدون إرباك.
حقول الإدخال (Input fields)
حقول الإدخال هي الخانات المخصصة للمستخدم لملء النموذج اعتمادًا على المعلومات المطلوبة. لذا هناك أنواع مختلفة من الحقول: حقول النصوص – حقول كلمات المرور – مربعات الاختيار – أزرار الاختيار – أشرطة التمرير – القوائم المنسدلة.
أهم التوصيات لتصميم حقول الإدخال:
عدد حقول الإدخال
حاول تقليل عدد حقول الإدخال قدر الإمكان كي تجعل عملية التحميل أسهل على المستخدم. بعض البيانات يُمكن جمعها في خانة واحدة بدون تقليل كمية المعلومات التي تريدها، كما في الصورة أدناه.
الحقل الإلزامي والحقل الاختياري
تجنّب استخدام الحقول الاختيارية في النماذج. في حال استخدمتها، أضف الإشارات الخاصة التي تمكّن المستخدم من التمييز بينها والحقول التي لا يمكنه تركها فارغة. غالبًا ما يتم استخدام علامة النجمة (*) للدلالة على الحقل الإلزامي أو كلمة “اختياري” للدلالة على الحقل الاختياري (وهي الأكثر استخدامًا في النماذج الطويلة التي تحتوي الكثير من الحقول الإلزامية).
ضبط المعلومات والقيم الافتراضية
تجنّب تحديد قيم افتراضية ثابتة في النموذج إلا في حال كنت متأكدًا أن نسبة 90% من المستخدمين سيختارون هذه القيمة. السبب ببساطة أن معظم المستخدمين يجرون تفحصًا سريعًا للنموذج بالنظر دون التدقيق في الحقول التي تحتوي قيم افتراضية واستكشاف ما إذا كانت هناك خيارات أخرى. قد يتركون النموذج ببساطة إذا كانت القيمة الافتراضية الموضوعة لا تناسبهم.
من جهة أخرى، تساعد إعدادات ضبط الحقل الافتراضي المستخدم على إكمال النموذج بسرعة ودقة أكثر، مثل تحديد بلد المستخدم بناءً على بيانات موقعه الجغرافي.
مسميات حقول الإدخال (Field labels)
هي النصوص التي تبيّن للمستخدم ما يجب أن يتضمنه حقل الإدخال وينبغي أن تظلّ مرئية حتى بعد ملء الحقل. تُعتبر التسميات إحدى الطرق الأساسية لتسهيل الوصول في واجهات المستخدم.
أهم التوصيات لتصميم مسميات حقول الإدخال:
عدد الكلمات
لا ينبغي التعامل مع التسميات وكأنها نصوص توجيهية مساعدة. يفضل استخدام تسميات موجزة وقصيرة ووصفية تعبر عن غرض الحقل فقط (يفضل كلمة أو اثنتين). ذلك مهم ليتمكن المستخدم من تفحّص النموذج بسرعة والاطمئنان أنه قادر على إكماله. التسميات الطويلة ستزعجه وتربكه.
المحاذاة بين الحقل والتسمية
يمكن تصميم النموذج بمحاذاة المسميات أعلى الحقول أو بجانبها. لكن الأفضل هو الخيار الأول، وضع التسميات أعلى الحقول. حيث يساعد على تفحص النموذج بشكل أسرع وأكثر سلاسة. في بعض الحالات، إذا كان النموذج يتطلّب إدخال بيانات مهمة جدًا، يفضل التصميم بحيث يظهر الحقل إلى يسار التسمية فذلك يساهم في إبطاء المستخدم والتروّي عند إدخال البيانات لتجنب الأخطاء.
التسميات الداخلية أو المضمّنة
التسمية الداخلية بديل عن وضع تسمية الحقل في أعلاه أو محاذاته، حيث توضع تسمية الحقل داخله. لكن هذه الطريقة ليست نافعة في النماذج التي تحتوي على الكثير من الحقول. قد تسبب مشكلات في قابلية الاستخدام حيث وبمجرد أن ينقر المستخدم داخل المربع تختفي التسمية ليبدأ الكتابة، لذا لا يمكن للمستخدم التحقق مرة أخرى ما إذا كان قد كتبه هو المطلوب بالفعل. من جهة أخرى، قد يفترض بعض المستخدمين أن التسمية هي جزء من الحقل (أي مكتوبة مسبقًا) فيتجاهلونه تمامًا.
بدلًا من استخدام التسمية الداخلية، يمكن للمصمم استخدام التسمية العائمة. تعمل هذه الطريقة على إظهار التسمية داخل حقل الإدخال بشكل افتراضي، ولكن ما أن ينقر المستخدم على الحقل لبدء الكتابة تتلاشى التسمية وتنتقل لتظهر أعلى الحقل بشكل مصغّر.
أزرار التنقّل واتخاذ إجراء (Action buttons)
عندما يضغط المستخدم على زر ما يتم تنفيذ إجراء معين مثل إرسال بيانات أو تأكيد معلومة.
أهم التوصيات لتصميم أزرار التنقّل واتخاذ إجراء:
لا تعطّل زر الإرسال بل قدّم تحذيرًا
تُصمم بعض النماذج بحيث إذا أخطأ المستخدم في إدخال أي من البيانات، فلن يعمل زر الإرسال مهما ضغط عليه. ولكن هذا الإجراء قد يشتت المستخدم ويجعله يتفحص النموذج من بدايته وحتى النهاية بحثًا عن المشكلة. وفي حال لم يلاحظها، قد يستغرق وقتًا في التفكير ما إذا كانت المشكلة من جهازه. بينما عندما يتم تصميم زر الإرسال بحيث يوجّه المستخدم نحو مكان الخطأ مع تنويه يبين نوعه، فذلك يجعل التجربة أسهل وأفضل بكثير.
التفريق بين أزرار الإجراءات الأولية والثانوية
تطلق تسمية الإجراء الأولي على الخطوة المتوقع أن يقوم بها المستخدم بنسبة كبيرة (مثل خطوة الإرسال). أما الإجراء الثانوي فهو الخطوة المعاكسة للأولى (مثل خطوة إلغاء الإرسال) والتي احتمال استخدامها ضئيل جدًا. لذا ينبغي التفريق مرئيًا بين أزرار تلك الإجراءات وما يشابهها بحيث يمكن للمستخدم تمييز الإجراء الأولي أكثر من الثانوي وذلك بتقليل البروز البصري للإجراء الثانوي كما في الصورة أدناه.
زر الرجوع
يُعتبر زر الرجوع زر إجراء ثانوي ومن المفضل وضعه بعيدًا عن حقول الإدخال كي لا يتم الضغط عليه بالخطأ.
مسميات أزرار اتخاذ إجراء
ينبغي تجنب تسمية أزرار اتخاذ الإجراءات المهمة بتسميات عامة كاستخدام مسمى زر “إرسال” في كل النموذج لأنها تعطي انطباع أن النموذج عام وغير موثوق. يفضل ذكر اسم الإجراء بدقة مثل “إنشاء حساب” و”حساب مجاني” و”أرسل لي عروضًا” وما إلى هنالك. أيضًا، تجنب استخدام أزرار متعددة (أكثر من زرين) معًا لاتخاذ إجراء (مثل وضع أزرار الإرسال وحفظ لوقت لاحق وإلغاء الإرسال سويًا) لأن ذلك يشتت المستخدم عن هدفه.
زر إعادة الضبط
تجنب وضع زر إعادة الضبط في النموذج لأنه لا يفيد المستخدم، بل يؤذيه أحيانًا. ليست هناك اضطرارية لاستخدام هذا الزر إن كان المستخدم قادر على مسح أي معلومة يريد إعادة كتابتها من جديد. وإن الضغط على زر إعادة الضبط بالخطأ يمسح جميع البيانات الموجودة في النموذج فيتوجب على المستخدم عندها إعادة الملء من جديد.
المظهر المرئي للأزرار
إن تصميم الأزرار وكأنها أزرارًا واقعية وحقيقية (مثل زر المكواة أو الطباخ و غيرها من الأزرار التي تضغط عليها في بيتك) يعطي النموذج روح الاستجابة ويحسن تجربة المستخدم. يشعر المستخدم بالمتعة عندما يضغط على الزر ويراه يتحرك بطريقة كأنه يقول “لقد تمت المهمة”.
الملاحظات والتأكيدات (Feedback)
ردود فعل مرئية أو صوتية تظهر للمستخدم لتساعده على فهم نتيجة النقر على الزر الأخير لإرسال النموذج. تؤكد مثل هذه الرسائل إتمام العملية بنجاح وتمنع المستخدم من النقر على زر الإرسال مرة أخرى.
وأخيرًا.. تحتوي بعض النماذج أيضًا على حقول المساعدة (Assistance) التي توضح كيفية ملء النموذج، وآلية مصادقة أو تحقق (Validation) تفحص تلقائيًا صحة بيانات المستخدم.
في الختام، تذكّر أن إجراء اختبار قابلية الاستخدام (Usability Test) أمرٌ لازم في تصميم النموذج. أجرِ الاختبار بشكل متكرر وحسّن النموذج بناءً على نتائج الاختبار، واجعله سهلًا ولطيفًا قدر الإمكان. لمزيد من المعلومات، احجز مقعدك في دوراتنا التدريبية في منصة UX Writing بالعربية.
الأسئلة الشائعة
كم يجب أن يكون طول حقل الإدخال في النموذج؟
من الأفضل أن يلائم حقل الإدخال حجم المدخلات بحيث يكون طويلًا بشكلٍ كافٍ ليرى المستخدم جميع الأحرف أو الأرقام التي أدخلها.
ما هي صفات النماذج الجيدة؟
للنموذج الجيد عدة صفات منها: يحتوي مصطلحات مألوفة لجمهور المستخدمين – يوضح أخطاء الإدخال ويساعد على تصحيحها.
كم عدد الحقول التي يجب أن يحتويها النموذج؟
من الأفضل أن يحتوي 3-5 حقول على الأكثر.