حسام مقداد
14-Feb-2006, 03:47 PM
القياســــيـة
- حتى ولو لم تكن مقتنعا انه صحيح , إذا قامت شركة مثل مايكروسوفت بشيء ما في منتج مشهور لها (مثل MS Word) أو غيرة , فإنه من المناسب التفكير أن الناس ستكون متأقلمة معه , وستنظر إليه على انه قياسي وواضح
ببساطة سيجدونه سهلا لإنه سبق وتعاملوا معه
- لاتكن متأكدا انه ليس صحيح لإن مايكروسوفت تصرف الكثير من الوقت والمال للتأكد من ان برامجها تناسب المستخدمين , وبمجرد طرحها لفكرة جديدة في الواجهه أعلم انها فكرة ممتازة أو انها ستصبح فكرة أفتراضيه وعامة , وفي كلا الحالتين لابأس بتقليدها في برامجك .
القياسية لاتتعلق بالصحيح والخاطيء , بل تتعلق بالإنتشار . والإنتشار هو الذي ي**بك اعتيادية بالتعامل مع الوظائف الأساسية ..
لدي الكثير من التعليقات على واجهات ميكروسوفت ويندوز , ولكنها غير مهمه باعتبار أنه حتى الأولاد اصبحو متمرسين فيها , وصارت تدرس من أساس استخدام الحاسوب , مع انها كان يمكن ان تكون أفضل .
حافظ على قياسية برامجك , وقلد واجهات الأنظمة والبرامج المشهورة
أذكر مرة رأيت برنامج مصمم وكأنه يشبه السفينة الفضائية ,وعندما سألت المبرمج عن زر الإغلاق .... قال لي بفخر .. إحزر أين هو ؟
ماهذا ؟؟ ومن قال أنه على المستخدم أن يحزر كيف سينفذ عمل ما ..
أفضل برنامج DOS يقبل امر exit بدلا من سفينة فضائية لا أستطيع الخروج منها !
-------
المزيد في تصميم الواجهات
أفهم ماذا يريد المستخدم
تقسم العملية البرمجية على ثلاث نماذج :
Machine Module : وهو الجزء المتعلق بجهاز الحاسب الذي سيقوم بتنفيذ برنامجك فيزيائيا .
Program Module : وهو الجزء المتعلق ببرنامجك وبك انت كمبرمج .
User Module : وهو الجزء المتعلق بمستخدم البرنامج النهائي , وهو هدف الأجزاء السابقة .
يجب ان تعرف أن مايهم المستخدم من هذه الاجزاء هو الجزء الاخير, وهدف برنامجنا هو خدمة المستخدم .. لذلك سأقسم تفكيرنا في المشروع من منظورين مبدأيا :
- نفكر من منظور المستخدم لتحديد مهام البرنامج وخواصة
- ونفكر من منظور المبرمج فقط لتحديد كيفية تنفيذ هذه المهام والخصائص .
يهم المستخدم تنفيذ المهمة ولا يهتم بالطريقة التي يتم فيها تنفيذ ذلك . ولايجب عليك ان تبالي كثيرا بصعوبة القيام بتفاصيل صغيره مادامت ستخدم المستخدم بالنهاية ..
وبنفس الوقت لاتشغل المستخدم بأي من التفاصيل التي تدور في Program Module فهو ليس مسؤول عنها , وينحصر اهتمامه على تنفيذ الوظائف فقط .
أجعل المستخدم يشعر بالتفاعلية أثناء التحكم .
ودائما أتح له أمكانية التراجع عن عمل ما بعد القيام به , أوأمكانية إلغاء أمر ما بعد البدء , أو مقاطعة عملية أثناء تنفيذها ...
إسمح للمستخدم بتنفيذ مهامة بأكثر من طريقة
تستطيع في أي من برامج ويندوز الوصول إلى نفس الأمر بالعديد من الطرق :
زر , شريط أدوات , قائمة رئيسية , اختصار لوحة مفاتيح , قائمة يمنى الخ .. هذا يعتبر تصميم جيد لواجهات المستخدم .
ضع المعلومات المهمة في الزاوية العليا اليمنى من الشاشة
بسبب التأثيرات الثقافية تتعقب عيوننا لا أراديا الزاوية العليا اليمنى من الشاشة وتتابع لباقي اجزاء الشاشة , ضع المعلومات الأهم في هذه الزاوية ,
بالنسبة للبرامج الاجنبية , فبالع** نستخدم الزاوية العليا اليسرى
جمع العناصر المرتبطة مع بعضها في مكان واحد
ربما باحاطتها بمربع او بوضعها في صفحة مستقلة , او فصلها بخط افقي .... أي شيء يبين وحدتها العضوية
حدد من عدد الالوان التي تستخدمها
الألوان الكثيرة تصرف نظر المستخدم , وتشتت التفكير ..
لاتكثر أبدا من الألوان , وحافظ على الوقع النفسي للألوان , فالألوان الحمراء خطرة عنوانية , والخضراء آمنه استفسارية , الزرقاء بارزة سؤالية , وهكذا ..
حدد عدد الخطوط التي تستخدمها
كذلك الامر تماما بالنسبة للخطوط , وخاصة في مواقع الويب .
تجنب قدر المستطاع الخطوط المزخرفة كثيرا , والخطوط المائلة , فهي خطوط استعراضية غير مناسبة لبرامج عملية .
وحد حجوم عناصرك وارصفها بمحاذاة بعضها
من المهم جدا الحفاظ على أطوال قياسية ثابتة للعناصر , ولاداعي لوجود اختلافات في ارتفاع الصف الواحد , او أختلاف في عرض عناصر العمود الواحد , الشكل الهندسي المقطع شبكيا من السهل الإنتقال فيه بالنظر..
رصف المكونات بموازاة بعضها يسهل من عملية ضبط الشاشة وتقسيمها بشكل آلي من العين .
يجب ان تبدأ المكونات من نفس البعد عن الحافة اليمنى (للبرامج العربيه) .
استخدام حجوم مختلفة وألوان كثيرة وخطوط في برنامجك سيجعل الوضع خبيصة , يسميها مختصو التقنية Clown-pants Design .. ابتعد عنها
أزرار الحكم على فقرة ما تكون أسفل يسار الفقرة
عندما يوجد نص يقرأة المستخدم ثم يضغط زر
ضع الزر على يسار النص من الاسفل , وذلك لمجاراة سياق القراءة الطبيعي "من اليمين لليسار" حيث تقوم العين البشرية آليا بالمسح بهذا الإتجاه , وتولد شعور نفسي أن هذا الزر تابع لهذه الفقرة .
في حال وجود اكثر من زر , تأكد من كون الزر الافتراضي مفعل أولا .
حافظ على أمن واجهاتك
لاتجعل الأزرار التي تنفذ مهام خطيرة بنفس وضوح الأزرار العادية .
أفصلها وميزها عن بعضها بطريقة ما ..
مثلا نبعد زر الحذف ضعف المسافة المعتبرة بين الزر والزر , في حين يكون زرا عدم الحذف وإلغاء الامر يملكان مسافة قياسية , مما يجعل المستخدم يدرك مباشرة ان مهمة هذا الزر ليست قياسية , او ليست آمنه
http://www.orwah.net/uploads/files/safe.gif
لاتنسى وجود رسائل التاكيد لكل المهام الخطيرة , كالحذف والتراجع
رسائل التاكيد يفضل ان تحوي معلومات مميزة للبيانات التي ستحذف , وليس فقط تأكيد روتيني للحذف . مثال :
بدلا من : "هل أنت متأكد انك تريد الحذف " [نعم][لا]
نستخدم : "هل أنت متاكد انك تريد حذف سجل الموظف 'عروة' , ذو الرقم '150' ."[حذف][عدم الحذف]
الواجهة الهندسية أفضل من الواجهة الفنية :
تذكر ان برنامجك لي لوحة زيتية لفنان تشكيلي , وسهولة استخدام الواجهة وأمنها أهم من جمالها , لذلك حافظ على القياسات الهندسية الموحدة في برنامجك واتبع نموذج واضح في كل البرنامج من الرصف والحجوم والأبعاد :
http://www.orwah.net/uploads/files/align0.gif
http://www.orwah.net/uploads/files/dimension.gif
- حتى ولو لم تكن مقتنعا انه صحيح , إذا قامت شركة مثل مايكروسوفت بشيء ما في منتج مشهور لها (مثل MS Word) أو غيرة , فإنه من المناسب التفكير أن الناس ستكون متأقلمة معه , وستنظر إليه على انه قياسي وواضح
ببساطة سيجدونه سهلا لإنه سبق وتعاملوا معه
- لاتكن متأكدا انه ليس صحيح لإن مايكروسوفت تصرف الكثير من الوقت والمال للتأكد من ان برامجها تناسب المستخدمين , وبمجرد طرحها لفكرة جديدة في الواجهه أعلم انها فكرة ممتازة أو انها ستصبح فكرة أفتراضيه وعامة , وفي كلا الحالتين لابأس بتقليدها في برامجك .
القياسية لاتتعلق بالصحيح والخاطيء , بل تتعلق بالإنتشار . والإنتشار هو الذي ي**بك اعتيادية بالتعامل مع الوظائف الأساسية ..
لدي الكثير من التعليقات على واجهات ميكروسوفت ويندوز , ولكنها غير مهمه باعتبار أنه حتى الأولاد اصبحو متمرسين فيها , وصارت تدرس من أساس استخدام الحاسوب , مع انها كان يمكن ان تكون أفضل .
حافظ على قياسية برامجك , وقلد واجهات الأنظمة والبرامج المشهورة
أذكر مرة رأيت برنامج مصمم وكأنه يشبه السفينة الفضائية ,وعندما سألت المبرمج عن زر الإغلاق .... قال لي بفخر .. إحزر أين هو ؟
ماهذا ؟؟ ومن قال أنه على المستخدم أن يحزر كيف سينفذ عمل ما ..
أفضل برنامج DOS يقبل امر exit بدلا من سفينة فضائية لا أستطيع الخروج منها !
-------
المزيد في تصميم الواجهات
أفهم ماذا يريد المستخدم
تقسم العملية البرمجية على ثلاث نماذج :
Machine Module : وهو الجزء المتعلق بجهاز الحاسب الذي سيقوم بتنفيذ برنامجك فيزيائيا .
Program Module : وهو الجزء المتعلق ببرنامجك وبك انت كمبرمج .
User Module : وهو الجزء المتعلق بمستخدم البرنامج النهائي , وهو هدف الأجزاء السابقة .
يجب ان تعرف أن مايهم المستخدم من هذه الاجزاء هو الجزء الاخير, وهدف برنامجنا هو خدمة المستخدم .. لذلك سأقسم تفكيرنا في المشروع من منظورين مبدأيا :
- نفكر من منظور المستخدم لتحديد مهام البرنامج وخواصة
- ونفكر من منظور المبرمج فقط لتحديد كيفية تنفيذ هذه المهام والخصائص .
يهم المستخدم تنفيذ المهمة ولا يهتم بالطريقة التي يتم فيها تنفيذ ذلك . ولايجب عليك ان تبالي كثيرا بصعوبة القيام بتفاصيل صغيره مادامت ستخدم المستخدم بالنهاية ..
وبنفس الوقت لاتشغل المستخدم بأي من التفاصيل التي تدور في Program Module فهو ليس مسؤول عنها , وينحصر اهتمامه على تنفيذ الوظائف فقط .
أجعل المستخدم يشعر بالتفاعلية أثناء التحكم .
ودائما أتح له أمكانية التراجع عن عمل ما بعد القيام به , أوأمكانية إلغاء أمر ما بعد البدء , أو مقاطعة عملية أثناء تنفيذها ...
إسمح للمستخدم بتنفيذ مهامة بأكثر من طريقة
تستطيع في أي من برامج ويندوز الوصول إلى نفس الأمر بالعديد من الطرق :
زر , شريط أدوات , قائمة رئيسية , اختصار لوحة مفاتيح , قائمة يمنى الخ .. هذا يعتبر تصميم جيد لواجهات المستخدم .
ضع المعلومات المهمة في الزاوية العليا اليمنى من الشاشة
بسبب التأثيرات الثقافية تتعقب عيوننا لا أراديا الزاوية العليا اليمنى من الشاشة وتتابع لباقي اجزاء الشاشة , ضع المعلومات الأهم في هذه الزاوية ,
بالنسبة للبرامج الاجنبية , فبالع** نستخدم الزاوية العليا اليسرى
جمع العناصر المرتبطة مع بعضها في مكان واحد
ربما باحاطتها بمربع او بوضعها في صفحة مستقلة , او فصلها بخط افقي .... أي شيء يبين وحدتها العضوية
حدد من عدد الالوان التي تستخدمها
الألوان الكثيرة تصرف نظر المستخدم , وتشتت التفكير ..
لاتكثر أبدا من الألوان , وحافظ على الوقع النفسي للألوان , فالألوان الحمراء خطرة عنوانية , والخضراء آمنه استفسارية , الزرقاء بارزة سؤالية , وهكذا ..
حدد عدد الخطوط التي تستخدمها
كذلك الامر تماما بالنسبة للخطوط , وخاصة في مواقع الويب .
تجنب قدر المستطاع الخطوط المزخرفة كثيرا , والخطوط المائلة , فهي خطوط استعراضية غير مناسبة لبرامج عملية .
وحد حجوم عناصرك وارصفها بمحاذاة بعضها
من المهم جدا الحفاظ على أطوال قياسية ثابتة للعناصر , ولاداعي لوجود اختلافات في ارتفاع الصف الواحد , او أختلاف في عرض عناصر العمود الواحد , الشكل الهندسي المقطع شبكيا من السهل الإنتقال فيه بالنظر..
رصف المكونات بموازاة بعضها يسهل من عملية ضبط الشاشة وتقسيمها بشكل آلي من العين .
يجب ان تبدأ المكونات من نفس البعد عن الحافة اليمنى (للبرامج العربيه) .
استخدام حجوم مختلفة وألوان كثيرة وخطوط في برنامجك سيجعل الوضع خبيصة , يسميها مختصو التقنية Clown-pants Design .. ابتعد عنها
أزرار الحكم على فقرة ما تكون أسفل يسار الفقرة
عندما يوجد نص يقرأة المستخدم ثم يضغط زر
ضع الزر على يسار النص من الاسفل , وذلك لمجاراة سياق القراءة الطبيعي "من اليمين لليسار" حيث تقوم العين البشرية آليا بالمسح بهذا الإتجاه , وتولد شعور نفسي أن هذا الزر تابع لهذه الفقرة .
في حال وجود اكثر من زر , تأكد من كون الزر الافتراضي مفعل أولا .
حافظ على أمن واجهاتك
لاتجعل الأزرار التي تنفذ مهام خطيرة بنفس وضوح الأزرار العادية .
أفصلها وميزها عن بعضها بطريقة ما ..
مثلا نبعد زر الحذف ضعف المسافة المعتبرة بين الزر والزر , في حين يكون زرا عدم الحذف وإلغاء الامر يملكان مسافة قياسية , مما يجعل المستخدم يدرك مباشرة ان مهمة هذا الزر ليست قياسية , او ليست آمنه
http://www.orwah.net/uploads/files/safe.gif
لاتنسى وجود رسائل التاكيد لكل المهام الخطيرة , كالحذف والتراجع
رسائل التاكيد يفضل ان تحوي معلومات مميزة للبيانات التي ستحذف , وليس فقط تأكيد روتيني للحذف . مثال :
بدلا من : "هل أنت متأكد انك تريد الحذف " [نعم][لا]
نستخدم : "هل أنت متاكد انك تريد حذف سجل الموظف 'عروة' , ذو الرقم '150' ."[حذف][عدم الحذف]
الواجهة الهندسية أفضل من الواجهة الفنية :
تذكر ان برنامجك لي لوحة زيتية لفنان تشكيلي , وسهولة استخدام الواجهة وأمنها أهم من جمالها , لذلك حافظ على القياسات الهندسية الموحدة في برنامجك واتبع نموذج واضح في كل البرنامج من الرصف والحجوم والأبعاد :
http://www.orwah.net/uploads/files/align0.gif
http://www.orwah.net/uploads/files/dimension.gif