ما أفضل طريقة لتوثيق تسلسل استخدام الواجهات User Flow؟

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

نموذج Userflow 1
نموذج Userflow 2

لراين سينجر Ryan Singer مدير المنتج في Basecamp طريقة توثيق ثورية حقيقة تعود لـ 2009 و هي منسية نوعاً ما. لا يمكن لي شخصياً أن أفكر في طريقة أمثل لتوثيق تسلسل الاستخدام. طريقة بسيطة تعتمد على النص، دون رسوم تستهلك الكثير من الوقت و دون تعقيد. (لا يمنع هذا من إنتاج رسوم معقدة لاحقاً طبعاً)

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

القالب الرئيسي لنموذج إنشاء تسلسل مهام وفقاً لـ Ryan Singer

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

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

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

كان هذا التسلسل مكتوباً، كيف يمكن تمثيله وفق أسلوب ريان؟

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

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

نموذج تسلسل الاستخدام لتسجيل الدخول

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

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

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


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

شاركنا بتعليقك