فائدة التنقل كيف تؤثر على تصميم تجربة المستخدم

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

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

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

كيف فائدة التنقل آثار UX

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

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

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

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

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

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

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

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

إذا ألقيت نظرة على لقطة الشاشة أدناه ، يمكنك أن ترى أن The New York Times تبلغ المستخدمين بتوافر 3 إصدارات مختلفة: أمريكي, دولي, و صينى, وأيضا تمكنهم من التبديل بسرعة بين الثلاثة. يوضح هذا المثال الرائع للملاحة الذكية للمستخدمين خيارات أقل وضوحًا ربما لن يجدوها بمفردهم بطريقة غير راقية وأنيقة.

العثور على أفضل مكان

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

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

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

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

بناء هيكل منطقي

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

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

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

إنشاء تصميم مرئي فعال

يحتاج التصميم المرئي للملاحة الفعالة للمرافق إلى اتباع مبدأ KISS الشهير (Keep It Simple، Stupid). يوصى بتزويد الأيقونات بعناوين نصية ، وجعل عناصر التحكم تبدو وكأنها عناصر تحكم ، والتأكيد بصريًا على أهم الإجراءات. يمكن أيضًا أن تكون فكرة جيدة التمييز بين التنقل والتنقل المستند إلى المحتوى باستخدام تصميم مختلف قليلاً.

يمكن العثور على مثالين رائعين للتصميم المرئي الفعال على موقع Walmart's و Etsy. قام المصممون بوضع التنقل بين الأدوات في أعلى الموقعين ، وقاموا بتسليط الضوء عليه بألوان تختلف عن بقية التنقل ، و Walmart مع خلفية زرقاء ، و Etsy مع خطوط زرقاء.

كلا الموقعين التأكيد على أهم إجراءات المستخدم مع عناصر التصميم المرئي المختلفة, يستخدم Walmart باللون الأصفر لأزرار Search و Sign In ، بينما يعطي Etsy حدًا أزرقًا ظاهرًا لزر تسجيل الدخول ، ويتضمن رمز عربة التسوق باللون الرمادي أعلى قائمة Cart.

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