Lec5.pdf

‫تصميم واجهات المستخدم‬ ‫‪Lecture 5‬‬  ‫مبادئ التصميم الجيد للواجهات و الشاشات‬ ‫والمهام‬ ‫ الواجهة جيدة التصميم يجب أن تعكس القدرات واالحتياجات‬ ‫لمستخدميها بصورة واضحة‪.‬‬ ‫ وحتى يتحقق ذلك يجب أ...

‫تصميم واجهات المستخدم‬ ‫‪Lecture 5‬‬  ‫مبادئ التصميم الجيد للواجهات و الشاشات‬ ‫والمهام‬ ‫ الواجهة جيدة التصميم يجب أن تعكس القدرات واالحتياجات‬ ‫لمستخدميها بصورة واضحة‪.‬‬ ‫ وحتى يتحقق ذلك يجب أن‪:‬‬ ‫– يتم تطويرها في إطار القيود المادية التي تفرضها األجهزة التي يتم عرضها فيها‪.‬‬ ‫– تستفيد من قدرات البرمجيات التي تتحكم فيها بفعالية ‪.‬‬ ‫– تحقق األهداف التجارية للنظام الذى صممت من أجله‪.‬‬ ‫ لتحقيق هذه األهداف ‪ ،‬يجب على المصمم ان يفهم أوال فهم مبادئ التصميم‬ ‫الجيد للواجهات ولتصميم الشاشات‪.‬في ما يلي تجميع للمبادئ التوجيهيه‬ ‫لتصميم واجهة للمستخدم من الشاشه‪.‬‬ ‫ وهو يتضمن مجموعة من المبادئ التوجيهية التفصيلية التي تتعامل مع‬ ‫’‪.users‬‬ ‫‪consideration‬‬ ‫المستخدمين‬ ‫اعتبارات‬  ‫مراعاة المستخدم في التصميم‬ ‫‪Considering users in the design‬‬ ‫ يتأثر استخدام الشاشة والنظام‪ ،‬بكثير من العوامل‪ ،‬وتشمل‬ ‫اآلتي‪:‬‬ ‫– كم المعلومات التي يتم تقديمها أو عرضها في الشاشة‪.‬‬ ‫– كيفية تنظيم هذه المعلومات ‪.‬‬ ‫– اللغة المستخدمة للتواصل مع المستخدم‪.‬‬ ‫– مدى وضوح المكونات التي يتم عرضها‪.‬‬ ‫– الجماليات المستخدمة ‪.‬‬ ‫– مدى تناسق الشاشة مع الشاشات األخرى‪.‬‬  ‫مراعاة المستخدم في التصميم‬ ‫‪Considering users in the design‬‬ ‫ اكثر مشاكل الواجهات المرئية شيوعا هي‪:‬‬ ‫– التضارب البصري بين محتويات الشاشة مع نظام التشغيل‪.‬‬ ‫– االفتقار إلى استخدام ميزات وعناصر التصميم‪.‬‬ ‫– اإلفراط في استخدام األلوان الزاهية‬ ‫– سوء تصميم األيقونات‪.‬‬ ‫– سوء الطباعة ‪typography‬‬ ‫– استخدام المجاز ‪ Metaphors‬يقيّد خيارات التصميم أحيانا‪.‬‬  ‫أهداف تصميم الواجهات‬ ‫‪Goals of interface design‬‬ ‫ لجعل الواجهة سهلة االستخدام‪ ،‬فإن الهدف في التصميم هو‪:‬‬ ‫تقليل العمل البصري ‪.visual work‬‬ ‫–‬ ‫التقليل من العمل الفكري ‪.intellectual work‬‬ ‫–‬ ‫التقليل من عمل الذاكرة‪.‬‬ ‫–‬ ‫التقليل من العمل الحركي‪.‬‬ ‫–‬ ‫التقليل أو القضاء على اي اعباء أو تعليمات تفرضها التكنولوجيا‪.‬‬ ‫–‬ ‫ سيؤدي ذلك لسهولة استخدام النظام و زيادة انتاجية المستخدم‪.‬‬  ‫تنظيم عناصر الشاشة‬ ‫‪Organizing screen elements‬‬ ‫ الوضوح البصري ‪ Visual clarity‬يتحقق عندما يتم عرض عناصر‬ ‫الشاشة بطريقة منظمة ومفهومه و ذات معنى و واضحة ويمكن‬ ‫التعرف عليها بسهولة‪.‬‬ ‫ّ‬ ‫ التنظيم الجيد يجعل عملية التعرف أسهل لعناصر الشاشة األساسية‬ ‫والثانويه‪.‬‬ ‫ الوضوح يتأثر بكثير من العوامل ‪:‬‬ ‫التكوين البصري المرضي‪.‬‬ ‫–‬ ‫التسلسل و الترتيب المنطقي‪.‬‬ ‫–‬ ‫عرض الكم السليم من المعلومات‪.‬‬ ‫–‬ ‫التجمع ‪.Grouping‬‬ ‫–‬ ‫محاذاة عناصر ‪ Alignment‬الشاشة‪.‬‬ ‫–‬ ‫االتساق في التصميم ‪Consistency in the design‬‬ ‫–‬  ‫ترتيب البيانات والمحتويات‬ ‫‪Ordering data and contents‬‬ ‫ مخططات الترتيب ‪ordering schemes‬‬ ‫يهدف مخطط الترتيب أو التنظيم في تصميم التطبيقات ألى الحفاظ على الحد‬ ‫األدنى من عدد المعلومات المتغيرة التي يجب أن تبقى في ذاكرة المستخدم‬ ‫على المدى القصير‪.‬‬ ‫ وذلك باالتي‪:‬‬ ‫تقسيم المعلومات إلى وحدات منطقيه ذات مغزى‪.‬‬ ‫–‬ ‫تنظيم البيانات أو المعلومات حسب درجة الترابط بينها‪.‬‬ ‫–‬ ‫ترتيب وحدات الشاشه والمعلومات والعناصر وإعطائها األولوية وفقا لتجربة‬ ‫–‬ ‫المستخدم واحتياجاته‪.‬‬ ‫تكوين المجموعات التي تغطي جميع االحتماالت‪.‬‬ ‫–‬ ‫التأكد من ان المعلومات المراد مقارنتها مرئية في الوقت نفسه‪.‬‬ ‫–‬ ‫يجب ُعرض البيانات المتعلقة بالمستخدم والمهمة التي يريد إنجازها فقط‪.‬‬ ‫–‬  ‫ترتيب البيانات والمحتويات‬ ‫‪Ordering data and contents‬‬ ‫– مخططات الترتيب وهي‪:‬‬ ‫ مخطط الترتيب التقليدي والعرفي ‪. Conventional and custom‬‬ ‫بعض المخططات تطورت من عناصر معينة‪.‬ومن أمثلة ذلك الترتيب‬ ‫بأيام األسبوع ‪ ،‬و أشهر السنة ‪،‬االسم والعنوان ‪ ،‬هذه العناصر ينبغي ان‬ ‫ترتب دائما بالطريقة العرفية‪.‬‬ ‫ مخطط ترتيب حسب تسلسل االستخدام ‪.Sequence of use‬تسلسل‬ ‫االستخدام ينطوي على تجميع المعلومات وترتيب البنود وفقا للترتيب‬ ‫الذي وردت به‪ ،‬على سبيل المثال ترتيب العنوان ‪ ،‬عادة ما يكون‬ ‫بالتسلسل اآلتي‪ :‬الشارع ‪ ،‬والمدينة والدولة ‪ ،‬والرمز البريدي‪.‬‬  ‫ترتيب البيانات والمحتويات‬ ‫‪Ordering data and contents‬‬ ‫ مخطط ترتيب وظيفي أو فئوي ‪. Functional or categorical‬تجمع‬ ‫المعلومات في مجموعات وفقا لغرض استخدامها‪.‬فعلى سبيل المثال‬ ‫جميع مركبات النقل ويمكن تصنيفها ضمن فئات الطائرات والقطارات‬ ‫والسيارات‪.‬‬ ‫ مخطط ترتيب حسب األهمية ‪.Importance‬التجمع حسب األهمية‬ ‫تعتمد هذه الطريقة على تصنيف المعلومات حسب أهميتها بالنسبة‬ ‫للمستخدم و الوظيفة التي يقوم بها‪.‬البنود الهامة يوضع اوال في الكان‬ ‫االبرز‪.‬وفقا لهذه الطريقة يمكن تنظيم البنود من األفضل إلى األسوأ أو‬ ‫من األكبر إلى االصغر‪.‬‬ ‫ مخطط ترتيب للبيانات من العام الى المحدد ‪.General to specific‬إذا‬ ‫كانت بعض البيانات العامة هي أكثر من غيرها؛ فإن العناصر العامة‬ ‫ينبغي أن تسبق العناصر المحددة‪.‬ويتم هذا عادة عندما يكون هناك عالقة‬ ‫هرمية بين عناصر البيانات‪.‬‬  ‫شاشة المالحة والتدفق‬ ‫‪Screen navigation and flow‬‬ ‫التصفّح خالل الشاشات ينبغي أن يكون واضحا ً وسهل اإلنجاز‪.‬‬ ‫ ‬ ‫يجب جعل عملية التصفح واضحة وذلك بتجميع وتنسيق الشاشة‬ ‫ ‬ ‫وباستخدام الضوابط و الحدود لتوجيه نظر المستخدم أثناء‬ ‫التفاعل‪.‬‬ ‫ترتيب المعلومات في الشاشة والعناصر بحيث تقوم بتوجيه‬ ‫ ‬ ‫النظر خالل الشاشة و تقليل مسافه تحرك المؤشر ‪pointer‬‬ ‫والعين‪.‬‬ ‫تحديد مكان أهم العناصر وأكثرها استخداما في أعلى يسار‬ ‫ ‬ ‫الشاشة (اللغة الالتينية)‪.‬‬ ‫مساعدة التصفح عن طريق المواءمه بين العناصر و تجميع‬ ‫ ‬ ‫العناصر باستخدام خط الحدود ‪line borders‬‬  ‫التكوين المرضي بصريا ً‬ ‫‪Visually pleasing composition‬‬ ‫ النظام اإلدراكي لدى اإلنسان يحاول إيجاد معنى لألشياء من‬ ‫حوله‪ ،‬ويحاول هيكلة األشياء عندما يواجه حاالت غير‬ ‫واضحة‪.‬‬ ‫ يجب تنظيم عناصر الشاشة بحيث تتوفر فيها الصفات‬ ‫التالية ‪:‬‬  ‫التكوين المرضي بصريا ً‬ ‫‪Visually pleasing composition‬‬ ‫ التوازن ‪Balance‬‬ ‫– المقصود بتوازن الشاشة أن تكون عناصر الشاشة في يسار‬ ‫الشاشة هي نفسها (في العدد و الشكل و الحجم) في يمين الشاشة‪.‬‬ ‫يقوم المستخدم بمعالجة العمود األيسر أوالً‬ ‫ كما يالحظ العمود األيمن في نفس الوقت‪.‬‬ ‫ يجب فهم كال من العمودين من قِبل نظام المعالجة البصرية‬  ‫التكوين المرضي بصريا ً‬ ‫‪Visually pleasing composition‬‬ ‫عناصر الشاشة المتوازنة‬ ‫عناصر الشاشة غير متوازنة‬  ‫التكوين المرضي بصريا ً‬ ‫‪Visually pleasing composition‬‬ ‫ التناظر ‪Symmetry‬‬ ‫– المقصود بالتناظر تكرار العناصر من يمين ويسار الخط المركزي‬ ‫للشاشة‬ ‫يوضح عناصر الشاشة المتماثلة‬ ‫عناصر غير متماثلة‬  ‫التكوين المرضي بصريا ً‬ ‫‪Visually pleasing composition‬‬ ‫االنتظام ‪Regularity‬‬ ‫ ‬ ‫خلق مسافات موحدة وقياسية وثابتة بين نقاط المباعدة األفقية‬ ‫ ‬ ‫والرأسية ‪horizontal and vertical alignment‬‬ ‫‪points‬‬ ‫عندما تكون عناصر الشاشة منتظمة كما في الشكل ‪ 5‬يتم‬ ‫ ‬ ‫معالجة العمود ‪ column‬أقصى اليسار‪ ،‬و في نفس الوقت‬ ‫يُالحظ العمودين إلى اليمين‪.‬‬ ‫إما إذا كانت عناصر الشاشة غير منتظمة فتتم معالجة موقع‬ ‫ ‬ ‫‪ location‬وحجم ك ّل شكل على حده كما في الشكل ‪.6‬‬  ‫التكوين المرضي بصريا ً‬ ‫‪Visually pleasing composition‬‬ ‫ يوضح عناصر الشاشة المنتظمة‬ ‫العناصر غير المنتظمة‬  ‫التكوين المرضي بصريا ً‬ ‫‪Visually pleasing composition‬‬ ‫ التوقعّية ‪Predictability‬‬ ‫– التوقعّية أو القدرة على التنبؤ هو وضع األشياء في االماكن التي‬ ‫تم ّكن المستخدم من التنبؤ بها على الشاشة‪.‬‬ ‫– على سبيل المثال في الشكل (‪ )7‬و التي تمثل شاشة للبحث عن‬ ‫كتب‪.‬‬ ‫– يتوقع المستخدم القائمة و محرك البحث أعلى الشاشة تليها الكلمات‬ ‫الرئيسية أو الدليلية ‪ keywords‬التي تستخدم في البحث‪.‬‬  ً ‫التكوين المرضي بصريا‬ Visually pleasing composition File Edit View Insert Window Help Icon Search for Books Enter Keywords: interface Graphical user OK Cancel ‫وضع العناصر على الشاشة في األماكن المتوقعة من قبل المستخدم‬ Icon OK File Edit View Insert Window Help Enter Keywords: interface graphical user Search for Books Cancel ‫وضع العناصر على الشاشة في األماكن غير المتوقعة من قبل المستخدم‬  ‫التكوين المرضي بصريا ً‬ ‫‪Visually pleasing composition‬‬ ‫ التسلسل ‪Sequentially‬‬ ‫– التسلسل هو عملية توجيه البصر من خالل مهمة واضحة‪.‬‬ ‫العين تنجذب إلى ‪:‬‬ ‫ المشرق من العناصر أكثر من األقل إشراقا‪.‬‬ ‫ العناصر المتفرقة أكثر من المتجمعة‪.‬‬ ‫ الرسومات قبل النصوص‪.‬‬ ‫الملون قبل غير الملون‪.‬‬ ‫ّ‬ ‫ ‬ ‫ األلوان المشبعه قبل األقل تشبعا‪.‬‬ ‫ المناطق مظلمة قبل المضيئة‪.‬‬ ‫ العناصر الكبيرة قبل الصغيرة‪.‬‬ ‫ األشكال غير المألوفة قبل المألوف منها‪.‬‬ ‫ الشكل ‪ 9‬يوضح عناصر شاشة ذات تسلسل منطقي‪ ،‬الحظ توجيه‬ ‫البصر باستخدام األلوان‪.‬أما الشكل ‪ 10‬فيوضح عناصر غير متسلسلة‪.‬‬  ً ‫التكوين المرضي بصريا‬ Visually pleasing composition Membership Name Form Dues: :Address: Pub City Total: s: State: :Code OK Cancel : ‫عناصر ذات تسلسل منطقي‬ Membership Form Cancel Name: OK Address: Pub Dues: s: State: Code: City: Total: ‫عناصر غير متسلسلة‬  ‫التكوين المرضي بصريا ً‬ ‫‪Visually pleasing composition‬‬ ‫ االقتصاد ‪Economy‬‬ ‫– هو استخدام أقل ما يمكن من أساليب الحوار و الخطوط و األلوان‬ ‫و تقنيات العرض‪.‬‬  ً ‫التكوين المرضي بصريا‬ Visually pleasing composition Membership Name: Form Dues: Addres Pubs: s: City: Total: Stat e: Code: OK Cancel ‫شاشة مستخدمة بطريقة اقتصادية‬: Membership Form Name: Dues: Addres Pubs: s: City: Total: Stat OK Cancel e: Code: ‫شاشة مستخدمة بطريقة غير اقتصادية‬  ‫التكوين المرضي بصريا ً‬ ‫‪Visually pleasing composition‬‬ ‫ الوحدة ‪Unity‬‬ ‫– الوحدة هي جعل العناصر تبدو كو ّحدة متكاملة (للتماسك البصري)‬ ‫و ذلك باآلتي‪:‬‬ ‫ استعمال أشكال‪ ،‬وحجوم‪ ،‬أو ألوان مماثلة‪.‬‬ ‫ جعل المسافة بين عناصر الشاشة أقل من المسافة بين العناصر و هامش‬ ‫الشاشة‬  ‫التكوين المرضي بصريا ً‬ ‫‪Visually pleasing composition‬‬ ‫الوحدة‬ ‫التجزؤ‬  ‫التكوين المرضي بصريا ً‬ ‫‪Visually pleasing composition‬‬ ‫ النسبة ‪Proportion‬‬ ‫صوص باستعمال نسب مرضية‬ ‫– النسبة هي تجميع البيانات أو الن ّ‬ ‫تجمعات باستعمال أشكال متناسبة‬ ‫ّ‬  ‫التكوين المرضي بصريا ً‬ ‫‪Visually pleasing composition‬‬ ‫ البساطة ‪Simplicity‬‬ ‫– قلّل عدد النقاط المصطفّة باستعمال‪:‬‬ ‫– أقل عدد من األعمدة لعرض العناصر على الشاشة‪.‬‬ ‫– دمج العناصر لتقليل عدد عناصر الشاشة‪.‬‬ ‫– مع مراعاة أن ال يؤثر ذلك على وضوح ‪ clarity‬البيانات على‬ ‫الشاشة‪.‬‬ ‫– الحظ تأثير التصميم على معالجة البيانات على الشاشة في الشكل‬ ‫‪ 15‬و الشكل ‪16‬‬  ً ‫التكوين المرضي بصريا‬ Visually pleasing composition Membership Form Name: Dues: Addres Pubs: s: City: Total: State: OK Cancel Code: ‫ فقط‬alignments ‫تتم معالجة أربعة اصطفافات‬ Membership Form Dues Nam : e:Addres Pub s:City s: : Stat Total Code:e: : OK Cancel ‫تتم معالجة تسعة اصطفافات‬  ‫التكوين المرضي بصريا ً‬ ‫‪Visually pleasing composition‬‬ ‫ التجميعات ‪Groupings‬‬ ‫– التجميعات هي التقنية المستخدمة لترتيب عناصر الشاشة بصريا ً حسب‬ ‫وظيفية كل منها‪.‬و يمكن تصميم هذه التجميعات بما يلي‪:‬‬ ‫إصطفاف ‪ Align‬عناصر الشاشة في مجموعات‬ ‫ّ‬ ‫–‬ ‫ المباعدة بين المجموعات بفراغات‬ ‫ استعمال العناصر اإلضافية بشكل مقتصد‪.‬‬ ‫– استعمال األلوان الكثيرة والحدود تضيف تعقيدا للشاشة لذلك قلّل منها‪.‬‬ ‫ التجميع البسيط ‪simple grouping‬‬ ‫– يمكن الحصول على تجميع بسيط لعناصر الشاشة و ذلك باآلتي‪:‬‬ ‫ اصطفاف العناصر المماثلة بشكل عمودي‬ ‫ يجب أن تكون المسافة العمودية بين األجسام المماثلة صغيرة‬  ً ‫التكوين المرضي بصريا‬ Visually pleasing composition Membership Form Name: Dues Address: :Pubs City: Total: : State: Code: OK Cancel ‫التجمعات البسيطة‬  ‫التكوين المرضي بصريا ً‬ ‫‪Visually pleasing composition‬‬ ‫ تجميع الصناديق ‪Boxed grouping‬‬ ‫– يمكن تجميع أو احتواء البيانات المرتبطة ببعضها باستخدام إطار‬ ‫‪.frame‬عند استحدام اإلطار يجب مراعاة اآلتي‪:‬‬ ‫– الصناديق تضيف تعقيدا ً إضافيا ً للشاشة‪.‬‬ ‫– في كثير من الحاالت يمكن االكتفاء بالترتيب المكاني ‪Spatial‬‬ ‫‪ arrangement‬للعناصر‪.‬‬  ً ‫التكوين المرضي بصريا‬ Visually pleasing composition Membership Form Name: Dues: Pubs: Address: City: Total: State: OK Cancel Code: ‫التجميع باستخدام الصناديق‬  ‫التكوين المرضي بصريا ً‬ ‫‪Visually pleasing composition‬‬ ‫ تجميع الخلفية ‪Background grouping‬‬ ‫– بدال من استخدام اإلطار يمكن استخدام خلق تجميعات بإعطاء‬ ‫لون لخلفية العناصر‪.‬عند استخدام األلوان يجب مراعاة اآلتي‪:‬‬ ‫ يضيف اللون تعقيدا ً بصريا ً ‪ visual complexity‬إضافيا ً‪.‬‬ ‫ يفضل استخدام الترتيب المكاني ‪.Spatial arrangement‬‬  ً ‫التكوين المرضي بصريا‬ Visually pleasing composition Membership Form Name: Dues: Address: Pubs: City: Total: State: Code: OK Cancel ‫التجميع باستخدام األلوان‬