تدفقات المستخدم: ما هي وسبب أهميتها في تصميم UX1 min read

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

ويسمى هذا المسار أ تدفق المستخدم.

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

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

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

حاول تصميم تدفقات المستخدم باستخدام الذكاء الاصطناعي

قم بوصف تدفق المستخدم الذي تريد تصميمه، ثم اسمح لـ Anima بتحويله إلى UX وشاشات ورمز.

ما هو تدفق المستخدم؟

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

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

يمكن أن يمثل تدفق المستخدم:

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

الهدف بسيط: اجعل مسار المستخدم واضحًا قبل تصميم الواجهة بالتفصيل.

مثال على بنية تدفق المستخدم الأساسية

تدفق المستخدم مقابل تدفق واجهة المستخدم

الشروط تدفق المستخدم و تدفق واجهة المستخدم ترتبط ارتباطا وثيقا.

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

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

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

• أي شاشة تأتي بعد هذه؟
• ماذا يحدث عندما ينقر المستخدم على هذا الزر؟
• إلى أين تؤدي حالة الخطأ هذه؟
• ماذا يرى المستخدم بعد إرسال النموذج؟

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

كيفية قراءة تدفق المستخدم

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

تستخدم معظم مخططات تدفق المستخدم لغة مرئية بسيطة:

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

وأوضح مكونات تدفق المستخدم

على سبيل المثال، قد يبدو تدفق مستخدم الاشتراك البسيط كما يلي:

1. يهبط المستخدم على الصفحة الرئيسية
2. ينقر المستخدم على “البدء مجانًا”
3. يقوم المستخدم بإدخال البريد الإلكتروني وكلمة المرور
4. يتحقق النظام مما إذا كان البريد الإلكتروني صالحًا
5. يؤكد المستخدم الحساب
6. يصل المستخدم إلى شاشة الإعداد
7. يكمل المستخدم الإعداد
8. يهبط المستخدم في لوحة القيادة

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

أمثلة على تدفق المستخدم

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

تدفق المستخدم الاشتراك

يوضح تدفق مستخدم الاشتراك كيف يصبح الزائر الجديد مستخدمًا مسجلاً.

1. زيارة الصفحة المقصودة
2. انقر فوق CTA للتسجيل
3. اختر طريقة الاشتراك
4. أدخل تفاصيل الحساب
5. التحقق من البريد الإلكتروني
6. استكمال الإعداد
7. الوصول إلى لوحة تحكم المنتج

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

تدفق المستخدم الخروج

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

1. عرض صفحة المنتج أو التسعير
2. أضف عنصرًا أو حدد الخطة
3. مراجعة عربة التسوق أو تفاصيل الخطة
4. أدخل معلومات الدفع
5. تأكيد الشراء
6. الوصول إلى صفحة النجاح أو الإيصال

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

تسجيل الدخول وإعادة تعيين كلمة المرور تدفق المستخدم

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

1. افتح صفحة تسجيل الدخول
2. أدخل بيانات الاعتماد
3. يقوم النظام بالتحقق من صحة الإدخال
4. قام المستخدم بتسجيل الدخول بنجاح أو رأى خطأ
5. إذا لزم الأمر، يبدأ المستخدم في إعادة تعيين كلمة المرور
6. يؤكد المستخدم البريد الإلكتروني
7. يقوم المستخدم بتعيين كلمة مرور جديدة
8. يعود المستخدم إلى المنتج

مثال على تدفق المستخدم لعملية تسجيل الدخول (تدفق المهام)

تدفق المستخدم على متن الطائرة

يوضح تدفق المستخدم أثناء الإعداد كيفية وصول المستخدمين الجدد إلى أول لحظة ناجحة للمنتج.

1. إنشاء حساب
2. الإجابة على أسئلة الإعداد
3. اختر القالب أو نقطة البداية
4. أكمل الإجراء الأول
5. شاهد حالة النجاح
6. الاستمرار في المنتج

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

متى يتم إنشاء تدفق المستخدم

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

في هذه المرحلة، يساعدك تدفق المستخدم على:

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

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

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

دور تدفقات المستخدم في تصميم UX

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

تساعد تدفقات المستخدم فرق UX على القيام بثلاثة أشياء مهمة.

1. إنشاء واجهة أكثر سهولة

يسهل تدفق المستخدم الواضح فهم الواجهة النهائية.

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

إذا كان التدفق مربكًا، فمن المحتمل أن تكون الواجهة مربكة أيضًا.

2. تقييم الواجهة الموجودة

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

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

3. قم بنقل استراتيجيتك إلى أعضاء الفريق وأصحاب المصلحة

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

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

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

رحلة المستخدم مقابل تدفق المستخدم

غالبًا ما يتم الخلط بين رحلات المستخدم وتدفقات المستخدم، لكنهما ليسا نفس الشيء.

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

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

الاختلافات الرئيسية

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

كيفية إنشاء تدفق المستخدم

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

1. تحديد هدف المستخدم

ابدأ بالإجراء الذي يريد المستخدم إكماله.

• إنشاء حساب
• شراء منتج
• احجز عرضًا توضيحيًا
• نشر موقع على شبكة الإنترنت
• قم بدعوة زميل في الفريق
• تصدير التصميم إلى التعليمات البرمجية

يجب أن يتم بناء تدفق المستخدم حول هدف محدد، وليس منطقة منتج غامضة.

2. اختر نقطة الدخول

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

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

3. رسم خريطة للطريق السعيد

الطريق السعيد هو أبسط طريق ناجح من البداية إلى النهاية.

1. يفتح المستخدم صفحة التسعير
2. يختار المستخدم الخطة
3. يقوم المستخدم بإنشاء حساب
4. يقوم المستخدم بإدخال تفاصيل الدفع
5. يؤكد المستخدم الشراء
6. يصل المستخدم إلى صفحة النجاح

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

4. إضافة القرارات وحالات الحافة

لا يتبع المستخدمون الحقيقيون دائمًا المسار المثالي. أضف نقاط القرار مثل:

• هل لدى المستخدم حساب بالفعل؟
• هل النموذج صالح؟
• هل نجح الدفع؟
• هل اختار المستخدم الفواتير الشهرية أم السنوية؟
• هل لدى المستخدم إذن للمتابعة؟
• ماذا يحدث إذا قام المستخدم بالإلغاء؟

هذه الفروع هي التي تحول المسار البسيط إلى تدفق مستخدم حقيقي لتصميم UX.

5. تبسيط التدفق

بمجرد تحديد التدفق، ابحث عن الاحتكاك.

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

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

يتدفق المستخدم باختصار

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

تدفق مستخدم قوي:

• يبدأ بهدف مستخدم واضح
• يظهر نقطة دخول المستخدم
• يرسم الخطوات والشاشات والقرارات في المسار
• يتضمن حالات حافة مهمة
• يساعد الفرق على تحديد الاحتكاك قبل تصميم UI التفصيلي
• يجعل عملية التسليم أسهل للمصممين والمطورين ومديري المشروعات وأصحاب المصلحة

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

الأسئلة الشائعة: تدفقات المستخدم

ما هي تدفقات المستخدم؟

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

ما هو تدفق المستخدم في تصميم UX؟

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

ما الفرق بين تدفق المستخدم ورحلة المستخدم؟

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

ما هو تدفق واجهة المستخدم؟

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

متى يجب عليك إنشاء تدفق المستخدم؟

قم بإنشاء تدفق مستخدم بعد البحث الأولي للمستخدم وقبل تصميم UI التفصيلي. يمكنك أيضًا إنشاء تدفقات المستخدم لاحقًا لتدقيق منتج موجود أو تشخيص الانقطاع أو تحسين التحويل.

ما هي الأمثلة على تدفقات المستخدم؟

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

لماذا تعتبر تدفقات المستخدم مهمة؟

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

كيف يمكنك جعل تدفق المستخدم؟

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

جرب Anima Playground لتدفقات المستخدم وتصميم UX

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

ابدأ التصميم باستخدام Anima Playground.