تمت المطالبة بترجمة المقال من قبل الرجال من مجموعة NN من خلال الحاجة إلى إعطاء تعليمات بسيطة ومفهومة للمصممين من فرق المنتج ، والتي يمكن الرجوع إليها إذا لزم الأمر. منذ أن تم نشر المقال في اليوم الآخر ، قررت أن أترجم وأشارك في نفس الوقت مادة مفيدة مع الجميع. بفضل Yura Vetrov لأجل الطرف. يمكن العثور على المقالة الأصلية هنا
Spoiler: يجب أن تنقل عناصر التحكم التي تقوم بالتبديل بين حالتين مختلفتين من النظام بوضوح للمستخدمين الحالة الحالية والحالة التي سيدخلها النظام إذا نقر المستخدم على عنصر التحكم هذا.
في اجتماع WebEx الأخير مع أحد العملاء ، شعرت بالذعر ، معتقدًا أنه لا يمكنني تشغيل الميكروفون. اضطررت إلى تقديم عرض تقديمي مدته 6 ساعات - كيف سأفعل ذلك إذا لم أتمكن حتى من تشغيل الصوت؟ ظللت أقوم بالنقر فوق رمز الميكروفون المشطوب ، ولكن ظل الميكروفون مشطوبًا بغض النظر عما فعلته.
إليك لقطة شاشة:
لوحة التحكم لتطبيق WebEx Desktop:
أعلاه - لا يوجد صوت ؛
أسفل - حالة كتم الصوت
في حالة الذعر ، لم ألاحظ تغيير لون الرمز على الإطلاق! على الرغم من حقيقة أن الميكروفون قد تم عبوره في كلتا الحالتين - وجدت أن اللون الأحمر للرمز يجب أن يشير إلى أن الزر كان نشطًا وتم تعطيله.
لقد رأيت المستخدمين يقعون ضحية لهذه المشكلة عدة مرات. يتم استخدام زر كتم الصوت للتبديل بين حالتي النظام (كتم الصوت وغير مكتوم) ، ولكن المشكلة هي أن المستخدمين لا يمكنهم بسهولة معرفة الحالة التي يتواجدون فيها حاليًا والحالة التي ينتقلون إليها. (أيضًا ، على عكس أفضل ممارسات تصميم الرموز ، يفتقر تطبيق WebEx إلى النص تسمية زر كتم الصوت).
قطعتان من المعلومات واثنين من عناصر التحكم
في حالة حيث يمكن للمستخدمين التنقل بين حالتين محتملتين (دعنا نسميهما تشغيل وإيقاف ، من أجل البساطة) ، هناك نوعان من المعلومات ذات الصلة بالمستخدم ، وعلى الرغم من ارتباطهما ، إلا أنهما ليسا متطابقين:
- الحالة الحالية للنظام - تشغيل أو إيقاف ؛ في المثال مع ميكروفون - كتم الصوت أو إلغاء كتم الصوت ؛
- , — , , ( Unmute Mute).
الطريقة الواضحة لتنفيذها هي الحصول على عنصرين مختلفين لواجهة المستخدم: مؤشر الحالة وزر تغيير الحالة.
على سبيل المثال ، في تطبيق Tesla ، تأخذ شاشة Controls هذا النهج: لديك مؤشر حالة يوضح أن السيارة مقفلة وزر فتح. لا يؤدي النقر فوق مؤشر الحالة إلى أي شيء ، ولكن النقر فوق عنصر التحكم سيفتح قفل السيارة.
Tesla for iPhone:
(يسار) تعمل الأيقونة الموجودة أعلى زر الفتح كمؤشر للحالة ؛ زر Unlock هو زر تبديل حالة يوضح بوضوح ما يحدث إذا نقر المستخدمون عليه.
(يمين) تتغير حالة الزر وتسميته عندما يقوم المستخدم بفتح قفل السيارة.
حالتان للمعلومات ، عنصر تحكم واحد
ومع ذلك ، إذا كان لديك نظام ذو حالتين ، الحالة الحالية وما سيأتي بعد ذلك - يجب أن يكمل كل منهما الآخر. بمعنى آخر ، يمكن افتراض أنه يمكن توصيل قطعتين من المعلومات (الحالة وما يحدث بعد ذلك) باستخدام عنصر تحكم واحد - زر تبديل الحالة. لأنه إذا عرف المستخدمون حالة واحدة (على الأقل من الناحية النظرية) فيمكنهم استنتاج نتيجة نقرة ؛
ومع ذلك ، تذكر أن أي قرار تتخذه يستغرق وقتًا وجهدًا معرفيًا ، وغالبًا ما يكون هناك القليل من الوقت للرد بسرعة. كما في المثال: أحاول تشغيل الميكروفون الخاص بي ، والجميع إما ينتظرني ، أو يتجاهلني ويواصل الحديث ، أي ليس لدي وقت للتوقف والتفكير في الواجهة أو استخلاص النتائج.
في بعض الأحيان يمكن التعرف بسهولة على الحالة من خلال إشارات أخرى. على سبيل المثال ، في مشغل الفيديو ، يوجد عنصر تحكم واحد فقط (الزر "تشغيل") يشير إلى الحالة المستقبلية. ومع ذلك ، هناك إشارات كافية لفهم أن الفيديو قيد التشغيل - يمكن للمستخدم سماع الصوت أو رؤية التغييرات في الصورة على الشاشة.
YouTube: يتم استبدال رمز التشغيل بإيقاف مؤقت أثناء تشغيل الفيديو. يشير الرمز إلى الحالة التي سيدخلها النظام عند الضغط على الزر.
إذا كنت بحاجة إلى استخدام عنصر تحكم واحد للإشارة إلى الحالة وما هو التالي ، كيف يجب أن تشير إليه؟
في هذه الحالة ، يمكن النظر في بديلين:
- , , , , .
. , «», «» « ».
, , , Tesla OBS .
OBS Studio: «Start Recording» «Stop Recording» .
(, ), , . , YouTube . - .
/: , « ». , , , .
Word B () (), , , . .
دعنا نعود إلى مثال WebEx. إذا نظرنا إلى الوراء ، نرى أن WebEx استخدم عنصر تحكم واحد للإشارة إلى كل من الحالة الحالية وما سيحدث بعد ذلك ، ونفذ قرار تصميم ثانٍ - يشير إلى الحالة النشطة. لسوء الحظ ، كان اللون الأحمر كمؤشر نشط اختيارًا سيئًا لعدة أسباب:
- يتم استخدام اللون الأحمر بشكل تعسفي في الواجهة - على سبيل المثال ، الزر X (خروج) باللون الأحمر أيضًا ، وهذا لا يعني أنه نشط. (إذا كان اللون الأحمر يمثل حالة نشطة ، فماذا يعني الصليب الأحمر؟ أنني غادرت الاجتماع بالفعل؟)
- يتم استخدام لون آخر (أزرق) للإشارة إلى الحالة النشطة للأزرار الأخرى ، مثل الفيديو والدردشة (أي ، تشير أيقونة الفيديو الزرقاء إلى تشغيل الفيديو).
في حالة عدم وجود مؤشر واضح للحالة النشطة ، يُترك المستخدم للاعتماد على تسمية الزر لتحديد ما يحدث ، ومع عدم تغيير تسمية الرمز ، سيؤدي ذلك ببساطة إلى حدوث ارتباك.
بالمناسبة ، يستخدم تطبيق الهاتف على iPhone نفس التطبيق ، مع الاختلاف الوحيد أنه أكثر اتساقًا من WebEx ويستخدم تعبئة بيضاء للإشارة إلى الحالة النشطة. حتى مع هذه الإعدادات ، من الصعب تحديد الحالة النشطة للزر.
تطبيق iPhone iPhone: لا يغير زر كتم الصوت رمزه ، ولكنه يشير إلى حالة نشطة بتعبئة بيضاء (على اليسار). بينما يمكن القول إن اللون الأبيض أفضل من اللون المخصص ، إلا أنه ليس مؤشرًا قويًا على حالة نشطة.
التوصيات
إذن ما هي التوصية العامة لأزرار تبديل الحالة التي تعمل كمؤشرات للحالة؟ الحل الأكثر أمانًا هو استخدام عنصري واجهة المستخدم ، أحدهما للحالة الحالية والآخر لإجراء تبديل الحالة ، كما في مثال Tesla.
إذا أردت ، يمكنك الجمع بين الاثنين في عنصر تحكم واحد ، تمامًا كما يفعل Zoom. يتكون التحكم في كتم الصوت من مكونين منفصلين:
- تسمية نصية تشير إلى ما يحدث إذا نقر المستخدم على عنصر التحكم هذا.
- رمز يشير إلى الحالة الحالية للنظام
سيؤدي النقر فوق أي منها إلى تغيير الحالة.
في تصميم Zoom ، يُقصد بالرمز تمثيل الحالة الحالية ، وتشير التسمية إلى ما سيحدث إذا نقر المستخدمون على هذا الزر. النقر فوق رمز أو تسمية يغير الحالة.
تذكر أن هدفك عند التشغيل / إيقاف التشغيل هو التأكد من فهم المستخدمين لكليهما بسرعة:
- الوضع الحالي
- ماذا يحدث إذا نقروا على عنصر التحكم هذا
تقدير الحالتين التي يمر بها النظام.
هل من الواضح أن هاتين حالتين متعارضتين؟
- إذا لم يكن الأمر كذلك ، فإنه يتحدث لصالح التصميم مع عنصري تحكم: أحدهما للحالة الحالية والآخر للإجراء للانتقال إلى حالة أخرى.
- (, , ), , , .
(, , ), ?
- , , ( ) .
- , — .
( Mute)?
- , .
- , .
شكرًا على الوقت واشترك في قناة UXHorn tg ، حيث أنشر باستمرار المقالات الأكثر إثارة للاهتمام حول تجربة المستخدم والبحث.