# مشروع واجهات مستخدم للطلاب: كيف تحول واجبك الجامعي إلى دراسة حالة قابلة للعرض

> **الخلاصة**: مشروع واجهات مستخدم للطلاب يصير دراسة حالة حين تكتب له قصة: مشكلة محددة، ومن يستعمل الشاشة، وما اختبرته، وما غيرته بعد الاختبار. قيّم تصميمك بالقواعد العشر لنيلسن ومعايير WCAG، ثم اعرض القبل والبعد مع سبب كل تعديل.[^1][^2]

**أهم النقاط**

- الدراسة ليست صوراً جميلة، بل قصة قرارات.
- قيّم شاشتك بالقواعد العشر لنيلسن نورمان.[^1]
- افحص التباين وحجم الأهداف وفق معايير WCAG.[^2]
- اعرض النسخة الأولى والمعدلة جنباً إلى جنب.
- لا تدّعِ نتائج لم تقسها، ولا تخترع مستخدمين.

![مشروع واجهات مستخدم للطلاب: كيف تحول واجبك الجامعي إلى دراسة حالة قابلة للعرض](https://tiswa.app/assets/blog/ui-design-case-study-student-project/ui-design-case-study-student-project-cover-ar.webp)

سلمت مشروع الواجهات في المادة، وأخذت درجتك، وبقيت الملفات في مجلد على الحاسوب. بعد سنة يطلب منك مسؤول تدريب أن ترسل أعمالك، فتفتح المجلد فلا تجد إلا لقطات شاشة بلا شرح. القيمة الحقيقية للمشروع ضاعت لأنك لم تكتب قصته.

> **رأي تسوى**: نرى أن مراجع الملفات يقرأ طريقة تفكيرك قبل أن ينظر إلى ألوانك. شاشة متوسطة الجمال مع شرح صادق لقرارك تنفع صاحبها أكثر من شاشة لامعة بلا تفسير. لذلك ننصح بأن تكتب الدراسة وأنت تنجز المشروع، لا بعد التسليم بشهور.

## ما الذي يجعل مشروع واجهات مستخدم دراسة حالة؟

الدراسة تجيب على أربعة أسئلة بترتيب ثابت: ما المشكلة؟ لمن؟ ماذا جربت؟ وماذا تغير بعد ذلك؟ إن غاب أحدها صار العرض معرضاً للصور. وإن كان مشروعك واجباً جامعياً فلا بأس، فقد تكون المشكلة التي طلبها المقرر هي المشكلة التي تشرحها، ما دمت تقول ذلك بصراحة.

وللمسار العام لتعلم التصميم راجع [خارطة تعلم UI/UX](https://tiswa.app/blog/ui-ux-roadmap/)، وعن طريقة عرض الأعمال راجع [بناء ملف الأعمال](https://tiswa.app/blog/build-a-portfolio/).

## كيف أبني هيكل الدراسة خطوة بخطوة؟

1. **اكتب المشكلة في جملتين**: مثال للتوضيح: طالب يريد معرفة موعد قاعته القادمة لكنه يحتاج أربع نقرات. حدد من هو المستخدم وما الذي يفشل معه.
2. **ارسم النسخة الأولى كما هي**: احتفظ بصورة من أول تصميم حتى لو بدا لك ضعيفاً، فهو نقطة البداية التي تقاس بها كل تحسينات لاحقة.
3. **قيّمها بالقواعد العشر**: مر على الشاشة وسجل كل قاعدة تخرقها وأين.[^1]
4. **افحص إمكانية الوصول**: التباين وحجم النص وهل يمكن الوصول لكل شيء من لوحة المفاتيح، وفق معايير WCAG.[^2]
5. **جرب مع شخصين أو ثلاثة**: اطلب منهم إنجاز مهمة واحدة وراقب دون أن تساعدهم. سجل ما رأيته فعلاً، لا ما توقعته.
6. **عدّل واعرض القبل والبعد**: لكل تعديل سطر يشرح السبب.

![6 خطوات: كيف أبني هيكل الدراسة خطوة بخطوة (اكتب المشكلة في جملتين، ارسم النسخة الأولى كما هي، قيّمها بالقواعد العشر، …)](https://tiswa.app/assets/blog/ui-design-case-study-student-project/ui-design-case-study-student-project-inline-1-ar.webp)


## كيف أقيّم تصميمي بالقواعد العشر؟

تسرد مجموعة نيلسن نورمان عشر قواعد عامة لتقييم الواجهات، منها: إظهار حالة النظام، والتوافق بين النظام والعالم الحقيقي، وحرية المستخدم وتحكمه، والاتساق والمعايير، ومنع الخطأ، والتعرف بدل التذكر، والمرونة والكفاءة، والتصميم البسيط، ومساعدة المستخدم على اكتشاف الأخطاء وإصلاحها، والتوثيق والمساعدة.[^1] لا تحاول تطبيقها كلها على كل شاشة، بل ابحث عن اثنتين أو ثلاث تنطبق على مشكلتك.

| ما لاحظته في الشاشة (مثال) | القاعدة المرتبطة | التعديل المقترح |
|---|---|---|
| زر الحفظ لا يعطي أي رد | إظهار حالة النظام | رسالة تأكيد قصيرة بعد الحفظ |
| رمز بلا نص لا يفهمه أحد | التعرف بدل التذكر | أضف نصاً بجانب الرمز |
| لا يمكن التراجع عن الحذف | حرية المستخدم وتحكمه | زر تراجع بعد الحذف |
| كلمة "إرسال" في صفحة وفي أخرى "تأكيد" | الاتساق والمعايير | وحّد التسمية |

![جدول: كيف أقيّم تصميمي بالقواعد العشر (زر الحفظ لا يعطي أي رد، رمز بلا نص لا يفهمه أحد، لا يمكن التراجع عن الحذف، …)](https://tiswa.app/assets/blog/ui-design-case-study-student-project/ui-design-case-study-student-project-inline-2-ar.webp)


هذا الجدول أمثلة توضيحية من عندنا وليست من مشروعك. اكتب أنت ملاحظات شاشتك الحقيقية بنفس الطريقة.

## ماذا أفحص في إمكانية الوصول؟

المرجع الرسمي هنا هو الدليل السريع لمعايير WCAG من W3C. معاييره مرتبة تحت أربعة مبادئ: قابل للإدراك، وقابل للتشغيل، وقابل للفهم، وقوي، وكل معيار له مستوى A أو AA أو AAA.[^2] لمشروع جامعي يكفي أن تفحص أموراً بسيطة وتكتبها في دراستك.

- هل يظهر النص بوضوح فوق الخلفية؟ استعمل أداة قياس التباين وسجل النتيجة.
- هل كل صورة معبرة لها نص بديل؟
- هل يمكن الانتقال بين العناصر بلوحة المفاتيح؟
- هل الأزرار كبيرة بما يكفي للمس؟
- هل الألوان وحدها هي التي تنقل المعنى؟ أضف نصاً أو رمزاً.
- هل تعمل الصفحة بالعربية من اليمين إلى اليسار دون كسر في الترتيب؟

واكتب في دراستك ما فحصته فقط. إن لم تقس التباين فلا تقل إنه متوافق، قل إنه فحص بصري وإنك تخطط لقياسه.

## كيف أعرض الدراسة دون أن أبالغ؟

الصدق يجعل الدراسة أقوى. كتب كثيرون "زادت سهولة الاستخدام بنسبة كذا" دون أن يقيسوا شيئاً، وأي مراجع منتبه يلاحظ. اكتب ما حدث فعلاً: "جربت الشاشة مع ثلاثة زملاء، وتعثر اثنان منهم في خطوة الدفع، فبسطتها". هذه جملة تثبت أنك اختبرت.

ولا تضع أسماء شركات أو شعارات لم تعمل معها، ولا تسمِّ المشروع تجربة عمل إن كان واجباً. اذكر المقرر والفصل والدور الذي قمت به إن عملت ضمن فريق. وحين تشرح مشروعك شفهياً في مقابلة فراجع [كيف تشرح مشروعك في مقابلة التدريب](https://tiswa.app/blog/coop-interview-explain-project/).

> **نصيحة**: ضع ملخصاً من أربعة أسطر في أول الدراسة: المشكلة، دورك، أداتك، وأهم ما تغير. المراجع الذي لا يقرأ إلا الرأس يخرج بالصورة كاملة.

## كيف أوزع وقتي على مشروع واجهات خلال الفصل؟

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

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

وأخيراً راجع الدراسة بعين غريب: اطلب من زميل لم يرَ المشروع أن يقرأ الملخص ويخبرك بما فهمه، فإن أخطأ في المشكلة فأعد كتابتها قبل أن ترسل الملف لأحد. هذه المراجعة السريعة تكشف ما لا تراه وأنت قريب من عملك.

## ما أخطاء الطلاب في عرض مشاريع الواجهات؟

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

وبعد أن تكتب الدراسة، ابحث عن أدوات التصميم التي تحتاجها بسعر الطلاب في [خصومات الطلاب](https://tiswa.app/deals/) وقارن بينها في [فهرس خصومات الطلاب](https://tiswa.app/deals/student-discount-index/). وتذكر أن تنمية مهاراتك في العرض والحوار جزء من القصة، وهو ما يشرحه [دليل المهارات الناعمة](https://tiswa.app/blog/soft-skills/).

أدوات التصميم والنشر تكلف حين تتراكم. انضم إلى تسوى ببريدك الجامعي لترى خصومات الطلاب قبل أن تدفع السعر الكامل. [انضم إلى تسوى](https://tiswa.app/join/)

## أسئلة

### كيف أحول مشروع واجهات مستخدم جامعي إلى دراسة حالة؟

اكتب المشكلة والمستخدم وما جربت وما غيرته بعد الاختبار، واعرض النسخة الأولى والمعدلة مع سبب كل تعديل.

### هل يمكن تعلم ui ux بدون برمجة؟

نعم، تقييم الشاشات بالقواعد العشر وفحص إمكانية الوصول وكتابة القرارات لا تتطلب كتابة كود.[^1][^2]

### كيف اتعلم ui ux مجانا؟

مرجعا نيلسن نورمان وW3C مفتوحان للقراءة، فابدأ بتقييم شاشة واحدة بهما ثم اكتب دراستها. وللخطة الكاملة راجع خارطة التعلم في المدونة.[^1][^2]

### ما هو تخصص ui ux؟

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

### ما معايير إمكانية الوصول التي أرجع إليها؟

الدليل السريع لـWCAG من W3C، ومعاييره مرتبة بمستويات A وAA وAAA.[^2]

### هل أضع مشروع المقرر في ملف أعمالي؟

نعم، بشرط أن تسميه مشروع مقرر، وتذكر دورك فيه إن كان جماعياً، ولا تقدمه كأنه عمل لعميل.


## المصادر

[^1]: Nielsen Norman Group: 10 Usability Heuristics for User Interface Design, https://www.nngroup.com/articles/ten-usability-heuristics/
[^2]: W3C WAI: How to Meet WCAG (Quick Reference), https://www.w3.org/WAI/WCAG22/quickref/