دليل تصميم واجهات المستخدم: من البحث حتى التسليم للمطورين

مقدمة

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

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

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

UX اختصار لتجربة المستخدم (User Experience)، وتهتم بالمسار الذي يسلكه الشخص ليصل إلى هدفه، مثل حجز موعد أو دفع ثمن طلب. لذلك تجيب UX عن أسئلة مثل: ما الخطوات المطلوبة؟ وبأي ترتيب؟ وماذا يحدث عندما يقع خطأ؟

أما UI فهي اختصار لواجهة المستخدم (User Interface)، أي ما يراه الناس ويلمسونه على الشاشة: الألوان والخطوط والأيقونات والأزرار والمسافات والصور. بمعنى آخر، UX هي خطة الرحلة، وUI هي شكل كل محطة فيها.

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

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

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

1. البحث وتحديد الأهداف

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

2. مسارات المستخدم (User Flows)

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

3. المخططات الأولية (Wireframes)

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

4. التصميم المرئي ونموذج أولي تفاعلي على Figma

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

5. اختبار سهولة الاستخدام

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

6. تسليم التصميم للمطورين

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

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

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

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

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

إمكانية الوصول: أساسيات في تصميم واجهات المستخدم

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

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

لماذا يبدأ التصميم من شاشة الموبايل؟

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

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

ماذا تجهز قبل مشروع تصميم واجهات المستخدم؟

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

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

ماذا تراجع في كل مرحلة؟

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

أخطاء شائعة في تصميم واجهات المستخدم يجب تجنبها

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

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

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

الأسئلة الشائعة

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

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

كم يستغرق مشروع تصميم واجهات المستخدم في مصر؟

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

هل أحتاج إلى نموذج أولي قبل بدء البرمجة؟

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

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

نعم، وغالبًا ما يجعل ذلك التسليم أسلس، لأن المصممين والمطورين يعملون جنبًا إلى جنب. يمكنك طلب عرض سعر لمناقشة مشروعك مع فريقنا.

كيف تنجح في تصميم واجهات المستخدم لمنتجك

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

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