ماهية تصميم واجهة المستخدم UI وتجربة المستخدم UX - التصميم الرقمي - ثالث ثانوي

الفصل السادس تصميم واجهات الموقع الإلكتروني Web Site Interface Design UX UI الفكرة المحورية 1. ماهيّة تصميم واجهة المستخدم ال وتجربة المستخدم UX. 2. الخطوات الإجرائية الأساسية لتصميم واجهات الموقع الإلكتروني. 3. الخطوات الإجرائية الأساسية لرسم المخطّطات الهيكلية WirFrames. 4. الخطوات الإجرائية الأساسية للتصميم المرئي. استخدام التصاميم المحققة للتواصل الفاعل مع المجموعة المستهدفة، وصياغة رسالة اتصالية للتأثير تقوم على معرفة الممارسات العالمية، وتحليل مكونات الثقافية السعودية وإبراز العمق التاريخي والقيم الوطنية. أهداف الفصل: يتوقع من الطلبة بعد دراسة هذا الموضوع أن يكونوا قادرين على: - مناقشة أهمية تصميم واجهة المستخدم UI وتجربة المستخدم UX - تمييز الفرق بين واجهة المستخدم UI وتجربة المستخدم UX. معرفة مبادئ تصميم واجهة المستخدم UI. - تقييم تجربة المستخدم UX للمواقع الإلكترونية وفق عوامل احتياجات الناس وسهولة الاستخدام. . تطبيق الخطوات الإجرائية لبدء العمل في أحد برامج تصميم واجهة المستخدم ال. . تطبيق الخطوات الإجرائية للتعامل مع الأدوات الأساسية لبرنامج تصميم واجهة المستخدم UI. رسم المخطط الهيكلي لصفحة التصميم بأنواعه المختلفة الورقي والرقمي تمهيدًا للتصميم المرئي. - إنشاء الطبقات في برنامج Adobe XD. معرفة التصميم المرئي وعناصره ومبادئه. - تحويل المخطط الهيكلي من التصميم الرقمي إلى التصميم المرئي. وزارة التعليم Ministry of Education 2024-1446

1-6 ماهية تصميم واجهة المستخدم ال وتجربة المستخدم UX المفاهيم الرئيسة الذكاء الاصطناعي - واجهة المستخدم الا - تجربة المستخدم UX. يتوقع من الطلبة بعد دراسة هذا الموضوع أن يكونوا قادرين على: أهداف الموضوع .1 مناقشة أهميّة تصميم واجهة المستخدم ال وتجربة المستخدم UX. 2. تمييز الفرق بين واجهة المستخدم ال وتجربة المستخدم UX. رابط الدرس www.ien.edu.sa 3 تقييم تجربة المستخدم UX للمواقع الإلكترونية وفق عوامل احتياجات الناس وسهولة الاستخدام. الهدف الأول - أن يكون الطلبة قادرين على مناقشة أهمية تصميم واجهة المستخدم الا وتجربة المستخدم UX. VISION G AR 2030 الصفحة الرئيسية بية السعودية 2030 حول المملكة العربية السعودية المريخ الاعلامي التواصل ولى العهد، رئيس مجلس الوزراء ورئيس مجلس الشؤون الاقتصادية والتنمية - رئيس لجنة برنامج تنمية القدرات البشرية صاحب السمو الملكي الأمير محمد بن سلمان بن عبدالعزيز آل سعود أصبحت الأعمال - والحياة بشكل عام - تعتمد بشكل متزايد على الإنترنت وتطبيقات الويب وتطبيقات الأجهزة المحمولة؛ لذلك وجدت المنظمات بمختلف أهدافها في القطاع الحكومي والقطاع الخاص، وبمختلف الأنشطة الخدمية في التعليم، وفي السياسة، وفي التجارة .. و غيرها، أن أفضل طريقة للتعريف عن أهدافها أو تقديم خدماتها والتواصل مع المجموعات المستهدفة؛ إنشاء موقع إلكتروني للمنافسة على الويب بإعطاء الأولوية لبناء واجهة مستخدم جذابة وفعالة تعمل على تحسين تجربة هي المستخدم. 192 وزارة التعليم 2024-1446 tion

وتشغل المملكة العربية السعودية المرتبة الثانية عالميًا بين دول مجموعة العشرين ضمن تقرير التنافسية الرقمية لعام 2021 الصادر من المركز الأوروبي للتنافسية الرقمية. أ. واجهة المستخدم User Interface: هي الوسيلة أو العنصر المادي الذي يتفاعل معه المستخدم لتحقيق هدف يريد الوصول إليه؛ حيث تهتم واجهة المستخدم بالتصميم المرئي، وهو مكان تحدث فيه التفاعلات بين البشر والآلات لإكمال مهمة أو تحقيق هدف معين. مثل محرك بحث للوصول إلى معلومات. موقع للتسوق الإلكتروني لغرض شراء المنتجات. تنزيل تطبيق معين. تتكون واجهات المستخدم من أجهزة الإدخال الأجهزة التي تتحكم في الجهاز من قبل الطرف البشري مثل: لوحة المفاتيح أو الفأرة أو عصا التحكم)، وأجهزة الإخراج الأجهزة التي توفّر معلومات للمستخدمين مثل: الشاشات أو مكبرات الصوت أو الطابعات). تعمل أجهزة الإدخال مع أجهزة الإخراج حتى يتمكن المستخدمون من التحكم الكامل في الجهاز. <tr> </tr> <tr> tous" border="0" cellspac <td valign="top" width="100" he <td height="20" class="style_ <td height="80" valign="top"> margin:4px "> الشكل رقم (1-6) واجهة سطر الأوامر 02:49 193 وزارة التعليم Ministry of Education 2024-1446 الشكل رقم (2-6) واجهة مستخدم رسومية أنواع واجهات المستخدم: 1. واجهة سطر الأوامر هي واجهة تسمح للمستخدم أن ينفّذ الأوامر عن طريق طباعة الأوامر باستخدام لوحة المفاتيح، وتخرج النتيجة على شكل نص مطبوع على الشاشة. 2 واجهات المستخدم الرسومية: هي عبارة عن عرض رسومي أو بياني، في نافذة واحدة أو عدة نوافذ، يتكون من عدة مكونات أو أزرار للاختيار من التطبيقات والمهام المتنوعة.

3 واجهة المستخدم التي تدعم الصوت: هي تقنية تعتمد على الذكاء الاصطناعي تتيح للأشخاص استخدام أصواتهم للتفاعل مع أجهزة الحاسب مع إمكانية تنفيذ الأوامر والطلبات الخاصة بالمستخدم دون استخدام اليدين أو شاشات اللمس وهي شكل من أشكال تفاعل الإنسان والحاسب. CHAT GPT الشكل رقم (3-6) واجهة مستخدم تدعم الصوت ب تجربة المستخدم User Experience: وتشمل جميع أنواع التفاعل الذي يصدر عن المستخدمين للواجهة وخدماتها ومنتجاتها، ويشمل ذلك مشاعرهم التي يشعرون بها أثناء التفاعل مع منتج ما سواء أكان ذلك الشعور سلبًا أم إيجابًا ، فعملية رضا المستخدمين وولائهم تأتي من خلال تحسين قابلية الاستخدام وسهولته والمتعة التي تحدث نتيجة التفاعل بين المستخدم والمنتج. ويمكن التعرف على تجربة المستخدم وتطويرها بطرق متنوعة منها: UI UI UX UX المستخدم المقابلات وذلك بجمع مجموعة من البيانات الكمية والنوعية والسلوكية لفهم احتياج المستهلكين، وللتعرف بشكل تفصيلي على المشكلة التي يعالجها المنتج. الشكل رقم :(4-6) مثال توضيحي على تجربة استطلاع الرأي: ويمكن جمع المعلومات المتنوعة من خلال نشر الاستبانات واستطلاعات الرأي حول المنتج. تحليل المستخدمين ورغباتهم من خلال الكشف عن رؤى حول سلوك المستخدمين على موقع الويب، والتجارة الإلكترونية والمنتجات وغيرها. تجربة المستخدم مرحلة يمكن فيها التخطيط قبل البدء بواجهة المستخدم، ليس في مجال الويب والمنتجات الرقمية فحسب، بل في كافة المجالات عند الرغبة في إنجاز شيء ما. مهام مصمم واجهة المستخدم الا ومصمم تجربة المستخدم UX UI يؤدي كل من مصممي الا و UX أدوارًا رئيسة في دورة حياة تطوير المنتج: يركز مصممو UX عملهم على تجربة المستخدم مع المنتج، فالهدف هو صنع منتجات عملية وسهلة الوصول وممتعة للاستخدام قد تتضمن المهام الشائعة لمصمم تجربة المستخدم UX ما يلي: إجراء بحث المستخدم لدراسة أهدافه واحتياجاته وسلوكياته وكافة الأمور ذات العلاقة بتفاعله مع المنتج. 194 وزارة التعليم Ministry of Education 2024-1446

- إنشاء خرائط رحلة المستخدم لتحليل كيفية تفاعل العميل مع المنتج. بناء إطارات ونماذج مُفصلة للتركيز على الشكل الذي سيبدو عليه المنتج النهائي. ينشئ مصممو واجهة المستخدم الا الأجزاء الرسومية لتطبيقات الأجهزة المحمولة ومواقع الويب والعناصر التي يتفاعل معها المستخدم مباشرة على عكس UX ، ويسعى مصمم واجهة المستخدم إلى جعل التطبيقات ومواقع الويب جذابة بصريا وسهلة التنقل، كما تشمل المهام الشائعة لمصمم واجهة المستخدم ما يلي: - تنظيم تخطيطات الصفحة - اختيار لوحات الألوان والخطوط. تصميم عناصر تفاعلية، مثل أدوات التمرير والأزرار والتبديل والقوائم المنسدلة والحقول النصية. عمل إطارات وتخطيطات سلكية عالية الدقة لإظهار الشكل النهائي للتصميم. العمل عن كتب مع المطورين؛ لتحويل التصاميم إلى منتج عملي. مهام مصمم واجهة المستخدم الا ومصمم تجربة المستخدم UX مصمم تجربة المستخدم UX مصمم واجهة المستخدم ال التصميم المرئي اختيار الألوان والطباعة ل تصميم التفاعل رسم رحلة المستخدم مخططات هندسة المعلومات الجمالية البصرية النمذجة والرسومات والتخطيطات نماذج الهياكل الأولية والبحث النشاط التطبيقي ناقش مع مجموعتك أهمية تصميم واجهة المستخدم الا وتجربة المستخدم UX للتوصل إلى تحديد ما يأتي: مهارات مصممي واجهة المستخدم مهارات مصممي تجربة المستخدم. المهارات المشتركة بين مصممي واجهة المستخدم ومصممي تجربة المستخدم. UI 5 UX 195 وزارة التعليم Ministry of Education 2024-1446

الهدف الثاني 3 أن يكون الطلبة قادرين على التمييز بين واجهة المستخدم الا وتجربة المستخدم UX. عند تصميم واجهات المواقع الإلكترونية وتصميم التطبيقات الذكية هناك بعض المصطلحات التي ينبغي التمييز بينها وهي: تصميم واجهة المستخدم UI - User Interface Design تصميم تجربة المستخدم UX - User Experience Design وكما تلاحظ فالمصطلحان يركزان على المستخدم، فهو الرابط المشترك للهدف التصميمي؛ فأحدهما يركز على الواجهة التي تظهر للمستخدم، والآخر يركز على التجربة التي سوف يقوم بها المستخدم. تصميم واجهة المستخدم UI: يدور حول كيفية ظهور واجهات المنتج وعملها، فهي منتج ملموس وظاهر بما في ذلك الأزرار والطباعة والألوان وما إلى ذلك، ويتعين على مصممي واجهة المستخدم بشكل أساسي التعامل مع التصميمات القابلة للتطوير وتحسين ظهورها من خلال تقليل الوقت المطلوب للمستخدم للوصول إلى هدفه أثناء التعامل مع المنتج، وجعل تجربته ممتعة من الناحية الجمالية. مثال: واجهة المستخدم User Interface: تشير إلى الشاشات والأزرار والمفاتيح والرموز والعناصر المرئية الأخرى التي يتفاعل معها المُستخدم عند استخدام موقع ويب أو تطبيق أو أي منصة رقمية. تجربة المستخدم User Experience : تشير إلى التفاعل الكامل الذي يحظى به المستخدم مع المنتج، بما في ذلك ما يشعر به حيال ذلك التفاعل. حالة التصميم غير الجيد لواجهة المستخدم الا فقد يشعر مستخدمو واجهة المستخدم بالارتباك عند اختيار الزر الصحيح، ولكن في واجهة المستخدم الجيدة، يمكننا أن نرى الفرق بين زر "إلغاء" و " زر "تأكيد"، والذي سيجعل حياة المستخدمين أسهل بكثير وأبسط عند استخدام هذه الواجهة. 196 تأكيد إلغاء غير جيد X تأكيد إلغاء الشكل رقم 5-6) أمثلة على واجهة المستخدم الجيدة وغير الجيدة وزارة التعليم Ministry of Education 2024-1446

تصميم تجربة المستخدم UX يدور حول الجانب النفسي للمستخدم فتجربة المستخدم UX عاطفية في الغالب، وتركز على تصرفات المستهلك ، مثل كيفية تفاعل المستخدم عند استخدام منتج أو المشاعر التي يشعر بها أثناء استخدام المنتج. يركز تصميم تجربة المستخدم UX على الأهداف التي يحاول المستخدمون تحقيقها من خلال المنتج وما احتياجاتهم، والمشاعر التي يمرون بها ، والإستراتيجية التي سيتم تطبيقها، والتفاعلات التي من المحتمل أن يقوموا بتنفيذها من أجل الوصول إلى أهدافهم. الجانب النفسي الإنشاء التصميم ess قابلية الاستخدام التحليل الشكل رقم (6-6) صورة توضيحية لكيفية تصميم تجربة المستخدم تصميم واجهة المستخدم الا يركز على التصميم المرئي للواجهة الرقمية للبرامج أو التطبيقات أو مواقع الويب. وتشمل عملية تصميم واجهة المستخدم ضبط الخصائص المرئية والتفاعلية للمنتجات الرقمية، مما يضمن أن تكون الواجهة واضحة للمستخدم لاستخدامها بسهولة، وأن يكون شكلها ملائمًا ومريحا للعين بشكل عام. - تصميم تجربة المستخدم :UX: يساعد في تحقيق أفضل تجربة ممكنة للمستخدم أثناء استخدام المُنتج؛ حيث يهدف إلى صنع منتجات عملية وسهلة الوصول وممتعة للمستخدم . النشاط التطبيقي تصفح عددًا من المواقع الإلكترونية الجديدة أو التي سبق أن استفدت منها، ثم: اختر أفضلها من وجهة نظرك. حلل نقاط القوة في تصميم واجهة المستخدم الا المتوافق مع تصميم تجربة المستخدم UX. أعد ذلك في عرض تقديمي وناقش زملاءك. 197⠀⠀⠀ وزارة التعليم 2024-1446 Education

أن يكون الطلبة قادرين على تقييم تجربة المستخدم UX للمواقع الإلكترونية وفق احتياجات الهدف الثالث 3 الناس وسهولة الاستخدام. تقييم تجربة المستخدم User Experience Design UX يعد الويب أحد أهم المجالات التي يتم فيها تطبيق تصميم تجربة المستخدم، فتصميمها يتم باستخدام مجموعة من التقنيات التي تزيد من رضا المستخدمين من خلال تحسين قابلية الاستخدام والمفاهيم المتعلقة بالتفاعل بين المستخدمين البشريين وأجهزة الكمبيوتر ، وتعد تجربة المستخدم جانبًا مهما في إنشاء أنواع مختلفة من المنتجات والخدمات. في وقت مضى كان توفير موقع على شبكة الإنترنت بالنسبة للمؤسسات أو الشركات أمرًا مهمًا، ولكن في الوقت الحاضر أصبح الهدف الأساسي بل أيضًا أصبح من الأولويات مراعاة تجربة المستخدم. ما الذي يريده الناس وماذا يحتاجون؟ فهم احتياجات المجموعة المستهدفة، ومعرفة ماذا يريدون؛ يساعد على معرفة العوامل التي تميُّز تصميم تجربة المستخدم ومنها: مفيد Useful موجود Findable مرغوب Desirable القيمة سهل الاستخدام Useable موثوق Credible Value إمكانية الوصول Accessible الشكل رقم (7-6) العوامل التي تميز تصميم تجربة المستخدم سهولة الاستخدام هي المستوى الأساسي لتجربة المستخدم :UX من الصعب تصميم تجربة مستخدم وظيفية بدون التركيز على جانب سهولة الاستخدام، ولن يتمكن المستخدمون من تحقيق الأهداف بطريقة فعالة ومرضية، وحين يجد المستخدمون صعوبة في استخدام الموقع فإنهم سيغادرونه للبحث عن بديل؛ لذلك لابد من التأكد أثناء تطوير موقع ويب من أنه قابل للاستخدام لتقليل مخاطر فقدان المستخدمين، وهناك بعض الأسئلة التي يمكن طرحها لمعرفة المواصفات التي تزيد من سهولة الاستخدام التي تركز على الناس ورضاهم ، وكيف يستخدمون ويفهمون الأشياء، ويزيد من قابلية الاستخدام التي تعني كيفية الاستخدام والإنجاز دون أن يكون في ذلك صعوبة لأي شخص متوسط القدرات والخبرات والمعرفة، ومن هذه الأسئلة: 198 وزارة التعليم Ministry of Education 2024-1446

مفيد هل يقدم مايفيد للناس؟ قابل للتعلم هل يستطيع الناس معرفة كيفية استخدامه؟ قابل للتذكر هل يتعين على المستخدمين إعادة تعلم بعض الأشياء في كل مره يستخدمونه؟ كفاءة هل يتم القيام بذلك مع قدر معقول من الوقت والجهد؟ مرغوب فيه هل يريده الناس؟ مبهج هل تجربة الاستخدام ممتعة؟ يختلف مفهوم سهولة الاستخدام عن مفهوم تجربة المستخدم فالهدف من المفهومين مختلف، فمن منظور موقع الويب يتمثل الهدف الرئيس لسهولة الاستخدام في جعل موقع الويب سهل الاستخدام، مما يسمح للمستخدمين بتحقيق أهدافهم من التفاعل مع موقع الويب. أما تجربة المستخدم فتهدف إلى منح المستخدمين متعة الاستخدام. سهولة الاستخدام + المنفعة = الفائدة 199 وزارة التعليم Ministry of Education 2024-1446

يمكن للمستخدمين تجربة وظائف الموقع فقط من خلال الواجهة، وللاستفادة من سهولة الاستخدام هناك بعض الأمور الداعمة للوصول إلى تجربة المستخدم الجيدة، ومنها: تضمين بعض الخدمات التي يحتاجها المستخدمون، مثل: إجراء مكالمات هاتفية أو كتابة مستندات أو التسوق عبر الإنترنت أو البحث عن معلومات. مراعاة احتياجات المستخدمين التي تنطوي على الهوية الذاتية والارتباط بالآخرين والرضا و تُقيم من خلال التأثير العاطفي والنفسي. يمكن أن تأتي متعة الاستخدام من سهولة الاستخدام الجيدة في تنفيذها. 200 النشاط التطبيقي بمشاركة مجموعة من زملائك قارن بين 3 مواقع لمتاجر إلكترونية لها النشاط التجاري نفسه، مثل: أثاث، أو قطع ملابس وغيره، قيم تجربة المستخدم فيها. ضمن رأي الفريق في عرض تقديمي واعرضه على طلاب الصف. اختر واحد من المواقع الإلكترونية التي شعرت بالمتعة في استخدامه، والناتجة من سهولة الحصول على المعلومة فيه. شارك زملائك تصفّح الموقع من أجل الاستفادة من بنائه التصميمي المرئي ومن حيث التصنيف لسهولة الاستخدام. وزارة التعليم Ministry of Education 2024-1446