الفصل 3 التفاعل التفاعل نماذج التفاعل • الترجمة بين المستخدم والنظام – بيئة العمل • الخصائص الفيزيائية للتفاعل – أنماط التفاعل • طبيعة حوار المستخدم/النظام – سياق • االجتماعية والتنظيمية والتحفيزية – ما هو التفاعل تواصل المستخدم النظام ولكن هل هذا كل شيء...؟ انظر "اللغة والعمل" في الفصل الرابع– ... نماذج من التفاعل شروط التفاعل نموذج نورمان إطار التفاعل بعض شروط التفاعل المجال - -كيف مجال العمل قيد الدراسة الهدف -ما تريد تحقيقه المهمة تقوم بها ملحوظة … التفاعل التقليدي– ... كثيرا خاصة المهمة/الهدف !!! – يختلف استخدام المصطلحات ً نموذج دونالد نورمان سبع مراحل • يحدد المستخدم الهدف – يصوغ النية – يحدد اإلجراءات في الواجهة – ينفذ العمل – يدرك حالة النظام – يفسر حالة النظام – يقيم حالة النظام فيما يتعلق بالهدف – يركز نموذج نورمان على وجهة نظر المستخدم للواجهة • حلقة التنفيذ/التقييم هدف تنفيذ تقييم نظام يحدد المستخدم الهدف يصوغ النية يحدد اإلجراءات في الواجهة ينفذ العمل يدرك حالة النظام يفسر حالة النظام يقيم حالة النظام فيما يتعلق بالهدف • • • • • • • حلقة التنفيذ/التقييم هدف تنفيذ تقييم نظام يحدد المستخدم الهدف يصوغ النية يحدد اإلجراءات في الواجهة ينفذ العمل يدرك حالة النظام يفسر حالة النظام يقيم حالة النظام فيما يتعلق بالهدف • • • • • • • حلقة التنفيذ/التقييم هدف تنفيذ تقييم نظام يحدد المستخدم الهدف يصوغ النية يحدد اإلجراءات في الواجهة ينفذ العمل يدرك حالة النظام يفسر حالة النظام يقيم حالة النظام فيما يتعلق بالهدف • • • • • • • حلقة التنفيذ/التقييم هدف تنفيذ تقييم نظام يحدد المستخدم الهدف يصوغ النية يحدد اإلجراءات في الواجهة ينفذ العمل يدرك حالة النظام يفسر حالة النظام يقيم حالة النظام فيما يتعلق بالهدف • • • • • • • باستخدام نموذج نورمان بعض األنظمة أصعب في االستخدام من غيرها خليج التنفيذ ≠ صياغة إجراءات المستخدم اإلجراءات التي يسمح بها النظام خليج التقييم توقعات المستخدم لتغيير حالة النظام ≠ العرض الفعلي لهذه الحالة خطأ بشري -زالت وأخطاء الزالت فهم النظام والهدف الصياغة الصحيحة للعمل عمل غير صحيح االخطاء قد ال يكون حتى الهدف الصحيح! إصالح األشياء؟ االنزالق -تصميم أفضل للواجهة خطأ -فهم أفضل للنظام إطار أبود وبيل o انتاج u s المستخدم االساس i امتداد نورمان... يتكون إطار التفاعل الخاص بهم من 4أجزاء مستخدم – االدخال – نظام – انتاج/االخراج – مدخل لكل منها لغتها الفريدة التفاعل الترجمة بين اللغات مشاكل في التفاعل = مشاكل في الترجمة باستخدام نموذج عبود وبيل نوايا المستخدم تترجم إلى إجراءات في الواجهة تترجم إلى تغييرات في حالة النظام ينعكس في عرض اإلخراج يتم تفسيرها من قبل المستخدم اإلطار العام لفهم التفاعل ال يقتصر على أنظمة الكمبيوتر اإللكترونية يحدد جميع المكونات الرئيسية المشاركة في التفاعل يسمح بالتقييم المقارن لألنظمة تجريد – – – – بيئة العمل الجوانب المادية للواجهات واجهات صناعية بيئة العمل دراسة الخصائص الفيزيائية للتفاعل • ضا استخدام هذا لإلشارة • ضا باسم العوامل البشرية -ولكن يمكن أي ً تُعرف أي ً إلى الكثير من التفاعالت البشرية! بيئة العمل جيدة في تحديد المعايير والمبادئ التوجيهية لتقييد الطريقة التي • نصمم بها جوانب معينة من األنظمة بيئة العمل -أمثلة ترتيب الضوابط ويعرض • على سبيل المثال ،يتم تجميع الضوابط وفقًا للوظيفة أو تكرار االستخدام ،أو بشكل تسلسلي البيئة المحيطة • على سبيل المثال ،ترتيبات الجلوس قابلة للتكيف لتتناسب مع جميع أحجام المستخدمين مشاكل صحية • على سبيل المثال ،الوضع المادي ،والظروف البيئية (درجة الحرارة والرطوبة)، واإلضاءة ،والضوضاء، استخدام اللون • على سبيل المثال ،استخدام اللون األحمر للتحذير ،واألخضر لإلشارة إلى ما يرام، والتوعية بعمى األلوان وما إلى ذلك. واجهات صناعية واجهة المكتب مقابل الواجهة الصناعية؟ السياق مهم! الصناعية المكتبية نوع البيانات نصية رقمية معدل التغيير بطيء وبسرعة البيئة نظيفة قذرة …الفأر المنقوع بالزيت! واجهات زجاجية الواجهة الصناعية• : التقليدية ...األوجه والمقابض – اآلن ...الشاشات ولوحات المفاتيح – واجهة زجاجية • درجة حرارة السفينة ب 200 100 113 تمثيالت متعددة لنفس المعلومات 0 تمثيالت + أرخص وأكثر مرونة ومتعددة وقيم دقيقة عدم تحديد موقعه فعليًا– ، وفقدان السياق، والواجهات المعقدة قد تحتاج إلى كليهما • التالعب غير المباشر المكتب – التفاعل المباشر • يتفاعل المستخدم – مع العالم االصطناعي نظام الصناعية – التفاعل غير المباشر • نبات يتفاعل المستخدم – مع العالم الحقيقي من خالل الواجهة واجهه المستخدم مشاكل • .. مباشر تعليق االدوات تعليق – التأخير – أنماط التفاعل الحوار...الكمبيوتر والمستخدم أنماط مميزة للتفاعل أنماط التفاعل المشتركة واجهة األوامر القوائم اللغات الطبيعية سؤال /جواب وحوار االستعالم تعبئة النماذج وجداول البيانات WIMP أشر وقم بالنقر واجهات ثالثية األبعاد • • • • • • • • واجهة األوامر طريقة توصيل التعليمات للحاسوب بشكل مباشر • مفاتيح الوظائف ،أو األحرف الفردية ،أو االختصارات القصيرة ،أو الكلمات الكاملة– ، أو مجموعة مناسبة للمهام المتكررة أفضل للمستخدمين الخبراء من المبتدئين يوفر الوصول المباشر إلى وظائف النظام يجب أن تكون أسماء/اختصارات األوامر ذات معنى! • • • • مثال نموذجي :نظام يونكس القوائم مجموعة من الخيارات المعروضة على الشاشة • الخيارات مرئية • تذكر أقل -أسهل في االستخدام – االعتماد على االعتراف لذلك يجب أن تكون األسماء ذات معنى – االختيار عن طريق• : األرقام والحروف ومفاتيح األسهم والماوس – الجمع (على سبيل المثال الماوس باإلضافة إلى المسرعات) – في كثير من األحيان يتم تجميع الخيارات بشكل هرمي • هناك حاجة إلى تجميع معقول – • شكل مقيد من نظام WIMPالكامل لغة طبيعية مألوفة للمستخدم • التعرف على الكالم أو اللغة الطبيعية المكتوبة • مشاكل • غامض – غامض – من الصعب القيام بعمل جيد! – حلول • حاول أن تفهم مجموعة فرعية – اختر الكلمات الرئيسية – واجهات االستعالم واجهات األسئلة واألجوبة • يقود المستخدم من خالل التفاعل عبر سلسلة من األسئلة – مناسبة للمستخدمين المبتدئين ولكن وظائفها مقيدة – كثيرا ما تستخدم في نظم المعلومات – • لغات االستعالم (مثل )SQL تستخدم السترداد المعلومات من قاعدة البيانات – يتطلب فهم بنية قاعدة البيانات وبناء جملة اللغة ،وبالتالي يتطلب بعض الخبرة – تعبئة النماذج في المقام األول إلدخال البيانات أو استرجاع البيانات شاشة مثل شكل الورق. البيانات توضع في المكان المناسب يتطلب تصميم جيد – مرافق تصحيح واضحة – • • • • جداول البيانات ،Lotus 3-2-1يليه VISICALCأول جدول بيانات • عا اليومMS Excel األكثر شيو ً تنوع متطور لملء النماذج• . تحتوي شبكة الخاليا على قيمة أو صيغة – يمكن أن تتضمن الصيغة قيم خاليا أخرى – ،على سبيل المثال مجموع كافة الخاليا في هذا العمود يمكن للمستخدم إدخال وتعديل جدول بيانات البيانات ويحافظ على – االتساق واجهة WIMP … أو النوافذ واأليقونات والماوس والقوائم المنسدلة! النمط االفتراضي لغالبية أنظمة الكمبيوتر التفاعلية ،وخاصة أجهزة • الكمبيوتر الشخصية وأجهزة سطح المكتب أشر وانقر فوق الواجهات مستعمل في • .. الوسائط المتعددة – متصفحات االنترنت – نص تشعبي – فقط انقر فوق شيء ما! • الرموز أو الروابط النصية أو الموقع على الخريطة – الحد األدنى من الكتابة • واجهات ثالثية األبعاد الواقع االفتراضي • أنظمة النوافذ "العادية"• . أزرار مسطحة… انقر علي! … أو منحوتة تسليط الضوء – القدرة البصرية – االستخدام العشوائي – مربك فقط! مساحات عمل ثالثية األبعاد • استخدامها لمساحة افتراضية إضافية – الضوء واالنسداد يعطيان العمق – آثار المسافة – عناصر واجهة Wimp النوافذ واأليقونات والقوائم والمؤشرات +++ األزرار وأشرطة األدوات واللوحات ومربعات الحوار راجع أيضًا المواد التكميلية حول اختيار العناصر الضعيفة شبابيك • مناطق الشاشة التي تتصرف كما لو كانت مستقلة – يمكن أن تحتوي على نص أو رسومات – يمكن نقلها أو تغيير حجمها – يمكن أن تتداخل وتحجب بعضها البعض ،أو يمكن وضعها بجانب بعضها البعض (البالط) • أشرطة التمرير – السماح للمستخدم بتحريك محتويات النافذة ألعلى وألسفل أو من جانب إلى آخر • أشرطة العناوين – وصف اسم النافذة أيقونات • صورة أو صورة صغيرة • يمثل بعض الكائنات في الواجهة – في كثير من األحيان نافذة أو إجراء • يمكن إغالق النوافذ (أيقونية) – تمثيل صغير -العديد من النوافذ التي يمكن الوصول إليها • يمكن أن تكون الرموز كثيرة ومتنوعة – منمنمة للغاية – تمثيالت واقعية. المؤشرات • مكون مهم – يعتمد أسلوب WIMPعلى اإلشارة واختيار األشياء • يستخدم الماوس أو لوحة التتبع أو عصا التحكم أو كرة التتبع أو مفاتيح المؤشر أو اختصارات لوحة المفاتيح • مجموعة واسعة من الصور الرسومية القوائم • اختيار العمليات أو الخدمات المقدمة على الشاشة • الخيار المطلوب محدد بالمؤشر Font Typewriter Screen Times Options المشكلة -تشغل مساحة كبيرة على الشاشة الحل -النافذة المنبثقة :تظهر القائمة عند الحاجة Edit File أنواع القوائم • شريط القوائم الموجود أعلى الشاشة (عادة ً) ،يتم سحب القائمة ألسفل – القائمة المنسدلة -اضغط مع االستمرار على الماوس واسحب القائمة ألسفل – القائمة المنسدلة -النقر بالماوس يكشف القائمة – القوائم المنسدلة -يتحرك الماوس فوق الشريط فقط! • تظهر القائمة السياقية أينما كنت – القوائم المنبثقة -إجراءات للكائن المحدد – القوائم الدائرية -مرتبة في دائرة • من األسهل تحديد العنصر (منطقة مستهدفة أكبر) • أسرع (نفس المسافة إلى أي خيار) ...ولكن ال يستخدم على نطاق واسع! إضافات القوائم • القوائم المتتالية – هيكل القائمة الهرمية – اختيار القائمة يفتح قائمة جديدة – وهكذا إلى ما ال نهاية • مسرعات لوحة المفاتيح – مجموعات المفاتيح -نفس تأثير عنصر القائمة – نوعان • نشط عند فتح القائمة -عادة ً ما يكون الحرف األول • نشط عند إغالق القائمة -عادة Ctrl + letter عادة مختلفة !!! مشاكل تصميم القوائم • حدد أي نوع لالستخدام • ما الذي يجب تضمينه في القوائم على اإلطالق • الكلمات المستخدمة (اإلجراء أو الوصف) • كيفية تجميع العناصر • اختيار مختصرات لوحة المفاتيح أزرار • مناطق فردية ومعزولة ضمن شاشة يمكن تحديدها الستدعاء إجراء ما • أنواع خاصة – أزرار االختيار مجموعة من االختيارات المتبادلة– خانات االختيار -مجموعة من االختيارات غير الحصرية أشرطة األدوات • طوابير طويلة من األيقونات … … ولكن ماذا يفعلون؟ • الوصول السريع إلى اإلجراءات المشتركة • في كثير من األحيان للتخصيص: – اختر أشرطة األدوات التي تريد رؤيتها – اختر الخيارات الموجودة عليه اللوحات والقوائم الممزقة • المشكلة ليست هناك عندما تريد ذلك • الحلول – نوافذ صغيرة من اإلجراءات – يظهر/يخفي عبر خيار القائمة، على سبيل المثال األشكال المتوفرة في حزمة الرسم القوائم الممزقة والمثبتة – القائمة "تمزق" لتصبح لوحة األلوان صناديق الحوار • نوافذ المعلومات التي تنبثق لإلبالغ عن حدث مهم أو طلب معلومات. على سبيل المثال :عند حفظ ملف ،يتم عرض مربع حوار للسماح للمستخدم بتحديد اسم الملف وموقعه .بمجرد حفظ الملف ،يختفي المربع. التفاعلية من السهل التركيز على المظهر ماذا عن الشعور؟ واجهات تعتمد على الكالم • تتحسن بسرعة... ...ولكنها ال تزال غير دقيقة • كيفية إجراء حوار قوي؟ … التفاعل بالطبع! على سبيل المثال حجز طيران :نظام موثوق به "نعم" و"ال" انظر و اشعر • تحتوي أنظمة WIMPعلى نفس العناصر: النوافذ ،واأليقونات ،والقوائم ،والمؤشرات ،واألزرار ،وما إلى ذلك. • لكن أنظمة النوافذ المختلفة ...تتصرف بشكل مختلف على سبيل المثال ،قوائم MacOSمقابل Windows المظهر +السلوك = الشكل والمظهر مبادرة • من لديه المبادرة؟ السؤال القديم – اإلجابة – واجهة الكمبيوتر – WIMPالمستخدم • استثناءات ...WIMP أجزاء وقائية من الواجهة • مربعات الحوار المشروطة – تأتي ولن تذهب بعيدا! – جيد لألخطاء ،الخطوات األساسية – ولكن استخدمه بحذر خطأ وإصالح ال يمكننا دائ ًما تجنب األخطاء... ...ولكن يمكننا تصحيحها تسهيل اكتشاف األخطاء … ومن ثم يستطيع المستخدم إصالحها مرحبًا ،هذا هو نظام الحجز Go Faster ماذا تريد؟ (مستخدم) أريد السفر من نيويورك إلى لندن تريد تذكرة من نيويورك إلى بوسطن (المستخدم) ال آسف ،يرجى تأكيد واحد في وقت واحد هل تريد أن تطير من نيويورك (المستخدم) نعم ………… سياق التفاعل يتأثر بالسياق االجتماعي والتنظيمي • أشخاص أخرون – الرغبة في اإلعجاب ،المنافسة ،الخوف من الفشل • تحفيز – الخوف ،الوالء ،الطموح ،الرضا عن النفس • أنظمة غير كافية – يسبب اإلحباط ونقص الحافز الخبرة والمشاركة والمرح تجربة التصميم المشاركة الجسدية إدارة القيمة خبرة • المنزل والترفيه والتسوق – ال يكفي أن يتمكن الناس من استخدام النظام – يجب أن يرغبوا في استخدامه! • سيكولوجية الخبرة – التدفق ()Csikszentimihalyi – التوازن بين القلق والملل • تعليم – منطقة التنمية القريبة – األشياء التي يمكنك القيام بها فقط بمساعدة • أوسع ... – التحليل األدبي ،الدراسات السينمائية ،الدراما تجربة التصميم المفرقعات الحقيقية • رخيص و مبهج! – نكتة سيئة ،لعبة بالستيكية ،قبعة ورقية – سحب وفرقعة – تجربة التصميم المفرقعات االفتراضية • رخيص و مبهج – نكتة سيئة ،لعبة ويب ،قناع مقطوع – انقر وفرقعة – تجربة التصميم المفرقعات االفتراضية • رخيص و مبهج – نكتة سيئة ،لعبة ويب ،قناع مقطوع – انقر وفرقعة – كيف تعمل المفرقعات ملء نموذج الويب متلقي استالم بريد الكتروني wxvإلى: من.. : مرسل صفحة تكسير يفتح نقرات المتلقي يفتح الكراك... بطيء جدا رسالة ساعات تقدم فتح صفحة المفرقع نكتة الروابط لعبة على شبكة اإلنترنت قناع مرسل تجربة المفرقعات المفرقع الحقيقي المفرقع الظاهري العناصر السطحية تصميم صفحة/رسومات بسيطة ورخيصة ومبهجة لعب لعبة بالستيكية ونكتة لعبة الويب ونكتة تلبيس قناع القبعة الورقية لقصه تأثيرات مجربة المشتركة المقدمة إلى أخرى أرسلت عن طريق رسالة البريد اإللكتروني الخبرة المشتركة ال يمكن للمرسل رؤية المحتوى حتى يفتحه المستلم اإلثارة دالالت ثقافية جند التوقع محتويات اإلخفاء داخل الصفحة األولى -ال يوجد محتويات تشويق سحب التكسير بطيء ...تغيير الصفحة مفاجأة (عندما يعمل) ملف ( WAVعندما يعمل) التصميم الفيزيائي • قيود كثيرة: – مريح -الحد األدنى لحجم الزر – المادية -مفاتيح الجهد العالي كبيرة – القانونية والسالمة – ضوابط عالية – السياق والبيئة – سهل التنظيف – الجمالية – يجب أن تبدو جيدة – اقتصادية ... -وال تكلف الكثير! تصميم المقايضات والقيود متناقضة ...وتحتاج إلى مقايضات ضمن الفئات: على سبيل المثال ،السالمة – أدوات التحكم في الطباخ اللوحة األمامية – أكثر أمانًا للبالغين اللوحة الخلفية – أكثر أمانا للطفل بين الفئات على سبيل المثال ،بيئة العمل مقابل المادية -جهاز التحكم عن بعد MiniDisc بيئة العمل -يجب أن تكون الضوابط أكبر المادية – ال مجال! الحل -عناصر تحكم متعددة الوظائف ووظائف منخفضة سيولة • هل تعكس الجوانب المادية الخارجية التأثير المنطقي؟ – المتعلقة بالقدرة على تحمل التكاليف (الفصل )5 الحالة المنطقية كشفت في الحالة المادية؟ على سبيل المثال ،تشغيل/إيقاف األزرار إجراءات عكسية آثار عكسية؟ على سبيل المثال ،أزرار األسهم ،والضوابط تطور اإلجراءات العكسية أزرار نعم/ال • حسنا نوعا ما – "عصا التحكم" • أيضا السيطرة على الجانب األيسر • ضوابط الربيع الخلفي أزرار طلقة واحدة • عصا التحكم • بعض المتزلجون • جيد – مجموعات مختارة كبيرة حالة سيئة مخفية وحدة تحكم القرص الصغير تطور لحركة المسار سحب وتطور للحجم نابض العودة -معكوس طبيعي يستخدم لاللتواء سلسلة من الضوابط النابض الخلفي كل دورة من خالل بعض الخيارات -معكوس طبيعي يستخدم للخلف/لألمام التخطيط المادي ضوابط: العالقة المنطقية ~ التجميع المكاني التفاعل المتوافق تكشف المقابض الدوارة عن الحالة الداخلية ويمكن التحكم فيها بواسطة المستخدم والجهاز الحالة واضحة في األزرار الميكانيكية إدارة القيمة يستخدم الناس شيئًا ما فقط اذا لقد أدركت القيمة و القيمة تتجاوز التكلفة لكن مالحظة • االستثناءات (مثل العادة) • القيمة ليست بالضرورة مكاسب شخصية أو أموال وزن القيمة قيمة • يساعدني في إنجاز عملي • هزار • جيدة لآلخرين يكلف • وقت التحميل • المال جنيه إسترليني ،دوالر ،يورو • جهد التعلم مستقبل مخفضة • في االقتصاد صافي القيمة الحالية: – الخصم بمقدار (+1معدل) سنوات لالنتظار • في الحياة الناس خصم كبير – القيمة المستقبلية والتكلفة المستقبلية – وبالتالي مقاومة التعلم – بحاجة إلى حواجز منخفضة وقيمة حالية عالية HCIمثال -بحث كتاب • القيمة لألشخاص الذين لديهم الكتاب يساعدك على البحث عن األشياء – رقم الفصل والصفحة • ذات قيمة بالنسبة ألولئك الذين ال ... نوع من الموسوعة المصغرة على اإلنترنت – فقرة كاملة من السياق ...ولكنه يقول أيضا ً "اشترني"!! القيمة والتصميم التنظيمي • اإلكراه • أخبر الناس ماذا يفعلون! • القيمة = حافظ على وظيفتك • التثقيف • شرح قيم الشركات • إنشاء الدعم (مثل خيارات المشاركة) • ظهور • عملية التصميم بحيث يقدر األفراد القيمة التنظيمية درس عام… إذا كنت تريد من شخص ما أن يفعل شيئًا ما… • اجعلها سهله لهم! • فهم قيمهم