اختراق واجهة مستخدم بسيطة لتحسين Onboarding UX [OCD]

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

تم تصميم واجهة مستخدم messenger البسيطة باستخدام هذا المورد المجاني للرسم

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

يجعل تصميم واجهة المستخدم اللامعة من السهل استهلاك المعلومات ولا يركز على كيفية إنشاء هذه المعلومات.

لقد تعلمت هذا بالطريقة الصعبة عندما غارقة في قدر كبير من Dribbble يمكنني تصميم لوحة معلومات لتطبيق b2b. بدا الأمر رائعًا على Sketch ، لكن عملائنا لم يتمكنوا من الوصول إلى طريقهم.

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

الحلول الحالية

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

UX على Slack على متن الطائرة

المشكلة مع نهج الشرائح هو عدم وجود سياق. يمكنك نقل الكثير فقط على الشرائح (مقدار الاحتفاظ بالمستخدم هو سؤال مختلف).

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

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

تلميح الأدوات القائم على العرض التوضيحي على الصعود إلى introjs.com/

بقدر ما يذهب الحل القائم على تلميح الأدوات ، وجدت لهم مزعج ونقرت دائما تقريبا "تخطي تعليمي". على الرغم من أن الشركات الكبرى مثل Canva تستخدم تلميح الأدوات على أساس الصعود. يتيح لك منتج يسمى AppCues تصميم تلميحات الأدوات هذه بدون رمز ، أنيق.

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

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

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

الوسواس القهري ويعرف أيضا باسم Onboarding تصميم تتمحور

أحب تسمية الأشياء. الأسماء تساعد على تجسيد الأفكار في العقل. لذلك دعونا نسمي هذا التصميم المتمركز على Onboarding.

كنت أرغب في حل وهو:

  • كان ذا صلة بالسياق
  • لم يكن مزعجًا (لا أحد يحب اتخاذ 17 خطوة لمعرفة كيفية عمل الميزة)
  • غير مزعجة (مثل المنارات)
  • سهل الاستهلاك (تلميحات الأدوات ليست سهلة الاستهلاك)

نتيجة

أنا ببساطة بدأت تصميم الدول. يمكن تصميم تصميم الدردشة الذي شاهدته أثناء بدء قراءة هذه المقالة بثلاث حالات.

الحالة 1: لا توجد جهات اتصال

الحالة 2: جهات الاتصال موجودة ، ولكن لا توجد محادثات

الحالة 3: كل الدردشات وجهات الاتصال موجودة

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

هدف الدولة 1: المستخدم الرئيسي لإضافة جهة اتصال

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

الحالة 1 - رئيس المستخدم لإضافة جهات اتصال (الرسم التوضيحي بواسطة undraw.co)

بمجرد إضافة جهة اتصال ، يمكننا بدء الهدف الثاني.

هدف الدولة 2: المستخدم الرئيسي لبدء الدردشة

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

الدولة 2 - إضافة جهة اتصال ، ورئيس الوزراء لبدء الدردشة

هدف الدولة 3: لا شيء ، المستخدم على متن الطائرة - يجب أن تختفي جميع العظة

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

الدولة 3 - المستخدم هو على متن بنجاح

فوائد هذا النهج

  • مقارنةً بنهج الشرائح في الخطوة 1 ، يقدم Onboarding Centric Design (OCD) المحتوى في مجموعات. المعلومات متوفرة عند اتخاذ القرار.
  • يمكن استخدام هذا النهج على كل من الأجهزة المحمولة وأجهزة سطح المكتب. واجهة المستخدم هذه بسيطة ، ولكن في حالة وجود واجهة مستخدم معقدة ، يمكنك استخدام الوسواس القهري مع النقاط الساخنة لرفع CTAs.
  • يعمل هذا النهج على تحسين UX في المقام الأول ، من خلال إجبارك على التفكير فيما يتعلق برحلة المستخدم.
  • إذا كنت تكتب واجهاتك الأمامية باستخدام React ، فهذه الطريقة تتناسب تمامًا مع بنية مكوناتها.

كقاعدة عامة:

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

شكرا للقراءة :)

مرحبًا ، إذا أعجبك هذا المقال وترغب في تحديثه ، فاتبعني على: متوسط ​​أو Github أو Twitter

أدير مجتمعًا سهلاً (يضم 18 عضوًا اعتبارًا من 6 أكتوبر 2018) حيث يمكنك مساعدة الآخرين أو تلقي المساعدة فيما يتعلق بالواجهة الأمامية والخلفية والتطوير بشكل عام. يمكنك الانضمام إليها هنا.