تصميم المواقع

مبادئ تصميم واجهة المستخدم

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

الدرس 6 من 12
مبتدئ
مجاني، دون تسجيل

الأعمدة الأربعة التي تسند الواجهة

الأعمدة الثلاثة الأولى لها أرقام ويمكن قياسها. والرابع بلا رقم وهو أسهلها فحصاً.

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

التسلسل

أين تقع العين أولاً. الحجم والوزن والموضع واللون. وعمل أساسي واحد في كل شاشة.
التباين

ما الذي يُرى أصلاً. 4.5 إلى 1 على الأقل للنص العادي، بحسب WCAG.
التباعد

ما الذي ينتمي إلى ماذا. التسمية أقرب إلى حقلها منها إلى الحقل التالي.
الثبات

الشيء الواحد يبدو نفسه في كل شاشة، كي لا يتعلمه المستخدم مرتين.

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

آخر مراجعة: ٦ سبتمبر ٢٠٢٦ تُراجع الحقائق وأسماء الأدوات في هذا الدرس مقابل مصادرها في هذا التاريخ.

ما وظيفة واجهة المستخدم أصلاً؟

وظيفة واحدة: أن تجعل الخطوة التالية بديهية. وواجهة المستخدم هي الطبقة التي يراها الشخص ويلمسها، أي الأزرار والنماذج والقائمة والألوان والتباعد. وإذا توقف أحدهم أمام شاشتك وسأل ماذا أفعل الآن، فقد أخفقت الواجهة مهما كانت جميلة.

أربعة أشياء تؤدي هذه الوظيفة وما عداها تفاصيل. التسلسل يقول أين تقع العين أولاً. والتباين يقول ما الذي يُرى أصلاً. والتباعد يقول ما الذي ينتمي إلى ماذا. والثبات يقول إن الشيء الواحد ينبغي أن يبدو نفسه في كل شاشة، كي لا يتعلمه المستخدم مرتين.

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

كتب ياكوب نيلسن عام 1994 عشرة مبادئ عامة لتصميم التفاعل ما زالت مرجعاً، ورابعها هو هذا بالضبط: الثبات والالتزام بالمعايير. اقرأ تلك القائمة مرة واحدة؛ فمعظم النقاشات التي تتكرر اليوم في اجتماعات التصميم كُتبت هناك قبل ثلاثين عاماً.

الإبداع والثبات، وأي صفحة تريد أيهما

لا أحدهما سيئ. والخطأ وضع أحدهما في صفحة كانت تريد الآخر.

موضع الإبداع

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

موضع الثبات

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

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

أين تقع العين أولاً؟

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

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

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

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

التباين والتباعد: الاثنان اللذان يولّدان أكثر الشكاوى

للتباين رقم، وهذا ينهي النقاش. يقول معيار WCAG إن نسبة التباين بين النص وخلفيته يجب ألا تقل عن 4.5 إلى 1، و3 إلى 1 تكفي للنص الكبير. والرمادي الفاتح على أبيض الذي يبدو أنيقاً في معرض أعمال التصميم لا يجتاز هذا الرقم عادةً، وعلى شاشة رخيصة أو تحت الشمس لا يُقرأ إطلاقاً.

وللحجم رقم أيضاً. يقول معيار آخر في المعيار نفسه إن أهداف المؤشر ينبغي ألا تقل عن 24 في 24 بكسل CSS ما لم يكن حولها تباعد كافٍ. وأيقونات الشبكات الاجتماعية في التذييل وزر إغلاق النافذة المنبثقة هما الموضعان اللذان يسقط فيهما هذا دائماً.

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

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

الفارسية: من اليمين إلى اليسار، والأرقام، والنص اللاتيني وسط الجملة

الاتجاه من اليمين إلى اليسار يعني عكس التخطيط كله لا محاذاة النص وحدها. فالقائمة وأيقونات الأسهم وشريط التقدم وترتيب زري التأكيد والإلغاء كلها ينبغي أن تنقلب. والطريقة ليست كتابة ملف CSS ثانٍ للاتجاه المعاكس: استعمل الخصائص المنطقية. margin-inline-start بدل margin-left، وpadding-inline-end بدل padding-right، وtext-align: start بدل right. ويقرأ المتصفح الاتجاه من خاصية dir على وسم html والباقي تلقائي.

والأرقام هي الموضع الثاني الذي تختلف فيه الفارسية. فالأرقام الفارسية مجموعة محارف مستقلة (من U+06F0 إلى U+06F9) وهي الصحيحة في النص الفارسي، لكن أمرين يحتاجان انتباهاً. أولاً أن يحتوي الخط عليها فعلاً، وإلا استعار المتصفح من خط آخر فاختلف شكل الأرقام وارتفاعها فجأة عن بقية الجملة. وثانياً، والأهم، أن لا مدقق قياسي يعدّها أرقاماً أصلاً.

وهذا الثاني فخ حقيقي يظهر في النماذج. ففي جافاسكريبت لا يطابق النمط \d سوى الأرقام اللاتينية من 0 إلى 9، وفي PHP يفعل [0-9] الشيء نفسه. فإذا كتب مستخدم رقم هاتفه بلوحة مفاتيح فارسية ونظّفته أنت بـreplace(/\D/g, "") خرجت السلسلة فارغة تماماً وقال النموذج إن الرقم غير صالح، والمستخدم قد أدخل رقماً سليماً. والحل سطر واحد: حوّل الأرقام الفارسية والعربية إلى لاتينية قبل التحقق. وحيثما أخذت واجهة فارسية مدخلاً رقمياً، ينبغي أن يكون هذا التحويل أول ما يجري.

وثالثاً، النص اللاتيني داخل جملة فارسية. فاسم علامة تجارية أو اسم ملف أو رابط يجلس داخل جملة من اليمين إلى اليسار قد تظهر نقطته أو أقواسه في الجهة الخطأ. لُف المقطع اللاتيني بـ<span dir="ltr"> فيضبط المتصفح حدوده. ولكلمة واحدة لا يلزم ذلك عادةً؛ أما لرابط كامل أو أمر فيلزم.

الأشياء التي لا تنكسر إلا في واجهة فارسية

قائمة فحص الواجهة الفارسيةمن اليمين إلى اليسار

افحص هذه

المدخلات الرقمية تحوّل الأرقام الفارسية قبل التحقق
الخط يحتوي فعلاً على الأرقام الفارسية
أيقونات الأسهم وشريط التقدم معكوسة أيضاً
الروابط والأوامر اللاتينية داخل span بـdir ltr
ترتيب زري التأكيد والإلغاء يُقرأ مع اتجاه الصفحة

لا تفعل هذه

كتابة ملف CSS ثانٍ للاتجاه المعاكس فقط
استعمال margin-left وpadding-right في التخطيط
خلط الأرقام اللاتينية والفارسية داخل جدول واحد
تصغير الخط الفارسي إلى حجم الخط اللاتيني

لا تجد أداة آلية أياً من هذه. أعطِ الصفحة لمن يقرأ الفارسية واطلب منه ملء نموذج.

لماذا يتفوق الثبات على الإبداع في صفحة تبيع

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

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

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

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

المسار السريع مع الذكاء الاصطناعي

ثمة عمل تجيده النماذج متعددة الوسائط فعلاً ولم يجربه معظم الناس: نقد لقطة الشاشة. أعطها صورة لشاشتك واطلب منها لا رأياً بل الترتيب الذي تحرك به انتباهها عبر الصفحة. والجواب يختلف عادةً عن الترتيب الذي قصدته، وذلك الفارق هو تقرير التسلسل لديك. وهذا العمل يحتاج حكماً، فضع له نموذجاً قوياً لا رخيصاً؛ واختيارنا الحالي في <a class="text-link" href="/ar/ai/">قسم الذكاء الاصطناعي</a>.

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

وصفة جاهزة للنسخ

لقطة الشاشة هذه لصفحة {نوع الصفحة: هبوط / منتج / نموذج}. والمهمة التي ينبغي أن ينجزها المستخدم هي: {الهدف}.

أجب بهذا الترتيب وتجنب الصفات:
1) اذكر بالترتيب العناصر التي ذهب إليها انتباهك وبأي ترتيب. ستة على الأكثر.
2) قل أي عنصر تعده العمل الأساسي للصفحة، ومن أي إشارة استنتجت ذلك.
3) سمِّ كل موضع يجلس فيه عنصران متساويا الوزن جنباً إلى جنب ويتنافسان.
4) سمِّ كل موضع يوحي فيه التباعد بتجميع خاطئ.
5) وحيثما تشك في أن التباين غير كافٍ، قل لي أين أقيس فقط. ولا تخترع رقماً.

ولا تُبدِ أي رأي في الجمال أو الذوق أو لون العلامة.

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

الذكاء الاصطناعي في هذا العمل

في تصميم الواجهات يفيد الذكاء الاصطناعي فعلاً في عملين ويخطر في واحد. المفيد: نقد لقطة الشاشة الموصوف أعلاه، وتوليد الحالات المنسية لمكوّن، أي الحالة الفارغة وحالة التحميل وحالة الخطأ التي لا يرسمها أحد في التصميم الأول. والخطر: اختيار اللون والتخطيط العام، لأن مخرجاته تشبه كل مكان آخر.

أدوات تساعد فعلا

Claude جيد في نقد لقطة الشاشة وفي كتابة الحالات المنسية لمكوّن. وإيران ليست في أي من قائمتي الدول المدعومة لدى أنثروبيك؛ قرأنا ذلك في صفحة أنثروبيك نفسها.
Gemini يقرأ الصور جيداً ويناسب مراجعة شاشة فارسية لأنه يفهم الفارسية نفسها. وصفحة غوغل نفسها تقول إن تطبيق جيميناي يعمل في أكثر من مئتين وثلاثين دولة ومنطقة، وإيران ليست في تلك القائمة.
ChatGPT الخيار الأشيع ومقبول لنقد لقطة الشاشة. ولا ندّعي هنا شيئاً عن إتاحته أو سعره: فصفحة الدول المدعومة لدى OpenAI ترد على خادمنا بالرمز 403، ونحن لا نكتب ادعاءً بلا سند.

اين ينقلب ضدك

خطران، والأول أخطر مما يبدو. فالنماذج دُرِّبت على السنوات القليلة نفسها من التصاميم المتكررة كثيراً، فحين تطلب من أحدها بطاقة أو صفحة هبوط تكون المخرجات شيئاً تعرفه العين المدربة فوراً. وهذا رأينا نحن لا ادعاء علمي، لكن نصفه مرئي في هذا الموقع بالذات: ففي قواعد الكتابة الخاصة بنا منعنا نمطين بالاسم بوصفهما بصمة التصميم المولَّد، شريطاً ملوناً على إحدى حواف البطاقة والكبسولة بمقاس 99 بكسل، ونحتفظ للأول بأمر grep حارس يُشغَّل في كل مرة. فالمشكلة كانت حقيقية بما يكفي لنضطر إلى كتابة قاعدة لها.
والخطر الثاني أكثر تقنية: النموذج يحكم على ما لم يقسه ويقوله بثقة. فنسبة التباين لا تُحسب من صورة، ودليل Easy Checks من W3C نفسه يقول إن المراجعة الآلية لا تحل محل البشرية. وموقفنا: اطلب من النموذج أن يقول لك أين تنظر، لا أن يحكم نيابة عنك. ولمعرفة كيفية الدفع لكل أداة من إيران، انظر دليل الشراء.

المصادر: W3C: Understanding SC 1.4.3 Contrast (Minimum) W3C WAI: Easy Checks Anthropic: supported countries Google: where Gemini Apps are available

حدود هذه النصيحة

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

من عملنا نحن

الثبات يمكن عدّه، وقد عددناه في موقعنا. ففي main.css بقالب rgb.ir كتلة قصيرة تختزل نصف قطر زوايا كل أشكال الموقع في أربعة أرقام: زر عادي خمسة عشر، وزر كبير سبعة عشر، وشريحة اثنا عشر، ووسم حالة تسعة. والموقع كله يستعمل هذه الأربعة. وإلى جانبها، تستدعي قوالب الصفحات الواحد والثلاثون كلها مكوّن ترويسة مشتركاً واحداً ولا تعيد أي صفحة تنسيق ترويستها؛ ولهذا تبدو صفحة الاستضافة وصفحة السيو من عائلة واحدة رغم أن محتواهما لا يجمعه شيء. وقرار نادراً ما تراه في مكان آخر: شريط ملون على إحدى حواف البطاقة ممنوع في قواعد هذا الموقع، لأننا نعده علامة التصميم المولَّد؛ ولذلك نحتفظ بأمر grep حارس يعدّ الحالات المسموح بها، وأي رقم فوقها يعني أن أحدهم أضاف شريطاً جديداً. والثبات هنا ليس ذوقاً، بل مكتوب ومفحوص.

اسئلة متابعة حقيقية

ما الفرق بين UI وUX؟

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

أي خط أختار لموقع فارسي؟

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

كم لوناً يحتاج الموقع؟

أقل مما تظن. لون للنص، ولون أو اثنان للخلفيات والأسطح، ولون تمييز للعمل الأساسي، ولونان للنجاح والخطأ. ومشكلة الألوان ليست عددها؛ بل أنها حين تكثر لا يعود أي منها يعني شيئاً بعينه ويتوقف لون التمييز عن أن يُرى.