تصميم واجهات المستخدم: ماذا تشتري فعلاً حين تدفع لتصميم UI؟

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

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

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

ما هو تصميم واجهات المستخدم فعلاً؟

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

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

التسلسل البصري: أين أنظر أولاً وماذا أفعل الآن؟

كل شاشة ناجحة تجيب عن هذين السؤالين قبل أن يقرأ المستخدم كلمة واحدة. وأدوات الإجابة أربع لا غير: الحجم، والوزن، واللون، والمسافات. العنوان الأكبر يقول «ابدأ هنا»، واللون المشبع الوحيد يقول «هذا هو الزر»، والفراغ حول عنصر يقول «هذا مهم». مجموعة Nielsen Norman تلخّص المبدأ: التسلسل البصري الجيد يجعل المستخدم يدرك الأهمية النسبية للعناصر دون جهد واعٍ.

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

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

المكوّنات وحالاتها: معظم العمل الذي لا تراه

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

وفي تجربتنا، الحالتان اللتان تفضحان جودة المنتج هما الفارغة والخطأ. الحالة الفارغة هي أول ما يراه كل مستخدم جديد، ومع ذلك تُصمَّم أخيراً أو لا تُصمَّم أبداً. ورسالة الخطأ هي واجهتك في أسوأ لحظات مستخدمها؛ وإرشادات Nielsen Norman فيها صريحة: قل ما حدث بلغة إنسان، وقل ما العمل الآن. «حدث خطأ ما» ليست تصميماً؛ إنها غيابه.

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

حين تقارن عرضين، اسأل كليهما سؤالاً واحداً: هل الحالات مشمولة في السعر؟ الجوابان سيكشفان لك أيّ الطرفين أطلق منتجاً حياً من قبل.

الاتساق: لماذا الشاشة الثالثة أسرع من الأولى؟

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

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

واجهة بلغتين: العربية والإنجليزية ندّان لا ترجمة

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

وبعض التفاصيل أعمق من الطول: الأرقام ومواضع العملة تتبع قواعدها الخاصة، وليس كل عنصر يُعكس اتجاهه عند تبديل اللغة؛ شريط التقدم يُعكس، وأيقونات الوسائط لا. لست مطالباً بحفظ هذه القواعد؛ يكفيك أن تعرف أنها موجودة، وأن دليل الواجهات العربية عندنا يفصّلها كاملة، وأن تسأل من يعرض عليك سؤالاً واحداً: كيف تختبرون الشاشات باللغتين؟ أما اختيار الخط نفسه فقرار هوية يسبق المشروع، ودليل الخطوط العربية يغطيه. الذي يعنيك عند التوقيع بسيط: أن تكون اللغتان في العرض جهداً وسعراً متساويين، لا أن تُشحن إحداهما «ترجمةً» تُضاف لاحقاً.

الوصولية عمل واجهات، لا ترف لاحق

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

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

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

ماذا تستلم من تصميم واجهات المستخدم؟

عمل تصميم واجهات المستخدم المكتمل يسلّمك أربعة أشياء، اطلبها بأسمائها:

شاشات للحالات الحقيقية لا للمسار السعيد. كل شاشة رئيسية بنسخها: الفارغة، والخطأ، والتحميل، والنص الأطول من المتوقع. عُدَّ الحالات في العرض، لا العناوين.

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

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

إجابة سؤال الخفة. الواجهة الثقيلة كلفة تجارية لا مسألة ذوق: دراسة Deloitte لصالح Google بعنوان Milliseconds Make Millions عام 2020 وجدت أن تحسين سرعة الجوال بمقدار عُشر ثانية رفع تحويلات التجزئة 8.4%. اسأل من تتعاقد معه: كيف تضمنون ألا تكلفني الظلال والصور والحركات هذه الأعشار؟

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

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

مواضيع ذات صلة: كود المنصات.

للحديث عن Web Vitals: Google web.dev — Core Web Vitals.