المخططات الهيكلية والنماذج منخفضة الدقةBuild Wireframes and Low-Fidelity Prototypes

مرحلة بناء النماذجIntroduction to Prototype

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

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

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

أنشطة المصمم في هذه المرحلة، بالترتيب:

1. اربط البحث بأهداف المشروع: قبل أي مخطط، راجع البحث واسأل: ما هدف المشروع؟ ومن المستخدم وما أهدافه؟ وما نوع المنتج وعلى أي جهاز؟ ومن المنافسون؟ وهل توجد تصاميم سابقة يُستلهم منها؟ وما المطلوب تسليمه؟
2. ارسم مخططات منخفضة الدقة: الوظيفة قبل الشكل. ارسم مسار المستخدم، وحدد ما يُدخله المستخدم وما يتوقع حدوثه، ثم ارسم أول المخططات، وابنِ هيكلها بمربعات وخطوط لا بمحتوى حقيقي.
3. حوّلها إلى مخططات رقمية عالية الدقة: في أداة مثل Figma، مع الشكل والمحتوى والتفاعل.
4. ابنِ نموذجًا قابلًا للنقر (Clickable Prototype): تربط الشاشات، وتجعل الأزرار قابلة للضغط، فيتضح التنقل والعلاقات والسلوك.
5. ابنِ نموذجًا وظيفيًا (Functional Prototype): مستوى أعلى يدعم التفاعلات الدقيقة (Microinteractions) والحركة والسحب والإفلات، وهو أقرب شيء للمنتج النهائي.

مسار المستخدمOutline a User Flow

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

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

أسئلة قبل الرسم: ما الأفعال التي سيقوم بها المستخدم؟ وأين يتخذ قراراته؟ وبعد كل فعل أو قرار، أي شاشة تظهر؟

رموز الرسم:

الـStoryboardStoryboards

عناصرها الأربعة:

• الشخصية (Character): المستخدم الأساسي.
• المشهد (Scene): البيئة أو السياق الذي هو فيه.
• الحبكة (Plot): الحل أو الفائدة التي يقدمها المنتج.
• السرد (Narrative): المشكلة، وكيف يحلها التصميم.

نوعان:

كيف ترسم Storyboard الصورة الكبيرة

1. بيان المشكلة:

2. بيان الهدف: ما الفائدة؟ وكيف تقيس النجاح؟

3. جهّز القالب: رسمًا يدويًا، أو قالب Storyboard الجاهز.

4. اكتب السيناريو: جملة واحدة تلخص المستخدم والمشكلة والحل.

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

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

7. اللوحة الأخيرة هي الهدف: المشكلة انحلت، والمستخدم راضٍ، والشعور إيجابي وواضح.

كيف ترسم Storyboard اللقطة القريبة

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

المخططات الهيكليةCreate Wireframes

وهو مهم جدًا في الـPortfolio، لأنه يُظهر تفكيرك وتخطيطك وتنظيمك للواجهة قبل التصميم.

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

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

التقييم الشامل (Holistic Assessment)
قبل أن تعتبر المخطط جاهزًا اسأل: هل كل العناصر الأساسية موجودة؟ وهل الترتيب منطقي؟ وهل كل شيء داخل الإطار؟ وهل الرموز متسقة مع المتعارف عليه؟
هذا يكشف الأخطاء مبكرًا ويحسن التنظيم. وفي العمل ستقيّم عملك وتعطي ملاحظاتك على عمل غيرك بالطريقة نفسها.

معمارية المعلوماتInformation Architecture (IA)

مكوّناتها الثلاثة:

• التنظيم (Organization): كيف ترتبط المعلومات ببعضها، وتجميعها بطريقة منطقية.
• التسلسل الهرمي (Hierarchy): هيكل شجري، العام في الأعلى والخاص تحته. والعناصر في المستوى نفسه نظائر (Peers).
• التتابع (Sequence): ترتيب الخطوات، وكيف ينتقل المستخدم من نقطة إلى أخرى.

مبادئ دان براون الثمانية (Dan Brown):

خريطة الموقعIA + Sitemap

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

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

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

المخططات الورقيةPaper Wireframes

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

الأدوات: ورقة فارغة (A4 أو أكبر)، وقلم أو رصاص. فقط.

الخطوات:

1. ارسم 5 نسخ للشاشة نفسها (مثلًا الرئيسية)، لتستكشف أكبر عدد من الأفكار. هو عصف ذهني لكنه مركّز.
2. التزم بالقواعد: مستطيل يمثل شاشة الجوال، املأه بعناصر القائمة، ولا تهتم بالجمال. وخصص دقيقتين لكل نسخة، أي 10 دقائق للصفحة.
3. قيّم واختر: ضع نجمة على أقوى العناصر، بناءً على احتياج المستخدم، وحل المشكلة، ووضوح الوظيفة.
4. ادمج الأفضل: اجمع العناصر المميزة بنجمة في نسخة واحدة محسّنة، وسمّها مثلًا Home V1. هذه أساس المخطط الرقمي لاحقًا.

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

مبادئ GestaltUsing Gestalt Principles

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

1. التشابه (Similarity): العناصر المتشابهة تُفهم أنها تؤدي الوظيفة نفسها. فالصور الرمزية بالشكل والحجم نفسيهما، والأزرار بالأسلوب نفسه، يفهمها المستخدم دون شرح.

2. التقارب (Proximity): العناصر القريبة تُفهم أنها مرتبطة. فزر «Learn more» يوضع قريبًا من نص المقال، والمسافة الكبيرة تربك، وثوانٍ من التردد قد تعني خروج المستخدم.

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

نموذج منخفض الدقة في FigmaLow-fidelity Prototype in Figma

الخطوات:

1. جهّز الشاشات: مخطط رقمي لكل شاشة في المسار، بالرمادي، مع نصوص مؤقتة.
2. انتقل إلى وضع Prototype في Figma.
3. اربط العناصر بالشاشات: اسحب من الزر أو العنصر إلى الشاشة التي يفتحها، وحدد التفاعل (On tap مثلًا) ونوع الانتقال.
4. حدد شاشة البداية (Starting Point) التي يبدأ منها الاختبار.
5. جرّب النموذج بنفسك: مرّ على المسار كاملًا، وتأكد أن كل زر يوصل إلى مكانه، وأن المستخدم يستطيع الرجوع.

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

للتوسع: مقال Figma عن النماذج منخفضة الدقة

التحيّز في تصميم UXBias in UX Design

العقل البشري يحب السرعة والاختصار، وهذا يولّد قرارات غير موضوعية. والتحيّز المعرفي (Cognitive Bias) يؤثر في تفسير البيانات واتخاذ القرارات، ويرتبط بطريقة عرض المعلومات وبالسياق.

أشهر أنواع التحيّز المعرفي:

منتجات فشلت بسبب التحيّز:

• أجهزة المسح في المطارات ميّزت ضد فئات متعددة لأن تصميمها لم يكن شاملًا.
• أنظمة الاسم الحقيقي أقصت من لا يستطيع استخدام اسمه القانوني أو لا يريد.
• أحزمة الأمان في السيارات صُممت على مقاس «الرجل المتوسط».
• موزعات الصابون الآلية لم تتعرف على البشرة الداكنة.

المشكلة ليست تقنية فقط، بل بحث غير شامل.

كيف تقلل التحيّز:

1. تعلّم أنواعه: ما لا تعرفه لا تستطيع معالجته.
2. راقب نفسك: افتراضاتك وتفضيلاتك. تأمل في دوافعك، وضع نفسك مكان غيرك.
3. لاحظه عند الآخرين: في فريقك وعند أصحاب المصلحة، وكن مستعدًا لتسميته.
4. اعتبر تصميمك فرضية: قد يغيّر البحث الاتجاه كله.
5. ركّز على الأثر لا الناتج: اعقد جلسة «ما قبل الفشل» (Pre-mortem): أين قد نفشل؟ ومن قد نؤذي؟ وكيف نمنع ذلك مبكرًا؟

الأنماط المضلِّلةDeceptive Patterns

مصطلح «Deceptive» (مضلِّل) أدق من «Dark» (مظلم)، لأنه يصف السلوك الخاطئ نفسه.

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

اقتصاد الانتباهAttention Economy

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

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

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

أفضل الممارسات:

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

أثرك كمصمم UXUnderstand Your Impact as a UX Designer

الثقافة السائدة (Dominant Culture)
يحددها غالبًا أصحاب النفوذ والامتياز، فتُتجاهل وجهات نظر أخرى ويُقصى مستخدمون. فلا تفترض أن «الأغلب» هو «الطبيعي»، واسأل نفسك دائمًا:

• كيف يختلف المستخدمون عني؟
• من الفئات غير الممثلة؟
• ما التحديات التي قد تواجهها؟
• إن كنت مرتاحًا، فمن قد لا يكون مرتاحًا؟

الفئات المهمّشة والفئات غير الممثلة

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

الحالات الطرفية (Edge Cases): حالات غير متوقعة لا يستطيع المستخدم حلها بنفسه. فتوقّعها، ووفّر مسارات بديلة تعيده إلى المسار السعيد. وتجاهلها تحيّز غير مقصود.

التصميم الشمولي والمساءلة: راعِ القدرة واللغة والدخل والعمر والجنس، فلا يوجد «مستخدم طبيعي» ولا «شخص متوسط»، والفرق المتنوعة تصمم أذكى. وكن مسؤولًا أمام المستخدمين والفريق وأصحاب القرار، واطلب الملاحظات من أشخاص مختلفين عنك.

كيف تطبّق التصميم الأخلاقي:

1. Personas شاملة: لا تصمم لشخص يشبهك، وعدّل الـPersonas باستمرار.
2. تعريف واسع لأصحاب المصلحة: ليسوا المدير والمستثمر فقط، بل كل من يتأثر بالمنتج.
3. تعاون أوسع: إشراك أطياف مختلفة يعطيك زوايا جديدة وحلولًا أعمق. واسأل: هل تشجع التفاصيل الصغيرة التنوع؟ وهل توجد أكثر من طريقة للتفاعل؟

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