يعد محدد اللغة عنصرًا مهمًا يجب عليك الانتباه إليه جيدًا عند إنشاء موقع ويب متعدد اللغات لأن محوّل اللغة هو ما سيزوره المستخدمون غالبًا عندما يريدون تبديل اللغات.
يمكن أن يوفر زر تبديل اللغة الفعال العديد من الفوائد لموقع الويب، بدءًا من زيادة تحسين الويب وحتى زيادة المبيعات.
سنناقش في هذه المقالة أفضل الممارسات لتصميم محددات اللغة. دعونا نناقش الأمر أكثر في المقالة التالية.
ما هو محدد اللغة؟
محدد اللغة هو عنصر أو ميزة في واجهة المستخدم تتيح للمستخدمين تحديد اللغة التي يرغبون في التفاعل بها مع موقع ويب أو تطبيق أو أي نظام أساسي رقمي. وهي موجودة بشكل شائع على مواقع الويب والتطبيقات البرمجية والواجهات الرقمية الأخرى لتناسب المستخدمين الذين يتحدثون لغات مختلفة.
يعرض محدد اللغة عادةً قائمة باللغات المتاحة، ويمكن للمستخدم تحديد اللغة التي يختارها من تلك القائمة. بمجرد التحديد، سيتم عرض محتوى الواجهة، بما في ذلك النصوص والتسميات وأحيانًا الصور، باللغة المحددة. وهذا مهم بشكل خاص لمواقع الويب والتطبيقات التي تخدم جمهورًا عالميًا أو قاعدة مستخدمين متنوعة.
تساهم محددات اللغة في تحسين تجربة المستخدم من خلال جعل المحتوى الرقمي في متناول جمهور أوسع، بغض النظر عن مستوى مهاراتهم اللغوية. فهي عنصر أساسي في الجهود المحلية، مما يسمح للمطورين والمصممين بتكييف منتجاتهم مع السياقات اللغوية والثقافية المختلفة.
لماذا تحتاج إلى تخصيص محوّل اللغة الخاص بك؟
إن تخصيص محوّل اللغة على موقع ويب متعدد اللغات له فوائد عديدة مهمة.
- محاذاة العلامة التجارية والنمط المرئي: من خلال تخصيص محوّل اللغة، يمكنك التأكد من أن شكل ونمط اللغة المستخدمة يتوافقان مع العلامة التجارية لموقع الويب الخاص بك والأسلوب المرئي. يمكنك تخصيص أزرار أو قوائم تبديل اللغة لتناسب التصميم العام لموقع الويب الخاص بك، مما يؤدي إلى تحقيق الاتساق في تجربة المستخدم.
- تحكم أكبر في اللغات المعروضة: في بعض الأحيان، قد ترغب في تقييد لغات معينة يتم عرضها في محوّل اللغة. على سبيل المثال، قد يكون لديك نسخة محدودة من موقع الويب الخاص بك بعدة لغات، وتريد فقط عرض تلك اللغات في محوّل اللغة. ومن خلال تخصيص محوّل اللغة، يمكنك اختيار اللغات التي يتم عرضها، مما يمنحك المزيد من التحكم في المحتوى المتاح.
- تجربة مستخدم محسنة: من خلال تخصيص محوّل اللغة، يمكنك إنشاء تجربة مستخدم محسنة. على سبيل المثال، يمكنك ضبط تخطيط أو موضع محوّل اللغة لتسهيل العثور عليه على المستخدمين. يمكنك أيضًا إضافة ميزات مثل الإشعارات أو تعليمات تبديل اللغة التي تساعد المستخدمين على فهم كيفية استخدام الميزة بسهولة.
- تلبية احتياجات المستخدمين المختلفة: لكل مستخدم تفضيلات لغة مختلفة. ومن خلال تخصيص تبديل اللغة، يمكنك تلبية احتياجات المستخدمين من خلفيات لغوية مختلفة. يمكن أن يشمل ذلك المستخدمين المحليين، أو الزوار الدوليين، أو المستخدمين الذين يشعرون براحة أكبر عند التحدث بلغة مختلفة.
- زيادة تحويل المبيعات: يمكن أن يوفر التخصيص المناسب لمحول اللغة أيضًا فائدة زيادة تحويل المبيعات. لأن محوّل اللغة الفعال يمكن أن يوفر راحة المستخدم عند التفاعل مع موقع الويب الخاص بك. وفقًا لبيانات CSA Research، قال 72.4% من المستهلكين أنهم سيكونون أكثر عرضة لشراء المنتجات التي تحتوي على معلومات بلغتهم الخاصة. لذلك من المستحيل أن يرتفع مستوى مبيعاتك أيضًا.
أنواع مختلفة من محدد اللغة
من المؤكد أن كل مالك موقع ويب سوف يفكر بعناية في الشكل الذي يبدو عليه محدد اللغة الخاص به، وسيكون لكل موقع بالطبع تفضيلات مختلفة. بالنسبة لأولئك منكم الذين يبحثون عن نوع محدد اللغة الذي يمكن استخدامه، فإليك بعضًا منهم.
زر اللغة
يعد هذا أحد الأنواع الشائعة الاستخدام لمحولات اللغة. يكون زر اللغة عادةً رمزًا أو نصًا يشير إلى اللغة المعروضة، على سبيل المثال، "EN" للغة الإنجليزية أو علم دولة لتمثيل لغة معينة. عندما ينقر المستخدمون على زر اللغة، ستتم إعادة توجيههم إلى إصدار موقع الويب باللغة المناسبة.
بالنسبة لأزرار اللغة، يوصى بعرض عدد محدود من اللغات لتجنب العرض المزدحم. بشكل عام، وجود أكثر من 4 إلى 5 لغات يمكن أن يخلق تأثيرًا بصريًا مزدحمًا. من المهم وضع الزر في مكان مرئي حتى يتمكن المستخدمون من العثور عليه بسهولة. وسنناقش هذه الجوانب بشكل أكبر في القسم التالي من هذه المقالة.
قد تكون أزرار اللغة مناسبة للشركات التي تستهدف أسواقًا معينة أو تخدم المجتمعات الدولية في مواقع معينة. فيما يلي مثال على استخدام زر اللغة الموجود على موقع منظمة الصحة العالمية.
رابط النص
الروابط النصية هي أحد أنواع محوّلات اللغة التي تستخدم النص في شكل اسم اللغة كرابط. على سبيل المثال، يمكنك عرض روابط نصية مثل "الإنجليزية" أو "الفرنسية" أو "الإسبانية" التي تنقل المستخدمين إلى إصدار موقع الويب باللغة المحددة. عادةً ما يتم وضع هذا الرابط النصي في قائمة أو قائمة منسدلة لتسهيل على المستخدمين تحديد اللغة المطلوبة.
يتم استخدام نوع واحد من محددات لغة الارتباط من قبل شركة Facebook الكبيرة، بالإضافة إلى اللغات المدرجة، يمكنك أيضًا الضغط على أيقونة (+) للعثور على المزيد من اللغات.
بعد ذلك، سيتم ترجمة الصفحة على الفور إلى اللغة المحددة مسبقًا.
قائمة الاختيار
قائمة التحديد هي نوع من محولات اللغة التي تستخدم قائمة منسدلة أو قائمة مفتوحة لتحديد لغة. عندما ينقر المستخدمون على قائمة الخيارات، ستظهر لهم قائمة باللغات المتاحة ويمكنهم تحديد اللغة المطلوبة. يمكن أن تحتوي قائمة الخيارات على أيقونات أو أعلام البلدان كمؤشرات للغة، بالإضافة إلى أسماء اللغات في النص.
تختلف قائمة الاختيار تمامًا عن زر اللغة، وهذا النوع أكثر تعقيدًا من مجرد زر. مثل المثال أدناه الذي يأتي من موقع بورشه.
أنها توفر موقع ويب محدد اللغة حيث يمكن للمستخدمين كتابة لغتهم أو بلد الوجهة مباشرة.
المنسدلة مقابل القائمة مقابل المنبثقة: ما هي الأفضل؟
يعد اختيار نموذج التفاعل المناسب لمحدد لغتك أمرًا ضروريًا لتقديم تجربة مستخدم سلسة وبديهية. كل طريقة-سواء كانت المنسدلة أو القائمة المضمنة أو المنبثقة ، توفر مزايا مختلفة اعتمادًا على تخطيط موقع الويب الخاص بك وعدد اللغات المدعومة وسلوك المستخدم. فيما يلي مقارنة بين نماذج التفاعل الرئيسية الثلاثة لاختيار اللغة ، مع التركيز على سياق UX ، إمكانية الوصول ، وسياق التنفيذ.
يكتب | Strenghts | القيود | أفضل حالة استخدام |
اسقاط | مضغوط ، نظيف ، قابل للتطوير ، مع العديد من اللغات | يتطلب التفاعل (النقر/النقر) ، قد لا يكون واضحًا لجميع المستخدمين | مواقع الويب متعددة اللغات مع قيود المساحة |
قائمة النص | مرئي دون تفاعل ، وصول أسرع للغات الرئيسية | يمكن أن تشوش واجهة المستخدم ، غير قابلة للتطوير للعديد من اللغات | مواقع مع 2-4 خيارات اللغة الأولية |
يظهر فجأة | يمكن أن تشمل حقل بحث وتصميم واجهة المستخدم المرنة | قد يعطل تدفق المستخدم ، ويحتاج إلى زر إغلاق واضح وسهولة الوصول إليه | المواقع العالمية مع 10 لغات |
أفضل الممارسات والنصائح الخاصة بمحدد اللغة
يتضمن تصميم محدد لغة فعال تقديم تجربة سلسة في جميع الأجهزة وضمان إمكانية الوصول للمستخدمين من خلفيات مختلفة. مع وجود جمهور عالمي متزايد ، يجب أن يكون Switcher لغتك بديهية ، ويمكن الوصول إليه ، واستجابة لضمان أن يتمكن المستخدمون من التفاعل بشكل مريح في لغتهم المفضلة.
فيما يلي أفضل الممارسات التي يمكنك تطبيقها للتأكد من أن محدد لغتك واضح ومريح ويمكن الوصول إليه لجميع المستخدمين.
إعطاء الأولوية للتصميم المستجيب
معظم المستخدمين يصلون إلى مواقع الويب من الأجهزة المحمولة ، لذلك يجب أن يكون محدد لغتك مستجيبة وصديقة للهاتف المحمول. تأكد من سهولة النقر على الزر أو القائمة ، ولا يغطي محتوى مهمًا ، ولا يزال مرئيًا على الشاشات الأصغر.
على سبيل المثال ، يبدو موقع محدد اللغة هكذا.
بعد ذلك ، عند النظر من جانب الهاتف المحمول ، لا يزال من الممكن الوصول إلى محدد اللغة بسهولة ولا يتحرك أو يختفي.
استخدم المنسدلة أو القوائم القابلة للتوسيع للحفاظ على التصميم مرتبة ، وضمان أن أهداف اللمس لديها تباعد كافي للتفاعل المريح. يساعد هذا المستخدمين على اختيار لغتهم المفضلة بسهولة دون الإحباط الناجم عن عناصر ضيقة أو يصعب النقر.
وضع مدروس في الواجهة
ضع محدد اللغة في المناطق المتوقعة للغاية ، مثل الزاوية اليمنى العليا من الرأس أو التذييل السفلي. هذه مواقع بديهية حيث يبحث المستخدمون عادة عن خيارات اللغة.
تجنب إخفاء المحدد داخل الرموز الغامضة أو القوائم الثانوية. حافظ على وضعه متسقًا في جميع الصفحات حتى يتمكن المستخدمون الذين يقومون بتبديل اللغات بشكل متكرر بسهولة في أي وقت.
استخدام سمات إمكانية الوصول (ARIA)
للتأكد من أن محدد لغتك في متناول المستخدمين ذوي الإعاقة ، استخدم سمات ARIA (تطبيقات الإنترنت الغنية التي يمكن الوصول إليها) مثل ARIA-LABEL و AIA-HASPOPUP و ARA-Expanded. تساعد هذه التقنيات المساعدة مثل قراء الشاشة على فهم دور العنصر ووظائفه.
يفي بتنفيذ إمكانية الوصول إلى معايير WCAG ويضمن أن موقعك شامل وقابل للاستخدام من قبل جمهور أوسع. يفيد التصميم الشامل للجميع ، وليس فقط المستخدمين ذوي الاحتياجات المحددة.
استخدم ملصقات لغة واضحة ومعروفة
عرض كل خيار لغة باستخدام التسمية الأصلية ، على سبيل المثال ، "Español" بدلاً من "الإسبانية" أو "Deutsch" بدلاً من "الألمانية". يتيح ذلك للمستخدمين التعرف بسرعة على لغتهم المفضلة ، حتى لو لم يفهموا لغة الموقع الحالية.
تعد الملصقات الأصلية أكثر شمولاً وتقلل من الحمل المعرفي ، خاصة بالنسبة للمستخدمين الدوليين. تجنب استخدام اختصارات غامضة أو رموز اللغة ما لم يعرفها جمهورك.
تجنب التحميل الزائد مع العديد من الخيارات
إن إظهار الكثير من خيارات اللغة في وقت واحد يمكن أن يفسد الواجهة ويشعل المستخدمين. عرض فقط اللغات الأكثر صلة أو شائعة الاستخدام أولاً ، وقم بوضع الباقي في قائمة منسدلة أو تحت قسم "المزيد من اللغات".
هذا يبقي الواجهة نظيفة ويحسن قابلية الاستخدام ، وخاصة على الهاتف المحمول. استخدم تحليلات مرور الموقع لتحديد اللغات التي يجب إعطائها أو إخفاءها.
استخدم الرموز المناسبة والإشارات المرئية (دون الاعتماد على الأعلام)
تساعد الإشارات المرئية مثل أيقونات Globe (🌐) أو الأسهم الهابطة (▾) أو الحالة النشطة على مساعدة المستخدمين على فهم أن عنصر ما قابل للنقر. ومع ذلك ، تجنب استخدام الأعلام الوطنية لتمثيل اللغات ، حيث يمكن التحدث بلغة واحدة في بلدان متعددة.
قد تحمل الأعلام أيضًا آثار ثقافية أو سياسية. إذا كنت تستخدم الصور المرئية ، فقم بإقرانها مع ملصقات نصية لضمان الوضوح ، والحفاظ على الرموز متسقة ومحايدة ثقافياً عبر تصميمك.
ابق متسقًا مع تصميم موقع الويب والعلامات التجارية
يجب أن يتوافق محدد لغتك بصريًا مع النمط العام لموقع الويب الخاص بك. سواء أكان استخدام الأزرار أو الروابط النصية أو الرموز ، تأكد من أن الطباعة والألوان وحالات التحويم تتطابق مع علامتك التجارية. هذا يحسن الثقة ويعزز تجربة المستخدم.
إذا كنت تقوم ببناء محدد مخصص ، فاختبره عبر متصفحات وأجهزة مختلفة لضمان عملها على النحو المقصود. يساهم التصميم المتسق والوظائف الموثوقة في رحلة مستخدم متعددة اللغات سلسة.
ضبط محدد اللغة باستخدام Linguise في 7 خطوات
في هذه المرحلة، أنت تعرف أفضل الممارسات لمحددات اللغة. يمكن إجراء هذه الترجمة بعد استخدام خدمة ترجمة الموقع الإلكتروني. ومع ذلك، لا توفر كافة خدمات الترجمة المرونة في إعدادات محدد اللغة.
لكن لا داعي للقلق لأن Linguise ليس كذلك. Linguise هي خدمة ترجمة آلية توفر للمستخدم إمكانية تخصيص محوّل اللغة. تتضمن بعض الفوائد التي ستحصل عليها عند استخدام Linguise .
- يمكن استخدام Linguise ودمجه في أكثر من 40 نظام إدارة محتوى ( WordPress ، Joomla ، Drupal ، إلخ).
- سيتم إجراء الترجمة إلى مختلف اللغات تلقائيًا خلال ثوانٍ فقط بعد إضافة اللغة إلى محوّل اللغة الموجود على الموقع.
- هناك أكثر من 80+ لغة متاحة يمكن إضافتها إلى محدد اللغة.
- Linguise تلقائيًا بإعداد عنوان URL فريد وفقًا للغة وجهة الترجمة. على سبيل المثال، عنوان URL linguise .com/de/ للصفحة التي تتم ترجمتها إلى الألمانية.
- سيقوم تلقائيًا بإنشاء عنوان URL أساسي للمساعدة في تجنب المحتوى المكرر في محركات البحث عندما يكون لديك اختلافات لغة في الصفحة.
- يمكنك إعداد محوّل اللغة بمرونة وفقًا لاحتياجات موقع الويب، بدءًا من الأيقونة واللون وحتى اسم اللغة.
- يمكنك عرض إحصائيات عرض صفحة الزائر لكل لغة، لكل لغة تمت إضافتها إلى محدد اللغة.
في هذا البرنامج التعليمي، سوف نستخدم WordPress كمثال لنظام إدارة المحتوى (CMS) المستخدم.
الخطوة 1: تسجيل حساب Linguise المجاني
للوصول إلى محوّل اللغة على Linguise ، الخطوة الأولى التي يتعين عليك القيام بها هي تسجيل حساب على Linguise . Linguise أيضًا نسخة تجريبية مجانية مدتها شهر واحد، تتضمن مجموعة متنوعة من الميزات التي يمكنك الاستفادة منها.
الخطوة 2: أضف المجال إلى موقع الويب الخاص بك متعدد اللغات
الخطوة الثانية هي إضافة نطاق موقع الويب في Linguise الذي تمتلكه بالفعل إلى Linguise . هناك العديد من الأشياء التي تحتاج إلى ملؤها، بدءًا من.
- حساب
- عناوين URL
- منصة
- لغة
- لغة الترجمة
- ترجمة عنوان URL
بعد ذلك، تحتاج إلى تنشيط مفتاح API وتعيين عنوان URL للغة. للحصول على دليل كامل لإضافة نطاق موقع ويب، يمكنك قراءة الوثائق، بينما يمكنك الاطلاع عليها WordPress تثبيت Linguise الترجمة التلقائية على WordPress أو مشاهدة الفيديو التعليمي أدناه.
الخطوة 3: تثبيت البرنامج المساعد Linguise
بعد إضافة موقع ويب بنجاح، افتح WordPress وقم بتثبيت Linguise ، قم بذلك عن طريق المكونات الإضافية > إضافة جديد > Linguise > التثبيت > التنشيط.
إذا كان المكون الإضافي مثبتًا بالفعل، فانتقل إلى لوحة تحكم Linguise وانسخ مفتاح API.
ثم افتح ملحق Linguise والصق رمز API الذي حصلت عليه من لوحة تحكم Linguise في العمود التالي.
الخطوة 4: إعداد الشاشة الرئيسية
لتكوين محوّل اللغة أو عرض أعلام اللغة، يتم تنفيذ الخطوات عبر Linguise في قائمة الإعدادات > عرض أعلام اللغة.
أثناء الإعداد الأولي، سنقوم بإجراء تعديلات على الشاشة الرئيسية، مع مراعاة المكونات المختلفة.
أحد الاعتبارات الأولية هو تكوين تنسيق عرض قائمة اللغات، والذي يوفر ثلاثة خيارات للاختيار من بينها: جنبًا إلى جنب، أو القائمة المنسدلة، أو النافذة المنبثقة. على الجانب الأيسر، يوجد عرض معاينة لكل تنسيق.
التنسيق الأول، كما هو موضح أدناه، هو تخطيط جنبًا إلى جنب.
يعتمد التنسيق التالي نمط القائمة المنسدلة، كما هو موضح في الصورة أدناه.
وأخيرًا، لدينا تنسيق النافذة المنبثقة كخيار نهائي.
بعد ذلك، ننتقل إلى الخطوة التالية، والتي تتضمن تكوين موضع محوّل اللغة. لديك المرونة في الاختيار من بين خيارات الموضع المختلفة، لذلك من المهم تحديد موضع يمكن للزائرين ملاحظته بسهولة.
وأخيرًا، يتعين عليك تحديد تفضيل المجموعة لعرض خيارات اللغة. يمكنك الاختيار بين خيارات مثل العلم + اسم اللغة، أو العلم + الاسم المختصر، أو ببساطة عرض العلم وحده. سيعتمد هذا القرار على تفضيلاتك التصميمية المحددة وتفضيلات جمهورك المستهدف.
الخطوة 5: تعيين تصميم العلم
بعد ذلك، أسفل قسم العرض الرئيسي، ستصادف تكوينات التصميم المخصصة للعلم. توضح الصورة المقدمة أدناه بعض خيارات الإعداد المتاحة.
- عرض اسم اللغة : لديك خيار عرض اسم اللغة بناءً على البلد أو اللغة نفسها. على سبيل المثال، يمكنك اختيار عرض "الألمانية" أو "الألمانية".
- نوع العلم الإنجليزي: ينطبق هذا الخيار عند التعامل مع اللغات التي لها تنوعات متعددة، مثل "الإنجليزية الأمريكية" أو "بريطانيا الإنجليزية". يمكن إجراء اختيارات مماثلة للغات مثل الإسبانية والتايوانية والألمانية والبرتغالية.
- نمط العلم: يمكّنك هذا الإعداد من تحديد شكل أيقونة العلم سواءً كانت مستديرة أو مربعة (مستطيلة).
الخطوة 6: ضبط لون وحجم العلم
بمجرد إعداد تصميم العلم، تتضمن الخطوة التالية ضبط الألوان والحجم والعناصر الأخرى المتنوعة. في الواجهة التالية، ستجد العديد من الإعدادات القابلة للتخصيص، بما في ذلك:
- علم نصف قطر الحدود: يتيح لك هذا تخصيص نصف قطر الحدود بالبكسل عند استخدام علم مستطيل.
- لون اسم اللغة: يمكنك تحديد لون النص الافتراضي لاسم اللغة.
- لون اللغة المنبثقة: يحدد هذا الإعداد لون عنوان اللغة في المناطق المنبثقة أو المنسدلة.
- حجم العلم: لديك خيار تعديل حجم العلم وفقًا لتفضيلاتك.
- لون تمرير اسم اللغة: يتحكم هذا الإعداد في لون النص عند تحريك الماوس فوق أسماء اللغات.
- لون تمرير اللغة المنبثقة: وبالمثل، يحدد هذا الإعداد لون النص عند تحريك الماوس فوق عنوان اللغة في القائمة المنبثقة أو القائمة المنسدلة.
الخطوة 7: تعيين ظل مربع العلم
في المرحلة النهائية، لديك الفرصة لتخصيص إعدادات الظل للعلم. يتيح لك الإعداد الأولي تحديد ظل لكل علامة معروضة على موقع الويب الخاص بك، بينما يتعلق الإعداد التالي بتأثير الظل عند التمرير فوق علامة اللغة.
تذكر النقر فوق "حفظ " للحفاظ على إعدادات التخصيص التي قمت بإجرائها لمحول اللغة. وهذا يضمن تنفيذ التكوينات التي حددتها لتأثيرات الظل وحفظها لاستخدامها في المستقبل.
بعد تنفيذ جميع التكوينات، إليك مثال على عرض محدد اللغة باستخدام نافذة منبثقة، موضوعة في الزاوية اليمنى العليا، وباستخدام الأحرف الأولى. هذا مجرد مثال، يمكنك تخصيص الباقي حسب رغبتك ووفقًا لاحتياجات الموقع.
بصرف النظر عن WordPress CMS، يمكنك أيضًا استخدام منصات مواقع الويب الأخرى واتباع الدليل التفصيلي مثل محوّل الإعداد لـ OpenCart ، ومحوّل اللغة لـ Drupal ، و Setting Switcher لـ PrestaShop .
صمم محدد اللغة الخاص بك للحصول على تجربة سلسة متعددة اللغات مع Linguise!
لقد اكتسبت هنا نظرة ثاقبة حول أفضل الممارسات لتصميم محددات اللغة وكيفية القيام بذلك باستخدام Linguise! صدقني، إنشاء محول لغة يمكن أن يوفر العديد من الفوائد ويضمن التحسين بناءً على النقاط المذكورة أعلاه.
عند إنشاء أداة تحديد اللغة، تأكد من اتباع النصائح وأفضل الممارسات التي شرحناها أعلاه، بدءًا من استخدام الرموز واختيار اللغات ذات الصلة وحتى تحديد الموضع.
الآن، قم بتسجيل حساب Linguise ، وأضف موقع الويب الخاص بك، وقم بضبط محدد اللغة لتوفير تجربة أفضل للمستخدم. لا تنس تجربة ميزة النسخة التجريبية المجانية لمدة شهر واحد للاستمتاع بميزات Linguise
