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

بعد أن حدّدنا أهدافنا، وأنهينا أبحاثنا عن المستخدمين، وأسّسنا هندسة المعلومات، حان الوقت للبدء بالتّصميم! فهرس سلسلة مدخل إلى تجربة المستخدم: مدخل إلى تجربة المستخدم User Experience فهم ودراسة المستخدمين في مجال تجربة المستخدم دراسة الشريحة المستهدفة في مجال تجربة المستخدم كيفية التصميم للأجهزة المختلفة هندسة المعلومات في تجربة المستخدم تعرف على أنماط التصميم في مجال تجربة المستخدم أشياء لا يمكن اعتبارها رسوما تخطيطية (Wireframes) في مجال تجربة المستخدم تعرف على الرسوم التخطيطية (Wireframes) في مجال تجربة المستخدم مفهوم الثقل المرئي (Visual Weight) والألوان في مجال تجربة المستخدم التكرار ومخالفة الأنماط في مجال تجربة المستخدم المحاذاة والقرب في مجال تجربة المستخدم تعرف على أساليب مسح الواجهة والتراتب المرئي في مجال تجربة المستخدم أساليب الإطلاع في مجال تجربة المستخدم: التصفح، البحث والاكتشاف تصميم هيكل صفحة الويب والعناصر الأساسية في مجال تجربة المستخدم (هذا الدرس) الأزرار، النماذج والدعوات إلى الإجراء في مجال تجربة المستخدم استخدام علم النفس في مجال تجربة المستخدم لتكييف المستخدم وإقناعه كيف تغير الخبرة من تجربة المستخدم؟ تصميم تجربة المستخدم من خلال بيانات وإحصائيات المستخدمين تعرف على أنواع المخططات الإحصائية في مجال تجربة المستخدم اختبارات أ/ب (A/B Test) في مجال تجربة المستخدم هيكل الصفحة قد يكون من المُغري العمل على تنفيذ الرّسوم التّخطيطيّة واحدًا تلو الآخر، لكنّها طريقة غير فعّالة، بل ينبغي البدء بالأجزاء الكبيرة ثم إضافة التّفاصيل الصّغيرة أثناء العمل، والأجزاء الكبيرة هنا هي العناصر الّتي ستظهر في جميع الصّفحات، أي عناصر التّنقّل (navigation) وتذييل الصّفحة (footer). التذييل عادة ما يكون قائمة من الرّوابط الثّابتة ذات الموضوع العامّ وغير المهمّة بحيث لا تستحقّ أن توضع في القائمة الرئيسيّة. بعض المواقع تعتني أشد الاعتناء بمظهر التّذييل، وهذا أمرٌ حسن، ولكن إن احتوى التّذييل على روابط يحتاجها المستخدم لإنجاز مهمّته على الموقع، فالتّذييل ليس المكان المناسب لهذه الرّوابط. اسأل نفسك: "هل سيحتوي الموقع على صفحات فيها تمريرٌ غير منتهٍ (infinite scrolling)؟ وإن كانت الإجابة نعم، فتأكّد أنّ كلّ ما يحويه التّذييل متوفّر أيضًا في مكان آخر، فإن كان حقل اختيار اللّغة موجودًا في ذيل الصّفحة، وكلّما حاول المستخدم نقره ابتعد عنه للأسفل، فأنت مصمّم فاشل! عناصر التنقل هناك نوعان على الأقل من القوائم: رئيسيّة وفرعيّة. القائمة الرئيسيّة: إن كنت قد أسّست هندسة المعلومات بصورة صحيحة، فأنت تعرف الآن ما يجب أن تحويه هذه القائمة، فهي المستوى الأول من الرّوابط في خريطة الموقع (تحت الصّفحة الرئيسيّة). يجب أن يكون ترتيب عناصر القائمة من اليسار إلى اليمين (أو من اليمين إلى اليسار في حالة العربية مثلا) أو من أسفل إلى أعلى بحسب شعبيّة العنصر (وهذا يُقاس باهتمام المستخدمين، وليس بما يحلو لك!). إن كنت تصنع قائمة جديدة من الصّفر، افعل افضل ما يمكنك، ثم أخبر المُطوّرين أنّك ستحتاج لإعادة ترتيبها لاحقًا، وعندما يزداد عدد الزّوّار بصورة معتبرة، ادرس شعبيّة العناصر وأصلح الترتيب إن دعت الحاجة. القائمة الفرعيّة: وهي قائمة بالصّفحات الّتي تندرج تحت الصّفحة الحاليّة الّتي يراها المستخدم في خريطة الموقع، (أخبرني الحقيقة: لقد رسمت خريطة الموقع، صحيح؟). النّقطة الأكثر أهمّيّة في القوائم الفرعيّة هي أنّها يجب أن تكون في الحالات المثاليّة في الموضع ذاته في كلّ صفحة، حتّى وإن تغيّر الرّوابط، وهذا يسمح للمستخدمين بإيجادها بسرعة. لا تجعل القوائم الفرعيّة ضخمة يُفاجئني بعض المصمّمين عندما يحاولون إقناعي بقائمة فرعيّة عملاقة، فذلك يعني أن هندسة المعلومات (ومهندسها) في غاية السوء. رمي كلّ شيء في قائمة واحدة هو أكثر التّصاميم كسلًا في الكون، كن أفضل من ذلك. وجود هذا العدد الكبير من الرّوابط في القائمة يعني أنّه يجب التّخلّي عن بعضها! الخلاصة: أنشئ عناصر التنقل وتذييل جميع الصّفحات في تطبيقك قبل البدء بالمحتوى، ستكون لي شاكرًا فيما بعد. الطية (Fold) الطّيّة في التّصميم تعني الجزء من الصّفحة الّذي يراه المستخدم قبل أن يبدأ التمرير للأسفل، وهناك الكثير من الأفكار الخاطئة عنها. كلّ شيء فوق الطّيّة سيتلقّى أكبر قدر من المُشاهدات، ولكن يمكن (بحسب الدّراسات) أن تتوقّع نسبة من المستخدمين بين 60 و80 في المئة سيُمرّرون للأسفل إن كانوا يظنّون أنّهم سيجدون شيئًا مفيدًا. كلّ ما فوق الطّيّة يجب أن يُعلم المُستخدمين بما تحته، فإن لم يعلم المستخدم ما سيجده أدناها، فقد لا يتكلّف عناء التمرير. كن حذرًا: يشيع اليوم استخدام خلفيّة كبيرة على كامل القسم العلويّ من الصّفحة، فإن بدت الصّفحة وكأنّها تنتهي عند الطّيّة، فقد يغادر المُستخدم الموقع بدل أن يمرّر الصّفحة، وإن اضطررت لإضافة رسالة تخبره بأن "يمرّر للأسفل"، فتصميمك ضعيف. الصور يُعامل كثيرٌ من مصمّمي تجربة المُستخدم الصّور على أنّها بلا وظيفة، ولكنّ الصّور كثيرًا ما تقود عيني المُستخدم، ولذا يجب أن تفكّر فيها. بشكل خاصّ، تجذب صور النّاس الانتباه أكثر من أيّ شيء آخر في الواجهة. وكقاعدة عامّة، كلّما عزّزت الصّورة مشاعر المستخدم، كان تفاعله أكبر. نصيحة: في صور النّاس، حاول جعل الشّخص في الصّورة ينظر بالاتّجاه الّذي تريد المُستخدم أن ينظر نحوه، فهذا يصنع فرقًا كبيرًا. كلا الخريطتين الحراريّتين أعلاه تظهران التّخطيط نفسه، لكن إحداها تجعل الطّفل ينظر للعنوان، والأخرى تجعله ينظر نحو المُستخدم. تُظهر الخريطتان أن المُستخدمين ركّزوا على وجه الطّفل في الصّورة كثيرًا، لكن الثّانية جذبت انتباهًا أكبر للمحتوى النّصّي وصورة المُنتج والشّاعر. أي الصّورتين ستختار؟ العناوين بالإضافة لصور النّاس، تنجذب العينان نحو النّصوص الكبيرة عالية التّباين في الواجهة، فعندما تضيف عنوانًا كبيرًا إلى تصميمك، فهذا يعني أنّك اخترت الموضع الّذي سيبدأ المُستخدم مسح الصّفحة بعينيه منه. ولهذا ينبغي محاذاة العنوان مع النّص الأكثر أهمّية أسفله، فلو كان هذا المُحتوى غير مهمّ لجذب الانتباه بغير فائدة، وصرفه عن محتوى قد يكون أهمّ، ولو لم يُحاذَ النّص والعنوان لبحث المُستخدم عن نقطة أخرى يُركّز نظره عليها بعد قراءة العنوان. الخلاصة: ضع شيئًا يُركّز المستخدم عليه قبل أن يُمرّر الصّفحة. اجعل إمكانيّة التّمرير واضحة. اختر صور تثير المشاعر وتوجّه عينيّ المُستخدم. استفد من العناوين بتوجيه المستخدمين إلى المُحتوى المهمّ. محور التفاعل من أكثر الأسئلة شيوعًا في تصميم تجربة المُستخدم السؤال عن موضع الأزرار، هل تكون على اليمين أم على اليسار؟ الجواب ليس مُطلقًا، فالأمر يعتمد على موقع "الحوافّ" المرئيّة الّتي صنعتها. محور التّفاعل هو الحافّة التّخيليّة الّتي تتبعها عينك بصورة طبيعيّة، والعناصر الأقرب إلى محور التّفاعل تكون أكثر ظهورًا للمُستخدم. الفكرة بسيطة جدًّا: اهتمام الإنسان محدود، ولا يمكنه التّركيز إلا على شيء واحد في لحظة واحدة، فلو ركّز على جزء من المحتوى، ستكون الأجزاء الأخرى غير ظاهرة عمليًّا.إن لم تصدّقني، فشاهد هذا. اعثر على الحواف ستستخدم مبادئ التّصميم المرئيّ الّتي تعلّمناها في كل تصميماتك، فإذا توقّفت قليلًا ونظرت إلى تخطيط الصّفحة، ستجد أنّك خلقت "خطوطًا" أو "حوافّ" أو "قطعًا" في الصّفحة. قد تتشكّل هذه الحوافّ من محاذاة النّصوص أو الصّور أو تجميع العناصر في صفّ. كلّ حافّة هي محور تفاعل، ستتبع العين هذا المحور حتى ينقطع أو ينتهي. تركيز المُستخدم يكون مُنصبًّا على محور التّفاعل دومًا، وعندما يصرف اهتمامه عنه، فإنّه ينتقل إلى محور آخر. إن أردت أن ينقر الزُوار على شيء ما، فضعه على محور التّفاعل أو قربه، والعكس بالعكس. ترجمة -وبتصرّف- للدّروس Page Framework و The Fold, Images, & Headlines و The Axis of Interaction من سلسلة Daily UX Crash Course لصاحبها Joel Marsh. اقرأ أيضًا النسخة العربية الكاملة لكتاب مدخل إلى تجربة المستخدم (User Experience - UX) 1.0.0 عشر مبادئ رئيسية لتصميم تجربة مستخدم على الهواتف الذكية التصميم للهواتف: تصميم الإجراءات التفاعلية مهام مصممي تجربة المستخدم المبادئ الخمسة الأساسية في قابلية الاستخدام (Usability)

أنا متأكد تمامًا من أنك تفهم أهمية قائمة التنقل في موقع الويب وارتباطها بمشاركة الموقع فيما يلي عشر نصائح لجعل تجربة المستخدم UX سلسلة وأكثر قابلية للاستخدام. تعد إمكانية التنقل داخل موقعك جزءًا مهمًا لأي موقع ويب من أيًا كان مجاله أو نشاطه التجاري. يُعد التنقل هذا هو الطريقة الوحيدة للتعرف على منتجاتك وخدماتك. لن يعمل محتوى التنقل الخاص بموقعك جيدًا مع جميع روابط الصفحات، إذ يجب أن تكون حذرًا في الشكل الذي سيظهر به تنقلك وما الذي سيتضمنه. إذا كنت مرتبكًا أو تبحث عن بعض الاقتراحات حول ما يجب مراعاته عند تصميم قائمة التنقل في الموقع، فهناك ثماني نقاط لمساعدتك! 1. التنقل الثابت يعد وجود شريط تنقل ثابت في أعلى صفحة الموقع مفيدًا جدًا للزائرين حيث يمنحهم سهولة حقيقة عند التنقل في موقع الويب الخاص بك. بفرض أن موقعك يحتوي شريط تنقل أفقي، فسيمرر زائر الموقع وصولًا لنهاية الصفحة ثم قد يريد بعد ذلك إلقاء نظرة على صفحة «حول الموقع» (About Our Website)! سيحتاج آنذاك إلى التمرير طويلًا للأعلى للعثور على رابط الصفحة المنشودة .القائمة الثابتة في أعلى الصفحة تساعدك على حل هذه المشكلة. يرجى التأكد من ظهور عناصر قائمة التنقل الأفقية في أعلى الصفحة كما هي على جميع أحجام الشاشة المختلفة. أنا أتحدث عن مختلف أحجام شاشات الكمبيوتر والحواسيب المحمولة .يساعدك توحيد التنقل في موقعك على توفير تجربة متسقة على جميع الأجهزة. 2. الاهتمام بعملية التنقل على نسخة الهاتف المحمول لا يمكنك تجاهل زائري الجوال لموقعك. وفي عصر تصميم مواقع الويب للهواتف المحمولة أولًا، كانت الأطر سريعة الاستجابة مثل bootstrap توجهك لإيلاء الاهتمام المناسب لنظام التنقل في الأجهزة المحمولة لموقع الويب الخاص بك. الجوانب السلبية الوحيدة لنظام التنقل في موقع الويب خاصتك عبر الأجهزة المحمولة هي أنهم لا يحصلون على دعم الحومان (hover). لذلك، إذا كنت قد كتبت استعلام الوسائط (media query) بطريقة تعتمد على التنقل مع تأثيرات الحومان (hover)، قد تبدو موحدة على الأجهزة المحمولة ولكنها لن تؤدي نفس العمل. في حين أن إطار العمل bootstrap لديه دعمًا جيدًا لنظام التنقل لكل من عرض الهاتف المحمول والحاسوب. مع ذلك فإنه يحتوي على أنماط جامدة. تأكد أثناء بنائك نظام التنقل الخاص بموقعك عدم مبالغتك في استخدام شيفرة JavaScript التي قد تعطي للمستخدمين تأثيرًا مرئيًا رائعًا ولكنها تسبب صعوبة لبرامج الزحف (crawlers) لمثل Googlebot عند الزحف إلى نظام التنقل الخاص بموقعك وفهمه. إن جعل نظام التنقل الخاص بموقعك مستحيل الزحف هو أسوأ شيء يمكنك القيام به أثناء بنائه. على الرغم من أن تجربة المستخدم هي أهم أولوياتنا، إلا أننا بالتأكيد لا نستطيع تجاهل هذه القضية. 3. وضع شريط للبحث بقدر ما يتعلق الأمر بتجربة المستخدم، فإن جعل موقعك قابلاً للبحث هو أفضل شيء يمكنك القيام به على الإطلاق في موقعك. إذا كان موقعك يحتوي على الكثير من الصفحات، فيجب أن يكون في أولويتك أن تجعله قابلًا للبحث. كان هناك دائمًا تردد حول أين يجب أن أضع شريط البحث؟ كيف يمكنني ملاحظة مربع البحث الخاص بي دون تشتيت انتباه المستخدم أو التأثير على تجربة المستخدم؟ لقد قرأت مقالتين تقترحان إبقاء مربع البحث مخفيًا خلف أيقونة بارزة يجلب النقر عليها لك مربع البحث، وسيؤدي إدخال استعلام البحث وطلبه إلى إنجاز المهمة. وقرأت أيضًا بعض الدراسات حول إخفاء مربع البحث خلف أيقونة بارزة سيؤدي إلى إرباك المستخدمين حول كيفية البحث في موقع الويب هذا وماذا سيفعل هذا الرمز! بالإضافة إلى ذلك، ساهمت هذه القضية في عدد أقل من عمليات البحث في بعض مواقع الويب. لذا، أقترح أن يكون لديك مربع بحث مرئي في نظام التنقل الخاص بك، لا تخفيه في أي مكان لتوفير مساحة قليلة من البكسلات، وإذا أردت أن يكون مربع البحث الخاص بك ملفتًا للمستخدمين، يمكنك وضعه على الجانب الأيسر من التنقل، تمامًا مثل Facebook و YouTube! 4. قائمة أفضل تنظيما قد يكون لديك الكثير من المنتجات أو الخدمات لتضمينها في تصفح موقع الويب الخاص بك. سيكون من الجيد أن تتمكن من تنظيمها وفق ترتيب ما. إذا كان لديك عددًا كبيرًا من العناصر للتنقل بينها في موقع الويب الخاص بك، فيمكنك التفكير في بناء قائمة ضخمة لتجميع عناصر القائمة التي لها نفس الأصل معًا. كما لو كنت وكالة إنشاء تقدم خدمات تصميم متنوعة من الرسوم والويب وتطبيقات الهاتف المحمول وغيرها الكثير، ثم قد تفكر في تصميم الجرافيك كفئة رئيسية لك تحوي خدمات مثل تصميم الكتب، وتصميم المنشورات، وتصميم الشعارات . تجميع الأشياء تجعل القراءة السريعة للزائرين سهلة عند التنقل. بالإضافة إلى ذلك، يساعدهم في تحديد موقع العناصر المطلوبة فقط من خلال النظر في تصنيف المجموعة. هذا يجعل القراءة السريعة والبحث سهلًا بعض الشيء. أود أن أقترح عليك أن تتجنب العدد الكبير جدًا من عناصر القائمة الفرعية. إن امتلاك قائمة يصل عدد عناصرها الفرعية إلى سبعة عناصر يُسهِّل على الزائرين للموقع فهم العنصر (العناصر) المطلوبة والعثور عليها بسهولة. ضع في حسبانك قاعدة واحدة وهي أنَّ زوار موقعك سيهتمون بأول عنصر في القائمة وآخر عنصر فيها. تأكد من وضع الروابط على كلا موقع العنصريين. إن وجود زر التحقق / رابط الذي يميز نفسه مع عناصر التنقل الأخرى سيزيد من فرصة النقر عليه. 5. القائمة العمودية حسنًا، أعرف أن القائمة الرأسية هي طريقة المدرسة القديمة لتنظيم روابط التنقل. انتظر أنا لا أتحدث عن استبدال قائمتك الأفقية الرائعة بقائمة رأسية. أنا أقترح عليك أن يكون لديك قائمة رأسية لصفحاتك الداخلية حيث تحتاج إلى إظهار بعض الخيارات المتداخلة. هناك بعض الحالات التي تحتاج فيها إلى إظهار قائمة إضافية للصفحة. وجود قائمة أفقية أخرى سيؤدي بالتأكيد إلى زعزعة تجربة المستخدم الخاصة بك. هل أنت على دراية بتصاميم مواقع التجارة الإلكترونية؟ هل شاهدت تصميم الصفحة عندما تضغط على قسم الحاسوب؟ أنا أتحدث عن القائمة الرأسية نفسها للصفحات الداخلية حيث يمكنك عرض خيارات إضافية، وروابط، ومعلومات، وعناصر أخرى. يساعدك هذا على جعل التنقل في موقع الويب الخاص بك منظمًا وواضحًا. سيشاهد الزوار القائمة الرأسية فقط عند زيارة الصفحات الداخلية. 6. تقييم عناصر القائمة يوجد سوء فهم في أن جميع الزوار يأتون إلى موقع الويب الخاص بك من خلال الصفحة الرئيسية. تحقق من تحليلاتك، إذ لديك نقاط دخول متعددة للموقع. بمعنى أن عناصر التنقل ليست هي المكان الذي سيذهب منه زائرو موقعك إلى صفحات المنتج أو الخدمات الأكثر تفصيلًا. نتيجة البحث الأساسية هي من تنقلهم إلى تلك الصفحات. لذلك، ليس عليك دائمًا تضمين كل رابط / صفحة في التنقل الخاص بموقعك. احتفظ فقط بالعناصر المهمة حقًا لعملك والعناصر التي يُنقَرعليها عند التنقل. قد تكون الأداة Google Analytics أفضل طريقة لك لمعرفة روابط التنقل التي يتم النقر عليها. وترشِّح الأداة Goto Behavio Filter النتيجة التي تبدأ بـ / أو الصفحة الرئيسية. يساعدك ذلك على فهم ما هي عناصر القائمة التي يهتم بها زوار موقعك. طبّق نفس الشيء على الصفحات التي تتحكم في حركة سير موقع الويب الخاص بك للحصول على فكرة أفضل عما يجب الاحتفاظ به وما الذي يجب تغييره وتخطيه. بمجرد الانتهاء من هذا التدقيق، عدِّل قائمة التنقل. سيكون للتنقل الجديد عناصر أقل بكثير، وفوضى أقل، وقائمة تنقل أفضل تنظيمًا. 7. تجنب الكثير من التشعبات كما هو مذكور في النقطة أعلاه، احتفظ بالروابط المهمة فقط بناءً على سلوك الزوار. إنها تساعدك على جعل الأمور واضحة. بالإضافة إلى ذلك، تجنب وجود الكثير من تداخل التصنيفات والفئات الفرعية والعناصر. وجود مستوى واحد من التداخل مثل الصنف الأب -> العناصر، سوف يفي بالغرض بشكل جيد للغاية. 8. أشياء متنوعة بسيطة هناك بعض الأشياء المتنوعة التي يمكنك أخذها بالحسبان أثناء تصميم قائمة التنقل وهي: تجنب التصاميم الغريبة تجنب تصميم قائمة تنقل خاصة بموقعك تصميمًا غريبًا وفريدًا فقط من أجل أن تكون مختلفًا. إن إنشاء وتصميم التنقل في أضيق الحدود يختلف عن طريقة إنشاء التنقل غريب المظهر لكسب التميز. لا تفعل ذلك. قد تفهمها وتحبها، لكن زوار موقع الويب خاصتك لن يكونوا بنفس مستوى الإدراك هذا. أن تكون متسقة الاتساق يعطي طابع الانتظام .استخدم قائمة التنقل نفسها في جميع صفحات موقع الويب الخاص بك. سيجعل زائرك أكثر دراية به وسيجدون أنه من السهل تحديد العناصر المطلوبة. اجعلها واضحة تصويرية كن واضحًا عند اختيار اسم عنصر التنقل. عند النقر عليه، يجب أن تفتح الصفحة التي قصدتها في الاسم. تجنب استخدام الأسماء العامة مثل «منتجات وخدمات»، كما في النصيحة السادسة في هذه المقالة احصل على اسم وصفي للعناصر مثل تصميم الشعار، وإصلاح شاشة الجوال، وحلول تخطيط موارد المؤسسات، وربط بوابة الدفع. قم بتجريبها أعلم أنك تستخدم بعض إطارات العمل الموثوقة مثل bootstrap لتصميم موقع الويب وقائمة التنقل. لكن احتفظ ببعض الوقت واختبر قائمة التنقل على جميع متصفحات الويب الرئيسية. تحقق من الوظيفة على كل من إصدار سطح المكتب من المتصفح وكذلك إصدارات الأجهزة المحمولة. الخلاصة لا يتطلب الأمر سوى استخدام بيانات موقع الويب والأفكار الإبداعية وبعض الاهتمامات الشائعة لإنشاء قائمة تنقل قابلة للاستخدام بشكل جيد وجذابة للغاية. ستساعدك النقاط الثمانية التي تمت مناقشتها هنا في تحديد ما يجب القيام به مع قائمة التنقل الخاصة بك التالية. ترجمة -وبتصرف- للمقال Eight tips to make website navigation menu more usable لصاحبه Darshan