دليل بالعربية للطلبة2 دقائق قراءة
10 قوانين في تجربة المستخدم تصنع التجربة أو تهدمها
دليل قصير كتبته بالعربية لطلبة التصميم: لكل قانون قاعدته، وأثره، ومثال يومي، ومنتج يطبّقه.
03 // المدوّنة
المدوّنة
ملاحظات من مشاريعي ومحاضرة ومسابقات، إضافةً إلى أدلة عملية قصيرة عن تجربة المستخدم والإتاحة وتصميم العربية (RTL).
الموضوع
- محاضرة · 21 حزيران 20252 دقائق قراءة
المتطلبات والتوقعات في تصميم UX/UI
ملاحظات من محاضرة أعددتها وقدّمتها: لماذا تفشل المنتجات في الفجوة بين ما بُني وما توقّعه المستخدم، وكيف نسدّ هذه الفجوة.
- مسابقة · أيار 2025 · المركز الثاني2 دقائق قراءة
إعادة بناء موقع “مدمَّر” في سباق مع الوقت
كيف تعاملت مع تحدي مسابقة UI/UX V5 في جامعة العلوم التطبيقية، بدءًا من الورق، وما الذي أوصلني للمركز الثاني.
- تمرين إعادة تصميم2 دقائق قراءة
إعادة تصميم إحدى أكثر صفحات المتاجر ازدحامًا
متجر Arngren مشهور بين المصممين بصفحته الرئيسية المزدحمة، فاستخدمته للتدرب على التسلسل البصري والتجميع والمساحات البيضاء على مثال حقيقي ومتطرف.
- تمرين تصميم بصري2 دقائق قراءة
ما علّمتني إياه صحيفة قديمة عن التسلسل البصري
إعادة تصميم صفحة أولى مزدحمة للتحكم بأين تذهب العين أولًا ثم ثانيًا ثم أخيرًا، مع الحفاظ على طابعها الكلاسيكي.
- تحدّي واجهات2 دقائق قراءة
حجز موعد جلدية في خمس شاشات
تحدٍّ قصير في تصميم الواجهات: مسار حجز لعيادة جلدية بلغة بصرية ناعمة ومستديرة.
- طريقة العمل2 دقائق قراءة
كيف أستخدم الذكاء الاصطناعي في التصميم، وأين لا أستخدمه
دروس من بناء روّاء: الذكاء الاصطناعي ممتاز للسرعة والمسودات، وضعيف في تحديد ما يجب أن يكون عليه المنتج.
- طريقة العمل2 دقائق قراءة
لماذا ما زلت أبدأ على الورق
رسومات بالقلم من منصة Banana، ولماذا توفّر عشر دقائق على الورق ساعة في Figma.
- تفكير المنتج2 دقائق قراءة
لماذا يعيش روّاء داخل واتساب
لم يكن القرار الأكبر في روّاء شاشةً، بل اختيار ألّا نبني تطبيقًا للضيوف أصلًا.
- البحث2 دقائق قراءة
ما علّمني إياه 56 طالبًا عن تطبيقات المال
أرقام الاستبيان واقتباسات صادقة من بحث Filis، وكيف تحوّل كل منها إلى قرار تصميمي.
- أنظمة التصميم2 دقائق قراءة
بطاقة واحدة لستة أقسام
كيف أصلحت بطاقة إعلان واحدة في سوق إعلانات مبوّبة أكثر مما يمكن أن تصلحه إعادة تصميم أي صفحة.
- قائمة تدقيق2 دقائق قراءة
فحص الإتاحة الذي أجريه قبل التسليم
خمسة فحوصات سريعة تكشف معظم المشكلات قبل أن يرى المطوّر الملف.
- التعريب2 دقائق قراءة
التصميم للعربية ليس قلبًا للإنجليزية
ما تعلّمته عن التصميم من اليمين لليسار من تعريب الصفحة الرئيسية لـ Tesco، ومن بناء هذا الموقع بلغتين.
- بحث تجربة المستخدم2 دقائق قراءة
شخصيات تغيّر المنتج فعلًا
في Legacy، شكّل أربعة مشترين مختلفين أربع ميزات محددة. إليك كيف أكتب الشخصيات ليحدث ذلك.
- طريقة العمل2 دقائق قراءة
46 شاشة رمادية قبل أي لون
لماذا صمّمت كل شاشات روّاء بالرمادي أولًا، وما الذي تغيّر حين جاءت الألوان (تقريبًا لا شيء).
- تصميم التفاعل2 دقائق قراءة
تصميم شاشة أزمة لا تحتاج إعادة تعلّم
كيف يغيّر وضع الطوارئ في Filis ما هو مهم دون أن يغيّر أماكن العناصر.
- كتابة تجربة المستخدم2 دقائق قراءة
نصوص صغيرة داعمة ومحترمة
جمل حقيقية من Filis، والقواعد خلفها: رقم، وإجراء، ونبرة محترمة.
- بحث تجربة المستخدم2 دقائق قراءة
تحليل منافسين يقود إلى نتيجة
ثلاثة تحليلات منافسين من مشاريعي، والجملة الواحدة التي كان على كل تحليل أن يخرج بها.
- بحث تجربة المستخدم2 دقائق قراءة
كيف أكتب خطة اختبار استخدام
المهام والمقاييس والمعايير من خطة صحّتي، ولماذا أكون صريحًا بشأن ما لم أختبره بعد.
- الأجهزة القابلة للارتداء2 دقائق قراءة
التصميم لنظرة مدتها ثانيتان
دروس من تطبيق ساعة لتتبع الرحلات: قرار واحد لكل شاشة، وتباين عالٍ، وأولويات بلا تهاون.
- أنظمة التصميم2 دقائق قراءة
متغيرات لا رموز ألوان
كيف يعمل Filis على 201 متغيرًا في Figma ضمن خمس مجموعات، ولماذا يصف كل اسم وظيفة لا لونًا.
- أنظمة التصميم2 دقائق قراءة
الوضع الداكن بنقرة واحدة
ألوان Banana مبنية بوضعي النهار والليل، فتتغير المنصة كاملة دون إعادة رسم أي شاشة.
- النماذج التفاعلية2 دقائق قراءة
نموذج تفاعلي بلا طرق مسدودة
نموذج روّاء يربط 62 شاشة على سطح المكتب والجوال. والقاعدة التي اتبعتها: لكل شاشة طريق للأمام أو طريق للعودة.
- بحث تجربة المستخدم2 دقائق قراءة
المسارات قبل الشاشات
في صحّتي رسم فريقنا خمسة مسارات للمستخدم بكل نقاط القرار. وقائمة الانتظار موجودة بسبب نقطة قرار واحدة.
- الإتاحة2 دقائق قراءة
تباين الألوان عمليًا
التباين هو الفرق في السطوع بين النص وخلفيته. تعرّف على نسب WCAG وأخطائها الشائعة وطرق اختبارها.
- الإتاحة2 دقائق قراءة
حالات التركيز الواضحة
يحتاج مستخدمو لوحة المفاتيح إلى رؤية موضعهم في الصفحة. تعلّم تصميم مؤشرات تركيز واضحة واستخدام :focus-visible وتجنّب إخفاء التركيز.
- الإتاحة2 دقائق قراءة
التنقل بلوحة المفاتيح أولًا
كثيرون لا يستخدمون الفأرة أبدًا. صمّم كل تفاعل ليعمل بلوحة المفاتيح، بترتيب منطقي ودون فخاخ وبمخارج واضحة.
- الإتاحة2 دقائق قراءة
كتابة نص بديل جيد للصور
يجب أن يؤدي النص البديل غرض الصورة لا أن يصفها فقط. تعلّم متى تكتبه ومتى تتركه فارغًا وكيف يحدده السياق.
- الإتاحة2 دقائق قراءة
نماذج يسهل الوصول إليها
النماذج هي المكان الذي ينجز فيه المستخدم مهامه. استخدم تسميات حقيقية وتلميحات مفيدة وأخطاء واضحة وتجميعًا منطقيًا ليتمكن الجميع من إكمالها.
- الإتاحة2 دقائق قراءة
حجم أهداف اللمس
الأزرار الصغيرة يصعب الضغط عليها. تعرّف على حد WCAG 2.2 الأدنى 24×24 بكسل CSS وإرشاد 44 بكسل الأكبر ودور المسافات.
- الإتاحة2 دقائق قراءة
التصميم لتقليل الحركة
قد تسبب الحركة انزعاجًا أو غثيانًا لبعض المستخدمين. تعلّم احترام prefers-reduced-motion ومنح الناس تحكمًا بالمحتوى المتحرك.
- الإتاحة2 دقائق قراءة
العناوين ومعالم الصفحة
يتنقل مستخدمو قارئات الشاشة عبر العناوين ومعالم الصفحة. نظّم الصفحات بعنوان h1 واحد وعناوين متسلسلة ومناطق واضحة.
- الإتاحة2 دقائق قراءة
ليس باللون وحده
يجب ألا يكون اللون الوسيلة الوحيدة لنقل المعنى. تعرّف على WCAG 1.4.1 وكيف تقرن اللون بالنص والأيقونات والأنماط.
- الويب والأداء2 دقائق قراءة
مؤشرات Core Web Vitals للمصممين
تقيس LCP وINP وCLS التحميل والاستجابة والثبات البصري. تعرّف على قرارات التصميم التي تؤثر في هذه الأرقام.
- العربية وRTL2 دقائق قراءة
خصائص CSS المنطقية لتخطيطات RTL
الخصائص الفيزيائية مثل margin-left تنكسر عندما تنقلب الصفحة إلى الاتجاه من اليمين إلى اليسار. أما الخصائص المنطقية فتتبع اتجاه القراءة وتوفّر عليك تكرار الشيفرة.
- العربية وRTL2 دقائق قراءة
أي الأيقونات تُعكس في RTL
اعكس الأيقونات التي تعبّر عن اتجاه واترك الباقي كما هو. دليل قصير للأسهم والشيفرونات والتقدّم والحالات التي يحدّدها السياق.
- العربية وRTL2 دقائق قراءة
الأرقام الغربية أم الهندية في الواجهة العربية؟
يمكن للواجهات العربية عرض الأرقام 0-9 أو الأرقام الهندية (٠-٩). والاختيار الصحيح يتوقف على الجمهور، فالتزم بالاتساق ودع البحث يحسم الأمر.
- العربية وRTL2 دقائق قراءة
اختيار الخطوط العربية للواجهات
اختر خطوط الواجهة العربية بحسب الوضوح ومدى الأوزان وانسجامها مع اللاتيني ودعم التشكيل وحجم الملف، وليس بالشكل وحده.
- العربية وRTL2 دقائق قراءة
التعامل مع النص ثنائي الاتجاه
تحتوي الجمل العربية كثيرًا على أسماء لاتينية وأرقام وروابط. تعرّف على كيفية ترتيبها بخوارزمية الاتجاهين وكيف تعزل النص بـ HTML وCSS.
- العربية وRTL2 دقائق قراءة
تصميم النماذج والحقول لـ RTL
ليست كل الحقول تنقلب. تعرّف على الحقول التي تبقى من اليسار إلى اليمين في صفحة RTL وتلك التي تستخدم الاتجاه التلقائي وكيف تحاذي التسميات والرسائل.
- العربية وRTL2 دقائق قراءة
ارتفاع السطر والوزن في النص العربي
يحتاج النص العربي عادةً إلى ارتفاع سطر أكبر من اللاتيني، وقد تبهت الأوزان الرقيقة، وقد يلزم تعديل الحجم. نقاط انطلاق عملية للاختبار.
- العربية وRTL2 دقائق قراءة
التوطين أكثر من الترجمة
ترجمة الكلمات خطوة واحدة فقط. أما التوطين فيشمل التخطيط والجمع والتواريخ والوحدات والصور والنبرة. قائمة تحقق للمنتجات العربية.
- كتابة UX2 دقائق قراءة
كتابة رسائل خطأ مفيدة
رسالة الخطأ الجيدة تقول ما حدث وكيف يُصلح، بكلمات بسيطة ودون لوم. أمثلة وأنماط وأساسيات إمكانية الوصول.
- كتابة UX2 دقائق قراءة
كتابة تسميات أزرار واضحة
التسمية الجيدة للزر تسمّي الإجراء: فعل ومفعول به. أنماط لتسميات محددة ومتسقة وسهلة الترجمة.
- البحث والاختبار2 دقائق قراءة
مقابلات المستخدمين: الأساسيات
كيف تخطط لمقابلة مستخدم وتجريها: حدد الهدف، اختر المشاركين المناسبين، واسأل أسئلة مفتوحة عن السلوك السابق، واستمع أكثر مما تتكلم.
- البحث والاختبار2 دقائق قراءة
كتابة أسئلة الاستبيان دون انحياز
الصياغة المنحازة تفسد بيانات الاستبيان بصمت. تعلّم كيف تكتشف الأسئلة الإيحائية والمشحونة والمزدوجة، وكيف تصمم خيارات إجابة واضحة ومتوازنة.
- البحث والاختبار2 دقائق قراءة
لماذا قد يكفي خمسة مستخدمين
نصيحة نيلسن الشهيرة كثيرًا ما تُفهم خطأً. خمسة مستخدمين في كل جولة قد يكشفون معظم المشكلات، بشرط إجراء جولات صغيرة والإصلاح بينها.
- البحث والاختبار2 دقائق قراءة
فرز البطاقات للتنقل وبنية المعلومات
يكشف فرز البطاقات كيف يصنّف الناس المحتوى ويسمّونه. تعرّف على أنواعه، وكيف تجهّز البطاقات، وكيف تقرأ النتائج لتشكيل التنقل.
- البحث والاختبار2 دقائق قراءة
اختبار الشجرة لهيكل التنقل
يتحقق اختبار الشجرة من قدرة الناس على إيجاد العناصر في هيكل تنقل معروض كنص بسيط، دون أن يتدخل التصميم البصري.
- البحث والاختبار2 دقائق قراءة
نهج «المهام المطلوب إنجازها» ببساطة
يصوغ نهج «المهام المطلوب إنجازها» الاحتياجات على أنها التقدم الذي يريده الشخص في موقف معين. تعلّم كتابة عبارات المهمة واستخدامها في ترتيب أولويات الميزات.
- البحث والاختبار2 دقائق قراءة
الخرائط التقاربية لملاحظات البحث
تحوّل الخريطة التقاربية كومة ملاحظات البحث إلى محاور. اتبع الخطوات وحوّل المحاور إلى أسئلة «كيف يمكننا» وتجنب الأخطاء الشائعة.
- البحث والاختبار2 دقائق قراءة
الجمع بين التحليلات والبحث النوعي
تُظهر التحليلات ما يحدث وكم مرة، وتشرح المقابلات والاختبارات السبب. تعلّم الجمع بينهما وتجنب المقاييس الشكلية واحترام الخصوصية.
- العمل والمنتج2 دقائق قراءة
ترتيب الأولويات بنموذجي RICE وMoSCoW
يساعد نموذجا RICE وMoSCoW الفرق على ترتيب العمل بطريقة مشتركة. تعرّف على آلية التقييم عبر مثال توضيحي، وعلى مواضع تضليل هذه الأدوات.
- العمل والمنتج2 دقائق قراءة
كيف تدير جلسة نقد تصميم مفيدة
يحسّن النقد الجيد العمل نحو أهدافه. تعلّم كيف تحدد الأهداف وتنظم الملاحظات وتتجنب القفز إلى الحلول وتتعامل مع الملاحظات بإيجابية.
- تصميم الواجهات2 دقائق قراءة
بناء سلّم الخطوط
يمنح سلّم الخطوط كل حجم نص سببًا واضحًا. تعرّف على اختيار الحجم الأساسي والنسبة، وضبط ارتفاع السطر، وجعل الأحجام متجاوبة.
- تصميم الواجهات2 دقائق قراءة
إعداد نظام المسافات
يحافظ سلّم المسافات المبني على 4 أو 8 نقاط على إيقاع متسق وتسليم أبسط. تعرّف على الرموز ومبدأ التقارب وخيارات الكثافة.
- تصميم الواجهات2 دقائق قراءة
رموز الألوان: الأساسية والدلالية
سمِّ الألوان بحسب دورها لا بحسب لونها. تجعل الرموز الأساسية والدلالية الحالات والوضع الداكن والسمات أرخص بناءً وصيانةً.
- تصميم الواجهات2 دقائق قراءة
شبكات التخطيط: الأعمدة والفواصل والهوامش
تضفي الشبكة نظامًا على التخطيط. تعرّف على الأعمدة والفواصل والهوامش ونقاط الانكسار المبنية على المحتوى وطول السطر المريح وأساسيات CSS grid.
- تصميم الواجهات2 دقائق قراءة
تصميم الوضع الداكن بشكل صحيح
الوضع الداكن ليس عكسًا للألوان. تعرّف على الأسطح الناعمة والنص شبه الأبيض والارتفاع بالإضاءة والألوان المميزة المعدّلة واحترام إعدادات المستخدم.
- تصميم الواجهات2 دقائق قراءة
تصميم حالات فارغة مفيدة
الشاشة الفارغة فرصة لإرشاد الناس. تعرّف على الأنواع الأربعة للحالة الفارغة وما يجب أن تقوله كل منها وكيف تتجنب الطرق المسدودة.
- تصميم الواجهات2 دقائق قراءة
مبادئ تصميم الأيقونات
توفر الأيقونات المساحة لكنها قد تُربك. تعرّف على متى تضيف تسميات وكيف تحافظ على شبكة متسقة وكيف تجعل أزرار الأيقونات متاحة.
- تصميم الواجهات2 دقائق قراءة
أساسيات التسلسل البصري
يخبر التسلسل البصري الناس بما ينظرون إليه أولًا. تعرّف على الأدوات الخمس واختبار تضييق العينين ولماذا الحذف أفضل من زيادة التأكيد.
- تصميم الواجهات2 دقائق قراءة
تسلسل الأزرار وحالاتها
ليس كل زر بالوزن نفسه. تعرّف على مستويات الأزرار الأربعة وحالاتها الست وتناسق الأحجام والفرق الدلالي بين الزر والرابط.
- الويب والأداء2 دقائق قراءة
اختيار صيغ الصور للويب
الصيغة والترميز الصحيحان يبقيان الصفحات سريعة ومستقرة. تعرّف على متى تستخدم JPEG وPNG وWebP وAVIF وSVG، مع srcset والأبعاد والتحميل الكسول.
- كتابة UX2 دقائق قراءة
كتابة نصوص الإعداد الأولي التي تساعد المستخدم على البدء
يجب أن يبدأ نص الإعداد الأولي بالقيمة، وأن تكون خطواته قصيرة، وأن يسمح بالتخطي ويشرح الأذونات في سياقها. وقِس نجاحه بإنجاز أول مهمة حقيقية.
- كتابة UX2 دقائق قراءة
نوافذ التأكيد التي يثق بها المستخدم
استخدم نافذة التأكيد فقط عند الإجراءات الخطرة، وفضّل التراجع متى أمكن، واكتب عنوانًا وعواقب وأزرارًا محددة بدل «نعم» و«لا».
- كتابة UX2 دقائق قراءة
الصوت والنبرة في كتابة المنتجات
يبقى الصوت ثابتًا بينما تتكيف النبرة مع السياق. تعرّف على أبعاد النبرة الأربعة، واكتب ثلاثة مبادئ للصوت، وحافظ على اتساق العربية والإنجليزية.
- كتابة UX2 دقائق قراءة
النص الإرشادي ليس تسمية للحقل
يختفي النص الإرشادي عند الكتابة، وغالبًا ما يكون ضعيف التباين، ولا يُعتمد عليه اسمًا لإمكانية الوصول. استخدم تسمية ظاهرة دائمة مع نص تلميح اختياري.
- العمل والمنتج2 دقائق قراءة
قائمة تدقيق لتسليم التصميم إلى المطورين
يغطي التسليم الجيد كل الحالات والتصميم المتجاوب والرموز والملفات والحركة وإمكانية الوصول وقواعد المحتوى والحالات الحدّية، ثم مراجعة النتيجة بعد البناء.
- العمل والمنتج2 دقائق قراءة
أساسيات نظام التصميم: من أين تبدأ
نظام التصميم هو الرموز والمكونات والأنماط والتوثيق. ابدأ بالجرد، وانطلق من نطاق صغير، وسمِّ الأشياء بوضوح، وقِس مدى الاعتماد عليه.
- العمل والمنتج2 دقائق قراءة
كيف تكتب دراسة حالة في تجربة المستخدم
تقوم دراسة الحالة الجيدة على بنية واضحة، وتفصل عملك عن عمل الفريق، وتصدق في ذكر الثغرات، ولا تختلق أرقامًا، وتحترم وقت مسؤول التوظيف.
- الويب والأداء2 دقائق قراءة
تحميل خطوط الويب دون الإضرار بالأداء
استخدم WOFF2، وقسّم الخطوط الكبيرة إلى مجموعات جزئية، وحمّل مسبقًا الخط الحرج فقط، واختر font-display بعناية، واضبط مقاييس الخط البديل لتقليل إزاحة التخطيط.
- الويب والأداء2 دقائق قراءة
قائمة تدقيق للتصميم المتجاوب
ابنِ بمنهج الجوال أولًا، واستخدم خطوطًا مرنة ونقاط انكسار تحددها المحتويات، وحافظ على أهداف لمس مريحة، وتجنب التمرير الأفقي، واختبر على أجهزة حقيقية.
- الويب والأداء2 دقائق قراءة
تصميم حالات التحميل
اختر نمط التحميل بحسب مدة الانتظار: اعرف حدود زمن الاستجابة الثلاثة، واختر بين الهياكل الأولية والمؤشرات الدوارة وأشرطة التقدم، وأعلن التغييرات بطريقة متاحة.
لا توجد مقالات مطابقة. جرّب كلمة أخرى أو امسح المرشحات.