هل أستخدم مكوّنات المنصّة الأصلية أم واجهة مخصّصة؟

المكوّنات الأصلية تمنحك سلوكًا يعرفه الناس مسبقًا، ويمكن أن تنعكس تلقائيًّا للغات التي تُكتب من اليمين إلى اليسار. والطريق المعقول لمعظم المنتجات أن يبقى التنقّل وعناصر التحكّم أصلية، وأن تظهر العلامة التجارية في الألوان والخطوط والصور والكلمات.

ما الذي يتغيّر حين تكون الواجهة من اليمين إلى اليسار؟

حدّد الاتجاه في الترميز نفسه لا في CSS، واعكس التنقّل وأشرطة التقدّم والأيقونات التي تدلّ على الاتجاه، واترك الأرقام والشعارات والعلامات العالمية والصور كما هي. وقرّر لكل سوق هل تستخدم الأرقام الغربية أم العربية المشرقية.

العودة إلى المدونة

نصيحة تصميم١ نوفمبر ٢٠٢٦٥ دقائق قراءة

كيف تختار الواجهة المناسبة لمنتجك؟

Q: ما هو «قانون ياكوب»؟

ملاحظة ياكوب نيلسن أن المستخدمين يقضون معظم وقتهم في مواقع أخرى، فيتوقّعون أن يعمل موقعك مثل المواقع التي يعرفونها. لذلك يُفضَّل وضع العناصر المألوفة حيث يبحث عنها الناس عادةً.

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

$غلاف «كيف تختار الواجهة\nالمناسبة لمنتجك؟»: ثلاثة هواتف تعرض تصاميم مختلفة للشاشة نفسها، والأوسط محدّد بإطار أزرق وعلامة صواب.$

سائق توصيل يتفقّد عنوان الطلب التالي بإبهام واحد، واقفًا تحت شمس قويّة بين محطّتين. وفي المكتب الرئيسي، يتابع مدير العمليات الطلبات نفسها على شاشة عريضة طوال اليوم. البيانات واحدة، والواجهتان مختلفتان، وكلٌّ منهما صحيحة لشخص مختلف في مكان مختلف.

ابدأ من المستخدمين والسياق والمهام

اختيار الواجهة يبدأ قبل الألوان والمكوّنات بكثير. يقولها دليل الخدمات الحكومية في المملكة المتحدة (GOV.UK Service Manual) بوضوح: من دون أن تفهم من هم مستخدموك وما الذي يحتاجون إليه «لا يمكنك أن تبني الشيء الصحيح». ويقترح أن تتعرّف على من هم مستخدموك، وما الذي يحاولون إنجازه، وكيف ينجزونه اليوم، وأين يتعثّرون.

وعمليًّا، اسأل:

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

أعراف المنصّة أم واجهة مخصّصة؟

لكل منصّة قواعدها المنشورة. تشرح إرشادات Apple للواجهات (Human Interface Guidelines) كيف تستخدم مكوّنات النظام وتخصّصها لتمنح الناس «تجربة مألوفة ومتّسقة»، وكيف تبني تطبيقًا يبدو «في بيته» على كل منصّة. فعلى iPhone مثلًا، تطلب Apple أن يتمكّن الناس من السحب للرجوع إلى الخلف. وعلى Android، يأتي Material Design 3 من Google مدمجًا في Jetpack Compose، ومعه «الألوان الديناميكية» التي تستمدّ ألوان التطبيق من خلفيّة شاشة المستخدم في Android 12 وما بعده.

المكوّنات الأصلية (native) تمنحك الكثير مجانًا: سلوكًا يعرفه الناس مسبقًا، ومكوّنات يمكن أن تنعكس تلقائيًّا للغات التي تُكتب من اليمين إلى اليسار، كما توضّح Apple. أمّا الواجهة المخصّصة بالكامل فتُبرز العلامة التجارية، لكنك ستعيد بناء كل ذلك وصيانته بنفسك.

والطريق الوسط المعقول لمعظم المنتجات: أبقِ التنقّل وعناصر التحكّم والإيماءات أصلية، وعبّر عن العلامة التجارية بالألوان والخطوط والصور والكلمات.

التصميم من اليمين إلى اليسار وللعربية

الاتجاه من اليمين إلى اليسار (RTL) أكثر من مجرّد محاذاة النص إلى اليمين:

حدّد الاتجاه من الجذر. توصي W3C بإضافة السمة dir بالقيمة rtl إلى عنصر html في الصفحة، وتقول: «لا تستخدم CSS أبدًا لتحديد الاتجاه الأساسي». وفي الحقول التي يكتب فيها الناس، تترك القيمة auto للمتصفّح أن يكتشف الاتجاه. وعلى Android، استخدم start وend بدل left وright، وفعّل android:supportsRtl في ملف التطبيق (manifest).
اعكس ما له اتجاه. تطلب Apple عكس عناصر التنقّل، فيشير زرّ الرجوع إلى اليمين، وكذلك أشرطة التقدّم والأيقونات التي تدلّ على اتجاه القراءة أو الحركة.
واترك الباقي كما هو. أرقام الهواتف والبطاقات تحافظ على ترتيب أرقامها. والشعارات، والعلامات العالمية مثل علامة الصحّ، والأشياء الواقعية مثل الساعات، والصور الفوتوغرافية، لا تُعكس.
اختر نظام الأرقام. تشير Apple إلى أن النص العربي قد يستخدم الأرقام الغربية (1، 2، 3) أو الأرقام العربية المشرقية (١، ٢، ٣)، بحسب البلد والمنطقة. قرّر لكل سوق والتزم بقرارك.
احترم طبيعة الخط. العربية خطّ متّصل: تتّصل الحروف ويتغيّر شكلها بحسب موقعها في الكلمة، كما توضّح وثيقة W3C لمتطلّبات تخطيط النصوص العربية والفارسية. اختر خطًّا صُمّم للعربية على الشاشات. وحين يجاور النصُّ العربي نصًّا لاتينيًّا بأحرف كبيرة، تقترح Apple تكبير العربي بنحو نقطتين ليبدو الاثنان متوازنين.

الكثافة وإمكانية الوصول والألفة

الكثافة هي مقدار ما تتّسع له الشاشة. يعتمد Material Design كثافة منخفضة افتراضيًّا، ويتيح كثافة أعلى «حين تحسّن تجربة المستخدم»، خصوصًا في القوائم والجداول والنماذج الطويلة. وتنبّه وثائق مكوّناته للويب إلى أن تطبيق الكثافة يلغي مساحات اللمس القياسية، لذا يجب أن تكون الكثافة العالية اختيارًا مقصودًا.

إمكانية الوصول هي الحدّ الأدنى الذي لا تنزل تحته. في المستوى AA، تطلب معايير WCAG 2.2 من W3C نسبة تباين لا تقلّ عن ٤٫٥:١ للنص العادي و٣:١ للنص الكبير، ونصًّا يمكن تكبيره إلى ٢٠٠٪ دون أن يضيع شيء من المحتوى، وتخطيطًا يعمل على عرض ٣٢٠ بكسل CSS دون تمرير في اتجاهين.

الألفة هي العامل الهادئ. لاحظ ياكوب نيلسن عام ٢٠٠٠ أن «المستخدمين يقضون معظم وقتهم في مواقع أخرى»، فيتوقّعون أن يعمل موقعك مثل المواقع التي يعرفونها. وتسمّي NN/g ذلك «قانون ياكوب» (Jakob’s law). ضع البحث وسلّة المشتريات والقائمة حيث يبحث عنها الناس عادةً، واحتفظ بالتجديد لما يميّز منتجك فعلًا.

اختبر قبل أن تلتزم

لست بحاجة إلى منتج مكتمل لتعرف إن كانت الواجهة تعمل. يصف نيلسن النماذج الورقية (paper prototyping) بأنها «من أسرع التقنيات وأقلّها كلفة» في عملية التصميم، والنموذج القابل للنقر في Figma يؤدّي الغرض نفسه.

وكم شخصًا تحتاج؟ يشير نموذج نيلسن إلى أن خمسة مستخدمين يكشفون نحو ٨٥٪ من مشكلات قابلية الاستخدام، وأن ثلاث جولات من خمسة أشخاص، مع إصلاحات بينها، تعلّمك أكثر من جولة واحدة من خمسة عشر. وإن كان جمهورك فئات مختلفة، فاختبر ثلاثة أو أربعة أشخاص من كل فئة. وفي المنتج العربي، يعني ذلك مستخدمين يتحدّثون العربية، على أجهزتهم، في ظروف قريبة من الاستخدام الحقيقي. وإن بدا اتجاهان مقنعين معًا، فاختبر الاثنين بالمهام نفسها.

ما تأخذه معك

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