تصميم واجهات مركزة لتحسين مشاركة المستخدم

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

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

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

القبض على الجدة

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

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

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

تحتوي هذه الصفحة على زر "دعوة للعمل" ولكن انتباهي على الفور يذهب إلى لقطات. أنها تحريك عند تحميل لأول مرة لذلك هذا يجمع حداثة التصميم مع الحركة لجذب الانتباه.

سيكون البديل GiftRocket باستخدام رموز مصورة كروابط لمزيد من الخوض في الموقع.

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

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

الطباعة قابلة للقياس

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

أفضل بديل هو خلق المحتوى الخالي من الدسم مع العناوين والنص الغامق والصور التي توضح ما تحاول قوله. يمكنني التفكير في على الأقل ثلاث تقنيات كتابة قوية يمكنك توظيف في المحتوى الخاص بك ل زيادة سهولة القراءة:

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

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

راجع مدونة Quick Sprout للحصول على مثال عن أسلوب الكتابة هذا. المحتوى كتبه نيل باتيل وغالبا ما يكتب محتوى طويل للغاية ، لكنه ينهار الفقرات إلى 1-3 جمل لكل منهما.

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

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

لافتة للنظر الصور

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

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

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

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

يقوم TechCrunch بهذا مع الصور المميزة في مقالاتهم حيث ستجد غالبًا أ صور مميزة فوق أضعاف.

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

عناصر الصفحة المتناقضة

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

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

المثال المفضل لدي لعناصر الصفحة المتناقضة ربما يكون الصفحة الرئيسية لـ Sketch. هناك الكثير من التباين وجدت بين زري دعوة إلى العمل, واحد لتنزيل نسخة تجريبية من Sketch والآخر لشراء نسخة.

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

ستلاحظ تقنية مماثلة على الصفحة الرئيسية لـ Optin Monster. يحتوي هذا الرأس على زر واحد فقط يسمى Get OptinMonster Now. إنه زر أخضر ساطع على خلفية زرقاء مع عدم وجود عناصر خضراء أخرى في الأفق.

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

بالنسبة للمدونة ، قد يكون لديك مؤهلات مختلفة لمشاركة المستخدم. خيار واحد مشترك هو نموذج الاشتراك في النشرة الإخبارية مثل المثال على Aeolidia.

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

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

تشجيع تفاعل المستخدم

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

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

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

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

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

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

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

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

• تكتيك المستخدم على متن الطائرة لزيادة المشاركة (thinkapps.com)
• درس في المشاركة التدريجية (uxbooth.com)
• لا تفترض أن المستخدمين الجدد يرغبون في معرفة كيفية استخدام المنتج الخاص بك (uxdesign.cc)