نهاية نماذج الويب

نشرت: 2022-03-11

نماذج الويب مزعجة وغير فعالة وتملأ الناس بالرهبة. هل يحب أي شخص بالفعل ملء نماذج الويب؟ ومع ذلك ، فهي "شر لا بد منه" يمكنها صنع أو كسر بعض أهم التفاعلات عبر الإنترنت.

لا تزال نماذج الويب تعتمد في الغالب على النماذج الورقية القديمة - بقايا الزومبي لواجهات المستخدم المتمحورة حول النظام (مقابل التي تتمحور حول المستخدم). لقد مرت 30 عامًا ، وما زلنا نكتب نفس المعلومات في النماذج مرارًا وتكرارًا.

يأتي تصميم واجهة المستخدم UX لشكل الويب من تصميم النموذج المستند إلى الورق
يمكن للمرء أن يرى كيف تأتي نماذج الويب من النماذج الورقية مثل طلب وظيفة KFC هذا.

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

تصميم نموذج ويب DMV
من لا يحب DMV؟ من المأمول أن يصبح هذا النوع من النموذج بقايا متربة من الماضي المفقود قريبًا جدًا.

خلاصة القول ، أن معظم نماذج الويب اليوم - سواء أكانت سطح مكتب أم جوال - هي ببساطة تجارب مستخدم رهيبة. على الرغم من عدد لا يحصى من الكتب والدراسات والمقالات والأوراق البيضاء من معلمو صناعة تجربة المستخدم مثل مجموعة Nielsen Norman Group و Baymard Institute (eCommerce) و Luke Wroblewski (المؤسس المشارك لجمعية تصميم التفاعل) ، فإن العديد من المنظمات - حتى أولئك الذين يعتمد شريان حياتهم على ذلك —لا تتبع أفضل ممارسات تصميم نماذج الويب.

وهذا يترجم إلى خسائر بالمليارات والمليارات من العائدات.

بشكل مثير للصدمة ، تم تصنيف Amazon - الشركة العملاقة للتجارة الإلكترونية التي تبلغ قيمتها عدة مليارات من الدولارات - في تصنيف منخفض جدًا في "أداء Checkout UX الشامل" من قبل Baymard Institute عند النظر في تفاعلات المستخدم مع نماذج مثل الشحن والاستلام من المتجر ، ومعلومات بطاقة الائتمان ، وأخطاء التحقق من الصحة ، و أكثر. ما مقدار الأعمال المفقودة بسبب سوء تجربة المستخدم هذه؟

اليوم ، معظم نماذج الويب محبطة وبطيئة في الملء وتضع قابلية الاستخدام في النهاية.

تصميم نموذج الويب UX UI
استمارات تسجيل الحساب مثل هذه تشكل ضغطًا نفسيًا على الأشخاص وتستغرق وقتًا طويلاً لملءها.

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

تصميم نموذج ويب لطلب التوظيف ux
تحتوي نماذج طلبات العمل على بعض من أسوأ تجربة المستخدم. يملأ الباحث النشط عن عمل هذه النماذج بنفس المعلومات مرارًا وتكرارًا.

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

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

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

تصميم UX لشكل الويب للجوال
خطوات "إنشاء ملف تعريف" في دومينوز بيتزا محفوفة بقابلية الاستخدام السيئة على الأجهزة المحمولة وتتطلب الكثير من تفاعل المستخدم المحرج.

نماذج الويب المتطورة

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

يسعى مصممو UX باستمرار لتحسين التجربة وتقليل الألم الذي يأتي مع ملء نماذج الويب ، ولكن في هذه المرحلة المتوسطة لا يزالون يقدمون "الفيتامينات" فقط - وبالكاد حل "مسكن الآلام" النهائي.

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

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

يأتي الملء التلقائي إلى الإنقاذ

كان متصفح Google Chrome وميزة الملء التلقائي الخاصة به بمثابة هبة من السماء طال انتظارها لإكمال النموذج بشكل أكثر كفاءة. يخزن البيانات الشخصية التي يتم إدخالها بشكل متكرر بشكل آمن - بما في ذلك بطاقات الائتمان - لملء نموذج الويب بشكل سريع. وجدت دراسة حديثة أجرتها Google أن تعطيل ميزة الملء التلقائي في Chrome أدى إلى تقليل عمليات إرسال النماذج بنسبة 25٪. أظهرت الدراسة أنه بدونها تكون التجربة مزعجة للغاية ، حيث يتخلى بعض المستخدمين عن ملء النماذج تمامًا.

مفاجئة! الكتابة المملة في النماذج شيء يريد الناس تجنبه.

جوجل كروم الملء التلقائي
تساعد ميزة الملء التلقائي في Google Chrome على الملء المتكرر لنماذج الويب.

تعمل إدارة كلمات المرور على تخفيف الألم

يعد استرداد كلمات المرور وكتابتها باستمرار لمئات الحسابات عبر الإنترنت أمرًا مملًا. جاء مديرو كلمات المرور للإنقاذ منذ بضع سنوات وهم الآن مستخدَمون على نطاق واسع. 1Password و Dashlane هما حلان رائدان ، من خلال بضع نقرات أو نقرات ، يقومان بتخزين كلمات المرور المشفرة وتعبئتها تلقائيًا لمواقع الويب والتطبيقات.

الملء التلقائي لمدير كلمات المرور للجوال
بمجرد إلغاء القفل بكلمة مرور رئيسية أو معرف اللمس ببصمة الإصبع ، يقوم مدير كلمات المرور في Dashlane بتعبئة كلمات المرور تلقائيًا.

تسجيل الدخول الاجتماعي يضع حدًا للتسجيل

وفقًا لبحث تم جمعه بواسطة WebHostingBuzz ، أبلغ 86٪ من المستخدمين عن إزعاجهم من خلال الاضطرار إلى إنشاء حسابات جديدة. يلغي تسجيل الدخول الاجتماعي الحاجة إلى التسجيل. إنه شكل من أشكال تسجيل الدخول الفردي باستخدام المعلومات الموجودة من خدمة الشبكات الاجتماعية مثل Facebook و Google+ و LinkedIn و Twitter. يزيد التسجيل ويقلل من الحواجز التي تعترض الدخول من خلال تقليل الحاجة إلى أسماء المستخدمين وكلمات المرور.

تسجيل الدخول الاجتماعي ، تسجيل الدخول الاجتماعي

تقنية الأجهزة المحمولة تخفف من عبء النماذج

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

أيضًا ، اعتمادًا على نوع الإدخال المطلوب ، يمكن تغيير لوحة المفاتيح ؛ يمكن استخدام الاقتراحات / الإكمال التلقائي بناءً على الأحرف الأولى المكتوبة ، ويمكن تنسيق أرقام الهواتف وأرقام بطاقات الائتمان تلقائيًا.

Apple Pay ، رؤية الكمبيوتر
يستخدم تطبيق Apple Pay كاميرا iPhone ورؤية الكمبيوتر لالتقاط صورة ببساطة لبطاقة لتسجيلها ، دون الحاجة إلى إدخال مملة على لوحة المفاتيح.

اتجاهات نماذج الويب

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

تصميم نموذج الويب للجوال
للابتعاد عن مظهر "إدخال البيانات" باستخدام حقول الإدخال والقوائم المنسدلة ، يبتكر المصممون تصميمات أنظف لنماذج الأجهزة المحمولة.


تصميم نموذج ويب لسطح المكتب
نموذج Google لسطح المكتب.

هناك اتجاه آخر يتمثل في جعل طلب مدخلات المستخدم أكثر حوارية ، مما يخلق تفاعلًا بشريًا أكثر. تمهيدًا لعالم أكثر تعقيدًا من روبوتات المحادثة وطرق إدخال أخرى في المستقبل ، فهي تنطوي على تشابك حقول إدخال المستخدم في جمل وأسئلة تتدفق بشكل طبيعي.

تصميم نموذج ويب لواجهة مستخدم محادثة
نموذج اتصال تحاوري بسيط. (نيلو سيبوتاري)


تصميم نموذج ويب متنقل للتجارة والمحادثة
أصبحت أشكال الهاتف المحمول في أضيق الحدود والمحادثة. (تصميمات أليكس كريستاش وفابيو باسيلي على Dribbble)

عودة الآلات: روبوتات المحادثة وصعود الوكلاء الآليين

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

على الرغم من أن الوقت الذي يستغرقه شيء ما قد يكون هو نفسه - لإكمال حجز سفر بسيط على سبيل المثال - لأن التفاعل محادثة ومقسّم إلى أجزاء ، يتم تقليل الإجهاد المعرفي وتحسين التجربة.

روبوت المحادثة لواجهة المستخدم GoVoteBot
قامت R / GA ومجلس الإعلانات ببناء روبوت تصويت لدفع جيل الألفية إلى صناديق الاقتراع. يُسمى ببساطة GoVoteBot ، وهو يتفاعل مع المستخدمين في الوقت الفعلي على Facebook Messenger.

يمكن للمسافرين الآن إجراء حجوزات مع فنادق حياة باستخدام تطبيق Facebook Messenger ، أو ببساطة الانخراط في محادثة مباشرة مع فريق حياة لطرح أسئلة ذات شكل حر - مثل ما إذا كان هناك توافر حول عطلات معينة.

واجهة المستخدم للمحادثة chatbot التجارة حياة
باستخدام Facebook Messenger ، تستخدم فنادق حياة موظفي علاقات العملاء لمساعدة الضيوف في إجراء الحجوزات والتحقق من توفرها.

التأمين صناعة أخرى جاهزة للاضطراب من خلال ظهور الوكلاء الآليين. جعل Facebook منصة Messenger الخاصة به متاحة لأي شخص لتطوير ونشر برامج الدردشة ، كما فتح الباب أمام وكيل التأمين الآلي.

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

Jack Insurance UI للمحادثة
Jack هو روبوت محادثة بسيط يرشد المحترفين خلال عملية التأمين - لا توجد نماذج.

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

لا يمكننا حل المشكلات باستخدام نفس نوع التفكير الذي استخدمناه عندما أنشأناها. - البرت اينشتاين

للانتقال من مرحلة "الفيتامين" إلى مسكن حقيقي للألم ، نحتاج إلى التفكير بشكل مختلف والقيام بقفزة عملاقة في النموذج الجديد.

صعود الذكاء الاصطناعي: جمع بيانات سهل الاستخدام عن الغد

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

تشير تقارير Google إلى أن التوتر يعمل دون رادع: 69٪ من المسافرين بغرض الترفيه يخشون أنهم لا يجدون أفضل سعر أو يتخذون القرار الأفضل أثناء حجز رحلة. أضف إلى ذلك تجربة المستخدم السيئة في ملء نماذج لا نهاية لها بالمعلومات نفسها 90٪ من الوقت ، ونحن نتحدث عن عملية محبطة ومرهقة بشكل لا يصدق. حتى مع ميزة الملء التلقائي في Chrome ووسائل الراحة الأخرى المذكورة سابقًا ، لا تزال التجربة مروعة ومليئة بالملل.

لا تتمثل رؤية UX طويلة المدى في الحفاظ على إتقان نماذج الويب ولكن القضاء عليها تمامًا.

كما ذكرنا سابقًا ، نظرًا لمجموعة التقنيات المتاحة على الهاتف المحمول: نظام تحديد المواقع العالمي (GPS) ، وبصمات الأصابع (Touch ID) ، والبصمة الصوتية والتعرف عليها ، ومسح قزحية العين ، والتعرف على الوجوه ، ورؤية الكمبيوتر ، ومساعدي الذكاء الاصطناعي ، وروبوتات الدردشة ، وجمع البيانات الشخصية التي لا مفر منها والتي يجب تحدث لمعاملة ناجحة عبر الإنترنت ستحدث ثورة على الهاتف المحمول أولاً. وفقًا لذلك ، يمكن لمواقع سطح المكتب الاستفادة من الإمكانات التقنية للأجهزة المحمولة للتحقق المعقد من الهوية عن طريق الارتباط بها.

حجز السفر للمحادثة بدلاً من نماذج الويب
هل يمكننا وضع حد للبحث التقليدي ونتائج التصفية ونماذج الويب والتوصل إلى تفاعل أبسط وأكثر متعة بشكل جذري عند محاولة حجز السفر؟

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

تحديد الهوية وأمن البيانات الشخصية ونماذج الويب

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

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

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

طبيعة إدخال المستخدم تتغير

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

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

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

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

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

ستتغير التكنولوجيا وطبيعة التفاعلات ، لكن مجموع ومضمون أفضل ممارسات تصميم تجربة المستخدم - عملية التصميم التي تركز على المستخدم - ستستمر في التطور وستسود في النهاية.

• • •

مزيد من القراءة على مدونة Toptal Design:

  • تجربة مستخدم التجارة الإلكترونية - نظرة عامة على أفضل الممارسات (باستخدام مخطط المعلومات الرسومي)
  • أهمية التصميم المتمحور حول الإنسان في تصميم المنتج
  • أفضل مجموعات مصممي UX - أمثلة ودراسات حالة ملهمة
  • مبادئ ارشادية للواجهات المتنقلة
  • التصميم التوقعي: كيفية إنشاء تجارب مستخدم سحرية