كيف تصمم واجهة موقع لوالدتك؟!

كتبه أحمد مجدي 18 أغسطس 2013

نعم لا تستغرب العنوان صحيح وليس به خطأ املائي، في مقال رائع كتبه طوني جينز على موقع Medium يشرح فيه بعض المشاكل التي تواجه والدته أثناء تعاملها مع الحاسب وخاصة المواقع الإلكترونية، سأورد ملخصاً له في نقاط سريعة، حيث تحدث عن مدى الصعوبة التي يواجهها كبار السن في التعامل مع المواقع لدرجة أن والدته في بعض الاحيان تستدعيه ليرى ماذا حدث بالحاسوب لان الموقع لا ينفذ مهمة ما أو أن الموقع الفلاني بطيء في التحميل؟!

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

دائماً ما نردد أن واجهة استخدام أي موقع يجب أن تكون سهلة الاستخدام وفي متناول الجميع، كلما كانت واجهة الموقع تنزل في مستوى تعاملها لتخاطب الفئة الاقل في التفكير والفئة التي يصعب علها التعامل مع التقنية بوسائلها وأدواتها المختلفة كلما كانت واجهة ناجحة، الواجهة الناجحة يجب أن تفك تعقيد أي نظام أو موقع!

هناك ملايين من مستخدمي المواقع الالكترونية في مثل سن والدي ووالدك وفي نفس خبراتهم في التعامل مع واجهات المواقع وتواجههم نفس مشاكل الواجهات المربكة – من وجهة نظرهم- أنها مسؤوليتنا نحن المصممين والمطورين لا أن نجعل واجهتنا سهلة الاستخدام فحسب بل أن تكون رائعة وممتعة في التعامل أيضاً.

يستخدمون متصفحات قديمة

IE8
متصفح انترنت اكسبلورر يستخدمة شريحة كبيرة

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

تنويهات ذات معنى في كل مرحلة

0-XTSe4us6V_51kMZM
احرص على ان تحبر المستخدم بنتيجة كل فعل يقوم به على الموقع

يجب أن تكون هناك تنويهات في كل مرحلة أو صفحة أو اكشن Action أو اجراء يقوم به المستخدم، مثال ( لقد تم تسجيل دخولك بنجاح – لقد تم ارسال رسالتك بنجاح – لقد فشل إرسال الرسالة أعد المحاولة …. الخ) استخدم الاشارات البصرية والصياغة اللفظية المناسبة، أوصف لهم الخطأ أو طريقة تنفيذ الامر بطريقة صحيحة.

الامكانيات الحديثة لواجهات المواقع … صعبة الفهم والتعلم

0-t-spEGxgRZUTvvxh
تقنيات التفاعل مع الوجاهت الحديثة لا تناسب كل كبار السن

امكانيات واجهات المواقع الحديثة كالسحب والافلات Drag And Drop  والتي تستخدم في مهام مثل رفع الصور وخلافة مازالت تقنيات لا يفهمها شريحة كبيرة من كبار السن، اجعل هناك خيارات في الواجهة للتوجية المباشر لتنفيذ المهام الضروري مثل ” زر ال Browse القديم الخاص بختيار الصور من الحاسوب ورفعها”.

الأيقونات رائعة ولكنها ليست مفهومة

0-5Ox_RCXqBtWT_rf2
حاول التقليل من الاعتماد على الايقونات صعبة الفهم

الايقونات Icons حقا سهلة الاستخدام وتضيف رونقاً خاصاً على واجهات الاستخدام، وفي كثير من الاحيان نستبدل النص بالايقونة، ولكن ماذا اذا لم يفهم المستخدم معني الايقونة؟ لن يستطيع تنفيذ المهمة التي تمثلها الايقونة، يقول طوني ” اتذكر يوماً أن والدتي هاتفتني لانها لا تستطيع حذف صورة رفعتها علي أحد المواقع، فأخبرتها أن تبحث عن رمز X او أيقونة سلة مهملات أو أي شئ شبية … فردت علي وقالت “لماذا لا يكتبون كلمة Delete مباشرة؟” … هذا مقال عن قابلية الإستخدام للأيقونات Icons والرموز فى الويب سيساعدك كثيرا في فهم فلسفة اختيار الايقونات ومشاكلها في قابلية الاستخدام.

علمني كيف أتعامل مع الموقع

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

عندما تعيد تصميم موقعك بشكل كامل وحتى لا تفقد جميع مريديك ومحبي وأنصار موقعك يجب أن تبقي على بعض العناصر في الواجهة حتى توجد رابطاً بين الواجهة القديمة والجديدة.

يكمل في نهاية المقال ليوضح طوني حقيقة هامة عن والدته – حتى لا يفهم الجميع أن الخطأ فيها وفي طريقة استخدامها للتقنية فيقول:

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

عن كاتب المقال

أحمد مجدي
مهندس تجربة الاستخدام، مدير المشروعات في نيوكسيرو ورئيس تحرير معمل ألوان، متخصص في تصميم واجهات مواقع ،تطبيقات الويب والموبايل منذ عام 2006. تويتر: @ahmedmagdi


كل مقالات الكاتب

اترك تعليقك على المقال 10 تعليقات

اترك تعليقاً على المقال

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