صورة من ميرو الصورة بلوق



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



***

ترجمة المقال "هل أنت متأكد أنك تريد القيام بذلك؟" النصوص الدقيقة في حوارات التأكيد "

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



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

تأكيد أو إلغاء الإجراء

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



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



هذا ما تبدو عليه الرسالة المنبثقة في تقويم Google. يظهر بعد حذف حدث لم تتم دعوة أي مشاركين آخرين إليه.









يرى المستخدم هذه الرسالة في صور Google عند نقل الصور إلى المهملات:









وإليك الرسالة المنبثقة في Dropbox:









ويمكن الاطلاع على المزيد من الأمثلة في كيرين Rijensky في المادة على خيارات أخرى للواجهة إلغاء التثبيت.

متى تستخدم مربع حوار التأكيد ومتى تلغي؟

طرحت هذا السؤال على مجموعة WE - Women Experience على Facebook وحصلت على إجابات رائعة (شكرًا للفتيات!). بناءً على هذه الإجابات ، حددت أربعة عوامل رئيسية يجب مراعاتها:

1. . , , , . , , . , , , , .
2. . / , . , . , , , .
3. . , , , . , . , , .
4. التردد . إذا قام المستخدم بانتظام بتنفيذ نفس الإجراءات ، على سبيل المثال ، عند التعامل مع رسائل البريد الإلكتروني ، فسوف يتعب بسرعة من طلب التأكيد في كل خطوة. بالإضافة إلى ذلك ، من غير المحتمل أن يقوم المستخدم عن طريق الخطأ بتنفيذ الإجراء الذي يعمل به كل يوم. على العكس من ذلك ، إذا كان المستخدم نادرًا ما يقوم بإجراء ما وربما يكون قد نسي ميزاته ، فمن الأفضل استخدام مربع حوار تأكيد بدلاً من رسالة الإلغاء (والتي يسهل تفويتها ، علاوة على ذلك).

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

تشريح حوار التأكيد

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

1. عنوان.
2. شرح سطر أو سطرين (اختياري).
3. أزرار.

العنصر 1. العنوان

في العنوان ، عليك أن تسأل المستخدم أو تخبره عن إجراء رئيسي واحد يحتاج إلى تأكيد.



يجب أن يكون العنوان بسيطًا قدر الإمكان ، والأهم من ذلك - أن يكون واضحًا ولا لبس فيه .



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



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



لا تستخدم عناوين عامة جدًا مثل "تحذير" أو "هل أنت متأكد".



قم بتسمية الإجراء الحالي - كلما كان أكثر تحديدًا ، كان ذلك أفضل.







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



توصيل الشيء الرئيسي من البداية .





















إليك مثال رائع من Twitter - مشاركة بسيطة وواضحة:









لماذا من الضروري إزالة المقدمات الزائدة عن الحاجة من الرسائل؟

1. ستكون الرسائل موجزة واللغة بسيطة وسهلة الفهم. نحن بالفعل نجبر المستخدمين على قضاء بعض الوقت في إجراء إضافي. تضيف عبارة "أنت حقًا ..." تعقيدًا غير ضروري إلى الرسالة ، بما في ذلك على المستوى العاطفي.
2. . , . – , – .
3. . .
4. «» – .

« »

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



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







يمكن أن تكون كلمة "متابعة" عامة ومجردة. احرص على الدقة والإشارة إلى إجراء محدد .

البند 2 (اختياري). تفسير

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













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

عند الحاجة إلى تفسير

عندما يحاول المستخدم تنفيذ إجراء يؤدي إلى تشغيل إجراءات أخرى ، يجب إبلاغه بها. على سبيل المثال:

• إزالة العناصر ذات الصلة - سيقوم المستخدم بإزالة عنصر ، مما سيؤدي إلى إزالة العناصر ذات الصلة.
  
  
  
  
  
  
  
  
  
  
• — , .
  
  
  
  
  
  
  
  
  
  
• — , , . ( , , . True story.)
  
  
  
  
  
  
  
  
  
  
• — , .
  
  
  
  
  
  
  
  
  
  

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



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









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



إليك مثال جيد من Typeform:









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

الجمع بين العنوان والشرح

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

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

مرة وإلى الأبد ، إلى الأبد وإلى الأبد

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



يوضح المثال أعلاه من Typeform هذا المبدأ تمامًا.



يتطلب YouTube تأكيدًا إضافيًا لحذف الفيديو: حتى يحدد المستخدم مربع اختيار خاصًا ، يظل زر الحذف غير قابل للوصول.

هل هناك خيار أفضل؟ حان الوقت للحديث عنه

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



هذا مثال من Facebook:

العنصر 3. الأزرار

اتبع هذه الإرشادات عند العمل على أزرار مربعات حوار التأكيد:

1. اجعل الأزرار سهلة التمييز والفهم قدر الإمكان.
   
   
   
   يجب أن تكون الأزرار خيارين واضحين ويمكن تمييزهما بسهولة ولا يمكن الخلط بينهما. يجب أن يكون كل خيار واضحًا للغاية. إذا كان العنوان مكتوبًا بشكل جيد ، فسيكون من الأسهل بكثير العثور على إجابتين متعارضتين للسؤال المطروح على الأزرار.
   
   
   
   إليك مثال من برنامج AVG يوضح هذه الفكرة تمامًا:
   
   
   
   
   
   
   
   
   
   
2. 
   
   
   
   «» «» «» «», , / , , , . , ( – ), .
   
   
   
   , , : «, »; « »; «, »; « »; «, » .
   
   
   
   , «» «», «» («, ») « » (« »). , («»).
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   Forest, Chrome. : , , , , .
   
   
   
   , , , . , ? , – , .
   
   
   
   
   
   
   
   
   
   , . , .
   
   
   
   , Galaxy. , , :
   
   
   
   
   
   
   
   
   
   
   
   , , «/» «/», «» , . , . «» «», , .
3. استخدم نفس الفعل في العنوان وعلى الأزرار حتى يتمكن المستخدم من تتبع الاتصال بينهما بسهولة
   
   
   
   
   
   
   
   

يوضح المثال التالي من صور Google مبدأين آخرين لتصميم نص لمربعات حوار التأكيد:

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

دعونا نلخص

يوجد أدناه مثال أخير يقوم بتنقية العناصر الثلاثة لمربع حوار التأكيد.



في العنوان الجديد ، نطرح سؤالًا مباشرًا حول إجراء معين.



في توضيح جديد ، نبلغ المستخدم بنتائج هذا الإجراء.



في الأزرار الجديدة ، نقدم خيارات سهلة القراءة مع السياق.







***

التطبيق في الممارسة

إذن ، ما هي الاختراقات الحياتية للنصوص الموجودة في مربعات حوار التأكيد التي يمكنك إخراجها من هذه المقالة؟ دعونا نلخص



:

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

تفسير:

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

أزرار:

• في نصوص الأزرار ، استخدم إجابات السؤال في العنوان.
• أضف اسم إجراء إلى الزر الرئيسي - على سبيل المثال ، "نعم ، خروج." من الأفضل أن تتطابق مع فعل العنوان.

و كذلك:

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

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









وفي إحدى النسخ ، تخلصنا من الصياغات المرهقة في الحوارات:

المكافأة: أفكار من تجربة شخصية

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

• , . RX 3.5. . .
  
  
  
  
  
  
  
  
  
  
  
  , : , «». .
• – , , .
  
  
  
  
  
  
  
  
  
  
  
  , – , .
• , . : «» «», «» – «». «».
• :
  
  
  • «», «» «», «» ;
  • abort, kill, terminate – end;
  • failed, unable – cannot;
  • bad – incorrect;
  • invalid – is not valid.
  
  
  , : « …» – , . , ?

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



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