أفضل ممارسات تصميم واجهة المستخدم لإمكانية مسح ضوئي أفضل

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

كل يوم ، يتوسع الإنترنت بتطبيقات ومواقع ويب ومقالات جديدة والمزيد. أصبح من الصعب بشكل متزايد جذب انتباه المستخدمين المثقلين بالمعلومات والذين يجدون صعوبة في تصفية المعلومات ذات الصلة من المحتوى غير ذي الصلة. وجد خبير التسويق David Zheng أنه في أكثر من 60٪ من الحالات ، يستسلم الزوار ويغادرون موقع الويب في أقل من 15 ثانية .

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

ما هي قابلية المسح؟

أجرى خبراء UX في Nielsen Norman Group بحثًا للإجابة على السؤال: كيف يقرأ الناس على الويب؟ كانت نتائجه بسيطة. لا يفعلون.

وجدت المجموعة أن 16٪ فقط من زوار موقع الويب لأول مرة يرجح أن يقرؤوه كلمة بكلمة. سيقوم 84٪ الآخرون بالبحث سريعًا عن عناصر الخطاف ، مثل العناوين أو الجمل أو الصور أو الرسوم المتحركة قبل أن يقرروا التعمق في المادة. لا يقتصر هذا السلوك على الواجهات الرقمية. على سبيل المثال ، نادرًا ما يقرأ الناس كل كلمة في الجريدة. بدلاً من ذلك ، يقومون بمسح نفس العناصر - العناوين والصور وما إلى ذلك - لتحديد ما يستحق وقتهم.

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

فوائد الواجهة القابلة للمسح الضوئي

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

1. هل محتوى الصفحة يتوافق مع توقعات الجمهور؟
2. هل الرسالة الرئيسية للصفحة سهلة الفهم في فترة زمنية قصيرة؟

على الرغم من أن الواجهات القابلة للفحص تتطلب جهدًا في الإنتاج ، إلا أنها تؤتي ثمارها على المدى الطويل من خلال إنشاء تصميم واجهة مستخدم ثابت. تظهر دراسة Nielsen Norman Group أن الصفحات المحسّنة لإمكانية المسح تصبح أكثر فاعلية بالطرق التالية:

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

قوة عادات المستخدم في مسح الأنماط

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

وفقًا لمجموعة Nielsen Norman Group ، هناك سبعة أنماط شائعة يقوم فيها المستخدمون بفحص الواجهة:

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

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

تقديم قيمة من خلال أبحاث المستخدم وأنماط المسح

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

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

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

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

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

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

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

أفضل ممارسات تصميم واجهة المستخدم لإمكانية مسح ضوئي أفضل

إنشاء تسلسل هرمي مرئي سليم

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

• بحجم
• اللون
• مقابلة
• القرب
• انتقام
• مسافة سلبية
• تكرار

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

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

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

الاستفادة من الفضاء السلبي

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

استخدم العناوين الفرعية لتلخيص المحتوى

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

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

إنشاء قوائم ذات تعداد نقطي ورقمي

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

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

تصور المحتوى

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

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

ضع التركيز المناسب على CTAs

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

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

أهمية قابلية المسح

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

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

• • •

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

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