أفضل الممارسات لتصميم نموذج الجوال

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

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

ما الذي يجعل الشكل الفعال

الهدف الأساسي مع كل نموذج هو إكمال. هناك عاملان لهما تأثير كبير على معدل الإنجاز:

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

مكونات النماذج

يحتوي النموذج النموذجي على المكونات الخمسة التالية:

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

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

حقول الإدخال

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

تصغير العدد الإجمالي للحقول

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

قام معهد Baymard بتحليل نماذج الخروج ووجد أن عملية الخروج الطويلة جدًا أو المعقدة للغاية هي أحد أهم أسباب التخلي أثناء الخروج. وجدت الدراسة أن متوسط ​​السداد يحتوي على ما يقرب من 15 حقلاً نموذجيًا. يمكن أن تقلل معظم الخدمات عبر الإنترنت عدد الحقول المعروضة افتراضيًا بنسبة 20 إلى 60٪.

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

التمييز بوضوح بين جميع الحقول الاختيارية

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

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

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

حجم الحقول وفقا لذلك

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

تقدم التركيز الميداني

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

اجعل حقل الإدخال النشط بارزًا ومركّزًا. يجب أن يكون التركيز الميداني نفسه واضحًا تمامًا - يجب أن يكون المستخدمون قادرين على فهم مكان التركيز في لمح البصر. يمكن أن يكون لون حد محدد أو تلاشي الصندوق.

لا تطلب من المستخدمين إعادة عنوان بريدهم الإلكتروني

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

توفير خيار "إظهار كلمة المرور"

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

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

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

لا تقم بتقسيم حقول البيانات إلى شرائح

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

تجنب القوائم المنسدلة

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

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

استخدم العناصر النائبة والمدخلات المقنعة

يعد تنسيق عدم اليقين أحد أهم مشاكل تصميم النموذج. هذه المشكلة لها اتصال مباشر بالتخلي عن النموذج - عندما يكون المستخدمون غير متأكدين من التنسيق الذي يجب أن يقدموا به البيانات ، يمكنهم التخلي عن النموذج بسرعة. هناك بعض الأشياء التي يمكنك القيام بها لتوضيح التنسيق.

نص العنصر النائب

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

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

الإدخال المقنع

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

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

تقدم مطابقة لوحة المفاتيح

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

قم بتعيين أنواع إدخال HTML لإظهار لوحة المفاتيح الصحيحة. سبعة أنواع من المدخلات ذات صلة بتصميم النموذج:

• input type="text" يعرض لوحة المفاتيح العادية للجهاز المحمول.
• input type="email" يعرض لوحة المفاتيح العادية و "@" و ".com".
• input type="tel" يعرض لوحة المفاتيح الرقمية من 0 إلى 9.
• input type="number" يعرض لوحة مفاتيح بها أرقام ورموز.
• input type="date" يعرض محدد تاريخ الجهاز المحمول.
• input type="datetime" يعرض محدد التاريخ والوقت للجهاز المحمول.
• input type="month" يعرض محدد الشهر والسنة للجهاز المحمول.

استخدم شريط التمرير عند السؤال عن نطاق معين

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

اشرح بوضوح سبب مطالبتك بمعلومات حساسة

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

كن حذرًا مع الإعدادات الافتراضية الثابتة

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

حماية بيانات المستخدم

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

أتمتة الإجراءات

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

إليك بعض الأشياء التي يمكنك القيام بها لتحقيق هذا الهدف:

الإكمال التلقائي

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

الرسملة التلقائية

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

تصحيح تلقائي

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

ملء تلقائي للبيانات الشخصية

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

استخدم الميزات الأصلية للجهاز المحمول لتبسيط إدخال البيانات

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

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

خدمات الموقع

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

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

ترخيص البيومترية

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

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

الة تصوير

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

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

صوت

الأجهزة التي يتم التحكم فيها بالصوت ، مثل Apple HomePod و Google Home و Amazon Echo ، تتعدى بنشاط على السوق. زاد عدد الأشخاص الذين يفضلون استخدام الصوت في العمليات المشتركة بشكل ملحوظ. وفقًا لـ ComScore ، ستكون 50٪ من جميع عمليات البحث عبارة عن عمليات بحث صوتية بحلول عام 2020.

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

عند تصميم نموذج ، يمكنك توفير إدخال صوتي كطريقة بديلة لإدخال البيانات.

تسميات الحقول

اكتب تسميات واضحة وموجزة

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

تجنب استخدام جمل كاملة للشرح. التسمية ليست نصا مساعدا. اكتب ملصقات موجزة وواضحة (كلمة أو كلمتين) ، حتى يتمكن المستخدمون من مسح النموذج ضوئيًا بسرعة.

ضع الملصق والإدخال قريبًا معًا

ضع كل تسمية قريبة من حقل الإدخال ، لأن العين ستعرف بصريًا أنها مرتبطة ببعضها البعض.

لا تستخدم اختفاء نص العنصر النائب كتسميات

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

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

تسميات المحاذاة العلوية

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

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

قضية الجملة مقابل. حالة العنوان

هناك طريقتان عامتان لكتابة الكلمات بأحرف كبيرة:

• حالة العنوان: اجعل كل كلمة كبيرة. "هذه حالة العنوان."
• حالة الجملة: اجعل الكلمة الأولى كبيرة. "هذه قضية جملة".

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

تجنب استخدام قبعات للملصقات

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

تخطيط

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

استخدم تخطيط عمود واحد

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

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

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

هناك بعض الاستثناءات لهذه القاعدة. من الممكن وضع الحقول القصيرة وذات الصلة منطقيًا في نفس الصف (مثل رمز المدينة والمنطقة).

أنشئ تدفقًا لأسئلتك

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

تأجيل الأسئلة المتعمقة حتى النهاية

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

تجميع الحقول ذات الصلة معًا

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

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

اجعل الشكل الطويل يبدو أبسط

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

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

هناك نوعان من التقنيات للقيام بذلك.

الإفصاح التدريجي

يتعلق الإفشاء التدريجي بمنح المستخدمين الشيء الصحيح في الوقت المناسب. الهدف هو العثور على الأشياء المناسبة لوضعها على الشاشة الصغيرة في الوقت المناسب:

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

تقطيع

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

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

أزرار العمل

الزر هو عنصر تفاعلي يوجه المستخدمين لاتخاذ إجراء.

اجعل أزرار الإجراءات وصفية

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

لا تستخدم أزرار مسح أو إعادة تعيين

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

استخدم أنماطًا مختلفة للأزرار الأساسية والثانوية

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

تصميم أهداف تعمل باللمس سهلة الاستخدام

تخلق أهداف اللمس الصغيرة تجربة مستخدم مروعة لأنها تجعل من الصعب على المستخدمين التفاعل مع الكائنات التفاعلية. من الضروري تصميم أهداف لمس سهلة الإصبع: حقول وأزرار إدخال أكبر.

توضح الصورة أدناه أن متوسط ​​عرض الإصبع البالغ يبلغ حوالي 11 ملم.

وفقًا لإرشادات تصميم المواد ، يجب أن تكون أهداف اللمس 48 × 48 DP على الأقل. ينتج عن هدف اللمس بهذا الحجم حجم مادي يبلغ حوالي 9 ملم ، بغض النظر عن حجم الشاشة. قد يكون من المناسب استخدام أهداف لمس أكبر لاستيعاب نطاق أوسع من المستخدمين.

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

تعطيل الأزرار بعد الحنفية

تتطلب إجراءات النماذج عادةً بعض الوقت لتتم معالجتها. على سبيل المثال ، قد يكون حساب البيانات مطلوبًا بعد الإرسال. It's essential not only to provide feedback when an action is in progress, but also to disable the submit button to prevent users from accidentally tapping the button again. This is especially important for e-commerce websites and apps. By disabling the button, you not only prevent duplicate submissions, which can happen by accident, but you also provide a valuable acknowledgment to users (users will know that the system has received their submission).

Assistance And Support

Provide Success State

Upon successful completion of a form, it's critical to notify users about that. It's possible to provide this information in the context of an existing form (for example, showing a green checkmark above the refreshed form) or to direct users to a new page that communicates that their submission has been successful.

Errors And Validation

Users will make mistakes. It's inevitable. It's essential to design a user interface that supports users in those moments of failures.

While the topic of errors and validation deserves its own article, it's still worth mentioning a few things that should be done to improve the user experience of mobile forms.

Use Input Constraints for Each Field

Prevention is better than a cure. If you're a seasoned designer, you should be familiar with the most common cases that can lead to an error state (error-prone conditions). For example, it's usually hard to correctly fill out a form on the first attempt, or to properly sync data when the mobile device has a poor network connection. Take these cases into account to minimize the possibility of errors. In other words, it's better to prevent users from making errors in the first place by utilizing constraints and offering suggestions.

For instance, if you design a form that allows people to search for a hotel reservation, you should prevent users from selecting check-in dates that are in the past. As shown in the Booking.com example below, you can simply use a date selector that allows users only to choose today's date or a date in the future. Such a selector would force users to pick a date range that fits.

Don't Make Data Validation Rules Too Strict

While there might be cases where it's essential to use strict validation rules, in most cases, strict validation is a sign of lazy programming. Showing errors on the screen when the user provides data in a slightly different format than expected creates unnecessary friction. And this would have a negative impact on conversions.

It's very common for a few variations of an answer to a question to be possible; for example, when a form asks users to provide information about their state, and a user responds by typing their state's abbreviation instead of the full name (for example, CA instead of California). The form should accept both formats, and it's the developer job to convert the data into a consistent format.

Clear Error Message

When you write error messages, focus on minimizing the frustration users feel when they face a problem in interacting with a form. Here are a few rules on writing effective error messages:

• Never blame the user.
  The way you deliver an error message can have a tremendous impact on how users perceive it. An error message like, “You've entered a wrong number” puts all of the blame on the user; as a result, the user might get frustrated and abandon the app. Write copy that sounds neutral or positive. A neutral message sounds like, “That number is incorrect.”
• Avoid vague or general error messages.
  Messages like “Something went wrong. Please, try again later” don't say much to users. Users will wonder what exactly went wrong. Always try to explain the root cause of a problem. Make sure users know how to fix errors.
• Make error messages human-readable.
  Error messages like “User input error: 0x100999” are cryptic and scary. Write like a human, not like a robot. Use human language, and explain what exactly the user or system did wrong, and what exactly the user should do to fix the problem.

Display Errors Inline

When it comes to displaying error messages, designers opt for one of two locations: at the top of the form or inline. The first option can make for a bad experience. Javier Bargas-Avila and Glenn Oberholzer conducted research on online form validation and discovered that displaying all error messages at the top of the form puts a high cognitive load on user memory. Users need to spend extra time matching error messages with the fields that require attention.

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

استخدم التحقق الديناميكي

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

استخدم التحقق المضمن مع التعليقات في الوقت الفعلي. يخبر هذا التحقق الأشخاص على الفور ما إذا كانت المعلومات التي كتبوها متوافقة مع متطلبات النموذج. في عام 2009 ، اختبر Luke Wroblewski عملية التحقق المضمنة مقابل التحقق من صحة ما بعد الإرسال ووجد النتائج التالية للإصدار المضمَّن:

• 22٪ زيادة في معدل النجاح ،
• 22٪ انخفاض في الأخطاء المرتكبة ،
• زيادة بنسبة 31٪ في معدل الرضا ،
• 42٪ انخفاض في أوقات الإنجاز ،
• انخفاض بنسبة 47٪ في عدد عمليات تثبيت العين.

ولكن يجب تنفيذ التحقق المضمن بعناية:

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

إمكانية الوصول

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

تأكد من أن النموذج يحتوي على تباين مناسب

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

• يجب أن يكون للنص الصغير نسبة تباين لا تقل عن 4.5: 1 مقابل خلفيته.
• يجب أن يكون للنص الكبير (بحجم 14 نقطة غامق و 18 نقطة عادي وما فوق) نسبة تباين لا تقل عن 3: 1 مقابل الخلفية.

قد يبدو قياس تباين الألوان أمرًا مربكًا. لحسن الحظ ، فإن بعض الأدوات تجعل العملية بسيطة. أحدها هو Web AIM Color Contrast Checker ، والذي يساعد المصممين على قياس مستويات التباين.

لا تعتمد على اللون وحده للتواصل مع الحالة

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

السماح للمستخدمين بالتحكم في حجم الخط

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

اختبر قرارات التصميم الخاصة بك

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

خاتمة

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

هذه المقالة جزء من سلسلة تصميم UX التي ترعاها Adobe. تم تصميم Adobe XD لعملية تصميم UX سريعة وسلسة ، حيث يتيح لك الانتقال من الفكرة إلى النموذج الأولي بشكل أسرع. التصميم والنموذج الأولي والمشاركة - كل ذلك في تطبيق واحد. يمكنك الاطلاع على المزيد من المشاريع الملهمة التي تم إنشاؤها باستخدام Adobe XD على Behance ، وكذلك الاشتراك في النشرة الإخبارية لتصميم تجربة Adobe للبقاء محدثًا ومطلعًا على أحدث الاتجاهات والرؤى لتصميم UX / UI.