usability: سهولة الوصول والتصفح

بسم الله الرحمن الرحيم والسلام عليكم ورحمة الله وبركاته

استكمالا للسلسلة المرتبة عشوائياً:

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

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

القوائم

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

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

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

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

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

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

صمم قوائمك بشكل يتناسب مع محتوى الموقع والمعلومات التي يقدمها، مثلا حجم القائمة عرضا وطولا يجب أن يتناسب مع شكل التصميم… إلخ. أيضا بإمكانك تقسيم طريقة عرض القوائم إلى تقسيم منتشر حاليا، وهو تقسيم القوائم global and local -لم أتوصل لتعريب مناسب-.

global: تقوم فيه بعرض أهم محتويات أو خدمات موقعك ككل في الصفحة الرئيسية (في الشريط الأعلى غالبا)، والتي ستظهر بدورها في كل صفحات الموقع.

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

مثال للتوضيح: موقعك مكرس للتصميم الرقمي. فأقترح عليك شريط قوائم في الصفحة الرئيسية للموقع يحتوي على أهم أقسام الموقع من دون تفصيل، مثلا:

الدروس | المصادر | المصممين | مقالات

وأثناء اختياري للدروس مثلا، تكون صفحة الدروس محتوية على قائمة فرعية مخصصة لهذه الصفحة فقط، أي تحتوي الخدمات المقدمة في هذا الجزء من الموقع:

الدروس | المصادر | المصممين | مقالات

دروس فوتوشوب | دروس فيكتور | دروس دريم ويفر | دروس بينتر… الخ

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

أيضا من الضروري أن تكون القوائم ثابتة في الموقع وفي جميع صفحاته خصوصا القوائم الرئيسية كما قلنا! حتى لا يقع المستخدم في حيرة من أمره عند تغيير القوائم في كل صفحة. الأمر غير مناسب للتصفح إطلاقاً. المبالغة في تصميم القوائم بشكل معقد يضر قابلية الاستخدام في موقعك أكثر من ما يخدمه، صممها بطريقة سهلة للتصفح ولا تحتاج أناس متمرسين يعلمون كيف تعمل :/. لا تنسَ أن تقوم بعمل قوائم تتناسب مع أغلب المتصفحات المشهورة.

الروابط

اجعل روابطك مقروءة ذات معنى: اختر اسما للرابط ذا دلالة على المعنى. أي بدل أن تكتب (اضغط هذا الرابط) أو  (انقر هنا) ضع بدلا من ذلك اسم ما يؤدي إليه الرابط، أو عنوان الصفحة مثلا. وهذه النقطة تكلم عنها بشكل ممتاز المدون مشهور الدبيان في تدوينة عن سلبيات استخدام “اضغط هنا” للروابط < هذا ما أقصده باختيار اسم للرابط له معنى للقارئ ولمحركات البحث. أتمسك بضرورة عدم استخدام الزخارف والكاشيدات في أسماء الروابط. ما المسوغ لاستخدامها؟ إنها لا تنفع أبدا!

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

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

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

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

أين تفتح الروابط؟: شكرا لمشهور الدبيان على تدوينة وضح فيها متى يكون من الضروري أو عدمه فتح الروابط في نافذه جديدة أو في نفس النافذة.

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

مصدر الصورة

  • “أيـن ؟
    يتساءل الكثير عن أفضل مكان لوجود القوائم. أفقية (في الأعلى) ؟ أو جانبية (في اليسار (للمواقع الانجليزية) أو لليمين (للمواقع العربية) ) ؟. بالنسبة لي يظل أمر الأفضلية مرهونا ً بتصميم القالب وبكمية ما تحتويه القوائم، وأيضا بذات الموقع و نوعية زواره. لكل طريقة مميزات، وأيضا سلبيات. القوائم الأفقية تتيح لك مساحة الموقع بالعرض، أي تستطيع استخدام الاجزاء الجانبية في أشياء أخرى،أيضا القوائم الأفقية أسرع و أقرب للعين، فالعين تنظر دائما لأعلى الموقع بحثا عن اسم الموقع او شعاره، بالتالي وجود القوائم أفقيا سيسمح للزائر سرعة المشاهدة للخيارات. لكن بطبيعة الحال القوائم الأفقية لن تتيح لك وضع عدد كبير من الخيارات، بحكم عرض الشاشة واختلافه من شخص لشخص، وصعوبة التمرير أفقيا، أما القوائم الجانبية فهي ممتازة في حال كنت تملك خيارات أو خدمات كثيرة في موقعك فالتعامل مع شريط التمرير عاموديا أسهل بكثير، ومقبول. هذه الطريقة أيضا ستقتطع جزء من العرض وبالتالي لن توفر لك المساحة الواسعة التي وفرتها لك القوائم الأفقية. من الجدير بالذكر أن أنبه إلى نقطة مهمة وهي: إن كانت قوائمك تحتوي قوائم فرعية اخرى ( قوائم منسدلة) وكانت طويلة فالأفضل استخدام طريقة القوائم الأفقية ذلك لأن التصفح وقراءة المحتوى أسهل منه في القوائم الجانبية. فلن تحتاج إلى تحريك شريط التمرير إلى أسفل عندما تتصفح أخر عنصر في القائمة،في حين كان الموقع يستخدم القوائم الأفقية. اما في حين كنت تتصفح موقع ذو قوائم جانبية وكنت تريد أن ترى القوائم الفرعية لآخر عنصر في القائمة الرئيسية فستضطر إلى تمرير الشرط إلى اسفل مرتين. لذلك فما يحدد أفضلية استخدام أحد هذه القوائم هو نوعية الموقع و معلوماته. الآن نجد العديد من المواقع تجمع بين الطريقتين، قائمة علوية وأيضا قائمة جانبية.”

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

    للمزيد من المعلومات عن الواجهات ثنائية اللغات الرجاء قراءة http://ar.interfacefix.com/2009/10/07/suggestions-for-bilingual-sites/

  • الاستاذة نوال
    دائما متميزة في أطروحاتك

    استفدت كثيرا من هذا الموضوع

  • نوره تنوره

    شكرا لك يانوال انت بحق مبدعه في مواضيعك
    بس كثير من الناس لايستطيع الاستفاده من جهدك
    لانك تكتبين في موقع واحد ياليت تكتبين بالصحف
    المحليه مثل جريدة الرياض وغيرها من المنابر حيث
    المجال اوسع للانتشار والنجاح ..

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

  • داليا

    شكرا كثيرا
    نعم واجهة الموقع من الامور الهامة التى يجب مراعاتها
    حيث انه من الوهله الاولى لبعض المتصفحين يقومون بالخروج بسرعة من المتصفح حال ظهور موقع معين
    اما لان الالوان غير متناسقة او لان الكتابة غير واضحة نظرا للكم الهائل من المواقع المنتشرة فالمتصفح للمرة الاولى للموقع لا يكون عنده الصبر الكافى للتعمق فى كل ما يحتوية الموقع …..
    ولكن التصميم الجيد الذى يجذب الانتباه من اولى خطوات النجاح
    شكرا لكم على موضوعكم الجميل والضى استفدت منه كثيرا

  • داليا

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

  • إهنيك اخت نوال على التدوينات السابقة وهذه التدوينة وقبل عدة ايام منت ابحث عن شرح عن هذا المصطلح واليوم وبالصدفة ادخل الى شروحات واتمنى إستمرارك وتنويعك بالشروحات ونحن متابعين لكم مع الشكر والدعاء بالتوفيق للجميع 🙂

  • Right now it looks like BlogEngine is the top blogging platform available right now. (from what I’ve read) Is that what you’re using on your blog?

تعليقات عبر الفيسبوك