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

فكما قال “ستيف جوبز”  …:

لا يبدو التصميم كما هو ، وانما كيف يعمل !

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

1- القوائم المتحركة …

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

فمستخدمي الويب لا يرحبون أبدا بتلك الانتقالات المفاجئة التي قد تواجههم اثناء تصفحهم …! فهذا ما يؤدي الى ما نعرفه بـ “فقدان السياق” اي ان المستخدم يفقد فجأة انتباهه ويعاد توجيهه الى أمر آخر. وهو بالطبع امر مرفوض تماما في مباديء تجربة المستخدم.

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

ويمكن تفادي هذه المشكلة بإستخدام

ذلك الشكل الرائع للقائمة المتحركة ….

الشكل التقليدي لها ، وهو :

من الوهلة الأولى يمكنك ان تدرك مدى سهولة تصفح القائمة الأولى بعيدا عن احتمالية النقر على اي رابط آخر. فقد اصبح النقر هنا قرار انت تتخذه ولا تقع فيه بالخطأ … !

2- التبديل:

ارتبطت علامة ( + ) بمفهوم الاضافة لدى مستخدمي الويب ، لذا فور مشاهدتنا لهذه العلامة ندرك انه يمكننا اضافة محتوى. لكن اذا ما قمت بتحريكها بزاوية 45 درجة فتحصل على علامة (×) والتي ترتبط لدينا بمفهوم ( اغلق).

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

3- التعليقات :

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

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

المثال التالي يوضح لك بالضبط مفهوم ( متعة اضافة التعليق) وكيف يتم بشكل سهل ومحفز للمستخدم:

انها جريدة النيويورك تايمز :

يمكن ان ترى ايضا كيف يتغير (المؤشر) بتمدد حقل اضافة التعليق.

مثال اخر انيق لشكل حقل اضافة التعليق …

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

ولكن ماذا عن امكانية ضغط كل التعليقات السابقة والاستفادة من تلك المساحة في اظهار تكملة المقال المنشور ؟!

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

وتذكر دوما ان لا تظهر اي تفاصيل اضافية الا اذا كانت تخدم حاجة المستخدم ومتطلباته بالفعل.

نستعرض بقية الأفكار ان شاء الله في الجزء الثاني .