👨🏻‍🍳 🚸 🕵🏿 تدفق المستخدم: كيفية إنشاء تطبيقات ومواقع شائعة 👌 📃 🍢

تحية للجميع!

أنا مكسيم سكفورتسوف ، مصمم UX / UI لشركة Omega-R ، وهي شركة دولية لتطوير وتكامل حلول تكنولوجيا المعلومات. أقوم بتصميم وتصور واجهات تطبيقات الهاتف المحمول والويب.

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

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

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

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

لإجراء تسلسل ، من الضروري إجراء دراسة والإجابة على ثلاثة أسئلة أساسية :

من هو المستخدم؟
ما هو هدفه؟
ما الخطوات التي يجب أن يتخذها لتحقيق ذلك؟

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

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

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

تدفق المستخدم هو قصة عن المستخدم.

يسمح لك تدفق المستخدم بالنظر إلى تفاعل المستخدم والتطبيق من خلال عيون المستخدم.

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

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

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

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

دور المصمم

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

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

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

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

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

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

القيمة لفريق المنتج

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

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

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

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

القيمة للعملاء

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

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

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

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

كيف تبدو؟

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

يمكن تمثيل تدفق المستخدم كمجموعات من:

تدفق المهام
تدفق الأسلاك (lo-fi)
تدفق الشاشة (hi-fi)

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

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

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

تدفق المهام

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

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

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

تدفق الأسلاك (lo-fi)

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

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

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

مثال على مثل هذا المخطط:

تدفق الشاشة (hi-fi)

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

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

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

مثال على تدفق الشاشة:

فيما يلي مثال لكيفية ظهور مزيج هجين من المخططات الانسيابية الكلاسيكية والصور التخطيطية والتنسيقات النهائية في الإجمالي.

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

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

تدفق المستخدم: كيفية إنشاء تطبيقات ومواقع شائعة