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

doi:10.21608/mktc.2022.246263

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

نوع المستند : الأبحاث العلمیة حول الإعلام وأقسامه

10.21608/mktc.2022.246263

المستخلص

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

الكلمات الرئيسية

الموضوعات الرئيسية

الإعــلام وتکنولوجيا الإتصال

النص الكامل

مقدمه

أحدث ظهور الأجهزة الذکية التي تعمل باللمس ثورة في استخدام الإنترنت، فأصبح الوصول إلى مواقع الإنترنت يتم باستخدام أدوات إدخال مختلفة عن الفأرة (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)

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

المراجع

المراجع العربية:

1- حلمي محسب (2017)، تأثير محددات الرؤية على مسار العين في الصحف الإلکترونية العربية، المجلة المصرية لبحوث الإعلام، العدد59، ص269.

2- محمد عبد الحميد (2004)، البحث العلمي في الدراسات الإعلامية، القاهرة، عالم الکتب للطباعة والنشر والتوزيع، الطبعة الثانية، ص206.

3- نهى صلاح البسيوني (2018)، واجهة المستخدم للموقع الإلکتروني المتجاوب بين التصميم المسطح والتصميم المادي، مجلة العمارة والفنون والعلوم الإنسانية، العدد12، الجمعية العربية للحضارة والفنون الإسلامية.

المراجع الإنجليزية:

(4) Ahn, J., Park, J., Lee, W., & Noh, G. (2021). Website interactivity and processing: Menu customization and sense of agency are keys to better interaction design. International Journal Of Human-Computer Studies, 147.

(5) Almahdi, M., & Archer-Brown, C. (2022). The Role of Interactivity in Social Commerce Websites: A Content Analysis Study. Artificial Intelligence For Sustainable Finance And Sustainable Technology, 275-283. https://doi.org/10.1007/978-3-030-93464-4_28

(6) Amar Raju, et al (2018) Determinants of Website Usability: Empirical Evidence from Tourism Sector in India, Global Business Review, Vol. 19, No. 6.

(7) Andrew Dillon (2001), Beyond Usability: Process, Outcome and Affect in human computer interactions, Canada, University of Toronto, Faculty of Information Studies, p. 2.

(8) Atiya Mohamed Atiya, A. (2021). Study and Design of Usability Standards for Tourism Website Interfaces. International Journal of Eco-Cultural Tourism, Hospitality Planning And Development, 4(1), 1-23. https://doi.org/10.21608/ijecth.2021.187027

(9) Barebones CSS for Fluid Images. CSS-Tricks. (2021). Retrieved 6 September 2021, from https://css-tricks.com/barebones-css-for-fluid-images/.

(10) Carmo Nogueira, et al (2019), Comparing sighted and blind users task performance in responsive and non-responsive web design, Knowledge and Information Systems, Vol.58, No.2.

(11) Fielding, J. (2014). Beginning Responsive Web Design With HTML5 and CSS3 (p. 59). Heinz Weinheimer.

(12) Erik Frekjmr, et al (2000), Measuring usability: are effectiveness, efficiency, and satisfaction really correlated?, CHI Letters, Vol. 2, issue. 1, p. 345.

(13) Flexible Grids. Learnhowtoprogram.com. (2021). Retrieved 6 September 2021, from https://www.learnhowtoprogram.com/user-interfaces/responsive-design-development-environments/flexible-grids.

(14) Howe, S. (2021, July 10). Flexible Media. Retrieved from Learn how to code: https://learn.shayhowe.com/advanced-html-css/responsive-web-design/#flexible-media

(15) Huddin, S., & Kamaruzaman, M. (2019). The Role of User Experiences Towards Responsive Web. International Journal Of INTI, 23(2), 85-90. Retrieved 24 March 2022.

(16) Inayaili de León (2016), Moving to Responsive Web Design, London, United Kingdom:Apress, p.10.

(17) Ishaq O. Oyefolahan, et al (2019), Keeping with the Global Trends: An Evaluation of Accessibility and Usability of Nigerian Banks Websites, International Journal of Information Engineering and Electronic Business, Vol. 11, Issue. 2, pp. 44-53.

(18) Jevremović, M., Staletić, N., Orzan, G., Ilić, M., Jelić, Z., Bălăceanu, C., & Paraschiv, O. (2022). Predicting User Behaviour Based on the Level of Interactivity Implemented in Blockchain Technologies in Websites and Used Devices. Sustainability, 14(4), 2216. https://doi.org/10.3390/su14042216

(19) Kalpna Sagar & Anju Saha (2019) The effect of user variables on academic websites usability : An empirical study, Journal of Statistics and Management Systems, Vol. 22, No. 2.

(20) Król, K., & Zdonek, D. (2021). Local government website usability on mobile devices: test results and recommendations. Digital Policy, Regulation And Governance, 23(2), 173-189. https://doi.org/10.1108/dprg-05-2020-0065

(21) Lee, J., Kim, J., You, S., Kim, Y., Koo, H., & Kim, J. et al. (2019). Development and Usability of a Life-Logging Behavior Monitoring Application for Obese Patients. Journal Of Obesity & Metabolic Syndrome, 28(3), 194. https://doi.org/10.7570/jomes.2019.28.3.194

(22) Lin, Y., & Zheng, M. (2021). Enhancing Blood Donation Intentions Using Mobile Responsive Web Design. Lecture Notes In Networks And Systems, 275, 741-749. https://doi.org/10.1007/978-3-030-80091-8_88.

(23) Marcotte, E. (2010). Responsive Web Design. A List Apart. from https://alistapart.com/article/responsive-web-design/.

(24) Marcotte, E. (2011). Responsive web design (p. 9). New York: Jeffey Zeldman.

(25) Mohammed Ragab Khalaf (2019), Responsive or Adaptive Educational Mobile Websites: The Impact of Different Designs on Students' Preferences at Jouf University-Saudi Arabia, Turkish Online Journal of Educational Technology-TOJET, Vol.18, No.2.

(26) Mohorovicic, S. (2013), Implementing Responsive Web Design For Enhanced Web Presence. 2013 IEEE 38^th International Convention on Information & Communication Technology, Electronics & Microelectronics (MIPRO), Opatija, Croatia, 20-24 May, p.1206.

(27) Momenipour, A., Rojas-Murillo, S., Murphy, B., Pennathur, P., & Pennathur, A. (2021). Usability of state public health department websites for communication during a pandemic: A heuristic evaluation. International Journal Of Industrial Ergonomics, 86. https://doi.org/10.1016/j.ergon.2021.103216

(28) Nah, S., & Oh, J. (2021). Interactivity Can Enhance the Effectiveness of Threat Appeals: Implications for Preventive Health Websites. Health Communication, 1-11. https://doi.org/10.1080/10410236.2021.1937831.

(29) Naser F. M. EL-firjani, et al (2017), A method for website usability evaluation: A comparative analysis, International Journal of Web & Semantic Technology, Vol. 8, No. 3.

(30) Nitesh Kumar Verma, Akhandanand Shukla (2018), Usability Analysis of Indian Institutes of Management Libraries Websites: An Evaluative Study, Journal of Advancements in Library Sciences, Vol. 5, Issue. 1.

(31) Shehzad, R., Aslam, Z., Ahmad, N., & Iqbal, W. (2017). Web Usability and User Trust on E-commerce Websites in Pakistan. International Journal Of Advanced Computer Science And Applications, 8(12).

(32) Paiva, S., & Pinheiro, P. (2020). Responsive Web Design for Smartphones Users: A Case Study of Higher Education Institutions in Portugal. In 20th Congress of the Portuguese Society for Information Systems (CAPSI'2020). Porto, Portugal.

(33) Parlakkiliç, A. (2021). Evaluating the effects of responsive design on the usability of academic websites in the pandemic. Education And Information Technologies, 27(1), 1307-1322. https://doi.org/10.1007/s10639-021-10650-9

(34) Raja, R. (2021). What Is Responsive Web Design and Why Is It Important? - Dot Com Infoway. Dot Com Infoway. Retrieved 21 September 2021, from https://www.dotcominfoway.com/blog/importance-of-responsive-web-design/#gref.

(35) Younghwa Lee & Kenneth A. Kozar (2012), Understanding of website usability: Specifying and measuring constructs and their relationships, Decision Support Systems, Vol. 52, p. 451.