أساسيات تصميم عناصر التنقل في صفحات الويب

إن آخر ما تريد سماعه من المستخدم لديك عند دخوله إلى موقعك لأول مرة هو "لحظة، ما الذي علي أن أفعله هنا بالضبط؟!"

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

إنّ توجّهًا كهذا لا يمكن أن ينتهي نهاية حيدة، وهو بالتأكيد ليس الطريق السليم لتصميم عناصر التنقلات.

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

ولهذا، فما ستقرأه هنا هو دليل موجز: أساسيّات تصميم عناصر التنقلات. أول ما سنركز عليه هنا هو فصل الأشياء الضرورية للتنقل السليم عن غير الهامّة.

ونبدأ بما يلي:

إن الانطباع الأول هو ما يحدد النجاح أو الخسارة

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

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

يبدأ التنقل الجيد بهيكلية جيدة للمحتوى

في الواقع الأمر سهل:

المحتوى أولًا، ثم القوائم.

يجب ان لا يكون تصميم عناصر التنقلات فكرة متأخرة، بل أن يكون نتيجة مباشرة لهيكلية المعلومات التي على الموقع.

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

دائما فكر بأهدافك أنت

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

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

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

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

خمن طريقة تفكير المستخدم

يتعلق هذا القسم من المقال بتخمين طريقة تفكير المستخدِم عند زيارته لموقعك. بشكل عام، هل يعرف الزوار ما يبحثون عنه؟ أم عليك أن تساعدهم في ذلك؟

دعني أعرض عليك مثالين هنا:

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

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

ولهذا، فعليك أن تصمم عناصر التنقلات في موقعك بناءً على توقعاتك لطريقة تفكير الزائر. إذا كان هناك انفصال (أيّ، لم تكن هناك تنقلات وروابط مناسبة)، فلن تكون لدى الزائر أدنى فكرة عن ما عليه فعله في موقعك، أو لن يكون بإمكانه تلقي أيّ من المحتوى.

يجب أن تكون التنقلات مألوفة

من أكثر الأخطاء التي يقع فيها المصممون شيوعًا عند بنائهم لموقع هو أن يكونوا مبدعين أكثر من اللازم في توجهاتهم المتعلقة بالتنقلات. رغم صعوبة مقاومة الإبداع -خاصة أنّ أغلب أجزاء بناء الموقع تتطلبه- إلّا أنه من الأفضل العمل بأساليب مجرّبة عندما يتعلق الأمر بتصميم التنقلات.

وفوق كل شيء، يجب أن لا يكون التنقل مُربكًا. يجب أن يتمكن جميع المستخدمين من تمييز القوائم بمجرد رؤيتها، دون أن يضطروا للبحث عنها. وبمناسبة الحديث عن ذلك، فهذا ليس رأيي وحدي. لقد طلبت من Robert Hapiuc -وهو مصمم في CodeinWP blog- أن يشاركني رأيه فيما يراها الأخطاء الأكثر شيوعًا التي يقع فيها مصممو المواقع عندما يتعلق الأمر بتصميم التنقلات. وفيما يلي ما قال:

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

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

والأهم من هذا كلّه:

لا تتجاهل الأعراف المتبعة في الشبكة العنكبوتية

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

لذا، فالقاعدة الرئيسيّة هي الالتزام بالأعراف الموجودة، وجعلها توافق تصميمك، ولا تعد اختراع العجلة دون داعٍ.

أظهر المحتوى الرئيسي بما يكفي

بناء تنقلاتك حول المحتوى الرئيسيّ للموقع بداية جيدة.

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

لا تقع في فخّ بناء تنقلاتك حول القطاعات أو التصنيفات الرئيسيّة للمحتوى.

قد يكون توجه كهذا قد يكون جيدًا لموقع دليل (مثل Alltop)، ولكنه لن يكون فعالًا على المدى البعيد لمواقع من نوع آخر. وهذا لأن تصميم عناصر التنقلات بناء على التصنيفات وحدها يتطلب أن يكون الزائر على اطلاع على ما يُتوقَّع أن يجد في كل تصنيف.

(هناك مشكلة مشابهة في القوائم المنسدلة، والتي سنأتي على ذكرها لاحقًا في هذا المقال).

أي نوع من عناصر التنقلات أستخدم؟

هل نوع عناصر التنقلات التي تستخدمها مهم؟ هل هناك ميزة هامّة لاستخدام شريط التنقل العلوي (top nav. menus) بدلًا من القوائم المنسدلة الكبيرة (mega menus)؟ هل القوائم المنسدلة هي الطريقة السليمة؟

كالعادة -وكم أكره أن أقولها- هذا يعتمد على عدة أمور.

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

أشرطة التنقل العلوية (top nav bars)

هي أداة التنقل الأكثر شيوعًا وربما الأكثر عمليّة. وأما عن عيبها الوحيد، فهو أنها تتسع فقط لقدر محدّد من العناصر. ولكن لا يشترط أن يكون هذا عيبًا. يتطلب استخدامك لشريط الانتقال العلويّ أن تراجع أولوياتك، بحيث تختار فقط أهم العناصر لتعرضها في الشريط العلويّ. كما وتجعل هذه الأشرطة اختيارات المستخدم أسهل. وفي النهاية، يذكرني هذا الكلام بالمثل العربيّ القائل "خير الكلام ما قلّ ودلّ"، والمثل الأجنبي القائل "less is more”.

ويشير Dragos Bubu -وهو مصمم في ThemeIsle- أيضًا إلى قضية وجود أشياء أكثر من اللازم ضمن عناصر التنقلات الأساسيّة في حديثه عن الأخطاء الأساسيّة التي يقع فيها مصممو المواقع عند العمل على عناصر التنقلات في المواقع، إذ يقول:

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

القوائم الجانبية

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

الجانب السلبي لهذه القوائم هو أنها يمكن أن تجذب قدرًا كبيرًا من اهتمام الزائر وتحدّ من ظهور وجاذبيّة الجزء الخاصّ بالمحتوى الرئيسيّ.

وفي النهاية، لدينا نوع القوائم الأكثر إثارة للجدل، وهو القوائم المنسدلة (drop-down)

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

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

اسع إلى النجاح على المدى البعيد

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

ما التالي؟

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

أرى أن ندع الباقي إلى يوم آخَر، ونتوقف هنا لنسمح لعقلنا أن يتشرّب هذه المعلومات.

ما رأيك؟ وما هي استراتيجيتك في تصميم عناصر تنقلات فعالة تقوم بمهمتها على أكمل وجه؟

ترجمة -وبتصرف- للمقال: Navigation Design 101 لصاحبته Karol K.