برمِج

محمد صلاح إبراهيم

مبرمج ومطوّر

هدفنا أن نُيسّر على طالب العلم دخول عالم البرمجة والذكاء الاصطناعي.

والموقع مجاني بالكامل، ولا نسألكم إلا الدعاء.

الدرس 4-2

تصميم المعلومات وتجربة المستخدم

الموقع اللي منطقي لصاحبه… ممكن يبقى مربك لزوّاره

أربعة مبادئ تنظّم أي شاشة

C التباين جعل أولوية المعلومات واضحة وإبراز أهم العناصر فورًا.
R التكرار تكرار خصائص معينة لتحقيق الاتساق في التصميم ككل.
A المحاذاة محاذاة موضع كل عنصر إلى خط أساس مشترك لإعطاء الشاشة نظامًا.
P التقارب وضع المعلومات المرتبطة قريبة من بعضها لتُدرَك كمجموعة واحدة.
من خارج المنهج الرسمي — لفهم أعمق

مبادئ CRAP جت من كتاب لغير المصمّمين

المصمّمة روبن ويليامز جمعت المبادئ الأربعة دي في كتابها «The Non-Designer's Design Book» سنة 1993، موجّه أصلًا لناس مالهاش خلفية تصميم — عشان كده المبادئ بسيطة وعملية، مش نظرية أكاديمية معقدة.

المصدر: Robin Williams — The Non-Designer's Design Book (1993)
  • ✓ شخصية المستخدم: تمثيل لنمط من المستخدمين يستند قدر الإمكان إلى بحث أو بيانات عن أهدافهم واحتياجاتهم وسياقهم.
  • ✓ المخطط الهيكلي: مخطط للتخطيط قبل إضافة أي لون أو زخرفة — يحدّد أماكن العناصر وأولوياتها.

شخصية المستخدم تمثيل لنمط من المستخدمين يستند قدر الإمكان إلى بحث أو بيانات.

صح وخطأ user-centred-design

المفاهيم الأساسية (8)

شخصية المستخدم

Persona

تمثيل لنمط من المستخدمين يستند قدر الإمكان إلى بحث أو بيانات عن أهدافهم واحتياجاتهم وسياقهم.

المخطط الهيكلي

Wireframe

مخطط للتخطيط قبل إضافة أي لون أو زخرفة — يحدّد أماكن العناصر وأولوياتها.

التباين

Contrast

جعل أولوية المعلومات واضحة وإبراز أهم العناصر فورًا.

التكرار

Repetition

تكرار خصائص معينة لتحقيق الاتساق في التصميم ككل.

المحاذاة

Alignment

محاذاة موضع كل عنصر إلى خط أساس مشترك لإعطاء الشاشة نظامًا.

التقارب

Proximity

وضع المعلومات المرتبطة قريبة من بعضها لتُدرَك كمجموعة واحدة.

التصميم المتمحور حول المستخدم

UCD

نهج يجعل فهم المستخدمين واحتياجاتهم وسياق استخدامهم أساسًا لقرارات التصميم.

قابلية الاستخدام

Usability

سهولة وفاعلية إنجاز المهمة — وإمكانية الوصول هدف مستقل بجانبها.

تدرّب (13)

الإجابات الصحيحة لا تصل إلى المتصفح — التصحيح يجري على الخادم عند الإجابة.

التمثيل الذي يلخّص نوعًا من المستخدمين واحتياجاته وسياق استخدامه يُسمّى:

اختيار من متعدد user-centred-design

أي مما يلي لا يُعد معلومة مناسبة لإدراجها عند إعداد شخصية نموذجية؟

اختيار من متعدد crap-principles

«تجميع أسماء المنتجات وأسعارها وصورها قريبة من بعضها» يقابل مبدأ:

اختيار من متعدد crap-principles

أي مما يلي غير مدرج ضمن المبادئ الأربعة للتصميم (مبادئ CRAP)؟

اختيار من متعدد crap-principles

أي مما يلي يصف مفهوم التصميم المتمحور حول المستخدم بأنسب شكل؟

اختيار من متعدد user-centred-design

لماذا يُحدَّد مكان المعلومات وأولويتها قبل اختيار الألوان والخطوط؟

اختيار من متعدد user-centred-design

شخصية المستخدم تمثيل لنمط من المستخدمين يستند قدر الإمكان إلى بحث أو بيانات.

صح وخطأ user-centred-design

أداء خادم الموقع معلومة مناسبة لإدراجها في شخصية المستخدم.

صح وخطأ user-centred-design

المخطط الهيكلي هو التصميم بنسخته النهائية متضمنًا الألوان والزخارف.

صح وخطأ user-centred-design

«التقارب» يعني تجميع المعلومات المرتبطة قريبة من بعضها.

صح وخطأ crap-principles

التصميم المتمحور حول المستخدم نهج يعطي الأولوية لراحة المُنشئ.

صح وخطأ user-centred-design

طابق كل وصف بالخيار المناسب.

مطابقة crap-principles

جعل العناوين كبيرة وغامقة لتمييزها عن نص المحتوى
تجميع أسماء المنتجات وأسعارها وصورها قريبة من بعضها
محاذاة الحواف اليمنى للنص العربي والعناصر المرتبطة وفق شبكة التصميم
توحيد خط ولون العناوين في جميع الصفحات

أكمل الفراغ user-centred-design

عند تصميم موقع، ابدأ بفهم المستخدم وسياق الاستخدام. ويمكنك استخدام لتلخيص نوع من المستخدمين واحتياجاته، و لتخطيط أماكن العناصر وأولوياتها. كما يمكن استخدام — التباين والتكرار والمحاذاة والتقارب — لتنظيم الشكل. ويُسمّى النهج الذي يجعل احتياج المستخدم أساسًا للقرار ، وهدفاه و.