تصميم واجهات المستخدم - Lecture 6

تصميم واجهات المستخدم - Lecture 6

• التميز (Distinctiveness): يجب تمييز عناصر التحكم (controls) والجماعات (groups) والأزرار (buttons) والحقول (fields) عن بعضها البعض، وعن العناصر الأخرى على الشاشة.

• حدود عناصر التحكم: يجب ألا تلامس حدود عناصر التحكم (borders) حواف النافذة، أو بعضها البعض.

التركيز والتأكيد (Focus and Emphasis)

• العنصر الأبرز (Most prominent): يجب إبراز العنصر الأكثر أهمية أو الفكرة المركزية (Central idea).

• النقطة المركزية (Focal point): ركز على العنصر/الفكرة المركزية من خلال أدوات مختلفة مثل زيادة السطوع (brightness)، استخدام الألوان، تغيير الحجم.

• العناصر المتغيرة: يمكن استخدام هذه التقنيات لإبراز العناصر المتغيرة.

الخط المتميز (Distinctive typeface)

• الاختلاف في الخطوط: الاختلاف في الخطوط يجذب انتباه المستخدم و يُميّز بين عناصر الشاشة المختلفة.

• العناوين: يمكن استخدام الأحجام الأكبر من الخطوط لتحديد أهمية العناوين، ولكن يجب عدم إساءة استخدام ذلك في صفحات القراءة فقط (read-only). يجب التركيز على عناصر الشاشة و ليس العناوين.

تدكين، إمالة، تسطير، وميض (Bold, italic, underline, and blinking)

• تدكين (Bold): يعمل على إضافة ضوضاء أقل و يبرز العناصر المهمة.

• إمالة (italic): يضيف ضوضاء أقل من التدكين و أقل وضوحاً.

• تسطير (underline): يجذب الانتباه لكن قد يقلل من الوضوح، يجب استخدامه بحذر.

• وميض (blinking): يُعتبر أداة قوية لجذب الانتباه، لكن يجب استخدامه بحذر وبوعي لتجنب الإزعاج والإعياء البصري.

استخدام الخطوط والمحيطات (Using lines and surrounding boxes or frames)

• الخطوط (Lines): تستخدم للتأكيد وتوجيه انتباه المستخدم عبر الشاشة.

• الأحكام الأفقية (horizontal rulings): تستخدم كبديل للمباعدة عند تقسيم الشاشة إلى أجزاء.

• الأحكام العمودية (vertical rulings): تُستخدم للإشارة إلى اتجاه المسح.

• صناديق التحديد (check boxes) و أزرار الراديو (radio buttons): أحياناّ تكون الحدود المحيطة ضرورية لتمييز تلك المجموعات.

نصوص العنوان والهامش (Headers and footers)

• العنوان والهامش (Headers & Footers): يمكن تمييز صفحات غريبة أو متطابقة، أو صفحة البداية من خلال تحديدها.

الألوان (Colors)

• الألوان (colors): استخدام الألوان الداكنة والبراق (brighter) يجذب انتباه المستخدم.

• الوضوح (clarity): لا ينبغي استخدام أكثر من 4 ألوان في نفس الشاشة.

الحجم (Size)

• الحجم (Size): الأجسام الكبيرة تجذب الانتباه أسرع من الأصغر.

الصور المتحركة (Animation)

• الحركة (Movement): الحركة هي أداة قوية لجذب الانتباه، ولكن يمكن أن تكون مزعجة بدون ضرورة.

• الوضع (Positioning): وضع العنصر في مكان مناسب على الشاشة يمكن أن يسهل عملية جذب الانتباه.

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