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

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

معايير الصورة القابلة للإستخدام – الجزء الثاني

كما أوضحنا سابقاً فمعايير الحكم على الصورة القابلة للإستخدام حسب  قائمة تحقق Photo Usability Checklist v1.0 تنقسم إلى ثلاث أجزاء رئيسية:-

1. هل الصورة مقروءة وصادقة أم انها صورة مفتعلة غير حقيقية؟ ناقشنا هذا المعيار في مقال سابق
2. ما هي الرسالة التي توصلها الصورة للجمهور؟ هذا المعيار يجعلك تفكر في الهدف الأصلي والرسالة التي ترغب أن تعبر عنها الصورة، والأهم من ذلك، كيف سيتم تفسير وفهم الصورة في الواقع من قبل المستخدمين؟
3. كيف أن الصورة ستساعد المستخدم في المهمة التي أتى الموقع من أجلها؟ هل الصورة تقرب المستخدم من الهدف أم انها تشكل عائق وتهديد حقيقي ستمنعه من تحقيق هدفه من الموقع؟

في هذا المقال سنتناول الجزء الثاني …

الجزء الثاني: ما هي الرسالة التي توصلها الصورة للجمهور؟

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

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

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

مثال لكيفية تطبيق هذا المعيار في الصور…

أحد أهم المزايا التي تتباهي بها Apple لمنتجها MacBook Air أنه رفيع للغاية لدرجة أن ستيف جوبز في مؤتمر آبل الشهير الذي أعلن فيه عن MackBook Air اخرجه من ظرف ليبرهن للناس مدي خفة ورشاقة هذا المنتج، حسناً هذا هو الهدف التجاري لآبل، أن تقنع الناس بمدى رفع هذا المنتج ورشاقته، لذا تجد أن ابل استخدمت صور تعكس هذا الهدف التجاري في متجرها الالكتروني، فكما هو واضح في الصورة السابقة التي التقطت بزاوية جانبية لتوضح مدى رشاقة MackBook Air حيث تستطيع حملة باصبعين فقط! هذه الصورة تصدق علي صحة ادعاء آبل كما انها ستساعد الزبون في اتخاذ قرار سريع بشراء هذا المنتج الرشيق!

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

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

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

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

مثال لكيفية تطبيق هذا المعيار في الصور…

تعبيرات الوجة في الصور المعروضة بالموقع تؤثر على التجربة الشرائية للمستخدم، خاصة أن كان الامر يتعلق بالموضة! موقع H&M أحد ماركات الملابس يعرض صور ل Models يرتدون منتجات الشركة في موقعه، احدى الصور التي لفتت انتباهي هي صورة لشخص لا يبدوا سعيداً وهو يرتدي احد المنتجات … هل تعتقد ان هذه الصور حافز ام منفر للشراء؟!  سيدور بذهني السؤال التالي  … لماذا يبدوا تعيساً هكذا؟ ربما لن أفكر بجودة المنتج ولا روعة الخامات أو اللون … اذا لم يكن هدفك هو أن تنقل للمستخم حالة اللاسعادة هذه فيجب ان تظهر للزبون كيف ستكون حياته بعد شراء المنتج وكيف أن هذا المنتج سيجعله يحقق احد احلامه.

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

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

مثال لكيفية تطبيق هذا المعيار في الصور…

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

سنناقش باق مكونات المعيار الثالث من معايير الصورة القابلة للإستخدام في المقال القادم.