الشكل رقم (5-6) - كتاب التصميم الرقمي - الصف 12 - الفصل 1 - المملكة العربية السعودية

الهدف الثاني أن يكون الطلبة قادرين على التمييز بين واجهة المستخدم UI وتجربة المستخدم UX.

عند تصميم واجهات المواقع الإلكترونية وتصميم التطبيقات الذكية هناك بعض المصطلحات التي ينبغي التمييز بينها وهي:

تصميم واجهة المستخدم UI - User Interface Design

تصميم تجربة المستخدم UX - User Experience Design

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

تصميم واجهة المستخدم UI:

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

مثال:

واجهة المستخدم UI User Interface: تشير إلى الشاشات والأزرار والمفاتيح والرموز والعناصر المرئية الأخرى التي يتفاعل معها المستخدم عند استخدام موقع ويب أو تطبيق أو أي منصة رقمية.

تجربة المستخدم UX User Experience: تشير إلى التفاعل الكامل الذي يحظى به المستخدم مع المنتج، بما في ذلك ما يشعر به حيال ذلك التفاعل.

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

الشكل رقم (5-6): أمثلة على واجهة المستخدم الجيدة وغير الجيدة

الهدف الثاني أن يكون الطلبة قادرين على التمييز بين واجهة المستخدم UI وتجربة المستخدم UX. عند تصميم واجهات المواقع الإلكترونية وتصميم التطبيقات الذكية هناك بعض المصطلحات التي ينبغي التمييز بينها وهي: تصميم واجهة المستخدم UI - User Interface Design تصميم تجربة المستخدم UX - User Experience Design وكما تلاحظ فالمصطلحان يركزان على المستخدم، فهو الرابط المشترك للهدف التصميمي؛ فأحدهما يركز على الواجهة التي تظهر للمستخدم، والآخر يركز على التجربة التي سوف يقوم بها المستخدم. تصميم واجهة المستخدم UI: يدور حول كيفية ظهور واجهات المنتج وعملها، فهي منتج ملموس وظاهر بما في ذلك الأزرار والطباعة والألوان وما إلى ذلك، ويتعين على مصممي واجهة المستخدم بشكل أساسي التعامل مع التصميمات القابلة للتطوير وتحسين ظهورها من خلال تقليل الوقت المطلوب للمستخدم؛ للوصول إلى هدفه أثناء التعامل مع المنتج، وجعل تجربته ممتعة من الناحية الجمالية. مثال: واجهة المستخدم UI User Interface: تشير إلى الشاشات والأزرار والمفاتيح والرموز والعناصر المرئية الأخرى التي يتفاعل معها المستخدم عند استخدام موقع ويب أو تطبيق أو أي منصة رقمية. تجربة المستخدم UX User Experience: تشير إلى التفاعل الكامل الذي يحظى به المستخدم مع المنتج، بما في ذلك ما يشعر به حيال ذلك التفاعل. في حالة التصميم غير الجيد لواجهة المستخدم UI، فقد يشعر مستخدمو واجهة المستخدم بالارتباك عند اختيار الزر الصحيح. ولكن في واجهة المستخدم الجيدة، يمكننا أن نرى الفرق بين زر "إلغاء" و "تأكيد"، والذي سيجعل حياة المستخدمين أسهل بكثير وأبسط عند استخدام هذه الواجهة. --- SECTION: الشكل رقم (5-6) --- الشكل رقم (5-6): أمثلة على واجهة المستخدم الجيدة وغير الجيدة --- VISUAL CONTEXT --- **DIAGRAM**: أمثلة على واجهة المستخدم الجيدة وغير الجيدة Description: A diagram illustrating good and bad user interface design through two pairs of buttons. The 'Good' example shows a green checkmark and the text 'جيد' (Good) below two buttons: 'تأكيد' (Confirm) on the right (green, prominent) and 'إلغاء' (Cancel) on the left (gray with green border, less prominent). The 'Not Good' example shows a red 'X' and the text 'غير جيد' (Not Good) below two buttons: 'إلغاء' (Cancel) on the right (green, prominent) and 'تأكيد' (Confirm) on the left (gray with green border, less prominent). This highlights the importance of button placement and visual hierarchy for user clarity, especially in right-to-left contexts where 'Confirm' is typically on the right. Context: This diagram serves as a visual example to differentiate between effective and ineffective user interface design, specifically focusing on the placement and visual emphasis of 'Confirm' and 'Cancel' buttons to enhance user experience.