مقدمة في التوجيه البصري

لكلِّ عنصرٍ في التطبيق X أو في الصفحة الإلكترونية للعلامة التجارية Y درجة معيّنة من الجاذبية البصرية. كلما زادت الجاذبية البصرية زاد الاهتمام بهذا العنصر. وبدون وعي، قد يمتد تأثير هذه الجاذبية إلى العناصر الأخرى في الصفحة أو التطبيق. يسمى تركيزنا على العناصر الجذّابة في التصميم بـ “الثقل البصري (Visual Weight)” وتسمى عملية توجيه أنظارنا إلى العناصر المجاورة التي تكمّل جاذبية التصميم ككل بـ “التوجيه البصري (Visual Direction)”.

مفهوم التوجيه البصري

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

إن أهم خصائص الثقل البصري الحجم واللون والشكل ويمكنك التحكم في وزن العنصر من خلال التحكم بهذه الخصائص. مثلًا: جميعنا نلتفت للعناصر الكبيرة أكثر من الصغيرة/ اللون الأحمر مُلفت أكثر من اللون الأزرق. يمكننا ربط هاتين الخاصيتين لينتج أن العنصر الأحمر الكبير ذو ثقل بصري أكثر من الأزرق الصغير، ولهذا “ستوجّه” بصرك نحوه.

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

أهم 5 نقاط يجب معرفتها عن التوجيه البصري

إليك أهم النقاط الخاصة بالتوجيه البصري:

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

لوحات التوجيه البصري

يستند التوجيه البصري على ثلاث لوحات رئيسية تحدد اتّجاه التصميم وهي:

لنحاول فهم كل مرحلة من المراحل على حِدى.

ما هي لوحة المزاج (Mood Board)

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

لماذا نستخدم لوحة المزاج؟

هناك عدة أسباب لاستخدام لوحة المزاج:

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

كيف ننشئ لوحة المزاج؟

يمكننا إنشاء مود بورد بخطوات بسيطة:

1. يبدأ الأمر بجمع المواد والعناصر التي تعكس أسلوبك كمصمم وتلهمك. يمكنك جمع تلك العناصر من أماكن مختلفة مثل بينترست (Pinterest) وإنستغرام وحتى تويتر. بمتابعة بعض الأشخاص العاديين المهتمين بهذا المجال، يقوم التطبيق مثل تويتر وانستغرام بعرض أهم التحديثات الخاصة بالموضوع لك وهو ما يشكّل مصدر الإلهام.
2. بمجرّد جمع الصور والعناصر، ثبتها في لوحة المزاج الخاصة بك. يُمكنك إنشاء لوحة المزاج بمساعدة التقنيات الرقمية والتطبيقات مثل Canva و Adobe Spark وMoodboard Creator.
3. نظّم لوحتك في فئات عن طريق تقسيمها إلى أقسام منفصلة، منها ما يخصّ اللون وأخرى تخص النمط وما إلى ذلك.
4. بمجرّد الانتهاء من التقسيم يمكنك بدء التجربة بتحريك العناصر وتغيير الألوان وتركيب مجموعات مختلفة لمعرفة أيُّها سيشكّل التصميم الأفضل.
5. يمكنك إضافة نصوص وكلمات رئيسية لتساعد نفسك في الوصف وتحدد المشاعر التي تحاول نقلها للمستخدم. كما سيساعد ذلك الآخرين على فهم رؤيتك التصميمية.

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

ما هي لوحة الإلهام (Inspiration Board)

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

ما هي لوحة الأسلوب (Style Board)

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

كيف يتم تحديد اتجاه التصميم في التوجيه البصري؟

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

يبدأ المصمم كتابة 8-10 صفات لكل شخصية – مثلًا: سوبرمان: جريء – حماسي- سريع.. / باتمان: مظلم- مزاجي- غاضب – غير متوقَّع.. – ثم يكتب ملخّص عن الشخصية من خلال صفاتها.

يسأل المصمم نفسه لماذا اخترت هذه الصّفة في هذه الشخصية؟ هكذا يتكوّن في مخيّلته جسر يربط بين صفات شخصيات المستخدمين (User Personas) للخدمة التي يعمل عليها وصفات الشخصية التي اختارها. تساعد تلك الصفات المصمم في تحديد الأنماط والأشكال والألوان للتصميم. يُمكن لكل صفة أن تعبر عن لون وشكل معين (مثلًا يمكن التعبير عن العصبية باللون الأحمر).

هكذا يتكوّن لدى المصمم أفكار عن الصور التي ينبغي أن يختارها لتساعده في التصميم. يمكن أن يختار المصمم في هذه المرحلة 100 صورة مختلفة تعبر عن الشخصيات المختارة (برأيه).

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

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

ختامًا..

تجدر الإشارة إلى أن هناك لوحات كثيرة خاصة بمراحل التوجيه؛ فهناك لوحة المفاهيم ولوحة المشاعر ولوحة الألوان وغيرها… لكن اختصرنا العملية في أهم ثلاث مراحل من التوجيه البصري. لمزيد من المعلومات حول كل ما يخص تجربة المستخدم، احجز مقعدك الآن في الدورات التدريبية في منصة UX Writing بالعربية.

استلهمنا مقالنا هذا من إحدى جلسات المنصة بعنوان مقدمة في التوجيه البصري. استضفنا فيها الخبير: أ. أشرف عقيلي، Digital experience leader at IKEA، ومحاوره أ. محمود عبدربه مؤسس منصّة تعلّم كتابة تجربة المستخدم بالعربية. يمكنكم مشاهدة جميع الجلسات على قناتنا على يوتيوب.