خدمات تصميم UI/UX

معظم عملنا في التصميم لبرمجيات يستخدمها الناس طوال اليوم: موظف دعم يعالج طابور التذاكر، أمين صندوق في محل صيانة جوال، مفتش يبحث عن بند في معيار لحام بيد واحدة. في هذا النوع من البرمجيات، يهم الشكل الجميل أقل مما يهم أن تُنجز المهمة المتكررة بثلاث لمسات لا بثماني. نحن من صمّم شاشات منتجاتنا، FanDesk وMobile Master وProbe361 وFidar MES وFanMail، وننقل نفس الأسلوب إلى مشاريع العملاء.

لمن هذه الخدمة

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

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

كيف نعمل

1. مراقبة سير العمل الحالي. نجلس مع من سيستخدمون البرنامج، أو نرى كيف ينجزون العمل اليوم على الورق أو واتساب أو Excel. الهدف أن نجد الإجراءات القليلة التي تتكرر عشرات المرات يوميًا.
2. خريطة الشاشات والمخططات. قائمة بالشاشات وكيفية التنقل بينها، ثم تخطيطات أولية. تعديلها رخيص، وهنا تُتخذ معظم القرارات.
3. نموذج أولي قابل للنقر بالكود. نبني الشاشات الأساسية بـReact وTailwind CSS مع بيانات واقعية وبالاتجاهين. ولأنه كود حقيقي، يحتفظ به المطورون، وتراجع أنت شيئًا يتصرف مثل المنتج النهائي.
4. الاختبار مع مستخدمين حقيقيين. يجرّب عدد قليل من فريقك المهام، فنرى أين يترددون ونصلح ذلك قبل التطوير الكامل.
5. القياس بعد الإطلاق. Lighthouse للسرعة، وتسجيلات الجلسات والخرائط الحرارية (نستخدم Microsoft Clarity) لنرى ما يفعله المستخدمون فعلًا.

ما ننتبه إليه

الاتجاه من اليمين لليسار يُصمَّم ولا يُعكس فقط. الأيقونات التي تدل على اتجاه تُقلب، والأرقام ورموز المنتجات الإنجليزية داخل النص العربي تُقرأ بشكل صحيح، والتواريخ تظهر بالصيغة التي يتوقعها المستخدم. كل نص يمر عبر ملفات الترجمة؛ في Fidar MES لا يوجد أي نص مكتوب مباشرة في الواجهة، وحتى رموز الأخطاء القادمة من الـAPI ترتبط برسالة مترجمة بدل خطأ إنجليزي خام.

السرعة جزء من التصميم أيضًا. في إحدى صفحات دراسات الحالة على موقعنا، كانت صورة PNG بحجم 816 كيلوبايت أعلى الصفحة ترفع زمن عرض أكبر عنصر في اختبار الجوال إلى أكثر من تسع ثوانٍ، بينما كانت نسخة WebP بحجم 100 كيلوبايت من نفس الصورة موجودة دون استخدام. استبدالها بـWebP خفّضه إلى نحو 2.3 ثانية ورفع درجة الأداء في Lighthouse من 0.67 إلى 0.98. إصلاح صغير، لكن فرقه كبير لمن يتصفح من هاتفه.

أعمال يمكنك الاطلاع عليها

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

قراءات إضافية

• دقة الترجمة ثنائية اللغة للمعايير في Probe361
• التكلفة الحقيقية لإدارة محل صيانة عبر واتساب ودفتر

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

هل تسلّمون ملفات تصميم أم شاشات تعمل؟

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

هل يمكنكم إعادة تصميم تطبيق بناه غيركم؟

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

كيف تتعاملون مع التخطيط العربي والفارسي؟

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

هل تجرون أبحاث مستخدمين؟

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

هل تشمل الخدمة سهولة الوصول؟

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

كم تستغرق مرحلة التصميم؟

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