ما الواجهة الأمامية؟ وتجربة المستخدم
نتعرف على الجزء الذي يراه المستخدم من الموقع، وعلى ما يجعل تجربته سهلة أو صعبة. ⏱ نحو 15 دقيقة.
- تفرّق بين الواجهة الأمامية والواجهة الخلفية.
- تفرّق بين واجهة المستخدم
UIوتجربة المستخدمUX. - تذكر مبادئ تجربة المستخدم الستة.
- تحلّل واجهة موقع بهذه المبادئ.
١الأمامية والخلفية
في المطعم صالة يجلس فيها الزبون ويرى القائمة ويطلب، ومطبخ لا يراه يُحضَّر فيه الطعام. المواقع كذلك:
| الجزء | ماذا يفعل؟ | تشبيهه |
|---|---|---|
الواجهة الأمامية Front-end | كل ما يراه المستخدم ويضغط عليه في المتصفح: النصوص والصور والأزرار والنماذج. | صالة المطعم |
الواجهة الخلفية Back-end | ما يعمل في الخادم: حفظ البيانات، والتحقق من كلمة المرور، وتنفيذ الطلبات. | المطبخ |
هذا المقرر عن الواجهة الأمامية. أدواتها ثلاث لغات يفهمها كل متصفح: HTML للمحتوى، وCSS للشكل، وJavaScript للتفاعل. أما الواجهة الخلفية فلها مقرر لاحق.
٢واجهة المستخدم وتجربة المستخدم
مصطلحان ستسمعهما كثيرًا:
| المصطلح | السؤال الذي يجيب عنه | مثال من باب البيت |
|---|---|---|
| واجهة المستخدم UI | كيف يبدو الموقع؟ الألوان والخطوط والأزرار. | شكل الباب ولون المقبض |
| تجربة المستخدم UX | كيف يشعر المستخدم وهو يستخدمه؟ هل وصل إلى هدفه بسهولة؟ | هل يُفتح الباب بسهولة، أم تدفعه وهو يُسحب؟ |
الواجهة الجميلة قد تكون تجربتها سيئة: زر أنيق لكنه صغير لا يُضغط على الجوال. المصمم الجيد يهتم بالاثنين.
٣قارن بنفسك
صفحتان تبيعان القهوة. أيهما تفهم منها المطلوب في ثانيتين؟
الأولى: ألوان صارخة، ونص باهت لا يُقرأ، وروابط «اضغط هنا» لا تقول إلى أين، ولا يُعرف ما الهدف. الثانية: عنوان واضح، وجملة تشرح، وزر واحد بفعل صريح.
٤مبادئ تجربة المستخدم
| المبدأ | معناه | سؤال تسأله لنفسك |
|---|---|---|
| الوضوح | يفهم الزائر الصفحة من أول نظرة. | ما هدف هذه الصفحة؟ هل يظهر فورًا؟ |
| السهولة | يصل إلى هدفه بأقل عدد من الخطوات. | كم ضغطة يحتاج ليشتري؟ |
| الاتساق | الأزرار والألوان متشابهة في كل الصفحات. | هل الزر الأساسي بنفس الشكل في كل مكان؟ |
| السرعة | الصفحة تفتح بسرعة. | هل الصور كبيرة الحجم بلا داعٍ؟ |
| التجاوب | تعمل على الجوال والحاسوب. | هل جرّبتها على شاشة صغيرة؟ |
| إتاحة الوصول | يستخدمها الجميع، ومنهم ضعاف البصر. | هل النص واضح على خلفيته؟ هل للصور وصف؟ |
٥من مطوّر الواجهات الأمامية؟
هو من يحوّل التصميم (صورة الصفحة كما رسمها المصمم) إلى صفحة حقيقية تعمل في المتصفح. يسير العمل عادة هكذا:
- فهم الهدف: من سيستخدم الموقع؟ وماذا يريد؟
- المخطط الهيكلي: رسم بسيط لأماكن العناصر (الوحدة 2).
- التصميم: الألوان والخطوط والصور (الدرسان القادمان).
- البناء: كتابة HTML و CSS و JavaScript (من الوحدة 3).
- الاختبار: تجربة الصفحة على أجهزة ومتصفحات مختلفة.
توقّع وتحقّق
أي مما يلي من عمل الواجهة الأمامية؟
«هل يجد المستخدم ما يريد بسهولة؟» سؤال عن:
UX عن شعور المستخدم وسهولة الوصول إلى هدفه.أي لغة مسؤولة عن شكل الصفحة وألوانها؟
HTML للمحتوى، و CSS للشكل، و JavaScript للتفاعل.الزر الأساسي أزرق في صفحة وأحمر في أخرى. أي مبدأ خالفنا؟
الخلاصة
- الواجهة الأمامية ما يراه المستخدم في المتصفح، والخلفية ما يعمل في الخادم.
UI: كيف يبدو الموقع.UX: كيف يشعر المستخدم وهو يستخدمه.- مبادئ التجربة: الوضوح، والسهولة، والاتساق، والسرعة، والتجاوب، وإتاحة الوصول.
- أدوات الواجهة الأمامية:
HTMLللمحتوى، وCSSللشكل، وJavaScriptللتفاعل.
تحدٍّ تصميمي: حلّل واجهة موقع تعرفه
سهلاختر موقعًا أو تطبيقًا تستخدمه كثيرًا (مثل موقع جامعة أو متجر أو تطبيق حكومي)، وحلّل واجهته بمبادئ تجربة المستخدم. اكتب تحليلك في ورقة أو مستند، وسلّمه لمعلمك.
- اكتب اسم الموقع وهدفه في سطر.
- اذكر ثلاثة أشياء أعجبتك، وربط كل واحد بمبدأ من المبادئ الستة.
- اذكر شيئين يمكن تحسينهما، واقترح التحسين.
- جرّب الموقع على الجوال، واكتب ملاحظة واحدة عن التجاوب.