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

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

تعريف تجربة المستخدم    UX Definition

تعرف المنظمة الدولية للمقاييس تجربة المستخدم بأنها

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

بمعنى آخر، تصميم تجربة المستخدم (UX أو UXD) في تصميم الويب هو عملية تعزيز رضا المستخدمين عن المواقع من خلال تحسين قابليتها للاستخدام، وسهولة الوصول إليها، وكفاءة تفاعل المستخدم معها.

مقاييس تجربة المستخدم UX Metrics

ليس هناك مقاييس معيارية لقياس تأثير تجربة المستخدم، إلا أنه من الممكن تقديرها من خلال قيم المؤشرات التالية:

•  معدل الارتداد Bounce Rate.
•  معدل الخروج Exit Rate.
•  معدل التحويل Conversion Rate.

معدل الارتدادBounce Rate

يعرف معدل الارتداد على النحو:

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

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

معدل الخروجExit Rate

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

معدل التحويلConversion Rate

يعرف معدل التحويل على النحو هو النسبة المئوية للمستخدمين الذين يتخذون الإجراء المطلوب.

المثال النموذجي لمعدل التحويل هو النسبة المئوية لزوار موقع الويب الذين يشترون شيئا على الموقع.

وسائل قياس وتحسين تجربة المستخدم

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

•  التواصل مع الزبائن
•  طرح نسخ تجريبية على عينة ضيقة من المستخدمين
•  وجود فريق متخصص بإجراء تجارب على تصاميم لم يطلع عليها سابقاً ولم يحضر مراحلها التصميمية.
•  الاعتماد على الأدوات التحليلية analytics.

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

نصائح تصميمية لتحسين لتجربة المستخدم

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

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

إنسيابية الصفحة  Page Flow 

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

تمرير الصفحة  Page Scrolling

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

الألوان والتباين Colors & Contrast    

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

تحميل الصفحة Page Loading

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

تصاميم الهاتف المحمول Mobile Design   

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

التنقل ضمن الموقع Navigation  

• ليكن لديك طريقة واضحة للوصول إلى قوائم التنقل في موقع الويب الخاص بك
•  تجنب أن تكون البنية الشجرية لموقعك أكبر من 3-4 مستويات عمقاً
•  التفكير في استخدام القوائم المتحركة مع شريط التمرير وخاصة على صفحات ويب الطويلة أو عندما يكون هناك حاجة للوصول السريع
•  توحيد أسلوب التنقل في الموقع وعدم تغييره من جزء لآخر.
•  استخدام تسميات محددة وقصيرة وذات دلالة لأوامر القوائم بما لايزيد عن 2-3 كلمات.
•  جعل المستخدمين يعرفون بشكل دائم أين هم على الموقع الآن.
•  بالنسبة للأجهزة المحمولة عرض الخيارات الأكثر استخداما وإخفاء الآخرين تحت قوائم منسدلة.
•  لا تكثر من الخيارات على قوائم التنقل (قدر الإمكان) لأنها تسبب التشتت وتقلل لفت الانتباه نحو هدف محدد.
•  إجعل القوائم المنسدلة تنسدل شاقولياً وليس أفقياً فالتمرير الشاقولي أسهل.
•  لا تخف تسجيل الدخول أو ميزات البحث داخل قوائم الموقع

النماذج والاستمارات Forms 

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

الارتباطات التشعبية Hyperlinks

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

الأزرار Buttons

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

ميزة البحث Search 

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

عارضات الشرائح Carousels & Sliders 

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

الأكورديون Accordions 

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

المساعدة والتلميحات Help & Hints

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

الأيقونات والرموز Icons 

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

المحتوى Content

• ينبغي أن تكون المعلومات الأهم في صفحتك هي الأكثر بروزاً.
•  وضع المعلومات الأساسية أولا. يبدأ المستخدمون في أعلى اليسار (اليمين) ويتم مسح أول 2-3 كلمات أكثر من غيرها
•  وضع المحتوى ذي الأولوية عليا في أعلى صفحة الموقع، من أمثلة المحتوى ذي الأولوية العليا أرقام الهواتف، المواعيد، العناوين، المناسبات، … إلخ. .
•  استخدم الألوان ومستويات التباين للتمييز بين المعلومات الأساسية و التفاصيل الداعمة

قابلية القراءة Readability

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