UX و HTML5: دعنا نساعد المستخدمين على ملء نموذج هاتفك المحمول (الجزء 2)

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

مساعدة محتوى تنسيق المستخدم مع HTML5

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

جودة HTML5 المحسّنة للجوّال

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

إدخال البيانات العددية

input type= number

تقيد السمة HTML5 <input type=number> حقل الإدخال للأرقام. يحتوي على نظام تحقق مدمج يرفض أي شيء ليس رقمًا.

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

يجب أن يسمح الإدخال بالأرقام العشرية والسالبة (لكن القليل من لوحات المفاتيح تحترم ذلك). كما هو موضح في مواصفات W3C ، "الطريقة البسيطة لتحديد ما إذا كان سيتم استخدام type = number هي النظر فيما إذا كان من المنطقي أن يكون لعنصر التحكم الإدخال واجهة spinbox (على سبيل المثال مع الأسهم" up "و" down ")". هذا يعني أنه ليس من المفترض استخدام الإدخال لبطاقات الائتمان أو رموز المنطقة.

سمات pattern inputmode

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

هذا ما يبدو عليه:

 <input type="number" name="quantity" pattern="[0-9]*" inputmode="numeric" />

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

لاحظ أيضًا أنه يمكن تطبيق الأنماط على أي نوع آخر من المدخلات.

لن يعمل استخدام هذا النمط فقط على معظم هواتف Android. ستظل بحاجة إلى مزيج من input type=number والسمة لإنجاز هذا العمل.

inputmode

إذا كنت تريد فقط تشغيل لوحة المفاتيح الرقمية للجوال ولكنك لا تريد التعامل مع type=number وفوضى pattern ، فيمكنك استخدام إدخال نص وتطبيق وضع الإدخال = السمة الرقمية. انها تبدو مثل هذا:

 <input type="text" name="quantity" inputmode="numeric" />

لسوء الحظ (في وقت كتابة هذا التقرير) ، يدعم هذا فقط Chrome 67 mobile ، ولكن يجب أن يصل إلى Chrome Desktop 66 بدون علم.

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

input type=tel

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

دخول التواريخ

حتى لو كانت بيانات رقمية من الناحية الفنية ، فإن التواريخ تستحق قسمًا خاصًا بها. هناك عدد قليل من أنواع إدخال HTML5 لإدخال التواريخ. الأكثر استخدامًا هو input type=date . سيؤدي ذلك إلى تشغيل منتقي التاريخ في المتصفحات المدعومة. يعتمد ظهور منتقي التاريخ على المتصفح ونظام التشغيل. لمعرفة المزيد حول كيفية عرض المتصفحات input type="date" ، أوصيك بقراءة "جعل input type=date ."

هناك أيضًا type=week لاختيار أسبوع ، type=time لإدخال وقت (حتى الساعة والدقيقة) ، type=datetime-local لاختيار تاريخ ووقت (باستخدام التوقيت المحلي للمستخدم). الكثير من الخيارات!

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

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

أخبرني أحد المستخدمين على Twitter:

"لقد ولدت في عام 1977 ويمكنني أن أؤكد الانزعاج. كلما زاد الوقت الذي تستغرقه في التمرير ، كلما شعرت بأنك أكبر سنًا :-("

لذلك ، ربما لا تكون تواريخ الميلاد هي أفضل مرشح لمن يلتقطون التواريخ.

URL ، البريد الإلكتروني ، الهاتف والبحث

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

سيؤدي استخدام input type=url إلى إظهار لوحة مفاتيح محسّنة على الهاتف المحمول ، مع / (مفتاح الشرطة المائلة) يمكن الوصول إليها مباشرة. اعتمادًا على نظام التشغيل ، يمكنك أيضًا منح وصول سريع إلى نطاقات المستوى الأعلى المشاع ، مثل .fr في لقطة الشاشة أدناه. إذا ضغطت طويلاً على هذا الزر ، فستظهر اختصارات لنطاقات المستوى الأعلى الأخرى. يأتي هذا أيضًا مع التحقق التلقائي من المستعرض الذي يتحقق من صحة تنسيق عنوان URL.

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

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

النطاق واللون

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

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

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

التقاط وسائط HTML: التقاط الصور وتحميلها وتسجيل الصوت

أتذكر وقت iPhone 3 ، عندما لم تسمح Apple باستخدام input type=file على موقع ويب ، لأسباب أمنية. لقد ولت تلك الأوقات منذ زمن طويل. باستخدام واجهة برمجة تطبيقات التقاط وسائط HTML ، أصبح من الممكن الآن الوصول إلى أجهزة استشعار مختلفة للجهاز. يمكننا التقاط الصور ومقاطع الفيديو ، ويمكننا حتى تسجيل الصوت مباشرة في المتصفح.

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

يبدو الرمز كما يلي:

 <input type="file" accept="image/*">

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

 <input type="file" accept="image/*" capture> // opens the camera>

 <input type="file" accept="video/*" capture> // opens the camera in video mode

 <input type="file" accept="audio/*" capture> // opens the voice recorder 

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

HTML5 Autos: التصحيح التلقائي ، الإكمال التلقائي ، الملء التلقائي ، الرسملة التلقائية والتركيز التلقائي

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

• قم بتعطيل التصحيح التلقائي للأشياء التي يكون القاموس ضعيفًا لها : عناوين البريد الإلكتروني والأرقام والأسماء والعناوين والمدن والمناطق ورموز المنطقة وأرقام بطاقات الائتمان.
• قم بتعطيل الرسملة التلقائية لحقول البريد الإلكتروني والحقول الأخرى عند الاقتضاء (على سبيل المثال ، عناوين URL لمواقع الويب). لاحظ أن type=email يقوم بالمهمة نيابة عنك في الإصدار الأخير من iOS و Android ، ولكن قم بتعطيله على أي حال للإصدارات الأقدم أو إذا كان type=email غير مدعوم.
• يمكنك تعيين سمة الرسملة التلقائية words بحيث تقوم تلقائيًا بأحرف كبيرة للحرف الأول من كل كلمة يكتبها المستخدم. يمكن أن يكون هذا مفيدًا للأسماء والأماكن وما شابه ، ولكن ، مرة أخرى ، كن حذرًا معه واختبره.

• بالنسبة input type=tel ، اضبط autocomplete="tel" .
• يمكنك استخدام autofocus لإعطاء التركيز لعنصر التحكم عندما يقوم المستخدم بتحميل الصفحة. ولكن لمجرد قيام المستخدم بفتح صفحة "جهة الاتصال" ، فهذا لا يعني أنه مستعد للانتقال مباشرة إلى الحقل الأول من النموذج الخاص بك. لذا ، مرة أخرى ، استخدمها بحكمة.

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

التحقق من صحة نموذج HTML5

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

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

في "التحقق من صحة النموذج الأصلي ، الجزء 1" ، يشرح Peter-Paul Koch بالتفصيل سبب عدم قيام التحقق من صحة نماذج HTML و CSS بجعل النماذج أفضل في الوقت الحالي.

دعم دون اتصال لحفظ بيانات المستخدم

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

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

إذا فُقد الاتصال أثناء قيام المستخدم بإرسال النموذج ، فقد يفقد البيانات أيضًا. لتجنب ذلك ، يمكنك استخدام مزيج من ** HTML5 offline API ** و Service Workers API من أجل:

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

لمعرفة كيفية كتابة هذا ، راجع المقالة حول "النماذج غير الملائمة".

يمكن لقدرات الأجهزة المحمولة أن تأخذ التجربة إلى المستوى التالي

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

الكشف عن موقع المستخدم

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

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

كن ذكيًا عند طلب إذن المستخدم

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

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

إليك بعض النصائح العامة حول طلب الأذونات على الويب:

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

إذا كنت تريد المضي قدمًا ، فقد أنشأ Luke Wroblewski (نعم ، مرة أخرى) مقطع فيديو رائعًا لمساعدتك في عملية طلب الإذن.

تجربة تسجيل خروج أفضل

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

ماسح بطاقة الائتمان iOS

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

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

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

خذ خدمة Checkout خطوة أخرى مع Google Pay API

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

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

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

جعل المصادقة أسهل

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

ماجيك لينك

أنا أستخدم مدير كلمات المرور. لا أعرف 99٪ من كلمات المرور الخاصة بي. يتم إنشاؤها جميعًا بشكل عشوائي. لتسجيل الدخول إلى مساحة عمل Slack جديدة ، يجب أن:

1. افتح مدير كلمة المرور الخاصة بي ،
2. أدخل كلمة المرور الرئيسية الخاصة بي ،
3. ابحث عن مكان العمل ،
4. انسخ كلمة المرور والصقها في تطبيق Slack.

إنها عملية شاقة ، لكن Slack كان ذكيًا بما يكفي لتوفير خيار أفضل.

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

خلف الكواليس ، يحتوي هذا الرابط السحري على رمز مصادقة. يلتقط تطبيق Slack هذا ويصادقك دون طلب كلمة المرور.

بصمة لتحديد الهوية الذكية

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

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

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

نفس الجهاز ، تطبيقان ، تجربتان مختلفتان تمامًا.

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

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

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

التعرف على الوجه ومعرف الوجه

في عام 2018 ، أطلقت Apple جهاز iPhone X بمعرف الوجه الجديد تمامًا. يمكن للمستخدمين فتح جهاز iPhone X الخاص بهم باستخدام وجوههم . بالطبع ، اقترحت بعض هواتف Android والأجهزة اللوحية وأجهزة الكمبيوتر الأخرى التي تعمل بنظام Windows هذه الميزة مسبقًا. ولكن عندما تطلق Apple شيئًا ما ، فإنه يميل إلى أن يصبح "شيئًا". في الوقت الحالي ، تُستخدم هذه التقنية في الغالب كمصادقة لإلغاء تأمين الهواتف والكمبيوتر.

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

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

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

جوجل: تسجيل بنقرة واحدة

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

ملاحظة : هذا حل مثير للاهتمام بدون كلمة مرور. بالطبع ، باستخدامه ، يتم ربط المستخدمين بـ Google ، وهو الأمر الذي لن يشعر الجميع بالراحة تجاهه .

خاتمة

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

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

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

لذا ، باختصار: اختبرها. اختبره على أجهزة حقيقية. اختبرها مع مستخدمين حقيقيين.