تصميم واجهات وتجربة المستخدم
تصميم تجربة وواجهات المستخدم للمواقع والتطبيقات
تصميم تجربة وواجهات المستخدم للمواقع والتطبيقات يبدأ برسم مسارات الاستخدام وهيكل الشاشات، ثم تصميم نموذج تفاعلي وملفات التسليم.
لماذا يسبق التصميم البرمجة
تغيير زر في تصميم يستغرق دقائق، وتغييره بعد البرمجة يستغرق أيامًا وقد يكسر غيره. لذلك نعتمد قاعدة في برو أيديا مصر: لا نكتب سطرًا قبل أن تعتمد التصميم على الكمبيوتر والجوال. وفي التطبيقات والأنظمة، حيث الشاشات كثيرة والمسارات متشابكة، يوفر النموذج التفاعلي أسابيع من إعادة البناء.
كما أن واجهة جيدة تعني مستخدمًا يكمل مهمته بلا أن يسأل: الموظف يسجل الطلب في نصف الوقت، والعميل يحجز دون أن يتصل بك.
ما الفرق بين UX وUI
UX (تجربة المستخدم) هي المسار: ماذا يفعل الشخص ليصل إلى هدفه، وكم خطوة، وأين يتعثر، وما الذي يراه في كل خطوة. UI (واجهة المستخدم) هي الشكل: الألوان والخطوط والأزرار والأيقونات والمسافات. تبدأ بالمسار ثم تلبسه الشكل.
كيف نعمل
1. الفهم
من يستخدم الشاشة؟ موظف مستودع بقفازات أم عميلة على جوال بيد واحدة؟ ما الذي يريد إنجازه؟ نقرأ ما لديك من نظام قديم أو موقع قائم، ونطلب من مستخدمين حقيقيين وصف ما يزعجهم.
2. المسارات والهيكل
نرسم مسار المستخدم من أول فتح إلى إتمام المهمة، ونحدد الشاشات اللازمة وما يظهر فيها، وخريطة التنقل. نقلل الخطوات إلى الحد الأدنى، فكل شاشة زائدة تفقدك بعض المستخدمين.
3. المخططات الأولية
رسوم بسيطة بالأبيض والأسود لترتيب العناصر دون ألوان. تناقشها معنا وتعدلها في دقائق، وتتفق على الهيكل قبل أن يشغلك الشكل.
4. التصميم النهائي
على Figma نصمم كل شاشة بهويتك وبالحالات المختلفة: شاشة فارغة، وتحميل، وخطأ، ونجاح. ويشمل ذلك الجوال والكمبيوتر اللوحي والمكتبي حين يلزم.
5. نظام التصميم
نجمع العناصر المتكررة في مكتبة: الألوان والخطوط والأزرار والحقول والبطاقات والرسائل. هذا يجعل الشاشات الجديدة لاحقًا متسقة بلا بدء من الصفر، ويسرّع المبرمج.
6. النموذج التفاعلي
نربط الشاشات فتضغط على زر فتنتقل إلى الشاشة التالية، كأنك تستعمل التطبيق. تفتحه على جوالك أنت وفريقك، وربما على بعض العملاء، فتكتشف المشاكل قبل البرمجة.
7. تسليم المبرمجين
ملفات منظمة بالمقاسات والألوان والخطوط والصور والرموز، ووصف للسلوك: ماذا يحدث عند الضغط، وماذا تعرض الشاشة عند الخطأ. ويسلّم لفريقنا أو لأي فريق تختاره.
خصوصية الواجهات العربية
- الاتجاه من اليمين إلى اليسار: لا يكفي قلب الشاشة. الأيقونات الاتجاهية (الأسهم، التقدم، الرجوع) تنعكس، بينما بعض العناصر كالأرقام والساعات والشعارات لا تنعكس.
- الخطوط: خطوط عربية مقروءة على الشاشات الصغيرة وبأوزان متعددة، متناسقة مع اللاتينية عند خلط اللغتين.
- النصوص الطويلة: العربية تشغل مساحة مختلفة عن الإنجليزية، فنتأكد أن الأزرار والعناوين لا تنكسر.
- الأرقام والتواريخ: نتفق معك أي الصيغ تظهر: هندية أم لاتينية، وهجري أم ميلادي.
- لغتان في واجهة واحدة: تبديل اللغة دون أن يفقد المستخدم مكانه.
تطبيقات الجوال ولوحات التحكم
تصميم التطبيق يختلف عن تصميم الموقع: الإبهام هو أداة التحكم، والشاشة صغيرة، والاتصال قد ينقطع. نراعي منطقة الإبهام ومقاس الأزرار والحالات بلا اتصال. وتصميم لوحة التحكم الإدارية يختلف: كثافة بيانات وجداول وفلاتر وإجراءات سريعة. انظر تطوير تطبيقات الموبايل والبرامج المخصصة.
المواقع والمتاجر
تصميم الموقع القائم على ووردبريس أو المتجر يمكن أن يبدأ بنموذج Figma يعتمده فريقك قبل التنفيذ. وهذا ما نفعله في مشروعات المواقع: التصميم يُعتمد على الكمبيوتر والجوال قبل البرمجة. انظر تصميم مواقع الشركات وصفحات الهبوط وتحسين تحويل المتجر.
الهوية والواجهة
الواجهة تلبس هويتك. إن لم تكن لديك هوية، نقترح تصميمها أولًا حتى لا تُبنى الشاشات على ألوان مؤقتة.
مراحل العمل
- مكالمة: ما المنتج، ومن المستخدم، وما الذي لا يعمل الآن.
- عرض مكتوب يحدد النطاق والمدة.
- المسارات والمخططات الأولية تعتمدها.
- التصميم النهائي على الكمبيوتر والجوال.
- النموذج التفاعلي والتجربة وتسجيل الملاحظات.
- التسليم بملفات Figma ونظام التصميم ووصف السلوك.
ما نحتاجه منك
وصف المنتج، وأمثلة لتطبيقات أو مواقع تعجبك، وهويتك، ووصولًا إلى مستخدمين حقيقيين لتجربتهم إن أمكن، وشخصًا يتخذ قرارات التصميم.
ماذا تستلم
ملف Figma منظم، ونظام تصميم، ونموذج تفاعلي، ومخطط للمسارات، وملفات تسليم للمبرمجين، وشرحًا قصيرًا لكيفية قراءتها.
الباقات والعرض المكتوب
نراجع ما تحتاجه، ثم نرسل عرضًا مكتوبًا يحدد النطاق والمدة وما ستستلمه. العرض المكتوب يثبّت النطاق والمدة، ونبدأ بعد موافقتك. ويدخل التصميم ضمن باقات تطبيقات الموبايل والمواقع، أو تطلبه وحده.
الأسئلة الشائعة
نعم. نسلّم لك ملفات تعطيها لأي فريق برمجة، ونكتب لهم وصف السلوك.
يتحدد عدد الشاشات في العرض بحسب المنتج. التطبيق البسيط عشرات الشاشات، والنظام الإداري أكثر. نحصرها معك في مرحلة المسارات.
نجري تجربة النموذج مع فريقك، ومع مستخدمين تدلنا عليهم إن أمكن. تفاصيل الاختبار تحددها الباقة.
تُكتب شروط ملكية الملفات واستعمال الخطوط والصور في العرض قبل البدء.
بأي منهما أو باللغتين معًا، مع تبديل اللغة داخل النموذج.
جرّب تطبيقك على جوالك قبل أن يُبرمَج
أرسل متطلبات المنتج ومن سيستخدمه ومن سيستخدمه، ونرد بعرض مكتوب يحدد النطاق والمدة.