مواقع إلكترونية سهلة الاستخدام

ماذا نعني بالمواقع الإلكترونية سهلة الاستخدام؟

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

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

العلامات المشتركة للمواقع الإلكترونية سهلة الاستخدام

لا يلزم أن تكونوا خبراء لتعرفوا هل الموقع مريح في الاستخدام. فإذا انطبقت معظم البنود التالية على موقعكم فأنتم في الطريق الصحيح:

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

لمن تُعدّ أولوية؟

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

عثور الزائر على ما يبحث عنه: بناء المحتوى والقائمة

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

الانطلاق من مهام الزائر

في أول لقاء نكتب معكم الأسئلة التي يطرحها عملاؤكم أكثر من غيرها والأعمال التي تريدون أن ينجزها الزائر في الموقع. وتُرتَّب مهام مثل «معرفة منطقة الخدمة» و«الاطلاع على أعمال سابقة» و«طلب عرض سعر» بحسب الأهمية. ونحسب لكل مهمة عدد الخطوات التي يصل بها الزائر إلى النتيجة، ونحذف الخطوات الزائدة قبل الانتقال إلى التصميم البصري. وتُبنى المواقع الإلكترونية سهلة الاستخدام حول قائمة المهام هذه.

القائمة والتسلسل الهرمي للصفحات

الإبقاء على عدد قليل من العناوين الواضحة في القائمة يقلل عبء القرار على الزائر. ونستخدم كلمات تصف الخدمة نفسها بدلًا من عناوين غامضة مثل «حلولنا» أو «ماذا نفعل». وفي المواقع الإلكترونية سهلة الاستخدام يرى الزائر في كل لحظة في أي صفحة هو وكيف يعود إلى القسم الأعلى.

النص المقروء وتخطيط الصفحة

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

ولهذا نطلب مسودة المحتوى في أبكر وقت ممكن. فالصفحة المرسومة بعناوين حقيقية وفقرات حقيقية تحمل على قرارات أصح بكثير من مسودة مكتوب فيها «سيوضع نص هنا».

النماذج وطرق التواصل

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

وفي التصميم المتوافق مع الجوال تسهّل اختصارات مثل بدء الاتصال عند لمس رقم الهاتف وفتح تطبيق الخرائط عند لمس العنوان عمل الزائر. فالزائر يريد أحيانًا أن يتصل فورًا بدلًا من ملء نموذج؛ ولا بد من إبقاء الطريقين مفتوحين.

التفاصيل التي تبني الثقة

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

ما نراعيه في التصميم المتوافق مع الجوال

في قطاعات كثيرة يأتي جزء كبير من زيارات الموقع من الهاتف؛ ويمكنكم رؤية النسبة في موقعكم من أدوات التحليل لديكم. ولذلك فإن التصميم المتوافق مع الجوال ليس عندنا صفحة سطح مكتب صُغّرت لاحقًا. فنبني الصفحات أولًا على شاشة الهاتف، ثم نوسّعها نحو الشاشات العريضة. وبذلك نكون قد قررنا منذ البداية ما هو المهم فعلًا في أضيق مساحة.

الاستخدام بالإبهام ومساحات اللمس

يُستخدم الموقع على الهاتف في الغالب بيد واحدة وبالإبهام. وكون الأزرار والروابط بحجم يسهل لمسه وعدم تقاربها كثيرًا من بعضها يقللان النقرات الخاطئة. وتشترط WCAG 2.2 في المستوى AA للأهداف التي تُلمس، كقاعدة، مساحة لا تقل عن 24×24 بكسل CSS أو مسافة مكافئة لها بين الأهداف. ونهدف في عملية التصميم المتوافق مع الجوال إلى البقاء فوق هذا الحد بمسافة مريحة.

القائمة وأزرار التواصل الثابتة على الجوال

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

في موقع أعددناه لمطعم افتُتح حديثًا في كييف بنينا هيكلًا بسيطًا يتألف من أقسام الحجز والمعرض والقائمة والتواصل. ومكّنّا الزائر من الوصول إلى القائمة والحجز بلمسات قليلة، ومن مراسلة المطعم بسهولة عبر زر تواصل ثابت. والتفاصيل في صفحة مشروع Celebrity Kiev.

الصور والجداول والمحتوى الطويل

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

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

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

الأجهزة اللوحية والشاشات العريضة

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

السرعة: الجانب الخفي في المواقع الإلكترونية سهلة الاستخدام

لا يلاحظ الزائر سرعة الموقع بوصفها ميزة، لكنه يلاحظ البطء فورًا. وقد حدد web.dev، وهو مصدر Google الموجّه لمطوري الويب، ثلاثة مقاييس أساسية للتحميل والاستجابة للتفاعل والثبات البصري، وأطلق عليها اسم Core Web Vitals. ونأخذ هذه المقاييس في الحسبان منذ بداية التصميم في المواقع الإلكترونية سهلة الاستخدام.

• Largest Contentful Paint (LCP): يقيس وقت ظهور المحتوى الرئيسي للصفحة؛ ويُوصى بأن تكون 2.5 ثانية أو أقل لتجربة جيدة.
• Interaction to Next Paint (INP): يقيس سرعة استجابة الصفحة للمسة أو نقرة؛ والقيمة الموصى بها 200 ميلي ثانية أو أقل.
• Cumulative Layout Shift (CLS): يقيس تحرك المحتوى من مكانه أثناء التحميل؛ والقيمة الموصى بها 0.1 أو أقل.

وللتأكد من أن هذه الحدود تتحقق لدى معظم الزوار يُوصى بمتابعة النسبة المئوية الخامسة والسبعين لتحميلات الصفحات، منفصلةً للجوال ولسطح المكتب. ويمكنكم الاطلاع على تفاصيل المقاييس في دليل Web Vitals لدى web.dev.

قرارات التصميم التي تحدد السرعة

السرعة ليست مسألة خادم أو كود فقط؛ فلقرارات التصميم أيضًا أثر مباشر فيها. وفي عملية التصميم المتوافق مع الجوال نقيّم معكم في بداية المشروع العناصر التالية:

• الفيديوهات الكبيرة التي تعمل تلقائيًا في أعلى الصفحة الرئيسية وشرائح العرض المتعددة
• الأعداد الكبيرة من أنواع الخطوط وأوزانها
• الصور التي تُحمَّل بحجم أكبر بكثير من حجمها المعروض على الشاشة
• الإضافات الخارجية التي تُضاف إلى كل صفحة مثل أدوات الدردشة والخرائط ووسائل التواصل الاجتماعي
• الصور وأشرطة الإعلان التي تدفع النص إلى الأسفل لأنه لم تُحجز لها مساحة أثناء التحميل

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

قياس السرعة ومتابعتها

نجري القياس بأدوات الاختبار أثناء التطوير، لكن الصورة الحقيقية تظهر بعد النشر مع وصول بيانات الزوار الفعليين. ويُظهر تقرير Core Web Vitals في Search Console أي مجموعة من الصفحات أصبحت بطيئة. وإعادة فحص السرعة عند إضافة إضافة جديدة أو صورة كبيرة تمنع المواقع الإلكترونية سهلة الاستخدام من أن تثقل مع الوقت.

إمكانية الوصول: موقع يستطيع الجميع استخدامه

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

المرجع الدولي هو إرشادات إتاحة محتوى الويب (WCAG) من W3C. وفي WCAG 2.2 التي نشرتها W3C في أكتوبر 2023 تُجمع الإرشادات تحت أربعة مبادئ هي: قابل للإدراك وقابل للتشغيل وقابل للفهم ومتين؛ أما معايير النجاح فتُعرَّف على ثلاثة مستويات هي A و AA و AAA. وللاطلاع على التفاصيل يمكنكم مراجعة صفحة تعريف WCAG 2 لدى W3C.

النقاط التي نراعيها في التصميم والكود

• إمكانية استخدام القائمة والأزرار والنماذج بلوحة المفاتيح وحدها أيضًا
• إطار تركيز واضح يبيّن أي عنصر نحن عليه أثناء التنقل بلوحة المفاتيح
• نصوص بديلة ذات معنى للصور التي تحمل معلومات
• عناوين دائمة لحقول النماذج بدلًا من النص التوضيحي الذي يختفي عند بدء الكتابة
• عدم تقديم المعلومة باللون وحده؛ وبيان الحقل الخاطئ برمز ونص أيضًا
• ألا تتبعثر الصفحة عند تكبير النص، وأن تُستخدم العناوين بالترتيب الصحيح

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

اختبار إمكانية الوصول

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

مراحل عملنا في المواقع الإلكترونية سهلة الاستخدام

مع أن كل مشروع يتشكل بحسب حاجته، فإن تسلسل المراحل متشابه. ويمكنكم الاطلاع على الإطار العام لخدمة تصميم المواقع الإلكترونية للشركات لدينا في صفحة الخدمات؛ ونشرح فيما يلي المراحل التي تركّز على سهولة الاستخدام.

1. مراجعة الموقع الحالي

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

2. خريطة الموقع والهيكل التخطيطي

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

3. التصميم البصري

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

4. التطوير والاختبار

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

5. المتابعة بعد النشر

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

العوامل التي تحدد النطاق

لا يصح أن نذكر المدة والميزانية للمواقع الإلكترونية سهلة الاستخدام دون الاستماع إلى احتياجاتكم. وعند إعداد عرض السعر نوضح معكم البنود التالية واحدًا واحدًا:

• عدد الصفحات وتنوع أنواع المحتوى
• هل النصوص والصور والفيديوهات جاهزة
• الحاجة إلى بنية متعددة اللغات
• الروابط مع أنظمة مثل نظام المواعيد أو نموذج طلب السعر أو برنامج إدارة العملاء
• نقل الموقع الحالي وتوجيه العناوين القديمة

أخطاء شائعة في سهولة الاستخدام

• فحص الموقع واعتماده على الشاشة الكبيرة فقط
• تحويل الصفحة الرئيسية إلى واجهة عرض طويلة يعرّف فيها كل قسم بنفسه
• وضع معلومات التواصل في أسفل الصفحة فقط
• منع الزائر من رؤية المحتوى بنوافذ منبثقة
• ترك السرعة وإمكانية الوصول إلى ما بعد النشر

ما ينبغي أن تجهزوه قبل البدء

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

الأسئلة الشائعة

ما الفرق بين المواقع الإلكترونية سهلة الاستخدام والمواقع ذات المظهر الحديث؟

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

هل يلزم موقع جوال منفصل للحصول على تصميم متوافق مع الجوال؟

لا. في التصميم المتوافق مع الجوال المبني بنهج الاستجابة (responsive) يغيّر الموقع نفسه تخطيطه بحسب حجم الشاشة. فيبقى المحتوى والعنوان واحدًا، وتُجرى التحديثات من مكان واحد.

هل يمكنني تحسين تجربة المستخدم دون تجديد موقعي الحالي؟

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

هل تؤثر سرعة الموقع في ترتيبه على Google؟

تذكر Google أن مقاييس Core Web Vitals تُستخدم في أنظمة الترتيب لديها؛ لكن الحصول على درجة جيدة لا يعني وحده ضمان مرتبة متقدمة. والسرعة مهمة قبل كل شيء ليتمكن الزائر من استخدام الموقع دون أن يتركه.

هل إمكانية الوصول ضرورية للأنشطة الصغيرة أيضًا؟

الموقع الذي يمكن الوصول إليه يعني أن عددًا أكبر من الناس يستطيعون التواصل معكم. والخطوات الأساسية مثل التنقل بلوحة المفاتيح والنص البديل والتباين المقروء أسهل بكثير عند التخطيط لها في بداية التصميم من تصحيحها لاحقًا.

كيف يُعرف أن الموقع سهل الاستخدام أم لا؟

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

لنراجع موقعكم معًا

شاركونا موقعكم الحالي أو ما تتوقعونه من موقعكم الجديد؛ لنقيّم معًا أين يجد زوّاركم صعوبة وبأي خطوات يمكن بناء تجربة أكثر راحة. ولطلب لقاء يمكنكم مراسلتنا عبر صفحة اتصل بنا.