إعداد فريق تسوى التحريري، من المصادر الرسمية المذكورة في آخر الدليل. كيف نكتب أدلتنا
تعلم تصميم واجهات المستخدم مهارة تجمع بين الذوق والمنطق: أن تجعل التطبيق جميلاً، وأن يجد المستخدم ما يريده بدون تفكير. والخبر الجيد أن أدوات المحترفين مجانية للطلاب، وأن المبادئ الأساسية مكتوبة ومنشورة. هذا الدليل يشرح الفرق بين UI وUX، والمبادئ التي يبني عليها كل مصمم، وخارطة تعلم بأربع مراحل، وتمريناً عملياً تبدأه اليوم.
ما الفرق بين UI وUX؟
| UX تجربة المستخدم | UI واجهة المستخدم | |
|---|---|---|
| السؤال | هل يحقق المستخدم هدفه بسهولة؟ | هل الشاشة واضحة وجميلة ومتناسقة؟ |
| يعمل على | البحث، رحلة المستخدم، هيكل المعلومات، النماذج الأولية، الاختبار | الألوان، الخطوط، المسافات، الأيقونات، المكونات |
| ناتجه | مخططات تدفق ونماذج رمادية بسيطة | شاشات نهائية ونظام تصميم |
| يشبه في البناء | المخطط المعماري للمنزل | التشطيب والديكور |
في الشركات الصغيرة يقوم مصمم واحد بالاثنين، وفي الكبيرة ينفصلان. تعلّم الاثنين في البداية، ثم تميل إلى ما يجذبك أكثر.
المبادئ العشرة لنيلسن
أشهر مرجع لتقييم سهولة الاستخدام هو المبادئ العشرة التي وضعها Jakob Nielsen مع Rolf Molich. احفظها، لأنك ستستخدمها في كل مراجعة تصميم:
- إظهار حالة النظام: المستخدم يعرف دائماً ماذا يحدث، مثل شريط التحميل.
- التطابق مع العالم الحقيقي: كلمات وأيقونات يعرفها المستخدم، لا مصطلحات المبرمجين.
- تحكم المستخدم وحريته: زر رجوع وتراجع واضح عندما يخطئ.
- الاتساق والمعايير: نفس الزر يعمل بنفس الطريقة في كل مكان.
- منع الأخطاء: تصميم يمنع الخطأ قبل وقوعه، مثل تأكيد قبل الحذف.
- التعرف بدل التذكر: الخيارات ظاهرة أمام المستخدم، فلا يحتاج أن يحفظها.
- المرونة وكفاءة الاستخدام: اختصارات للمستخدم الخبير بدون تعقيد للمبتدئ.
- التصميم الجمالي والبسيط: كل عنصر زائد ينافس العناصر المهمة على الانتباه.
- مساعدة المستخدم على فهم الأخطاء والتعافي منها: رسالة تقول ما المشكلة وكيف يحلها.
- المساعدة والتوثيق: شرح قريب عندما يحتاجه المستخدم.
خارطة التعلم في أربع مراحل
- المرحلة 1: الأساسيات البصرية
الطباعة والخطوط، والألوان والتباين، والمسافات والشبكات، والتسلسل البصري. انظر إلى التطبيقات التي تحبها واسأل: لماذا هذا الزر هنا وبهذا الحجم؟
- المرحلة 2: الأداة
تعلم Figma: الإطارات، والتخطيط التلقائي (Auto Layout)، والمكونات، والنماذج الأولية القابلة للنقر. Figma مجاني للطلاب عبر برنامجه التعليمي.
- المرحلة 3: عملية UX
مقابلة المستخدمين، ورحلة المستخدم، وهيكل المعلومات، والنماذج الرمادية، واختبار الاستخدام مع خمسة أشخاص.
- المرحلة 4: إرشادات المنصات
اقرأ إرشادات Apple للواجهات وMaterial Design من Google. المستخدم يتوقع أن يتصرف تطبيق آيفون كتطبيقات آيفون، وتطبيق أندرويد كتطبيقات أندرويد.
تمرين عملي: أعد تصميم شاشة حقيقية
أفضل تمرين للمبتدئ هو إعادة تصميم شاشة تستخدمها كل يوم وتزعجك. ليس لأنك ستغيرها فعلاً، بل لأنك تمارس العملية كاملة على مشكلة حقيقية:
- اختر الشاشة
مثلاً شاشة تسجيل المقررات في بوابة جامعتك، أو صفحة الطلب في تطبيق تستخدمه.
- قيّمها بالمبادئ العشرة
اكتب جدولاً: المبدأ، المشكلة، شدتها من 1 إلى 3. ستجد غالباً خمس مشاكل على الأقل.
- اسأل ثلاثة زملاء
اطلب من كل واحد أن ينفذ مهمة على الشاشة الحالية وأنت تراقب بدون مساعدة. دوّن أين توقف.
- ارسم نموذجاً رمادياً
في Figma، بدون ألوان، رتب العناصر بحل يعالج المشاكل التي وجدتها.
- صمم الواجهة النهائية
أضف الخطوط والألوان والمكونات، واصنع نموذجاً قابلاً للنقر.
- اختبر من جديد
أعد نفس المهمة مع نفس الزملاء، وقارن الوقت والأخطاء قبل وبعد.
هذا التمرين وحده يصبح دراسة حالة كاملة لملف أعمالك: المشكلة، والبحث، والحل، والنتيجة.
الأدوات المجانية للطلاب
- Figma مجاني للطلاب عبر Figma for Education، وتجده ضمن برامج التصميم للطلاب.
- Canva مجاني عبر Canva for Campus إذا كانت جامعتك مشتركة، وهو مفيد للعروض والمنشورات أكثر من الواجهات. التفاصيل في Canva للطلاب.
- Adobe Creative Cloud Pro بخصم 70% للسنة الأولى عبر تسوى، إذا احتجت أدوات الصور والرسوم.
وإذا أردت منهجاً مرتباً بشهادة، فشهادة Google UX Design متاحة على Coursera ضمن شهادات Google المهنية، وCoursera تتيح طلب مساعدة مالية.
أخطاء المبتدئين في التصميم
- البدء بالألوان والزخرفة قبل حل المشكلة. ابدأ دائماً بنموذج رمادي، ثم أضف الشكل.
- استخدام خطوط كثيرة. خط واحد أو اثنان بأوزان مختلفة يكفيان لأي تطبيق.
- تباين ضعيف بين النص والخلفية، فيصعب القراءة على من ضعف نظره أو في ضوء الشمس.
- أزرار صغيرة جداً على الجوال. الإصبع ليس مؤشر فأرة، ويحتاج مساحة لمس مريحة.
- تصميم كل شاشة بأسلوب مختلف. استخدم المكونات في Figma ليبقى كل شيء متسقاً.
- تخطي الاختبار مع المستخدمين لأنك متأكد أن التصميم واضح. أنت تعرف التصميم، والمستخدم لا يعرفه.
- نسخ تصاميم جميلة من الإنترنت بدون فهم لماذا صُممت بهذه الطريقة.
كل خطأ من هذه يرتبط بمبدأ من مبادئ نيلسن، ولذلك مراجعة تصميمك بالمبادئ العشرة قبل عرضه على أي أحد تكشف أغلبها مبكراً. واحتفظ بقائمة مراجعة قصيرة تمر عليها قبل تسليم أي شاشة: التباين، وحجم الأزرار، والاتساق، واتجاه النص، ورسائل الأخطاء.
الذكاء الاصطناعي في التصميم
استخدمه لتوليد أفكار وأسئلة مقابلات ونصوص واجهة، ولمراجعة تصميمك بالمبادئ. وفي الذكاء الاصطناعي لطلاب العمارة والتصميم أدوات وطلبات أكثر. جرّب:
Act as a senior UX designer. I am redesigning [screen, e.g. course registration in a university portal]. The main task is [task]. Here is my design: [describe the layout or attach a screenshot]. Review it against Nielsen's 10 usability heuristics. For each problem, name the heuristic, explain the issue in one line and suggest a fix. Also tell me what to test with 5 users.
كيف تطلب رأياً مفيداً في تصميمك
لا تسأل زميلك "هل التصميم جميل؟"، فالإجابة غالباً مجاملة. أعطه مهمة محددة، مثل: "حاول أن تجد زر الدفع وتكمل الطلب"، ثم راقبه بصمت ولاحظ أين يتردد أو يضغط في المكان الخطأ. خمسة أشخاص بهذه الطريقة يكشفون أغلب مشاكل الاستخدام، وهي ملاحظات حقيقية تستطيع ذكرها في دراسة الحالة داخل ملف أعمالك، مع التعديل الذي أجريته بعدها.
من التعلم إلى العمل
المصمم يُوظَّف بملف أعماله قبل شهادته. اجمع ثلاث دراسات حالة كاملة تشرح كل منها المشكلة والعملية والنتيجة، كما في كيف تسوي بورتفوليو. وإذا أردت أن تفهم كيف تتحول تصاميمك إلى تطبيق، فتعلم أساسيات جافا سكربت، فالمصمم الذي يفهم المطور أسهل في العمل معه.
