رحلة المستخدم والمخطط الأولي (Wireframe) لغير المصممين: ارسم تطبيقك بقلم وورقة

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

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

• رحلة المستخدم (User Flow): خريطة الخطوات من لحظة دخول المستخدم إلى تحقيق هدفه — مربعات وأسهم.
• المخطط الأولي (Wireframe): رسم بسيط لكل شاشة في الرحلة — وين العنوان، وين الزر، وين القائمة.
• التصميم النهائي: الألوان والخطوط والصور. وهذا آخر شيء، مو أول شيء.

ارسم الرحلة: ابدأ بهدف واحد

اختر أهم مهمة في تطبيقك، مثل «العميل يطلب خدمة». اكتب في أول مربع: «فتح التطبيق»، وفي آخر مربع: «وصله تأكيد الطلب». بعدها املأ الخطوات بينهم. كل مرة المستخدم يختار بين شيئين، ارسم معيّناً (شكل سؤال) يتفرع منه سهمين.

الأسئلة اللي تكشفها الرحلة

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

كل سؤال ما عندك جواب له، هو شاشة أو حالة كان المبرمج بيخمّنها بنفسه.

ارسم الشاشات: مربعات وخطوط فقط

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

أدوات مجانية لو تبي تنتقل للشاشة

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

اختبرها قبل ما تسلّمها

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

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

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

ولما تبدأ ترسم، بتقع غالباً في بعض الفخاخ المعروفة. انتبه لها من البداية عشان ما تعيد الرسم مرتين:

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

كيف تسلّمها للمنفّذ؟

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

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

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