عزز تجربة المستخدم الخاصة بك مع التسلسل الهرمي المرئي الواضح

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

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

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

إنها طريقة مفيدة بشكل لا يصدق لإنشاء تجربة عملاء منظمة وهادفة مع تحسين فرص تحقيق نتيجة استراتيجية.

فيما يلي بعض الخطوات التي يمكن لمصممي UX اتخاذها لتحقيق إحساس واضح بالتسلسل الهرمي المرئي في المنتجات الرقمية ونقل تجارب العملاء إلى المستوى التالي.

تحديد أهداف تجربة المستخدم والعلامة التجارية

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

يعد تشكيل تعريف أهداف UX من خلال تلبية معايير منهجية SMART ( S محدد ، M سهل ، قابل للتطبيق ، R مناسب ، T قابل للتثبيت) هي إحدى الطرق الشائعة للقيام بذلك. هناك مقال جيد عنها هنا.

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

الطريقة الأسهل والأكثر فاعلية لتوثيق أهداف تجربة المستخدم والعلامة التجارية للمراحل المختلفة لرحلة العميل هي تشغيل ورشة عمل هرمية مرئية تعاونية.

باستخدام أداة تعاون واسعة النطاق مثل Milanote ، أو حتى Sketch ، ضع شاشات النموذج الأولي بترتيب زمني على نطاق واسع. قم بدعوة الممارسين الرئيسيين إلى اجتماع عبر الإنترنت أو اجتماع مادي ، مع التأكد من وجود تمثيل من منظور تجربة المستخدم والعلامة التجارية.

بعد ذلك ، قم بمشاركة الشاشة (أو قم بتوصيلها بشاشة) ، وابدأ في كتابة التعليقات التوضيحية!

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

ترتيب الإجراءات والمحتوى لمسح التسلسل الهرمي المرئي

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

بادئ ذي بدء ، هناك حاجة إلى التصنيف. من الأفضل استخدام مقياس من 1 إلى 3 — يمثل الرقم 1 الأهم ، بينما يمثل الرقم 3 الأقل.

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

في هذا المثال ، هناك هدف UX وهو " أريد معرفة المزيد عن خدمة هذه العلامة التجارية لتحديد ما إذا كانت تناسب ميزانيتي واحتياجاتي وتفضيلاتي ." تتمثل أهداف العلامة التجارية في أ) ترسيخ العلامة التجارية كخدمة متميزة ، و ب) تشجيع عمليات البحث عن السيارات.

في ضوء ذلك ، تم تعيين تسلسل هرمي لرسالة العلامة التجارية " اعثر على سيارتك المثالية من أكثر من 500 سيارة " ، كما هو الحال مع النموذج المصاحب و CTA.

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

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

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

بناء التسلسل الهرمي المرئي في نظام التصميم

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

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

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

بمجرد إنشاء فكرة عامة عن التكوين ، يمكن البدء في إنشاء متغيرات من عناصر واجهة المستخدم.

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

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

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

يتم إحتوائه

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

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

مزيد من القراءة على مدونة Toptal Design:

• مبادئ التصميم: مقدمة في التسلسل الهرمي
• أفضل ممارسات تصميم واجهة المستخدم والأخطاء الشائعة
• استكشاف مبادئ تصميم الجشطالت
• الدليل الشامل لهندسة المعلومات
• عزز تجربة المستخدم الخاصة بك مع مبادئ تصميم التفاعل الناجح هذه