# كل طريقة في قائمة عملية التصميم، ومتى تستحق وقتها.

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

https://laithjunaidy.com/ar/writing/design-process-checklist
بقلم ليث الجنيدي. نُشر في: 2026-10-05.

---

![شاشات تطبيق وفرة بالعربية: تقييم القطيع، واختيار الرأس، ولوحة التحكم](https://laithjunaidy.com/writing/wfrah/cover.jpg)

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

في 2023 كنت أصمم [وفرة](https://laithjunaidy.com/ar/work/wfrah)، تطبيقا لمربي الأغنام والماعز في الخليج. قبل أن توجد أي شاشة، أخبرنا المؤسس عبد اللطيف بما ينتظرنا. المربون يديرون المهنة كما علمهم آباؤهم، ولا يصدقون أن تطبيقا يعرف مواشيهم أكثر منهم.

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

المقابلات كشفت شيئا تحت هذا الجواب. كثير من المربين لا يستطيعون حساب الاحتياج الغذائي اليومي لقطيعهم من المعادلات، وقناعتهم بأن السوق هو السبب جعلتهم يغفلون عن التغذية والإدارة. فصارت أنفع ميزة في التطبيق [حاسبة تغذية](https://laithjunaidy.com/ar/writing/designing-wfrah) تحسب عنهم لكل رأس ولكل مرحلة نمو. لم يطلبها أحد. المقابلات أظهرت كم واحدا يحتاجها.

بعد ثلاث سنوات بنيت شاشة الكاشير في [Dot](https://laithjunaidy.com/ar/research/dot)، تطبيق الولاء الذي أبنيه، وكانت النسخة الأولى سيئة. تطلب المبلغ أولا، ثم الدولة، ثم رقم الهاتف، ثم زرا: ست نقرات إضافة إلى الكتابة، ولا حقل جاهز للكتابة حين تفتح الشاشة. بدأت إعادة البناء من الشخص، بسطر واحد في المواصفات: كاشير متعب على كاونتر مزدحم، يد على الهاتف ويد على الكوب. الهاتف أولا، وحقل المبلغ ينشط وحده، والعميل العائد يكلف الآن نقرتين.

الدرس نفسه مرتين. الشاشة لم تخرج صحيحة إلا بعد أن جاء الشخص أولا. هذا عمل عملية التصميم، ولهذا توجد قوائم مثل [Design Process checklist](https://coconut-baroness-035.notion.site/Design-Process-checklist-7c07a8c25f1a42e385f5205faa8d93a8) التي أعدتها Barbara Vam. فيها 64 طريقة موزعة على مراحل التفكير التصميمي الخمس. هذا الدليل يمر عليها كلها، بترتيبها هي، مع ما تعلمته من استخدامها.

## أهم النقاط

- التفكير التصميمي خمس مراحل: التعاطف، والتعريف، وتوليد الأفكار، والنموذج الأولي، والاختبار. والمراحل تعود على نفسها. الاختبار الفاشل يعيدك غالبا إلى التعريف، وليس إلى نقطة الصفر.
- لا يوجد مشروع يطبق الطرق الـ64 كلها. في كل مرحلة طريقة أو اثنتان تحملانها. إن تجاوزتهما صرت تخمن.
- التعاطف: اسأل الناس عن آخر مرة قاموا فيها بالمهمة، ثم رتب ما قالوه في خريطة تقارب.
- التعريف: بيان مشكلة واحد، ومجموعة أسئلة "كيف يمكننا"، تكتبها قبل أن يفتح أحد Figma.
- توليد الأفكار: ارسم مسار المستخدم قبل الشاشات، ثم اختصر الأفكار بمصفوفة أولويات.
- النموذج الأولي: ابن أقل ما يجيب عن السؤال المفتوح. وسلم الحالات كلها مع الشاشات.
- الاختبار: راقب خمسة أشخاص يستخدمونه. قس النتيجة بـ SUS. واستخدم اختبارات A/B فقط حين تملك الزيارات الكافية.
- الذكاء الاصطناعي يساعد في الصياغة والفرز والتدقيق. ولا يحل محل الشخص الذي تصمم له.

## كيف تقرأ هذا الدليل

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

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

**المحتويات**

1. [ما مراحل عملية التصميم الخمس؟](#ما-مراحل-عملية-التصميم-الخمس)
2. [التعاطف: ماذا يفعل الناس فعلا؟](#التعاطف-ماذا-يفعل-الناس-فعلا)
3. [التعريف: ما المشكلة بالضبط؟](#التعريف-ما-المشكلة-بالضبط)
4. [توليد الأفكار: كيف تصل من أفكار كثيرة إلى فكرة واحدة؟](#توليد-الأفكار-كيف-تصل-من-أفكار-كثيرة-إلى-فكرة-واحدة)
5. [النموذج الأولي: كم تبني قبل أن تعرف؟](#النموذج-الأولي-كم-تبني-قبل-أن-تعرف)
6. [الاختبار: كيف تعرف إن كان يعمل؟](#الاختبار-كيف-تعرف-إن-كان-يعمل)
7. [أي قالب يناسب أي مرحلة؟](#أي-قالب-يناسب-أي-مرحلة)
8. [أسئلة شائعة](#أسئلة-شائعة)

## ما مراحل عملية التصميم الخمس؟

تصف Interaction Design Foundation التفكير التصميمي بأنه [عملية غير خطية ومتكررة](https://www.interaction-design.org/literature/topics/design-thinking) تستخدمها الفرق لتفهم المستخدمين، وتتحدى الافتراضات، وتعيد تعريف المشاكل، وتصنع الحلول. خمس مراحل، كل واحدة تجيب عن سؤال واحد.

| المرحلة | السؤال الذي تجيب عنه | عدد طرقها في القائمة | ما لا أتجاوزه |
| :- | :- | -: | :- |
| التعاطف | ماذا يفعل الناس فعلا، ولماذا؟ | 12 | مقابلات المستخدمين، خريطة التقارب |
| التعريف | أي مشكلة نحل، ولمن؟ | 12 | بيان المشكلة، أسئلة كيف يمكننا |
| توليد الأفكار | ماذا يمكن أن نبني، وما الذي يأتي أولا؟ | 19 | مسار المستخدم، بنية المعلومات |
| النموذج الأولي | ما أقل ما نبنيه لنتعلم؟ | 10 | الوايرفريم، النموذج التفاعلي، التسليم |
| الاختبار | هل يعمل مع الناس الذين نصمم لهم؟ | 11 | اختبار قابلية الاستخدام، SUS |

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

## التعاطف: ماذا يفعل الناس فعلا؟

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

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

![قالب نص مقابلة المستخدم وملاحظاتها لتطبيق بن: 18 سؤالا في خمسة أقسام بجانب ورقة ملاحظات فيها اقتباسات وملاحظات ومتابعات](https://laithjunaidy.com/store/user-interview/ar-light.jpg)

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

### تحديد الهدف (Define the goal)

جملة واحدة عن ما يجب أن يغيره المشروع، وكيف ستعرف أنه غيره. "العميل العائد يحصل على نقاطه في أقل من عشر ثوان" هدف. "تحسين تجربة الكاشير" أمنية. اكتب الهدف مع الشخص الذي يملك النتيجة، ومعه الرقم الواحد الذي يثبته، قبل أي بحث. تخرج بمصفاة: كل طريقة بعدها إما تخدم الهدف أو تنتظر. الخطأ الشائع هدف يسمي حلا، مثل "ابن تطبيق ولاء". و[Design sprint](https://www.gv.com/sprint/) من GV عملية من خمسة أيام تجيب عن أسئلة العمل عبر التصميم والنماذج الأولية والاختبار، وتبدأ بالطريقة نفسها: يتفق الفريق على هدف بعيد المدى قبل أن يرسم أحد أي شيء.

### مقابلات المستخدمين (User interviews)

مقابلة المستخدم شخص واحد، ومحادثة واحدة، عن ما فعله، بكلماته هو. مقال Nielsen Norman Group [User Interviews 101](https://www.nngroup.com/articles/user-interviews/) يعرفها بأنها طرح الأسئلة والاستماع والمتابعة لتعرف من هم المستخدمون، وكيف تبدو تجاربهم، وماذا يحتاجون. ويسمي حدها أيضا: البيانات جيدة بقدر جودة من يجري المقابلة، والأسئلة الموجهة تفسدها.

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

**كيف تطبقها**

1. اكتب سؤال البحث أولا: "كيف يقرر المربون ماذا يطعمون مواشيهم؟" كل سؤال في النص يجب أن يخدمه.
2. اختر من خمسة إلى ثمانية أشخاص من الجمهور الحقيقي. ليس زملاءك، وليس أصدقاء سيجاملونك.
3. اسأل عن آخر مرة، ولا تسأل عن المستقبل أبدا. "احك لي عن آخر مرة طلبت فيها قهوة للفريق" تعطيك قصة. "هل ستستخدم ميزة الطلب الجماعي؟" تعطيك نعم مهذبة.
4. تابع كل جواب بلماذا، وكيف، وماذا حدث بعدها. ملاحظة Barbara Vam على هذه الطريقة تقولها في ثلاث كلمات: ماذا، كيف، لماذا.
5. اصمت بعد كل جواب. الجزء المفيد يأتي بعد الصمت.
6. اكتب الاقتباسات حرفيا. إعادة الصياغة هي الباب الذي يتسلل منه رأيك.

**بماذا تخرج:** قصص، واقتباسات دقيقة، ومفردات الناس أنفسهم، والحلول الالتفافية التي بنوها لأن شيئا لم يخدمهم.

**الخطأ الشائع:** أن تعرض فكرتك. لحظة تعرض الفكرة تتحول المقابلة إلى مكالمة بيع، ويبدأ الناس بحماية مشاعرك.

[نص المقابلة وملاحظاتها](https://laithjunaidy.com/ar/store/user-interview) قالب مجاني فيه 18 سؤالا في خمسة أقسام، من التمهيد إلى "في إشي كان لازم أسأله وما سألته؟".

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

### مقابلات أصحاب المصلحة (Stakeholder interviews)

المحادثة نفسها، مع الناس الذين يملكون الميزانية أو النظام أو المخاطرة. مقال Nielsen Norman Group [Stakeholder Interviews 101](https://www.nngroup.com/articles/stakeholder-interviews/) يرى أنها تعطيك السياق وأهداف العمل، وأنها تزيد دعم أصحاب المصلحة للعمل.

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

### مخطط لين (Lean canvas)

صفحة واحدة فيها المشكلة، وشرائح العملاء، والحل، والقيمة الفريدة، والقنوات، والإيرادات، والتكاليف، والمقاييس الأساسية، والميزة غير العادلة (unfair advantage). تقدمه Barbara Vam كطريقة لتوثيق مساحة المشكلة، وكمحفز لفرضيات تحتاج إلى التحقق منها.

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

### الاستبيانات (Surveys)

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

اجعل الاستبيان أقل من عشرة أسئلة، وجربه على شخصين قبل الإرسال. تخرج بأرقام وببعض الأسباب. مقال Nielsen Norman Group عن [28 نصيحة للاستبيانات النوعية](https://www.nngroup.com/articles/qualitative-surveys/) يدعو إلى الأسئلة المفتوحة حين تريد أن تتعلم أكثر، وإلى تجربة كل استبيان قبل إرساله لتزيل مشاكله.


![نتيجة استبيان: هل أنت راض عن الطريقة التي تشتري أو تبيع بها مواد البناء؟ ست إجابات على مقياس من واحد إلى خمسة، بمتوسط 2.8](https://laithjunaidy.com/writing/design-process/ibuild-survey-q3.jpg)

*سؤال من استبيان مبكر لـ iBuild لمشتري وموردي مواد البناء في السعودية: هل أنت راض عن طريقة الشراء أو البيع اليوم؟ ست إجابات، بمتوسط 2.8 من 5. إشارة تستحق مقابلة، وليست نتيجة.*

### تحليل البيانات (Data analysis)

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

في [تفكيك، العدد الثاني](https://laithjunaidy.com/ar/writing/taken-apart-arabic-100) فحصنا 179 شركة ناشئة ممولة في المنطقة بالترتيب، ووجدنا أن 44 بالمئة منها بلا موقع عربي. لم تكن أي مقابلة لتعطينا هذا الرقم. أعطته مراجعة دقيقة لبيانات عامة. والخطأ الشائع أن تتوقف عند الرقم. البيانات تقول أين يترك الناس الطريق، ولا تقول أبدا لماذا.

### المقاييس (Metrics)

الأرقام القليلة التي تقول إن كانت التجربة تتحسن: نجاح المهمة، والوقت على المهمة، والتحويل، والاحتفاظ، والرضا. اخترها في البداية، وسجل قيمتها اليوم، فيصير عندك خط أساس تحكم به على الإطلاق. دليل Nielsen Norman Group عن [قياس تجربة المستخدم (benchmarking)](https://www.nngroup.com/articles/benchmarking-ux/) يصف هذا بالضبط: قياس تجربة المنتج بمقاييس مقابل معيار له معنى.

في كاونتر Dot كان المقياس في المواصفات عدد النقرات لكل عميل عائد: ست قبل، واثنتان بعد. اختر أرقاما تتبع نتيجة المستخدم، كما يقول مقال [لا أحد يريد منتجك](https://laithjunaidy.com/ar/writing/nobody-wants-your-product). المقياس الذي يتبع النقرات فقط سيكافئ التصميم الخطأ.

### المنافسون (Competitors)

استخدم المنتجات التي يعتمد عليها مستخدموك اليوم، ومنها جدول البيانات، والدفتر، ومجموعة الواتساب. بعد ظهر واحد، في وقت مبكر، مع ملاحظات عن ما يتقنه كل واحد وأين يفشل. حجة Nielsen Norman Group في مقالها عن [تقييم قابلية الاستخدام عند المنافسين](https://www.nngroup.com/articles/competitive-usability-evaluations/) أن رؤية ما ينجح وما يفشل عند غيرك توفر عليك بناء ميزات بلا فائدة.

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

### مجموعات التركيز (Focus groups)

من ستة إلى تسعة أشخاص يناقشون موضوعا مع مدير للنقاش، لمدة ساعتين تقريبا. مقال Jakob Nielsen عن [مجموعات التركيز](https://www.nngroup.com/articles/focus-groups/) صريح في حدودها: تظهر ما يقول الناس إنهم يفعلونه، وهذا غير ما يفعلونه. ودورها الصحيح أن تكتشف ما يريده المستخدمون. الحكم على قابلية الاستخدام خارج دورها.

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

### الملاحظة (Observations)

راقب الناس وهم يقومون بالمهمة في مكانها المعتاد: على الكاونتر، وفي الحظيرة، وعلى هواتفهم في إضاءة سيئة. طبقها كلما كانت البيئة تشكل العمل. مقال Nielsen Norman Group عن [الدراسات الميدانية](https://www.nngroup.com/articles/field-studies/) يشرح لماذا تستحق أن تخرج من المكتب لتتعلم ما لم تتوقعه.

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

### خريطة التقارب (Affinity map)

خريطة التقارب تأخذ كل ما أنتجه البحث، ملاحظة واحدة على كل ورقة، وتجمع الأوراق حسب ما ينتمي لبعضه حتى تظهر المحاور. دليل Nielsen Norman Group عن [Affinity diagramming](https://www.nngroup.com/articles/affinity-diagram/) يصفها بأنها تجميع للملاحظات المترابطة في محاور، ويقول إنها تصلح لنتائج البحث ولأفكار ورشة العمل معا. ويفصل الدليل بينها وبين فرز البطاقات (card sorting)، وهو طريقة بحث للتنقل، وليس طريقة لترتيب ملاحظاتك أنت.

طبقها مباشرة بعد البحث. من دونها تفوز المقابلة الأكثر حضورا في الذاكرة بالنقاش، وهي في الغالب الأكثر تطرفا.

![قالب خريطة التقارب: ست مقابلات مرتبة في خمسة محاور لتطبيق بن](https://laithjunaidy.com/store/affinity-map/ar-light.jpg)

*ست مقابلات، خمسة محاور: السرعة، ووضوح الأسعار، والطلب لغيري، والتتبع، والطلبات المتكررة. كل ورقة تحمل رمز المشارك.*

**كيف تطبقها**

1. اكتب ملاحظة واحدة على كل ورقة، بكلمات المشارك حيث تستطيع، ومعها رمز من قالها.
2. افرد كل الأوراق. لا تبدأ بفئات.
3. حرك الأوراق في مجموعات بصمت. الصمت يمنع صاحب المنصب الأعلى من أن يقرر المحاور بصوت عال.
4. سم كل مجموعة بجملة تذكر النتيجة، مثل "رسوم التوصيل تظهر متأخرة ونحس أنها خدعة"، بدل كلمة واحدة مثل "الأسعار".
5. عد المشاركين تحت كل محور. المحور الذي يأتي من شخص واحد مجرد حكاية.

**بماذا تخرج:** خمسة أو ستة محاور، وراء كل واحد منها عدة أشخاص.

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

[خريطة التقارب](https://laithjunaidy.com/ar/store/affinity-map) المجانية متوفرة بالعربية والإنجليزية، بالوضع الفاتح والداكن.

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

### رسم خرائط السياق (Context mapping)

يحضر المشاركون قبل الجلسة بتمارين صغيرة: يوميات، وصور من يومهم، وكولاج. ثم يشرحون لك ما صنعوه. صفحة Interaction Design Foundation عن [Context mapping](https://ixdf.org/literature/topics/context-mapping) تقدمها كطريقة تكشف احتياجات المستخدمين وتلهم أفكار التصميم.

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

## التعريف: ما المشكلة بالضبط؟

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

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

![عوض، الشخصية المتخيلة لمرب من بحث وفرة، جاثيا بجانب كبش في الحظيرة](https://laithjunaidy.com/writing/wfrah/persona.jpg)

*عوض. شخصية متخيلة بنيناها من عشر مقابلات حقيقية: فخور بطريقة عائلته، وفضولي ليعرف إن كانت هناك طريقة أفضل.*

### شخصية المستخدم (Personas)

شخصية المستخدم ملف متخيل وواقعي لنوع واحد من المستخدمين، تبنيه من البحث: أهدافه، وسياقه، وسلوكه، وما يزعجه، وجملة بكلماته. مقال Nielsen Norman Group عن [الشخصيات](https://www.nngroup.com/articles/persona/) يرى أنها تنجح لأن الناس ينشدون إلى شخص واحد محدد أكثر من مجموعة أرقام، وأن الشخصية الجيدة تقوم على بحث ملموس.

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

**كيف تطبقها**

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

**بماذا تخرج:** شخص واحد تصمم له، واختبار لكل مراجعة: هل سيفهم عوض هذه الشاشة؟

**الخطأ الشائع:** أن تستعير شخصية من قالب. الشخصية المترجمة من قالب إنجليزي تسجل ما توقعه كاتب القالب الإنجليزي. لهذا كتبت النسخة العربية من [قالب شخصية المستخدم](https://laithjunaidy.com/ar/store/persona) المجاني بالعربية من البداية، مع نبذة تقرأ كأنها عن شخص من عمان.

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

![قالب شخصية المستخدم بالعربية لرنا، مصممة منتجات في عمان، مع أهدافها وإزعاجاتها وسلوكها](https://laithjunaidy.com/store/persona/ar-light.jpg)

*قالب شخصية المستخدم العربي، كتبته بالعربية من البداية.*

### خريطة التعاطف (Empathy map)

أربعة أرباع: ما يقوله المستخدم، وما يفكر فيه، وما يفعله، وما يشعر به. املأها مع الفريق مباشرة بعد المقابلات. مقال Nielsen Norman Group عن [Empathy mapping](https://www.nngroup.com/articles/empathy-mapping/) يرى أنها تبني صورة مشتركة عن المستخدم، وتظهر الفجوات في ما تعرفه. أنفع ما تخرج به هو المكان الذي يلتقي فيه ما يقوله الشخص بما يفعله: رنا تسمي الرسوم المتأخرة خدعة، وتتحقق منها مرتين قبل أن تدفع. [قالب خريطة التعاطف](https://laithjunaidy.com/ar/store/empathy-map) مجاني. والخطأ الشائع أن تملأ "يفكر" و"يشعر" بالتخمين. اتركهما فارغين حيث لا دليل عندك.

### خريطة رحلة المستخدم (User journey map)

خريطة الرحلة هي التجربة كاملة عبر الزمن، من أول مرة يسمع فيها الشخص عن المنتج إلى أن يتركه أو يعود إليه، مع ما يفعله ويفكر فيه ويشعر به في كل مرحلة. مقال Nielsen Norman Group [Journey Mapping 101](https://www.nngroup.com/articles/journey-mapping-101/) يعرفها بأنها تصور للعملية التي يمر بها الشخص ليحقق هدفا، تبنيها من خط زمني للأفعال ثم تضيف إليه الأفكار والمشاعر.

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

![قالب خريطة رحلة العميل لتطبيق بن: خمس مراحل، مع الأهداف والأفعال والأفكار ومنحنى المشاعر ونقاط الألم والمقاييس](https://laithjunaidy.com/store/customerjourney/ar-light.jpg)

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

**كيف تطبقها**

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

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

**الخطأ الشائع:** أن ترسم الرحلة التي صممتها بدل الرحلة التي يسلكها الناس. [خريطة رحلة العميل](https://laithjunaidy.com/ar/store/customerjourney) مجانية، بالعربية والإنجليزية، بالوضع الفاتح والداكن.

### قصص المستخدم (User stories)

"بصفتي [مستخدم]، أريد [فعل]، حتى [نتيجة]." اكتبها حين ينتقل العمل إلى قائمة المهام (backlog)، حتى يبقى المستخدم والسبب مع كل بند. دليل GOV.UK Service Manual عن [كتابة قصص المستخدم](https://www.gov.uk/service-manual/agile-delivery/writing-user-stories) يعاملها كسجل لكل ما يجب أن يفعله الفريق ليبني خدمة تلبي احتياجات المستخدمين. والخطأ الشائع قصص بلا "حتى". من دونها لا يستطيع أحد أن يعرف إن نجحت الميزة.

### بيان المشكلة (Problem statement)

بيان المشكلة يقول من هو العالق، وفي أي لحظة، وكم يكلفه ذلك، في جملة واحدة. مقال Nielsen Norman Group عن [بيانات المشكلة](https://www.nngroup.com/articles/problem-statements/) يرى أن الفرق التي تبدأ الاستكشاف من دون بيان مشكلة تتوه، وأن بعضها يبدأ بالبحث في الحلول، وهذا ليس استكشافا أصلا. اكتب واحدا في كل مشروع. هو أرخص تأمين في هذا الدليل.

![قالب بيان المشكلة وكيف يمكننا لتطبيق بن: خمس خانات، والجملة النهائية، والمهمة المطلوبة، وستة أسئلة كيف يمكننا](https://laithjunaidy.com/store/problem-statement/ar-light.jpg)

*جملة واحدة مبنية من خمس خانات، بعدها المهمة المطلوبة وستة أسئلة "كيف يمكننا".*

**كيف تطبقه**

1. املأ خمس خانات من البحث: المستخدم، ويحتاج أن، ولأن، ولكن، مما يشعره بـ.
2. اقرأ الجملة بصوت عال. إن بدت كطلب ميزة، فخانة "لأن" ناقصة.
3. قارنها بخريطة التقارب. كل جزء منها يجب أن يعود إلى محور.
4. اتفق عليها مع من سيبنون. إن لم يستطيعوا تكرارها، فهي طويلة جدا.

**بماذا تخرج:** حدود العمل. "رنا تحتاج أن تطلب قهوة لثلاثة أشخاص في أقل من دقيقة، لأن اجتماع الساعة 10:00 يبدأ في موعده، لكن رسوم التوصيل لا تظهر إلا عند الدفع، مما يشعرها بأنها انخدعت." كل ما لا يخدم هذه الجملة ينتظر.

**الخطأ الشائع:** أن تخبئ حلا داخلها. "المستخدمون يحتاجون لوحة تحكم أفضل" تسمي الجواب وتقفز فوق المشكلة. [قالب بيان المشكلة](https://laithjunaidy.com/ar/store/problem-statement) مجاني.

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

### بيان الفرضية (Hypothesis statement)

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

### السرديات (Narratives)

قصة قصيرة نثرية عن يوم شخص واحد والمنتج جزء منه. استخدمها لتري صاحب مصلحة أين يدخل المنتج في روتين حقيقي. وأبقها مربوطة بالبحث. مقال Nielsen Norman Group عن [انحيازات السرد](https://www.nngroup.com/articles/narrative-biases/) يحذر من أن العاملين في تجربة المستخدم يثقون أكثر من اللازم بتفاصيل القصة وبتفسيرات السبب والنتيجة. القصة الجيدة تقنع سواء كانت صحيحة أم لا، لذلك يجب أن تعود كل جملة فيها إلى شيء فعله مستخدم.

### طريقة كيف يمكننا (HMW method)

"كيف يمكننا" (How might we) تعيد كتابة كل مشكلة كسؤال مفتوح بما يكفي لعدة أجوبة، وضيق بما يكفي لتعمل عليه. مقال Nielsen Norman Group عن [أسئلة How might we](https://www.nngroup.com/articles/how-might-we-questions/) يرى أن هذه الصيغة تمنع الناس من دفع حلولهم المفضلة التي لا علاقة كبيرة لها بالمشاكل المكتشفة، وتبقي توليد الأفكار مركزا على المشكلة الصحيحة.

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

**كيف تطبقها**

1. خذ بيان المشكلة وكل محور قوي من خريطة التقارب.
2. اكتب سؤالا واحدا لكل ألم: "كيف يمكننا أن نعرض رسوم التوصيل قبل أن تختار رنا المشروب؟"
3. افحص العرض. "كيف يمكننا أن نحسن القهوة؟" واسع جدا. "كيف يمكننا أن نضيف ملصق الرسوم إلى رأس الصفحة؟" حل متنكر.
4. تحت كل سؤال اكتب سطرا عن ما يفتحه، من دون أن تسمي ميزة.
5. صوتوا على ثلاثة أسئلة تأخذونها إلى توليد الأفكار.

**بماذا تخرج:** موجزات لتوليد الأفكار، كل واحد منها يشير إلى ألم حقيقي. **والخطأ الشائع** أن تكتب الكثير. عشرون سؤالا "كيف يمكننا" تصبح قائمة مهام، والفريق لا يعمل على عشرين موجزا. [قالب بيان المشكلة](https://laithjunaidy.com/ar/store/problem-statement) المجاني فيه ستة. **مع Claude**، اطلب منه أن يعيد كتابة قائمتك بحيث لا يسمي أي سؤال حلا، ولا يكون أي سؤال أوسع من لحظة واحدة في الرحلة. ثم تحقق أنه لم يغير المشكلة بهدوء.

### رسم خريطة الافتراضات (Assumptions mapping)

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

### تحليل المهام (Task analysis)

قسم هدفا واحدا إلى كل خطوة وكل قرار يتخذه المستخدم ليصل إليه، ومنها الخطوات التي تحدث خارج منتجك. مقال Nielsen Norman Group عن [تحليل المهام](https://www.nngroup.com/articles/task-analysis/) يسميه الدراسة المنهجية لطريقة إنجاز المستخدمين لمهامهم حتى يصلوا إلى أهدافهم. استخدمه للعمل المعقد أو عمل الخبراء. تخرج بخطوات تحذفها أو تدمجها أو تجعلها تلقائية. جولة السرعة على كاونتر Dot كانت تحليل مهام في الواقع: عددنا كل نقرة، وحذفنا النقرة التي تنقل التركيز من الهاتف إلى المبلغ، لأن الشاشة صارت تنتقل وحدها حين يكتمل رقم الهاتف.

### المهام المطلوب إنجازها (Jobs to be done)

نظرية المهام المطلوب إنجازها تصف التقدم الذي يحاول الشخص أن يحققه في موقف معين، أيا كان المنتج الذي يستخدمه لذلك. الناس يستأجرون منتجا لمهمة، ويطردونه حين لا يؤديها. كتبت عنها في [لا أحد يريد منتجك](https://laithjunaidy.com/ar/writing/nobody-wants-your-product)، مع [قصة الميلك شيك](https://www.library.hbs.edu/working-knowledge/clay-christensens-milkshake-marketing) عند Christensen: النكهات الجديدة لم تغير شيئا حتى عرفت السلسلة أن الناس يستأجرون الميلك شيك لرحلة طويلة ومملة إلى العمل.

استخدمها حين لا تفسر الفئات السكانية شيئا عن من يشتري. مقال Nielsen Norman Group عن [الشخصيات مقابل المهام المطلوب إنجازها](https://www.nngroup.com/articles/personas-jobs-be-done/) يقدم الرأي المقابل المفيد: المهام تركز على الاحتياجات والنتائج، لكنها لا تبني التعاطف كما تفعل الشخصية الجيدة، والاثنتان تعملان معا.

**كيف تطبقها**

1. من المقابلات، جد اللحظة التي يقرر فيها الشخص أن يتحرك.
2. اكتب المهمة في ثلاثة أسطر: عندما، أريد أن، حتى أستطيع.
3. استخدم كلمات الشخص. "عندما أفتح بن الساعة 9:40 وفي طلبين ينادي فيهم أحد من آخر المكتب" مهمة. "عندما أستخدم ميزة الطلب" وصف منتج.
4. اكتب ما يستأجره اليوم لهذه المهمة. هذه القائمة هي منافسوك.

**بماذا تخرج:** مهمة تعيش بعد أي إعادة تصميم، وقائمة منافسين فيها مجموعة الواتساب.

**الخطأ الشائع:** أن تكتب المهمة على الارتفاع الخطأ. "أشرب قهوة" أعلى من أن تصمم له. و"أضغط إعادة الطلب" أدنى من أن تتعلم منه.

### تحليل المنافسين (Competitive analysis)

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

## توليد الأفكار: كيف تصل من أفكار كثيرة إلى فكرة واحدة؟

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

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

![قالب مسار المستخدم لتطبيق بن: فتح التطبيق، قرار تسجيل الدخول، الرئيسية، اختيار المشروبات، قرار رسوم التوصيل، إتمام الطلب، الدفع، تتبع المندوب، تم التوصيل](https://laithjunaidy.com/store/user-flow/ar-light.jpg)

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

### جلسات العصف الذهني (Brainstorming sessions)

مجموعة تنتج أكبر عدد ممكن من الأفكار وتؤجل الحكم عليها. صفحة Interaction Design Foundation عن [العصف الذهني](https://ixdf.org/literature/topics/brainstorming) تقدمه كطريقة لتوليد الأفكار لمشكلة عرفتها بوضوح، وكلمة "بوضوح" هي التي تقوم بالعمل. أحضر أسئلة "كيف يمكننا". واطلب من كل شخص أن يكتب وحده خمس دقائق قبل أن يتكلم أحد، حتى لا يحدد أعلى صوت الاتجاه. تخرج بكمية. والخطأ الشائع أن تناقش الأفكار أثناء الجلسة.

### الخرائط الذهنية (Mind maps)

موضوع واحد في الوسط، وأفكار مرتبطة تتفرع منه. استخدمها وحدك أو مع شخص آخر لتغطي مساحة بسرعة. صفحة Interaction Design Foundation عن [الخرائط الذهنية](https://ixdf.org/literature/topics/mind-maps) تعاملها كطريقة لتصور الأفكار والروابط بينها. تخرج بروابط كانت ستفوتك في قائمة، وأحيانا بمسودة أولى للتنقل.

### القصص المصورة (Storyboards)

بضعة إطارات على طريقة القصص المصورة لمستخدم يواجه المشكلة، ثم الحل. ارسمها قبل الشاشات لتتحقق أن الفكرة تصمد في موقف حقيقي، مثل مرب في الحظيرة ويداه متسختان. مقال Nielsen Norman Group عن [القصص المصورة](https://www.nngroup.com/articles/storyboards-visualize-ideas/) يرى أنها تشد الانتباه وتعطي الوضوح. تخرج بقصة يفهمها صاحب المصلحة في دقيقة. والرسوم البسيطة بالخطوط تكفي.

### فرز البطاقات (Card sorting)

في فرز البطاقات يجمع المشاركون محتواك في فئات منطقية بالنسبة لهم. وفي الفرز المفتوح يسمون الفئات أيضا. مقال Nielsen Norman Group عن [Card sorting](https://www.nngroup.com/articles/card-sorting-definition/) يقول إنه يكشف النماذج الذهنية للمستخدمين عن بنية معلوماتك، ويعطي الأرقام: 15 مشاركا على الأقل للفرز النوعي، ومن 30 إلى 50 للفرز الكمي. ويحذر أيضا من أن الأسماء التي يخترعها المشاركون نادرا ما تكون أسماءك النهائية، وينصح باختبار الشجرة (tree testing) بدل الفرز المغلق لفحص التنقل.

طبقه قبل أن تصمم التنقل لأي شيء فيه أكثر من اثني عشر عنصرا.

**كيف تطبقه**

1. اكتب من 30 إلى 60 بطاقة، كل بطاقة قطعة محتوى واحدة، بكلمات بسيطة. تجنب الأسماء التي تنوي استخدامها، وإلا ستختبرها هي فقط.
2. أجر فرزا مفتوحا: يجمع المشاركون البطاقات ويسمون كل مجموعة. واطلب منهم أن يفكروا بصوت عال.
3. ابحث عن البطاقات التي تجتمع معا عند معظم المشاركين، وعن البطاقات التي تقع في كل مكان. هذه أصعب مشاكل التسمية عندك.
4. اكتب مسودة البنية، ثم افحصها باختبار الشجرة.

**بماذا تخرج:** المجموعات التي يتوقعها المستخدمون، والمحتوى الذي سيربكهم أينما وضعته.

**الخطأ الشائع:** أن تفرز البطاقات بنفسك. النموذج الذهني للفريق هو الذي بنى التنقل المربك أصلا.

### رحلة المستخدم (User journey)

المسار الرئيسي الذي يسلكه المستخدم إلى هدف واحد في منتجك، على مستوى أعلى من مسار المستخدم. مقال Nielsen Norman Group عن [رحلات المستخدم ومسارات المستخدم](https://www.nngroup.com/articles/user-journeys-vs-user-flows/) يشرح أن الاثنين يصفان عمليات يمر بها المستخدم ليصل إلى هدف، لكنهما يختلفان في النطاق والغرض والشكل. في وفرة تابعت الرحلة عوض من الاكتشاف إلى الشك ثم التجربة ثم القرار، ووضعت الدليل في النقطة التي سيتردد فيها بالضبط. استخدمها لتتفقوا على المسارات الرئيسية قبل التفاصيل.

### مسار المستخدم (User flow)

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

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

ارسمه قبل الشاشات، لكل مهمة فيها قرار.

**كيف تطبقه**

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

**بماذا تخرج:** القائمة الكاملة للشاشات والحالات. وهي دائما أطول من التخمين الأول.

**الخطأ الشائع:** أن ترسم الطريق السعيد فقط، وهو الطريق الوحيد الذي لا يحتاج إلى تصميم. [قالب مسار المستخدم](https://laithjunaidy.com/ar/store/user-flow) مجاني، ومسارا نعم ولا مرسومان فيه.

**مع Claude.** صف المهمة والصق الطريق السعيد، ثم اطلب: "اكتب كل حالة فشل لكل خطوة: إدخال غير صالح، انتهاء المهلة، عدم الاتصال، النقر مرتين، رفض الإذن، بيانات فارغة. ولكل حالة، قل ماذا يرى المستخدم وإلى أين يذهب بعدها." ثم تحقق أن كل حالة تسمي الحقل والحل، كما يفعل كاونتر Dot في نسخته الإنجليزية: "Nothing added. Phone is short by 1." أي: الكاونتر لم يضف شيئا، ورقم الهاتف ينقصه رقم واحد.

### بنية المعلومات (Information architecture)

بنية المعلومات هي طريقة تنظيم المحتوى وتسميته وربطه. مقال Nielsen Norman Group عن [بنية المعلومات والتنقل](https://www.nngroup.com/articles/ia-vs-navigation/) يرسم الخط بوضوح: بنية المعلومات هي العمود الفقري للمعلومات، وتوثقها في جداول ومخططات، والتنقل هو الجزء من الواجهة الذي يوصل الناس إليها.

في وفرة غطت بنية المعلومات القطعان، وحاسبة التغذية، والإرشادات البيئية، والسوق، ومكتبة المعرفة، والحساب، مع إظهار تدريجي يجعل المربي الجديد يرى الأساسيات، ويسمح للخبير أن يتعمق. وفي [زين كاش](https://laithjunaidy.com/ar/writing/redesigning-zain-cash) وضعت إشارات المعلومات العربية أولا (information scent) الدلائل في المكان الذي يتوقعه قارئ يقرأ من اليمين إلى اليسار.

**كيف تطبقها**

1. اجرد كل قطعة محتوى وكل مهمة.
2. اجمعها كما جمعها المشاركون في فرز البطاقات.
3. سم كل مجموعة بالكلمات التي استخدمها المستخدمون في المقابلات.
4. قرر العمق: ما الذي يبعد نقرة واحدة، وما الذي يقع خلفه.
5. اختبر البنية باختبار الشجرة قبل أي تصميم بصري.

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

### خريطة الموقع (Sitemap)

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


![جزء من خريطة موقع تطبيق iBuild للمشترين: فروع الملف الشخصي والإعدادات، ومركز الدعم، والولاء، وكل صفحة مربع](https://laithjunaidy.com/writing/design-process/ibuild-sitemap.jpg)

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

### مخططات الخدمة (Service blueprints)

خريطة رحلة تمتد تحت السطح: ما يفعله الموظفون والأنظمة والشركاء خلف كل خطوة يراها المستخدم. تعريف Nielsen Norman Group لـ[Service blueprints](https://www.nngroup.com/articles/service-blueprints-definition/) يقدمها كطريقة لتصور العمليات داخل المؤسسة التي تقف خلف التجربة. استخدم واحدا حين يعتمد المنتج على التشغيل: التوصيل، والدعم، والكاونتر. في كاونتر Dot، يتحرك الكاشير وفحوص الاحتيال ودفتر الحسابات كلهم على نقرة واحدة. تخرج بالعطل الذي يحدث خلف الكواليس ويقف وراء الشكوى التي تراها في الواجهة.

### نموذج العمل التجاري (Business model canvas)

تسع خانات على صفحة واحدة: العملاء، والقيمة، والقنوات، والعلاقات، والإيرادات، والموارد، والأنشطة، والشركاء، والتكاليف. تنشر Strategyzer [المخطط](https://www.strategyzer.com/library/the-business-model-canvas) كقالب مجاني. استخدمه حين يغير قرار تصميم طريقة ربح الشركة، مثل باقة مجانية أو رسوم شريك. تخرج بكل خيار تصميم مربوطا بالخانة التي يحركها.

### أسوأ فكرة (Worst idea)

يقترح الفريق حلولا سيئة عمدا، ثم يقلب كل واحد منها. صفحة Interaction Design Foundation عن [أسوأ فكرة ممكنة](https://ixdf.org/literature/topics/worst-possible-idea) تصف هذا البحث المقلوب كطريقة لإراحة الفريق. استخدمها حين تتوقف الجلسة، أو حين يخاف الناس أن يبدوا سخفاء. "اخف الرسوم حتى بعد الدفع" تنقلب إلى "اعرض الرسوم قبل تسجيل الدخول".

### Crazy 8s

اطو ورقة إلى ثماني خانات وارسم ثماني أفكار في ثماني دقائق، دقيقة لكل فكرة. [Design Sprint Kit](https://designsprintkit.withgoogle.com/methodology/phase3-sketch/crazy-8s) من Google يضعها في مرحلة الرسم من السبرنت. الحد الزمني هو الطريقة نفسها: لا أحد يستطيع أن يلمع رسمة في دقيقة، فلا أحد يتعلق بها.

طبقها مباشرة بعد التصويت على أسئلة "كيف يمكننا"، وقبل أن يفتح أحد أداة تصميم. من دون سؤال محدد، ثماني رسمات لـ"التطبيق" هي ثمانية شعارات.

**كيف تطبقها**

1. خذ سؤال "كيف يمكننا" واحدا، وشاشة أو لحظة واحدة.
2. اطو ورقة A4 ثلاث مرات لتحصل على ثماني خانات.
3. اضبط مؤقتا على ثماني دقائق. فكرة واحدة في كل خانة. بصمت.
4. يعرض كل شخص ورقته في دقيقتين. بلا نقد بعد.
5. يضع الجميع نقاط تصويت على الخانات التي سيبنونها، ثم يختار صاحب القرار.

**بماذا تخرج:** ثمانية خيارات أولية لكل شخص.

**الخطأ الشائع:** أن تسمح للناس بترك خانات فارغة. الفكرة البديهية تنفد عند الرسمة الخامسة تقريبا، وهناك تبدأ الأفكار المفيدة.

### تحدي الافتراضات (Challenging assumptions)

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

### الرسم السريع وجلسات الرسم (Sketching and sketch-storming)

رسومات تقريبية على الورق، سريعة وترميها بعد استخدامها، وحدك أو في جولات بوقت محدد مع الفريق. صفحة Interaction Design Foundation عن [الرسومات التخطيطية](https://ixdf.org/literature/topics/sketch) تصفها بأنها تمثيلات أولية مرسومة باليد لنتائج البحث والواجهات والتفاعلات. ارسم قبل أي أداة تصميم، لأن الأداة تجعل كل شيء يبدو منتهيا.

### مبادئ تصميم المنتج (Product design principles)

بضع جمل تحسم المفاضلات التي تتكرر. مقال Nielsen Norman Group عن [مبادئ التصميم](https://www.nngroup.com/articles/design-principles/) يسميها جمل قيم تؤطر القرارات وتبقيها متسقة بين الفرق. وفرة كان لها خمسة: المراعاة، والتمكين، والثقة، والكفاءة، والألفة. "الكفاءة" عنت حذف الخطوات، وإضافة التمهل فقط قبل القرارات المهمة. اكتبها حين يعيد الفريق النقاش نفسه مرة بعد مرة. المبدأ الذي لا يستطيع أحد أن يرفض به فكرة مجرد زينة.

### لوحة المزاج (Moodboard)

صور وخطوط وألوان وخامات تجمعها لتحدد اتجاها بصريا. مقال Nielsen Norman Group عن [لوحات المزاج](https://www.nngroup.com/articles/mood-boards/) يعاملها كطريقة لجمع الإلهام ولاختيار الاتجاه البصري. اسحب مراجعك من خارج مجالك. حين قرأنا [150 مشروعا مبنيا على shadcn/ui](https://laithjunaidy.com/ar/writing/taken-apart-shadcn-defaults)، كان معظمها يعمل على واحد من خطين، ولون أساسي رمادي. لوحة المزاج التي تبنيها من منافسيك فقط تنتج المنتج نفسه.

### بلاطات الستايل (Style tiles)

لوحة واحدة فيها الخطوط والألوان وعناصر الواجهة مطبقة، بلا تخطيط صفحة. قدمت Samantha Warren [Style Tiles](https://styletil.es/) كخطوة بين لوحة المزاج والتصميم الكامل. اعرض اثنتين أو ثلاثا، ولا تعرض واحدة أبدا. البلاطة الواحدة سؤال جوابه نعم أو لا.

### إرشادات الستايل (Style guidelines)

القواعد المكتوبة للخط واللون والمسافات والصور والنبرة. اكتب السبب بجانب كل قاعدة، حتى يستطيع المصمم التالي أن يبني عليها بدل أن يكسرها. قاعدة مثل [لا أسود صرف في الوضع الداكن](https://laithjunaidy.com/ar/writing/stop-using-pure-black-in-dark-mode) تعيش أطول حين تقول لماذا: يتعب العين ويسطح العمق.

### ديزاين سيستم (Design system)

دليل الستايل وقد تحول إلى مكونات وتوكنز وتوثيق مشترك يستخدمه التصميم والكود معا. مقال Nielsen Norman Group [Design Systems 101](https://www.nngroup.com/articles/design-systems-101/) يعرفه بأنه مجموعة معايير لإدارة التصميم على نطاق واسع، تقلل التكرار وتصنع لغة مشتركة. و[GOV.UK Design System](https://design-system.service.gov.uk/) نظام عام يستحق القراءة. يستحق تكلفته حين يبني أكثر من فريق أو منتج على الواجهة نفسها.

![أربع صفحات هبوط ولدها ux-skill من أربعة موجزات: عيادة عائلية، وأداة للمطورين، ومطعم عائلي، وتطبيق فواتير عربي](https://laithjunaidy.com/writing/design-process/uxskill-4-brands.jpg)

*أربعة موجزات، أربعة ديزاين سيستم، ومحرك واحد. تجربة على النسخة القادمة من ux-skill، وكل بناء نجح في 680 فحص WCAG بلا أي فشل. العلامات متخيلة.*

هذه هي الفكرة خلف [ux-skill](https://laithjunaidy.com/ar/research/ux-skill): ديزاين سيستم يبنيه المحرك من الموجز، بدل قالب واحد يلصقه على كل شيء. شرحت السبب في [مواصفات العلامة التجارية بيانات تدريب](https://laithjunaidy.com/ar/writing/brand-specs-are-training-data). كاونتر Dot يعمل على ديزاين سيستم Dot، وتصاميم جولة السرعة لم تخترع شيئا على مستوى التوكنز: كل قيمة جاءت من ملف التوكنز، وكل ما كان ينقص النظام دخل في قائمة إضافات. تخرج بشاشات تركبها بدل أن تعيد رسمها. والخطأ الشائع أن تبني المكونات قبل أن تتكرر الأنماط. النظام الذي تبنيه مبكرا جدا يحفظ تخميناتك الأولى. [حزمة الديزاين سيستم كمهارة](https://laithjunaidy.com/ar/store/dsskill) تعلم Claude Code التوكنز الخاصة بك.

### مصفوفة الأولويات (Prioritisation matrix)

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

![مصفوفة الأثر والجهد لتطبيق بن: اثنتا عشرة فكرة في أربعة أرباع مع قائمة مرتبة بالنتيجة](https://laithjunaidy.com/store/prioritisation-matrix/ar-light.jpg)

*اثنتا عشرة فكرة من اختبار قابلية الاستخدام وخريطة الرحلة. "اعرض الرسوم براس القائمة" تأخذ 25 من 25. ونقاط الولاء والشارات تأخذ 2.*

[مصفوفة الأولويات](https://laithjunaidy.com/ar/store/prioritisation-matrix) مجانية.

## النموذج الأولي: كم تبني قبل أن تعرف؟

النموذج الأولي سؤال بشكل يستطيع الناس أن يلمسوه. دليل Nielsen Norman Group عن [النماذج منخفضة الدقة وعالية الدقة](https://www.nngroup.com/articles/ux-prototype-hi-lo-fidelity/) يسميه فرضية، حلا مرشحا تختبره بمراقبة الناس وهم يستخدمونه، ويضيف الجملة التي يجب أن يعلقها كل فريق على الحائط: تمزيق الكود مكلف جدا، وتمزيق النموذج الأولي ليس مكلفا.

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

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

![شاشتان من لوحة البائع في Bysooq: لوحة بإجمالي المبيعات والزيارات والتحويل والطلبات، وشبكة المنتجات بالمخزون والأسعار](https://laithjunaidy.com/writing/design-process/bysooq-hifi.jpg)

*[Bysooq](https://laithjunaidy.com/ar/work/bysooq)، تجارة إلكترونية للعراق والأردن: لوحة البائع وشاشة المنتجات بدقة عالية. بيانات واقعية، وكل حالة مصممة، وكل نص نهائي. هنا يظهر مستوى التصميم.*

### النموذج الورقي (Paper prototype)

شاشات مرسومة على الورق، تبدلها بيدك بينما ينقر المستخدم بإصبعه. مقال Nielsen Norman Group عن [النماذج الورقية](https://www.nngroup.com/articles/paper-prototyping/) يرى أنها تسمح لك باختبار الأفكار المبكرة بتكلفة منخفضة جدا، وبإصلاح مشاكل قابلية الاستخدام قبل أن تدفع لتنفيذ شيء لا يعمل. استخدمه لأبكر اختبار للمسار والصياغة. الناس ينتقدون الورق بحرية لأنه لم يكلف شيئا بوضوح. تخرج بمشاكل اكتشفتها قبل أن يفتح أحد أداة تصميم.

### التفاعلات الدقيقة (Micro-interactions)

لحظات الاستجابة الصغيرة: مفتاح تشغيل، وسحب للتحديث، وخطأ يظهر تحت حقله. مقال Nielsen Norman Group عن [Microinteractions](https://www.nngroup.com/articles/microinteractions/) يقول إنها تظهر حالة النظام، وتساعد على منع الأخطاء، وتحمل شخصية العلامة، وكل واحدة منها تبدأ بمحفز ولها غرض واحد. صممها بعد أن يعمل المسار. في كاونتر Dot، أهم تفاعل دقيق غير مرئي: انتقال التركيز من الهاتف إلى المبلغ لحظة يكتمل آخر رقم. ومواصفات جولة السرعة حذفت أيضا حركة ظهور تدريجي مدتها 600 ملي ثانية كانت تعمل في كل زيارة. الحركة التي تبطئ كاونترا مزدحما ليست لمسة جمالية.

### مسارات المستخدم المفصلة (Detailed user flows)

مسار مرحلة توليد الأفكار، مضافة إليه كل الحالات: الفارغة، والتحميل، والخطأ، والنجاح، وعدم الاتصال، والحالات الطرفية. الـ[Wireflows](https://www.nngroup.com/articles/wireflows/) عند Nielsen Norman Group تجمع الوايرفريم والمخطط الانسيابي لهذا الغرض بالضبط. مواصفات جولة السرعة في Dot تذكر ثماني حالات لشاشة واحدة، من الخمول إلى حظر الاحتيال إلى عدم الاتصال، وتقول في كل حالة ماذا يرى الكاشير، وأين يذهب التركيز، وماذا يفعل الزر. ارسمها قبل الدقة العالية. تخرج بالقائمة الكاملة للشاشات، وهي في العادة أطول من التقدير الأول.

### التصاميم الثابتة (Mock-ups)

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

### النموذج التفاعلي (Interactive prototype)

شاشات مربوطة ينقر عليها المستخدم أو يلمسها، قريبة من الشيء الحقيقي بما يكفي لينسى الناس أنه مزيف. دليل GOV.UK Service Manual عن [صنع النماذج الأولية](https://www.gov.uk/service-manual/design/making-prototypes) يعامل النماذج كطريقة لتجربة أفكار التصميم مع المستخدمين وأنت تبني الخدمة.

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

**كيف تطبقه**

1. اكتب السؤال الذي يجب أن يجيب عنه النموذج. "هل تستطيع رنا أن تبدأ طلبا جماعيا من دون مساعدة؟" سؤال. "هل التطبيق يعمل؟" ليس سؤالا.
2. ابن فقط شاشات المسار الذي تختبره، مع حالات الخطأ التي سيصادفها الناس.
3. استخدم محتوى حقيقيا: أسعارا حقيقية، وأسماء حقيقية، وعربية حقيقية. نص Lorem ipsum يخفي كل مشكلة في التخطيط.
4. شغله على هاتف المشارك نفسه حين تستطيع. النموذج على شاشة المصمم الكبيرة يختبر الشاشة.
5. أصلح المشاكل الواضحة بين الجلسات.

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

**الخطأ الشائع:** أن تبني نموذجا لكل شيء. نموذج من 60 شاشة يأخذ وقتا طويلا جدا، فيتعلق به الفريق ولا يغيره.

![خريطة لعبة استراتيجية واحدة مرتين: على اليسار النسخة الأولى بمجسمات على أرض عارية، وعلى اليمين القاعدة نفسها بعد عدة جولات عمل، مع تضاريس وطرق ومبان](https://laithjunaidy.com/writing/design-process/rts-before-after.jpg)

*لعبة استراتيجية أبنيها مع Claude. الخريطة نفسها واللعبة نفسها. على اليسار النسخة الأولى، وعلى اليمين النسخة بعد عدة جولات عمل. لا شيء يخرج صحيحا من المرة الأولى.*

### الوايرفريم (Wireframes)

الوايرفريم تخطيطات منخفضة الدقة: البنية والتسلسل الهرمي والمحتوى، بلا أي ستايل بصري. صفحة Interaction Design Foundation عن [Wireframing](https://ixdf.org/literature/topics/wireframe) تصفها بأنها تمثيلات أساسية لبنية الواجهة وتخطيطها. قيمتها في ما تتركه. حين لا يوجد لون، يبقى النقاش الوحيد عن ما يذهب أين، وما الأهم.

**كيف تطبقها**

1. ابدأ من المسار المفصل. وايرفريم واحد لكل شاشة ولكل حالة مهمة.
2. رتب المحتوى حسب أهميته للمهمة. في كاونتر Dot: الهاتف، ثم العميل، ثم المبلغ، ثم الزر.
3. حدد الفعل الرئيسي الواحد في كل شاشة. إن لم تستطع أن تختار واحدا، فالشاشة تقوم بعملين.
4. افحص سهولة الوصول. الزر الرئيسي في كاونتر Dot يقع في منطقة الإبهام، فوق لوحة الأرقام مباشرة، وهذا [قانون فيتس](https://laithjunaidy.com/ar/writing/fitts-law-bigger-and-closer) يعمل: الشيء المهم أكبر وأقرب.
5. إن كان المنتج عربيا، ارسم نسخة اليمين إلى اليسار الآن. القلب المتأخر يكسر التخطيطات.

**بماذا تخرج:** هيكل متفق عليه لكل شاشة قبل أن يتجادل أحد على اللون.

**الخطأ الشائع:** وايرفريم مصقول لدرجة أن الناس يراجعونه كتصميم منته.

### التصاميم عالية الدقة (High fidelity designs)

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

### التسليم (Hand-off)

التسليم هو كل ما يحتاجه المطور ليبني التصميم من دون أن يخمن: الشاشات بترتيب المسار، والروابط بينها، وكل حالة، والتوكنز، والسلوك. كتبت النسخة الكاملة في [تسليم التصميم](https://laithjunaidy.com/ar/writing/design-handoff-to-developers)، والقاعدة منها تنطبق هنا: التسليم منتج قائم بذاته، وليس تصديرا، والمهندس هو أهم مستخدم لملفك.

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

![شاشة تفاصيل طلب في Bysooq: المواد، والعميل، والدفع والتوصيل، والخط الزمني للطلب](https://laithjunaidy.com/writing/design-process/bysooq-order-details.jpg)

*شاشة تفاصيل طلب في Bysooq. التسليم يحمل كل حقل وكل حالة خلف شاشة كهذه، لا صورتها فقط.*

**كيف تطبقه**

1. رتب الشاشات وسمها حسب المسار: "الكاونتر، رقم هاتف غير صالح"، وليس "Screen 12 final v3".
2. سلم كل حالة بالعناية نفسها التي تسلم بها الطريق السعيد. مواصفات Dot فيها جدول: الحالة، وما يراه الكاشير، وأين يذهب التركيز، وماذا يقول الزر.
3. اكتب قواعد النص مع النص نفسه. في Dot، كل سطر فشل يبدأ بحقيقة دفتر الحسابات، "Nothing added."، أي الكاونتر لم يضف شيئا، لأن أول سؤال عند الكاشير بعد أي خطأ هو إن كانت العملية تمت.
4. اكتب القواعد غير المرئية: لا تمسح أبدا ما كتبه الكاشير عند الخطأ، وارجع إلى الشاشة الخاملة بعد 30 ثانية حتى لا يرى العميل التالي رصيد العميل السابق.
5. ابق متاحا طوال البناء، وراجع رابط الـ staging.

**بماذا تخرج:** أسئلة أقل في منتصف السبرنت.

**الخطأ الشائع:** أن تسلم صورا. الشاشة تقول ماذا تبني، ولا تقول أبدا كيف يتصرف.

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

### توثيق التصميم (Design documentation)

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

### نماذج HTML/JS (HTML/JS prototypes)

نموذج أولي مكتوب بالكود في الوسط الحقيقي. استخدمه حين يعتمد السؤال على بيانات حقيقية، أو سرعة، أو حركة، أو لوحة مفاتيح، أو إيماءة لا تستطيع أداة التصميم أن تزيفها. الانتقال التلقائي وسلوك لوحة المفاتيح لا يوجدان في إطار ثابت، لذلك لم يكن ممكنا إثبات عدد النقرات في Dot إلا بالكود. مع Claude Code وديزاين سيستم، النموذج المكتوب بالكود أسرع في الغالب من النموذج القابل للنقر. [دليل Claude Code وFigma](https://laithjunaidy.com/ar/store/system) المجاني يشرح الإعداد. والخطأ الشائع أن تطلق النموذج من دون اختبارات.

## الاختبار: كيف تعرف إن كان يعمل؟

في الاختبار يتوقف الفريق عن أن يكون هو الحكم. مقال Nielsen Norman Group [Usability Testing 101](https://www.nngroup.com/articles/usability-testing-101/) يقول إن أفضل المصممين لا يستطيعون أن يصلوا بالواجهة إلى الصواب من دون تصميم متكرر يقوده مراقبة مستخدمين حقيقيين.

ما الذي يحدث حين تتجاوز الفرق هذه المرحلة: تكتشف المشاكل عبر تذاكر الدعم، عميلا غاضبا بعد عميل، بعد أن تكون صرفت الميزانية.

![قالب اختبار قابلية الاستخدام لتطبيق بن: الخطة، وخمس مهام بنتائج نجاح وجزئي وفشل، والنتائج مرتبة حسب الخطورة مع اقتباسات الدليل](https://laithjunaidy.com/store/usability-test/ar-light.jpg)

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

### اختبار قابلية الاستخدام (Usability testing)

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

كم شخصا تحتاج؟ مقال Nielsen [لماذا تحتاج أن تختبر مع 5 مستخدمين فقط](https://www.nngroup.com/articles/why-you-only-need-to-test-with-5-users/) يبين أن أول خمسة مستخدمين يجدون نحو 85 بالمئة من مشاكل قابلية الاستخدام، وأن العثور عليها كلها يحتاج 15 مستخدما على الأقل، لكن الأفضل أن تصرف هؤلاء الـ15 على ثلاث جولات من خمسة، وتصلح التصميم بين الجولات.

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

**كيف تطبقه**

1. اكتب الهدف، ثم خمس مهام على شكل سيناريوهات واقعية لكل منها شرط نجاح وحد زمني: "أنت في المكتب وبدك فلات وايت. قبل ما تختار أي إشي، اعرف قديش التوصيل."
2. اختر خمسة أشخاص يطابقون الشخصية. أجر جلسة تجريبية أولا لتلتقط المهام المكسورة.
3. اطلب منهم أن يفكروا بصوت عال. لا تساعد. حين يسألون "ماذا أفعل؟"، أجب: "ماذا كنت ستفعل لو لم أكن هنا؟"
4. علم كل مهمة نجاحا أو جزئيا أو فشلا، وسجل الوقت والاقتباس في اللحظة التي حدث فيها الخطأ.
5. سجل كل نتيجة مع خطورتها، ومكان حدوثها، واقتباس الدليل، والحل. النتائج الحرجة تنطلق أولا.

**بماذا تخرج:** أين يعلق الناس، ولماذا، والاقتباس الذي يقنع صاحب المصلحة الذي كان واثقا أن كل شيء بخير.

**الخطأ الشائع:** أن تختبر مع زملائك. هم يعرفون ماذا يجب أن يفعل الزر. [قالب اختبار قابلية الاستخدام](https://laithjunaidy.com/ar/store/usability-test) مجاني، وفيه الخطة والسكريبت وجدول النتائج.

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

### المرافقة (Shadowing)

رافق شخصا واحدا خلال يوم حقيقي يستخدم فيه المنتج أو الخدمة. صفحة Interaction Design Foundation عن [Shadowing](https://ixdf.org/literature/topics/shadowing) تصفها بأنها تقنية بحث قديمة، لم تدخل في الاستخدام المنتظم في أبحاث تجربة المستخدم إلا مؤخرا. استخدمها لأدوات العمل والخدمات التي تمتد لساعات، مثل وردية كاشير. تخرج بطريقة تناسب المنتج مع بقية العمل، أو بالمكان الذي لا يناسبه فيه. واتفق مسبقا على الأوقات التي يحق لك فيها أن تسأل، حتى لا تقاطع العمل الذي جئت لتراقبه.

### اختبار A/B (A/B testing)

اختبار A/B يشغل نسختين حيتين من تصميم، ويقسم الزيارات الحقيقية بينهما عشوائيا، ويقارن مقياسا واحدا. مقال Nielsen Norman Group [A/B testing 101](https://www.nngroup.com/articles/ab-testing/) يعرفه بأنه طريقة كمية لتعرف أي نسخة تؤدي أفضل مقابل مقياس عمل محدد مسبقا، ويقول إن النسخة البديلة يجب أن تختلف عن الأصلية في عنصر واحد فقط في الحالة المثالية.

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

**كيف تطبقه**

1. ابدأ من فرضية مبنية على البحث: "عرض الرسوم براس القائمة سيرفع معدل الانتقال من القائمة إلى الدفع."
2. غير شيئا واحدا. إن غيرت شيئين لن تعرف أيهما نجح.
3. اختر المقياس وحجم العينة قبل الإطلاق، ومعهما المدة.
4. لا توقف الاختبار مبكرا حين يبدو الخط جيدا. النظرات المبكرة تصنع فائزين مزيفين.
5. احتفظ بالنسخة البديلة فقط إن فازت بدلالة إحصائية.

**الخطأ الشائع:** أن تعامل الفائز كتفسير. اختبار A/B يقول لك أي نسخة فازت. واختبار قابلية الاستخدام يقول لك لماذا خسرت الأخرى.

### اختبار SUS (SUS testing)

مقياس قابلية استخدام النظام (System Usability Scale) عشر عبارات، لكل منها خمسة خيارات للإجابة، تعطيها للمشارك مباشرة بعد جلسة قابلية الاستخدام. [دليل SUS](https://measuringu.com/sus/) من MeasuringU يسجل أن John Brooke أطلقه في 1986 كمقياس "سريع وخشن"، وأن الباحثين اختبروه منذ ذلك الحين على الأجهزة والبرمجيات والمواقع والهواتف، وأن متوسط النتيجة عبر 500 دراسة هو 68.

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

**كيف تطبقه**

1. استخدم العبارات العشر القياسية من دون تغيير. وترجمها بعناية إن كنت تختبر بالعربية، وحافظ على ترتيبها.
2. أعطه بعد المهام، وقبل أي نقاش.
3. احسب النتيجة: في البنود الفردية اطرح 1 من الإجابة، وفي البنود الزوجية اطرح الإجابة من 5. اجمع النتائج العشر واضربها في 2.5. المجموع بين 0 و100.
4. قارن بالـ68 وبجولتك السابقة.

**الخطأ الشائع:** أن تقرأ النتيجة كنسبة مئوية. نقطة MeasuringU أن 68 هو المتوسط، فالـ70 بالكاد فوقه، ولا تعني أن المنتج "قابل للاستخدام بنسبة 70 بالمئة".

### التقييم الاستدلالي (Heuristic evaluation)

في التقييم الاستدلالي يراجع عدد قليل من المقيمين واجهة مقابل مجموعة مبادئ، وفي الغالب [مبادئ Jakob Nielsen العشرة لقابلية الاستخدام](https://www.nngroup.com/articles/ten-usability-heuristics/)، التي نشرها أول مرة في 1994. دليل Nielsen Norman Group عن [طريقة إجرائه](https://www.nngroup.com/articles/how-to-conduct-a-heuristic-evaluation/) يقول إنه جيد في اكتشاف المشاكل الصارخة، ويعمل على أي واجهة تقريبا ومنها النماذج الأولية، ومفيد بشكل خاص في وقت مبكر.

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

**كيف تطبقه**

1. ثبت النطاق: شخصية واحدة، ومهمة واحدة، وجهاز واحد.
2. اجعل كل مقيم يمر على المهمة وحده كما يفعل المستخدم، ثم مرة ثانية مقابل كل مبدأ.
3. أبق التقييمات منفصلة حتى ينتهي الجميع، كما يصر الدليل.
4. ادمج النتائج، واذكر المبدأ لكل واحدة، وحدد خطورتها.
5. أصلح الحرجة، ثم اختبر مع المستخدمين.

**بماذا تخرج:** قائمة مخالفات مرتبة حسب الخطورة، بتكلفة بعد ظهر واحد.

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

### التحليلات (Analytics)

بيانات السلوك من المنتج الحي: أين يترك الناس الطريق، وعن ماذا يبحثون، وأي المسارات يسلكون. اقرأها باستمرار. مقال Nielsen Norman Group عن [التحليلات في تجربة المستخدم](https://www.nngroup.com/articles/analytics-user-experience/) يرى أن التحليلات تضيف أكبر قيمة حين تربطها بالبحث النوعي بدل أن تستبدله بها. التحليلات تظهر أين المشكلة. والاختبار يظهر ما هي.

### اختبار الأداء (Performance testing)

قس سرعة تحميل المنتج واستجابته على أجهزة حقيقية وشبكات حقيقية. مقال Nielsen Norman Group عن [أزمنة الاستجابة](https://www.nngroup.com/articles/website-response-times/) يضع الحدود الثلاثة: 0.1 ثانية تبدو فورية، وثانية واحدة تحافظ على تدفق تفكير المستخدم، و10 ثوان هي حد الانتباه. وفي GOV.UK Service Manual دليل عملي عن [اختبار أداء الواجهة الأمامية](https://www.gov.uk/service-manual/technology/how-to-test-frontend-performance). السرعة كانت واحدة من ثلاث أفكار خلف [إعادة تصميم زين كاش](https://laithjunaidy.com/ar/writing/redesigning-zain-cash)، لأن معظم زوارها على الهواتف. ومواصفات كاونتر Dot تشغل البحث عن العميل بينما يكتب الكاشير المبلغ، فلا شيء ينتظر الشبكة. اختبر على هاتف متوسط ببيانات الجوال، خارج شبكة المكتب السريعة.

### الملاحظة بعد الإطلاق (Observation)

مراقبة المنتج بعد إطلاقه في استخدام حقيقي، في مكانه الحقيقي. طبقها بعد الإطلاق، حين يستقر السلوك ويصير عادة. الـ[Contextual inquiry](https://www.nngroup.com/articles/contextual-inquiry/) عند Nielsen Norman Group تجمع الملاحظة مع المقابلة في السياق لتكشف ما تفوته الطرق الأخرى. تخرج بالفجوة بين الطريقة التي صممت المنتج ليستخدمه الناس بها، والطريقة التي يستخدمونه بها فعلا. الكاشير الذي يتعلم أن يكتب الهاتف بإبهام واحد وهو يمسك كوبا يقول لك أين تبدأ جولة السرعة القادمة.

### ملاحظات الجاذبية (Desirability observations)

اعرض التصميم، واطلب من الناس أن يختاروا من قائمة كلمات ثابتة الكلمات التي تصفه، ثم يشرحوا كل اختيار. دليل Nielsen Norman Group عن [Microsoft Desirability Toolkit](https://www.nngroup.com/articles/microsoft-desirability-toolkit/) يقدمها كاختبار بمفردات محددة لمواقف الناس من تصميم. استخدمها لتختبر اتجاها بصريا بالدليل بدل الذوق. تخرج بجواب: هل يقرأ التصميم كما تريد العلامة؟ إن قصدت "هادئ" واختار الناس "فارغ"، فالخطأ في لوحة المزاج.

### المقاييس بعد الإطلاق (Metrics)

الأرقام التي اخترتها في مرحلة التعاطف، تقيسها من جديد. افحصها بعد الإطلاق ثم على جدول منتظم. دليل GOV.UK Service Manual عن [قياس النجاح](https://www.gov.uk/service-manual/measuring-success) يغطي القياس والتقارير والتحليلات خلفها. تخرج بجواب إن نجح التغيير، مقابل خط الأساس. المقياس الذي تحرك من دون خط أساس مجرد قصة.

### تتبع العين (Eye-tracking)

جهاز، أو برنامج يعمل بكاميرا الويب، يسجل أين ينظر الناس وكم من الوقت. صفحة Interaction Design Foundation عن [تتبع العين](https://ixdf.org/literature/topics/eye-tracking) تغطي استخدامه لدراسة التفاعل وقابلية الاستخدام. استخدمه لأسئلة ضيقة عن الانتباه، مثل: هل يرى أحد السعر أو التحذير؟ تخرج بخرائط حرارية. اقرأها بحذر: النظر ليس فهما، والنظرة الطويلة قد تعني الارتباك بقدر ما تعني الاهتمام.

## أي قالب يناسب أي مرحلة؟

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

| المرحلة | الطريقة | القالب المجاني |
| :- | :- | :- |
| التعاطف | مقابلات المستخدمين | [نص مقابلة المستخدم وملاحظاتها](https://laithjunaidy.com/ar/store/user-interview) |
| التعاطف | خريطة التقارب | [خريطة التقارب](https://laithjunaidy.com/ar/store/affinity-map) |
| التعريف | خريطة التعاطف | [خريطة التعاطف](https://laithjunaidy.com/ar/store/empathy-map) |
| التعريف | شخصية المستخدم | [شخصية المستخدم](https://laithjunaidy.com/ar/store/persona) |
| التعريف | بيان المشكلة، كيف يمكننا، المهام المطلوب إنجازها | [بيان المشكلة وكيف يمكننا](https://laithjunaidy.com/ar/store/problem-statement) |
| التعريف | خريطة رحلة المستخدم | [خريطة رحلة العميل](https://laithjunaidy.com/ar/store/customerjourney) |
| توليد الأفكار | مسار المستخدم | [مسار المستخدم](https://laithjunaidy.com/ar/store/user-flow) |
| توليد الأفكار | ترتيب الأولويات | [مصفوفة الأولويات](https://laithjunaidy.com/ar/store/prioritisation-matrix) |
| الاختبار | اختبار قابلية الاستخدام، SUS | [اختبار قابلية الاستخدام](https://laithjunaidy.com/ar/store/usability-test) |

القوالب التسعة متوفرة أيضا كحزمة مدفوعة واحدة، [UX AI Kit Pro Max](https://laithjunaidy.com/ar/store/uxkit)، مع أوامر Claude، ودليل لإدارة الجلسات، ومثال عملي ثان لكل قالب.

## أسئلة شائعة

### ما مراحل عملية التصميم الخمس؟

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

### هل تحتاج كل طريقة في قائمة عملية التصميم؟

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

### كم مستخدما تحتاج لاختبار قابلية الاستخدام؟

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

### أي طرق التصميم تعمل بلا ميزانية؟

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

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

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

### هل يستطيع الذكاء الاصطناعي أن يحل محل أبحاث المستخدمين؟

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

### أي الطرق أهم لمن يبني بالـ vibe coding مع الذكاء الاصطناعي؟

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

### من أين جاءت قائمة Barbara Vam؟

نشرت Barbara Vam قائمة [Design Process checklist](https://coconut-baroness-035.notion.site/Design-Process-checklist-7c07a8c25f1a42e385f5205faa8d93a8) كصفحة على Notion، مع ملاحظات قصيرة وروابط قراءة لمعظم الطرق. قائمة الطرق وترتيبها لها. والشروحات والقصص والقوالب هنا لي.