5 البدائل الذكية إلى قائمة همبرغر
مساحة الشاشة هي مورد ثمين على الجوال. ولمواجهة تحدي مساحة الشاشة الصغيرة مع الاستمرار في الوصول إلى الملاحة ، يعتمد المصممون في الغالب على إخفاء الملاحة خلف أيقونة هامبرغر ، وهو مثال ساطع على التنقل المخفي. في هذه المقالة ، سنرى لماذا يخلق التنقل المخفي UX سيئة وما هي البدائل المتاحة للمصممين.
لماذا القائمة همبرغر سيئة بالنسبة UX
على الجوّال ، يتم استخدام التنقل المرئي أكثر بـ 1.5 مرة من الهامبرغر
إذا كنت تعمل على منتجات رقمية ، فربما تكون قد قرأت بالفعل عشرات المقالات التي تصف كيفية تأثير قائمة الهمبرغر على الجوّال في مقاييس UX. الجانب السلبي الرئيسي هو انخفاض قابلية اكتشافه ، وهذا مدعوم بأرقام حقيقية. في الدراسات النوعية ، تم العثور على NNGroup أن التنقل المخفي أقل قابلية للاكتشاف من التنقل المرئي أو المرئي جزئيًا. هذا يعني أنه عند إخفاء التنقل ، يقل احتمال استخدام المستخدمين للتنقل. تعمل قوائم الطعام في همبرغر على خفض مستوى التفاعل وإبطاء عملية الاستكشاف وإرباك الأشخاص.
إذن ما الذي يجب أن نستخدمه بدلاً من ذلك؟
على الرغم من عدم وجود قاعدة صارمة لتطبيقات الجوال ومواقع الويب ، إلا أن التوصية العامة هي استخدام إما مرئي - حيث تظهر خيارات التنقل الرئيسية في شريط تنقل مرئي - أو التنقل بين الخيارات ، حيث تكون بعض خيارات التنقل الرئيسية مرئية. وبعضها مخفي تحت عنصر تفاعلي.
1. تبويب بار
إذا كان لديك عدد محدود من الوجهات عالية المستوى في موقعك على الويب أو تطبيقك ، فربما يكون التنقل المجدول هو الحل. عندما تكون إحدى القوائم مرئية في الأعلى أو الأسفل ، فإنها تعلن بشكل أساسي أن التنقل موجود وأن الأشخاص يمكنهم رؤية خيارات التنقل منذ البداية.
يبدو أن علامات التبويب هي أبسط أنماط التنقل. ومع ذلك ، يجب مراعاة بعض الأمور عند تصميم هذا النوع من التنقل:
- يتيح شريط Tab 5 خيارات تنقل أقل أو أقل لعرضها.
- يجب أن يكون أحد الخيارات دائمًا نشطًا ويجب تمييزه مرئيًا باستخدام ، على سبيل المثال ، استخدام لون متباين.
- يجب أن تكون علامة التبويب الأولى هي الصفحة الرئيسية ويجب أن يرتبط ترتيب علامات التبويب بأولويتها أو ترتيبها المنطقي في تدفق المستخدم.
- من الأفضل استخدام الرموز مع التصنيفات لكل خيار التنقل. تعمل الأيقونات بدون علامات على الإجراءات الشائعة فقط ، مثل رمز العدسة المكبرة للبحث وواجهات المستخدم التي يستخدمها المستخدمون بشكل متكرر (على سبيل المثال ، Instagram).
نصيحة: لتوفير مساحة الشاشة ، يمكن إخفاء / كشف شريط التنقل في التمرير إلى أسفل وإلى أعلى.
2. شريط التبويب مع خيار "المزيد"
عندما يكون لديك أكثر من 5 من الوجهات ذات المستوى الأعلى ، قد يكون الحل العملي هو عرض الأقسام الأربعة ذات الأولوية وحصولك على عنصر خامس كقائمة من الخيارات المتبقية.
مبادئ التصميم لهذا الحل هي نفسها أساسا لشريط التبويب. هناك استثناء واحد فقط: العنصر الأخير هو العنصر "المزيد".
يمكن استخدام العنصر "المزيد" كقائمة منسدلة أو حتى الارتباط بصفحة استكشاف منفصلة مع الأقسام المتبقية. من النظرة الأولى ، هذا الحل ليس أفضل بكثير من قائمة الهامبرغر ، لأنه يخفي أيضًا المحتوى ولا يشير تصنيفه كثيرًا إلى ما يخفي وراءه. إذا حددت خيارات التنقل بشكل صحيح ، فستحصل غالبية المستخدمين على 4 أو 5 خيارات تنقل أولوية عالية على الشاشة طوال الوقت حتى يتم تحسين تجربة التنقل لهم.
3. تدريجيا انهيار القائمة
القائمة القابلة للتدريج ، والتي تعرف أيضًا باسم نمط "الأولوية +" ، هي قائمة تتكيف مع عرض الشاشة. فهو يعرض أكبر قدر ممكن من التنقل ويضع كل شيء آخر تحت زر "أكثر". في الأساس ، هذا النمط هو إصدار متطور من التنقل "شريط Tab +" أكثر حيث يعتمد عدد خيارات التنقل المخفية خلف قائمة "المزيد" على مساحة الشاشة المتاحة. توفر مرونة هذا الحل تجربة مستخدم أفضل من "علامة التبويب" الثابتة "علامة التبويب + المزيد".
4. التنقل التمرير
على غرار الأنماط السابقة ، يعد هذا أسلوبًا آخر للقوائم الأطول. إذا كان لديك عدد من خيارات التنقل دون تمييز كبير في الأولويات ، على سبيل المثال الأنواع الموسيقية ، يمكنك إدراج جميع العناصر في عرض قابل للتمرير. بجعل القائمة قابلة للتمرير ، تسمح للمستخدمين بالانتقال من جانب إلى آخر.
الجانب السلبي لهذا الحل هو أنه لا يزال يتم عرض العناصر القليلة الأولى فقط دون التمرير ، وجميع العناصر المتبقية بعيدة عن النظر. ومع ذلك ، يعد هذا حلاً مقبولًا عندما يُتوقع من المستخدمين استكشاف المحتوى ، على سبيل المثال فئات الأخبار أو فئات الموسيقى أو في متجر عبر الإنترنت.
5. Full-Screen Navigation
بينما مع الأنماط الأخرى المذكورة في هذه المقالة ، فإن النضال هو تقليل المساحة التي تشغلها أنظمة الملاحة ، يأخذ نمط ملء الشاشة النهج المعاكس بالضبط. هذا النهج عادة ما يخصص الصفحة الرئيسية على وجه الحصر للملاحة. يقوم المستخدمون بالنقر أو التمرير بشكل تدريجي للكشف عن خيارات قائمة إضافية أثناء التمرير لأعلى ولأسفل.
يعمل هذا النمط بشكل جيد في مواقع الويب والتطبيقات المستندة إلى المهام والتوجيه ، خاصة عندما يميل المستخدمون إلى قصر أنفسهم على فرع واحد فقط من التسلسل الهرمي للملاحة أثناء جلسة واحدة. ويساعد توجيه المستخدمين من صفحات النظرة العامة العامة إلى صفحات التفاصيل على التأقلم مع ما يبحثون عنه والتركيز على المحتوى داخل قسم فردي.
تنقل كامل الشاشة في Yelp
باستخدام التنقل على كامل الشاشة ، يمكن للمصممين تنظيم أجزاء كبيرة من المعلومات بطريقة متماسكة وكشف المعلومات دون إرباك المستخدم. وبمجرد أن يتخذ المستخدم قراره بشأن مكان الانتقال ، يمكنك تخصيص مساحة الشاشة بأكملها للمحتوى.
استنتاج
باستخدام أنماط التنقل للجوّال ، لا يوجد حل واحد يناسب الجميع ؛ يعتمد دائمًا على منتجك وعلى المستخدمين وعلى السياق. ومع ذلك ، فإن أساس كل تصميم مبتكر تصميمًا جيدًا هو بنية المعلومات: بنية واضحة وأولويات وتصنيفات تستند إلى احتياجات المستخدمين. يجب أن تكون مساعدة المستخدمين في التنقل أولوية قصوى لكل مصمم التطبيقات. يجب أن يكون بإمكان المستخدمين لأول مرة والعائدين معرفة كيفية التنقل عبر تطبيقك بكل سهولة.