User Interface Design Lecture #5 PDF

User Interface design Lecture #5  ‫متحكمات واجهة المستخدم‬ ‫‪.8‬عالمات التبويب ‪:Tabs‬‬ ‫طريقة ذكية لتقسيم محتوي الصفحة إلي أقسام ‪،‬لكن استخدامها يعتبر سيفا ذو حدين ‪ ،‬يجب‬ ‫احتواء عالمات التبوي...

User Interface design Lecture #5  ‫متحكمات واجهة المستخدم‬ ‫‪.8‬عالمات التبويب ‪:Tabs‬‬ ‫طريقة ذكية لتقسيم محتوي الصفحة إلي أقسام ‪،‬لكن استخدامها يعتبر سيفا ذو حدين ‪ ،‬يجب‬ ‫احتواء عالمات التبويب علي حالتين أساسيتين (محدد ‪،‬وغير محدد )‬ ‫اإلستخدام العادي ‪:‬‬ ‫‪2‬‬ ‫متحكمات واجهة المستخدم‬ ‫التنوع‬ ‫‪3‬‬  ‫متحكمات واجهة المستخدم‬ ‫‪.9‬األكورديون ‪:Accordion Guidelines‬‬ ‫عبارة عن حاويات مكدسة تحوي عناصر متشعبة تتسع وتنطوي بالنقر عليها ‪،‬ليس الخيار‬ ‫األفضل لصفحات سطح المكتب ‪،‬إال أنه مناسب في الهواتف المحمولة ‪.‬‬ ‫‪4‬‬  ‫متحكمات واجهة المستخدم‬ ‫‪.10‬التحقق من صحة المدخالت ‪:Validation‬‬ ‫يستخدم التحقق من صحة المدخالت غالبا لمساعدة المستخدميين علي تصحيح األخطاء‬ ‫‪6‬‬ ‫متحكمات واجهة المستخدم‬ ‫التحقق من صحة المدخالت ‪:Validation‬‬ ‫‪.1‬نجاح ‪:‬تخبر المستخدميين بصحة‬ ‫إدخالهم وإختيارهم ‪،‬وهي ليست مطلوبة‬ ‫لكنها مفيدة للمستخدمين الجدد أو‬ ‫المبتدئيين ‪.‬‬ ‫‪.2‬تحذير ‪ :‬تشير إلي صحة اإلدخال أو‬ ‫التحديد ‪،‬ولكن ال يوصي به (ككلمة‬ ‫مرور ضعيفة )‬ ‫‪.3‬خطأ ‪:‬أكثر األشكال تحققا شيوعا ‪،‬ينبه‬ ‫المستخدميين إلي أن إدخالهم غير‬ ‫صحيح ‪،‬ويفضل أن يقترح كيفية‬ ‫تصحيح الخطأ‪.‬‬ ‫‪7‬‬ ‫متحكمات واجهة المستخدم‬ ‫‪.11‬أداة التلميح ‪:Tooltip Guidelines‬‬ ‫تعد أداة التلميح نوعا شائعا من أنواع‬ ‫المساعدات التي تلعب دورا ايجابيا عندما‬ ‫يطلب المستخدم بعض التفاصيل ‪،‬وهي‬ ‫طريقة جيدة جدا لمساعدة المبتدئيين دون‬ ‫ازعاج المستخدميين ذوي الخبرة ‪.‬‬ ‫تعد أدوات التلميح معلومات تكميلية وال يجب‬ ‫التعامل معها كوسيلة أساسية لمساعدة‬ ‫المستخدمين في فهم النظام ‪ ،‬إذ ال تستخدم‬ ‫أدوات التلميح غالبا في األجهزة المحمولة‬ ‫‪.‬لذا ال نعتمد عليها أو نفترض أن المستخدم‬ ‫سيقرؤها ‪.‬‬ ‫‪9‬‬ ‫متحكمات واجهة المستخدم‬ ‫التنوع في االستخدام‬ ‫‪ -‬إضافة سهم باتجاه الكائن الذي يصفه‬ ‫التلميح‪.‬‬ ‫‪ -‬استخدام تنسيق بسيط أو العناصر المرئية‬ ‫للمعلومات اإلضافية ‪.‬‬ ‫‪10‬‬ ‫متحكمات واجهة المستخدم‬ ‫‪.12‬التنبيه ‪:Alert Guidelines‬‬ ‫يجب استخدامها بحكمة واعتدال ‪،‬اذ تقاطع‬ ‫التنبيهات عمل المستخدم ‪،‬وتتطلب عمال‬ ‫يجب متابعته من قبله بخالف اإلشعارات أو‬ ‫رسائل التحقق من صحة المدخالت ‪.‬‬ ‫اذ يؤدي اإلكثار من استخدامها إلي التقليل‬ ‫من أهميتها وازعاج المستخدم ‪.‬‬ ‫‪11‬‬ ‫متحكمات واجهة المستخدم‬ ‫التنوع ‪:‬‬ ‫لالبالغ عن خطأ أو عرض تحذيرات‬ ‫حول اإلجراءات التي قد تكون مدمرة‬ ‫‪12‬‬  ‫متحكمات واجهة المستخدم‬ ‫‪.13‬جدول البيانات ‪:Data Table Guidelines‬‬ ‫تستخدم جدول البيانات –التي تسمي أيضا عارض الجدول ‪،Table view‬وشبكات البيانات‬ ‫‪ data grids‬األعمدة والصفوف لعرض معلومات المرتبطة في الشبكة ‪.‬‬ ‫تكون الجداول قابلة للقراءة و مألوفة عندما تصميم بطريقة مناسبة ‪.‬‬ ‫‪13‬‬ ‫متحكمات واجهة المستخدم‬ ‫يجب تخصيص اختالفات‬ ‫التفاصيل عند الطلب لجداول‬ ‫البيانات المعقدة ‪،‬فهو مزعج‬ ‫للمستخدم عندما يكون‬ ‫يتصفح ‪.‬لذا من األفضل‬ ‫عرض البيانات التي يحتاجها‬ ‫المستخدم فقط ‪.‬‬ ‫‪14‬‬ ‫متحكمات واجهة المستخدم‬ ‫‪.14‬األيقونات ‪:Icons‬‬ ‫توجد األيقونات في كل مكان في البرامج و‬ ‫الويب ‪ ،‬تساعد المستخدمين علي التعرف‬ ‫علي األشياء بسرعة وبدقة ‪،‬تنقل المعني‬ ‫للمستخدمين بسرعة ‪.‬‬ ‫‪15‬‬ ‫نماذج تصميم واجهة المستخدم ‪User Interface Prototypes‬‬ ‫يعتبر استخدام النماذج من اهم التقنيات المستخدمة في‬ ‫تصميم الواجهات المستخدم وذلك النها تمنح المصمم‬ ‫إمكانية انشاء أكثر من نموذج في لنفس الواجهة ومن‬ ‫ثم دراسة وتحليل الجوانب المختلفة لكل نموذج من‬ ‫هذه النماذج من خالل إضافة او حذف عناصر‬ ‫والمكونات المختلفة وصوال الي النموذج الذي يمكن‬ ‫اعتباره األفضل من بينها جميعا ‪.‬باإلضافة لذلك فإن‬ ‫هذه النماذج تعطي المصمم تصورا أوليا لواجهة‬ ‫المستخدم التي سوف يتم إنشاءها ‪ ،‬لذلك تعتبر هذه‬ ‫النماذج األساس النظري أويمكن القول أنها الخطوة‬ ‫والمهمة التي يبدأ منها تصميم وتطوير واجهة‬ ‫المستخدم الحقيقية ‪.‬‬ ‫‪16‬‬ ‫نماذج تصميم واجهة المستخدم ‪User Interface Prototypes‬‬ ‫خطوات إنشاء نموذج أولي لواجهة المستخدم ‪.‬‬ ‫‪.1‬تحديد المتطلبات ‪:‬يعني تحليل الواجهة من‬ ‫حيث تحديد متطلبات واحتياجات واجهة‬ ‫المستخدم وما يريده بالضبط من هذه الواجهة‬ ‫‪.‬ويقصد باإلحتياجات هنا هو ماتريده الجهة‬ ‫المالكة للنظام أو التي طلبت تصميم الواجهة‬ ‫وتعتمد علي مجموعة المهام والوظائف المطلوبة‬ ‫من النظام أو التطبيق تنفيذها ‪.‬كل نظام أو تطبيق‬ ‫صمم ليلبي احتياجات الخاصة به ‪.‬‬ ‫‪17‬‬ ‫نماذج تصميم واجهة المستخدم ‪User Interface Prototypes‬‬ ‫‪.2‬بناء النموذج ‪ :‬مايعرف بالنماذج األولية لواجهة‬ ‫( ‪Essential User Interface‬‬ ‫المستخدم‬ ‫‪ )Prototypes‬التي تكون علي شكل مخططات و‬ ‫رسومات تجريبية أو مسودات (‪ )Sketches‬تظهر عليها‬ ‫المالمح األولية والعناصر األساسية للواجهة ‪.‬‬ ‫هنا ينتقل المصمم من مرحلة تعريف متطلبات المستخدم‬ ‫إلي مرحلة التحليل وهي النقطة التي يتم عندها اتخاد‬ ‫القرار بتطوير جميع األجزاء المكونة للنموذج األولي او‬ ‫بعضها فقط ‪.‬‬ ‫تبدأ هذه العملية باتخاذ قرارات أساسية ومهمة تتحدد علي‬ ‫أثرها معمارية الواجهة ‪.‬‬ ‫مثل هي‪ /‬لنظام كمتصفح اإلنترنت ام استخدامها كواجهة‬ ‫مستخدم رسومية ‪ GUI‬تعمل مع نظام ‪Windows‬فقط ‪.‬‬ ‫هذا التحديد سببه أن األنواع المختلفة من التطبيقات‬ ‫يستخدم في تطويرها و برمجتها لغات برمجة وأدوات‬ ‫برمجة مختلة ‪.‬‬ ‫‪18‬‬ ‫نماذج تصميم واجهة المستخدم ‪User Interface Prototypes‬‬ ‫‪.3‬التقييم ‪:‬‬ ‫من المهم في هذه المرحلة الرجوع إلي صاحب‬ ‫التطبيق لتقوم بتجربة الواجهة والتأكد من ان هذا‬ ‫التصميم بشكله الحالي يلبي احتياجات مستخدميها‪.‬عادة‬ ‫تقوم هذه الجهة تقييم الواجهة من خالل تجربتها من‬ ‫قبل عدة مستخدميين ليتم في النهاية وضع إجابات علي‬ ‫ثالثة أسئلة مهمة وهي ‪:‬‬ ‫‪.1‬ماهي الجوانب اإليجابية في التصميم ؟‬ ‫‪.2‬ماهي الجوانب السلبية في التصميم ؟‬ ‫‪.3‬ماهي الجوانب التي تم اغفالها و يجب ان يتضمنها‬ ‫التصميم ؟‬ ‫‪19‬‬  ‫نماذج تصميم واجهة المستخدم ‪User Interface Prototypes‬‬ ‫بعد تقييم النموذج من المحتمل حذف بعض األجزاء أو المكونات من النموذج أو العكس ربما تكون‬ ‫بالحاجة إلضافة بعض المكونات و العناصر ‪.‬ويتم إيقاف عملية التقييم عندما ال تنتج تجربة‬ ‫الواجهة أية أفكار جديدة لتحسين عمل الواجهة أو جعل عملية التقيم مستمرة ‪.‬‬ ‫مثال ‪:‬تصميم عربة تسوق لموقع ويب ‪:‬‬ ‫‪.1‬اسم النموذج ‪:‬عربة تسوق لموقع تجارة الكترونية‪.‬‬ ‫‪.2‬الوصف ‪:‬يتألف مكون العربة من‬ ‫‪ -‬زر " إضافة إلي عربة التسوق " لشراء المنتج ‪.‬‬ ‫‪ -‬رمز عربة التسوق ليشير الي معروضية المنتج للشراء‪ ،‬حيث يحوي رابطالعرض العناصر‬ ‫‪،‬ولبدء عملية الدفع ‪.‬‬ ‫‪.3‬المشكلة(الهدف) ‪:‬يرغب المستخدمون في شراء منتج من موقع تجارة إلكترونية ‪.‬‬ ‫‪.4‬سياق اإلستخدام ‪:‬يستخدم هذا النموذج عندما يسمح متجر الكتروني بتصفح المنتجات ‪،‬أو عندما‬ ‫يحوي المتجر علي أكثر من منتج للشراء ‪ ،‬او يطلب المتجر مراجعة الطلب قبل اتمام الشراء‪.‬‬ ‫‪20‬‬  ‫‪.5‬الحل ‪:‬نبدأ بتصميم الواجهة علي الخطوات السابقة ‪.‬‬ ‫‪.6‬عرض المنتج وإضافته إلي العربة ‪:‬‬ ‫وضع زر بجانب المنتج إلضافته إلي عربة التسوق ‪.‬‬ ‫‪.7‬تعديل ومعاينة العربة ‪:‬‬ ‫‪ -‬عندما يضغط المستخدم علي زر" إضافة إلي العربة " تظهر مالحظة إلي اتمام إضافة المنتج إلي العربة ‪،‬‬ ‫ويزداد عدد المنتجات في مؤشر رقمي بجوار أيقونة عربة التسوق ‪.‬‬ ‫‪ -‬عرض معاينة لعربة التسوق مع المنتجات ‪،‬وعرض الخيارات المحددة‪.‬‬ ‫‪ -‬عرض مالحظات بشأن الخطوات التالية ‪،‬مثل تعديل عربة التسوق ‪،‬أو عرض كامل السلة ‪،‬أو مواصلة‬ ‫التسوق ‪،‬أو بدء الدفع إلكمال الشراء‬ ‫نماذج تصميم واجهة المستخدم ‪User Interface Prototypes‬‬ ‫‪.8‬عرض عربة التسوق ‪:‬‬ ‫‪ -‬عرض منفصل لسلة التسوق مع المنتجات المضافة إليها ‪،‬بحيث يمكن للمستخدم تعديلها‬ ‫‪،‬أو إكمال الطلب ‪.‬‬ ‫‪ -‬تأمين إجراءات لتعديل الكميات ‪،‬وإزالة المنتجات ‪.‬‬ ‫‪ -‬تأمين طرقة للدفع وتسجيل الخروج ‪ ،Checking out‬أو إتمام الشراء ‪.‬‬ ‫‪.9‬التوصيات ‪:‬‬ ‫قد تعرض خيارات مع زر اإلضافة ‪،‬مثل حدد للكمية ‪،‬أو محدد النمط ‪،‬وغير ذلك ‪،‬ويجب‬ ‫إلغاء تفعيل زر اإلضافة إذا كان المنتج يتطلب خيارات مثل تحديدالنمط أو الحجم ولم‬ ‫يحدده المستخدم ‪.‬‬ ‫‪22‬‬  ‫تعريف تفاعل اإلنسان مع الحاسوب ‪HCI‬‬ ‫‪ -‬هو مجال متعدد التخصصات يتناول تصميم وتقييم األنظمة التفاعلية التي تستخدم من قبل‬ ‫البشر‪.‬يهدف ‪ HCI‬إلى تحسين العالقة بين المستخدمين وأجهزة الكمبيوتر من خالل‬ ‫دراسة كيفية تفاعل األفراد مع التكنولوجيا وكيفية تحسين هذه التفاعالت لتكون أكثر‬ ‫فعالية وكفاءة ومالءمة وسهلة االستخدام‪ ،‬وممتعة للمستخدمين ‪.‬‬ ‫‪ -‬إدراك اإلنسان هو عملية ديناميكية ومعقدة‪ ،‬تعتمد على تفاعل العوامل الحسية‪ ،‬النفسية‪،‬‬ ‫والثقافية‪.‬فهم خصائص اإلدراك يساعد في تحسين التواصل‪ ،‬التعليم‪ ،‬والتفاعل بين‬ ‫األفراد‪.‬‬ ‫‪ -‬تهتم ‪: HCI‬‬ ‫‪.1‬أساليب وطرق تصميم واجهة المستخدم وذلك استنادا إلي مستوي المستخدم ونوع‬ ‫المهمات المطلوب تنفيذها حيث يتم اختيار أفضل تصميم للواجهة إلي أكبر قدر ممكن من‬ ‫الخصائص وكذلك امكانيات تعليم مهارات اإلستخدام بفعالية ‪.‬‬ ‫‪23‬‬  ‫تعريف تفاعل اإلنسان مع الحاسوب ‪HCI‬‬ ‫‪.2‬طرق تنفيذ الواجهات (البرمجيات المستخدمة –المكتبات والخورزميات ذات الكفاءة‬ ‫العالية )‪.‬‬ ‫‪.3‬تقنيات تقيم ومقارنة الواجهات ‪.‬‬ ‫‪.4‬تطوير واجهات جديدة وتطوير تقنيات التفاعل ‪.‬‬ ‫‪.5‬تطوير النماذج الوصفية والتنبوئية ونظريات التفاعل ‪.‬‬ ‫علي المدي البعيد فهو تصميم أنظمة تقلل إلي أقصي حد الحواجز بين النموذج واإلدراكي‬ ‫لالنسان الذي يريد انجازه ‪.‬‬ ‫‪24‬‬