البحث في الموقع

لكل شيء تجربة مُستخدم. مهمّتنا ليست خلق تجربة المُستخدم، بل تحسينها. ولكن ما معنى "تحسين" تجربة المُستخدم؟ هذا هو الدرس الأول من سلسلة مدخل إلى تجربة المستخدم: مدخل إلى تجربة المستخدم User Experience (هذا الدرس) فهم ودراسة المستخدمين في مجال تجربة المستخدم دراسة الشريحة المستهدفة في مجال تجربة المستخدم كيفية التصميم للأجهزة المختلفة هندسة المعلومات في تجربة المستخدم تعرف على أنماط التصميم في مجال تجربة المستخدم أشياء لا يمكن اعتبارها رسوما تخطيطية (Wireframes) في مجال تجربة المستخدم تعرف على الرسوم التخطيطية (Wireframes) في مجال تجربة المستخدم مفهوم الثقل المرئي (Visual Weight) والألوان في مجال تجربة المستخدم التكرار ومخالفة الأنماط في مجال تجربة المستخدم المحاذاة والقرب في مجال تجربة المستخدم تعرف على أساليب مسح الواجهة والتراتب المرئي في مجال تجربة المستخدم أساليب الإطلاع في مجال تجربة المستخدم: التصفح، البحث والاكتشاف تصميم هيكل صفحة الويب والعناصر الأساسية في مجال تجربة المستخدم الأزرار، النماذج والدعوات إلى الإجراء في مجال تجربة المستخدم استخدام علم النفس في مجال تجربة المستخدم لتكييف المستخدم وإقناعه كيف تغير الخبرة من تجربة المستخدم؟ تصميم تجربة المستخدم من خلال بيانات وإحصائيات المستخدمين تعرف على أنواع المخططات الإحصائية في مجال تجربة المستخدم اختبارات أ/ب (A/B Test) في مجال تجربة المستخدم يشيع الاعتقاد أن تجربة المُستخدم الجيدة هي تحقيق سعادة المستخدمين؛ وهذا غير دقيق! لو كانت السعادة غايتنا لاكتفينا بصور القطط و عبارات المديح العشوائية وعدنا إلى بيوتنا! للأسف لن يكون مديرك في العمل راضيًا (مع أن الفكرة ليست سيّئة!) هدف مصمّمي تجربة المُستخدم هو الوصول إلى كفاءة المستخدم. تجربة المستخدم ليست سوى قمّة جبل الجليد: يعتقد كثير من الناس أن كلمة UX تعني تجربة المستخدم، ولكنها بالأحرى تعني عملية تصميم تجربة المستخدم. تجربة كل مستخدم على حدة ليست سوى رأيه الشّخصي عن موقعك أو تطبيقك. صحيح أن رأي المستخدم مهم (أحيانًا) ولكن على عاتق مصممي التجربة مسؤوليات أكبر من ذلك. تصميم تجربة المُستخدم: يشمل تصميم تجربة المُستخدم (UXD اختصارًا) إجراءات مشابهة جدًّا لأصول البحث العلمي، فنحن نبدأ بفهم طبيعة المستخدمين، ثم التفكير بتلبية حاجاتهم (وحاجات المشروع)، ثم نبني هذه الحلول ونقيس أداءها على أرض الواقع. تابع معنا لتتعلم الكثير عن تجربة المُستخدم، أو تابع صور القطط إن لم تكن مهتمًّا! ركنا تجربة المستخدم الأساسيان ينبغي عليك عندما تبدأ مشروع تجربة مُستخدم جديدًأ وقبل أن تصمّم أيّ شيء، أن تفهم أهدافك؛ هدفين اثنين على وجه الدقّة. كل شيء تفعله قائم على هذين الهدفين ولا شيء أهمّ منهما لنجاح عملك كمصمّم تجربة المُستخدم: أهداف المستخدمين، وأهداف المشروع. أهداف المستخدمين يريد المستخدم شيئًا ما منك، فهو إنسان، وللإنسان دومًا حاجات. سواء كانت هذه الحاجات هادفة أو لا. أهداف المشروع لكل مؤسسة هدف من وراء الموقع أو التطبيق الذي تبنيه، عادة يكون الهدف المال، ويمكن أن يكون الدعاية للشركة، أو جذب المستخدمين للمجتمع… إلخ. تحديد نوع هذا الهدف أمر مهمّ. فلو كان الهدف عرض إعلانات أكثر، فإنّ سياسة تجربة المُستخدم ستكون مختلفة كلّ الاختلاف عمّا إذا كان الهدف هو بيع المنتجات أو الترويج للمشروع في الإعلام الاجتماعيّ. تُسمّى هذه الأمور "القياسات" (metrics) أو "مؤشرات الأداء الأساسيّة" (KPIs) كما يحلو لرجال الأعمال تسميتها. التنسيق بين الهدفين حسن التنسيق بين الهدفين السابقين هو الامتحان الحقيقي لمصمم تجربة المُستخدم، والمقصود هو كيف تجعل غاية المشروع تتحقّق عندما يحصل المستخدم على ما يريد (وليس العكس!). يجني YouTube أرباحه من الإعلانات، ويريد مستخدموه مشاهدة مقاطع فيديو جيدة، ولذلك فإن وضع الإعلانات في المقطع نفسه (أو في الصفحة نفسها) أمر منطقيّ. ولكن الأمر الأهمّ هو أن تسهيل البحث عن مقاطع الفيديو وإيجاد المقاطع المشابهة سيؤدي إلى زيادة ما يشاهده المستخدم، وهذا بدوره يزيد في أرباح YouTube. لو لم يكن الهدفان مُنسّقين، لاستطاع المستخدمون تلبية حاجتهم دون إفادة المشروع (مستخدمون كثر ولكن بلا نجاح) أو أن الأمر على العكس، أي أن المستخدمين لا يستطيعون تلبية حاجتهم (لا مستخدمين ولا نجاح). لو فرض YouTube إعلانًا مدّته دقيقة على كل نصف دقيقة تشاهدها، لانتهى به الأمر سريعًا نهاية عسيرة، ولكنّ إعلانًا مدّته بضع ثوانٍ هو ثمن قليل تدقعه مقابل مشاهدة دب الباندا وهو يعطس… صحيح؟ المكونات الخمسة لتجربة المستخدم في عملية تصميم تجربة المُستخدم، على المصمم أن يحفظ في ذهنه خمسة أمور طيلة العملية. المكوّنات الخمسة لتجربة المُستخدم: الجانب النفسي، وقابليّة الاستخدام، والتصميم، والجمل الترويجية، والتحليل. بإمكاننا أن نفرد في الحديث سلسلة طويلة لكلّ من هذه الجوانب، ولكنّنا سنبُسِّط الأمور بعض الشيء، فهذه السلسلة موجزة، وليس الغرض منها التعمّق في التفاصيل. أولا: الجانب النفسي عقل المستخدم معقّد، وأنت تعرف ذلك. يتعامل مصمّم تجربة المُستخدم مع ذهنيّة غير موضوعيّة تتحكّم بها المشاعر كثيرًا؛ ولهذه الذّهنيّة تأثير سلبيّ أو إيجابيّ على نتائجك، وعلاوةً على ذلك ينبغي على المصمم تجاهل جانبه النفسيّ الخاص أحيانًا، وهذا أمر عسير. اسأل نفسك: ما الذي يدفع المستخدم ليزور خدمتي في الأساس؟ ما شعوره عندما يفعل ذلك؟ كم من الجهد يبذله ليصل إلى ما يريد؟ ما العادات الّتي تنشأ مع تكرار ذلك مرارًا؟ ما الذي يتوقّعه عندما ينقر على هذا؟ هل تفترض أنّه يعلم شيء وهو لم يتعلّمه بعد؟ هل يريد أن يكرّر هذا الأمر؟ كم مرّة؟ هل تفكّر بحاجات المستخدم ورغباته، أم بحاجاتك ورغباتك؟ كيف تكافئ التّصرّف السّليم؟ ثانيا: قابلية الاستخدام صحيح أن الجانب النفسيّ للمستخدم أمر متعلّق ببواطنه، ولكن قابليّة الاستخدام على العكس من ذلك، وباستطاعتك ملاحظة حيرة المستخدم. أحيانًا تكون صعوبة تنفيذ شيء ما أمرًا ممتعًا (كما في الألعاب)، ولكن الغالب لكل ما سوى الألعاب أن تكون سهولة الإنجاز هي ما نريده. اسأل نفسك: هل يستطيع المستخدم إنجاز العمل المطلوب بأقل قدر من الإدخال؟ هل باستطاعتنا تجنيب المستخدم الوقوع في الخطأ؟ (الجواب: نعم!) هل الأمر واضح ومباشر، أم أنّه غامض؟ هل الأمر سهل إيجاده (وهذا أمر جيّد)، أم صعب تفويته (أفضل)، أم متوقّع دون تفكير (الأفضل)؟ هل يتلاءم تصميمك مع افتراضات المستخدم أم يعاكسها؟ هل وفّرت كل ما ينبغي على المستخدم معرفته؟ هل يمكن إنجاز الأمر نفسه بالجودة نفسها ولكن بطريقة مألوفة أكثر؟ هل تبني قراراتك على منطقك أنت؟ أم على بديهة المستخدم؟ كيف تتأكد؟ إن لم يقرأ المستخدم النصوص المكتوبة بخطّ صغير، هل يبقى الأمر مفهومًا؟ هل يمكن إنجازه؟ ثالثا: التصميم تعريفك لكلمة "التصميم" كمصمم تجربة المُستخدم مختلف بعض الشيء عن المفهوم الفنّي الذي يعرفه المصمّمون. لا يهمّ إن كانت الكلمة تعجبك أم لا. التصميم في تجربة المُستخدم يعني كيف تسير الأمور، وهو شيء يمكن إثباته؛ ولا علاقة له بالأسلوب. اسأل نفسك: هل يعتقد المستخدم أن المنتج جميل؟ هل يثقون فيه فورًا؟ هل يوصل المنتج الهدف والوظيفة دون كلمات؟ هل يمثّل العلامة التجارية؟ هل تنسجم مكوّناته معًا؟ هل يقود التصميم عيني المستخدم إلى المواضع الصحيحة؟ كيف تتأكّد؟ هل تساعد الألوان والأشكال والخطوط المستخدم في إيجاد ما يريده وتزيد من قابلية مُستخدم التفاصيل؟ هل تبدو العناصر الّتي يمكن النقر عليه مختلفة عن تلك الّتي لا يمكن النقر عليها؟ رابعا: الإنشاء/النصوص Copywriting هناك فرق هائل بين الإنشاء الخاص بالعلامة التجارية والإنشاء الخاص بقابليّة الاستخدام. فالأولى تعزّز صورة الشركة، والثانية هدفها إنجاز الأمور بأسرع وأبسط ما يمكن. اسأل نفسك: هل تبدو النّصوص واثقة وتُعلِم المستخدم بما عليه فعله؟ هل تحثّ المستخدم على إتمام هدفه؟ هل هذا ما تريده؟ هل أكبر النصوص هي أهمّها؟ إن كان الجواب لا، فلماذا؟ هل تُعلّم المستخدم أم تفترض أنّه يعلم؟ هل هي واضحة ومباشرة وبسيطة وفعّالة؟ خامسا: التحليل التحليل هو نقطة ضعف معظم المصمّمين في رأيي، ولكن يمكن إصلاح هذا الخلل. التحليل هو الفارق الرئيسي بين تجربة المُستخدم وأنواع التصميم الأخرى، وفهمه يُعلي من قيمتك. وإتقانه يعني حرفيًّا دخلًا أعلى. فاسأل نفسك إذًا: هل تستخدم البيانات لإثبات صحّة تصميم، أو الوصول إلى التصميم الصّحيح؟ هل تبحث عن آراء غير موضوعيّة أم حقائق موضوعيّة؟ هل جمعت المعلومات الّتي تعطيك الإجابات المطلوبة؟ هل تعرف لم يفعل المستخدمون ما يفعلونه؟ أمّ أنك تفسّر سلوكهم فقط؟ هل تبحث عن أرقام مجرّدة؟ أم تهدف إلى إدخال تحسينات بناء عليها؟ كيف ستقيس شيئًا ما؟ هل تقيس الجوانب المطلوبة فعلًا؟ هل تبحث عن النتائج السيّئة أيضًا؟ لم لا؟ كيف تطبّق هذا التحليل لتحسين المنتج؟ ترجمة وبتصرّف لكل من المقالات التالية للكاتب Joel Marsh: What is UX User Goals & Business Goals The 5 Main Ingredients of UX حقوق الصورة البارزة: Designed by Freepik. اقرأ أيضًا المقال التالي: فهم ودراسة المستخدمين في مجال تجربة المستخدم النسخة العربية الكاملة من كتاب مدخل إلى تجربة المستخدم (User Experience - UX) 1.0.0 تاريخ موجز عن تجربة المستخدم ثلاثون مصطلحًا في تجربة الاستخدام لا غنى عنها لمصممي الويب

إن الهدف المنشود لأي موقع هو تلبية زوّاره الدعوة إلى الإجراء (call to action)، سواءً كانت الدعوة هي طلب سلعة/منتج، أو ملء نموذج ما (form)، أو حتى الاشتراك في النّشرة البريديّة، ويركّز معظم أصحاب المواقع على هذه الخطوة، ولكن ماذا عن الخطوة التي تلي تلك الدعوة؟ ما الذي سيحدث؟ وما مدى أهميتها؟ دعني أخبرك بأمر، إن المواضيع التي تتحدّث عن الدّعوة إلى الإجراء CTA هي من أكثر المواضيع اهتمامًا التي تجذب المسوّقين عامّةً، ولا عجب في ذلك في الحقيقية، فالدعوة إلى الإجراء CTA هو جوهر الصفحات والمواقع، ويُدرك معظمنا مدى أهميتها، وبالتأكيد سنعمل ما بوسعنا لجعلها فعّالة ومجدية قدر المستطاع، ولكن المشكلة أننا نشجّع الزوّار على اتخاذ الإجراء، ونهمل ما بعد الإجراء، وهذا هو محور وهدف هذا المقال. كن واضحا مع المستخدم في نجاح العملية أو فشلها هل سبق لك وكنت في أحد المواقع وطلبت سلعةً ما أو أرسلت معلومات نموذج (form) وتساءلت عن نجاح العمليّة أم لا؟ لا بدّ وأن حدث ذلك، حيث تَفشل معظم المواقع في التوضيح والتأكيد للمستخدم أو الزائر فيما إذا كان طلبه قد تمّ بالفعل أو لا. تأكّد من أن موقعك واضح في كل خطوة يخطوها المستخدم، وبيّن له ما الذي حدث وما الذي سيحدث، قد تبدو الأمور بسيطة وغير معقدة بالنسبة لك، ولكن الأفضل هو القيام باختبار الموقع مع مستخدم حقيقي للتأكّد من هذه البساطة التي تفترضها. وضّح موقع Panic للمستخدم استكمال الدعوة إلى الإجراء بوضوح ومن دون أي مجال لأي التباس من أي نوع. كن دقيقًا في كيفيّة تأكيدك لاستكمال العمليّة، فإرسال بريد إلكتروني ليس بالأمر الكافي، فقد لا يكون المستخدم يتابع بريده في الوقت الحالي، وعليه سيبقى حائرًا في أمره، ناهيك عن احتماليّة ضياع الرسالة بين الرسائل المُزعجة spam. يجب توضيح نجاح العملية حتى عندما تكون ضمن الموقع، خاصّة إن كانت الدعوة إلى الإجراء call to action ستستكمل بدون تحديث الصّفحة، فمن المحتمل جدًا أن يفوّت المستخدم التنبيه الذي يشير إلى استكمال العملية عند نقره على زر الدعوة إلى الإجراء، وعليه يجب أن يكون التنبيه في أقرب موضع ممكن لتفاعل المستخدم الأخير. معالجة الأخطاء إنّ أحد أبرز الأسباب التي تؤدي إلى فشل المستخدم في استكمال الدعوة إلى الإجراء call to action هو الصدام مع خطأ ما، وسواءً كان هو من سبّب هذا الخطأ أو كان السبب علّة ما في الموقع، سيبقى ذلك مضيعة كبيرة في التحويل. يجب عليك دائمًا الحرص على التقليل من الأخطاء قدر الإمكان، على سبيل المثال، إن كانت الدعوة إلى الإجراء CTA تتطلّب من المستخدم رمزه البريدي للمتابعة، فلا تجبره على إدخاله بصيغة معيّنة، قم بتحويل الرّمز البريدي إلى الصّيغة التي تريدها بعد أن تستقبلها، سيُساعد هذا الإجراء من التقليل من الأخطاء من دون شك. إن كان من الصعب تجنّب هذه الأخطاء، فيسّرها على المستخدم ولا تعسّرها، فعند ملئ نموذج، تأكّد من عدم إزالة المعلومات المدخلة لدى حدوث خطأ ما في الإدخال (يعني بعد أن تعيد تحميل الصّفحة وتُخبره بوجود أخطاء في مُدخلاته)، فأكثر ما قد يزعج المستخدم هو إعادة إدخال بياناته مرّة أخرى، وقد يحجمه هذا الأمر عن المتابعة. أخطاء 404 الأكثر شيوعًا، ومع ذلك فإن صفحات أخطاء 404 تهتم بالجمالية على حساب مساعدة المستخدم. اعرض على المستخدم حلًا بديلًا لاستكمال الدعوة إلى الإجراء CTA في حال مواجهته خطأ من أي نوع، ربما عبر التواصل المباشر هاتفيًا، أو إرسال رسالة إلكترونية، بمعنى آخر، افعل ما بوسعك لدفعه على المُضي قدمًا. أخيرًا، تأكّد من أن المستخدم يُدرك الخطأ، كما هو الأمر مع تنبيه الاستكمال الذي أسلفت الحديث عنه، فعلى التنبيه الذي يشير إلى حدوث الخطأ أن يكون ضمن المجال الذي ينظر إليه المستخدم حاليًا، في اختبار قابلية الاستخدام usability testing، دائمًا ما أرى العديد من المستخدمين تصيبهم الحيرة بسبب عدم تمكنهم من معرفة ما الذي حدث أو ما الذي أدى إلى حدوث المشكلة. الدعم والمساعدة إن استكمل الزائر الدعوة إلى الإجراء CTA بنجاح أو لا، من المهم له دائمًا الحصول على الدعم والمساعدة، حيث أرى أن أغلب المواقع تصعّب من مهمة الزوّار في التواصل معهم، وأفضل ما لديهم هو الأسئلة الشائعة FAQs، مواقع أخرى تحدّد التواصل من خلال البريد الإلكتروني، ولسوء الحظ، فالمستخدم نافذ الصبر ولا يرغب في الانتظار للحصول على رد. عندما قمنا ببناء أحد مواقع الأغذية من معلّبات وخلافه، أدركنا وجود فئة كبار السّن ولاحظنا أن لها أسئلة خاصة بها وترغب بالتحدّث مع شخص تفهم عليه ويفهم عليها، ولذلك وفّرنا جميع خيارات التواصل الممكنة. سيساعد عرض رقم الهاتف أو نظام محادثة مباشر المستخدم بشكل كبير في اتخاذ قراره في استكمال الدعوة إلى الإجراء CTA، فليس من مصلحتك أن يندم المستخدم على قراره. تجنب ندم المشتري هل سبق لك أن اشتريت شيئًا ما ومن ثم ندمت بعد ذلك؟ هل انتابك شعور أنك قد اتخذت القرار الخاطئ؟ يُشار إلى هذا الشعور بـِ "ندامة المُشتري" buyer’s remorse، ويحدث هذا الشعور عندما تتخذ قرارًا لا يمكنك الرجوع عنه بالسهل، أي أنك بعد أن اتخذت قرارات قمت بالتفكير مرة أخرى وأصابك شيء من الوسوسة حوله. ينتاب الزوّار هذا الشعور من دعوات الإجراء أيضًا، سواءً كان الإجراء عملية شراء أو تسليم البيانات الشخصية أو الاشتراك في القائمة البريدية، ويمكن حتى للأشياء الصغيرة أن تسبب هذا الشعور، ومن المحتمل أن تدفع المستخدم إلى إلغاء طلبه والرجوع عن قراره الذي كان قد اتخذه بالفعل. ضع في حسبانك أهمية طمأنة المستخدم، ربما من خلال التأكيد على المنافع التي سيحصل عليها من استكمال الدعوة إلى الإجراء CTA أو من خلال تقديم هدية شكر بسيطة، ويمكن السر دائمًا في تجاوز توقعات العملاء بدل الاكتفاء بالحد الأدنى. رفع سقف التوقعات إن أفضل ما يمكن عمله لحضّ المستخدم على متابعة الدعوة إلى الإجراء CTA هو إبهار المستخدم وتجاوز سقف توقعاته وتقديم خدمة استثنائيّة تتحدّث عن نفسها وتتحدّث عنك. هذا بالضَّبط ما فعتله شركات مثل Zappos بشكل ملفت، حيث قلبت الطاولة على جميع المنافسين وسبقتهم مع سياسة الاستعادة المجانية ذات 365 يوم. يوجد عديد الفرص التي يمكن استغلالها لإبهار المستخدم/الزائر، ويمكن أن تكون على الشكل التالي: تقديم خدمة عملاء مباشرة من دون فترة انتظار. تقديم دعم محادثة مباشر على مدار الساعة وفي كامل الأسبوع. تحمّل تكلفة الشّحن في حال الاستعادة return. منح مشتركي القائمة البريدية محتوى حصريًا أو هدايا. شكر المستخدمين بشكل شخصي عند تزكيتهم الخدمة على الشبكات الاجتماعيّة. يوجد العديد من الخيارات لإبهار المستخدمين حتى مع حدوث الأخطاء، على سبيل المثال Jawbone، عندما قاموا بطرح الإصدار الأوّل من منتجهم، كان يحتوي على علّة، والتي من شأنها أن تسبب المشاكل لعدد كبير من المستخدمين. عندما أدرك فريق Jawbone حقيقة المشكلة وما قاموا به من خطأ، قاموا بتجاوز سقف توقعات مستخدميهم بسياسة إرجاع مبهرة. لم يقوموا بإعادة كامل المبلغ المدفوع فقط، بل بتبديل الجهاز أيضًا، كل ذلك وبدون أن يتمّ إرجاع الجهاز أو إثبات أن الجهاز يُعاني من المُشكل. لا تسعى معظم الشركات للأسف لإبهار مستخدميها وتجاوز سقف توقعاتهم إلا القليل منها، لا بل يفشل منهم بتقديم الحد الأدنى. تجنب مفاجأة المستخدم قد يقود استكمال الدعوة إلى الإجراء call to action إلى نتائج غير متوقعة، فعندما يقوم أحدهم بالتسجيل في القائمة البريدية متوقعًا بريدًا إلكترونيًا في الأسبوع يجد نفسه غارقًا في بحر من الرسائل المزعجة، أو ربما عندما يقرر شراء منتج ما يتفاجأ بتكلفة شحن عالية، وما يزعج في الأمر هو محاولة الشركات إخفاء هذه الأمور عن المستخدم، وفي أحسن الأحوال ستذكرها ولكن تكتبها بحروف صغيرة تحتاج إلى مكبّرة لمشاهدتها. قام ASOS بعمل جيّد في توضيح تكلفة التوصيل قبل شروع المستخدم في قيامه بالشراء. إن لم تكن صادقًا من البداية ستخسر رضا العملاء، هذا الرضا هو الذي يدفع بالمستخدم لاستكمال الدعوة إلى الإجراء CTA، خصوصًا مع مسألة التسليم delivery. التوصيل Delivering إن كانت الدعوة إلى الإجراء مرتبطة مع تسليم منتج من نوع ما (فيزيائي أو إلكتروني) فمن المهم تولّي عملية التوصيل بعناية. أولًا، ضع نصب عينيك ملاحظتي السابقة حول مفاجأة المستخدم، فإن حدث وكان عليك فرض رسوم على التوصيل، كن واضحًا تمام الوضوح في ذلك مقدّمًا، فلا تنتظر حتى يقوم المستخدم بتقديم كامل معلوماته قبل أن تخبره بذلك، صحيح أن المستخدم سيتابع الدعوة إلى الإجراء، ولكنك بلا شك أزعجته، الأمر الذي كان بإمكانك تجنبه. ثانيًا، الوقت من ذهب، وقتك ووقت العميل، فعندما يستكمل المستخدم الدعوة إلى الإجراء هو لا يريد أن يعرف ما الذي سيحدث في الخطوة التالية فقط، بل يرغب أيضًا في معرفة متى ستحدث أيضًا، فإن استكمل المستخدم نموذج التواصل contact form فهو يَرغب في معرفة متى سيتم الرد عليه، وإن اشترى منتجًا فهو يَرغب في معرفة موعد التسليم. إن حدث وفتحت تذكرة دعم في موقع Basecamp، سيُشير الموقع وبوضوح إلى المدة المُتوقّعة للرد. يجب أن تكون واضحًا حول تسليم المنتجات/السلع الإلكترونية، فمثلًا، هل سيتم تسليم المنتج مباشرةً أم يجب الانتظار إلى حين الموافقة؟ إن لم يتم توصيل المادة/المنتج كما يتوقّع المستخدم، فقد يتسبب ذلك في خسران رضا الزبون، وهو أمرٌ لا يمكن استرجاعه بسهولة، كما أنك بحاجة رضا الزبون إن كنت ترغب منه استكمال دعوات إجراء CTAs مستقبليّة. دعوات الإجراء الثانوية نادرًا ما يأخذ مدراء المواقع في الحسبان ما على المستخدم فعله بعد استكماله الدعوة إلى الإجراء الرئيسيّة CTA، ففي اعتقادهم أن الإجراء قد تم، وبالتالي فقد انتهى الأمر وليفعل المستخدم ما يحلو له. تحتوي صفحات تأكيد طلب الشراء في المواقع التجاريّة رابط "continue shopping" (تابع التسوّق)، لا داعي لهذا الرابط ولماذا سأحتاجه؟ لماذا سأرغب في متابعة التسوّق عندما أكون قد انتهيت لتوّي؟ إن كان المستخدم قد أنهى لتوّه شراء حاسب محمول، فمن المفترض الطلب منه متابعة الموقع على تويتر مثلًا. لا تترك المستخدم تائهًا، بل وجّهه نحو دعوة إجراء جديدة، على سبيل المثال، إن كان المستخدم قد أنهى لتوّه التسجيل في القائمة البريديّة، فاقترح عليه متابعتك على فيس بوك، وإن أنهى طلب إحدى السلع، اقترح عليه التسجيل في القائمة البريديّة للحصول على حسم حصري مثلًا. يوجد دائمًا شيء من الممكن أن يفعله المستخدم، عليك الطلب فقط، ولكن، ماذا إن لم يستكمل المستخدم الدعوة إلى الإجراء CTA الرئيسية/الأساسيّة بالشكل المطلوب؟ العودة من بداية خاطئة قرّر ابني مؤخّرًا التبرّع إلى أحد الجمعيات الخيريّة، قمنا باستخدام جهازي اللوحي iPad للقيام بالتبرّع، ولكن ولسوء الحظ لم نستطع استكمال العملية لسببٍ ما، وعليه قررنا تأجير الأمر إلى حين. استلمت في اليوم التالي بريدًا إلكترونيًا من الموقع يشكرني لمحاولتي القيام بالتبرّع وتشجيعي لاستكمال العملية، حيث قاموا بتخزين بريدي الإلكتروني، مدركين عدم متابعتي دعوتهم إلى القيام بإجراء CTA، فقاموا بالتواصل معي. عليك دائمًا أن تسعى إلى حثّ المستخدم على إنهاء الإجراء كما قام به موقع Charity Water. إن المثال السابق هو خير مثال في تشجيع المستخدم وحثّه على المتابعة واستكمال الدعوة إلى الإجراء CTA والتي قد بدأها المستخدم ولكنّه لم يتسنّ له إنهاء العملية. يستخلص أيضًا من المثال السابق وجوب الحصول على معلومات الاتصال مبكرًا من المستخدم، حيث سيمكنك هذا الأمر من متابعة من لم يستكمل الإجراء، سواءً كان الإجراء هو الشراء أو تكملة نموذج ما. إن كان المستخدم في منتصف عملية الدعوة إلى الإجراء، خزّن المعلومات المدخلة حتى وإن لم يُتابع الإجراء إلى النهاية، وبهذا في حال عودته لاحقًا لإنهاء عملية الشراء أو استكمال نموذج الاتصال، لا يتوجّب عليه البداية من جديد. خاتمة يمكن القول إن زبدة وخلاصة المقال هي عدم اعتبار الدعوة إلى إجراء call to action نقطة النهاية، بل هذه الدعوة هي بداية علاقتك مع المستخدم، فعندما يستكمل المستخدم الدعوة إلى الإجراء CTA فهو بذلك يمنحك ثقته بماله ووقته ومعلوماته الشخصيّة، فلا تخذله، لأن الدعوة إلى إجراء ما هي إلا بداية العلاقة. ترجمة وبتصرّف للمقال What happens after the call to action لصاحبه Paul Boag. حقوق الصورة البارزة: Designed by Freepik.

أطلقتُ مدوّنة ووردبريس منذ عامين. أضفت إليها الكثير من المحتوى لبضعة أشهر. كتبتُ المقال بعد المقال، مع التركيز على أن يكون المحتوى عالي الجودة. كل هذا أملاً في أن يأتي النجاح ولو بعد حين. ولكن كما هي العادة في هذه القصص، بعد فترة صرفتني التزامات أخرى عن المدوّنة، وتركتها في حالة من الإهمال. لم أنشر حتى كتابة هذه السطور مقالاً واحدًا على الموقع لمدّة تزيد عن 15 شهرًا. كانت المدوّنة تجذب أقل من 2000 زائرًا شهريًا وقت التخلّي عنها. قررتُ قبل بضعة أيّام التحقّق من إحصاءات الموقع على تحليلات جوجل للمرّة الأولى خلال مدّة تزيد عن العام. والعجيب أنّي اكتشفت أنّ المدوّنة قد جذبت أكثر من 10,000 زائرًا في الشهر السابق من دون أيّ تدخل من طرفي. ربّما تقول أنّها أيّام سعدي ولكن كانت هناك مشكلة كبيرة: المقاييس. نتحدّث بالتحديد عن معدّل ارتداد (Bounce Rate) تجاوز 90%، فقط 1.18 صفحة في الجلسة الواحدة ومتوسّط الجلسة 46 ثانية. إذًا ما هو المغزى من القصّة؟ ببساطة لا يهم عدد الزّيارات الذي تحصل عليه، فإنّ موقعك لن يربح شيئًا إذا لم يكن مُحسّنًا بشكلٍ يتوافق مع قابلية الاستخدام. يعتبر الحصول على زوّار لموقع هو نصف التحدّي، ما يهمّ حقًّا هو جعل هؤلاء الزوّار يسجّلون في موقعك. ومن تجربتي فإنّ قابلية الاستخدام غالبًا ما تكون الجانب الذي تُهمله الكثير من المُدوّنات والمشاريع التقنية على الويب. لحسن الحظّ فإنّ ووردبريس (وعدد لا يحصى من القوالب والإضافات) يعطينا كل الأدوات التي نحتاجها لبناء مواقع قابليّة استخدامها عالية. في هذا المقال سنقوم باستكشاف خمسة طرق رئيسيّة والتي من خلالها يمكنك جعل تجربة تصفّح موقع ووردبريس الخاص بك ممتعة أكثر. لماذا يعد "تحسين تجربة المستخدم" سببا في غاية الأهمية لنجاح موقعك/ مدوّنتك ربّما لا حاجة لي أن أذكّرك بماهية تجربة المستخدم (User Experience – UX) ولكن إذا كنت ترغب في معرفة المزيد، فلدينا قسم يحتوي مجموعة مقالات حول تجربة المستخدم على أكاديمية حسوب. كما هو مُتوقّع فإن تحسين تجربة المستخدم (User Experience Optimization – UXO) تهدف إلى تحسين موقعك ليكون أكثر قابلية للاستخدام. لاحظ أنّنا هنا لا نتحدّث عن جانب تصميم الموقع في حدّ ذاته. فيمكن لموقع سيء التصميم أن يقدّم تجربة مستخدم رائعة لجمهوره المستهدف. إنّما نتحدّث هنا تحديدًا عن "قابلية استخدام" موقعك. يرتبط هذا الأمر ارتباطًا وثيقًا بالتصميم الخاص بموقعك ولكن لا يعتمد بالضرورة على جودة التصميم في حدّ ذاتها. لن نتطرّق اليوم لكيفيّة جعل موقعك يبدو جميلًا وإنّما سنتطرّق إلى كيف تجعل موقعك قابلاً للاستخدام على أكمل وجه. الأمر الذي يهم في نهاية المطاف إذا أردت الحصول على عدد أكبر من الزوّار الدائمين. 1- التصميم المتجاوب (Responsive Design) من المؤكّد أنّك تعرف مدى أهميّة التصميم المتجاوب. إلا أنّه هناك اختلافًا كبيرًا بين معرفة أهميّة التصميم المتجاوب وأن يكون لديك بالفعل تصميم ووردبريس متجاوب وقابل للاستخدام بشكلٍ عالي الجودة. الأمر بسيط: إذا كان موقعك غير قابل للاستخدام على أكبر عدد من الأجهزة المستخدمة بواسطة جمهورك المستهدف، فإنّ موقعك لا يعدّ متجاوبًا بما فيه الكفاية. لأن هذه هي الفكرة عندما يتعلّق الأمر بالتجاوب. موقعك ليس إما مُتجاوبًا أو ليس مُتجاوب فالإجابة على هذا السؤال (هل موقعك مُتجاوب) ليست “نعم” أو “لا” بل هي نسبة مئوية إن صحّ التّعبير، حيث يجب أن نجيب على سؤال آخر وهو "ما نسبة الزيارات التي يظهر فيها موقعك مُتجاوبًا". يمكنك معرفة أكثر الأجهزة التي يستخدمها زوّار موقعك من خلال تحليلات جوجل عن طريق مسار Audience > Mobile > Devices: في المثال أعلاه يمكنك رؤية أنّ غالبيّة زوّار الموقع يستخدمون أجهزة Apple iPhone وiPad. ثاني أكثر الأجهزة شيوعًا لدى زوّار الموقع هو Nexus 5. بناءً على هذه البيانات فمن الطبيعي أن تقوم باختبار موقعك على iPhone وiPad. لن أخوض في تفاصيل اختبار قابلية الاستخدام لأجهزة الهاتف. بدلاً من ذلك فسنركّز على الإجابة على السؤال البديهي: هل تصفّح موقعك يبدو سهلاً على الهاتف الذي قمت باختياره؟ سيكون من الجيّد إذا استطعت طلب مساعدة من قريب أو صديق لك في هذا الاختبار (خاصّةً إذا لم ير هذا الشخص موقعك من قبل). إذا كنت تملك الجهاز المستخدم بصورة أكبر لتصفّح موقعك فبالتأكيد يمكنك اختبار موقعك عن طريق هذا الجهاز. ولكن إذا لم يكن لديك الجهاز فأقترح عليك أدوات اختبار مثل MobileTest.me وأداة StudioPress' responsive testing. هذه الخدمة رائعة أيضًا. نقطة أخيرة: إذا لم تكن لديك الوسائل الكاملة للحصول على تصميم متجاوب لموقع ووردبريس الخاص بك فبإمكانك استخدام Jetpack's Mobile Theme. هذا القالب ليس الحل الأمثل، ولكنّه مجّاني وفوري التنفيذ. 2- الانتقال الثابت (Fixed Navigation) يمكنك تخمين ما تقوم به هذه الخاصيّة من اسمها: يبقى شريط القوائم ثابتًا في الجزء العلوي من الشاشة عندما تقوم بالتمرير (Scroll)، بدل اختفائه. تزيد خاصيّة الانتقال الثابت من قابليّة استخدام موقعك حيث أنّها تعتبر بمثابة ضمان لإمكانيّة وصول الزوّار لأكثر الروابط أهميّة في موقعك أغلب الوقت. نظرًا لحجم شاشات الهواتف، فيجب عليك إذا كنت تستخدم خاصيّة الانتقال الثابت أن تتأكّد من أن شريط الانتقال لا يستولي على معظم مساحة الشاشة بالنسبة للهواتف ذات الشاشات الصغيرة. راجع قسم التصميم المتجاوب أعلاه لمعرفة الأدوات التي يمكنك اختبار تصميم موقعك من خلالها على أجهزة الهاتف للتأكد من شريط الانتقال يعمل بالشكل المطلوب. إذًا كيف يمكنك إضافة شريط الانتقال الثابت إلى موقعك؟ هناك عدّة حلول. هناك الكثير من قوالب ووردبريس التي تقدّم لك إمكانيّة الحصول على شريط انتقال ثابت كأمر أساسي لكن لا تبدو فكرة استبدال قالب بآخر لمجرد الحصول على هذه الخاصّيّة فكرة عملية. لحسن الحظ فإن هناك إضافات ووردبريس مجّانية جاهزة لحلّ هذه المشكلة ، لديك حرية الاختيار من بين ثلاث إضافات مجّانيّة عالية الجودة متاحة للتحميل: Sticky Header myStickymenu Sticky Menu (or Anything!) on Scroll 3- قائمة جانبية ثابتة (عناصر) بعد استعراض الانتقال الثابت يمكنك بسهولة تخمين ما تفعله القائمة الجانبيّة الثابتة. برأيي فإنّ هذه الميزة لها تأثير أقلّ من قائمة الانتقال الثابتة من ناحية قابليّة الاستخدام إلا أنّها تعتبر مفيدة إذا أردت على سبيل المثال جذب الانتباه إلى عنصر محدّد مهم في موقعك. لاحظ أنّني قد قمت بتضمين كلمة "عناصر" أعلاه لسبب وجيه – ستكون الخاصيّة أكثر فعاليّة إذا أردت تثبيت عنصر محدّد من الشريط الجانبي بدلاً من الشريط بأكمله. بإمكانك تثبيت القائمة الجانبية باستخدام: الإضافة المذكورة سابقًا Sticky Menu أو وودجت Q2W3 Widget - Sticky Widget: 4- أزرار المشاركة الاجتماعية العائمة (Floating Social Share Buttons) من المؤكّد أنّك رأيت أزرار المشاركة الاجتماعيّة العائمة من قبل. الصورة التالية مثال على هذا النوع من الأزرار: يمكن لهذه الأزرار أيضًا أن تظهر إلى جانب المحتوى إلا أنّ هذا النّوع لم يعد شائعًا كما كان. إحدى العثرات التي يجب الحذر منها بالنّسبة لأزرار المشاركة الاجتماعيّة العائمة هي طريقة ظهورها في أجهزة الهواتف. هل تختفي جميع الأزرار معًا، وإذا كانت تختفي معًا فعلاً، كيف يمكن للمستخدم المشاركة من جهازه بسهولة عن طريق حلّ بديل؟ كل هذه هي أسئلة عليك الإجابة عليها من منظور قابليّة الاستخدام. إذا كانت أزرار المشاركة العائمة تختفي بالفعل فإنّك بحاجة لإيجاد حل بديل سهل الاستخدام لمستخدمي الهواتف النقّالة. إذًا كيف يمكن إضافية خاصيّة أزرار المشاركة الاجتماعيّة العائمة على موقع ووردبريس الخاص بك؟ ستقوم إضافة Floating Social بتنفيذ الأمر ببساطة. لا يوجد هناك الكثير من البدائل في الوقت الراهن ولكن الإضافتين Flare و Digg Digg يمكنهما تقديم الخاصيّة إلا أنّه لم يتمّ تحديثهما منذ فترة. بديل آخر لكل الحلول المعروضة أعلاه هو دمج أزرار المشاركة الاجتماعيّة الخاصّة بك في قائمة التنقّل الثابتة أو في القائمة الجانبيّة الثابتة في موقعك. غيض من فيض تردّدتُ كثيرًا عند كتابة هذا المقال لمعرفتي بأن الطرق التي يمكن استخدامها لزيادة قابليّة استخدام موقعك كثيرة جدًا. رغم ذلك فإنّك في نهاية المطاف اكتفيت بأربعة طرق فقط. هناك الكثير من الطرق إضافة إلى الأربعة طرق المذكورة سابقًا يمكنك استخدامها لتحسين قابلية المستخدم الخاصّة بموقعك. ركّزنا في هذا المقال على بعض الأشياء الأكثر ظهورًا للمستخدم ولكن في الحقيقة فإنّ الأشياء غير المحسوسة هي التي تخلق فرقًا أكبر بالنسبة لقابليّة الاستخدام. على سبيل المثال، تعتبر سرعة التحميل جزءًا كبيرًا جدًّا من قابليّة الاستخدام. إذا استغرق موقعك وقتًا طويلاً في التحميل فإنّ معظم الزّوار سيقومون ببساطة بمغادرة الموقع، في هذه الحالة فإنّ جميع جوانب موقعك ستصبح بلا معنى. مع أخذ ذلك في الاعتبار، يمكنك العمل على كل شيء بدءًا من تحسين الصورة، إلى التخزين المؤقّت، إلى حلول شبكة توصيل المحتوى (Content Delivery Network) ولا تنسى أدوات سرعة الصفحة. ترجمة -وبتصرّف- للمقال 4Quick Ways To Lower Your WordPress Site's Bounce Rate لصاحبه Tom Ewer

سيفاجئك العملاء بطرق استخدام منتجك مبتكرة. وهذا لا يأتي من دراسة وتفكّر من جانبهم وإنّما نتيجة لجعلهم منتجك يتكيّف مع احتياجاتهم. يقول Peter Drucker قولته المشهورة: "نادرًا ما يشتري العميل ما تظنّ الشركة أنّها تبيعه"؛ وهذه إشارة إلى أنّه لكي تطوّر منتجًا ما يجب عليك أوّلًا أن تدرس وتفهم الغرض الذي سيُستخدم من أجله. لنوضّح الأمر بمثال: بعد أن أطلقنا Intercom بفترة قصيرة قمنا بإضافة ميزة الخارطة لنتمكّن من معرفة أماكن عملائنا حول العالم. كانت هذه الميزة من النوع الكلاسيكي وكانت رائعة جدًّا لكنّنا لا نعرف لماذا. ولقد استطعنا رؤية كم أصبحت هذه الخارطة شعبيّة من خلال عدد الأشخاص الذين يستخدمونها. لكن التسويق للخارطة كميزة كان صعبًا، لأنّه كان من الصعب معرفة سبب استخدامها. هل هو معرفة المكان الذي يأتي منه أغلب العملاء؟ كلّا، العديد من المُنتجات تفعل ذلك.هل هو رؤية العملاء من مدينة معيّنة؟ كلّا، فقوائم المستخدمين تفعل ذلك بشكل أفضل بكثير.هل هو معرفة عدد مستخدمي المنتج في بلد معيّن؟ كلّا، فقوائم المستخدمين تفعل ذلك بشكل أفضل بكثير أيضًا.إذًا ما هو الغرض من الخارطة بغضّ النظر عن كونها مثيرة للإعجاب؟ لقّد فكّرنا بثلاث طرق استُخدمت فيها هذه الخاصيّة: هنالك أشخاص يفضّلون استعراضها في المعارض التجارية والمؤتمرات (انظر إلى الحاسوب الشخصي): وأشخاص يفضّلون استعراضها على تويتر: وآخرون يفضّلون استعراضها أمام المستثمرين: إذًا ما تفعله الخارطة هو أنّها تبدو رائعة وتثير إعجاب العملاء؛ هذا كل ما تفعله. التحسين على أساس الاستخداملو أردنا تحسين الخارطة قبل معرفة الغرض الذي تُستخدم من أجله لحاولنا إنشاء خارطة أفضل. فيما يلي بعض الأمور التي قد نركّز عليها: الدّقة الجغرافية.المجموعات الجغرافيّة.حدود أفضل للدولة أو المدينة.خاصية السحب لإنشاء مناطق regions.تحسينات خرائطيّة أخرى متنوّعة.قد تستغرق منّا هذه التحسينات عدّة أسابيع أو أشهر، وفي النهاية تؤدّي إلى منتج أسوء؛ لأنّ العميل لم يكن يشتري ما كنّا نظن أنّنا نبيعه. فالخارطة أصبحت عبارة عن قطعة للعرض وليست خارطة. ما الذي يجعل الخارطة تقوم بتلك المهمّة بشكل أفضل؟ أولًا وقبل كل شيء، خارطة مصمّمة لتبدو جيّدة.خارطة تقوم بإخفاء البيانات الحسّاسة بشكل تلقائي مما يجعلها قابلة للمشاركة.خارطة من السهل على العملاء مشاركتها.وهذا بالضبط ما قمنا بعمله. لقد قمنا بعرض على عملائنا فرصة مشاركة خارطة متحرّكة وجميلة، وزوّدناهم بعنوان URL فريد من نوعه وقابل للمشاركة: خارطة أسوء تقوم بعمل أفضلعندما تقوم بالتركيز على الكيفيّة التي تُستخدم فيها الميزة، متجاهلًا فئة أو نوع الميزة، ستتعلم كيف تقوم بتحسينها بسرعة، وهذه التحسينات سيتردد صداها على الفور. بإمكانك مشاهدة المزيد من ردود أفعال العملاء تجاه الخارطة القابلة للمشاركة هنا. حقوق التّصميم عائدة لـHongyuan وحقوق تطوير الميزة عائدة لـEoin وPatrick. ترجمة -وبتصرّف-للمقال This is not a map لصاحبه: Des Traynor. حقوق الصورة البارزة: Designed by Freepik.

ما الذي يجعل من موقع الإنترنت سهل الاستخدام؟ يتردد هذا السؤال في الشبكة العنكبوتية كثيرًا، ومع ذلك لم يحصل هذا السؤال على إجابة شافية ووافية حتى الآن، حيث أنه لا يوجد خلطة أو وصفحة سحرية لتحقيق هذه السهولة. يتمحور مفهوم قابلية الاستخدام في عالم الويب حول جعل موقع الإنترنت قابلًا للفهم سهلًا للاستخدام، وقد تطوّر هذا المفهوم ليصبح فرعًا له قواعد وأسس، ولم يعد الأمر مجرّد اتباع تصميم دارج/شائع أو موضة جديدة، بل الأمر متعلّق بخواص ومميزات يجب على كل موقع امتلاكُها. يوجد هدفان رئيسيان خلف قابلية استخدام في مواقع الويب: توفير الوقت على المستخدم من خلال توضيح كل شيء في الموقع وتسهيله قدر الإمكان على المستخدم النهائي.زيادة رضا الزوّار من تجربة الموقع والتقليل من الأخطاء وردود الفعل السلبية من الزوّار.يجب إجراء دراسة في قابلية الاستخدام تخص موقعك والزوّار المستهدفين من الموقع للحصول على أفضل النتائج، ولكن يوجد مبادئ عامة يمكن تطبيقها على أي موقع: وضح الغرض الجوهري من موقعك لا يقتصر هذا الأمر على صفحة البداية homepage فقط، بل على أي صفحة هبوط في الموقع، وذلك لكي يملك المستخدم فكرة واضحة لا تشوبها شائبة عن مقصد الموقع، بمعنى على صفحات الموقع أن تجيب عن أسئلة المستخدم لا أن تطرح أسئلة جديدة، من الحلول الشائعة الاستخدام هو استخدام العبارات tagline ("في مهمّة لتطوير الويب العربي" مثلًا) والشعارات logo، ولكن وعند الرغبة في صنع انطباع مثالي ولا يُنسى فمن الممكن استخدام الإنفوجرافيك أو حتى خلفيات الفيديو background video والتي ستدعم فكرة الموقع بشكل أفضل. أرشد المستخدم في أرجاء الموقع رويدا رويدا إن المهم مساعدة المستخدم على إيجاد ما يَبحث عنه بأقل جهد ممكن، بمعنى حاول دائمًا أن تكون واضحًا باستخدام الكلمات والتعابير والصياغة اللغوية، وتجنّب استخدام العناوين الغامضة والمبهمة، ولا تجعل المستخدم يُمعن في التفكير، وإن توفّر بنية من المعلومات وتصفح سلس بين الصفحات هو من العوامل الأساسية لتحقيق قابلية استخدام ناجحة، وإن كان لديك فيض من المحتوى ولا يمكن الوصول إليه بالبحث وبالسهولة المطلوبة، إذًا يوجد مشكلة ويجب حلّها على الفور. قلل من الأخطاء وحاول تقديم الحلول لا يُلام المستخدم على أخطاء الموقع بأي حال من الأحوال، حتى لو كان هو مُسبب الخطأ، ولذلك من واجب صاحب الموقع التقليل من العوامل المسبّبة للأخطاء قدر الإمكان، فمن المجدي جدًا استخدام التلميحات المرئيّة والإرشادات النصيّة والتي من الممكن أن تقلّل من أخطاء ملئ النموذج form مثلًا، مع ذلك ستبقى هناك أخطاء لا يُمكن تجنبها، وهنا يمكن الاستفادة من صفحة منسقة ومرتبة لتعرض الأخطاء المتوقعة والتي قد يتعرّض لها المستخدم وكيف له تجنّبها. أبق المستخدم على إطلاع بحالة الموقعتُعتبر هذه النصيحة من أهم النصائح في قابليّة الاستخدام، والتي اقترحها Jacob Nielsen عام 1995، وهي ذات تأثير وفعالية ليومنا هذا، وبالتالي يجب التصريح والإشارة إلى حالة الموقع دون تأخير. اعمل على بناء ثقة ومصداقية لا تدور قابلية الاستخدام حول الأمور التقنية فحسب، فإن كان المستخدم لا يثق بموقع أو منتجك، فلا شيء سيصنع الفرق، لا المحتوى ولا التأثيرات البصرية، لذا تأكّد من وجود صفحة "من نحن" أو "حول الموقع" وقدّم من خلالها فريق العمل، وحبّذا أيضًا لو تم تدعيم هذا النوع من الصفحات بالتغطيات الإعلامية أو استطلاعات الرأي أو ربما شيء من الإحصائيات التي تخص الموقع، والأهم من هذا كله شهادات العملاء وتقديرهم لخدمتك customer testimonials. خاتمةتذكّر دائمًا عند العمل على قابلية الاستخدام أن المستخدم لا يرى الواجهة بالطريقة ذاتها التي أنت تراها كمُصمّم UI، ويجب الانتباه دائمًا إلى وجود نماذج مختلفة من المستخدمين، فمنهم الصبور ومنهم المتذمّر، ومنهم من ينبه إلى التفاصيل ومنهم الذي لا يدقّق، وعليه فإن التفكير بهذه الطريقة هو السبيل في الحصول على نتائج مرضية. ترجمة وبتصرّف للمقال 5Basic Usability Principles Every Website Should Follow لصاحبه Armen Ghazarian. حقوق الصورة البارزة: Designed by Freepik.

نعتقد جميعنا أننا نفهم هندسة المعلومات، ومع ذلك فإن هذا المجال مجال خاص نوعا ما والأشياء التي نظنّ أننا نعلمها قد لا تكون صحيحة. لم نعد نسمع عن مصطلح هندسة المعلومات كثيرًا في هذه الأوقات، هناك الكثير من الحديث عن فهم احتياجات المستخدمين وتقديم المحتوى المناسب لهم، ولكن القليل منه حول كيف يجد المستخدم هذا المحتوى. يعود هذا الأمر إلى أنّ هذا الموضوع مغطّى بشكل كامل، يوجد بعض الكتب الرائعة حول الموضوع، وعليه لا يشعر المدونون أنّ هناك المزيد لإضافته. المشكلة هي أنه عندما تتم تغطية الموضوع بشكل جيد، فإنه ينتقل إلى عالم المعرفة العامّة. إن مشكلة المعرفة العامّة أنّه يعلوها الغبار مع مرور الوقت، تظهر معلومات خاطئة وتكبر بعض الخرافات.هذا الأمر يتكرّر دائمًا، مثلما هو عليه الحال مع فكرة أن المُحتوى يجب أن يكون فوق خط الطّي الوهمي above the fold بحجة أن المُستخدمين لا ينزلون أسفل الصّفحة users don’t scroll. للأسف أصبحت هندسة المعلومات مشبعة بمثل هذه الخرافات، ولهذا أود أن آخذ القليل من الوقت لتبديد بعضٍ منها. أريد أن أبدأ مع الاعتقاد السّائد بأنه يُفترض ببنية المواقع أن تكون منطقيّة. يجب أن تكون بنية موقعك منطقيّةعندما أعمل على بنية موقع مُعيّن فعادة ما أدفع العميل وحتى زملائي إلى حافّة الجنون، حيث أنني لا أجعل بنية موقعي منطقية دائمًا. يوهم الناس أنفسهم بأن هندسة المعلومات تدور حول تنظيم المحتوى بطريقة منطقيّة. ولكنّ الأمر ليس كذلك. المشكلة هي أنّ الناس ليسوا منطقيين، نحن ندعيّ ذلك ولكننا نقوم باتخاذ القرارات بناءً على النزعات الثقافيّة، التنشئة، الأفكار المبلورة سابقًا وغيرها من العوامل. خذ على سبيل المثال سوق الخضر. عندما تقوم بزيارته أين تبحث عن الطماطم؟ تبحث عليها في قسم الخضروات أليس كذلك؟ ولكن لماذا لا تضع الأسواق الطماطم في قسم الفاكهة، فهي فاكهة ولا يُمكن تصنيفها مع الخضروات، حيث أن هذا هو التصّرف المنطقي إلا أنهم لا يقومون بذلك لأن الناس تتوقع رؤية الطماطم مع الخضروات وذلك بسبب أفكارهم المبلورة سابقًا. يجب علينا أن نتخلى عن فكرة أن تكون بنية مواقعنا منطقية بالنسبة لعقولنا، وعوضًا عن ذلك يجب أن تتناسب مع النموذج العقليّ لمستخدمينا سواء كان هذا الأمر منطقيًّا أم لا. يجب على المستخدم أن يكون قادرا إلى الوصول إلى المحتوى بثلاث نقراتفيما يخص المنطق دائمًا، هناك خرافة أخرى قد تبدو منطقيّة وتنصّ على أنه يجب على المستخدم أن يصل إلى المحتوى بـ 3 نقرات كأقصى حدّ، قد يبدو هذا الأمر منطقيّا إلا أنه لسوء الحظ ليس كذلك. بدأت هذه الخرافة من الأيام الأولى للويب عندما كان المستخدمون يستخدمون صلات dial-up. جعلت السرعات البطيئة المستخدمين يشعرون بالإحباط أثناء التصفّح بين العديد من الصفحات، وفسّر هذا الأمر بشكل مغلوط على أنّه مرتبط بعدد النقرات. في الواقع لا يوجد هناك أي دليل لدعم هذه الفرضية بل أن هناك من يقترح بأن عدد النقرات لا يهم. ما يهم عوضًا عن ذلك هو الشعور بالتقدّم إلى الهدف المطلوب. فإن شعر المستخدمون بأنهم يتقدمون، سيكونون سعيدين بالتقدّم بشكلٍ جيد بعيدًا عن النقرات الثلاث السحريّة. يجب أن يكون لديك فقط 7 خيارات (زائد أو ناقص 2)إحدى خرافات الأرقام السحرية الأخرى هي فكرة أنه لا يجب أن يكون لديك أكثر من 7 خيارات (زائد أو ناقص 2) أثناء التصفّح. يعود أصل هذا الاعتقاد إلى بحث في علم نفس أعدّه جورج ميلر. يُعلّل جورج ميلر ذلك بأن الأشخاص لا يستطيعون استيعاب أكثر من 7 خيارات (زائد أو ناقص 2) في ذاكرتهم قصيرة الأمد. إلا أنّ هذا الفرضية خاطئة لسببين: أولًا، هناك بحثُ آخر يقول أننا نجد صعوبات لكي نبقي أكثر من 4 أشياء في ذاكرتنا قصيرة الأمد، ولهذا فإن بطاقات الدّفع الإلكتروني تقوم بجمع الأرقام في مجموعات من أربعة أرقام. ثانيًا، إن صفحة الويب لا تطلب من المستخدم أن يقوم بحفظ الخيارات في الذاكرة قصيرة الأمد وذلك لأن المعلومات تظهر أمامه بشكل بصريّ.تكمن المشكلة في أن الأشخاص يحبون مثل هذه القواعد. قواعد يمكنك متابعتها والتي تجنبك القيام بأمور قد لا ترغب فيها مثل اختبار قابلية الاستخدام. ولكن في الحقيقة هذه هي الطريقة الوحيدة للتأكد مما يصلح من غيره. وبحكم أننا نتحدّث عن الأشياء التي يرغب النّاس في تجنّبها، لنُعرّج على ترتيب الأولويات. من المستحيل تجنب تحديد الأولوياتيُدهشني عدد المنظمات التي تكره تحديد الأولويات. سواء تعلّق الأمر بتحديد الأولويات للأهداف التجارية أو الجمهور. وذلك لأن تحديد الأولويات هو أمر مثير للخلاف. وهذا يعني القول إن قسما ما أكثر أهمية من قسم آخر أو مجموعة واحدة من المستخدمين لديها قيمة أكثر من غيرها. يمكن أن يكون هذا الأمر مشكلة في بعض المنظمات والتي يتراجع أداؤها بسبب غياب تحديد الأوليات. والنتيجة هي موقع على شبكة الإنترنت يحاول إرضاء الجميع وينتهي به المطاف بعدم إرضاء أيّ أحد. فتجدهم يُرتّبون عناصر التّصفّح أبجديا لتجنّب الإساءة لطرف أو لآخر، كما أن عناصر الصّفحة الرّئيسية تظهر بنفس الشّكل لتجنب مشكلة تفضيل عنصر على حساب آخر. ما لا تدركه هذه المنظمات أن تجنب تحديد الأولويات هو أمر مستحيل. فحتى ولو تم ترتيب العناصر أبجديّا، فإن العناصر التي تظهر في أعلى القائمة ستكون مُفضّلة على غيرها. بإمكانك عرض جميع عناصر الصّفحة بنفس الشّكل، لكن سيبدأ المستخدمون بتصفّح الموقع من الزاوية العلوية اليسرى. حاول أن تقوم بذلك، لكنه لا يُمكنك تجنب تحديد الأوليات وبالتالي فمن باب أولى أن تُعطي الأولية لما هو أكثر أهمّيّة. لا يهم إن لم يفهم المستخدم مصطلحا ما، ما لم يكن موجها إليهإحدى الجامعات التي كان لي شرف العمل مثال واضح عن هذا المُشكل، كان لدينا بعض التحفظات حول إذا ما كان مصطلح Alumni مناسبا لوضعه في قائمة التّصفّح الرّئيسية حيث توقّعنا أن بعض الزّوار لن يتمكّنوا من فهمه. في بداية الأمر عارضت الجامعة فكرة تغيير المصطلح، بحجة أن الناس الذين لا يقدرون على فهم مصطلح Alumni هم غير مناسبون لمؤسستهم، لكنهم قاموا بتغيير رأيهم عندما أشرنا لهم أن الطّلبة الذين لا تكون الإنجليزية لغتهم الأم لن يفهموا المُصطلح، حيث أن نسبة ليست صغيرة من مداخيل الجامعة مصدرها الطّلبة الأجانب. ثم ما لبثوا أن وقعوا في فخ المُغالطة التي يقع فيها الكثيرون: "سيتجاهل الزوّار المُصطلح إذا لم يفهموه وسيعتقدون بأنّه غير مُوجّه لهم". ولسوء الحظ هذا ليس صحيحا، فإن واجهت الزّائر مجموعة من الخيارات ولم تكن أيها هي الخطوة القادمة (الصفحة القادمة) التي يجب أن يذهب إليها فإنه من المُحتمل جدًا أن يذهب إلى قسم ما حتّى وإن لم يفهم ما يعنيه له ظانا بأنه سيحتوي على الإجابة التي يبحث عنها. والمزيد من الخرافاتخلاصة القول: القليل من المعرفة خطير ومُضرّ والأمر صحيح حتّى في مجال هندسة المعلومات ونفس الأمر مع تجربة المُستخدم. يجب أن نحذر أي النّظريات والقواعد يجب أن نُصدّق ونتّبع، حيث أنه يجب علينا أن نبحث ونحقّق من الأمر بأنفسنا ونُبث صحّته أو خطأه عبر التّجربة. ترجمة -وبتصرّف- للمقال What you know about information architecture, might not be true لصاحبه Paul Boag. حقوق الصورة البارزة: Infographic vector designed by Freepik.

إن الهدف من إعداد وتجهيز المخططات الهيكلية (Wireframes) لمواقع الإنترنت هو حلّ مشاكل التصميم المُرتبطة بتخطيط وتصميم الصّفحة، وترتيب عناصرها، وذلك عبر ابتداع تصوّر للموقع قبل تطويره، وذلك باستخدام جملة من المُمارسات والمبادئ. إن تطبيق مبادئ جشطلت (Gestalt) على العناصر، سيُساعد على تحضير الأفكار بسرعة، فالفكرة من الأساس من العمل على هذا المُستوى من الجودة هو السرعة الّتي تُمكن المُصمّم من اكتشاف الأفكار بدرجة معقولة من الدقّة. تعلّمتُ بعض الطُرق المُفيدة في السنوات الأخيرة، جعلت مني أعمل بإنتاجيّة أكبر مع الحفاظ على الجودة، وبطبعي أكره كتابة عناوين من نوع" أفضل الحيل مع تصاميم المخططات الهيكلية" ولكن بعد عملي مع مُصممين قليلي الخبرة، وجدت أنّ بعض هذه المواضيع تحدث بشكل متكرّر ومن الضروري الإشارة إليها. 1. كل شيء مهم وذو معنى كل تلوين، كل خطّ، كل ظل، كل تدرّج لوني، كل شيء يَهم وله معنى، فاستخدام حواف وإطارات غير متقطّعة (solid)، وخلفيّة ملوّنة، وظلالًا، قد يكون أمرًا لا لزوم لها، خاصّة أنّ هذه العناصر يُمكن أنّ تنتقل إلى مرحلة التصميم والتطوير، وبدون أنّ يُفكّر بها مليًّا، فيجب على كل شيء أنّ يكون له معنى، وأنّ لا تُدرج العناصر والرسومات هنا وهناك اعتباطيًّا. الانسجام يُساعد يجدر الانتباه عند استخدام الرسم التمهيدي (sketching) هو أنّ التلوين والخطّ موحد في كامل الرسم (يعني، وجوب تبديل القلم المُستخدم، أو تغيير خطّ اليد من أجل إبراز الاختلاف)، بالإضافة إلى تتكرّر مُشكلة مع المخططات الهيكلية وهي الاختلاف في تدرجات الألوان وعمق السطور والخطّ المُستخدم، جميعها يُدرج ويُستخدم بدون تفكير، الأمر الّذي يجعل من المخطط الهيكلي صعب الفهم والقراءة، ويجعل مني أتساءل في معظم الأحيان: هل التغيير من الخط المُستخدم هنا متعمّد؟ هل هذه الرقعة (label) هي أكبر حجمًا لأنّها أكثر أهميّة؟ وغيره من هذه الأسئلة، ولتجنب هذه المشكلة، من المُستحسن استخدام مجموعة محدّدة من الألوان، (ربّما من 3-5 من اللون الرمادي) ونوعين من الخطوط، واستخدام عناصر HTML الافتراضيّة، مع العلم أنّ هذا قد يؤدي إلى مخططات هيكلية باهتة، ولكن يجب أنّ يُعلم أنّ جميع المخططات الهيكلية ينتهي الأمر بها إلى سهلة المهملات، فليس الغرض منها إبهار الزوّار، إنما الغرض هو تصميم برمجيّة قابلة للاستخدام، أمّا المخطط الهيكلي الخلّاب فهو مضيعة للوقت. إن من الأمور المُهمّة الّتي يجب التركيز عليها هي نقطة الانطلاق، فالبدء مع خطّ أسود، يعني إمكانيّة تكبير وتعريض الخط فقط، الأمر الّذي قد يؤدي إلى جعل المخطط الهيكلي صارخ وحاد بالنسبة لبقيّة الأجزاء، ولكن البدء مع خطّ رمادي، يسمح للمُصمّم بزيادة العمق اللوني وتخفيفه بطبيعة الحال. السرعة والاستكشاف إن الغرض من التصميم ذو الدقّة المُنخفضة ليس التلوين والتحسين، ولكن الغرض هو استكشاف الحلّ الأنسب، حيثُ سيظهر العديد من الحلول، وفقط عن طريق استكشاف بعضها، وصفهم أمام الأعين سيمكّن المُصمّم من التقرير أيها سيَعمل بالشكل الأمثل للمشروع، لقد شرح كانيد بولز كيف يواجه لاعبي الشطرنج تحديًّا مُشابهًا، حيثُ في بداية اللعب، يوجد الكثير من الخيارات، بعضها يُمكن استبعاده عن طريق الغريزة أو عبر الخبرة والممارسة، وتُستكشف باقي الحلول ذهنيًّا، ولذلك سيُعجب المُصمّمون المبتدؤون بفكرتهم الأولى، ويتعلّقون بها ويبذلون جهدًا كبيرًا في تنفيذها مهما تتطلّب الأمر، ولقد وصفَ آندي روتلدج هذه الظاهرة بظاهرة "ملك الخواتم" وذلك في مقالة أكثر من رائعة بعنوان "كنزي العزيز". إن لم يكن بالإمكان تنفيذ التصوّر بسرعة، إذًا فإن التنفيذ يتمّ على الدقّة الخاطئة، فإن كان المخطط الهيكلي يعمل على تقديم نسخة ذات التدرّج الرمادي (grayscale) فقط مما قد تقرّر بناؤه بالفعل، فذلك مضيعة للوقت. النسخة المُطابقة تعطي نتائج أكثر واقعيّة تصدر الأخطاء عادةً من المُصممين الذين ليس لديهم تصوّر مُسبق للمحتوى، فإن كان المشروع يتضمّن معرضًا للصور، فمن المفترض رؤية الصور قبل اتخاذ القرار في إدراجها، والاهتمام بها كميّزة رئيسيّة أو عدم إبرازها لعدم أهميتها، وبشكل مُشابه، إن كان التصميم مبني بالأساس لعرض البيانات، فيجب معرفة ماهيّة هذه البيانات، مع العلم أنّ استخدام البيانات الوهميّة في التصميم الأوّلي تَدفع بالمُصمّم إلى تصاميم مخططات هيكلية تكون فيها العناوين والنصوص مُتناسقة بمثاليّة كبيرة، والصور مُتجاوبة مع التصميم ككل، والأرقام مُلائمة داخل صناديق صغيرة لا تتخطاها، طبعًا هذا أبعد ما يكون عن الواقع، بعبارة أخرى، إن هلاك واجهة المُستخدم يبدأ بالعنوان "لوريم أيبسزم". يجب إتقان التقنيّة المُستخدمة يُمكن للتصميم الخلّاب أنّ يُقدّم حلًّا سيّئًا للمشروع، فإن كان التصميم يتضمّن عناصر HTML مخصّصة، وأزرارًا جذّابة وقوائم مُنسدلة، وحقل بحث ديناميكي بتقنيّة أجاكس، فمن الضروري على المُصمّم أنّ يدرك أنّ لكل مشروع ميزانيّة مُختلفة عن الآخر، وخاصّة إن كان المُصمّم يعرف أساسيّات HTML و CSS و جافا سكريبت، فهو بالتأكيد يعرف ما يُتطلّب لاختبار هذه العناصر على المُتصفحات، وبالتالي على المُصمم أنّ يفكّر مليًّا فيما يُدرج في المخطط الهيكلي، طبعًا قد لا يكون هذا العنصر بذلك التعقيد، وقد يكون متوفّرًا في مكتبة jQuery، ولكن على المصمم أنّ يدرك أنّه لا يوجد شيء يدعى "مجرّد تعديل بسيط"، طبعًا هذا لا يعني عدم إدراج عناصر تفاعليّة في المخطط الهيكلي، ولكن يجب على المُصمم دائمًا معرفة تكلفة كل عنصر يُدرج في التصميم، فبعض المواقع قد تتطلّب هذا النوع من التعقيد، فمثلًا الاهتمام في عنصر اختيار التاريخ قد يكون أمرًا جوهريًا ومطلب أساسي في بعض المواقع، ومن المنطقي جدًا التركيز عليه، ولكن عندما يكون عنصر اختيار التاريخ من أجل "تاريخ الميلاد"، فمن الأفضل استغلال هذا الوقت على أمرٍ أكثر أهميّة فليعمل ما يعمل إن الهدف الرئيسي هو تقديم شيء عمليّ، وليس شيء مثالي، فلا يُبهر بالجماليّات سوء مُصمّمي تجربة المُستخدم UI، بمعنى إن تمّ الرسم والتخطيط باستخدام الورق فقط وبخط اليد، وكان المُصمّم واثقًا من تقديم الحلّ المطلوب، وذلك بتوافق تصميمه مع البيانات المعُطاة من قبل العميل، وكان هذا الرسم رسمًا واضحًا لجميع فريق العمل، فإذًا لا قيمة من إعادة تمثيل هذا الرسم باستخدام المخطط الهيكلي، بمعنى آخر على المُصمّم أنّ يكون عمليًّا، وأن يهتم بتقديم المطلوب وأن يَبتعد عن تصميم تصميمات مثاليّة . مصادر إضافيّةإن جميع المواضيع السابقة هي من واقع الخبرة ونتاج طويل من والتجربة والخطأ، ولتكتمل الصورة، هذه بعض المقالات الهامّة، والّتي ترتبط بالموضوع بشكل مُباشر وغير مُباشر: هيكلة وتوزيع محتوى صفحات الويب.ما هو النّظام اللّوني.أساسيات الوزن البصري في التّصميم الجرافيكي.الاختلافات ما بين التصاميم المسطّحة (flat design) و التصاميم المادية (material design).مدخل إلى عالم الخُطوط.مصادر أجنبية: Gestalt Principles – Andy Rutledge.Good design faster – Leah Buley.Sketching User Experiences – Bill Buxton.ترجمة وبتصرّف للمقال Wireframing for Web Apps.