تصميم واجهات وتجربة المستخدم UI/UX
تصميم منتجات قائم على الفهم العميق: أبحاث ومسارات وواجهات يحبها المستخدمون.
التصميم ليس زينة، بل هو الطريقة التي يجعل بها منتجك القرارات سهلة. ندرس كيف يفكر مستخدموك فعلًا، ونصمم المسارات التي تزيل العوائق، ونسلّم واجهات يستطيع مهندسوك بناءها كما صُممت تمامًا. وفي المنتجات التي تُستخدم في الخليج ومصر، يعني ذلك أن نرسم العربية والإنجليزية معًا منذ أول مخطط، لا أن نقلب إحداهما إلى الأخرى في النهاية. ولأن التصميم والهندسة تحت سقف واحد، فالتسليم عندنا نظام مشترك من الـtokens والمكونات، لا مجلد من لقطات الشاشة.
كيف ننفّذ تصميم واجهات وتجربة المستخدم UI/UX.
أبحاث المنتج
مقابلات ورسم لرحلة المستخدم وتحليل للمنافسين وبيانات استخدام حقيقية، لتأسيس التصميم على الأدلة.
مسارات UX ونماذج أولية
نماذج أولية تفاعلية تتحقق من التجربة قبل كتابة سطر واحد من الكود.
واجهات المستخدم وأنظمة التصميم
واجهات جميلة ومتسقة تدعمها مكتبات مكونات قابلة لإعادة الاستخدام، مع قواعد للإصدارات والمساهمة تُبقي النظام حيًّا بعد الإطلاق.
تسليم جاهز للمطورين
مواصفات وtokens وملفات منظمة بحيث يطابق التنفيذ التصميم بكسلًا ببكسل.
العربية والإنجليزية، كلتاهما أصيلة
تخطيطات من اليمين إلى اليسار، وخطوط عربية مناسبة، وصيغ محلية للأرقام والتواريخ والعملات، تُصمَّم جنبًا إلى جنب مع الإنجليزية لا تُترجم إليها لاحقًا.
سهولة الوصول في كل مكوّن
التباين وتركيز لوحة المفاتيح ودعم قارئات الشاشة مدمجة في المكونات نفسها، فترثها كل شاشة بدل إصلاحها شاشةً شاشة.
ما يتضمنه العمل فعلًا.
البحث يفتش عن العوائق، لا عن قوائم الأمنيات
قبل أن تكون لـ Waste Marche أي شاشة، رسمنا الرحلة الحقيقية لمن يملك مواد قابلة لإعادة التدوير ويريد بيعها، وللمشتري على الطرف الآخر. كانت العوائق عملية: لا يعرف البائع قيمة ما لديه، ولا يثق بالطرف الآخر، والخطوات اللازمة لعرض المواد كثيرة. فجاء التصميم ليعالج هذه الثلاثة تحديدًا: عرض موجَّه خطوة بخطوة، ومؤشرات أسعار واضحة، وعلامات ثقة، مع تجربة لكل طرف مبنية على دوافعه هو.
اتجاهان يُصمَّمان بالتوازي
العربية تعكس الواجهة بالكامل: التنقل والأيقونات وأشرطة التقدم والمحاذاة، والرسالة نفسها تطول بنحو الربع مقارنةً بالإنجليزية، فتنكسر الأزرار التي صُممت على مقاس النص الإنجليزي. لذلك نرسم الاتجاهين منذ أول مخطط، كما فعلنا في متجر SG-Mart، لأن تحويل تصميم إنجليزي مكتمل لاحقًا يكلّف ما يقارب إعادة بناء الواجهة الأمامية.
tokens لا لقطات شاشة
الألوان والمسافات وتدرّج الخطوط وتوقيتات الحركة تُسمّى مرة واحدة، ويرجع إليها ملف التصميم والكود معًا؛ فاللون navy في Figma هو navy في الكود، لا قيمة لونية أعاد أحدهم كتابتها يدويًا. ونبني المكونات قبل الشاشات، فتصبح كل شاشة تركيبًا من أجزاء سبقت مراجعتها، وأي تعديل على النظام يصل إلى كل الشاشات.
الحالات التي لا تظهر في العروض التقديمية
يقضي المستخدمون أكثر لحظاتهم إحباطًا خارج المسار المثالي: التحميل، والشاشة الفارغة، والخطأ، وانقطاع الاتصال، والاسم الطويل بما يكفي لكسر التخطيط. نصمّم هذه الحالات عن قصد، ونضع في الشاشة الفارغة خطوة أولى بدل طريق مسدود، ونقارن التطبيق الفعلي بإطار التصميم بالحجم الكامل. وأي فرق ولو ببضع بكسلات نسجّله كخلل.
سهولة الوصول مكانها المكونات
حين تُعالَج سهولة الوصول صفحةً بصفحة، تتراجع مع كل صفحة جديدة. لذلك نضبط التباين على مستوى WCAG AA داخل الـtokens نفسها، ونمنح كل عنصر تفاعلي إمكانية الوصول بلوحة المفاتيح وحالة تركيز ظاهرة، وندمج دعم قارئات الشاشة في المكونات، ونترك الخط يتبع إعدادات حجم الخط لدى المستخدم. في El Sewedy Digital بدأ هذا العمل من أول مخطط، والمنصة تحقق 100% في فئة سهولة الوصول على Lighthouse.
واجهة جديدة لتطبيق وطني
كان لدى وزارة البيئة والمياه والزراعة في السعودية تطبيق إرشادي تعرّض للاختراق، وفُقد كوده المصدري، وتوقف المشروع. وإلى جانب إعادة بنائه، صممنا واجهة وتجربة استخدام جديدتين للتطبيق بالكامل: المكالمات الصوتية والمرئية، والحجوزات، والمهام، ومركز إشعارات متكامل، وأطلقناه خلال أربعة أشهر. ويستخدم تطبيق «مرشدك» اليوم أكثر من 500 ألف مستخدم.
نتائج، لا مجرد مخرجات.
- مسارات مختبرة مع مستخدمين حقيقيين قبل الإنفاق على التطوير
- نظام تصميم يحافظ على اتساق كل شاشة مستقبلية
- واجهات تقلل طلبات الدعم بدل أن تزيدها
- شاشات عربية وإنجليزية تبدو كلتاهما أصيلة
- تسليم يبني منه مهندسوك دون تخمين
أين نفّذنا ذلك من قبل.
ما ستريد أن تسأل عنه.
كم تكلفة تصميم UI/UX؟
يعتمد ذلك على عدد أدوار المستخدمين والمسارات المشمولة في النطاق، وعلى ما إذا كنا سنبني المنتج إلى جانب تصميمه. تبدأ الإصدارات الأولى التي نتولاها من نحو 10,000 دولار وتصل إلى نحو 60,000 دولار كلما زادت الأدوار والتكاملات. لا ننشر قائمة أسعار ثابتة، لكنك تحصل على نطاق حقيقي في أول مكالمة، لا بعد مرحلة استكشاف تدفع أنت ثمنها.
كم يستغرق التصميم؟
لا يوجد رقم ثابت للتصميم وحده؛ فالأمر يعتمد على عدد المسارات وعلى وجود نظام تصميم قائم من عدمه. ترى العمل في عروض أسبوعية، فتوجّهه ما دام التغيير رخيصًا. وللمقارنة: أُطلق تطبيق «مرشدك» بعد إعادة بنائه، بواجهته الجديدة، خلال أربعة أشهر.
هل يستطيع مطورونا البناء من تصاميمكم؟
نعم، وهذا هو الغرض من التسليم. تصلك التصاميم مع tokens مسمّاة، ومكتبة مكونات، وكل الحالات محددة لا المسار المثالي وحده. وفي طريقتنا للانتقال من Figma إلى Flutter، يتحول كل مكوّن في نظام التصميم إلى widget مبرمج قبل تجميع أي شاشة، والـtokens نفسها تنتقل إلى أي تقنيات أخرى.
هل تصممون بالعربية أولًا لمستخدمي الخليج ومصر؟
نصمم العربية والإنجليزية معًا، فلا تُضاف إحداهما لاحقًا: تخطيط من اليمين إلى اليسار وأيقونات معكوسة، وخطوط عربية بأحجام وتباعد أسطر مناسبة، وصيغ محلية للأرقام والتواريخ والعملات، ونصوص مكتوبة كما يقرأ الناس في المنطقة فعلًا، لا مترجمة حرفيًا.
هل سيلتزم التصميم بمعايير سهولة الوصول؟
التباين وفق WCAG AA هو الحد الأدنى، ويُضبط داخل الـtokens حتى لا يتراجع دون أن يلاحظ أحد، مع الوصول بلوحة المفاتيح وحالة التركيز الظاهرة ودعم قارئات الشاشة داخل المكونات. النتيجة الآلية حد أدنى لا دليل كامل؛ فـ El Sewedy Digital تحقق 100% في سهولة الوصول على Lighthouse، لكن لا أداة تكتشف كل شيء، ولذلك نبني هذه السلوكيات في التصميم بدل اختبارها في النهاية.
لدينا منتج قائم بالفعل، فهل هذه الخدمة المناسبة؟
إن كان منتجك يعمل والمستخدمون يغادرونه، فخدمة «إعادة تصميم المنتجات» أنسب لك: تبدأ بتدقيق يحدد أين يتعثر المستخدمون، وتطلق التحسينات شاشةً بعد شاشة. أما هذه الصفحة فتخص تصميم منتج جديد أو جزء جديد من منتج قائم: البحث والمسارات ونظام التصميم والتسليم لشاشات لم توجد بعد.
اقرأ المزيد عن الموضوع.
قد تحتاج أيضًا إلى.
لنتحدث عن تصميم واجهات وتجربة المستخدم UI/UX.
أخبرنا عن منتجك وجدولك الزمني وأهدافك، وسنرد عليك خلال يوم عمل واحد.