تأثير التصميم المتجاوب على سهولة استخدام المواقع الإخبارية: دراسة شبه تجريبية

مقدمه

أحدث ظهور الأجهزة الذکية التي تعمل باللمس ثورة في استخدام الإنترنت، فأصبح الوصول إلى مواقع الإنترنت يتم باستخدام أدوات إدخال مختلفة عن الفأرة (Mouse) ولوحة المفاتيح (Keyboard)، يعتمد المستخدمون في الوقت الحاضر على أجهزة متعددة في تصفح المواقع الإلکترونية: أجهزة الکمبيوتر الشخصية (أجهزة الکمبيوتر المکتبية / أجهزة الکمبيوتر المحمولة) والأجهزة اللوحية والهواتف الذکية وأجهزة الکمبيوتر الأخرى المُضمنة في الأجهزة المنزلية أو السيارات.. إلخ، فهناک أجهزة جديدة متصلة بالإنترنت کل يوم.(Marcotte, 2010)

 ومن المثير للاهتمام أن هذه الأجهزة لها أحجام شاشات مختلفة، ففي حين أن أجهزة الکمبيوتر المکتبية وأجهزة الکمبيوتر المحمولة لديها شاشات عرض کبيرة، فإن الأجهزة المحمولة مثل الهواتف الذکية لديها شاشات عرض أصغر، وهذا يجعل شکل ومحتوى المواقع على هذه الأجهزة يختلف من حجم لآخر مما يؤثر على تفاعلية المستخدمين، وسلوک التصفح والتنقل بين صفحات المواقع الإلکترونية. (Mohorovicic, 2013, p.1206)

 مع ارتفاع نسب استخدام الهواتف الذکية والأجهزة اللوحية، نحن بحاجة إلى تحسين المواقع الإلکترونية لتتکيف مع جميع هذه الأجهزة من أجل توفير أفضل تفاعلية للمستخدمين، ويوفر التصميم المتجاوب للمواقع الإلکترونية مرونة في الاستجابة مع شاشات العرض المختلفة، فهو يسمح بإنشاء مواقع إنترنت تتکيف مع الجهاز الذي يتم عرضه عليه سواء کان جهاز کمبيوتر محمول أو هاتفًا ذکيًا أو جهازًا لوحيًا فإن الموقع يقوم تلقائيًا بتعديل حجم الواجهة والصفحات حسب المقاسات الجديدة للعرض. (De León, 2016, p.10)

أولًا: الإطار المعرفي للدراسة:

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

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

يشتمل التصميم المتجاوب على ثلاث مکونات رئيسية هم:(Marcotte, 2011, p.9)

(أ) الشبکة المرنة (Flexible Grid).

(ب) الوسائط المرنة (Flexible Media).

(ج) خصائص استعلامات الميديا (Media queries).

وفيما يلي شرح لکل مکون بالتفصيل: 

أ) الشبکة المرنة (Flexible Grid):

  الشبکة المرنة (Flexible Grid) هي عبارة عن سلسلة من الأعمدة (Columns) والصفوف (Rows) ، التي تُمکن من وضع عناصر واجهة المستخدم فيها، وتتصرف الشبکة المرنة بشکل متجاوب مما يجعلها مناسبة لأجهزة سطح المکتب والأجهزة المحمولة من خلال الاعتماد على عرض الشاشة المتاح يتم تحميل تصميم محسن لضمان أفضل تجربة مستخدم على کل جهاز. ("Flexible Grids", 2021)

(ب) خصائص استعلامات الميديا (Media queries):

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

(ج) الوسائط المرنة (Flexible Media):

  تعد الوسائط مرنة المکون الأخير للتصميم المتجاوب وهي لا تقل أهمية عن أي مکون من المکونات الأخرى، فعندما يبدأ منفذ العرض في تغيير حجم الصفحات، يجب أن تکون الصور ومقاطع الفيديو وأنواع الوسائط الأخرى قابلة للتطوير بتغيير حجمها مع تغير حجم منفذ العرض. (Howe, 2021)

وتتمثل إحدى الطرق السريعة لجعل الوسائط مرنة في استخدام خاصية max-width بقيمة 100%، مما يضمن مرونة الوسائط حيث إنه کلما أصبح منفذ العرض أصغر حجمًا، سيتم تصغير أي وسائط وفقًا لعرض حاوياتها.("Barebones CSS for Fluid Images", 2021)

وفيما يلي مثال لموقع مصمم بشکل متجاوب من خلال استخدام التقنيات الثلاث للتصميم:

شکل (1) مثال لموقع مصمم بشکل متجاوب المصدر (HTML Responsive Web Design. W3schools.com. (2022).

ثانيًا: الإطار النظري للدراسة:

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

تُعرف سهولة الاستخدام على أنها الفعالية، والکفاءة، والرضا الذي يُمکن المستخدمين من تحقيق أهداف محددة في بيئات معينة، ويرکز هذا التعريف على معايير الأداء القابلة للقياس (الفعالية، والکفاءة، والرضا) المرتبطة بالسياق حسب نوع المستخدم، ونوع المهمة، وظروف الاستخدام (Dillon, 2001, p.2).

 تتمثل الفعالية في الدقة والاکتمال الذي يُمکن المستخدمين من تحقيق أهدافهم عبر الإنترنت کجمع المعلومات أثناء زيارة الموقع الإلکتروني، حيث يمکن للمستخدمين القيام بما يحتاجون إليه أو يريدون القيام به. على سبيل المثال، عندما يحتوي الموقع الإلکتروني على ميزات تصفح ممتازة، وصور حية، وتفاعلية، ومحتوى قيم، يمکن للأشخاص تحقيق أهدافهم بأقل أخطاء (Lee and A.Kozar, 2012, p.451).

وتعرف الکفاءة بأنها الموارد المنفقة لتحقيق الأهداف من زيارة الموقع الإلکتروني، حيث يدرک المستخدمون الکفاءة عندما يتمکنوا من تحقيق الأهداف من خلال زيارة سريعة دون بذل الکثير من الجهد، على سبيل المثال، فهم يدرکون الکفاءة في الموقع الإلکتروني الذي يحتوي على ميزات تصميم بسيطة ومتسقة عبر صفحات الإنترنت، مما يجعل الصفحات سهلة القراءة والتذکر. (Lee and A.Kozar, Op Cit., 2019, p.451)

 أما الرضا هو راحة وقبول المستخدمين للموقع الإلکتروني واستمتاعهم أثناء استخدامه، فعندما يوفر الموقع الإلکتروني تصميم متجاوب مع جميع الأجهزة يمکن أن يزيد الرضا.