قابلية إستخدام الصور في الويب

كتبه أحمد مجدي 22 ديسمبر 2013

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

اثناء التخطيط لواجهة الموقع نكتفي فقط تحديد المكان الذي تظهر فيه الصورة، ولا نهتم بما يجب ان تحتويه الصورة
اثناء التخطيط لواجهة الموقع نكتفي فقط تحديد المكان الذي تظهر فيه الصورة، ولا نهتم بما يجب ان تحتويه الصورة

من وجهة نظري؛ في مواقعنا العربية تواجهنا مشاكل عقائدية كثيرة تجعلنا لا نهتم كثيراً بكل ما يؤثر في تحسين تجربة الاستخدام UX، فالإلتفات للأمور البسيطة الكبيرة -البسيطة في ظاهرها الكبيرة في تأثيرها علي المستخدم- ربما لا يوازي اهتمامنا ببرمجة الموقع وتصميمه، الميزانيات المحدودة ربما تكون عائقاً هي الآخر أمام الاهتمام “برفاهية قابلية الاستخدام”، وعليه فإن الحديث عن قابلية إستخدام الصور في المواقع قد يأخذنا لجدال لا نهاية له عن “فقة الأولويات في تصميم المواقع”.
ما رأيكم أن نسافر معاً في رحلة لكي نثبت أولاً أن الصور ليست أمراً ثانوياً بل لها تأثير عظيم على الكيفية التي يتواصل بها الموقع مع المستخدم.

الصور التي تتغلب على قلق المستخدمين

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

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

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

كيف يمكن لصورة أن تبدد هذه المخاوف؟

كيف يمكن لصورة ان تبدد مخاوف الزبائن | حقوق الصورة ل Apetito
كيف يمكن لصورة أن تبدد مخاوف الزبائن لحقوق الصورة لApetito

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

أما المشكلة الثانية المتعلقة بالثقة في موظفين التوصيل، تغلب James عليها بإضافة قسم مخصص لموظفين التوصيل على الموقع مع صور شخصية حقيقية غير معدلة جرافيكياً ونبذه شخصية عنهم، يقول James “بعدما تفحص الآبناء صور موظفين التوصيل علي الموقع أخبروه عن مقدار حبهم لنظرات وإصرار الموظفين وأنهم سيثقون بموظفين التوصيل للشركة مستقبلاً”

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

الصور الشخصية بالموقع … استخدمها بحذر!

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

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

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

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

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

الصورة التي تصف كيف نستخدم المنتج

Square وهي قطعة الكترونية ملحقة بالآيفون، آيباد، يستخدم الموقع صورة واحدة فقط اوضحت الفكرة الكاملة لما هو المنتج وكيف يستخدم، وحجمة ولونة الطبيعي
Square وهي قطعة الكترونية ملحقة بالآيفون، آيباد، يستخدم الموقع صورة واحدة فقط اوضحت الفكرة الكاملة لما هو المنتج وكيف يستخدم، وحجمة ولونة الطبيعي

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

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

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

مخاطر استخدام الصور الجاهزة Stock Photos

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

الناس لا يحبون الصور التي تبدو وكأن مصطنعه أو تحتوي على ناس يفعلون الأشياء لا تفعل عادة في الحقيقية
الناس لا يحبون الصور التي تبدو وكأنها مصطنعه أو تحتوي على ناس يفعلون الأشياء لا تفعل عادة في الحقيقية

البطل المجهول

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

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

أحمد مجدي
مصمم لواجهات إستخدام، أمتلك مهارات في تجربة الإستخدام وخبرة معرفية وعملية عن التصميم الجرافيكي والتفكير التصميمي، عملت مع أصحاب الأعمال التجارية في الشركات الكبيرة، المتوسطة، الصغيرة والأفراد لبناء جسور بين إحتياجات المستخدمين وأهدافهم التجارية. تابعني على تويتر: @ahmedmagdi


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

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

  • أحمد الحمزاوي

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

  • ahmed saeed

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

    شكرا

  • عبدالمجيد الدهاسي

    المشكلة في نوعية المشروع والشريحه المستهدفه خاصة اذا كانت الشريحه المستهدفة عربية وان الصور العربية على Stocks اصبحت مستهلكه .

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

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

    او تقوم بتصوير تلك المؤسسة وفي بعض الاحيان لا تملك المؤسسة اماكن متاحة لتصوير خاصة المؤسسات التي يكون غالب عملها في بيئة الانترنت ولا تكون متاحة لستقبال العامة

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

  • مقال اكثر من رائع ومقوله “فالناس لا يحبون الصور التي تبدو وكأنها مصطنعة أو تحتوي على ناس يفعلون الأشياء لا تفعل عادة في الحقيقية ” صحيحه جداا

  • مدونه رائعه وتصميم جميل جداً

  • حسن الطباخ

    دائما موفق ومتميز

  • حسين فرار

    مقال ممتاز

  • أحمد فارس

    نتعلم الكثير والكثير من مقالاتكم ^_^

  • Iehab Kahwati

    مقالة مفيده وزادة معرفتي كيف ان صورة لها تاثير كبير في بيع منتجات 🙂