Lecture 6: User Interface Design 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‬‬ ‫– االختالف في الخط‪eee‬وط يس‪eee‬ترعى انتب‪eee‬اه المس‪eee‬تخدم‬ ‫ويمكن أن يستعمل للتفريق بين مكّونات الشاشة‪.‬‬ ‫– الرس‪ee‬ائل األدكن أو األكبر يمكن أن تس‪ee‬تعمل لتحدي‪ee‬د‬ ‫قط‪eee‬ع ا‪e‬لشاش‪eee‬ة األعل‪e‬ى مس‪eee‬تو‪e‬ى مث‪eee‬ل‪e‬المس‪eee‬ت‪e‬ويات‬ ‫المختلف‪e‬ة من العن‪e‬اوين‪ ،‬إذا كانت العن‪e‬اوين تس‪e‬تعمل في‬ ‫البحث ‪.search‬‬ ‫– ال تس‪e‬تعمل الخط‪e‬وط األكبر لل‪e‬دخول و التع‪e‬ديل وع‪e‬رض‬ ‫‪e‬ع‬ ‫شا‪e‬ش‪ee‬ات ال‪e‬ق‪e‬ر‪e‬اءة‪e‬ف‪e‬ق‪ee‬ط ‪ ،e read-only‬ألن ه‪e‬ذ‪e‬ا سيض‪e e‬‬ ‫الالزم‪e‬عل‪e‬ى الع‪e‬ن‪e‬وان‪e‬نفس‪e‬ه‪.e‬ال‪e‬تأكي‪e‬د‪e‬ي‪e‬جب‬ ‫ن ‪e‬‬ ‫ت‪e‬أ‪e‬كي‪e‬دًا‪e‬أكثر‪e‬م ‪e‬‬ ‫أن يذهب لعناصر الشاشة و ليس للعنوان‪.‬‬  ‫التميز‬ ‫‪Distinctiveness‬‬ ‫ تدكّين وإمالة وتسطير و وميض الخط‬ ‫– ‪Font Bold, italic, underline, and‬‬ ‫‪blinking‬‬ ‫– هذه التقني‪e‬ات يمكن أن تس‪e‬تعمل لتوض‪e‬يح االختالف‪e‬ات‬ ‫غير الملحوظة في عناصر الشاشة‬ ‫– اس‪e‬تعمال الت‪e‬دكين ‪ bold‬يض‪e‬يف ضوض‪e‬اء أق‪e‬ل للتص‪e‬ميم‬ ‫ر المهم‪e‬ة‪ e.e‬وعموم‪e‬ا هي‪e‬الت‪e‬قني‪e‬ة‪ e‬المفّض ل‪e‬ة‬ ‫وي‪e‬بر‪e‬ز‪e‬العن‪e‬اص‪e e‬‬ ‫للكثير من المستخدمين‪.‬‬ ‫– الخ‪e‬ط المائ‪e‬ل ‪ italic‬بينم‪e‬ا يض‪e‬يف ضوض‪e‬اء إال أن‪e‬ه أق‪e‬ل‬ ‫قابلية لالكتشاف و أقل وضوحًا ‪.legibility‬‬  ‫التميز‬ ‫‪Distinctiveness‬‬ ‫التس‪e‬طير أو ض‪e‬ع خ‪e‬ط تحت الكلم‪e‬ة ‪ underlining‬أو الجمل‪e‬ة ‪ ،‬يق‪e‬وم بج‪e‬ذب‬ ‫–‬ ‫أن‬ ‫ن ي‪e‬قل‪e‬ل‪ e‬م‪e‬ن‪e‬الو‪e‬ض‪ee‬وح‪ ،‬ل‪e‬ذ‪e‬ا ي‪e‬ج‪e‬ب ‪e‬‬ ‫ه ‪e،‬ل‪e‬كّن ه يض‪ee‬يف‪ e‬ضو‪e‬ض‪e‬ا‪e‬ء‪e e‬وي‪e‬مكن أ ‪e‬‬ ‫االنتب‪ee‬ا ‪e‬‬ ‫‪e‬‬ ‫م ال‪e‬رس‪e‬ومية‪ e‬يم‪e‬كن ا‪e‬س‪e‬تعمال ا‪e‬لتس‪e‬طير‬ ‫د‪e‬‬‫يس‪e‬ت‪e‬ع‪e‬مل ب ‪e‬عن‪e‬اي‪e‬ة‪.‬في‪e‬و‪e‬اجه‪e‬ة الم‪e‬س‪e‬ت‪e‬خ ‪e‬‬ ‫لت‪e‬ع‪e‬يين المك‪e‬ا‪e‬فئ للوح‪e‬ة ا‪e‬لمف‪e‬ا‪e‬تي‪e‬ح ‪ keyboard equivalent‬أو أس‪e‬اليب تقوي‪e‬ة‬ ‫الذاكرة ‪.mnemonics‬‬ ‫ال‪e‬وميض ‪blinking‬ل‪e‬ه ق‪e‬درة عالي‪e‬ة ج‪e‬دًا لج‪e‬ذب اإلنتب‪e‬اه‪ ،‬لكّنه يقل‪e‬ل من الق‪e‬درة‬ ‫–‬ ‫يمكن‬ ‫‪e‬‬ ‫ن ا‪e‬لن‪e‬ا‪e‬س كم‪e‬ا‬ ‫ج لكث‪e‬ي‪e‬ر م ‪e‬‬ ‫ع‪e‬لى‪ e‬ق‪e‬ر‪e‬اءة‪ readabilitye‬ال‪e‬نّص ‪e‬و يس‪e‬ب‪e‬ب ا‪e‬إل ‪e‬زع‪e‬ا ‪e‬‬ ‫ط‪.e‬ل‪e‬ذ‪e‬ا‬ ‫مل‪ e‬ب‪e‬إفرا ‪e‬‬ ‫اإلعي‪e‬ا‪e‬ء الب‪e‬ص‪e‬ري ‪ visual fatigue‬إذا م‪ee‬ا اس‪e‬تع ‪e‬‬ ‫ن‪ e‬ي‪e‬س‪ّe‬بب ‪e‬‬ ‫أ ‪e‬‬ ‫ت الض‪ee‬ر ‪e‬ور‪e‬ية‪ e‬ال‪ee‬تي ت‪e‬تطلب إ‪e‬س‪ee‬تج‪e‬ابة‬ ‫ت واألوق‪eee‬ا ‪e‬‬‫ب أن ي‪e‬س‪ee‬تخدم‪e‬لل‪e‬ح‪ee‬اال ‪e‬‬ ‫ج ‪e‬‬ ‫ي‪e‬‬ ‫‪ response‬سريعة من المستخدم‪.‬‬ ‫يجب أن يك‪e‬ون المس‪e‬تخدم ق‪e‬ادرًا على إطف‪e‬اء ال‪e‬وميض م‪e‬تي م‪e‬ا ج‪e‬ذب انتب‪e‬اهه‪.‬‬ ‫–‬ ‫ال‪e‬وميض ا‪e‬لموص‪e‬ى ب‪e‬ه هو م‪e‬ا بين ‪ 5 -e2‬هيرتز‪e.‬‬ ‫الش‪ee‬كل ‪ 21‬يوض‪ee‬ح اس‪ee‬تخدام التس‪ee‬طير لتوض‪ee‬يح االختص‪ee‬ارات المكافئ‪ee‬ة في‬ ‫–‬ ‫لوحة المفاتيح‬  ‫التميز‬ ‫‪Distinctiveness‬‬ ‫استخدام‬ ‫التسطير‬  ‫التميز‬ ‫‪Distinctiveness‬‬ ‫ اس‪H‬تخدام الخط‪H‬وط و الص‪H‬ناديق أو اإلطارات‬ ‫‪Using lines and surrounding boxes or frames‬‬ ‫– اس‪e‬تعمل الخط‪e‬وط للتأكي‪e‬د ولتوجي‪e‬ه نظ‪e‬ر المس‪e‬تخدم خالل الشاشة‪.‬‬ ‫– اإس‪e‬تعمل األحك‪e‬ام األفقي‪e‬ة ‪ horizontal ruling‬كب‪e‬ديل للمباع‪e‬دة عن‪e‬د‬ ‫تقسيم الشاشة إلى أجزاء‪.‬‬ ‫– اس‪e‬تعمل األحك‪e‬ام العمودي‪e‬ة ‪ vertical ruling‬إلبالغ مش‪e‬اهد الشاش‪e‬ة‬ ‫ح ‪ scanned‬من‪e‬أعلى إلى أسفل‪.‬‬ ‫أن‪ e‬ال‪e‬شاشة ي‪e‬جب أ‪e‬ن تمس ‪e‬‬ ‫– اس‪ee‬تعمل أحك‪ee‬ام الح‪ee‬دود إلحاط‪ee‬ة أزرار الرادي‪ee‬و ‪ radio buttons‬و‬ ‫ص‪e‬نا‪e‬ديق الت‪e‬أش‪e‬ير‪.check boxese‬ب‪ee‬ال‪e‬رغم م‪e‬ن أ‪e‬ن‪ e‬العدي‪e‬د‪e‬من التج‪e‬مع‪e‬ات‬ ‫م الح‪e‬دود‪ ،e‬أ‪e‬ال‪e‬أن ‪e‬اس‪e‬تخ‪e‬دا‪e‬مها ي‪e‬دعم وج‪e‬ود‪e‬ه‪e‬ذة‬ ‫ة‪e‬ب‪e‬دون ا‪e‬س‪e‬تخد‪e‬ا ‪e‬‬ ‫و‪e‬اض‪e‬ح ‪e‬‬ ‫ة‪e‬ص‪e‬ناد‪e‬يق‪e‬التأش‪e‬ير و‬ ‫ا‪e‬ل‪e‬تجمع‪e‬ا‪e‬ت‪.‬ا‪e‬نظ‪e‬ر‪e‬ال‪e‬ش‪e‬كل‪ )22(e ee‬ا‪e‬ل‪e‬ذي‪ e‬ي‪e‬بين إ‪e‬حاط‪e e‬‬ ‫أز‪e‬رار‪e‬الراديو‪e‬لدع‪e‬م التجمعات‪e.‬‬  ‫التميز‬ ‫‪Distinctiveness‬‬ ‫إحاطة صناديق التأشير و أزرار الراديو لدعم‬ ‫وجود هذة التجمعات‪.‬‬  ‫التميز‬ ‫‪Distinctiveness‬‬ ‫ األلون ‪colors‬‬ ‫اس‪ee‬تعمال الل‪ee‬ون للتأكي‪ee‬د والمس‪ee‬اعدة في تعري‪ee‬ف مكّون‪ee‬ات‬ ‫–‬ ‫الشاشة‪.‬‬ ‫أج‪eee‬زاء الص‪eee‬ور أو النّص ال‪eee‬تي تش‪eee‬تمل على أل‪eee‬وان ألم‪eee‬ع‬ ‫–‬ ‫‪ brighter‬تجتذب االنتباه أوال‪.‬‬ ‫تق‪ee‬ديم بعض العناص‪ee‬ر ب‪ee‬ألوان أس‪ee‬طع والبعض ب‪ee‬ألوان أدكن‬ ‫–‬ ‫يساعد الناس في تحديد أهميتهم النسبية‪.‬‬ ‫ال تع‪e‬رض أكثر من أربع‪e‬ة أل‪e‬وان على الشاش‪e‬ة الواحدة‪.‬‬ ‫–‬ ‫ الحجم ‪size‬‬ ‫– األجس‪ee‬ام األكبر حجم‪ee‬ا تجت‪ee‬ذب االنتب‪ee‬اه قب‪ee‬ل األص‪ee‬غر منه‪ee‬ا‪.‬‬ ‫بعض‬ ‫‪e‬‬ ‫د يتخّطى‪e‬‬‫‪e‬أوال‪ ،‬و ق‪e e‬‬ ‫األكبر ‪e‬‬ ‫فاإلنس‪e‬ان‪ e‬يركز‪ e‬عل‪e‬ى‪e‬األش‪e‬ياء ‪e‬‬ ‫‪e‬‬ ‫أنواع الصور التي يعتقد بأنها ليست مهمة‪.‬‬  ‫التميز‬ ‫‪Distinctiveness‬‬ ‫ الصور المتحرّكة ‪animation‬‬ ‫– الحركة ‪ movement‬هي األداة األكثر فاعلي‪eee‬ة‬ ‫لج‪e‬ذب االنتب‪e‬اه‪ ،‬و لكن يمكن أن تك‪e‬ون مزعج‪e‬ة ج‪e‬دا‪،‬‬ ‫إذا لم تكن ذات صلة أو مفيدة‪.‬‬ ‫ الوضع ‪positioning‬‬ ‫– يمكن ج‪e‬ذب انتب‪e‬اه المس‪e‬تخدم للعنص‪e‬ر بوض‪e‬ع العنص‪e‬ر‬ ‫في مك‪ee‬ان في الشاش‪ee‬ة بحيث يك‪ee‬ون أول عنص‪ee‬ر‬ ‫يقابل نظره األشكال المتمّيزة أو غير العادية‬