كتابة تسميات أزرار واضحة
لماذا تهم التسميات
تسمية الزر هي آخر نص يقرؤه المستخدم قبل التنفيذ، ويجب أن تخبره بما سيحدث. التسميات الغامضة تجبر الناس على التخمين، والتخمين يقود إلى أخطاء، خاصة في الإجراءات التي لا يمكن التراجع عنها.
وتفيد التسميات من يقرأون بسرعة أيضًا. فكثير من المستخدمين يمسحون الأزرار فقط في الشاشة، لذلك ينبغي أن تحكي الأزرار وحدها قصة المهمة.
أنماط ناجحة
- استخدم فعلًا ومفعولًا به. مثل «حفظ التغييرات» و«إرسال الرسالة» و«أضف إلى السلة».
- فضّل المحدد على العام. «إنشاء حساب» أوضح من «إرسال» أو «موافق».
- سمِّ الإجراءات المدمّرة. «حذف المشروع» يخبر المستخدم بما سيُفقد، أما «تأكيد» العامة فلا تفعل.
- حافظ على الاتساق في المسار. إذا قالت الشاشة الأولى «متابعة» فلا تتحول إلى «التالي» في الثانية للخطوة نفسها.
ما يجب تجنبه
بعض العادات تقلل فائدة التسميات. وهذه أشيعها.
- «اضغط هنا». لا تذكر الوجهة وتفشل مع مستخدمي اللمس وقارئات الشاشة. صف الإجراء أو الوجهة بدلًا منها.
- نعم ولا كإجابات. مع سؤال مثل «تجاهل التغييرات غير المحفوظة؟» تكون الأزرار «تجاهل» و«متابعة التحرير» أوضح من «نعم» و«لا».
- أزواج غير واضحة. كلمة «إلغاء» قد تعني إلغاء الإجراء أو إلغاء الاشتراك. وعندما يحتمل الأمران سمِّ المفعول به، مثل «إلغاء الرفع».
- الأحرف الكبيرة لكل كلمة في الإنجليزية. حالة الجملة أسهل قراءة: ‘Save changes’ وليس ‘Save Changes’.
الطول والترجمة
اجعل التسميات قصيرة بما يكفي لتناسب شاشة هاتف ضيقة دون اقتطاع، عادةً من كلمة إلى ثلاث. واترك مجالًا لنمو النص، فاللغات الأخرى قد تكون أطول.
يمكن للأزرار التي تفتح خطوات إضافية أن تشير إلى ذلك بنقاط الحذف، كما في «تصدير…»، فقط عندما تحتاج الخطوة التالية إلى مدخلات أخرى. ولا تضفها إلى الأزرار التي تنفّذ فورًا.
للترجمة، تجنب التعابير الاصطلاحية والتلاعب بالألفاظ. اكتب كل تسمية عبارة كاملة بدل تركيب أجزاء في الشيفرة، وزوّد المترجمين بملاحظة عن وظيفة الزر.
ويساعد الترتيب والتمييز أيضًا. اجعل الإجراء الآمن المتوقع هو الزر الرئيسي، وأعطِ الإجراء الثانوي نمطًا أهدأ، وأبقِ موضع الأزرار الرئيسية والثانوية ثابتًا عبر الشاشات.
يمكن للأيقونة أن تدعم التسمية لكنها نادرًا ما تحل محلها. الزر المكوّن من أيقونة فقط يحتاج إلى اسم متاح برمجيًا، مثل <code>;aria-label<;/code>;، وتبقى التسمية النصية الظاهرة أوضح للإجراءات الجديدة أو الخطرة.
اقرأ كل تسمية بصوت عالٍ مع سؤالها أو سياقها. وإن لم يكن الإجراء واضحًا فأعد كتابتها.
المصادر
- Nielsen Norman Group. 10 Usability Heuristics for User Interface Design. https://www.nngroup.com/articles/ten-usability-heuristics/
- W3C. Understanding SC 2.4.4: Link Purpose (In Context). https://www.w3.org/WAI/WCAG22/Understanding/link-purpose-in-context.html
صيغ هذا الدليل بمساعدة الذكاء الاصطناعي اعتمادًا على معايير ومراجع عامة. وللنص الدقيق لأي معيار، ارجع إلى المصادر المذكورة أعلاه.