Skip to main content

التسميات (Labels)

التسميات هي نصوص صغيرة لكنها بالغة الأهمية في الطباعة وتصميم UX/UI، حيث توفر السياق وتوجه المستخدمين.

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

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

مثلاً، عندما يتم وضع التسمية “الاسم الأول” بجانب حقل الإدخال في نموذج، يعرف المستخدم بوضوح المعلومات المطلوبة.

تعليقات الصور (Image captions)

تعليقات الصور تعمل على توفير السياق والمعنى للصور في التصميم، تساعد في فهم المحتوى وتحسين القراءة.

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

تعليقات الصور تعزز الفهم وتوفر تفاصيل إضافية قد لا تكون واضحة من الصورة بمفردها.

مثلاً، إذا كان هناك صورة لشخص يستخدم تطبيقا معينا على الهاتف في مقالة عن تصميم التطبيقات، يمكن أن يكون التعليق “مستخدم يتفاعل مع تطبيق XYZ على هاتفه الذكي.”

الميكروكوبي (Microcopy)

الميكروكوبي هو النص الصغير المستخدم في الواجهة التي توجه وتساعد المستخدمين في التفاعل مع المنتج.

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

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

مثال على الميكروكوبي هو النص الذي يظهر عندما يضع المستخدم مؤشر الماوس فوق زر معين، مثل “انقر هنا لتحميل الملف.”

رسائل الخطأ (Error messages)

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

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

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

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

الدعوات للعمل (Calls to action)

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

الدعوات للعمل، أو CTA بالإنجليزية (Call To Action)، هي عبارات أو أزرار تحث المستخدمين على اتخاذ إجراء معين، مثل “اشتر الآن”، أو “اشترك في النشرة الإخبارية”. يجب أن تكون الدعوات للعمل واضحة وملفتة للنظر، ويجب أن توفر فكرة واضحة عن ما سيحدث عند النقر عليها.

دعوات العمل الجيدة تعزز معدلات التحويل وتحقق الأهداف التجارية للموقع أو التطبيق.

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

التلميحات والنصوص المساعدة (Tooltips & helper text)

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

التلميحات (Tooltips) هي نصوص قصيرة تظهر عندما يمر المستخدم بالمؤشر فوق عنصر واجهة المستخدم. وغالبًا ما تستخدم لتوفير توضيحات إضافية أو للمساعدة في التوجيه.

النصوص المساعدة (Helper Text) تظهر عادة بجوار أو أسفل حقول الإدخال لتقديم المزيد من الإرشادات أو القواعد التي يجب أن يتبعها المستخدم.

التلميحات والنصوص المساعدة تحسن تجربة المستخدم بتوفير التوجيهات والإرشادات اللازمة عند الحاجة.

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

النصوص الفرعية والمعلومات الفوقية (Bylines & meta information)

النصوص الفرعية والمعلومات الفوقية توفر معلومات إضافية حول المحتوى، مثل الكاتب والتاريخ والوقت.

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

المعلومات الفوقية (Meta Information) هي معلومات إضافية حول المحتوى، مثل التاريخ والوقت، العلامات، الفئات، أو أي معلومات أخرى ذات صلة.

النصوص الفرعية والمعلومات الفوقية تزيد من وضوح المحتوى وتقدم معلومات إضافية تساعد القارئ على فهم السياق.

مثال على النصوص الفرعية هو “كتب بواسطة محمد على يوم 12 يوليو 2023”. مثال على المعلومات الفوقية هو “نشرت في 12 يوليو 2023، في فئة التصميم، بواسطة محمد على”.

الخاتمة

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

الأسئلة المتكررة (FAQ)

ما هو المقصود بالميكروكوبي؟

الميكروكوبي (Microcopy) هو النص الصغير الذي يوجه ويعلم المستخدمين داخل الواجهة. مثل النصوص التي تظهر على الأزرار، رسائل الخطأ، التلميحات، وأمثلة البيانات.

كيف يمكنني تحسين رسائل الخطأ في واجهة المستخدم الخاصة بي؟

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

ما هي أفضل الممارسات لصياغة الدعوات للعمل (CTA)؟

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

كيف يمكن استخدام التلميحات والنصوص المساعدة بشكل فعال؟

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

ما هو الغرض من النصوص الفرعية والمعلومات الفوقية؟

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

تصميم ترقيم الصفحات في واجهة المستخدم
التعريف بالترقيم الصفحات في واجهة المستخدم
تصميم ترقيم الصفحات في واجهة المستخدم

تصميم ترقيم الصفحات في واجهة المستخدم

اكتشف عناصر الترقيم الصفحات في تصميم واجهة المستخدم وكيف يمكن استخدامها لتبسيط تنقل المستخدم وتحسين…
كيفية تطبيق الفضاءات الفارغة في التصميم
كيفية تطبيق الفضاءات الفارغة في التصميم
كيفية تطبيق الفضاءات الفارغة في التصميم

كيفية تطبيق الفضاءات الفارغة في التصميم

تعلم كيفية تطبيق المسافة الفارغة (Negative Space) في التصميم بشكل فعّال لإنشاء تكوينات نظيفة ولها…
وحدات الطول في CSS
وحدات الطول في CSS
وحدات الطول في CSS

وحدات الطول في CSS

في هذا المقال، سنستعرض وحدات الطول المستخدمة في CSS، وما هي الخصائص والاستخدامات المشتركة لكل…