للحصول على تصميم UX أفضل: هل يمكنني النقر فوق هذا؟

كيف يمكن للتغييرات الدقيقة أن تزيد من نسبة النقر إلى الظهور

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

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

الخطوط

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

الصورة عبر Vital Design

انخفضت المبيعات على الفور بنسبة 20٪.

تعد الخطوط أيضًا من أكثر الأشياء استقرارًا والتي يمكنك الاعتماد عليها عندما تجعل الأشخاص ينقرون.

بشكل عام ، سيكون استخدام الخط الغامق بلا سيريف ذو التباين العالي رائعًا.

لماذا ا؟ إنها الأسهل في القراءة. أمثلة على هذا موجودة في جميع أنحاء الإنترنت. Basecamp ، BaseCRM ، Evernote ، mHelpDesk - كل هذه الشركات لديها نفس عبارات الحث على اتخاذ إجراء - عالية التباين ، وخط جريء بلا سيريف. من السهل رؤيتها ، ومن السهل قراءتها. لهذا السبب تميل الشركات إلى استخدامه على خطوط serif. (نفس الشيء ينطبق على الملصقات - يمكنك قراءتها من بعيد). أيضًا ، من السهل قراءة sans serif على الكمبيوتر ، ولهذا السبب تريد استخدامه عندما تريد أن ينقر القارئ - يحتاج إلى معرفة ما تقوله قبل أي شيء آخر.

الظلال المسقطة + تأثيرات ثلاثية الأبعاد

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

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

(نصيحة احترافية: تسمى هذه أزرار نمط الكشك).

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

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

حركة

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

من منظور UX

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

المهمة الأولى لجعل شيء ما قابلاً للنقر هو إخبار المستخدمين أنه يمكن النقر فوقه.

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

مثال رائع آخر هو الصفحة الرئيسية لموقع eTecc / Interactive. يستخدمون في الواقع تعبئة aa للسماح للمستخدم بمعرفة أن شيئًا ما قابل للنقر.

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

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

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

من منظور مسطح

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

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

التباين + اللون

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

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

غالبًا ما يأتي هذا النوع من مشكلة اللون والتباين مع العبارات التي تحث المستخدم على اتخاذ إجراء (CTA) والأزرار ، ويمكن أن يؤدي تغيير بسيط في اللون إلى تغيير كبير في الأرباح. على سبيل المثال ، كتب Vibethink عن CTAs والأزرار ، وذكر أن تغيير لون وشكل الزر زاد التحويلات (اقرأ: النقرات) بنسبة 35٪. لقد شعروا أن التباين المتزايد يسهّل على المستخدمين النقر.

لكنهم غيروا شيئين ، لذا فهو ليس علميًا تمامًا. نشرت Hubspot في عام 2011 نتائج بعض اختبارات A / B على الأزرار الحمراء والخضراء ووجدت أن الزر الأحمر تفوق في الأداء على الزر الأخضر بنسبة 21٪.

لذلك يمكن أن يلعب اللون والتباين دورًا كبيرًا في حث المستخدمين على النقر على الأشياء.

يتم إحتوائه

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

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

استمتعت بهذا المنصب؟ قد ترغب أيضًا في قراءة منشور فهم المستخدمين لديك لتحسين منشور تصميم UX لموقع الويب الخاص بك أو منتجاتنا الرائعة التي يجب أن يمتلكها كل مصمم UX !