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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

أحمد مجدي
متخصص بتجربة الاستخدام، مصمم واجهات الإستخدام للويب والموبايل منذ 2008، امتلك خبرة معرفية وعملية عن التصميم الجرافيكي لواجهات الاستخدام والتفكير البصري، عملت مع أصحاب الأعمال التجارية في الشركات الكبيرة، المتوسطة، الصغيرة والأفراد لبناء جسـور بيـن احتياجات المستخدمين وأهدافهم التجارية. تابعني على تويتر: @ahmedmagdi


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

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

  • مقالة رائعة جدا و استفد منها كثيراااا ، شكرا لك

  • علاء السماوي

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

    ولكننا لازلنا نواجه كوابيس المستعرضات القديمة

  • مبروك الشكل الجديد روعة

  • صالح المغربي

    مقال مفيد , انبه الى بعض الاخطاء اللغوية والاملائية !

  • ماهو موقع Medium ؟

  • حقيقةً جاءت في وقتها ، شكر جزيلا لكم 🙂

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

  • محمد العاثم

    مقالة رائعة و موقع ناجح فعلا استفدت منه في تطوير موقعي

  • لماذا كل هذه السلبية !!؟
    المقال رائع وفيه أفكار مفيدة , بدلاً من أن تضيع علينا هذه المعلومات قدمها معمل ألوان وترجمها للعربية ! أين النسخ في ذلك؟؟
    هذا يسمى ترجمة !