Lec6.pdf

‫تصميم واجهات المستخدم‬ ‫‪Lecture 6‬‬  ‫التميز‬ ‫‪Distinctiveness‬‬ ‫ التميز ‪Distinctiveness‬‬ ‫– مفاتيح التحكم ‪ controls‬و حدود التجمعات ‪group borders‬‬ ‫والحقول ‪ Fields‬و األزرار ‪ buttons‬يجب أن تكون متميزة‬...

‫تصميم واجهات المستخدم‬ ‫‪Lecture 6‬‬  ‫التميز‬ ‫‪Distinctiveness‬‬ ‫ التميز ‪Distinctiveness‬‬ ‫– مفاتيح التحكم ‪ controls‬و حدود التجمعات ‪group borders‬‬ ‫والحقول ‪ Fields‬و األزرار ‪ buttons‬يجب أن تكون متميزة‬ ‫عن غيرها من العناصر‪.‬‬ ‫– عند وضع مفاتيح التحكم في الشاشة يجب مراعاة اآلتي‪:‬‬ ‫تمس حدود ‪ borders‬النافذة‪.‬‬ ‫ّ‬ ‫ يجب أن ال‬ ‫تمس بعضها البعض‪.‬‬ ‫ّ‬ ‫ يجب أن ال‬  ‫التميز‬ ‫‪Distinctiveness‬‬ ‫ التركيز والتأكيد ‪Focus and emphasis‬‬ ‫مكونات الشاشة يجب أن تؤ ّكد‬ ‫– بعض العناصر من ّ‬ ‫‪emphasized‬بشكل بصري مثل‪:‬‬ ‫العنصر األبرز ‪.Most prominent‬‬ ‫ ‬ ‫العنصر األكثر أهمية‪.‬‬ ‫ ‬ ‫الفكرة المركزية ‪Central idea‬أو النقطة المركزية ‪focal point‬‬ ‫ ‬ ‫العناصر المتغيرة‪.‬‬ ‫ ‬ ‫يمكن التأكيد على مكونات الشاشة باستعمال تقنيات مثل‪:‬‬ ‫ ‬ ‫– زيادة السطوع ‪.brightness‬‬ ‫– استخدام األلوان ‪.‬‬ ‫– تغيير الحجم‪.‬‬  ‫التميز‬ ‫‪Distinctiveness‬‬ ‫ الخط المتميز ‪distinctive typeface‬‬ ‫– االختالف في الخطوط يسترعى انتباه المستخدم ويمكن أن يستعمل‬ ‫مكونات الشاشة‪.‬‬ ‫للتفريق بين ّ‬ ‫– الرسائل األدكن أو األكبر يمكن أن تستعمل لتحديد قطع الشاشة‬ ‫األعلى مستوى مثل المستويات المختلفة من العناوين‪ ،‬إذا كانت‬ ‫العناوين تستعمل في البحث ‪.search‬‬ ‫– ال تستعمل الخطوط األكبر للدخول و التعديل وعرض شاشات‬ ‫القراءة فقط ‪ ، read-only‬ألن هذا سيضع تأكيدا أكثر من الالزم‬ ‫على العنوان نفسه ‪.‬التأكيد يجب أن يذهب لعناصر الشاشة و ليس‬ ‫للعنوان‪.‬‬  ‫التميز‬ ‫‪Distinctiveness‬‬ ‫ تدكين وإمالة وتسطير و وميض الخط‬ ‫– ‪Font Bold, italic, underline, and blinking‬‬ ‫– هذه التقنيات يمكن أن تستعمل لتوضيح االختالفات غير الملحوظة‬ ‫في عناصر الشاشة‬ ‫– استعمال التدكين ‪ bold‬يضيف ضوضاء أقل للتصميم ويبرز‬ ‫ضلة للكثير من‬ ‫العناصر المهمة‪.‬وعموما هي التقنية المف ّ‬ ‫المستخدمين‪.‬‬ ‫– الخط المائل ‪ italic‬بينما يضيف ضوضاء إال أنه أقل قابلية‬ ‫لالكتشاف و أقل وضوحا ‪.legibility‬‬  ‫التميز‬ ‫‪Distinctiveness‬‬ ‫التسطير أو ضع خط تحت الكلمة ‪ underlining‬أو الجملة ‪ ،‬يقوم بجذب‬ ‫–‬ ‫االنتباه ‪ ،‬لكنّه يضيف ضوضاء ويمكن أن يقلل من الوضوح‪ ،‬لذا يجب أن‬ ‫يستعمل بعناية‪.‬في واجهة المستخدم الرسومية يمكن استعمال التسطير لتعيين‬ ‫المكافئ للوحة المفاتيح ‪ keyboard equivalent‬أو أساليب تقوية الذاكرة‬ ‫‪.mnemonics‬‬ ‫الوميض ‪ blinking‬له قدرة عالية جدا لجذب اإلنتباه‪ ،‬لكنّه يقلل من القدرة‬ ‫–‬ ‫النص و يسبب اإلزعاج لكثير من الناس كما يمكن‬ ‫ّ‬ ‫على قراءة ‪readability‬‬ ‫أن يسبّب اإلعياء البصري ‪ visual fatigue‬إذا ما استعمل بإفراط‪.‬لذا‬ ‫يجب أن يستخدم للحاالت واألوقات الضرورية التي تتطلب إستجابة‬ ‫‪ response‬سريعة من المستخدم‪.‬‬ ‫يجب أن يكون المستخدم قادرا على إطفاء الوميض متي ما جذب انتباهه‪.‬‬ ‫–‬ ‫الوميض الموصى به هو ما بين ‪ 5 - 2‬هيرتز‪.‬‬ ‫الشكل ‪ 21‬يوضح استخدام التسطير لتوضيح االختصارات المكافئة في لوحة‬ ‫–‬ ‫المفاتيح‬  ‫التميز‬ ‫‪Distinctiveness‬‬ ‫استخدام التسطير‬  ‫التميز‬ ‫‪Distinctiveness‬‬ ‫ استخدام الخطوط و الصناديق أو اإلطارات‬ ‫‪Using lines and surrounding boxes or frames‬‬ ‫– استعمل الخطوط للتأكيد ولتوجيه نظر المستخدم خالل الشاشة‪.‬‬ ‫– اإستعمل األحكام األفقية ‪ horizontal ruling‬كبديل للمباعدة عند‬ ‫تقسيم الشاشة إلى أجزاء‪.‬‬ ‫– استعمل األحكام العمودية ‪ vertical ruling‬إلبالغ مشاهد الشاشة أن‬ ‫الشاشة يجب أن تمسح ‪ scanned‬من أعلى إلى أسفل‪.‬‬ ‫– استعمل أحكام الحدود إلحاطة أزرار الراديو ‪ radio buttons‬و‬ ‫صناديق التأشير‪.check boxes‬بالرغم من أن العديد من التجمعات‬ ‫واضحة بدون استخدام الحدود‪ ،‬أال أن استخدامها يدعم وجود هذة‬ ‫التجمعات‪.‬انظر الشكل (‪ )22‬الذي يبين إحاطة صناديق التأشير و‬ ‫أزرار الراديو لدعم التجمعات‪.‬‬  ‫التميز‬ ‫‪Distinctiveness‬‬ ‫إحاطة صناديق التأشير و أزرار الراديو لدعم وجود هذة التجمعات‪.‬‬  ‫التميز‬ ‫‪Distinctiveness‬‬ ‫ األلون ‪colors‬‬ ‫مكونات الشاشة‪.‬‬ ‫استعمال اللون للتأكيد والمساعدة في تعريف ّ‬ ‫–‬ ‫النص التي تشتمل على ألوان ألمع ‪brighter‬‬ ‫ّ‬ ‫أجزاء الصور أو‬ ‫–‬ ‫تجتذب االنتباه أوال‪.‬‬ ‫تقديم بعض العناصر بألوان أسطع والبعض بألوان أدكن يساعد الناس‬ ‫–‬ ‫في تحديد أهميتهم النسبية‪.‬‬ ‫ال تعرض أكثر من أربعة ألوان على الشاشة الواحدة‪.‬‬ ‫–‬ ‫ الحجم ‪size‬‬ ‫– األجسام األكبر حجما تجتذب االنتباه قبل األصغر منها‪.‬فاإلنسان يركز‬ ‫ّ‬ ‫يتخطى بعض أنواع الصور التي يعتقد‬ ‫على األشياء األكبر أوال‪ ،‬و قد‬ ‫بأنها ليست مهمة‪.‬‬  ‫التميز‬ ‫‪Distinctiveness‬‬ ‫ الصور المتحركة ‪animation‬‬ ‫– الحركة ‪movement‬هي األداة األكثر فاعلية لجذب االنتباه‪ ،‬و‬ ‫لكن يمكن أن تكون مزعجة جدا‪ ،‬إذا لم تكن ذات صلة أو مفيدة‪.‬‬ ‫ الوضع ‪positioning‬‬ ‫– يمكن جذب انتباه المستخدم للعنصر بوضع العنصر في مكان في‬ ‫الشاشة بحيث يكون أول عنصر يقابل نظره األشكال المتميّزة أو‬ ‫غير العادية‬