قابلية الإستخدام لزر “التالي” … أفكار وتلميحات

كتبه أحمد مجدي 30 مارس 2012

سيتناول هذا المقال بعض الأفكار والتلميحات التي تجعل من زر ” التالي” في المواقع قابل للإستخدام من قبل زائر الموقع.

الزائر يقول : " هذ الموقع مفيد جداً سأستمر في تصفح المزيد من المقالات "
الزائر يقول : ” هذ الموقع مفيد جداً سأستمر في تصفح المزيد من المقالات “

عندما يصل زائر الموقع إلى مرحلة “البحث عن الوسيلة التي تجعله يستمر في تصفح محتوى موقع ما” هذا يعني أن:-

  • الموقع نجح في جذب انتباه الزائر.
  • استطاع الموقع أن يقدم محتوى يستفيد منه المستخدم، ويلبي رغباته.
زر "التالي"
زر “التالي”

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

أسوء الاحتمالات

الزائر يقول : " اين اضغط ؟!! لأستمر في التصفح "
الزائر يقول : ” اين اضغط ؟!! لأستمر في التصفح “

أسوء الاحتمالات التي يمكن أن يجدها الزائر في الموقع هو عدم معرفته كيف يستمر في تصفح الموقع، سيبحث لمدة ثانيتين وليس أكثر عن الطريق واذا لم يجده سيغادر الموقع فوراً.

زر التالي موجود ولكنه ليس سهل الإستخدام

من المشاكل التي قد تواجه مستخدم الموقع في استخدامه “لزر التالي” انه قد يكون غير قابل للضغط Clickable! ومعناه أن الزر Button قد يكون مساحته قليلة جداً فلا يستطيع المستخدم أن يؤشر عليه بسرعة وسهولة.

الزائر يقول : " يجب ان أؤشر علي الرقم لكي انتقل للصفحة التالية "
الزائر يقول : ” يجب ان أؤشر علي الرقم لكي انتقل للصفحة التالية “

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

  • بطء فى عملية التصفح، فقد يستغرق جزء من الثانية حتى يضغط وهذا الزمن كبير جدا في وقت المستخدم.
  • فد يسبب بعض من التشويش … فبدلاً من أن يضغط على الرقم ١ … نتيجة لصغر مساحة الضغط قد يضغط المستخدم على الرقم ٢.

حل مشكلة صغر مساحة الضغط Clickable Area

زيادة المساحة المخصصة للضغط Clickable Area
زيادة المساحة المخصصة للضغط Clickable Area

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

كلما كبرت المساحة المخصصة للضغط Clickable Area كلما سهل على المستخدم الضغط وبالتالي سيترك هذا انطباع جيد لديه.

ضع عبارات مفهومة وواضحة على أزرار التنقل بين صفحات الموقع

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

استخدم مصطلحات مفهومة وواضحة في ازرار التنقل بين صفحات الموقع
استخدم مصطلحات مفهومة وواضحة في ازرار التنقل بين صفحات الموقع

 أفكار جديدة “لزر التالى”

في موقع ShutterStock وهو موقع يحتوي على أكثر من ١٨ مليون صورة وتصميم مختلف، وهذا محتوى ضخم جداً، بذل القائمين على الموقع جهداً مضنياً في تنظيم الصور وجعل الوصول والبحث والانتقال بين الصور أسهل على زوار الموقع، وقد استوقفنى ما فعلوه بـ “زر التالي” عندما كنت أبحث عن بعض الصور في الموقع …

زر التالي في نتائج البحث علي موقع ShutterStock
زر التالي في نتائج البحث علي موقع ShutterStock

لقد استبدلوا اخر صورة تظهر في نتيجة البحث ب”Next Page” “الصفحة التالية“، أي أصبحت مساحة الضغط كبيرة جداً، فمساحة الزر ١٣٢ عرض فى ١٤٧ طول، هذا سيسهل على المستخدم الانتقال بسلاسة للصفحة التالية، أيضاً تم دمجها في نتيجة البحث بطريقة ابداعية.

الخلاصة

  1. أجعل المساحة المخصصة للضغط Clickable Area في أزرار التنقل بين صفحات الموقع كبيرة حتى تساعد المستخدم على سرعة الانتقال بين الصفحات.
  2. عنون ازرار التنقل بعبارات مفهومة وشائعة حتى تتجنب التشويش على المستخدم.
  3. أنت أدرى بمحتوى موقعك، يجب أن تكتشف الطريقة المثلى التي تقدمها للمستخدم حتى تسهل عليه الانتقال بين صفحات الموقع.

تدريب عملي!

تصفح وحلل طرق الانتقال بين الصفحات في المواقع التي تتصفحها بشكل يومى، واكتب في ورقة ما أعجبك وما لم يعجلك فيها، وشاركنا بما اكتشفته!

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

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


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

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

  • محمود عبد الحميد

    فعلا المشكله دى واجهتها كتير خاصة جزئية صغر زر الصفحه
    ولكن ماشاء الله عليك يا ابو حميد ناقشتها بشكل تفصيلى وجميل

  • مقال رائع جداً وفعلا وجدت في بعض المواقع التي لا تطبق قابليه الاستخدام ان الوصول الى باقي المقالات او التدوينات صعوبة بسبب عدم وجود او وضوح التالي او السابق كما قمت بالحديث عنها الآن. وعجبتني الشخصية المستخدمه في الصور الموجوده 😀

  • ما شاء الله .. اخى احمد . مدونتك جميله جداً . وشكرا على هذا الطرح الجميل 🙂 فهذه المشكله تواجهنى شخصياً عند زيارتى لبعض المواقع

  • بالفعل اصبتم … من المفيد جعل الزوار يستمرون في المضي في تصفح الموقع … وإلا سوف تخسر المدونة او الموقع الزائر …

    ( في البلاد العربية قد يعملوا هذه الحركة ولكن يغفلون عن التوجيه من اليمين إلى اليسار .. ولهذا تظهر بشكل غريب )

  • هايل اوى يا استاذ على الموضوع

  • معلومات مفيدة … هذه الإضافات تساعد أصحاب المواقع

  • افكار ظريفة و ايضا أستخدام أسماء المقالات بدل من التالي والسابق مع وضع سهم مع الأسم فكرة ظريفة و تجدي و تشجع علي الزيارة أحيانا كثيرة

  • مقال جميل جداً , شكراً أحمد
    كإضافة بسيطة , من الافضل وضع”برأيّ”:
    1. زر للذهاب للصفحة الاولى
    2. زر السابق
    3. ارقام 3 او 5 صفحات متتالية
    4. زر التالي
    5. زر للذهاب للصفحة الاخيرة

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

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