مقدمة
مجال ال UI/UX فيه أدوات كتير وكل أداة بتحل جزء مختلف من الشغل فيه أدوات لتصميم الشاشة وفيه أدوات لفهم المشكلة واختبار الحل ومراجعة سهولة الاستخدام هنا هتتعرف على مجموعة أدوات تساعدك في المراحل دي مع مثال بسيط يوضح إمتى تحتاج كل واحدة
ال UI اختصار User Interface ومعناها واجهة المستخدم وال UX اختصار User Experience ومعناها تجربة المستخدم مش مطلوب تتعلم كل الأدوات مرة واحدة اختار اللي يخدم المرحلة اللي شغال عليها وركز على فهم المشكلة والتطبيق
1 - Figma
لو عاوز تصمم واجهة موقع أو تطبيق وتشاركها مع فريقك فال Figma اختيار مناسب تبدأ بيه تقدر ترتب الشاشات وتعمل مكونات تستخدمها أكتر من مرة وتوحد الألوان والمسافات بدل ما كل شاشة يبقى ليها نظام مختلف
جرب تعمل زرار كمكون واحد وتستخدمه في شاشة تسجيل الدخول وشاشة إنشاء الحساب لما تحتاج تعدل شكله هتعدل المكون بدل ما تدور على كل نسخة لوحدها وبعدها اربط الشاشات في نموذج تفاعلي علشان تراجع خطوات المستخدم قبل البرمجة
2 - FigJam
قبل ما تختار الألوان محتاج تفهم المستخدم هيمشي إزاي جوه المنتج الأداة دي سبورة مشتركة تقدر ترسم عليها خطوات الاستخدام وتجمع الملاحظات والأفكار مع الفريق بشكل بسيط
لو بتصمم تطبيق حجز مواعيد ابدأ بخطوة اختيار الخدمة وبعدها اختيار اليوم وبعدها التأكيد ارسم كمان المسار اللي يحصل لما مفيش مواعيد متاحة كده هتكتشف الشاشات الناقصة قبل ما تضيع وقت في تفاصيل شكلها
3 - Penpot
أداة تصميم مفتوحة المصدر بتشتغل من المتصفح وتساعد المصممين والمطورين يتعاونوا على نفس المشروع تقدر تستخدمها لتصميم الواجهات والمكونات والنماذج التفاعلية وفيها أدوات ترتيب قريبة من طريقة بناء صفحات الويب
اختيار مناسب لو فريقك مهتم بالأدوات المفتوحة أو محتاج يستضيف منصة التصميم عنده جرب تصمم كارت منتج وناقش مع المطور ترتيب العناصر وسلوكها لما المساحة تتغير وجود الأداة لوحده مش بيغني عن تحديد حالات الشاشة المطلوبة
4 - ProtoPie
أحيانا الانتقال من شاشة للتانية مش كفاية علشان توضح الفكرة محتاج نموذج فيه إدخال بيانات وشروط واستجابة لتصرف المستخدم هنا الأداة دي بتساعدك تعمل تفاعلات متقدمة أقرب لسلوك المنتج قبل تنفيذ التطبيق نفسه
مثلا جرب نموذج لحساب تكلفة طلب يتغير فيه الإجمالي لما المستخدم يزود الكمية أو نموذج لحقل بحث بيعرض نتيجة بعد الكتابة استخدمها لما التفاعل نفسه محتاج تجربة وتوضيح للمطور مش لمجرد إضافة حركة ملهاش فايدة
5 - Maze
بعد ما تعمل النموذج محتاج تعرف الناس هتفهمه ولا لأ الأداة دي بتساعدك تعمل اختبارات استخدام للنماذج وتحدد مهمة للمشارك وتراجع النتائج زي إكمال المهمة والضغطات في الأماكن الغلط
بدل ما تسأل المستخدم التصميم عاجبك قوله احجز موعد يوم الخميس وشوف هيقدر يخلص ولا هيتوه راجع مكان التعثر وسبب المشكلة قبل ما تغير لون الزرار وخلي المشاركين قريبين من الناس اللي هيستخدموا المنتج فعلا
6 - Dovetail
لو بتعمل مقابلات مع المستخدمين هتلاقي عندك تسجيلات وملاحظات كتير وصعب تفتكر كل التفاصيل الأداة دي بتساعدك تجمع بيانات البحث وتنظمها وتطلع منها ملاحظات مرتبطة بالمصادر بدل ما قرارات التصميم تعتمد على الذاكرة
مثلا اجمع ملاحظات الناس اللي واجهت صعوبة في الدفع تحت موضوع واحد وراجع السياق الأصلي لكل ملاحظة استخدم التلخيص لتسهيل المراجعة لكن ارجع لكلام المستخدم قبل ما تعتبر الملخص سبب كافي لتغيير مهم في المنتج
7 - Stark
سهولة الوصول معناها إن ناس بقدرات مختلفة يقدروا يستخدموا المنتج الأداة دي بتوفر أدوات تساعدك تراجع جوانب زي تباين الألوان وتحاكي بعض اختلافات رؤية الألوان أثناء شغلك على التصميم
لو رسالة النجاح باللون الأخضر ورسالة الخطأ بالأحمر بس جرب تراجعهم من غير الاعتماد على اللون أضف نص واضح أو رمز مناسب كمان الفحص الآلي مفيد لكنه مش شهادة إن التجربة كلها مناسبة لكل الناس لازم تراجع التفاعل الفعلي بعد التنفيذ
8 - WebAIM Contrast Checker
أداة مباشرة لمراجعة الفرق بين لون النص ولون الخلفية بتحط اللونين وتشوف نسبة التباين ونتيجة المقارنة بمستويات WCAG حسب نوع النص وحجمه وده مفيد لما لون شكله لطيف لكن قراءته متعبة
استخدمها مع نصوص الأزرار والوصف الخفيف وراجع كل زوج ألوان في الوضع الفاتح والوضع الداكن لو الخلفية صورة أو تدرج متفترضش إن فحص لون واحد كفاية لازم تراعي الخلفية الفعلية اللي ورا النص
9 - Mobbin
مكتبة فيها أمثلة لواجهات ومسارات استخدام من تطبيقات ومواقع تقدر ترجع لها لما تدرس مشكلة محددة زي إنشاء حساب أو البحث أو الاشتراك بدل ما تتفرج على صور جميلة من غير سياق
اختار نفس المهمة في أكتر من منتج وقارن ترتيب الخطوات وطريقة كتابة التعليمات وحالات الخطأ هدفك تفهم ليه كل منتج اختار الحل ده وبعدها تعمل حل يناسب جمهورك مش تنسخ شاشة كاملة لمجرد إن شركة معروفة بتستخدمها
10 - Framer
لو خلصت التصميم وعاوز تحول فكرة موقع لصفحات منشورة فالأداة دي بتجمع تصميم مواقع الويب ونشرها واستضافتها في مكان واحد وده مفيد لصفحة تعريف بمنتج أو معرض أعمال تقدر تزوره وتجربه على المتصفح
جرب تعمل صفحة مشروع من شغلك فيها المشكلة وطريقة الحل والنتيجة وبعد النشر راجعها على الموبايل واختبر الروابط والنماذج لو المشروع فيه منطق خاص أو تكاملات معقدة راجع احتياجاته وحدود المنصة قبل ما تختارها لتنفيذه
أبدأ بإيه لو لسه بتعلم
ابدأ بأداة تصميم واحدة زي Figma أو Penpot ومعاها وسيلة بسيطة لترتيب أفكارك صمم مهمة صغيرة زي إنشاء حساب وبعدها خلي شخص يجربها من غير ما تشرح له كل خطوة راجع الألوان والرسائل وحالات الخطأ وعدل التصميم بناء على اللي شفته
لما تحتاج تختبر النموذج مع عدد أكبر جرب أداة اختبار ولما يبقى عندك مقابلات كتير استخدم أداة لتنظيم البحث مفيش داعي تشترك في كل الخدمات من البداية وراجع حدود الخطة الحالية لكل أداة قبل ما تعتمد عليها في شغل فريقك