الوحدة 12:

User Interface – UI
واجهة المستخدم

واجهة المستخدم هي الغلاف الخارجي اللي يغطي شغل المبرمج وأكواده بشكل جميل ولطيف
مثلاً الويندوز واجهة المستخدم فيه تحتوي على سطح المكتب ومجلدات مرتبة وشكلها يفتح النفس

واجهة المستخدم الجميلة، هي اللي تساعد المستخدم على تنفيذ مهامه بسهولة وسرعة وفعالية عالية.

إذا كانت البيانات الموجودة في واجهة الاستخدام معروضة بشكل سيء بحيث يصعب على المستخدم التعامل معها، فانها ستتسبب أحياناً بنتائج وخيمة << متعوب على الكلمة .

مثال على أضرار واجهات الاستخدام السيئة:
- في أحد الدول حدث عطل في مضخات المياه، وبسبب سوء واجهة استخدام النظام، لم يستطع العاملون التعرف على السبب، وكاد أن ينفجر أحد المفاعلات النووية بسبب هذا الخلل.

- موقع boo.com لبيع المنتجات الرياضية، كان تصميم الموقع سيء جداً وصعب الاستخدام، وبالتالي خسر عملاءه، وبعد 6 شهور فقط أغلق نشاطه التجاري.

HCI اختصاراً لـ Human and Computers Interaction هي دراسة عن كيفية تفاعل البشر مع الكمبيوتر وتطبيقاته. وهي تخبرنا بكيفية بناء واجهات استخدام تكون: سهلة ، وكفاءتها عالية، وآمنة، واستخدامها يكون ممتع، وبالتأكيد تكون تعمل!

* المستخدم يتواصل مع الكمبيوتر عن طريق واجهة المستخدم UI

* يعني واجهة الاستخدام تعتبر وسيط بين الكمبيوتر والمستخدم.

* مماسبق نستنتج بأن أكثر شيء يهم المستخدم في النظام هو واجهة الاستخدام. لأنه لايهتم بمايحدث في داخل النظام. فالنظام بالنسبة للمستخدم هو واجهة المستخدم UI.

تتميز واجهات المستخدم الجيدة بالتالي:
- أن تكون سهلة الاستخدام.
- أن يكون فهمها سهل من قبل المستخدم.
- أن تلبي متطلبات المستخدمين للنظام.
- أن تدعم المستخدمين في المهام التي يريدون تنفيذها.

* مصمم واجهات الاستخدام الممتاز، دائماً يفكر بالمستخدم واحتياجاته ورغباته، وليس برغباته الشخصية. ويهتم بسهولة استخدام Usability الـ UI بالنسبة للمستخدم.

ما المقصود بسهولة الاستخدام Usability ؟
يقصد بها النظام الذي يسمح للمستخدم أن يحقق أهداف معينة في مجال استخدام معين عن طريق تحقيق الثلاث عوامل التالية:
effectiveness – Efficiency – Satisfaction

Effectiveness : يقصد بها أن يتم تحقيق الأهداف والمهام بشكل كامل ودقيق
Efficiency : يقصد بها الموارد المستخدمة من قبل النظام في سبيل تحقيق الأهداف
كل ماقلت الموارد المستخدمة .. كل ماكان النظام أفضل، والموارد يقصد فيها مثلاً استهلاك ذاكرة الجهاز أو البطارية (لو كان برنامج للجوال) أو غيرها.
Satisfaction : يقصد بها مدى رضا وراحة المستخدم في استخدام النظام

* سهولة استخدام Usability النظام يقصد بها سهولة استخدام الـ UI أو واجهة استخدام النظام.

* المنظمات اللي تعتمد على الكمبيوتر في عملها، صعوبة استخدام النظام poor usability ممكن تؤدي إلى تقليل انتاجية المنظمة، وعدم رضا الموظفين، وغيرها من المشاكل الكثيرة.

* مدى سهولة أو صعوبة استخدام النظام في أي منظمة، يحدد مدى كفاءة وانتاجية هذه المنظمة. بمعنى كل ماكان النظام سهل الاستخدام كل مازادت كفاءة المنظمة وإنتاجيتها.

* لايقصد بسهولة الاستخدام الواجهات الفخمة أو الفلاشية أو غيرها، يعني سهولة الاستخدام Usability لاتعتمد على المنظر الخارجي وشكل للنظام.

User-centered Design

لتصميم واجهة مستخدم UI جيدة ، يجب أن نعرف أربع أشياء هامة:
- من هم المستخدمون الذين سيستخدمون النظام.
- ماهي خبرات المستخدمين؟
- ماهي المهارات التي يمتلكونها؟
- ماهي أهدافهم أو المهام التي يريدون تحقيقها من خلال استخدام النظام.

إذا كانت واجهة النظام التي سنصممها ستكون بديلة لواجهة نظام سابق (مثل تغيير تصميم موقع) يجب أن نعرف المعلومات التالية:
- ماهي توقعات المستخدمين؟
- كيف يقوم المستخدم في النظام القديم بتحقيق أهدافه؟
- كيف سيؤثر النظام الجديد على تحقيق أهداف المستخدمين ومهامهم؟

User Interface Design Principles
مبادئ تصميم واجهة المستخدم

UI widgets هي عبارة عن كل شيء موجود في واجهة المستخدم، مثل القوائم والأزرار والرسائل التنبيهية والأيقونات وغيرها

توجد سبع مبادئ لتصميم واجهات الاستخدام:

1- Visibility
هذا المبدأ يعني، أن نجعل عمل وفائدة كل عنصر من عناصر واجهة المستخدم واضحة عند رؤية العنصر.
مثال: الريموت الخاص بالفيديو نقدر نعرف زر التشغيل عن طريق العلامة اللي تشبه المثلث الموجودة فوق الزر، ونقدر نعرف رز الإيقاف بنفس الطريقة.

2- Feedback
يعني هذا المبدأ، أن نقوم بتوضيح مالذي قمنا بعمله بعد استخدام أي عنصر من عناصر واجهة المستخدم.
مثال: عند الضغط على أي زر في الجوال، نسمع صوت تنبيه صغير يخبرنا بأننا ضغطنا على الزر.

3- Affordance
معناه، أن نجعل فائدة استخدام كل عنصر واضحة للمستخدم.
مثال: عندما نرى في الويب كلمات لونها أزرق وتحتها خط نعرف بأن الضغط عليها سينقلنا إلى صفحة ويب أخرى.

4- Simplicity
جعل الأشياء بسيطة بأكبر شكل ممكن
مثال: توجد أزرار لعملية حفظ الملف أو فتح ملف جديد في كل البرامج في مكان واضح. لأن هذه العمليات هي من العمليات الشائعة لدى المستخدمين فمن المفترض أن نجعلها واضحة وسهلة الوصول.

هذا المبدأ يتطلب مننا فهم المستخدمين وحوائجهم، وماهي الأشياء التي يعتبرونها طبيعية بالنسبة لهم.

5- Structure
هذا المبدأ يعني بأن نقوم بوضع عناصر واجهة المستخدم اللي مرتبطة مع بعض في نفس المكان والقسم.
مثال: عند الدخول على قائمة file من برنامج الوورد، ثم الذهاب إلى طباعة، ستظهر لنا صفحة مقسمة، كل قسم يحتوي على أشياء مرتبطة مع بعضها البعض، مثلاً قسم يحتوي على إعدادات الطابعة، وقسم يحتوي على اعدادات الصفحات مثل كم عدد الصفحات وهل تريد طباعة الصفحة بالعرض أو بالطول وهل تريد طباعة كل الصفحات أم جزء معين منها.

6- Consistency
الثبات في التصميم، بمعنى أن نجعل مثلاً صفحات موقع الانترنت كلها تحتوي على نفس التصميم والقوائم وغيرها، وتختلف فقط في مضمون الصفحة.
ومثال آخر عليها: برنامج مايكروسوفت يستعمل تصميم ثابت (تقريباً) لبرامجه الثلاثة المشهورة وورد واكسل وبور بوينت، وهذا الشيء يجعل المستخدم يتعامل مع البرامج بسهولة.

7- Tolerance
القدرة على منع حدوث الأخطاء، أو سهولة التعافي منها في حال حدوثها.
مثال: اذا جينا نسجل في منتدى ونسينا مثلاً نكتب البريد الالكتروني وضغطنا على إكمال عملية التسجيل، راح نرجع لنفس الصفحة وبنلاقي علامة عند مكان البريد توضح لنا اننا ماكتبناه.

Recoverability
التعافي من الأخطاء

الـ error recovery ينقسم لقسمين
backward error recovery و forward error recovery

backward error recovery مثال عليه هو إذا جينا نسجل مستخدم جديد في المنتدى وكتبنا اليوزر والباسوورد لكن نسينا نكتب إيميل
اذا ضغطنا على زر إتمام التسجيل راح يرجعنا لنفس الصفحة وبنلاقي مكتوب انه لم يتم تعبئة جميع البيانات وبنلاقي علامة عند مكان الإيميل عشان نعرف وين الخطأ
هذا معناه انه ماحولنا على طريقة ثانية للتسجيل ولكنه رجعنا ورنا ونبهنا على الخطأ اللي صار

forward error recovery لو افترضنا ان نظام المنتدى بدل مايرجعنا لنفس الصفحة ويوضح لنا الخطأ اللي صار فتح لنا صفحة جديدة على الهوت ميل يطلب مننا نسوي تسجيل دخول في الإيميل واذا تم تسجيل الدخول بنجاح المنتدى راح يكمل عملية التسجيل بالإيميل اللي دخلنا فيه في الهوت ميل
هنا النظام مارجعنا للصفحة نفسها ولكنه حولنا للهوت ميل عشان يقدر يعرف الإيميل الخاص فينا ويستعمله في التسجيل

شكلي بدال ما أوضحها عقدتها أكثر بهالأمثلة اللي مثل وجهي

Visual Representation of Data

هي عملية عرض البيانات data من خلال رسومات بيانية أو مخططات أو خرائط بطريقة يستطيع فيها المستخدم تحويل هذه البيانات إلى معلومات.
مثل مؤشر سوق الأسهم، يقوم بإعطائنا معلومات عن مستوى ارتفاع أو انخفاض المؤشر عن طريق تجميع البيانات (أسعار الشركات المختلفة) وعرضها عن طريق رسم بياني

عملية أخذ المعلومات بهذه الطريقة (عن طريق الرسومات البيانية) تسمى information visualization

الكتابة النصية هي أكثر طريقة متعارف عليها لعرض المعلومات لأنها الطريقة الطبيعية.

لذلك يجب علينا أن نجعل النص قابل للقراءة Readable ، و سهل القراءة Legible

قابل للقراءة readable تعني بأن نختار نوع نص واضح (مثل arial) ونجعل حجم الخط مناسب للشاشة (لا يكون كبير جداً ولا صغير جداً)

سهل القراءة Legible تعني بأن نجعل المسافات بين الأسطر والكلمات والأحرف معقولة (هذي لمن يصمم مواقع انترنت سيفهمها) ، ببساطة بعض المواقع تجعل الأسطر قريبة من بعض هذه الحركة تكون مؤذية وغير مريحة للعين حتى تستطيع القراءة بسهولة. وأيضاً يجب أن لايكون عرض السطر طويل حتى يستطيع القارئ التنقل من سطر لآخر بسهولة.

أنواع الرسومات البيانية:
1- line graph

2- bar chart

عبارة عن أعمدة أو bars وكل عمود يمثل شيء مختلف. هذا النوع يستعمل إذا أردنا المقارنة بين أكثر من شيء، مثل انتاجية موظفين.

3- pie chart

رسمة الكيكة، هذي نستخدمها مثلاً اذا أردنا أن نعرف ماهي مصروفات الشركة التي تنفق عليها بشكل أكبر، عن طريق إدخال جميع المصروفات، وبعدين الرسمة تبين لنا أي نوع مصاريف تم إنفاقها بشكل أكبر.

عموماً تحديد نوع الرسمة المستخدمة يعتمد بشكل كبير على الهدف من الرسمة. يعني لازم نعرف الغرض من الرسمة عشان نقدر نحدد أي نوع هو المناسب.

في الرسومات البيانية توجد ثلاثة أشياء:
1- data-ink
هي أهم شيء في الرسمة البيانية، وهي الجزء الذي يساهم في تحويل البيانات إلى معلومات كما هو مطلوب.

2- non-data ink
هي عكس الأولى، هي أي شيء في الرسمة البيانية لايضيف أي شيء مفيد للمستخدم، بل على العكس هي تشتت المستخدم عن التركيز على مايريد.

3- redundant data-ink
هو الجزء الذي يعرض بيانات، ولكنه لايضيف معلومات.

* الرسومات البيانية يجب أن تكون كلها أو الجزء الأكبر منها من نوع data-ink

Chart junk
هذا يعتبر عدو الـ simplicity لأنه يشتت القارئ عن التركيز على هدفه.
مثل:في بعض مواقع الانترنت، الخلفيات والزخرفة الزائدة أو الصور الغير مفيدة والتي لاتضيف شيء للقارئ والخطوط الغريبة والتي يصعب قراءتها.

في عملية عرض المعلومات information visualization يوجد شيئين هامين:
1- selection:
وهي عملية اختيار البيانات data الأكثر ملاءمة للقارئ ولهدفه من رؤية هذا العرض أو الرسمة.

2- representation:
وهي طريقة العرض،مثل أن يستخدم لون معين لربط الأشياء المرتبطة مع بعض وغيرها من الحركات لتسهيل تحقيق الهدف للقارئ.

Designing for the Web
التصميم للويب

توجد سبع قواعد لتصميم مواقع الانترنت:

1- إذا أردنا أن نصمم موقع، يجب أن نفكر فقط بالأشياء المفيدة للقارئ والتي تهمه. (user-centered design)

2- يجب تحديث الموقع بشكل مستمر، ويجب أن يعرف المستخدم متى آخر مرة تم تحديث الموقع.

3- القاعدة الثالثة:
consistent layou: كلما كان تصميم الموقع ثابت في جميع الصفحات، كلما زادت سهولة استخدام الموقع.

simple structure: اذا كان تخطيط الموقع بسيط، سيساعد ذلك على إبراز عناصر موقع وأقسامه بشكل أكبر.

4- قم بلفت نظر المستخدم للأشياء التي تعتقد بأنها تهمه وتفيده. ممكن عملها عن طريق الألوان أو الخلفيات أو الأيقونات أو حجم الخط.

5- يجب أن يتيح الموقع للمستخدم أن يحقق أهدافه بسهولة وبدون أخطاء.

6- يجب أن يضيف الموقع بمحتوياته شيء جديد إلى عالم الويب. لأنه لن تكون لموقعك فائدة اذا كان محتواه موجود في مواقع أخرى!

7- يجب أن تهتم بسرعة تحميل صفحات الموقع. ولتسريع تحميل الصفحات (أو فتحها) يجب أن نقوم بإزالة الصور التي لاتضيف شيء مفيد للقارئ لأنها تزيد الحجم بدون فائدة. وأيضاً أن نستبدل الصور المصغرة thumbnails بدلاً من الصور الكبيرة. والابتعاد عن استخدام الفلاش لأنه يؤدي إلى تبطيء تحميل الصفحة.

* أصعب صفحة للتصميم هي الصفحة الرئيسية، لأنها هي التي يحكم من خلالها المستخدم على موقعك.

* يجب أن تحتوي الصفحة الرئيسية home page على الأشياء التالية:
- شيء يثبت للزائر بأنه موقعك. (لو كانت مدونة شخصية ممكن تضع صورتك واسمك وسيرتك وبيانات الاتصال بك)
- اسم الموقع.
- يجب أن يستطيع الزائر معرفة مكانه في الموقع (في أي صفحة يتواجد).
- مقدمة مختصرة عن موقعك، تبين للزائر فائدة موقعك ، حتى يستطيع معرفة المحتوى الذي يمكن أن يجده في الموقع.

عند تصميم الصفحات الداخلية interior pages للموقع يجب الانتباه للنقاط التالية:
- المعلومات يجب أنت تكون على علاقة بهدف الزائر Relevant، وموثوقة Credible ، ومفيدة Useful وجديدة أو محدثة up-to-date.
- المحتوى يجب أن يكون معروض بترتيب جميل ومنظم.
- الصفحات الداخلية يجب أن تحتوي على محتوى أكثر ، ومعلومات تعريفية بالموقع أقل.
- التنسيق يجب أن يكون ثابت (حجم العناوين والألوان ونوع الخط وغيرها).
- يجب أن تحتوي جميع الصفحات الداخلية على رابط ينقلنا للصفحة الرئيسية.
- يجب الاهتمام بالأخطاء الإملائية والقواعد بقدر الإمكان حتى لو كانت بسيطة، لأنها تقلل من جودة موقعك.

* المحتوى الهام وروابط الموقع من الأفضل أن تكون واضحة للمستخدم بدون أن يحتاج إلى النزول في الصفحة Scrolling.

* يجب أن تراعي في تصميم الموقع الناس الذين لديهم مشاكل في النظر، أحد الحلول الممكنة هي استخدام حجم أكبر للنص. شخصياً أختلف مع هالنقطة كلياً، لأن المتصفحات نفسها صارت فيها ميزة تكبير الخط، وغير كذا هم قالوا قبل شوي اننا نستعمل حجم خط مناسب (غير كبير ولا صغير!)