الانتقال إلى المحتوى
XSIS
تحدث إلى مهندس

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

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

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

أبحاث المستخدمين وبنية المعلومات وتصميم التفاعل وأنظمة التصميم لمنتجات يستخدمها الناس كل يوم.

نظرة عامة

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

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

نصمم وفق معيار WCAG 2.2 AA في كل عمل، ولكل لغة تحتاج إليها، بما فيها العربية وسائر اللغات التي تكتب من اليمين إلى اليسار، حيث تنعكس التخطيطات ويحتاج الخط إلى عناية خاصة. ويعمل المصممون إلى جانب المهندسين طوال البناء، فيطابق ما يطلق ما صمم.

ما نقدمه

  1. نتائج البحث

    مقابلات وملاحظات ميدانية وتحليلات تتحول إلى نتائج واضحة عن مستخدميك ومهامهم ومشكلاتهم.

  2. بنية المعلومات

    هيكل المنتج: التنقل والتسميات وطريقة تجميع المحتوى والميزات.

  3. مسارات المستخدم

    كل مهمة رئيسية مرسومة خطوة بخطوة، بما في ذلك الأخطاء والحالات الفارغة والحالات الاستثنائية.

  4. نماذج أولية مختبرة

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

  5. تصميم الواجهة

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

  6. نظام التصميم

    رموز التصميم والمكونات وإرشادات الاستخدام في Figma وفي الشيفرة عبر Storybook، يتشاركها المصممون والمهندسون.

  7. مراجعة سهولة الوصول

    تصاميم مفحوصة وفق معيار WCAG 2.2 AA من حيث التباين وترتيب التركيز وحجم عناصر اللمس وتسميات قارئ الشاشة.

  8. تخطيطات من اليمين إلى اليسار

    تخطيطات وأيقونات وطباعة منعكسة للعربية وسائر اللغات التي تكتب من اليمين إلى اليسار.

طريقة عملنا

  1. 01

    البحث

    نقابل المستخدمين، ونراجع التحليلات وطلبات الدعم، ونراقب العمل في مكان حدوثه.

  2. 02

    التحديد

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

  3. 03

    التصميم والنموذج الأولي

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

  4. 04

    الاختبار مع المستخدمين

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

  5. 05

    التسليم ودعم البناء

    نسلم التصاميم والمكونات، ونراجع ما ينفذه المهندسون، ونجري التعديلات معهم.

التقنيات

لغات البرمجة
  • TypeScript
أطر العمل
  • React
الاختبار
  • axe-core
التصميم وسهولة الوصول
  • Figma
  • Storybook
  • WCAG 2.2

طرق التعاون معنا

أسئلة وأجوبة

هل نحتاج إلى أبحاث المستخدمين إذا كنا نعرف مستخدمينا؟

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

رابط هذا السؤال
ما الذي يحدد تكلفة أعمال التصميم؟

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

رابط هذا السؤال
كيف تجعلون التصاميم سهلة الوصول؟

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

رابط هذا السؤال
هل يمكنكم التصميم للعربية وسائر اللغات التي تكتب من اليمين إلى اليسار؟

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

رابط هذا السؤال
ما نظام التصميم، وهل نحتاج إليه؟

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

رابط هذا السؤال
كيف يعمل مصمموكم مع المهندسين؟

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

رابط هذا السؤال
من يملك الشيفرة والأعمال التي تنتجونها؟

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

رابط هذا السؤال

أخبرنا بما تحتاج إلى بنائه أو ربطه.

صف لنا الأنظمة والجدول الزمني والقيود، وسيتولى المهندسون المناسبون الأمر من هناك.

  • سيتصل بك فريقنا خلال 24 ساعة في الفترة الزمنية التي تفضلها
  • فريقنا متاح على مدار الساعة طوال أيام الأسبوع