طابق 02 · الويب
خدمات تصميم UI/UX. شاشات واضحة، أسئلة أقل.
تصميم UI/UX هو تحديد طريقة عمل المنتج وشكله معاً: ما يراه المستخدم أولاً، وكيف ينجز مهمته، وأين يتعثر. يصمم فريق yop في تالين التطبيقات ومنتجات SaaS والمواقع، من أبحاث المستخدم والمخططات الهيكلية إلى نظام تصميم يبني منه المطورون مباشرة، كما نصمم منتجاتنا الخاصة ونطلقها.
UI وUX
ما الفرق بين واجهة المستخدم وتجربة المستخدم؟
تجربة المستخدم (UX) هي طريقة عمل المنتج: الخطوات التي يمر بها المستخدم، والمعلومات في كل شاشة، وترتيب القرارات، وما يحدث عند وقوع خطأ. أما واجهة المستخدم (UI) فهي الشكل والانطباع: توزيع العناصر، والخطوط، والألوان، والأزرار وحالاتها، والحركة. تجربة جيدة بواجهة ضعيفة لا توحي بالثقة، وواجهة جميلة بتجربة ضعيفة تبدو مقبولة لكنها تخسر المستخدمين.
نعمل على الاثنين، وبهذا الترتيب. نختبر كل مسار كمخطط رمادي قبل إضافة أي لون، لأن تغيير المسار في هذه المرحلة قليل التكلفة، أما تغييره بعد البرمجة فمكلف.
- الأبحاث. مقابلات وبيانات تحليلية وتسجيلات للجلسات لمعرفة أين يتعثر الناس.
- الهيكل. بنية المعلومات ومسارات المستخدم والمخططات الهيكلية.
- الواجهة. التصميم البصري والمكونات والحالات وإمكانية الوصول.
- التسليم. نظام تصميم وملفات مشروحة يبني منها المطورون.
فحص ذاتي
هل يحتاج منتجك إلى تحسين UX؟
حدد ما لاحظته خلال الشهر الماضي. كل علامة منها مؤشر نتتبعه حتى نصل إلى الشاشة التي سببته.
0/ 6
لم تحدد شيئاً بعد. اختر ما لاحظته.
علامة واحدة: غالباً شاشة أو تسمية تحتاج إلى إصلاح.
هذا نمط. تدقيق UX قصير يكشف من أين يبدأ.
المنتج يخسر مستخدميه. ابدأ بأبحاث على المسارات الأساسية.
ما نصممه
ستة مخرجات يمكن البناء عليها.
تدقيق UX
نختبر منتجك أو موقعك الحالي من حيث سهولة الاستخدام وإمكانية الوصول، ثم نرتب المشكلات حسب ضررها على المستخدمين.
أبحاث المستخدم
مقابلات واختبارات قصيرة مع مستخدمين حقيقيين، وقراءة البيانات التحليلية لمعرفة أين ينسحب الناس.
المسارات والمخططات
كل مهمة أساسية مرسومة خطوة بخطوة بالرمادي، ليُتفق على المنطق قبل بدء العمل على الشكل.
نموذج أولي تفاعلي
نموذج على Figma يتنقل فيه المستخدمون وفريقك بالنقر، على الحاسوب وعلى الهاتف.
تصميم UI
شاشات بهوية علامتك التجارية، وكل حالة مرسومة: الفراغ والتحميل والخطأ والنجاح.
نظام التصميم
مكونات ومتغيرات وقواعد في Figma مطابقة للكود، فتبقى الشاشات الجديدة متسقة.
جرب
ثلاث قوائم، مهمة واحدة.
اختبار الشجرة يعطي المشارك مهمة وقائمة التنقل وحدها، دون أي تصميم. نقراته تكشف هل التسميات مفهومة. تابع مستخدماً واحداً يجرب ثلاث نسخ.
رسم توضيحي لاختبار الشجرة. في الاختبار الحقيقي تُعطى المهمة نفسها لمجموعة من المستخدمين ويُسجل كل مسار سلكوه.
المهمة
أين تجد سياسة الإرجاع؟
النقرات 4
لم يجدها
تسميات قديمة: أربع نقرات ثم يستسلم المستخدم.
سير العمل
أربع خطوات إلى شاشات تؤدي عملها.
الفهم
الأهداف والمستخدمون والمنتج الحالي، من المقابلات والبيانات التحليلية والتدقيق.
الهيكلة
مسارات ومخططات للمهام الأساسية، نراجعها معك ونختبرها مع عدد قليل من المستخدمين.
التصميم
الواجهة بهوية علامتك وبكل حالاتها، في نموذج أولي تفاعلي.
التسليم
نظام تصميم وملفات مشروحة، مع وقت نخصصه للمطورين أثناء البناء.
قناعات شائعة
خرافات التصميم تكلف المنتجات مستخدميها.
ثلاث قناعات نسمعها في أغلب الاجتماعات الأولى. كل واحدة تبدو منطقية، وكل واحدة تجعل المنتج أصعب في الاستخدام.
نسمع كثيراً
«المستخدمون سيقرؤون التعليمات.»
ما نراه
نادراً ما يفعلون. إذا احتاجت الشاشة إلى دليل فالمشكلة في الشاشة؛ التسميات الواضحة والإعدادات الافتراضية المعقولة هي التي تشرح.
نسمع كثيراً
«سنختبر مع المستخدمين بعد الإطلاق.»
ما نراه
ممكن، لكن كل تعديل حينها يصبح برمجة. بضعة أشخاص يتنقلون في نموذج أولي يكشفون أسوأ المشكلات ما دام الإصلاح يستغرق دقائق في Figma.
نسمع كثيراً
«إمكانية الوصول تهم قلة من المستخدمين.»
ما نراه
التباين وحالات التركيز والتسميات الواضحة تساعد الجميع: في شارع مشمس، وعلى هاتف بطيء، وحين تكون إحدى اليدين مشغولة. وإذا كنت تبيع في الاتحاد الأوروبي، فقانون الإتاحة الأوروبي يجعلها واجباً قانونياً لكثير من المنتجات والخدمات الرقمية.
مقارنة
ما الذي تجيب عنه كل مرحلة.
| مقارنة بين أبحاث UX وتصميم UX وتصميم UI | أبحاث UX | تصميم UX | تصميم UI |
|---|---|---|---|
| السؤال | ماذا يحتاج المستخدمون، وأين يتعثرون؟ | كيف يجب أن يعمل المنتج؟ | كيف يبدو، وما انطباعه؟ |
| المخرجات | نتائج وأولويات | مسارات ومخططات ونموذج أولي | شاشات ومكونات ونظام تصميم |
| المدة المعتادة | أيام إلى بضعة أسابيع | أسابيع | أسابيع |
| لدى yop | نعم | نعم | نعم |
البداية
أول أسبوعين من تدقيق UX.
التدقيق هو الخطوة الأولى المعتادة، ونبقيه قصيراً عن قصد. هكذا يسير أول أسبوعين، من المكالمة الأولى حتى قائمة إصلاحات مرتبة حسب الأولوية.
اليوم 1
الانطلاق
نتفق في مكالمة واحدة على الأهداف والمستخدمين وأهم المسارات. تشاركنا البيانات التحليلية وأي تسجيلات لديك.
الأيام 2–5
نراقب ونستمع
مراجعة البيانات التحليلية وتسجيلات الجلسات وتذاكر الدعم، ومقابلة عدد من المستخدمين.
الأسبوع 2
الاختبار
مستخدمون حقيقيون يجربون المهام الأساسية على منتجك المنشور أو على نموذج أولي سريع.
اليوم 10
النتائج
قائمة مشكلات مرتبة، لكل مشكلة الشاشة والدليل والإصلاح المقترح.
العربية والإنجليزية
هل يمكن تصميم الواجهة بالعربية والإنجليزية معاً؟
نعم. القراءة من اليمين إلى اليسار تعكس التخطيط كله، وطول النص يتغير من لغة إلى أخرى، فالتسميات الألمانية مثلاً تطول كثيراً. نصمم مكونات تتمدد وتلتف وتنعكس، ونختبر الشاشات الأساسية بالعربية وبأطول لغة يخدمها منتجك قبل التسليم.
هذا يوفر جولة إصلاحات لاحقة، حين لا يعود زر مترجم يتسع لمكانه أو تتفكك صفحة عربية.
منتجك
أرنا الشاشة التي يتعثر فيها المستخدم.
أرسل رابطاً أو بضع لقطات شاشة. خلال يومي عمل يرد عليك أحد المؤسسين بما سنختبره أولاً.
أسئلة
يسألوننا عن التصميم.
ماذا يشمل تصميم UI/UX؟
يشمل هذا التصميم تخطيط طريقة عمل المنتج الرقمي (تجربة المستخدم) وشكله (واجهة المستخدم)، من الأبحاث والمخططات الهيكلية إلى التصميم البصري والنماذج الأولية ونظام التصميم. يقدمه فريق yop للتطبيقات ومنتجات SaaS والمواقع.
كم تكلفة تصميم UI/UX؟
تكلفة التصميم لدى yop سعر ثابت لكل مرحلة، مثل تدقيق أو مجموعة مسارات أو نظام تصميم كامل. نتفق على السعر بعد مكالمة استكشافية قصيرة.
كم يستغرق مشروع تصميم واجهة المستخدم؟
يستغرق تدقيق UX بضعة أيام، وأسبوعين على الأكثر، ويستغرق تصميم المسارات الأساسية والواجهة عادة عدة أسابيع. وتطول المدة في المنتجات الكبيرة التي تخدم أدواراً كثيرة.
ماذا أستلم في نهاية المشروع؟
في نهاية المشروع تستلم: ملفات Figma بكل الشاشات والحالات، ونموذج أولي تفاعلي، ونظام تصميم بمكوناته وملاحظات للمطورين. كل الملفات ملك لشركتك.
هل تراعي التصاميم إمكانية الوصول؟
نعم، يصمم فريق yop وفق معيار WCAG 2.2 بمستوى AA. نتحقق قبل التسليم من التباين وحالات التركيز وحجم النص والتسميات ولوحة المفاتيح.
هل يبني فريق yop ما يصممه أيضاً؟
نعم، نبني التطبيقات ومنتجات SaaS والمواقع من ملفات التصميم نفسها، فلا تضيع تفصيلة بين التصميم والكود. انظر تطوير البرمجيات وتطوير المواقع.
كم مستخدماً يشارك في كل اختبار؟
عادة من 5 إلى 8 مستخدمين في كل جولة من اختبارات المهام، وهذا يكفي لرؤية المشكلات التي توقف معظم الناس. نفضل عدة جولات صغيرة نصلح بينها على اختبار كبير واحد في النهاية.
مواقع ومتاجر إلكترونية سريعة، تبيع بكل لغة تحتاجها.
مواقع وتطبيقات ويب سريعة متعددة اللغات، يعدلها فريقك.
مواقع WordPress يعدلها فريقك ويقرؤها جوجل.
متاجر تبيع وتشحن، ومخزونها متزامن دائماً.
صفحة واحدة وعرض واحد، لتحويل النقرات إلى عملاء محتملين.
تحديثات ونسخ احتياطية وحماية وتعديلات صغيرة، كل شهر.
صفحات أسرع، واجتياز Core Web Vitals، وزوار أقل تخسرهم.