Jana Jouni

سوف تدمج الموجة القادمة من أدوات تصميم واجهة المستخدم بالكامل بين التصميم والتشفير لتسهل تجربة كل من المصممين والمطورين. لقد تحسنت أدوات تصميم واجهة المستخدم UI Design منذ الجيل الأول لأدوبي فوتوشوب Adobe Photoshop المتخصص بتحرير الصور دون إنشاء واجهات مستخدم حيوية، فقد أصبح عملنا أسهل وأسرع من السابق بفضل جيل الأدوات الحالي مثل أدوبي XD وفيجما Figma وسكيتش Sketch. في المقابل، تزايدت نقاط الضعف في سير عملنا اليومي أيضًا، فكثيرًا ما نهدر وقتًا وموارد ثمينةً يمكن استثمارها في تصميم منتجات مرغوبة. تتفوق برامج التصميم المتاحة اليوم على البرامج التي كانت مستخدمةً في بداية المجال، إلا أنها تفشل في استثمار التقنيات الحالية وتعرقل وصولنا لكامل إمكاناتنا كمصممي واجهة مستخدم، لذا حان الوقت لجيل جديد من أدوات تصميم واجهة المستخدم. دمج التصميم مع التشفير سوف تجمع أدوات تصميم واجهة المستخدم المستقبلية بين التصميم والتشفير لتسهل تجربة المصممين والمطورين. مع ذلك، لا تساعدنا الأدوات الحالية على تصميم واجهات مستخدم للمواقع الإلكترونية، لأنها عمليًا تساعدنا على تصميم صور مجردة لواجهات مستخدم المواقع الإلكترونية، إذ تفصل النماذج المصممة في أداتي فيجما Figma وسكيتش Sketch مثلًا عن شيفراتها المصدرية. يلمّ معظم المصممين حاليًا بأساسيات لغتي HTML وCSS، لذا يلجأ بعض المتمسكين بمبادئهم إلى التصميم بالشيفرات، لكنه ليس حلًا عمليًا للمشاريع المعقدة، إذ يحتاج المصممون لامتلاك المرونة في اكتشاف المفاهيم بسرعة قبل الالتزام بها. يستخدم مطورو البرمجيات أداة Visual Studio Code وهي أداة توحد تحرير وتطوير الشيفرة، كما تسمح للمهندسين بكتابة الشيفرات واختبارها وإصلاح أخطائها في مكان واحد. بالمثل، يحتاج المصممون إلى بيئة تطوير بصري توفر إمكانات تصميم كاملة وتولد شيفرات جاهزة للإنتاج. وإليك تاليًا ما قد يخبئه المستقبل. سوف يحل الإنشاء الموازي محل عمليات تسليم المصممين والمطورين يكثر الأخذ والرد بين المصممين والمطورين، لا سيما مع اقتراب فترة التسليم. ويكون التسليم في بعض الحالات مرهقًا ومهدرًا للوقت، لدرجة قد تؤثر على جودة العمل. وبما أن أدوات التصميم للجيل الجديد تتفاعل مع الشيفرة المصدرية، فلن يحمل المطورون وحدهم مسؤولية إنشاء واجهات المستخدم، إنما يمكنهم التركيز على تطوير البنية المنطقية التي تجمع واجهة المستخدم للمنتج بواجهتها الخلفية Back End لتعمل تمامًا. سوف يضع المصممون أساسيات واجهات المستخدم مع الشيفرة المجهزة، ويعمل المطورون على هذه الشيفرة لإحياء المنتج، كما سيتوقف المصممون عن إرهاق المطورين بطلبات مثل "هلّا استبدلت الهامش الداخلي ذو 8 بكسل في النموذج بهامش بطول 16 بكسل؟"، إلى جانب عدم إيقاف المطورين لعملهم مؤقتًا لطرح أسئلة تصميمية، مثل "كيف يجب أن يتغير حجم هذا العنصر بالنسبة لنقاط توقف الحاسوب والجهاز اللوحي؟" بالنتيجة، سوف يتعاون المصممون والمطورون في أمور أهم، مثل تحديد ما إذا كان أسلوب التصميم قابلًا للتطبيق في ظل الوقت والميزانية المتاحين، أو التأكد من تحديد حالات كل عناصر واجهة المستخدم. سوف تدمج أدوات تصميم واجهة المستخدم مع برامج المطور تعتمد الأدوات الحالية على نماذج برمجة مخصصة لتوليد مكونات التصميم. وبطبيعة الحال، لا تصل هذه النماذج إلى قوة CSS عامةً، كما لا تسمح للمصممين برؤية الشيفرة المكتوبة تلقائيًا بناءً على ملفاتهم التصميمية، (الشيفرات التي يجب تصديرها نهاية إلى HTML وCSS وJavaScript). وهنا كان بالإمكان تسهيل المهمة لو استخدمت أدواتنا صيغتي HTML وCSS منذ البداية. على سبيل المثال، تستخدم لغة CSS النموذج الصندوقي Box Model، الذي يتطلب رسم مستطيلات حول عناصر HTML في كل صفحة، ويصف كيف يحدد الطول والعرض والإطار border والحاشية Padding لرسم هذا المستطيل. تقترب فيجما Figma من توفير الإمكانية السابقة من خلال ميزتها للتنسيق التلقائي Auto-Layout، لذا فإن استخدمت فيجما النموذج الصندوقي المهيمن على معظم واجهات المستخدم على الإنترنت فعليًا، فستقل حاجة المطورين إلى الترجمة والتصدير. تنطبق الفكرة السابقة على وراثة التنسيقات Style Inheritance التي تضبط ما يحدث عندما لا يحدد تنسيق لعنصر معين، أي أن يكون العنصر افتراضيًا على سبيل المثال. وتستخدمها لغة CSS، إلا أن معظم أدوات التصميم غير المختصة بالتصميم للإنترنت لا تستخدمها. نحتاج أدواتنا لإخراج الشكل على الإنترنت لا لإخراج اللوحات الفنية أو النماذج الثابتة، لذا نحتاج إلى غتي البرمجة HTML وCSS لا محاكياتهما Stimulators. سوف تتفاعل أدوات التصميم من الجيل التالي مع الشيفرات المصدرية مباشرةً، وبالتالي ستتخلص من المخرجات المؤقتة، وتسمح للمصممين والمطورين بالتعاون على مخرج واحد ألا وهو الشيفرة المصدرية. سوف تندثر النماذج اﻷولية Mock-ups بدلًا من استخدام النماذج المؤقتة، دعنا نتخلص من النماذج نهائيًا. تترك النماذج Mock-Ups أسئلةً كثيرةً دون إجاباتها. لا يُعَد تصميم نموذج لكل بيئة رقمية عمليًا. ينشئ المصممون التنسيق لعرض الشاشة 320 بكسل و834 بكسل و1440 بكسل، لكن ماذا لو فُتح التنسيق في منفذ عرض 1220 بكسل؟ ولماذا لا يؤخذ العرض 375 بكسل بالحسبان وهو حجم شائع في الهواتف المحمولة الكبيرة؟ إن إنشاء واجهة لكل الاحتمال فكرة غير عملية، لا سيما مع مراعاة كل نقاط التوقف وأساليب العرض، ناهيك عن الوضع الداكن. سيؤدي التصميم لكل الاحتمالات السابقة إلى إنشاء عدد غير منطقي من الواجهات. تُعَد النماذج إهدارًا للموارد والوقت وقد قل استخدامها في تصميم المنتجات الرقمية، فقد استغنت منصة Webflow لتصميم مواقع الإنترنت عن النماذج Mock-ups ولجأت إلى النماذج الأولية المُتجاوبة والتفاعلية Interactive Prototypes؛ لكن لسوء الحظ، تقتصر منصة Webflow على الحلول عبر الإنترنت وتلبي احتياجات المواقع البسيطة فقط. ورغم أن وجود المخرجات المؤقتة منطقي في مرحلة التفكير، إلا أنه مستهلك للوقت في مرحلة إيجاد الحلول. سوف تؤخذ كل أنماط حالة النظام System States بالحسبان تملك كل المنتجات الرقمية أنماط حالة توافق الإجراءات في لحظة معينة مثل إيقاف التحميل أو عرض رسالة خطأ، ويجب أن تؤخذ كل أنماط الحالة بالحسبان. تترك كل أدوات تصميم واجهة المستخدم الحالية المهمة السابقة للمصممين، مما يجبرهم على إنشاء متغيرات كثيرة لعنصر واحد. تسمح أطر العمل React و Vue.js للمطورين بضبط كل أنماط الحالة الممكنة لعنصر معين. ويجب أن تعتمد أدوات التصميم الأسلوب السابق وتشجع المصممين على التأكد أن التصميم جاهز لكل أنماط حالة العنصر. يعمل Storybook.js كموسوعة لعناصر واجهة المستخدم المخزنة. ويعرض تبديل الضبط Controls العنصر وفق كل أنماط الحالة الممكنة. تحتاج أدوات التصميم إلى التحرك في هذا الاتجاه، بدلًا من انفصالها عن قاعدة تشفير المنتج. سوف تحل البيانات الحقيقية مكان المحتوى البديل Placeholder Content ينشئ المصممون عناصرًا لعدة أنماط حالة، كما يصممون من أجل بيانات متنوعة. يحتاج المصممون للتمكن من اختبار عناصرهم باستخدام المدخلات الفعلية، مثل النسخة والصور والتواريخ والأسماء والعناوين وغيرها، والتي ستملأ مكونات تصميماتهم في النهاية. حاليًا لا يمكن للمصممين محاكاة البيانات إلا بنسخها ولصقها يدويًا ضمن الواجهات، وهي مهمة رتيبة ومملة. ومع أنه توجد إضافات Plugins يمكنها إنجاز المهمة تلقائيًا، إلا أنها مزعجة. لن يكون الحل هنا بسؤال المطورين عن تقييمهم لتفاعل العناصر مع البيانات، فعندما تصل العناصر إلى مرحلة الاختبار، تصبح إعادة تصميمها مستهلكةً للوقت، وإن لم يتمكن المصممون من اختبار عناصرهم وتكرارها باستخدام البيانات الحقيقية، فلن يكون بإمكانهم معرفة ما إذا كانت بطاقة ما مناسبة لعنوان طويل أو لا تناسب وجود عنوان أساسًا. وكيف يكتشفون إذا كان أحد الخطوط لا يدعم الأحرف العربية، أو إذا كان أحد المواقع لا يدعم اللغات المكتوبة من اليمين إلى اليسار؟ يدعم Material Design الكتابة بالاتجاهين افتراضيًا. سوف يسهل التحقق من حالة الحافة Edge-case Testing عندما تراعي أدوات التصميم جميع الحالات الممكنة للعناصر وتسمح بالتحقق من البيانات، سوف يتحسن توقع المصممين لحالة الحافة. وعند إنشاء أحد المكونات، سيؤكد المصممون على اختبار مختلف حالاته ويثقلونه ببيانات متنوعة ليتأكدوا من أدائه في مختلف الأحوال. عند تطبيق الفكرة السابقة، ستصبح واجهة المستخدم نطاقًا للمصمم، مما يفسح مجالًا للمطورين في التركيز على مهام أخرى مثل تصحيح شيفرات JavaScript واختبار الواجهات البرمجية للتطبيقات APIs. هل يعمل مكون واجهة المستخدم جيدًا بتغير اللغة؟ يمكنك التأكد باختباره مع بيانات مختلفة. سوف تطلق الكثير من أدوات المطورين وإضافات المتصفحات المساعدة Third-party Browser Extensinos بعد أن إنجاز العمل بلغتي HTML وCSS، سوف تتاح إضافات كثيرة Extensions خلال مرحلة التصميم، مثل أداة Lighthouse التي لا يمكن الاستغناء عنها في الأداء وتحسين محركات البحث SEO وتدقيقات إمكانية الوصول Accessibility Audits، أو أدوات المطور العديدة التي تحاكي نقاط توقف الجهاز واتصالات الإنترنت البطيئة. وتفيد مجموعة أدوات المتصفح في إنشاء واختبار واجهات المستخدم الجاهزة للتصدير أكثر من أي إضافة في فيجما Figma أو Sketch أو Adobe XD. سوف يعمل المصممون والمطورون في آن واحد يمكن تشبيه عملية تطوير المنتج في وقتنا الحالي بمطبخ يحاول أحد الطهاة فيه إعداد وجبة من خلال سرد التعليمات على طباخ آخر، وهنا قد ينجحان، إلا أن الأسلوب مستهلك للوقت وغير عملي. تطور بعض الشركات مثل Hadron وModulz وRelate أدوات تصميم معتمدة على التشفير Code-based لا تزال في مرحلة تجريبية. سوف يرسم الاعتماد الواسع لهذه الأدوات نقطة تحول في إنشاء المنتجات الرقمية، كما أنه سوف يغير العلاقة بين المصمم والمطور جذريًا، وسيسمح عملهما في آن واحد بزيادة كبيرة في كفاءة فريق الإنتاج. سوف يتمكن المطورون من معالجة بنية واجهة المستخدم المعقدة بحرية بدلًا من إهدار وقتهم في تفسير النماذج أو تحمل شكاوى المصممين وطلباتهم في تعديل البكسلات، كما ستزداد قيمة المصممين في فرقهم وشركاتهم لمشاركتهم في إنشاء منتجات رقمية ناجحة. ترجمة -وبتصرّف- للمقال The Future of User Interface Design: Next-generation UI Tools لصاحبه Damir Kotorić. اقرأ أيضًا مقدمة في تصميم واجهة المستخدم UI ومتحكماتها متحكمات واجهة المستخدم وكيفية عرضها: متحكمات الدخل الدليل إلى تهيئة واجهة المستخدم UI موازنة بين أفضل أدوات تصميم واجهة المستخدم UI

كثيرًا ما نسمع جملة "لا تحكم على الكتاب من عنوانه". لكن في الواقع، يُعَد غلاف الكتاب عنصرًا مهمًا وقد يلعب دورًا محوريًا في نجاح الكتاب أو فشله. توجد حولنا ملايين المنتجات التي تعطي انطباعًا أوليًا جذابًا يلفت الانتباه. وبالمثل، فإن غلاف الكتاب مهم أيضًا، فأنت كبائع تحتاج إلى جذب انتباه المعنيين حتى تشجعهم على شراء منتجك القيّم. لست مضطرًا لتصميم غلاف يربط كل أفكار صفحات الكتاب ببعضها، بل يكفي إيجاد أسلوب جيد يحافظ على تناسقها. وبغض النظر عن الفئة المعنية بكتابك، فإنك ستخسر فرصةً كبيرةً إن لم يكن الغلاف جذابًا بما يكفي ليشجع القراء على قراءته. إن الصور الموجودة على أغلفة الكتب ليست مجرد زخارف تضاف دون إمعان التفكير فيها. يُعَد الغلاف وسيلةً تجذب انتباه القارئ من خلال إخباره عن محتويات الكتاب، ولا يمكن مقاومة التناسق المرئي للعناصر الجذابة. سوف نناقش دور غلاف الكتاب الجيد في إنجاحه، وندرج بعض الاقتراحات ونساعدك على فهم سبب حكم الأشخاص على الكتاب من عنوانه. يصمم غلاف الكتاب ليجذب الانتباه أول وأهم وظيفة لغلاف الكتاب هي جذب الانتباه إلى الكتاب، إذ كثيرًا ما يُحكم على الكتب من عناوينها ويرى الأشخاص غلاف الكتاب قبل أن يقرؤوا عنوانه حتى. وكثيرًا ما يجذب غلاف الكتاب الجيد قرّاءً جددًا، وهو أمر لا يمكن لغلاف عادي تحقيقه. يجب التأنّي أثناء تصميم الغلاف. يجد البعض أن الغلاف جزء مهم من الكتاب ويعدّونه أهم من النص الموجود داخله، وذلك بغضّ النظر عن جودة الكتاب. قد تخسر بسبب غلاف سيئ المبيعات اللازمة لتصل إلى قائمة الكتب الأكثر مبيعًا التي تمنحك ملصق "الأكثر مبيعًا" المهم للغاية على الغلاف. يتناسق الغلاف الجيد مع موضوع الكتاب مثل معظم عناصر الفن، لا يمكنك محو جوهر الشيء وتوقع أن يتناسق مع العناصر الأخرى. فدون فهم لمحتوى الكتاب، سيكون نجاح غلافه مجرد صدفة معلّقة على أمل صغير. يمكن الاستعانة بمصممين يعملون مع المؤلفين ومستشاري التحرير لتصميم أفضل غلاف للكتاب. وقد تضاف امتيازات المؤلف إلى التصميم، لذلك نتأكد من التعامل مع غلاف الكتاب من الناحية الفنية واحتمالات البيع. بالمجمل، يجب أن يلائم غلاف الكتاب باقي المحتوى والحفاظ على الطابع موحدًا ومتناسقًا. وإذا ظهرت إحدى شخصيات الكتاب ضمن الغلاف، سفوف يتخيل القرّاء هذه الشخصية كما رُسمت، وبالتالي يجب أن تتوافق مع وصف الكاتب لها ضمن الكتاب. كل شيء يبدأ بفكرة يحكم البحث كل شيء، لذا يُنصح دومًا بالبحث قليلًا عند البدء بأي شيء قبل اتخاذ الخطوة الأولى؛ وهنا ينطبق المفهوم ذاته على تصميم الغلاف، فإذا كنت تخطط لنشر كتاب أو ما شابه، فلن تتمكن من إيجاد أفضل فكرة تناسب كتابك دون البحث. يجب على الشخص المفوض بالبحث العمل بذكاء، لذا اختصر الوقت وابحث عن كتب رائدة بيعت في السنوات القليلة الماضية وحلل أغلفتها. يمكنك أن تحلل المشكلة وتطور حلًا مميزًا دون أخطاء. يعد تصميم الغلاف أكثر من مجرد ربط قد تعتقد أن المهمة الأساسية لغلاف الكتاب هي جمع الصفحات مع بعضها، و أن تصميم الغلاف مجرد تفاصيل كمالية، وهو اعتقاد خاطئ تمامًا. فقد يستغل المصمم المميز وجهي الكتاب وعقبه Spine ليعكس إبداعًا يزيد جذب انتباه القراء. يفضل إدراج مراجعة سريعة ضمن غلاف الكتاب يحب القراء التأكد من أن المحتوى الذي سيقرؤونه مُنتقى بعناية وجدير بوقتهم. وهنا يستغل غلاف الكتاب الجيد المساحة بإدراج مراجعة عن الكتاب تتباهى بجودته، سواءً كان تعليقًا واحدًا أو أكثر. يجب أن توازن مراجعة الكتاب بين البساطة والتعقيد، بحيث تضمن جذب القارئ دون أن تخبره بالكثير. تتواجد المراجعة عادةً في الغلاف الخلفي للكتاب إذا كان تصميمه نموذجيًا. لكنها ليست قاعدةً ثابتة، فقد يبدع المصمم ويدرجه على عقب الكتاب. يمثل غلاف الكتاب انطباع القارئ الأول عنه حافظ على التناسق مع طابع الكتاب، وركز على محور اهتمام الكتاب، مع جعل الغلاف صارخًا إذا وافق ذلك طابع الكاتب؛ أو اعتمد العكس تمامًا. يفترض أن يقدم الغلاف لمحةً عن الكتاب، لذا من المناسب نقل الطابع والمشاعر التي يعيشها القارئ في تصميم الغلاف، كما أن الغموض ضروري أيضًا. إذ لا يمكنك شرح كل شيء عن الكتاب في الغلاف دون أن يطلع القارئ حتى على صفحته الأولى. يعتمد تصميم الغلاف على فكرة جوهرية من الكتاب فكر بالأمر كالتالي، إذا كان لديك كتاب خيالي، فإن تصميم غلافه سيحتاج إلى شيء يناسب عالمًا خياليًا. قد تكون إحدى شخصيات الكتاب هي محور الاهتمام، وبالتالي يفضَّل إدراجها في التصميم. على سبيل المثال، عند إصدار أول كتب سلسلة هاري بوتر، كانت شخصية هاري الرئيسية هي العنصر الأساسي في تصميم الغلاف، كما استخدم المصمم مكانًا مميزًا في عالم الكتاب وهو مدرسة هوجورتس للسحر Hogwarts ووضع شخصية هاري على عصا المكنسة السحرية. كانت العناصر السابقة متناسقةً مع طابع الرواية وجذبت القارئ إليها دون إفصاحها عن معلومات كثيرة. قد يمثل غلاف الكتاب أصلًا تسويقيًا عند تصميمه جيدًا، فبما أنه سيوضع في كل مكان، فهو ضروري مثل شعار العلامة التجارية. على سبيل المثال، لا يمكنك تخيل كوكا كولا أو بيبسي دون شعارهما، كما لا يمكنك تخيل كتابك دون تصميم لغلافه. يلعب أسلوب الطباعة دور كبير في تصميم الغلاف يقصد بأسلوب الطباعة Typography نوع الخط وكيف يظهر عند الطباعة. تملك نصوص وخطوط كتب الرعب على سبيل المثال طابعًا مخيفًا. وبالمثل، تُعَد عائلة خطوط Sans Serif خطوطًا رسميةً تستخدم في الأعمال الاحترافية. وبالعكس، يمكن للأعمال الأخرى الأقل رسميةً الابتعاد عن خطوط Sans Serif ما دام طابعها متناسقًا. لكل فئة من الكتب خط مختلف يحقق أفضل توافق. على سبيل المثال تلقى خطوط Bentham و Day Roman رواجًا في فئة الكتب الرومانسية، بينما تستخدم خطوط Gotham و Bodoni في الكتب الواقعية Non-Fiction. خطط لمظهر غلاف كتابك خطط أولًا لتصميم وتنسيق غلافك. حافظ على بساطة النصوص ولا تبالغ بتزيينها باستخدام الخطوط المائلة Italics أو الأحرف الغامقة Bold والسطور وتغيير أحجام النصوص. يجب أن يكون عنوان الكتاب أكبر النصوص حجمًا ويعود اختيار أحجام باقي العناصر إلى المصمم. يمكنك أيضًا اتباع معايير تصميم أغلفة الكتب إذا أردت الإبداع من خلال العمل بوجود بعض القواعد. ويقصد بالمبدأ السابق أن تفهم القواعد لتتمكن من تجاوزها بدلًا من العمل على رقعة رسم فارغة من الصفر. لا تبتعد عن فئة الكتاب الذي تصمم غلافه دون ضرورة قد يكون الغلاف الأفضل في بعض الأحيان هو الغلاف الملتزم بالقواعد بدلًا من تجاوزها، طبعًا إذا لم تكن تعليمات المؤلف مغايرةً لذلك بالتأكيد. تقيد القواعد الكثيرة والتوقعات بموافقة فئة الكتاب من الإبداع، إلا أنها تحسن النتيجة النهائية لأن القارئ يبحث عن جوانب معينة بالفعل دون أن يدرك. على سبيل المثال، إذا اختار القارئ روايةً خياليةً فإنه يرغب بقراءة قصة ذات مقدمة فريدة. تعد الألوان الخيار الفني على الدوام يمكنك استخدام الألوان لجذب انتباه القارئ، كما يمكنك الاستفادة منها في التعبير عن طابع الكتاب ورسالته التي يحاول الكاتب إيصالها. إذا رغبت بجذب انتباه القارئ، فاجمع بين الألوان المتقابلة على عجلة الألوان، مثل اختيار الأزرق مع البرتقالي أو الأصفر مع الأرجواني ونحوها. قد تعبّر الألوان عن الطابع أيضًا. فقد يعبّر اللون الأخضر عن الحياة أو السمية، واللون الأحمر عن الحب أو الخطر، واللون الأصفر عن السعادة أو المرض أو غيرها؛ لذا استخدم هذه الألوان وفق حاجتك. اجذب انتباه القارئ بأسلوب تصميم الغلاف المتناسق مع طابع الكتاب. صمم الغلاف ليروي قصة يوافق تصميم الغلاف الجيد محتوى الكتاب ويُعَد امتدادًا له، بينما يروي التصميم الرائع للغلاف قصته الخاصة. استفد من الصور وأسلوب الكتابة والتنسيق وكل العناصر الأخرى. استخدم الصور المرئية والرموز للتعبير عن جوانب عديدة من الكتاب. استدرج القارئ من خلال تصميم غلاف كتابك وأخبره بقصة تشجعه على قراءة المزيد. حدّد النقاط الأهم باستخدام التباين دون أن تهمل تفاصيل أجزاء الغلاف الأخرى، وحاول إبهار القارئ في كل مرة يرى فيها الغلاف وينتبه للتفاصيل الإضافية. لا تهمل النمط Layout بعد أن تحدثنا عن كل التفاصيل، يجب ألا ننسى أحد أهم العناصر، ألا وهو النمط Layout؛ إذ يجب الحفاظ على جاذبية الصفحة الأولى حتى يشتري القارئ الكتاب لاحقًا مدفوعًا بفضوله. تُعَد عينا العميل هما أول ما يدفعه للشراء، ثم تأتي احتياجاته بالمرتبة الثانية. فإذا اختار المصمم تنسيق الكتاب ليجذب المتلقين، فإنه بذلك يحقق الرضا للجميع. بعض النصائح ينصح أصحاب الخبرة الطويلة في إنشاء المحتوى والمجالات القريبة منه بتصميم غلاف الكتاب بالحد الأدنى من العناصر، وذلك حتى يبقى التصميم مريحًا بصريًا، ومع ذلك نرتكب الأخطاء عادةً نتيجة الاهتمام غير الكافي بغلاف الكتاب، بحيث حتى إذا كان للكتاب عنوان جذاب وقصة مميزة، فإنه لن يحظى بالاهتمام المطلوب عند إطلاقه، وحينها سوف نندم على ارتكابنا الأخطاء. حافظ على البساطة والإبداع والحيوية عند تصميم الغلاف. يربك الإكثار من العناصر القرّاء عند رؤيتها مع العنوان. والأسلوب الأفضل هو تصميم كتاب أنيق ومتوازن وجذّاب للقراء. تعود الأرباح الكثيرة لملايين المؤلفين إلى الأغلفة الجذابة التي تكمل قصصهم الرائعة. خاتمة يحوي تصميم غلاف الكتاب عناصر كثيرةً قد تستثمر جهود المؤلف والمصمم أو تضيعها. يجب أن يوصل الغلاف رسالةً واضحةً إلى المشترين دون أن يحتاجوا إلى شرح خارجي عن محتوى الكتاب. يجب اختيار الخطوط والتنسيق والعناصر الأساسية الأخرى بأسلوب يجذب انتباه القارئ. حاول استخدام الألوان الجذابة التي تجمل الغلاف، ويمكنك دومًا اللجوء إلى التدرجات اللونية Gradient Effects. يراعي تصميم الغلاف الجيد جميع الجوانب ويستخدمها بأفضل ما يمكن لضمان أن المنتج النهائي هو غلاف فريد يسهل تمييزه وجذاب، كما أنه يمنح القارئ لمحةً سريعةً عن الكتاب دون فتحه. ترجمة -وبتصرّف- للمقال The Importance of Book Cover Design For Success اقرأ أيضًا لماذا يجب أن تهتم بتصميم المنتج دليلك إلى تصميم الخطوط

لقد أُثبتت أهمية المساحة البيضاء علميًا في تسهيل القراءة وتعزيز الفهم. ويقصد بالمساحة البيضاء هنا، الفراغات الموجودة بين محتويات الصفحة. هناك العديد من المقالات المنظمة سهلة القراءة، لكن بالمقابل تفتقر مقالات كثيرة لهذه البينة المرئية الأساسية؛ إذًا كيف تحسن تجربة القراءة للمتابعين؟ إذا أردت الحفاظ على جاذبية موقعك ووضوحه وأناقته، فيجب أن تُدخل بعض المساحة البيضاء في كل صفحة ضمنه. لا يشترط أن يتفرد كل تصميم فنيًا، بل يكفي وضع المساحة في المكان المناسب ليصبح التصميم جذابًا. سنتعرف تاليًا على العناصر الأساسية للمساحة البيضاء White Space المعروفة أيضًا باسم المساحة السلبية Negative space، بالإضافة لكيفية استخدامها لإضافة الجمال والكفاءة على التصميمات الإلكترونية. لا يفهم كثير من المصممين المقصود بالمساحة البيضاء ولا سبب أهميتها، لذا سنتعرف في هذا المقال على المقصود بالمساحة البيضاء وكيفية استخدامها بكفاءة، إلى جانب توضيح أهميتها. 1. اجعل إضافة المساحة البيضاء عادة لا شك أن الغالبية لا تهتم بتصميم المواقع، أو لا تهتم بتفاصيلها على الأقل. ولا نتحدث هنا عن الذين يتعمّدون إهمال تصميم مواقعهم، بل عن الذين يصممونها بعشوائية دون تدريب، أو بعد تلقيهم تدريبًا غير كافٍ، حيث يمكن أن يؤثر تصميم الموقع على معدل التحويل Conversion rates، وبالتالي على الأرباح الصافية. تُهمل في العادة بعض العناصر الأساسية أثناء تصميم المواقع رغم أهميتها، إذ يُعَد شعار الموقع مثلًا أحد أول العناصر التي يلاحظها مصممو المواقع، مع ذلك قد يُهمل في أحيان كثيرة، وهنا قد يؤدي التصميم السيء للشعار إلى إرباك زوار الموقع ويدفعهم إلى الخروج من الموقع بالكامل، بالتالي قد يكلفك وجود تصميم رديء للشعار خسائر مادية عالية. وتوضح الصورة السابقة الصفحة الرئيسية لموقع وكيف يوجد الشعار عادةً أعلى شريط التنقل. العنصر الثاني المهم في تصميم المواقع هو الخطوط المستخدمة ضمن الموقع، فعندما لا تكون الخطوط المستخدمة سهلة القراءة، ستصعب قراءة النصوص، كما سيبدو الموقع غير احترافي؛ وهنا يجب على مصممي المواقع التحقق من حجم الخط ضمن الموقع، والتأكد من أنه كبير بما يكفي ليُقرأ بسهولة، إضافةً للتأكد من الألوان المستخدمة في الخلفية. تسهّل الملاحظات السابقة قراءة النصوص ضمن الموقع. يعتقد البعض أن اختيار لون الخلفية غير مهم، لكنه في الواقع يلعب دورًا أساسيًا في تميز الموقع. 2. انظر إلى الميزات قد تبدو بعض المواقع الإلكترونية رائعةً بوجود مساحة بيضاء قليلة، بينما تبدو مواقع أخرى أفضل عند زيادة المساحة البيضاء؛ لذا إن كنت تفكر بالتعديل، فخذ الميزات التالية بالحسبان: قد تساعد المساحة البيضاء في إيضاح الموقع الإلكتروني وتمنحه طابعًا هادئًا وجماليًا وتسهل إدراك الصفحة على عين المستخدم، وهي العناصر التي تساعد الزوار في الحصول على تجربة ممتعة ضمن الموقع. تبدو معظم الصفحات أجمل عند إضافة المساحة البيضاء، لذا من الجيد استخدام المساحة لتعزيز الهدوء والجمالية. تأكد من وجود مساحة بيضاء كافية ضمن موقعك، إذ تساعدك المساحة البيضاء على تحديد المحتوى ضمن الصفحة، كما تمنحه طابعًا هادئًا، وبالتالي زيادة أناقة الصفحة وتسهيل قراءتها. تحوي العديد من المواقع على المساحات، لكن وجود المساحة لا يعني أنها وُضعت بكفاءة. كذلك، تحوي بعض المواقع فراغات كثيرة، بينما لا تستخدم مواقع أخرى مساحة بيضاء كافية، لذا عليك استخدام المساحة بحكمة. إذا بالغت في استخدام المساحة البيضاء، فسوف يمل زوار الموقع بسرعة ويغادرونه، أما إذا لم تستخدمها بما يكفي، فستصعب قراءة المحتوى على الزوار. تذكر الفكرة السابقة أثناء تصفحك المواقع، وتأكد من أن الصفحات لا تبدو مزدحمة. 3. استخدم المساحة البيضاء بأسلوب صحيح من غير المنطقي أن تصمم بدون أي مساحة بيضاء، وذلك لأن المساحة تساعد العين في التركيز على المحتوى. حافظ على تناسق المساحة البيضاء ضمن موقعك الإلكتروني لتحقيق التأثير المرغوب، واستخدم حجمًا موحدًا للخطوط لكل من العناوين والفقرات والنصوص الأخرى، وتأكد من وجود هامش 20 بكسل على الأقل بين العناصر. يتساءل المطورون عادةً حول استخدام المساحة البيضاء بكثرة أو عدم استخدامها مطلقًا. وأحد الأسباب الذي قد يدفعنا للتصميم دون استخدام مساحة بيضاء، هو جذب انتباه المستخدم إلى محتوى الصفحة وتوجيهه إلى التركيز عليه. تُعَد هذه الفكرة جيدة لأننا نعلم أن استيعابنا للمعلومات يتحسن عندما تزداد مدخلاتها البصرية، لذا إذا كنا نحاول جذب المستخدم، فعلينا تجنب المبالغة في التركيز على العناصر والاهتمام بتصميم موقع جذاب وسهل القراءة. إذا كانت العناصر تشتت انتباه المستخدم عن المحتوى، فإنهم لن يكرّسوا وقتًا كافيًا لقراءته، وقد لا يعمل الموقع على النحو المرغوب. وعندما ننشئ مواقع إلكترونيةً بدون مساحة بيضاء، فإننا نحاول تركيز انتباه المستخدم على المحتوى، لذا يجب علينا تجنّب المشتتات بين القارئ والمحتوى لأن هدفنا الأساسي هو جذب انتباه زوار الموقع. 4. لا تبالغ في استخدام المساحة البيضاء المساحة البيضاء صديقتنا. يجب على المصممين التأكد من الجاذبية البصرية للتصميم ومعرفة أن الاهتمام بالمساحة البيضاء ليس إهدارًا للوقت. من المهم جدًا الحفاظ على كفاءة التصميم، وإذا أردت أن تستخدم المساحة البيضاء بكفاءة، فيجب أن تفهم كيفية استخدامها أولًا. يجب أن تستخدم المساحة البيضاء ضمن المخطط Layout لتعزيز جاذبيته، وهناك أساليب مختلفة لتطبيق المساحة البيضاء. يمكنك مثلًا استخدام المساحة السلبية Negative Space، وهي المساحة الموجودة بين عنصرين أو خطين، حيث يمكنك استخدام المساحة السلبية للإيحاء بالحركة والانسيابية. يمكنك استخدامها أيضًا لفصل العناصر ضمن صفحة، ولإنشاء توازن بصري وتعزيز الجمالية، أو للإيحاء بالعمق والحركة، ولتعزيز الوضوح؛ وتعد أسلوبًا مناسبًا جدًا ليتميز تصميمك عن الآخرين. يُعَد العنوان أحد أفضل الأماكن لإدراج المساحة البيضاء، لذا من الضروري التأكد من أن العنوان مميز وسهل التذكر، إذ يحسّن إدراج المساحة البيضاء حول العنوان معدل التحويل (معدل تحويل زوار الموقع إلى عملاء)؛ أما إذا بالغت في إضافة المساحة البيضاء، فقد تخسر بعض القراء غير المهتمين بالعنوان، وبالمقابل قد لا يتمكن القرّاء من قراءة العنوان إذا لم تستخدم مساحةً بيضاء كافية. 5. جرب استخدام المساحة البيضاء لا تستفيد معظم المواقع من كامل ميزات المساحة البيضاء. تعني المساحة البيضاء الفراغ ببساطة، ونراها دومًا في المجلات والكتب واللوحات الإعلانية والتطبيقات، وهي فرصة ممتازة حتى تضيف الشركات إثارةً بصريةً على موقعها أو مدونتها. يوجد سببان لاستخدام المساحة البيضاء كما هو الحال في المجلات، أحدها هو توكيد الكلمات أو تعزيز الأفكار، والسبب الآخر هو الإيحاء بالحيوية والتشويق. رغم ميزات المساحة البيضاء، إلا أنه يجب تجنب المبالغة بالاهتمام بها على حساب المحتوى، وذلك حتى لا تشتت القارئ عن الرسالة الأساسية. فقد يعني وجود المساحة البيضاء ضمن موقع إلكتروني أن مصمم الموقع لم يفهم غايتها ولم يفكر بإمكانية تأثيرها على الموقع وبالغ باستخدام المساحة البيضاء دون مبرر، لذا يمكنك اختزال المساحة البيضاء بسرعة دون تحويل الموقع إلى فوضى بحذفها وإضافة أحد العناصر التالية: صورة عنوان عنوان فرعي نص مخطط إذا قررت إضافة صور، فتأكد من اختيار الحجم المناسب، مع اختيار حجم مناسب لمحتوى الموقع أو المدونة. تأكد أثناء اختيار حجم الصورة من أخذ الأفكار التالية بالحسبان: يجب أن يكون الحجم ملائمًا للموقع أو المدونة. تجنب وضع الشعار في منتصف الصفحة إذا كان كبيرًا. يجب أن تكون الصورة أصغر من المربع النصي. تُعَد الأشرطة الإعلانية Banners مثالًا ممتازًا عن الصور التي يجب أن تكون أصغر من النص. يجب استخدام الصور لتحسين محتوى الصفحة، وهذا يعني استخدام الصورة لإبراز فكرة أو عبارة معينة. لا يشترط أن تستخدم صورة معينة لمجرد توفرها. يجب أن تكون الصورة كبيرةً كفايةً لقراءتها والنقر عليها، خاصةً إذا كنت ترغب في زيادة حركة مرور الموقع. وعند وجود شريط إعلاني، فإنه يجب أن يكون أكبر من الصور. 6. استخدم المساحة البيضاء كعادة تسويقية وفقًا لجيمس سميث James Smith، هناك أدلة كثيرة عن أهمية وجود المساحة البيضاء حول نص في جذب الانتباه إليه. على سبيل المثال، إذا كان العنوان: "أنا أفقد وزني!"، فقد لا يرغب زوار الموقع بقراءته، لكن إذا غيرت العنوان ليصبح: "سبب فقدي للوزن هو شرب مخفوق البروتين التالي مرتين يوميًا"، فقد يظن زوار الموقع أنه رائع. تثبت هذه التجربة الصغيرة تأثير المساحة البيضاء. قد تكون إضافة بضع فقرات إلى مقالات مدونتك فكرةً رائعة. وللفقرات ثلاث أنواع: الفقرة القصيرة: تستخدم عند نشر بعض التفاصيل عن موضوع مقالات المدونة. الفقرة الطويلة: توسّع معرفة القارئ عن الموضوع وتعزز فهمه. الفقرة الموسعة: تكون وسطًا بين الفقرات القصيرة والطويلة، وتُعَد جيدةً عند الكتابة عن موضوع لا يكفيه الوصف المختصر. 7. أبدع في استخدام المساحة البيضاء يُعَد جذب انتباه المستخدم إلى عنصر محدد ضمن الموقع أحد أفضل أساليب استخدام المساحة البيضاء، حيث يمكنك تطبيق الفكرة السابقة باستخدام العناصر المرئية مثل الأزرار الكبيرة الملونة والزاهية التي تجذب انتباه المستخدم وتشجعه على نقرها، أو المساحة البيضاء بين محتوى الموقع لإضفاء الإثارة والغموض. وعندما تبدأ بإنشاء موقعك، عليك أولًا البحث عن أساليب لإدخال الإثارة والغموض إليه، وذلك لأن الغموض يجذب الزوار إلى الموقع. يمكنك زيادة تجاوب الموقع بإضافة عناصر واجهة مستخدم رسومية جذابة Widgets، أو ألعاب، أو عناصر أخرى تحوّل زيارة الموقع إلى تجربة ممتعة. 8. استفد من المساحة البيضاء على الإنترنت لا تهدف المساحة البيضاء إلى تجنب الإعلانات النصية فحسب، لذا خذ أسلوب تنسيق نسختك الإلكترونية بالحسبان، ومظهر الموقع الإلكتروني، وكيف يبدو شعار شركة ما، وما المميز فيه؛ سواءً كان شعارًا واضحًا وبارزًا، أو بسيطًا وأنيقًا، وذلك دون إضافات غير ضرورية، وتذكر في كل مرة تزور فيها موقعًا إلكترونيًا أنك تشاهد الهوية البصرية للشركة. التفكير وفق الأسلوب السابق ضروري لأنه يؤثر على كل ما تراه. وتتمثل الخطوة الأولى في التأكد من فهمك لعلامتك التجارية، فحين تعرف علامتك التجارية، يأتي دور النظر في الهوية البصرية العامة، وعندها تكون قد أنشأت لغتك المرئية. على سبيل المثال، عندما تستخدم نظام ألوان بدرجات اللون الأخضر، فعليك تجنب استخدام الألوان الأخرى ضمن موقعك حتى لا تربك القرّاء. تجنب أيضًا استخدام خطوط عديدة ضمن الصفحة، واختر خطًا واحدًا، ويفضل أن يكون أحد خطوط Sans Serif لأنه خط مألوف للغالبية، كما أنه متباين جيدًا، وبالتالي يسهّل من قراءة نسختك. الأمر التالي هو التأكد من امتلاكك تنسيقًا جيدًا، ومن وجود مساحة بيضاء كافية لتسهيل قراءة المحتوى وفهمه، إذ يصعب إيجاد أي عنصر ضمن موقعك عندما يكون فوضويًا. 9. استخدم المساحة البيضاء ضمن مواقع التواصل الاجتماعي كثيرًا ما يتجاهل الفنانون ومصممو الجرافيك المساحة البيضاء، وذلك دون إدراك لأهميتها كعنصر أساسي في الفن الحديث. وتُعَد المساحة البيضاء عنصرًا أساسيًا في نجاح بعض المواقع مثل Pinterest وTumblr وInstagram وFacebook. ركزت التوجهات في العقد الماضي على مبدأ "الأقل هو الأكثر" Less is more ، وأدركت الشبكات الاجتماعية أن المساحة البيضاء تُعَد حلًّا رائعًا لإحياء تصميم رتيب، كما أنها تسهّل تصفح الإنترنت والموجزات الاجتماعية Social Feeds. عندما تستخدم المساحة البيضاء بكفاءة، تجب مراعاة نوع المعلومات التي ترغب بمشاركتها مع المعنيين. فهل ترغب بمشاركة صور للشاطئ؟ أم مشاركة روابط مقالات أخرى؟ إذا كان الأمر كذلك، فمن الأفضل استخدام المساحة البيضاء للحفاظ على الوضوح. إذا أردت استخدام المساحة البيضاء لإخبار المعنيين أنك سترفق بعض المعلومات، فيُفضّل إضافة نص فوق الصورة ليعلموا أن الصورة ليست محور الاهتمام. 10. طبق المساحة البيضاء لا تُعَد المساحة البيضاء عنصرًا حديثًا، فهي موجودة منذ بداية عهد وسائل الإعلام المطبوعة، وما تزال مستخدمةً حتى الآن، لكن هناك علامات تجارية كثيرة لم تعتمد هذه الممارسة بعد. لقد كانت المساحة البيضاء سابقًا أبسط من أن تدخل في حملات العلامة التجارية، لكن هذا المفهوم قد تغير سريعًا وفقًا لكوبس Cupps، إذ يتعلم المستهلكون أن التصميم المرئي هو المنتج الحقيقي، ويمكنهم إنشاء نسختهم منه والبحث عن عناصر التصميم التي تراعيهم بدل العناصر المصممة، وذلك دون أخذ المستهلكين بالحسبان". يعتقد المصممون والمسوقون أن استخدام المساحة البيضاء وسيلة ممتازة لإبراز علامة الشركة التجارية. يركز المستهلكون على الشعار أكثر من أي شيء آخر، وتعزز المساحة البيضاء جذب انتباه المستهلكين إلى الشعار واسم العلامة التجارية. يجب أن يركز المصممون والمسوقون على العناصر التي تخاطب المستهلك، وتُعَد المساحة البيضاء عنصرًا إبداعيًا يخاطب المستخدم، وكذلك عنصر اللون؛ كما أن الرسومات ومقاطع الفيديو عناصر أخرى يجب أن تؤخذ بالحسبان. إذا استخدمت شركة ما المساحة البيضاء، فإنها ستجذب انتباه المستخدمين أكثر من التصميمات الأخرى. تُعَد المساحة البيضاء أهم العناصر التصميمية هنا، لأن المستهلكين يلاحظونها بوتيرة أكبر، كما تجذب العناصر الأخرى انتباه المستهلكين مثل الشعارات والخطوط. سيزيد استخدام الشركة لشعار أو خط موافق لعلامتها التجارية من جذب انتباه المستخدمين، وسيرغب المستهلكون بشراء منتج الشركة التي تملك شعارًا رائعًا، ولن يرغبوا بشراء منتج الشركة ذات الشعار الرديء. يجب أن يملك قسم التسويق للشركة عناصر تصميميةً ملائمةً لعلامتها التجارية، ويجب أن تحوي حملةً تسويقيةً لشركة معنية بالتقنيات الفائقة على عناصر تقنية مناسبة؛ بينما لن يحتاج مطعم للوجبات السريعة إلى إضافة عناصر تقنية إلى إعلاناته وعناصره التسويقية، حيث إن العناصر التقنية مفيدة فقط لشركات التقنيات الفائقة. يجب أن يتجنب المصممون والمسوقون العناصر التصميمية التي لا تطابق علاماتهم التجارية في إعلاناتهم، وذلك لأن المستهلكين يتجاهلونها. كذلك، يجب أن يُنشئ المصممون والمسوقون عناصرهم التصميمية مع مراعاة العلامة التجارية، ويجب أن يوظّفوا مصممي رسوميات Graphic Designers لإنجاز هذه المهمة. 11. أطلق العنان لإبداعك يُعَد التباعد Spacing والهوامش Margins والمحاذاة Alignment وغيرها، أخطاءً شائعةً قد تحمل عواقب كارثية؛ وقد تصادف أن مفهوم قاعدة الأثلاث Rule Of Thirds موجود على مواقع التواصل الاجتماعي مثل انستغرام وفيسبوك. تنطبق هذه القاعدة على موقعك الإلكتروني أيضًا، لذا احذر وتجنب أي أخطاء تصميمية قد تؤذي علامتك التجارية، حيث يمكن أن يسبب أبسط خطأ في المحاذاة ضمن صفحة إلكترونية مشكلة حقيقية. يجب أن يملك الموقع الهيئة والشعور المناسبين، أي يجب أن تستخدم الألوان والخطوط المناسبة وتنسيقًا مصممًا بإتقان. لن تحتاج شعارًا غريبًا هنا، إذ يكفي أن يكون فريدًا وسهل التذكر. لست بحاجة لإنفاق الكثير على تصميم الموقع، حيث توجد حلول عديدة لإنشاء موقع رائع بسعر مقبول. فكر بالاستعانة بمصمم مستقل أو فنان رسوميات لإنشاء صفحة بسيطة. وإذا كنت لا تملك موقعًا إلكترونيًا، فإنك تتجاهل أداة عمل رائجة ومتاحة. خاتمة تُعَد المساحة البيضاء إحدى أكثر جوانب التصميم تجاهلًا. ورغم كونها مساحةً فارغة، إلا أن وجودها مهم. لربما صادفت مصطلح المساحة البيضاء في كتاب عن قواعد التصميم أو ما شابه، لكن هل أدركت أهميتها؟ تفصل المساحة البيضاء بين عناصر التصميم وتركز عليها وتمنحها توازنًا بصريًا، حيث يمكن أن تفقد رسالة التصميم الأساسية بسهولة بدون المساحة البيضاء، خاصةً عند وجود الصور والنصوص بجانب بعضها. تُعَد المساحة البيضاء سلاحًا سريًّا لتطوير شركتك أو حياتك المهنية، لذا لا تتجاهلها رجاءً. ترجمة -وبتصرّف- للمقال White Space: Why It’s Important & How To Use It. اقرأ أيضًا لماذا تعتبر المساحات البيضاء مهمة في عالم التصميم كيف تستفيد من المساحات البيضاء في تعزيز نسبة التحول في صفحتك أهمية الفراغات البيضاء في تصميم الويب أساسيات التصميم المرئي

تعد المساحة البيضاء عنصرًا مدهشًا ومهمًا وقد يُستخف بأهميتها كما يستخف بأهمية الصمت بين النغمات الموسيقية. فهي قوية بما يكفي لتبقي الأشخاص ضمن صفحتك، أي أنها قد تكون سببًا لنجاة موقعك. تشترك عدة عوامل في تنسيق وبنية التصميم المُتجاوب. تعد المساحة البيضاء أو المساحات السلبية أحد أهم هذه العناصر ويكثر إهمالها. يقصد بالمساحة البيضاء المسافة الموجودة حول عناصر التصميم الأخرى وداخلها. يتألف تنسيق التطبيق أو الموقع الإلكتروني من عناصر مرئية مختلفة، تشمل أساليب الكتابة والخطوط المرسومة والأيقونات والصور ونحوها، يمكن تشبيهها بالعناصر التي نلونها ضمن لوحة. وحتى تجتمع هذه العناصر لتشكل اللوحة، نحتاج رقعة رسم. يمكن تشبيه المساحة البيضاء White Space برقعة الرسم، أي أنها الخلفية التي تجمع العناصر معًا في التصميم، وبالتالي تسمح بظهورها. لنتعرف معًا على أهمية تصميم المساحة البيضاء. ماذا يقصد بالمساحة البيضاء؟ المساحة البيضاء هي الجزء الموجود بين عناصر التصميم وضمن عناصر التصميم، متضمنة المساحة الموجودة بين الأحرف والكلمات المكتوبة. لا يُشترط أن تكون المساحة البيضاء بيضاء اللون. قد تأخذ أي لون أو بُنية Texture أو نمط Pattern أو قد تكون صورة خلفية. لكنها سميت بالمساحة البيضاء دلالة على خلوها من أية عناصر أخرى بغض النظر عن خلفيتها ولونها. يمكن أن تسبب المساحة البيضاء مشكلات بين المصممين والعملاء. تحث نظرية التصميم على استخدام المساحة البيضاء لإبراز أناقة التصميم وتحسين جودة تجربة المستخدم بينما يعتقد العديد من العملاء والمديرون لسوء الحظ أن ترك المساحة البيضاء هو إهدار لجزء من التصميم وأنه من الأفضل استغلالها لإضافة المزيد من المعلومات والعناصر المرئية. تعد المساحة البيضاء أداةً رائعة لإضافة التوازن بين عناصر التصميم وتنظيم المحتوى لتحسين تجربة التواصل المرئي. إذا كنت كاتبًا تقنيًا مسؤولًا عن تأليف مئات كتيبات دليل الاستخدام لشركة معنية بأجهزة المطبخ، ستوازن المساحة البيضاء بأسلوب جميل بين النصوص والصور. لا يقرأ الأشخاص دليل الاستخدام للتسلية، وبالتالي يعد تصميمه ليجذب انتباه القارئ أمرًا مهمًا، لذلك تكون المساحة البيضاء أهم عنصر يوازن بين النصوص والصور فهي تمنع أن يبدو شكل الصورة مضغوطًا. أي يمكن للقراء فهم الصفحة وحل المشكلات دون الحاجة للمساعدة. من الطبيعي أن يرتبك الأشخاص عند إدراج المعلومات فجأة لأنهم ليسوا آلات. تمنحنا المساحة البيضاء مجالًا للهدوء والتقاط الأنفاس. تحتاج كمصمم لفهم دور المساحة البيضاء كما تفهم باقي عناصر واجهة المستخدم، ثم التجربة حتى الوصول إلى التوازن بينها وبين العناصر الأخرى. المساحة البيضاء الدقيقة والواسعة تقسم المساحة البيضاء وفقًا لسماكتها إلى مساحة بيضاء دقيقة Micro White Space ومساحة بيضاء واسعة Macro White Space، نتحدث هنا عن النسب والتناسب. المساحة البيضاء الدقيقة Micro White Space هي المساحات الصغيرة الموجودة بين عناصر التصميم، تجدها بين السطور والفقرات وتشمل المساحة بين صور الشبكة والمساحات الفاصلة بين روابط القائمة. تؤثر المساحة البيضاء الدقيقة Micro White Space مباشرة على وضوح المحتوى. تؤثر المساحة البيضاء المحيطة بالفقرات على سرعة قراءة المستخدم للنص وفهمه. يبطئ الأشخاص أثناء قراءة النص إذا ظهر على الهامش خارج الفقرات المنتظمة ويجدونه أصعب للفهم من النص الذي لا يحوي هوامش مماثلة. المساحة البيضاء الواسعة Macro White Space هي المساحة الواسعة بين عناصر التنسيق الأساسية والمساحة المحيطة بتنسيق التصميم. تجدها يمين ويسار الجزء الأكبر من المحتوى ضمن المواقع وفي المساحة بين أجزاء محتوى الموقع. تحتوي المساحة البيضاء الواسعة Macro White Space التصميم الكلي عكس المساحة البيضاء الدقيقة Micro White Space وتعد مساحة بيضاء واضحة تسهل ملاحظتها. لعل أفضل مثال على تطبيق المساحة البيضاء الواسعة Macro White بوضوح وكفاءة هو الصفحة الرئيسية لجوجل google.com. يجمع مظهر جوجل المميز بين الجمال والبساطة، كما توحي بساطته بالهدوء. يقل الجهد المطلوب من عينك ودماغك أثناء النظر إلى الصفحة لعدم وجود المشتتات، وبالتالي تركز على السبب الأساسي لدخولك الصفحة وهو البحث عن شيء ما. توجد قصة رائعة لاعتماد صفحة جوجل لهذا الشكل. يعد google.com أحد أوائل المواقع التي استخدمت مساحة بيضاء واسعة. كانت اتصالات الإنترنت بطيئة عند انطلاق الموقع لذا انتظر المشاركون في اختبارات تجربة المستخدم حتى يكتمل تحميل الصفحة إلا أن كل العناصر كانت موجودة بالفعل على الشاشة لكنهم لم يعتادوا على رؤية مساحة بيضاء كثيرة فظنوا أن تحميل الصفحة لم يكتمل بعد. قرر المصممون في Google بناءً على تجارب المستخدم السابقة إضافة إشعار حقوق النشر أسفل الصفحة ليتأكد المستخدمون من اكتمال تحميل الصفحة. كيف نحدد نوع المساحة البيضاء الذي يجب أن نستخدمه؟ يعتمد استخدام كل من المساحة البيضاء الدقيقة والواسعة على العوامل التالية: المحتوى عند وجود معلومات كثيرة ضمن التنسيق، لا يبقى إلا مجال ضيق لاستخدام المساحة البيضاء الواسعة Macro White Space وبالعكس يزداد مجال استخدام المساحة البيضاء الدقيقة Micro White Space. يعد التوفيق السابق بين النوعين أمرًا حيويًا، وإلا تحولت الصفحات إلى كتل من البيانات الجامدة صعبة القراءة. على سبيل المثال، وصف بولتون Boulton عام 2007 ميل المواقع الإخبارية إلى الاعتماد على المساحة البيضاء الدقيقة Micro White Space لتوفير تجربة مستخدم فعالة وسهلة القراءة لأن راحة المستخدمين أثناء القراءة أمر أساسي. التصميم يؤثر تصميم واجهة المستخدم على النسبة بين المساحة البيضاء الدقيقة والواسعة في التنسيق. إن المصمم هو من يختار أسلوب التصميم وبالتالي قد ينحاز إلى اعتماد أحد النوعين أكثر من الآخر ضمن التنسيق. المستخدم يمكن الاستفادة من بحث المُستخدمين متضمنًا الخصائص السكانية لتحديد التوازن المناسب بين نوعي المساحة البيضاء الدقيقة و الواسعة للفئة المعنية. لا توجد قاعدة مطلقة لتطبيقها على الفئات المعنية ونحتاج دومًا في تجربة المستخدم إلى التحقق من المستخدمين المعنيين بمنتجنا أو خدمتنا. رسالة العلامة التجارية قد يشير استخدام المساحة البيضاء إلى ميزانية الشركة وبالتالي لجودة المنتج. تذكر العلامات التجارية لشركات مثل Apple وMercedes Benz وIKEA ولاحظ كيف تدعم علاماتهم هذه الفكرة. تعرض الصورة التالية المساحة البيضاء الدقيقة والواسعة في صفحة قديمة من موقع BBC الإخباري. تقتصد المواقع الإخبارية في استخدام المساحة البيضاء مثل الصحف الورقية. وتعكس كمية المحتوى الكبيرة على الصفحة مصداقيتهم، حيث إنها تعكس سير عالمنا! المساحة البيضاء المباشرة والسلبية: أسلوب آخر للاستفادة من المساحة البيضاء يمكن التمييز بين المساحة البيضاء على أنها دقيقة وواسعة كما يمكن التمييز بينها على أنها مباشرة Active أو سلبية Passive: المساحة البيضاء المباشرة Active White Space: تستخدم لتحسين بنية الصفحة وتوجّه المستخدم ضمن المحتوى. المساحة البيضاء السلبية Passive White Space: تستخدم لإضافة لمسة جمالية على تنسيق الصفحة دون توجيه المستخدم في قراءة محددة أو تدفق أو ترتيب المحتوى. تعد المساحة البيضاء بين كلمات وأسطر الفقرة مثالًا آخر عن المسافات السلبية وفق بولتون Boulton عام 2007. توضح الصورة السابقة الفرق بين النص مع وبدون تطبيق المساحة البيضاء السلبية ومع تطبيق نوعي المساحة البيضاء المباشرة والسلبية معًا. لا يحوي النص في الجانب الأيسر من الصورة أي مساحة بيضاء فعلية بين الحروف والأسطر والفقرات ونحوها، ويمكننا الملاحظة على الفور كيف يبدو النص كتلة واحدة مضغوطة عند نقص المساحة البيضاء وتصعب قراءته. أضفنا في المثال الموجود وسط الصورة بعض المساحة البيضاء السلبية والدقيقة. لاحظ كيف أصبحت قراءته أسهل من النص السابق. أضفنا في المثال أيمن الصورة بعض المساحة البيضاء المباشرة لإرشاد القارئ ضمن النص. لحسن الحظ تحولت الكتلة النصية في المثال الأول إلى صيغة مألوفة. تحسن المساحة البيضاء من تدفق النص وتسهل قراءته، لكن علينا أيضًا تسهيل الإدراك على بصرنا وعقلنا. العناصر التي يجب أخذها بالحسبان أثناء تصميم المساحات الفارغة سنسرد تاليًا جميع العناصر التي يجب أخذها بالحسبان بصورة رئيسية أثناء تصميم المساحات الفارغة: الوضوح Legibility تعد المساحة البيضاء الدقيقة Micro White Space أساسية لإيضاح محتوى الواجهة. ويجب عليك كمصمم أن تأخذ بالحسبان المساحة البيضاء أثناء اختيار خصائص الكتابة للتصميم مثل الخط والحجم واللون والأسلوب وانسيابية السطور وتنسيق الحروف Kerning وتناسق طول الأسطر Tracking. يؤثر تغيير تنسيق المساحة البيضاء على أداء القراءة وتجربة المستخدم عامَةً، ويرجّح أن يبقى القراء السعداء ضمن صفحتك. الهيئة العامة للتصميم والعلامة التجارية تسهم المساحة البيضاء في بناء هيئة التصميم العامة. حيث يعكس استخدام الموقع للمساحة البيضاء الواسعة Macro White Space بساطة الموقع ورفاهيته. بينما يعكس اختزال المساحة البيضاء الواسعة Macro White Space أن الموقع إعلامي مثل المواقع الإخبارية وفقًا لـ Kyrnin عام 2015. علمًا أن هذه الأفكار ليست قواعدًا ثابتة دومًا. والأفضل هو اختبار استخدام المساحة البيضاء على المستخدمين المعنيين، لأنهم أفضل من يساعدك على تحديد رؤيتهم لتصميماتك. التركيز والانتباه قد تساعد المساحة البيضاء على توجيه المستخدم ضمن المحتوى المُتجاوب. حيث إنه قد يساعد في إنشاء نقاط محورية وجذب انتباه المستخدم إلى أجزاء محددة من التنسيق. يعد تحديد أولوية العناصر أو المحتوى إحدى مراحل التخطيط الاستراتيجي لموقع الإنترنت. يمكنك اعتماد العديد من الأساليب المرئية لإبراز عناصر محددة، وأحدها هو التلاعب بالمساحة البيضاء حول هذه النقاط المحورية. تطبق مجالات الطباعة والعلامات التجارية هذه النظرية لجذب انتباه المستخدم إلى رسائل العلامة التجارية. الخلاصة يقصد بالمساحة البيضاء الجزء الموجود بين عناصر التصميم وهي أداة إضافية يمكن للمصمم الاستفادة منها أثناء تصميم تجربة المستخدم UX. لا يُشترط أن تكون المساحة البيضاء بيضاء بالضرورة، وسبب تسميتها أنها لا تشير إلى عناصر محددة من واجهة المستخدم ولا لمحتوى محدد. يمكنك كمصمم إضافة المساحة البيضاء وفق أربعة عوامل رئيسية: المحتوى Content التصميم Design المستخدم User العلامة التجارية Brand استخدم المساحة البيضاء الواسعة Macro White Space لتنظم المحتوى ضمن التنسيق ولتوجه المستخدم ضمن أجزاء المحتوى الظاهرة. استخدم المساحة البيضاء الدقيقة Micro White Space ضمن عناصر التصميم كما في النصوص والصور وأجزاء المحتوى. يمكننا تقسيم المساحة البيضاء أيضًا إلى مساحة بيضاء مباشرة Active وسلبية Passive. لا تملك المساحة البيضاء السلبية دورًا أساسيًا في التصميم فهي مسؤولة عن تسهيل تجربة المستخدم وتتعلق بتسهيل القراءة. بينما توجه المساحة البيضاء المباشرة انتباه المستخدمين وتركيزهم فهي تتعلق بإبراز العناصر والمعلومات. ترجمة -وبتصرّف- للمقال The power of white space لصاحبه Mads Soegaard. اقرأ أيضًا مفهوم الثقل المرئي (Visual Weight) والألوان في مجال تجربة المستخدم مبادئ التصميم المرئي في تصميم واجهة المستخدم أهمية الفراغات البيضاء في تصميم الويب

تزايد إجراء اختبار قابلية الاستخدام غير المراقب Unmoderated Usability Testing بعد تزايد الأدوات الممتازة المتاحة. فما هو اختبار قابلية الاستخدام غير المراقب؟ وهل ينصح باستخدامه؟ عندما تفكر الغالبية باختبار قابلية الاستخدام Usability Testing، يتبادر إلى أذهانهم مشرف يجلس في غرفة ويشاهد مستخدمًا يكمل عدة مهام. ويُعرف هذا التصور باختبار قابلية الاستخدام المُراقب شخصيًا In-person Moderated Usability Testing، كما توجد أنواع أخرى لاختبارات قابلية الاستخدام. يتزايد إجراء اختبارات قابلية الاستخدام عن بعد وغالبًا دون وجود مُشرف. ويمكن إجراء الاختبار غير المراقب عن بعد بفضل جيل جديد من الأدوات على الإنترنت، مثل UserZoom و UserTesting و Maze و Lookback وUserfeel. لا يتطلب Userfeel اشتراكًا، ويوفر بيانات كمية عن جلسات الاختبار مثل الوقت المستغرق في إنجاز المهام. توفر أداة الاختبار عادةً رابطًا مخصصًا يرسل إلى المشاركين، وعندما يفتح المشارك الرابط، فإنه يُكلّف بمهام لإكمالها ضمن موقع معين، حيث تسجل لمراجعتها لاحقًا؛ ويُشجع المشاركون على التفكير بصوت مسموع أثناء محاولتهم إكمال المهمة حتى يفهم مراجع التسجيل تفكيرهم. نشرح تاليًا اختبار قابلية الاستخدام غير المراقب ونوضح كيفية إجرائه بنجاح، لكننا سنذكر أولًا ميزات اعتماد اختبار قابلية الاستخدام غير المراقب بدلًا من الاختبار المراقب. لماذا ينصح باستخدام اختبار قابلية الاستخدام غير المراقب؟ لن نتمكن من الحديث عن اختبار قابلية الاستخدام غير المراقب Unmoderated Usability Testing دون موازنته باختبار قابلية الاستخدام المراقب Moderated Usability Testing، الذي يتفوق في بعض الجوانب. حين تراقب مستخدم خدمتك الرقمية وتتفاعل معه بالوقت الفعلي، فإنك تصل إلى رؤية أعمق عن سلوكه وتفكيره لا يمكن الوصول إليها بأي أسلوب آخر. يُبقي اختبار قابلية الاستخدام المراقب المُستخدم ضمن المسار الصحيح ويجنبه الوقوع في عدم الاستجابة، والأهم أنه يسمح بطرح الأسئلة على المستخدمين، لكن لاختبار قابلية الاستخدام المراقب بعض نقاط الضعف. لا يحافظ المشاركون على كامل وعيهم قد يربك الاختبار المشاركين في البداية ويُشعر العديد منهم بأن الاختبار يجري لتقييمهم وليس لتقييم تجربة المستخدم، كما قد يغير وجود المراقب أثناء إنجاز المهمة من أداء المشاركين؛ بالمقابل، يوفر الاختبار غير المراقب مسافةً بين المشارك والمشاهد، فرغم أن المشارك مدرك بأنك تراقب جلسته، إلا أنه أقل وعيًا بذلك ويميل للصدق، لذا يسهل على المشاركين انتقاد تجربة ما عندما لا ينظرون إلى عيني شخص ما مباشرةً. قياسات اختبار قابلية الاستخدام غير المراقب أفضل من المراقب توجد مشكلة أخرى لاختبار قابلية الاستخدام المراقب، وهي محدودية نطاقه. يعرض بحث جايكوب نيلسن Jacob Nielsen عدم الاستفادة من وجود أكثر من 6 مشاركين في إضافة زيادة مهمة باكتشاف المشكلات الجديدة، لكن بالتأكيد قد ترغب أحيانًا في إجراء الاختبار مع المزيد من المشاركين. انخفض عدد المشكلات الجديدة المكتشفة كثيرًا عند الاختبار مع أكثر من 5 أو 6 مستخدمين. تجنب مشكلات تنظيم المواعيد يتطلب إجراء اختبار قابلية الاستخدام المراقب جدولة موعد يجتمع فيه المشارك والمراقب، وهنا قد تزعج جدولة المواعيد كلا الطرفين، كما قد تحبط المراقب عندما يتخلف بعض المشاركين عن الحضور. بالمقابل، تسمح جلسة اختبار قابلية الاستخدام غير المراقب للمشارك بإكمال المهمة، ثم يراجع المراقب التسجيلات في وقت فراغه. باختصار، يسمح اختبار قابلية الاستخدام غير المراقب بالتالي: اختبار عدد أكبر من المشاركين. اختصار وقت تنظيم الجلسات وإجرائها. تحسين تجربة المستخدمين من حيث الراحة والواقعية. متى ينصح بإجراء اختبار قابلية الاستخدام غير المراقب؟ كقاعدة عامة، يفضل إجراء اختبار قابلية الاستخدام خلال مراحل التطوير الأولى لسهولة التعديل حينها. على سبيل المثال، قد يكون اختبار قابلية الاستخدام رائعًا للتحليل التنافسي. ويمكن لإجراء اختبار قابلية استخدام غير مراقب على مواقع منافسة أن يثبت كفاءته العالية، لكن نتائج استخدام اختبار قابلية الاستخدام غير المراقب تكون أفضل عندما يجرى لاحقًا في عملية التطوير حين يقترب إطلاق الموقع أو يكون قد أطلق بالفعل. إذا واجه المستخدم مشكلةً بسبب عدم اكتمال الموقع أو النموذج الأولي مثل وجود رابط لا يعمل، فلن يكون هناك مشرف يساعده على حل المشكلة؛ بالتالي يُعَد اختبار قابلية الاستخدام غير المراقب متممًا لاختبار مراقب يجرى في وقت سابق من دورة التطوير بدل استبداله كليًا. أي يُعَد اختبار قابلية الاستخدام غير المراقب أداةً مثاليةً لإجراء اختبار منتظم لموقع أثناء تصفحه مباشرةً، حيث يمكنك سؤال مستخدمي الموقع -من خلال عرض نافذة منبثقة- عن رغبتهم في إجراء جلسة قصيرة ضمن الموقع، ثم تحويلهم إلى رابط أداة الاختبار. في مواقع الانترنت المباشرة، يمكنك أيضًا استخدام مسجل جلسات مثل Microsoft Clarity أو Hotjar. إلا أن هذه الأدوات لا تسمح باختبار وظائف محددة، كما أنها لا تتيح للمستخدم شرح تفكيره. كيفية إجراء اختبار قابلية الاستخدام غير المراقب Unmoderated Usability Testing؟ يُعَد إجراء اختبار قابلية الاستخدام غير المراقب أمرًا بسيطًا تقنيًا بفضل الأدوات الممتازة المتاحة حاليًا، وكما هو حال كل اختبارات قابلية الاستخدام، فإن التحديات الحقيقية ليست تقنية. ولضمان حصولك على أفضل النتائج من إجراء اختبار قابلية الاستخدام، اتبع الخطوات التالية بدءًا من تحديد السؤال الذي تبحث عن إجابته بوضوح. 1. حدد الأسئلة التي تبحث عن إجاباتها تكون جلسات اختبار قابلية الاستخدام غير المراقب في العادة أقصر من الاختبارات المراقبة، وذلك لأنها تتضمن غالبًا قرارًا عفويًا بالمشاركة من زوار موقعك أو متابعيك على وسائل التواصل الاجتماعي أو قرّاء رسائلك الإلكترونية. هذا يرجح عمليًا أن بإمكانك طلب إكمال مهمة واحدة فقط من المستخدمين لانخفاض التزامهم، أي أنك تحتاج أن تكون جلستك مركزةً للغاية، وبالتأكيد يمكنك إجراء جلسات إضافية لاحقًا. بالتالي، تكون الخطوة الأولى لإجراء أي اختبار قابلية استخدام غير مراقب هي تحديد السؤال الذي تبحث عن إجابته. يعتمد السؤال هنا على ظروفك، وقد يتنوع من صيغة "هل رأى المستخدمون دعوتي لاتخاذ الإجراء؟" إلى "لماذا يغادر المستخدمون أثناء عملية التحقق؟". إذا لم تحدد سؤالك بوضوح، فسوف تنخفض قيمة جلسة قابلية الاستخدام حتمًا وينتهي بك المطاف بإضاعة وقتك ووقت الجميع. وبمجرد أن تحدد السؤال، يمكنك الانتقال إلى المرحلة التالية، وهي تصميم مهمة تساعدك في الوصول للإجابة. 2. صمم مهمة تساعدك في الإجابة عن سؤالك عليك أن أخذ فكرتين أساسيتين بالحسبان أثناء تصميم المهمة وشرحها. أولًا، احرص على عدم توجيه المشاركين لكيفية إكمال المهمة، ولنفرض على سبيل المثال أنك تشك في ظهور زر الاشتراك في النشرات البريدية للمستخدمين، وهنا ستكون المهمة كالتالي: تبدو المهمة منطقيةً ظاهريًا، إلا أنها تتضمن مشكلتين، فهي تخبر المستخدم بوجود نشرة بريدية يمكنه الاشتراك بها، كما أنها تدفعه للبحث عن كلمات مثل "نشرة بريدية" أو "أنشئ حسابًا"، وهي أدلة توجه المستخدم في إنجازه للمهمة عند ظهور هذه الكلمات ضمن الموقع، ولن يجد المستخدم أثناء تصفحه الفعلي تلميحات مشابهة. يمكنك تحسين المهمة لتصبح كالتالي: تذكر أيضًا أنك لن تتواجد ضمن الجلسة لتشجيعهم على التحدث حين يتوقفون عن الكلام، وهذا يوضح ضرورة التأكيد على شرحهم لما يفكرون به أثناء إكمال المهمة، وإلا فإنك لن تستفيد كثيرًا من تسجيل الجلسة. عند مراعاة الأفكار السابقة، قد تصبح المهمة كالتالي: بعد إنشاء المهمة، يمكنك الآن إعداد الاختبار واختيار المشاركين. 3. جهز الاختبار واختر المشاركين يُعَد تجهيز اختبار قابلية الاستخدام غير المراقب مهمةً بسيطة. وقد يختلف قليلًا وفقًا للأداة المستخدمة، إلا أن خطواته العامة تتمثل في إدخال المهمة وتحديد روابط البداية والنهاية، أي رابط بداية الاختبار على الموقع ورابط النهاية الذي تعرف الأداة عنده أن الاختبار قد انتهى؛ كما توجد أفكار إضافية تجب مراعاتها أثناء اختيار المشاركين؛ وهنا لا يُعَد الأمر صعبًا كما قد يتخيله الجميع. في أحيان كثيرة، لا يكون اختيار المشاركين المناسبين لاختبار قابلية الاستخدام مهمًا بالقدر الذي تتخيله، إذ ستحصل على رؤية قيمة غالبًا بما أنهم لن يكونوا ضمن الشركة أو المشروع مع وجود بعض الاستثناءات: عليك مراعاة وجود خصائص معرفية أو جسدية معينة لدى المشاركين أثناء اختيارهم، مثل اختيار مشاركين من فئة الشباب أو كبار السن أو ذوي القدرات الخاصة. إذا أردت الحصول على رؤية خاصة من أشخاص ذوي مستوى معين من المعرفة حول موقعك مثل المستخدمين الجدد أو المستخدمين العائدين Returning Users، فستحتاج أيضًا لاختيار المشاركين المؤهلين وفقًا للمطلوب. يمكنك إيجاد الأشخاص المناسبين بتحديد أسلوب مناسب لاختيارهم أو بطرح سؤال أو سؤالين تأهيليين قبل البدء. على سبيل المثال، إذا أردت اختيار عملاء حاليين، فبإمكانك استخدام قائمة المراسلة كمصدر للمشاركين؛ أما إذا أردت اختيار عملاء جدد تمامًا، فيمكنك طرح سؤال تأهيلي ضمن نافذة منبثقة عن استخدامهم الموقع سابقًا. يمكنك إيجاد المشاركين باستخدام النوافذ المنبثقة أو قوائم المراسلة أو وسائل التواصل الاجتماعي؛ ومع ذلك، يمكن لمعظم أدوات اختبار قابلية الاستخدام اختيار مشاركين مقابل رسوم رمزية، وهو أفضل خيار إذا كنت ترغب باختيار أشخاص يحققون خصائص سكانيةً محددة. بعد حصولك على مشاركين لإجراء الاختبار تبقى أمامك الخطوة الأخيرة وهي مراجعة النتائج. 4. مراجعة النتائج تبدو فكرة مراجعة المقاطع المسجلة لاختبار قابلية الاستخدام غير المراقب مملة، خاصةً إذا كانت المقاطع كثيرة، لكن لحسن الحظ هناك أدوات عديدة تسمح بتسريع العرض أو تخطي فترات عدم النشاط، كما توفر بعض الأدوات بيانات كمية مفيدةً أيضًا مثل أداة Userfeel. قد تشمل البيانات مقياس قابلية استخدام النظام System Usability Scale، أو الوقت اللازم لإنجاز المهمة؛ وهي مفيدة عندما تحاول قياس الأداء بالنسبة للاختبارات السابقة. لا توجد طريقة سحرية لكشف المشكلات أثناء مراجعة مقاطع الفيديو، لذا عليك الانتباه إلى الأمور التي يفشل المستخدمون في تطبيقها أو قولها. ورغم أن تحديد أخطاء الأفراد أسهل من تحديد الأشياء التي لم يقومون بها، إلا أن سبب فشلهم في الاختبار قد يعود لعدم إنجازهم لخطوة معينة بدلًا من فشلهم بها. على سبيل المثال، هل تناقص احتمال إنجاز المستخدمين للمهمة عندما تجاهلوا نص الإرشادات؟ ألم يقل المستخدمون شيئًا؟ قد يعني تجاهل المستخدمين لعرض القيمة أنهم لم ينتبهوا لوجوده أو أنه لم يلهمهم؛ إذ قد تشير فترات الصمت وعدم النشاط الطويلة إلى الارتباك أو حتى الإحباط. عليك أن تتعلم القراءة بين السطور أثناء مشاهدة اختبارات قابلية الاستخدام بالإضافة لملاحظة ما يحدث، لكن لا تتسرع بافتراضك أنك وجدت التفسير الصحيح، بل فكر بإجراء اختبار آخر للتأكد. يأتي الإتقان بالتدريب مثل كل شيء آخر، يحتاج تفسير نتائج اختبار قابلية الاستخدام غير المراقب إلى التدريب. وينطبق الأمر ذاته على إيجاد أسئلة لطرحها وتصميم المهام لدعم الأسئلة. يُعَد إجراء الاختبار بانتظام أفضل التمارين، لذا اختر أداةً جيدةً وحاول إجراء اختبار واحد شهريًا على الأقل. وهنا سوف يتحسن إجراؤك للاختبارات، كما ستتعلم الكثير ثم تبدأ برؤية التحسن مع الوقت. ترجمة -وبتصرّف- للمقال When and How to Run Unmoderated Usability Testing لكاتبه Paul Boag اقرأ أيضًا قابلية الاستخدام وأهميتها في تجربة المستخدم اختبار التصميم وأفضل الطرق لإجرائه كيفية إجراء اختبار سريع لتجربة المستخدم

موضوع هذا المقال معني بإدراك العين للتصميمات، فعندما نتعلم كيفية إدراك العين البشرية ستتحسن قدرتنا على ترتيب عناصر التصميم بفاعلية أكبر. يخضع محتوى تنسيق أي صفحة رقمية لتسلسل محدد، إذ توجد الترويسات Headers أعلى النص الأساسي، بينما توجد القوائم على الشاشة في الأعلى أو الأسفل أو اليمين أو اليسار عادةً. يحاول المصممون تنظيم المحتوى بحيث تكون الأولوية لظهور الجزء الأهم من أي صفحة أولًا، ثم يُدرجون باقي المحتوى مرتبًا من الأكثر إلى الأقل أهمية. يُقصد بالتسلسل Hierarchy ترتيب المحتوى وفق الأهمية. ويُستخدم أيضًا لإبراز العلاقة بين أجزاء المحتوى عند وجودها. يحدد المستخدمون التسلسل المرئي Visual Hierarchy للتطبيق أو الموقع الإلكتروني، إذ تُعطى الأولوية للعنصر الذي يجذب العين أولًا، ثم يأتي كل عنصر يجذب الانتباه بشكل ثانوي للعنصر السابق له. مبادئ التسلسل تتلقى الحواسيب المعلومات على شكل بيانات، بينما تتلقاها العين البشرية مرئيًا، وبالتالي نخضع للميول الفطرية لأعيننا البشرية. قد تتذكر المواد التي كنا نقرأها في الطفولة وما تحويه من صور كثيرة وكتابة بخطوط كبيرة. كنا نفهمها سواء كانت قصصًا مصورة أو دفاتر تلوين أو قصصًا قصيرة، وذلك لفهمنا الرسوم التوضيحية وتتبعنا تسلسل الأحداث مع الاستعانة بالنصوص البسيطة سهلة القراءة. يتأثر إدراكنا للمعلومات بعدة عوامل تسهم في كيفية ترتيب تسلسل المحتوى ضمن التنسيق Layout. لخص جونز Jones عام 2011 العوامل المؤثرة على التسلسل بالتالي: الحجم يزداد جذب العنصر للانتباه بزيادة حجمه بالنسبة للعناصر الأصغر. تذكر عناوين الصحف، تكتب الصحف العنوان بخط كبير للإشارة إلى محتوى باقي النص المكتوب بخط أصغر، إذا كان النص لخبر عاجل مثلًا ستتجه عينك إلى العنوان مباشرةً، لاحظ كيف يبرز العنوان ويدفعك لمعرفة المزيد حوله. اللون تجذب الألوان الزاهية الانتباه أكثر من الألوان الباهتة غالبًا. نستخدم جمعيًا أقلام التمييز لتحديد بعض الأفكار أثناء الدراسة من مفكرة مطبوعة بالأبيض والأسود. يبرز اللون الأصفر أكثر من الأبيض لأنه أكثر إشراقًا وإشباعًا، ثم تجذب الألوان الأغمق انتباه العين بعد الألوان الزاهية، ثم الدرجات الأفتح، لأنها تبدو بعيدة وباهتة. أما الألوان الأقل جذبًا للانتباه فهي الدرجات الرمادية والباهتة من الألوان. تخيّل مثلًا أنك تمشي في يوم ضبابي وتحاول العثور على أصدقائك، يرتدي أحدهم سترة واقية واضحة، ستلاحظه أولًا، ثم ستجد صديقك الذي يرتدي معطفًا مطريًا خمريًا تاليًا. وسيصعب إيجاد صاحبة المعطف الطويل الفاتح. وقد لا تلاحظ وجود صديقكم الرابع بينما هو يقف بجانبكم لأنه لسوء الحظ يرتدي سترة رمادية اللون مع بنطال رياضي باللون ذاته. التباين تجذب الألوان المتباينة جيّدًا الانتباه أكثر من الألوان قليلة التباين. يساعدك التباين على إبراز العناصر الأهم في تصميمك. كل شيء نسبي، تخيل أنك تريد إنشاء تصميم مبني على خطة مهندس معماري للمجمعات السكنية العالية، إذ ترغب بعرض المباني المضاءة وجيدة التهوية وصديقة البيئة فوق سطح الأرض، ولكنك ترغب أيضًا بعرض الأساسات العميقة المتينة وموقف السيارات الموجود تحت الأرض. عند تقسيم تصميمك بهذا الأسلوب ستلفت الأنظار إلى ميزات المعيشة المبهجة للشقق الموجودة بجانب الغابة. هكذا يكون تصميم الجزء السفلي (التذييل Footer) حيث تظهر فائدة البنية وأمانها ويحفز التسلسل تفاعل المستخدم. المحاذاة تنظم المُحاذاة عناصر التصميم. يحدد وضع المحتوى أولًا ثم عمود الشريط الجانبي الأولوية للقارئ. نتوقع أن نجد المعلومات المهمة مثل أزرار تسجيل الدخول في الزاوية العلوية اليُسرى من الصفحة، وينطبق الكلام السابق على المجلات أيضًا. عندما نبحث عن جملة مقتبسة من مقابلة مثلًا، إذ يريد الكاتب تسليط الضوء على كلام المُتحدث، يكون للاقتباس تسلسل مرئي يجذب انتباهنا أولًا لأنه مكتوب بخط أكبر وخارج عن محاذاة باقي النص. التكرار تمنح أساليب التكرار المشاهد إحساسًا بارتباط أجزاء المحتوى. عند تغيير الأسلوب الرتيب لنص مكتوب إلى نص باللون الأحمر سيصرف النص المميز الانتباه إليه عن المحيط المألوف. تعد الارتباطات التشعبية Hyperlinks مثالًا آخر؛ عندما تزور صفحة تحوي الكثير من الكلمات المكتوبة باللون الأزرق وتحتها خط، تعلم مباشرةً أنها مُتجاوبة ويمكنك النقر عليها للانتقال إلى صفحات أخرى. التقارب يدل قرب عناصر التصميم من بعضها على ارتباطها. يمكننا فصل عناصر القائمة بمسافة فارغة، ويمكن تقريب العناوين من أول فقرة من المعلومات، يوضح هذا التقارب أن عناصر القائمة منفصلة رغم ارتباطها نسبيًا وأن العناوين مرتبطة بالمحتوى التالي لها. المساحة البيضاء يمكنك استغلال المساحات حول المحتوى لجذب الانتباه إلى أجزاء محددة منه، لا يُشترط أن تكون المساحة البيضاء بيضاء وقد تأخذ أي لون. تخيل الجهد الذي يمكن أن توفّره عليك. لهذه المسافات وظيفتان فهي تسهّل على العين استقبال المعلومات، وتترك لها مجالًا للتركيز على كل جزء من المعلومات مثلًا على كل فقرة. البنية والأسلوب يساعد استخدام البُنى والأساليب في ترتيب أهمية المحتوى أيضًا. فهي تعطي مظهرًا عامًا للتصميم تمامًا كالخطوط. تخيل العمل على مشروعين حيث يريد وكيلا سفر صفحتي هبوط لنشر عروض منتجعاتهما. يملك أحد المُنتجعين طابع الشاطئ وللآخر طابع البُحيرة. نعرض في منتجع الشاطئ خلفية لصورة مقربة للماء الصافي أعلى الرمال البيضاء الجميلة، كانت النتيجة مُرضية، إلا أننا حين حاولنا تكرار الأسلوب السابق مع مُنتجع البُحيرة ظهرت كثير من الحصى والحجارة الكبيرة الداكنة من خلال المياه الزجاجية الصافية وكانت هذه الُبنية مُشتتة لاحتوائها على تفاصيل أكثر من بنية الرمال الناعمة. تؤكد تقارير كوبنهاجن تزايد المصممين ولا سيما مصممي المواقع المدركين لأهمية إشراك المستخدمين مباشرة. يؤدي الاطلاع البسيط على علم النفس الغرض. أنماط التسلسل المرئي توجد أنماط شائعة للتسلسل المرئي سواء في الصفحات المطبوعة أو الرقمية. تستند هذه الأنماط إلى حركات العين الفطرية عند النظر إلى صفحة جديدة. تُقرأ اللغة الإنجليزية مثلًا من اليسار إلى اليمين، وبالتالي لقرّائها نمط معين لمسح صفحة تحوي نصًا، بينما لقرّاء اللغة العربية نمط مختلف لأن اللغة العربية تُقرأ من اليمين إلى اليسار. من المهم فهم معالجة المستخدمين للمعلومات قبل اعتماد نمط التسلسل المرئي. سنطرح تاليًا أسلوبين شائعين للقراءة باللغة الإنجليزية من اليسار إلى اليمين. النمط Z يُستخدم النمط Z للمسح البصري بكثرة في مواقع الإنترنت التي تحوي نصوصًا قليلة مثل مواقع الإعلانات المصغرة للخدمات أو المنتجات دون إدراج معلومات كثيرة. يرى المستخدم أن نصوص الصفحة قليلة وتبدأ عينه بمسحها من أعلى اليسار أفقيًا حتى أعلى اليمين ثم تُلقي نظرة سريعة على المحتوى بشكل مائل إلى أسفل اليسار قبل الانتقال أفقيًا إلى أسفل اليمين. يمكنك الاستفادة من هذا النمط عندما تضع المعلومات الأهم على امتداد الخط Z الذي تتبعه العين أثناء مشاهدة الصفحة، أي لديك أربع نقاط مرتبطة بثلاثة خطوط تشكل حرف Z. النمط F يستخدم المصممون النمط F عادة في المواقع التي تحوي نصوص كثيرة أو مقاطع فيديو. يمسح المستخدمون المحتوى وفقًا للنمط F من اليسار إلى اليمين على طول الجزء العلوي، ثم يعودون لمسح الجانب الأيسر من أعلى الصفحة إلى الأسفل بحثًا عن عناصر مرئية للمعلومات المطلوبة ثم يُكملون المسح من اليسار إلى اليمين بعد أن يجدوا العنصر الذي يبحثون عنه، ويكررون العملية السابقة حتى يصلوا إلى نهاية الصفحة. وطبعًا نقلب حرف F أفقيًا ونتابع من اليمين إلى اليسار في حالة المواقع العربية. ينتج عن المسح وفق هذا النمط مخطط يشبه الحرف F، كالموضح في الصورة الموجودة في بداية المقال. يمكن استخدام النمطين Z وF في صفحات موقع إلكتروني واحد. قد تصمم صفحة رئيسية واضحة موافقة للنمط Z، ثم يمكنك عرض المزيد من البيانات وفق النمط F عندما يتعمق المستخدم ضمن الموقع. الخلاصة يمنحنا التسلسل المرئي ترتيبًا لتسهيل فهم التصميم. نريد ترتيب الترويسات والقوائم وفقًا لأهميتها حيث نحدد ما يريده المستخدمون وإلى ماذا نريد توجيههم. يعالج المستخدمون المعلومات بصريًا، ويدركون العناصر وفق ترتيب المصمم لأولويتها باستخدامه: الحجم: تجذب العناصر الأكبر الانتباه أولًا. اللون: تجذب الألوان الزاهية الانتباه قبل الألوان الباهتة. التباين: تجذب الاختلافات الواضحة بين العناصر الانتباه إلى العنصر الأكثر إشراقًا. المحاذاة: يتوقع المستخدمون إيجاد عناصر معينة في أماكنها المُعتادة. التكرار: تجذب العناصر المُكررة انتباه المستخدم مثل الأجزاء الملونة من النص. التقارب: يشير تقريب العناصر المرتبطة من بعضها إلى وجود علاقة بينها، مثل وضع العنوان بجانب النص المرتبط به. المساحة البيضاء: إن إضافة مسافات فارغة حول العناصر يميزها إلى مجموعات منفصلة من المعلومات. البنية والأسلوب: يجذب استخدام البنى Textures والأساليب Styles الأنظار كما يضيف طابعًا على التصميم. تُقرأ التصاميم في العالم الغربي وفق نمطين للتسلسل المرئي: النمط Z: يميل المستخدمون لمسح التصاميم التي لا تحوي الكثير من التفاصيل من أعلى اليسار إلى أعلى اليمين، ثم ينتقلون وفق خط مائل إلى أسفل اليسار ثم أفقيًا إلى أسفل اليمين. النمط F: نمسح التصاميم الحاوية على نصوص كثيرة بدءًا بالأعلى من اليسار إلى اليمين، ثم من اليسار إلى الأسفل بحثًا عن المعلومات التي نرغب بمعرفتها. ثم عند مصادفتها نكمل المسح من اليسار إلى اليمين. يمكنك الاعتماد على عين المستخدم واستخدام هذه الأنماط لزيادة تأثير تصميماتك. خذ كل العوامل السابقة بالحسبان أثناء التخطيط لتصميمك. قد تقرر استخدام عدة أنماط معًا، بما في ذلك دمج النمطين Z وF. تذكر أنك توجه تصميمك للمستخدمين، وفقًا لجهازهم المستخدم والتصميم الذي قد يرغبون برؤيته على الإنترنت. ترجمة -وبتصرّف- للمقال Visual Hierarchy: Organizing content to follow natural eye movement patterns لصاحبه Mads Soegaard. اقرأ أيضًا تعرف على أساليب مسح الواجهة والتراتب المرئي في مجال تجربة المستخدم أساسيات التصميم المرئي مبادئ التصميم المرئي في تصميم واجهة المستخدم لماذا يحتاج كل تصميم إلى ثلاثة مستويات من التسلسل في تنسيق النصوص مبادئ علم النفس التي تساعد على تحسين تصميم موقعك الإلكتروني

يعتقد الغالبية أنهم بارعون في إجراء المقابلات، إلا أنهم معرضون للوقوع في بعض الأخطاء حتى لو كانوا أكثر المحاورين خبرة. نادرًا ما نخصص وقتًا لتحليل مهاراتنا في إجراء المقابلات أو نطلب من الآخرين تقييمًا لأساليبنا. توجد مقالات كثيرة عن كيفية اجتياز المقابلات كمتقدم لمنصب تصميم تجربة المستخدم، إلا أن التركيز قليل على كيفية إجراء هذه المقابلة بالنسبة للمُقابِل. يعد تقييم المرشحين لمنصب مصمم تجربة المستخدم أمرًا صعبًا لاسيما بوجود التنوع الكبير في بيئاتهم وخبراتهم ومهاراتهم. نستعرض تاليًا أمثلة عملية لبعض الأفراد الوهميين يمثلون المُقابِل والمتقدم ثم نقدم توصيات لتجنب الأخطاء الشائعة في المقابلات. بناء استجابة جيدة للمتقدم ستجري خديجة وهي مديرة متخصصة في مجال بحث تجربة المستخدم في شركة تقنية ضخمة مقابلة مع فاطمة المتقدمة للحصول على منصب باحثة مبتدئة لتجربة المستخدم. بعد أن ذكرت خديجة بسرعة اسمها ومسماها الوظيفي وبعض المعلومات الأساسية عن الشركة، انتقلت لتطرح على فاطمة سلسلة أسئلة مكثفة لتقييم خبرتها بمجموعة واسعة من أساليب البحث. تجد خديجة من منظورها أن الوقت محدود لتقييم المتقدمة وتريد التأكد من معرفتها لكل شيء. جهّز موظفها أيضًا مجموعة أسئلة سلوكية وعليها إرفاق إجابات فاطمة عنها قبل انتهاء المقابلة. تشعر فاطمة مباشرة بالخوف وعدم الارتياح بسبب تدفق الأسئلة السريع حول أمور لا تملك فيها الخبرة التدريبية أو التعليمية الكافية. كان بإمكان خديجة إجراء المقابلة السابقة على نحو أفضل لمنح فاطمة راحة أكبر وتحويل المقابلة لتأخذ منحى محادثة أكثر منها استجواب. تحلى بالتعاطف خضعنا جميعًا لمقابلات في مرحلة ما من حياتنا المهنية. لسوء الحظ، إن التحلي بالتعاطف أول ما يخسره الشخص عندما يجري مقابلة مع الآخرين. يشعر معظم المرشحين بالتوتر أو القلق أثناء تفاعلك معهم سواء ظهر ذلك عليهم أم تمكنوا من إخفائه. ثبُت علميًا أن توتر الأشخاص يزيد نسيانهم ويؤثر على أدائهم المعرفي بالتالي أنت لا تتفاعل مع الشخص في أفضل حالاته وأداؤه لا يعكس بالضرورة أداءه الفعلي للعمل. عليك أن تأخذ فكرتين بالحسبان: ما الظروف التي يُحتمل أن المتقدم يواجهها في حياته الشخصية أو المهنية حاليًا؟ هل يمكن أن يرتبك المتقدم بسبب منصبك أو شركتك؟ تذكّر دومًا أنك تريد أن ينجح المتقدم. جهز بيئة مثالية ليتمكن هذا الشخص من تقديم نفسه بأفضل أسلوب ممكن. يجب عليك التعاطف مع المتقدم حتى لو وجدت أنه غير مناسب للوظيفة. تحلى بالإنسانية تُجرى العديد من المقابلات عبر الإنترنت حاليًا وقد ترغب بإنجازك عدة مهام أخرى أثناء إجرائك للمقابلة. تأكد قبل أن تبدأ المقابلة مباشرةً من إغلاق بريدك الإلكتروني وإيقاف إشعارات تطبيقات الدردشة وتحويل هاتفك المحمول إلى وضع كتم الصوت. أظهر للمتقدم اهتمامك بحديثه من خلال تكرار التواصل البصري معه مباشرةً أو بالنظر إلى الكاميرا إن كانت المقابلة عبر الإنترنت. لا بأس بإظهار المشاعر، يريح الابتسام وحتى الضحك حين يكون مناسبًا المتقدم على الفور ويحول المقابلة إلى محادثة ودية. لا يشترط أن يشارك أحد الطرفين فقط خبراته وأفكاره. أخبر المتقدم عن نفسك قليلًا، يمكنك أن تروي له موقفًا شخصيًا أو تخبره شيئًا تحبه عن عملك أو أمرًا ممتعًا عن فريقك. لا تتصرف وكأنك تجري اختبارًا لاستجوابه بل محادثة لتحدد من خلالها الشخص المناسب. كن فضوليا يستهلك إجراء المقابلات وقتًا طويلًا، خاصّة عندما يترتب على من يجريها الكثير من المهام خلال اليوم. يُنصح غالبًا بتحديد أسئلة مسبقة، إلا أن الالتزام بهذه الأسئلة قد يثبط فضولنا في التعرف على المتقدم والاستماع لقصته المميزة. عدّل أسئلتك وفقًا لمستوى خبرة الفرد. إن كانت الوظيفة المهنية الوحيدة للمتقدم ذات الصلة بالوظيفة الحالية هي خضوعه لتدريب سابق، ركّز على حصيلته التعليمية من هذه التجربة. إن كانت خبرة المتقدم عشرون عامًا حاول الوصول لفهم أوسع عن خبرته السابقة بدل الاكتفاء بمعرفة تفاصيل وظيفته الأخيرة. ابحث عن شغف المتقدم ابحث عن أكثر ما يثير حماسه هل هي أبحاث علم الإنسان أم أنظمة التصميم أم إمكانية الوصول Accessibility أم غيرها. لا يُشترط أن يتطابق شغفه مع اهتماماتك الشخصية أو المنصب المحدد الذي تقدم ليشغله، فكر في التنوع الذي يمكن أن يضيفه لفريقك. كيفية تقييم المتقدمين تعمل منى المصممة المتخصصة في تجربة المستخدم في شركة خدمات مالية وتقدم أحمد لشغل منصب مصمم تجربة مستخدم متخصص في فريق منى. يبدو أحمد متوترًا عند التفكير في كيفية الإجابة عن أسئلة منى. تعتقد منى أن سؤالها يتطلب إجابة أسرع، كما أنها تشعر بالجوع وتنتظر بفارغ الصبر استراحة الغداء التي ستبدأ عند انتهاء هذه المقابلة. تشك منى في إدراك أحمد لمهامه بالنسبة للمتقدم الذي سبقه مباشرة. يعمل المُتقدم السابق في شركة ناشئة مشهورة، وهو أكثر ثقة في قدراته، ويبدو العمل معه فكرة رائعة. أدركت منى عند انتهاء المقابلة أنها لم تمنح أحمد أي فرصة ليطرح أسئلته لذا عرضت عليه بفتور فرصة لطرح سؤال واحد قبل انطلاقها لتناول الغداء. لسوء الحظ، لم تقيّم منى أداء أحمد بالموضوعية والانفتاح اللازمين، وربّما خسر فريقها فرصة لتوظيف عضو مميز. حافظ على موضوعيتك كُن على دراية بانحيازاتك. تعيق الانحيازات القدرة على اتخاذ القرار السليم بسهولة. قد ترتكبها دون أن تدرك ثم تتساءل عن سبب حصولك على نتائج غير ملائمة من عملية التوظيف باستمرار. تجنّب الانحياز الذي تسببه الافتراضات والأحكام المسبقة عن الأشخاص قبل المقابلة. لن يكون الشخص رائعًا لمجرد وجود شركات مثل فيسبوك وجوجل وأمازون في سيرته الذاتية. قد تقع ضحية لانحياز الحداثة Recency Bias نتيجة الموازنة بين متقدم سابق قابلته للتو مع شخص تتحدث معه حاليًا. يعد تأثير الهالة The Halo Effect أحد الانحيازات المعرفية Cognitive Bias حيث يتأثر تقييمنا لشخص إيجابًا بسبب آرائنا حول صفاته الأخرى. وبالمقابل يعد تأثير القرن The Horn Effect انحيازًا يتشكل بموجبه رأي سلبي عن الآخر بسبب صفة سيئة وحيدة لديه. لتجنبه قيّم المتقدم بأسلوب متوازن. قد يصعب التفكير بهذا الأسلوب لأننا نأخذ انطباعاتنا عن الأشخاص بسرعة عادةً. إذا وجدت أنك تتفاعل سلبًا مع المتقدم، حاول التفكير بأي سمة إيجابية لاحظتها لديه حتى الآن. أما إن كان تفاعلك إيجابيًا، فكر تفكيرًا نقديًا في أي عيب لاحظته. تذكر أن الهدف الأساسي هو تحديد إن كان المتقدم مؤهلًا للمنصب ومناسبًا له وليس تقييم مهارته في إجراء المقابلات. لا تعكس إجابات المتقدم الصحيحة على كل الأسئلة وهيئته الواثقة كيفية أدائه للوظيفة بالضرورة . اطرح أسئلة للتحقق تدور حول من وماذا وأين ومتى ولماذا قد تنصح شركتك بطرح أسئلة سلوكية محددة تُصاغ غالبًا بأسلوب محدد على نحو "أخبرني عن تصرّفك في موقف…." حتى لو كان المرشح مستعدًا للإجابة على أسئلة من هذا النوع بأسلوب رائع لتدربه عليها ما زال بإمكانك المتابعة معه بأسئلة أخرى للتأكد. يفشل المقابل غالبًا في التحقق من إجابات هذه الأسئلة ويصل بالتالي لفهم خاطئ أو سطحي عن خبرة المتقدم وقدراته الفعلية. في ما يلي مواقف تتطلب أن تمنحها وقتًا كافيًا للمتابعة والتحقق: لا تبدو إجابات المتقدمين متوافقة مع الخبرة المذكورة في سيرتهم الذاتية. رأيك مخالف لهم أو تعتقد أن إجابتهم ضعيفة. لست متأكدًا من فهمهم لسؤالك. لست متأكدًا من فهمك لإجاباتهم. تشعر أن إجابتهم لسؤالك ناقصة. امنح نفسك الفرصة لفهم الموقف تمامًا، امنح المتقدم فرصة للتوضيح، وامنح نفسك فرصة للمتابعة بأسئلة دقيقة واضحة عن إجابته. اترك مجالًا لطرح عدة أسئلة للمتابعة بعد كل سؤال سلوكي تخطط لطرحه. لا تضيع الوقت قد لا يتسع الوقت لطرح كل الأسئلة المطلوبة، وعليك تجنب طرحها كلها معًا بسرعة لمجرد إدراجها جميعًا. تأكد من طرحك للأسئلة الأهم أولًا، وامنح المتقدم وقتًا كافيًا للإجابة، ثم امنح نفسك وقتًا كافيًا للمتابعة بأسئلة التحقق. لست مُلزمًا بسؤال المتقدم عن معلومات أدرجها مسبقًا في سيرته الذاتية كأدوات التصميم أو البحث التي يتقنها أو المدارس التي ارتادها. لا تهدر الوقت في إخبار المتقدم بمعلومات عن الشركة يسهل إيجادها بزيارة موقع إلكتروني. لا تطرح الكثير من الأسئلة المفتوحة. لا يملك المتقدمون أي فكرة عن مدى تفصيل الإجابات التي تبحث عنها ويميلون للاستفاضة أثناء الإجابة. حاول أن تحدد معظم أسئلتك وأعط المتقدم فكرة عن التفصيل الذي تتوقعه. تذكر أن بإمكان الطرفين طرح الأسئلة. لا تنتظر آخر خمس دقائق من المقابلة حتى تسمح للمتقدم بطرح الأسئلة. حاول الإجابة على أسئلته بصدق وصراحة قدر الإمكان. تذكر أنه يقيمك أيضًا كممثل للشركة وزميل أو رئيس عمل محتمل. قدم ملاحظاتك يُدرَّب معظم المقابلون على عدم تقديم أي ملاحظات للمتقدمين أثناء المقابلة. قد يتأثر ذلك بتخوف الموارد البشرية أو الفرق القانونية من ذكر المقابلين أمرًا غير مناسب قد يحمل عواقب قانونية لاحقًا. يجب أن تنتبه لملاحظاتك وأن تكون دقيقًا في كيفية طرحها، لكن بالتأكيد يجب أن تبقى جزءًا من المقابلة ولا يجب إلغاؤها. يعد تقديم الملاحظات البناءة أسلوبًا إضافيًا لتقييم المتقدم. لاحظ تفاعله مع ملاحظاتك. هذا لا يعني أن تنتظر موافقته بحماس لكلامك، بل لاحظ إن بدا أنه يفكر حقًا في الملاحظات التي طرحتها ويأخذها بالحسبان، أم أنه لا يوافقك الرأي ويبدو محبطًا ومنزعجًا. قد يمنحك تفاعله مع التعليقات فكرة عن كيفية استجابته للملاحظات في حال انضمامه لمنظمتك. لا يُشترط أن تكون الملاحظات سلبية دومًا يمكنك إبداء إعجابك بمشروع محدد من معرض أعماله أو ذكر أنك وجدت جانبًا من خبرته السابقة مثيرًا للاهتمام. تريح التعليقات الإيجابية المتقدم وتساعده على تقديم نفسه بواقعية أكبر. قائمة التحقق الخاصة بمن يُجري المقابلة تأكد من التزامك بالنقاط التالية خلال المقابلة: منح المتقدم شعورًا بالراحة. البحث عن فرصة للتحقق من خلال طرح أسئلة تبدأ بماذا ولماذا وأين وكيف. تقديم ملاحظات إيجابية وبنّاءة. منح المتقدمين فرصة كافية لطرح الأسئلة خلال المقابلة. الابتسام أثناء المقابلة. اجمع ملاحظات عن أسلوبك في إجراء المقابلات يتطلب تحسين مهاراتك في إجراء المقابلات وقتًا وخبرة وقد يصعب تقييم أدائك بموضوعية. تأكد من حصولك على ملاحظات عن مقابلاتك سواء من رئيسك في العمل أو زملائك. سجّل مقابلاتك إن أمكن ليراجعوها أو اسمح لبعضهم بالتواجد أثناء إجرائك بعض المقابلات. يجب أن يشعر المتقدم أنك استمعت له بصدق ومنحته الفرصة لتقديم نفسه بأفضل ما يمكن وتفاعلت معه أثناء المقابلة بغض النظر عن نتيجتها. ترجمة -وبتصرّف- للمقال It Starts with a Conversation: A Guide to Interviewing UX Candidates لصاحبه Andrew Schall. اقرأ أيضًا أفضل أسرار التوظيف من محاور خبير 31 سؤال في المبيعات لمساعدتك في توظيف مندوب مبيعات في شركتك كلّ ما تريد معرفته عن تبديل الموظّفين سؤال في مقابلة التوظيف: ما هي نقاط ضعفك؟

يفترض نظريًا أن يعمل كل من تصميم تجربة المستخدم UX Design ومنهجية Agile معًا بسلاسة، وذلك لأن هدفهما مشترك، لكن تصميم تجربة المستخدم UX سيمثل مشكلةً غالبًا عند اعتماد منهجية أجايل، ونوضح السبب في هذا المقال، ثم نقترح بعض الحلول. يرى البعض أن النتائج تكون سيئةً عند تطبيق منهجية أجايل Agile، لكن الواقع هو أن معظم المنظمات تطبق استراتيجية أجايل Agile بأسلوب خاطئ، خاصةً من منظور تصميم تجربة المستخدم، إذ لا تعكس المشكلات الناتجة منهجية أجايل Agile. مع ذلك، تملك منظمات قليلة فقط ثقافةً تمكّنها من اعتماد Agile بأفضل ما يمكن. يجب أن يعطي تصميم تجربة المستخدم نتائج جيدة عند اعتماد منهجية أجايل Agile نتائج جيدة قد يغمرك الحماس عندما تقرأ بيان منهجية أجايل للتطوير Agile Manifesto للمرة الأولى، وقد تبدو منهجيات العمل ضمنها مثل منهجية التدافع Scrum منطقية، كما قد تروقك قوائم المهام Backlogs، والمراحل Sprints (وهي فترات زمنية قصيرة من العمل المكثف)، وسير قصة المستخدم User Story-Driven، والعمل الجماعي، والتسليم التتابعي الجزئي Incremental Delivery؛ وقد تدعمها بصفتك مصمم تجربة مستخدم. مع ذلك قد يكون الواقع محبطًا لمصممي تجربة المستخدم ضمن منظمات يفترض أنها تستخدم منهجية Agile. لماذا يكون تطبيق منهجية أجايل Agile غير مناسب في الواقع تكمن المشكلة في ادعاء معظم المنظمات تطبيق أجايل Agile حين تقصد أن فريق التطوير للمنظمة هو من يطبقها فقط. يزدهر تصميم تجربة المستخدم فعليًا في منهجية أجايل Agile حين تطبق على مستوى المنظمة بالكامل، لأن تطبيق منهجية أجايل Agile ضمن فريق التطوير فقط لن يحقق العديد من مبادئ المنهجية الفعلية، وسيفشل غالبًا تطبيق منهجية أجايل Agile على أرض الواقع من عدة جوانب. تفويض مهمة صياغة المشاريع للإدارة وفقًا لبيان منهجية أجايل للتطوير Agile Manifesto، يجب أن تتألف الفرق من كل من رجال الأعمال والمطورين، وأن تكون ذاتية التنظيم وتتعاون في تحديد التوجه، لكن نادرًا ما يأخذ العمل المسار السابق. لا تزال الإدارات العليا مسؤولةً عن إطلاق المشاريع وتحديدها بالمجمل دون أي ملاحظات من فريق تنفيذ المشروع. لا يُعَد تطبيق المنظمة لمنهجية أجايل صحيحًا إذا كان فريق التطوير يطبقها وحده فقط مع حفاظ باقي المنظمة على منهجية الشلال التقليدية للعمل Waterfall Approach. منهجية أجايل حيث يعمل أفراد الفريق معًا. بعبارة أخرى، نادرًا ما يشارك مصممو تجربة المستخدم في قرار تطبيق المشاريع أو إلغائها، أو تحديد المشاريع ذات الأولوية. أي إن هذه المرحلة الباكرة من المشروع نادرًا ما تأخذ المستخدم بالحسبان. من النادر أن تأخذ المشاريع حاجات المستخدم بالحسبان يذكر بيان منهجية أجايل للتطوير Agile Manifesto أن "إرضاء العميل أهم أولوياتنا"، لكن يندر عمليًا إجراء بحث مستخدمين محكم لتحديد نوع المشروع ونطاقه، حيث تبنى المشاريع وفق السياسة الداخلية للمنظمة واستراتيجية العمل والآراء الشخصية. وتركز المشاريع على الميزات بدل التركيز على قصص المستخدمين التي تقترحها منهجية التدافع Scrum. تؤكد المراحل Sprints على أهمية السرعة سبب اعتماد العديد من فرق الإدارة لمنهجية أجايل Agile هو تعهدها بسرعة التسليم، إلا أنهم يتجاهلون تأكيدها على الجودة بجانب السرعة، وبالتالي تركز المراحل Sprints (وهي فترات زمنية قصيرة من العمل المكثف) على السرعة قبل أي شيء آخر. وبالنتيجة، تقع الفرق تحت ضغوط إنجاز العمل بسرعة، بحيث لا يتوفر الوقت الكافي للاختبار أو التكرار، رغم أن الجودة قيمة جوهرية في منهجية أجايل Agile. إطلاق منتج الحد الأدنى MVP كخدمة نهائية يُعَد التسليم المستمر Continuous Delivery أحد قيم أجايل Agile الأساسية أيضًا، ويعني أن أول تكرار للخدمة الرقمية يعطي غالبًا المنتج القابل للتطبيق بالحد الأدنى ويسمى منتج الحد الأدنى MVP، ثم يخضع مع الوقت لعمليات التكرار لتحسينه. وعندما تفشل المنظمة العامة بتطبيق منهجية أجايل Agile، يصبح الضغط هائلًا للانتقال إلى المشروع التالي من المشاريع المتراكمة. مما يؤدي إلى اعتماد منتج الحد الأدنى MVP كخدمة نهائية. يعود السبب جزئيًا هنا إلى كثرة المشاريع المستلمة بسبب الافتقار لآلية تقييم للمشاريع المحتملة. عدم توازن فرق المشروع تظهر مشكلة أخرى عند تصميم تجربة المستخدم في التطبيق الواقعي لمنهجية أجايل Agile بسبب عدم التوازن في النسبة بين أعداد المطورين ومصممي تجربة المستخدم، إذ يفوق عدد المطورين في معظم المنظمات عدد مصممي تجربة المستخدم، مما يعني أن أي مصمم يعمل ضمن عدة فرق في آن واحد. تصعب استشارة مصممي تجربة المستخدم خلال المراحل الأولية عند نقص أعدادهم، وبالتالي لا يكون تمثيل المستخدم كافيًا أثناء مرحلة التطوير. نقص التفكير الشمولي Holistic Thinking المشكلة الأخيرة بالنسبة لتصميم تجربة المستخدم في منهجية أجايل Agile هي إحدى سمات المنهجية، وتنبثق من كونها منهجية تطوير. تركز منهجية أجايل Agile على تقديم ميزات جديدة تدريجيًا لكن بسرعة، وبالتالي يكون التركيز على المراحل Sprints وحزم العمل Work Packages. يحتاج مصممو تجربة المستخدم إلى التفكير بشمولية، حيث ينبغي عليهم مراعاة التجربة الشاملة والسياق العام مثل تحقيق فهم أعمق للمستخدم. كيف نحل كل المشكلات السابقة؟ كيف نضمن تصميم تجربة المستخدم وفق منهجية أجايل على الوجه الأمثل؟ ضمان انسجام تصميم تجربة المستخدم ومنهجية أجايل Agile يكمن الحل الواضح لكل المشكلات السابقة بتطبيق منهجية أجايل Agile على مستوى المنظمة كاملةً، أي بالأسلوب الصحيح الذي وضعت منهجية أجايل لتطبَّق وفقه. يُعَد تطبيق الحل السابق صعبًا رغم بساطته، كما أنه لا يحل مشكلة الافتقار إلى التصميم الشمولي Holistic Thinking ولا نقص الموارد في فريق تصميم تجربة المستخدم؛ لذلك نستعرض تاليًا حلولًا عملية تدمج تصميم واجهة المستخدم ومنهجية Agile بكفاءة أكبر، منذ البدء بتحديد المشروع. تحديد المشاريع وترتيبها وفقا للأولوية بناء على أبحاث المستخدمين لن تتوقف الإدارة عن توليد أفكار كثيرة لمشاريع ترغب بإنجازها، لكن يمكنك التحكم إلى حد ما في إدراج المشاريع الجديدة ضمن قائمة مهامك باستخدام نظام للفرز الرقمي، وهو نظام يراعي احتياجات المستخدمين في المجموعة. يمكنك أيضًا التحقق من بدء كل مشروع ببحث المستخدم لتقييم الفكرة والمساعدة في تحديد هدف المشروع. يُعَد إجراء البحث الأولي بمثابة المرحلة الأولية صفر Sprint Zero، إذ يحدد نطاق المشروع بدقة. تمنح هذه الفترة أيضًا مصمم تجربة المستخدم تفكيرًا شموليًا. اترك مجالا لمصممي تجربة وواجهة المستخدم لأخذ نظرة عامة تركز منهجية أجايل Agile على الميزات، حيث يقسم مشروع كبير إلى حزم عمل تسهل إدارتها، وبالتالي توفر وظائف فرعية. يُعَد الأسلوب السابق منطقيًا للمطورين، إلا أن مصممي تجربة وواجهة المستخدم يحتاجون للاطلاع على كيفية تكامل كل الوظائف معًا. يمكن أن توفر المرحلة صفر Sprint Zero هذه الفرصة، لكنها غير كافية، إذ ينبغي على المصمم مراجعة الخطوات من حين لآخر لضمان انسجام كل الأجزاء معًا. وأفضل أسلوب لاستيعاب هذه المشكلة هو إضافة مرحلة لا تركز على تقديم ميزات جديدة، بل على تنظيم المعطيات الموجودة، وبالتالي يملك كل من المصممين والمطورين فرصةً للتقييم. وحتى ينجح الأسلوب السابق، ستحتاج بالتأكيد لوجود عدد كافٍ من مصممي تجربة المستخدم. أدخل مصممي تجربة المستخدم ضمن فرق منهجية أجايل Agile قد لا تسمح ظروفك بزيادة عدد مصممي تجربة المستخدم، وبالتالي يكون لكل فريق مصمم بدوام كامل. يجب التأكيد على أهمية مراعاة كل أعضاء الفريق لاحتياجات المستخدم حتى إن لم يكن مصمم تجربة المستخدم متواجدًا دومًا، وبالتالي يجب عليك أيضًا إبقاء المصممين الموجودين طوال فترة المشروع في كثير من الأحيان. أدخل المصممين باكرًا وحافظ على وجودهم طول فترة المشروع، ولا تفترض أن مشاركتهم تقتصر على تصميم الواجهة في البداية، إذ بإمكانهم تقديم الكثير من تحديد المشروع في المراحل الأولى إلى التجربة والتكرار لاحقًا. نصل بذلك إلى الحديث عن التكرار Iteration. اترك مجالا للتكرار تُثقَل المراحل Sprints بالالتزام. بمعنى آخر، يوافق الفريق أو يجبر على تقديم الكثير ضمن مرحلة واحدة؛ ويؤدي هذا الالتزام الزائد حتمًا إلى إهمال الاختبار Testing والتكرار Iteration في المرحلة رغم كونها مبادئًا أساسيةً لمنهجية أجايل Agile. يجب علينا تعلم الحد من الالتزامات ضمن المرحلة حتى نضمن دمج تجربة المستخدم جيدًا في منهجية أجايل. وللأسف، زاد تأكيد أجايل على السرعة الأمر سوءً، فقد زاد الاهتمام بالسرعة على حساب الجودة، وهو أسلوب خاطئ يجب العمل على تلافيه. تذكر أيضًا أن الحاجة للتكرار Iteration لن تنتهي بمجرد إطلاق الخدمة. تأكد أن لكل خدمة مالكا معنيا كما ذكرنا سابقًا، تُطلق معظم الخدمات بشكل منتج الحد الأدنى MVP، ثم كثيرًا ما تُهمل، ويعود ذلك لسببين: الأول هو التعامل مع الخدمات على أنها مشاريع تبدأ وتستكمل ثم تنتهي بدل التعامل معها كخدمات مستدامة. الثاني هو غياب الملكية، حيث إن المسؤولين عن بناء الموقع ليسوا مسؤولين عن تشغيله. تكمن المشكلة في أنه من منظور مصممي تجربة المستخدم، فإن المرحلة التي تلي الإطلاق هي المجال الذي يمكن للمصممين خلاله إجراء معظم التحسينات على التجربة، وذلك لتوفر بيانات أكثر موثوقيةً عن تفاعل المستخدمين الحقيقيين مع الخدمة. لحل هذه المشكلة، يجب ألا ننشئ الخدمات إلا بوجود مالك للمنتج يحمل المسؤولية ما دامت الخدمة متاحة والميزانية اللازمة لدعمه متوفرة. قد يفوق الحل السابق إمكانياتك، وهنا يكفي على الأقل الاعتراف بالمشكلة ووضع خطة تحسين بعد الإطلاق. مشكلة ناتجة عن فهم خاطئ كثيرًا ما يساء فهم العلاقة بين تصميم تجربة المستخدم ومنهجية أجايل، حتى أنه يوجد تصور باستحالة انسجامهما معًا؛ لكن لا يجب أن تجري الأمور على هذا النحو، حيث تكمن المشكلة في تطبيق معظم المنظمات كل من أجايل وتصميم تجربة المستخدم بأسلوب خاطئ، مما يعني أن حل المشكلة أعقد من مجرد إيجاد أسلوب يضمن انسجام تصميم تجربة المستخدم مع منهجية أجايل أو العكس. ونصل إلى رأيين متباينين عن كيفية إنشاء الشركات، إحداهما منهجية شركات الإنتاج الضخم والسوق الشامل وخط التصنيع للقرن العشرين، والتي أنشئت وفقها معظم الشركات، والأخرى هي منهجية أجايل للشركات الرقمية الرائدة التي تركز على المستخدم. لا يمكن تطبيق المنهجيتين معًا ببساطة، وفي النهاية يجب على المنظمات أن تتطور بدلًا من محاولاتها المستمرة بالتأقلم. ترجمة -وبتصرّف- للمقال UX in Agile: How to Ensure UX and Agile Work Successfully Together لكاتبه Paul Boag. اقرأ أيضًا ما هي إدارة المنتجات؟ هل ينبغي على المصممين إدارة المنتجات؟ فهم ودراسة المستخدمين في مجال تجربة المستخدم أساسيات تصميم تجربة المستخدم

يبدو الحديث عن التكرار والأنماط والانسجام أمرًا بسيطًا بدايةً وتبدو مفاهيمًا بسيطة وبديهية للغاية، لكننا سنناقشها رغم كونها لا تحتاج للشرح ظاهريًا. يحسّن استيعاب هذه المفاهيم وزيادة كفاءة تطبيقها في جذب انتباه المستخدم بالإضافة لتحسينها كفاءة تصميماتك. قد تتخيل عند سماعك كلمة "تكرار Repetition" شخصًا يكرر قولًا محددًا مرارًا. يختلف مفهوم التكرار في مجال التصميم، لا يُشترط أن يكون تكرار الأشياء مملًا، ويمكن تحسين التصميم بالاستخدام الصحيح للتكرار، بالإضافة لضمان فهم أفضل للرسائل. يستخدم المصممون ثلاثة أساليب للتكرار وهي التكرار والأنماط والانسجام. التكرار Repetition التكرار ببساطة هو تكرار العنصر ذاته عدة مرات في التصميم. يمكنك مثلًا رسم خط أفقي ثم تكرار رسم عدة خطوط أخرى بجانبه. يمكن الاستفادة من التكرار في تصميم المواقع والتطبيقات. نتوقع مثلًا رؤية شعار متجر ما مُكررًا بمكان ثابت في كل الصفحات، وتُكرر عناصر القائمة غالبًا في المكان ذاته من الصفحة. الأمر الذي يساعد على انسجام تجربة المستخدم. يساعد تكرار العناصر المصممين على تقديم المحتوى وفقًا لتوقعات المستخدمين وتحسين تجربتهم. يريح حفاظنا على التناسق المستخدم. تذكّر أن العين ترى بآلية معينة فطريًا، يمكننا الاستفادة من هذه الفكرة عندما نستخدم التكرار لتألف العين عناصر التصميم. يمكننا أيضًا استخدام الأشكال والألوان والبُنى والخطوط وغيرها لنحافظ على تناسق التصميم. يمكنك أيضًا تحقيق التكرار بتكرارك للرسائل. إذا أردت إعلام عُملائك أنك تقدم الخدمة الأرخص أو الأسرع في المجال، فقد ترغب باستغلال عدة مناسبات لإخبارهم بذلك لترسيخ الفكرة في أذهانهم، نستخدم التكرار في هذه الحالة لتعزيز الفكرة. ربّما تتذكر أنك حفظت جدول الضرب بعد تكراره حتى ثبُت في ذهنك. والمبدأ مشابه هنا، حيث يتحسن تذكرنا للمعلومات عند تكرار تلقّينا واستيعابنا لها. الأنماط Pattern النمط ببساطة عبارة عن تكرار متناسق لأكثر من عنصر في التصميم. النمط التكراري Seamless Pattern هو نمط تتحد فيه عناصر التصميم مع بعضها عند تكراره بالتجانب ليبدو مستمرًا بغض النظر عن عدد مرات التكرار. تستخدم الأنماط التكرارية كثيرًا في خلفيات صفحات مواقع الإنترنت والتطبيقات، كما يكثر استخدامها في تصميم السجاد وورق الجدران. انظر حولك إلى غطاء السرير أو ورق الجدران أو غلاف دفترك، وقد تجد نمطًا تكراريًا في أحدها يمكنه تفحصه عن كثب. هل لاحظت ظهور العناصر ذاتها مرارًا كالدوائر أو الأشكال الحلزونية أو ثمار الصنوبر أو الأناناس أو غيرها؟ يمكن أن تتجاور العناصر مباشرةً أو أن تحوي بينها فراغات. يعتمد المصممون في معظم الأنماط على الألوان والبُنى والأشكال أكثر من اعتمادهم على الكلمات، لأن إدراكنا للأشكال أسرع من إدراكنا للكلمات التي تحتاج القراءة مهما كانت السرعة. يمكنك إيجاد أنماط مشابهة في هندسة العمارة أيضًا. يتوجه المهندسون المعماريون لاعتماد زخارف موحدة داخل المباني وخارجها لتعزيز الجمالية، ولا يُعد هذا التوجه حديثًا إذ استُخدم في المباني اليونانية العريقة كالبارثينون. برع المصممون القدماء في استخدام أنماط مكونة من عناصر كالخطوط والأشكال الحلزونية. عندما تقرر استخدام الأنماط في تصميمك للتطبيقات أو لمواقع الإنترنت، ستحتاج إلى التفكير بمدى تعقيد النمط، فقد يبدو استخدام صورة نمط بالتجانب لملء الخلفية فكرةً جيدةً إلا أنه قد يؤثر على وضوح الكلام المكتوب فوقها. إذا أردت إنشاء تصميم لموقع معني بالسفر إلى اليونان، يمكنك استلهام تصميميك من الجزء العلوي لعمود قديم. ستحصل مباشرةً على تصميم جميل يحوي دوائر وأوراق عنب، ثم سترغب بإضافة نص. ستواجه مشكلة عند محاولة الكتابة فوق هذا التصميم حيث تتداخل الكتابة الداكنة أحيانًا مع خطوط الصورة، يمكنك استخدام نص أفتح، كاللون الأبيض أو الأصفر، إلا أنه سيبقى صعب القراءة بسبب اللون الرمادي للحجر في الخلفية. يرغب المستخدمون بالتفاعل مع التصميم لا بذل الجهد في محاولة قراءة نص. تعد البساطة والدقة عاملان أساسيان في الحفاظ على تجربة المستخدم وإبقاء المستخدمين ضمن الصفحة. الانسجام Rhythm توحي المسافات الفاصلة بين العناصر المكررة للمشاهد بالانسجام والحركة. يحصل العازفون على هذا الانسجام الإيقاعي من خلال الفواصل بين النغمات الموسيقية، إذ تتكامل فواصل الصمت مع النغمات. يفصل المصممون بين العناصر للحصول على الانسجام. توجد 5 أنواع للانسجام البصري عامّةً. الانسجام العشوائي Random Rhythm نحصل عليه بتكرار العناصر بمسافات غير منتظمة بينها. يمكن أن يتنوع التباعد من ميليمتر في جزء إلى سنتيمتر في جزء آخر مع إمكانية توزع العناصر في كل مكان. مثل الثلج المتساقط أو الحصى على الشاطئ أو حركات المرور، كلها أمثلة عملية للانسجام العشوائي. ومن الجدير بالذكر أن أي انسجام قد يبدو عشوائيًا عند تفحّص جزء صغير منه عن كثب، ثم عند التبعيد وتفحّص جزء أكبر من التصميم قد يتضح وجود انسجام منتظم معقد. كما يمكن عكس بعض الصور لونيًا وبالتالي تصعب إمكانية توقّع التصميم بسبب كل من العناصر والفراغات. يمكنك استخدام عناصر كثيرة للحصول على احتمالات لانهائية تتلاعب بها بصريًا. يُعد استخدام الفنان رينييه ماغريت René Magritte للانسجام العشوائي مثيرًا للاهتمام. الانسجام المنتظم Regular Rhythm يتبع الانسجام المُنتظم مسافات متساوية مرارًا مثل خفقان القلب. يمكنك الحصول على انسجام منتظم بسهولة من خلال إنشاء شبكة أو سلسلة خطوط عمودية. تُدرك عين المستخدم الانسجام المُنتظم مباشرةً وتبحث عن أي خطأ في انتظامه. تذكر أن العين تنجذب فطريًا إلى العناصر المميزة، وبالتالي يحمل استخدام الانسجام المنتظم في التصميم خطر الوقوع في الرتابة مثل صوت تقطير صنبور مفتوح. الانسجام المتناوب Alternating Rhythm يمكنك تكرار عدة عناصر في التصميم الواحد. يمكنك استخدام نموذج 1-2-1-2-1-2 في الانسجام المُتناوب. تُعد المربعات البيضاء والسوداء على رقعة الشطرنج مثالًا واقعيًا عن الانسجام المُتناوب. يمكننا القول أن الانسجام المُتناوب هو درجة أعقد من الانسجام المُنتظم. قد يكون ببساطة رقعة الشطرنج وقد يحمل بعض التعقيد. تحوي بعض تصاميم الانسجام المُتناوب صفوفًا من الأسماك أو الطيور أو حيوانات أخرى. بأخذ الأسماك على سبيل المثال، يمكننا رؤية أن كل سمكة متطابقة تتبع اتجاه الأخرى. يُكرر هذا التناوب بالأسفل، وتعرض المسافة السلبية بين الصفوف أسماكًا بلون آخر تشكل الخلفية تسبح بالاتجاه الآخر، وتتشابك الخطوط الدقيقة لزعانفها وذيولها مع خطوط أسماك النمط الأول. وتعد سحلية M.C. Escher (1942) مثالًا ممتازًا عن الانسجام المُتناوب، حيث يحوي ثلاثة ألوان للسحالي مع زوج من كل لون متجاوران عند الذيل وينظران بعيدًا عن بعضهما. وسواء اخترنا انسجامًا مُتناوبًا بسيطًا أو معقدًا، فإنه أسلوب سهل للخروج عن رتابة الانسجام المُنتظم. الانسجام الانسيابي Flowing Rhythm يعرض الانسجام الانسيابي العناصر المُكررة على انحناءات أو تعرجات أو تموجات. نجد هذا الانسجام في الطبيعة في أمواج الشاطئ أو الكثبان الرملية، ويمكننا محاكاة الطبيعة لإنشاء أنماط رائعة للعناصر بانسجام انسيابي. يمكننا وضع مجموعة أعشاب بحرية تحت الماء، مع توجيه أوراقها في سلسلة اتجاهات، ليتخيل المستخدم أن الأوراق تلوح باتجاه بعضها. الانسجام المتدرج Progressive Rhythm يمكننا إنشاء انسجام متدرج ببساطة وذلك بتغيير إحدى خصائص العنصر أثناء تكراره، يمكننا رسم مجموعة دوائر فوق بعضها مع تكبير كل دائرة بالاتجاه للأسفل، يوحي ذلك للمشاهد باقتراب الدائرة الأكبر في الأسفل منه. يمكنك تغيير الانسجام المُتدرج شيئًا فشيئًا أو بشكل مُفاجئ، يمكنك إضافة ظل مُتدرج للدوائر الصغيرة بحيث تكون الدوائر الصغيرة بالأعلى داكنة، وظل الدوائر الوسطى معتدل، وظل الدائرة الأكبر بالأسفل خفيف. تحيط بنا أمثلة عن الانسجام المُتدرج في كل مكان، إن صورت شخصًا يرقص في تسجيل فيديو ثم تفحّصته إطارًا تلو الآخر ستحصل على انسجامٍ مُتدرج. استخدام التكرار والأنماط والانسجام في التصميم يستخدم مصممو المواقع الإلكترونية العناصر المرئية المكررة عادة، يمكنك تكرار عناصر التصميم للحفاظ على تناسق التجربة البصرية، إذ يسهل تركيز المستخدمين على المحتوى لمعرفتهم أي يجدون أنواع المحتوى أو خيارات التنقل المحددة. كما يمكنك استخدام التكرار لجذب التركيز إلى جزء معين من التصميم أو المحتوى أو لإظهار العلاقات بين أجزاء المحتوى، يمكنك أيضًا استخدام الأنماط في الخلفيات لإضافة بنية وتناسق أو توحيدها بين الصفحات المتشابهة للحصول على التناسق. نستخدم الانسجام كمصممين لزيادة الإثارة أو الطمأنينة تدريجيًا بمرور الوقت أو لعكس مشاعر أخرى، على سبيل المثال من المُناسب جدّا إضافة ترسيم نبضة قلب في صفحة موجهة للأمهات. الخلاصة يستخدم المصممون 3 أساليب من التكرار: التكرار Repetition الأنماط Patterns الانسجام Rhythm يمكنك استخدام الأساليب السابقة لبناء تجربة المستخدم للموقع أو التطبيق. يحدد استخدام التكرار والأنماط والانسجام طابع واجهة المستخدم وتستخدم هذه العناصر إما لتعزيز رسالتك أو لعكس شكل المُنتج والشعور الذي يمنحه. يعد التكرار أسهل العناصر استخدامًا، أما الأنماط فهي مزيج من العناصر المكررة، بينما يستخدم الانسجام المسافات بين العناصر للتعبير عن الانسجام والحركة. يمكننا استخدام 5 أنماط من الانسجام: الانسجام العشوائي Random Rhythm الانسجام المُنتظم Regular Rhythm الانسجام المُتناوب Alternating Rhythm الانسجام الانسيابي Flowing Rhythm الانسجام المُتدرج Progressive Rhythm وضع المهندس المعماري كريستوفر ألكسندر Christopher Alexander مفهومًا آخر للنمط Pattern، يمكن تشبيه الانسجام بالموسيقى فهو يمنح تصميمك إيقاعًا ويشرك المستخدمين بغض النظر عن اختلافهم. يمكنك تعزيز تأثير رسالتك بالعمل على الانسجام المناسب لتصميمك. ترجمة -وبتصرّف- للمقال Repetition, Pattern, and Rhythm لصاحبه Mads Soegaard. اقرأ أيضًا أساسيات الوزن البصري في التّصميم الجرافيكي - الجزء الأوّل التناسق وأهميته في المشاريع التصميمية تعرف على أنماط التصميم في مجال تجربة المستخدم

تعد المواقع الإلكترونية الهوية الرقمية الأساسية للشركات أو العلامات التجارية، لذلك يجب الاهتمام بتصميمها وصيانتها. تزايدت مع الزمن أهمية امتلاك موقع جذّاب بصريًا للحفاظ على أعلى كفاءة ممكنة عمليًا، وساهم تقدم أدوات تطوير المواقع بذات الوقت في تلبية هذه الحاجة. تُصمم كل عناصر الموقع وتطبق بأسلوب مدروس، بدءًا بالقائمة ووصولًا إلى الصور البارزة والخطوط المستخدمة. إن أهم ميزة لمواقع الإنترنت حاليًا هي إمكانية فتحها بسلاسة من أجهزة مختلفة، فقد ولّت أيام تصميم المواقع لتناسب الحواسيب فقط. بوجود العدد الهائل من الأجهزة المحمولة كالهواتف المحمولة وأجهزة iPad والأجهزة اللوحية ومع تزايد الإقبال على استخدامها، يجب على المطوِّرين التأكد من إمكانية فتح المواقع وكفاءة عملها على كل هذه الأجهزة. زادت كنتيجة لكل ما سبق أهمية تصميم مواقع الإنترنت المُتجاوبة. سنناقش تاليًا جوانب تصميم مواقع الإنترنت المُتجاوبة ونفهم مبادئ هذا المجال ومصطلحاته الأساسية والخطوات الواجب اتباعها لضمان تجاوب موقعك على أكمل وجه. ما المقصود بتصميم مواقع الإنترنت المتجاوبة Responsive Web Design؟ يعد التصميم المُتجاوب أسلوبًا لتطوير المواقع يُعنى أساسًا بمظهر الموقع وكفاءة عمله مع اختلاف الجهاز المستخدم للاطلاع عليه. تكمن الفكرة الجوهرية في عدم إمكانية استخدام التصميم ذاته للحاسوب والأجهزة المحمولة والسبب هو الحاجة لتغيير استجابة الموقع تبعًا لدقة الشاشة والتي تتنوع مع اختلاف الأجهزة. بالمقابل يعد إنشاء نسخ عديدة للموقع يُفتح المناسب منها بعد التحقق من جهاز المُستخدم أمرًا مرهقًا وغير عملي. يُعدّل التصميم المُتجاوب تنسيق ومحتوى الموقع ليوافق جهاز المُستخدم، ليسهّل بالتالي تجربة المستخدم. يسمح التصميم المُتجاوب بشغل التنسيق لعدة أعمدة عند عرضه على الحاسوب، ويحوّل المحتوى ذاته إلى عمود واحد عند عرضه على جهاز محمول، يمكّن ذلك المُطورين من تخصيص عرض أجزاء المحتوى الأساسية. بالتالي يصبح الموقع موافقًا لكل الأجهزة ويوفّر تجربة مستخدم مخصصة عالية الكفاءة. يمكن تشبيه الفكرة السابقة بالماء عندما يأخذ شكل الإناء الذي يوضع فيه. في عالم المواقع نشبّه المحتوى بالماء وجهاز المستخدم بالإناء ويضمن التصميم المُتجاوب أن يأخذ المحتوى شكل أي جهاز يفتحه. وضع إيثان ماركوت Ethan Marcotte مصطلح التصميم المُتجاوب Responsive Design عام 2010 وقد استوحاه من الهندسة المعمارية التي تتجاوب لوجود الأشخاص وتفاعلهم. يعمل التصميم المُتجاوب على ثلاثة محاور أساسية: الشبكات المرنة Fluid Grids: تُعد الشبكات عنصرًا أساسيًا في التصميم المُتجاوب، ويصبح الموقع مُتجاوبًا بإدخال المرونة إلى هذه الشبكات. تُعرض عناصر الشبكة في تصميم المواقع المُتجاوبة كنسبة من المساحة الحاوية لها، وبالتالي يُعاد ضبط الشبكة في كل مرة يتغير فيها حجم مساحة المحتوى ليُعرض بالاعتماد على صفوف الشبكة وأعمدتها. الوحدات النسبية Relative Units: تعد الوحدات النسبية أساسية لتحقيق التجاوب. يتغير حجم جميع عناصر صفحة الإنترنت إلى أقصى حد ممكن في الوحدات النسبية كنسب مئوية، ليسمح بتغيير أبعاد العناصر بسرعة. استعلامات الوسائط Media Queries: تغير استعلامات الوسائط تصميم الصفحة العام عند استخدام لغة البرمجة CSS بالاعتماد على حجم منفذ العرض Viewport. تُعد دقة الشاشة وحجم نافذة المُتصفح مُدخلات، وبالتالي يتغير تصميم الصفحة وفقها لعرض موقع مُتجاوب. الحاجة لتصميم مواقع الإنترنت المتجاوبة تزايد خلال العقد الماضي استخدام الأجهزة المحمولة كثيرًا. وفقًا لموقع Statcounter ازدادت حركة مرور الإنترنت باستخدام الأجهزة المحمولة على حساب استخدام الحواسيب كما أنها تشكّل حاليًا أكثر من 51% من إجمالي حركة المرور. أي إن أكثر من نصف زوار موقعك الإلكتروني يفتحونه من أجهزتهم المحمولة، وبالتالي لا يمكنك اعتماد موقع إنترنت موافق للحاسوب إن كان مظهره سيئًا على الأجهزة المحمولة. يوجد أسلوب أساسي آخر يتعلق بوصول المستخدمين إلى موقعك الإلكتروني، بوجود سرعات جيدة للإنترنت وهواتف ذكية حديثة، يرغب الناس بفتح هواتفهم والبحث عما يريدون بسرعة. تتصدر الأجهزة المحمولة أيضًا استخدام محركات البحث بفارق جيد. لا عجب من تفضيل محركات البحث للمواقع الملائمة للهواتف الذكية حتى لا يشكك المستخدم بكفاءتها وقيمتها، وبالتالي يعد تصميم مواقع الإنترنت المُتجاوبة عنصرًا مهمًا لتحسين محركات البحث SEO. ازدهر سوق الإعلان عبر الهاتف المحمول. وفقًا لموقع Emarketer تزايد الإنفاق على إعلانات الهاتف المحمول بنسبة 5% ليصبح صناعة بقيمة 100 بليون دولار. يُدرج الناس الإعلانات على وسائل التواصل الاجتماعي وعلى اليوتيوب YouTube وفي كل مكان ممكن لجذب المُشترين المُحتملين، الذين يمكن جذبهم إلى صفحة هبوط العلامة التجارية باستخدام دعوة لاتّخاذ إجراء فعالة. ويرجّح أن يغادر المُشتري المُحتمل الموقع إن لم تكن صفحة الهبوط مُتجاوبة، وبالتالي تُعد مواقع الإنترنت المُتجاوبة بكفاءة عالية شرطًا أساسيًا لبيع أي شيء ضمنها عند الرغبة بالربح. المصطلحات الأساسية للتصميم المتجاوب ستصادف أثناء عملك على مواقع الإنترنت المُتجاوبة العديد من المفردات التخصصية، وبالتالي يلزمك الاطلاع على هذه المصطلحات. منفذ العرض Viewport: هو الجزء المرئي من جهاز المُستخدم، وأهميته كبيرة حيث يجب ضبط المحتوى ليوافقه بأفضل أسلوب ممكن. المحتوى الفائض Overflow: يتجاوز حجم العناصر أحيانًا المساحة المخصصة لها وتظهر فقط في جزء صغير من منفذ العرض. تدعى العناصر في هذه الحالة بالمحتوى الفائض Overflow. الحجم الثابت Fixed Sizing: عندما تُمنح عناصر الإنترنت أحجامًا مُطلقة مثل صورة بحجم 500 بكسل أو هوامش داخلية بحجم 20 بكسل، يُعد حجمها ثابتًا ولا يتعلق بأحجام ومواقع العناصر الأخرى. الحجم النسبي Relative Sizing: هو المحور الأساسي لتصميم مواقع الإنترنت المُتجاوبة. تُعطى عناصر الموقع أحجامًا بالنسبة لباقي العناصر كنسبة مئوية أو كنسبة لارتفاع أو عرض منفذ العرض Viewport. الصور المرنة Flexible Images: يعد استخدام الصور المرنة توجّهًا رائجًا في استخدام الصور على الإنترنت وهي الصور التي يختلف أسلوب عرضها وفقًا لحجم المُتصفح. وتضمن بالتالي عدم قص الصورة أو أخذها حجمًا فائضًا وعدم انخفاض دقتها لتظهر البكسلات. نقاط التوقف Breakpoints: تختلف أحجام منافذ العرض باختلاف الأجهزة، وهذا الاختلاف متعلق بتنسيق CSS المعتمد على نقاط التوقف لضبط التنسيق وتدفق المحتوى. الهاتف المحمول أولًا Mobile first: انطلاقًا من أهمية تصميم المواقع لتوافق الهواتف المحمولة، اعتمد المطورون هذا الأسلوب في تصميم مواقع الإنترنت لتوافق الهواتف المحمولة أولًا ثم تعديل أبعادها لتوافق الحاسوب، إي إن الألوية للهواتف المحمولة. قائمة الهمبرغر Hamburger Menu: تصميم قائمة بشكل ثلاث خطوط متوازية يشبه الهامبرغر، يضيف هذا الخيار للتصميم قائمة تنقّل منسدلة وبالتالي يوفر مساحة كبيرة. الآن بعد أن تناولنا أساسيات تصميم مواقع الإنترنت المُتجاوبة يمكننا استكمال اكتشاف كيفية إنشاء موقع مُتجاوب بكفاءة عالية. ابدأ بالمخططات الهيكلية Wireframes يجب أن يكون إنشاء التنسيق Layout هو الخطوة الأولى في تصميم الموقع. يمكن إنشاء التنسيق يدويًا على الورق أو الاستعانة بالعديد من الأدوات الجيدة المتوافرة على الإنترنت. يحسّن إنشاء التنسيق تخطيط الموقع بأكمله، سواء من خلال تدفق المحتوى أو واجهة المستخدم أو وظائف الموقع. لسوء الحظ تخسر العديد من المواقع تجاوبها بسبب ابتعاد المطوّر أو العميل عن المخطط الهيكلي. يعد إنشاء مخططات هيكلية مرنة حلًا جيدًا. حافظ على مرونتها بما يكفي لاستيعاب أي تغيرات محتملة لاحقًا. وجّه تركيزك في البداية على تدفق المعلومات والوظائف ثم اهتم بالشكل المرئي لاحقًا. أنشئ أيضًا مخططات هيكلية منفصلة للأجهزة المختلفة، كالحواسيب والأجهزة اللوحية والهواتف المحمولة. يضمن الأسلوب السابق استجابة الموقع بالاعتماد على مستوى المخطط الهيكلي. استخدام الشبكة المرنة Fluid Grid يعد استخدام الشبكات في إنشاء الموقع الإلكتروني نقطة جوهرية في الهيكلة الصحيحة للموقع. يستخدم مصممو المواقع الإلكترونية شبكة ثابتة عادةً، تحوي عددًا محددًا من الأعمدة وحجمًا ثابتًا لكل خلية بالبكسل. يعرقل استخدام الشبكات الثابتة توافق تصميم الموقع مع الهواتف المحمولة. يجب أن تكون الشبكات مرنة في تصميم مواقع الإنترنت المُتجاوبة، وهنا تظهر الحاجة لضبط أبعاد الشبكات بالنسبة لمنفذ العرض. أي لا ينبغي تعيينها بأرقام مطلقة بل بنسب مئوية، وبالنتيجة تملأ الخلايا مساحة منفذ العرض تلقائيًا لتعرض المحتوى. تأكد من تعيين نقاط التوقف Breakpoints يحدد أسلوب تعاملك مع نقاط التوقف مدى استجابة الموقع. يُقصد بنقاط التوقف أحجام الشاشة التي تحتاج أن تعدل تنسيق الموقع ليوافقها، ويضمن ضبط نقاط توقف صحيحة أفضل عرض لمحتوى الموقع على منفذ عرض المستخدم. لا توجد قواعد عالمية لتعيين نقاط التوقف، لكن عليك ضبطها للأبعاد التالية على الأقل: الهاتف المحمول: 360 x 640 الهاتف المحمول: 360 x 720 هاتف آيفون إكس iPhone X: 375 x 812 هاتف Pixel 2 المحمول: 411 x 731 جهاز لوحي: 768 x 1024 حاسوب محمول: 1366 x 768 حاسب ثابت أو محمول عالي الدقة: 1920 x 1080 عليك مراجعة تصميمك من أجل كل نقاط التوقف السابقة. قد لا تتطلب شاشات الهاتف المحمول الكثير من التعديلات وذلك بحسب تنسيق موقعك وتصميمه. من الجيد مراجعة كل صفحات الموقع بالنسبة لنقاط التوقف السابقة والتأكد من جودة تجربة المستخدم عندها. كيفية تحسين الصور للصور دور أساسي في قوة الظهور المرئي للموقع. وفي تصميم مواقع الإنترنت المُتجاوبة يجب التأكد من عرض أفضل صور في المكان والوقت المناسبين. بالنتيجة ستحتاج إما لاستخدام صور مُتجاوبة أو لتعديل حجمها ضمن تعليماتك البرمجية، فقد لا تبدو صورة كبيرة مناسبة للحاسوب جيدة بالضرورة من الهاتف المحمول، وبالعكس عند استخدام صورة صغيرة مناسبة للهاتف المحمول قد تظهر بكسلاتها عند العرض على الحاسوب. يعد استخدام ملفات بصيغة SVG أينما أمكن فكرةً جيدةً لتخطي المشكلة السابقة. لأن الرسوميات المتجهة متغيرة الحجم SVG مصممة مع مراعاة إمكانية تكبير أو تصغير حجمها دون التضحية بالجودة. يسمح استخدام ملفات SVG للصور بتغيير حجمها وفق الحاجة، ويمكن الوصول لنتيجة مماثلة بتغيير حجم الصور وفق نقاط التوقف باستخدام شيفرة CSS. يحوي الإنترنت الكثير من الأدوات التي يمكن أن تساعد في هذه المهمة. الاهتمام بالخطوط يعد أسلوب الكتابة عنصرًا مرئيًا مهمًا في الموقع تمامًا كالصور، إلا أن تحقيق تجاوب الموقع أسهل عند التعامل مع النصوص. وهو السبب الذي يدفع بعض المطورين لإهمال أساليب الكتابة وينعكس سلبًا على الموقع النهائي. تنطبق مبادئ تصميم الخطوط الأساسية على تصميم مواقع الإنترنت المُتجاوبة مثل مبدأ الوضوح ومن الجيد استخدام خطوط الإنترنت المُتاحة عالميًا. حاول أيضًا اختيار خطوط تحافظ على وضوحها عند تكبيرها أو تصغيرها وتجنّب خطوط الكتابة المتصلة باللغة الإنجليزية والخطوط المميزة كثيرة التفاصيل إن لم تكن ضرورية. من المهم أيضًا تحديد حجم الخط بنسبة مئوية وليس بقيم مطلقة، لتظهر أساليب الكتابة بأحجام مناسبة لمنفذ عرض المستخدم. ابدأ بالشاشات الصغيرة إن أفضل طريقة لإنجاز أي مهمة ضخمة هي التعامل مع الجزء الأصعب أولًا. ينطبق الأسلوب السابق أيضًا على تصميم مواقع الإنترنت المُتجاوبة Responsive Web Design. يسمح اعتماد مبدأ "الهاتف المحمول أولًا" بالتركيز على شكل وكفاءة الموقع على الأجهزة المحمولة. يُصمم معظم المطورين مواقعهم لتوافق شاشات الحواسيب أولًا، إذ يهتمون بجاذبيتها المرئية ويزودونها بكل الوظائف المطلوبة، ثم تظهر التحديات عند البدء بتحويل الموقع ليوافق الأجهزة المحمولة وينتهي بهم الأمر بتصميم مواقع غير جذابة عند تصفحها من الهواتف المحمولة. تكمن أهمية مبدأ "الهاتف المحمول أولًا" في تركيزه على المحتوى. ضع العناصر المهمة أولًا على الأجهزة ثم ادعم هذه العناصر بالدعوات اللازمة لاتّخاذ إجراء. خذ بالحسبان ميزة شاشات اللمس في الهواتف المحمولة وتأكد أن واجهة المستخدم مناسبة لهذه الميزة. من المفيد أيضًا اختبار الموقع عمليًا على أجهزة محمولة حقيقية للحصول على فكرة أوضح عن مظهر الموقع وكفاءة عمله. قد تساعدك النصائح السابقة في رحلتك لتصميم مواقع الإنترنت المُتجاوبة. يعد تصميم مواقع الإنترنت المُتجاوبة Responsive Web Design مجالًا واسعًا عكس الاعتقاد الشائع وقد زادت أهميته كثيرًا للزيادة الهائلة في حركة مرور الهاتف المحمول. إن لم تكن واثقًا من قدرتك على تصميم موقع إنترنت جيد ومُتجاوب، فقد يُناسبك اختيار بعض الأدوات المُساعدة لإنجاز هذه المهمة. ضع بالحسبان أن هدفك الأساسي دومًا هو تصميم موقع جذاب بصريًا وسهل الاستخدام مع تصميم تجربة مستخدم جيدة. ترجمة -وبتصرّف- للمقال Designers Comprehensive Guide to Responsive Website Design لكاتبه HR. اقرأ أيضًا مدخل إلى التصميم المتجاوب والتصميم المتكيف أساسيات تصميم الويب المتجاوب فلسفة تصميم الويب المتجاوب نماذج تصميم الويب المتجاوب ما هو الفرق بين التصميم المتجاوب (Responsive Web Design) والتصميم المتلائم (Adaptive Web Design)

يُعَد التعاطف عنصرًا مهمًّا في التفكير التصميمي Design Thinking والتصميم المُتمحور حول الإنسان Human-Centred Design. فما المقصود بالتعاطف Empathy؟ ولماذا يُعَد التعاطف مهمًّا في حلول التصميم الملبية لاحتياجات الناس؟ لن نكتفي بالبحث عن معنى التعاطف هنا، بل سنتعمق بمعرفة كيف يساعد أصحاب التفكير التصميمي بإنشاء حلول عملية، ثم نجد كيف قد يفشل المُنتَج نتيجةً لنقص التعاطف. سنفهم أيضًا إمكانية إتقان أيِّ شخص للتعاطف وتصميم حلول تتمحور حول الإنسان. ما التعاطف بالضبط؟ التعاطف بالمجمل هو قدرتنا على رؤية العالَم بمنظور الآخرين؛ لنتفهم رؤيتهم ونختبر مشاعرهم ونخوض تجاربهم. بالتأكيد لا يمكن لأحد خوض تجربة الآخر تمامًا، لكن يمكننا السعي لتحقيق ذلك ما أمكن، وذلك بتنحية أفكارنا المُسبَّقة وفَهْم أفكار وهواجس وحاجات الآخرين بدلًا منها. أما فيما يخص التفكير التصميمي، فالتعاطف كما شرحَته مجموعة أدوات التصميم المُتمحور حول الإنسان Human-Centred Design Toolkit لشركة IDEO، فهو "الفهم العميق لواقع ومشكلات الجمهور الذي تُصمِّم له"، وبالتالي يشمل التعلم عن الصعوبات التي تواجه الأشخاص، بالإضافة لكشف احتياجاتهم ورغباتهم الكامنة لتفسير سلوكهم. ويتطلب تطبيق ذلك فَهْم بيئة الأشخاص ودورهم وتفاعُلهم مع هذه البيئة. يساعدنا التعاطف على الوصول إلى التقدير والفهم الأعمق لحاجات الأشخاص المادية والعاطفية، ولرؤيتهم وفَهْمهم وتفاعُلهم مع العالم من حولهم؛ كما يساعدنا أيضًا على فَهْم تأثير كل ذلك على حياتهم بالمجمل، ولا سيما في السياقات المعنية. وبعكس أبحاث التسويق التقليدية، لا يهتم البحث التعاطفي Empathic Research بالحقائق عن الأشخاص (مثل وزنهم ومقدار ما يتناولونه من الطعام)، بل يهتم بمعرفة المزيد حول دوافعهم وأفكارهم (مثلًا لماذا يُفضِّلون البقاء بالمنزل لمشاهدة التلفاز بدل الخروج للجري). التعاطف أمر شخصي بطبيعته؛ نظرًا لوجود قدر لا بأس به من التفسير الشخصي لما يعنيه الأشخاص وليس ما يقولونه. تعاطف Empathise "التعاطف Empathise" هو الخطوة الأولى في عملية التفكير التصميمي Design Thinking. ويمكن اختصار المراحل اللاحقة كالتالي: التحديد Define والتفكير Ideate وإعداد النموذج الأولي Prototype والاختبار Test. هدفك كونك مصممًا خلال مرحلة التعاطف، هو تفهُّم الأشخاص الذين تصمم، لهم والمشكلة التي تحاول حلها. تتضمن هذه العملية ملاحظة الأشخاص والتفاعل والتعاطف معهم؛ وذلك بهدف فَهْم تجاربهم ودوافعهم، بالإضافة إلى الاندماج في بيئتهم المادية لتعميق فهمك الشخصي عن المشكلات والاحتياجات والتحديات الموجودة. يُعَد التعاطف أساسيًّا في عملية التصميم المُتمحور حول الإنسان Human-Centred Design؛ حيث يساعد التفكير التصميمي Design Thinking والتعاطف Empathy، المفكرين التصميميين على تنحية توقعاتهم الشخصية عن العالم جانبًا؛ وذلك بهدف الحصول على رؤية عن المُستخدِمين المعنيين واحتياجاتهم. ستحتاج لجمع الكثير من المعلومات في هذه المرحلة من عملية التفكير التصميمي Design Thinking بما يسمح لك وقتك. ستكتسب في هذه المرحلة التعاطف والتفهم والتجارب والأفكار والملاحظات التي ستوظفها لبناء باقي المشروع التصميمي. من المهم جدًّا للمصممين تكوين أفضل فَهْم ممكن للمستخدمين وحاجاتهم والمشكلات المُواجِهة لتطوير خدمة أو مُنتَج مُعيَّن يرغبون بتصميمه. إذا كان لديك ما يكفي من الوقت والمال، فعليك التفكير باستشارة الخبراء أيضًا؛ لمعرفة المزيد عن الأشخاص الذين تصمم لهم، لكن ستُدهِشك الرؤية التي يمكن أن تكتسبها مع فريقك باستخدام أساليب التعاطف العملية. أساليب التعاطف التفكير مثل المبتدئ. طرح الأسئلة: ماذا - كيف - لماذا؟ طرح الأسئلة الـ5 التي تبدأ بـ "لماذا". إجراء المقابلات مع تعاطُف. بناء تعاطُف باستخدام المُوازَنات. استخدام الدراسات المبنية على الصور والفيديو. استخدام مجلات الصور والفيديو الشخصية. التفاعل مع المستخدمين النهائيين. التقاط ومشاركة الحالة. العصف الجسدي Bodystorm. إنشاء مُخطَّطات العمل. ستحتاج لفَهْم الإمكانات والفروق الدقيقة التالية للتعاطف قبل البدء باستخدام الأساليب الفعالة السابقة. التعاطف Empathy مقابل الشفقة Sympathy كثيرًا ما يلتبس مصطلح الشفقة Sympathy مع التعاطف Empathy، حيث ترتبط الشفقة بقدرة الشخص على امتلاك أو إظهار الاهتمام بحياة الآخرين، بينما لا يتطلب التعاطف بالضرورة خوض الشخص تجارب الآخرين بعمق، كما أن الشفقة غالبًا ما تنطوي على الشعور بالانفصال والفوقية، إذ نميل عندما نشفق إلى إظهار مشاعر الحزن والأسف للشخص الآخر. قد تزعج مشاعر الحزن والأسف الشخص الآخر بالخطأ، كما أنها غير مفيدة في عملية التفكير التصميمي Design Thinking. نهتم في التفكير التصميمي Design Thinking بفَهْم الأشخاص الذين نصمم الحلول لهم؛ وللحصول على نتيجة تساعدهم. عندما نزور بيئات مستخدمينا لتعرُّف سلوكهم، أو نُجرِي معهم المُقابَلات، نحن لا نبحث عن فرص للتفاعل معهم، بل نريد استيعاب ما يمرون به واختبار شعورهم. لماذا التعاطف؟ سنذكر تاليًا أسباب التعاطف: تخطي الثورة الصناعية أفسح إنشاء المصانع خلال الثورة الصناعية المجال أمام تزايُد إنتاج البضائع، ومنذ ذلك الحين أصبحت النزعة الاستهلاكية المتفاقمة أسلوبًا لسير العالم. ومع ذلك بدأ عجز أسلوب استهلاك مُنتَج واحد مناسب للجميع وإيجاد حل واحد مناسب لكل المشكلات بالظهور. إن استخدام "الحلول الوسطية" أسلوب فاشل لحل المشكلات. لقد تعلمت قوات الجو الأمريكية هذا المبدأ بالطريقة الصعبة في أربعينيات القرن الماضي . وتكرر خلال هذه الفترة وقوع حوادث الطيران لما يصل إلى 17 حادثًا يوميًّا. افترضت القوات الجوية بدايةً أن سبب العديد من الحوادث هو استخدامها طائرات أعقد وأسرع، لكن بعد قليل من البحث، تبيَّن أن السبب الحقيقي للحوادث هو تصميمهم حجرات القيادة والخوذات لتناسب "متوسط" أجساد الجنود؛ فقد وجدت دراسة أُجرِيت على أكثر من 4000 طيار من القوات الجوية أنه لم يكُن مقاس أيِّ طيار ضمن المقاس المُفترَض لـ"متوسط" الجنود، وبالتالي لم يعُد غريبًا أن يواجه الطيارون مشكلات في استخدام الطائرات، بعد ذلك حُلَّت المشكلة في النهاية بتصنيع معدات يمكن تعديلها لتناسب أجساد معظم الجنود. إلى جانب المشكلات في تصميم الحلول اعتمادًا على المتوسطات، تُوجَد مشكلة أخرى لنزعتنا الاستهلاكية، وهي ارتفاع مُعدل النفايات الناتجة. في العقد الماضي، حوَّل استهلاكنا الاحتباس الحراري من مشكلة متفاقمة إلى كارثة وشيكة تُهدِّد بتغيير أسلوب حياتنا وتُهدِّد حتى نجاتنا. يُعنَى التفكير التصميمي Design Thinking وخاصةً التعاطف Empathy بإيجاد حلول مستدامة ومُوجَّهة في جميع المجالات التي قد تؤثر علينا في المدى البعيد. ما يقوله الناس وما يخفونه لا يذكر الناس كل التفاصيل دومًا. قد يخفون بعض المعلومات؛ بسبب الخوف أو عدم الثقة أو لأسباب أخرى، سواءً الأسباب الشخصية أو المتعلقة بمَن يتعاملون معهم، كما أنهم قد يُعبِّرون عن أنفسهم بطُرُق مبهمة قليلًا، تتطلب من المستمع فَهْم التلميحات أو ما لم يُذكَر؛ أي معرفة المقصود خلف كلماتهم المذكورة. نحتاج نحن المصممون إلى تطوير الحدس والخيال والحِس العاطفي والإبداع، للتعمق أكثر دون تطفُّل شخصي؛ للحصول على الرؤية الصحيحة التي ستساعدنا على إحداث فَرْق مهم. بعبارة أخرى، نحتاج إلى التعاطف للوصول لفَهْم صحيح للأشخاص. إن التعاطف هو الفرق بين أخذ ظاهر قول المُستخدِمين ومراقبة ما تصفه Jane Fulton Suri المديرة التنفيذية لقسم التصميم في شركة IDEO بالتصرفات العفوية، وهي الأفعال البسيطة التي يفعلها الأشخاص وتعكس تأثير بيئاتهم على سلوكهم. عندما يتصرف الأشخاص عفويًّا بتعليق النظارة الشمسية على القميص مثلًا، أو وضع مُلصَقات مُلوَّنة على المفاتيح للتمييز بينها، فهي علامة لفرض البيئة ناقصة التصميم ردود فعل غير واعية تقريبًا. ومع ذلك، يمكننا محاولة إيجاد رؤى وحلول جديدة تساعد الأشخاص في تصرفاتهم غير الواعية. التعاطف أساسي لنجاح الأعمال أشار العديد من القادة في مجالات الابتكار والتعلم وريادة الأعمال التي يطغى عليها التفكير التصميمي Design Thinking مرارًا إلى ثلاثة معايير أساسية تُحدِّد المُنتَج أو الخدمة الناجحة، وهي رغبة المُستخدِمين Desirability والجدوى Feasibility والفاعلية Viability. لا يكفي وجود التكنولوجيا والوسائل (أي أن الجدوى موجودة)، وإمكانية الحصول على الأرباح والفوائد التجارية (أي أنها فعالة) فقط؛ إذ من الضروري أن يرغب المُستخدِمون بالوصول إلى الحل. لا يمكن فَهْم وتصميم خدمة أو مُنتَج مرغوب إلا بفهم احتياجات الأشخاص وتجاربهم ورغباتهم وتفضيلاتهم تمامًا. إن التعاطف من منظور الأعمال المبني على الربح المُطلَق هو عنصر أساسي في أيِّ حلٍّ تجاري سليم. إذا طورنا حلولًا بمعزل عن الرؤى الأساسية للمُستخدِمين، فقد نبتكر حلولًا بعيدة عن المشكلة، وبالتالي سيتجاهلها السوق. ظهرت مثلًا العديد من مُشغِّلات MP3 واختفت دون أن تُحدِث تأثيرًا كبيرًا، بينما نجح جهاز iPod نجاحًا باهرًا كونه حلًّا تقنيًّا، بالإضافة لتوفيره تجربةً مرغوبةً ومربحة؛ ما أدى إلى ريادة شركة Apple للسوق. كما يقول فرانك شيميرو Frank Chimero مؤلف ومصمم كتاب شكل التصميم The Shape of Design: التصميم دون تعاطف: نظارة Google أطلقت Google مُنتَجها الأول القابل للارتداء، وهو نظارة Google، والذي أحدث ضجةً كبيرةً عام 2013. رغم أن هذا الحاسوب القابل للارتداء بتثبيته على الرأس باهرًا تقنيًّا؛ فإنه فشل من حيث الأداء، والسبب الأهم لذلك هو الافتقار إلى التعاطف مع المستخدمين. رغم سماح النظارة للمُستخدِمين بالتقاط الصور وإرسال الرسائل وعرض معلومات أخرى، مثل حالة الطقس واتجاهات وسائل النقل؛ فإنها لا تلبي الاحتياجات الحقيقية للمُستخدِمين؛ أي رغم تعدُّد المهام التي يمكن للنظارة إنجازها؛ فإنها ليست ضروريةً ولا مرغوبة. كما أن النظارة تعمل بالمُجمل بالأوامر الصوتية، ويُعَد إعطاؤها الأوامر بصوت عالٍ مرفوضًا في بيئتنا الاجتماعية الحالية، مثل أن تقول لنظارتك في الشارع: "أرسِلي الرسالة"، يتضح هنا افتقار Google للفهم التعاطفي للبيئة الاجتماعية للمُستخدِم، إن كان استخدام مُنتَجك يتطلب تصرفات محرجة أو غير مقبولة اجتماعيًّا، فتأكَّدْ أن القليل من الناس فقط سيرغبون في استخدامه. وأخيرًا، تتميز النظارة بكاميرا مخفية؛ مما يسبب مخاوف تتعلق بخصوصية الأشخاص المحيطين بمرتديها؛ لعدم وجود طريقة لمعرفة متى يبدأ صاحب النظارة بالتسجيل. يمكن تفسير كل هذه المشكلات بافتقار Google إلى التعاطف في أثناء تصميم النظارة، ولخصت مجلة MIT Technology Review هذا الجانب جيدًا بالقول: يمكن تفسير الفشل التجاري لنظارة Google بافتقارها للتعاطف مع المستخدمين؛ لأن تفعيل الإجراءات صوتيًّا محرج اجتماعيًّا، كما أن الكاميرا مقلقة لخصوصية الأشخاص المحيطين بالمُستخدِم، ويبدو أن المُنتَج لا يلبي أي حاجة واضحة للمُستخدِم. نجاح التعاطف: جهاز التدفئة المحمول The Embrace Warmer يُكسِبنا التعاطف رؤى لا يمكن جمعها بأي طريقة أخرى إلا بالتخمينات الدقيقة حسابيًّا. لقد كلفت جامعة ستانفورد فريقًا من طلاب الدراسات العليا لتطوير حاضنة أطفال جديدة لاستخدامها في الدول النامية، وساعدهم الاتصال المباشر بالأمهات اللواتي لم يتمكنَّ من الوصول إلى المستشفيات في القرى النائية، على تغيير التحدي المُواجِه لهم إلى إنشاء جهاز تدفئة بدلًا من الحاضنات الجديدة. كانت النتيجة النهائية عبارة عن جهاز التدفئة المحمول The Embrace Warmer القادر على إنقاذ آلاف الأرواح. يمكن استخدام جهاز التدفئة المحمول The Embrace Warmer؛ حيث لم يكُن تأمين حاضنة أمرًا ممكنًا سابقًا؛ بسبب إمكانية نقله وتكاليف إنتاجه المنخفضة. إن جهاز التدفئة المحمول The Embrace Warmer عبارة عن حاضنة محمولة يمكن لفها حول الرضيع واستخدامها في أثناء حمل الأم للرضيع بين ذراعَيها. أصبح بإمكان الأمهات في القرى النائية استخدام جهاز تدفئة محمول بدلًا من الحاجة لترك أطفالهن في المستشفيات البعيدة، يلبي الحاجة ذاتها. لو اكتفى الفريق بتصميم الحاضنات، ربما كانوا قد طوروا حاضنةً نصف محمولة منخفضة التكلفة، لكن نقلها إلى القرى النائية سيبقى غير ممكن؛ أما بتطبيق التعاطف Empathy، أي فَهْم المشكلات التي تواجه الأمهات في القرى النائية، فقد صمم الفريق حلًّا متمحورًا حول الإنسان Human-Centred وأثبت أنه الحل الأمثل للأمهات في الدول النامية. الهدف من البحث التعاطفي Empathic Research هو الكشف أحيانًا عن الاحتياجات والمشاعر غير الملموسة، والتي تحدد العنصر الأنسب لتغييره في المُنتَج أو النظام أو البيئة المعنية. يكشف البحث التعاطفي الاحتياجات الأهم والأسباب الجذرية، والتي قد تُغيِّر معالجتها المشروع قيد التنفيذ جوهريًّا. بدلًا من تصميم حلول مؤقتة تخفي الأعراض أو تُسكِّنها مؤقتًا، سنتمكن من تحقيق نقلة نوعية وفوائد كثيرة في حل واحد. يمكننا إنشاء أسواق جديدة وتحقيق أهداف واحتياجات أفضل لمجتمعات كاملة. يمكننا تغيير العالم بالعمل على المستويات المناسبة. يمكن لأي شخص إتقان التعاطف قد تختلف تسمية جوانب التعاطف في التفكير التصميمي Design Thinking، لكن الجوهر يبقى واحدًا، وهو أن يتمحور التصميم حول الإنسان. أطلقت مدارس مختلفة وشركات التفكير التصميمي Design Thinking على البحث التعاطفي اسم "مرحلة التعاطف" و"مرحلة الفهم" و"مرحلة الاستماع" و"البحث"، بالإضافة لعدة تسميات أخرى. إن كنت قلِقًا بشأن عدم قدرتك على إتقان التعاطف المطلوب مع الأشخاص الذين تصمم لهم، فإليك الأخبار الجيدة؛ اكتشف علماء الأعصاب مؤخرًا الصلة الوثيقة للتعاطف بطبيعتنا البشرية، وأنه جزء لا يتجزأ من حيويتنا، فقد اكتشفوا تشابُه نشاط الدماغ البشري في أثناء مراقبة الآخرين يؤدون أعمالًا أو يخوضون تجارب معينة، بنشاط دماغ الشخص المؤدي لهذه الأعمال؛ أي أن التعاطف صفة فطرية يمكننا جميعًا الاستفادة منها في أثناء التصميم للأشخاص من حولنا. اختبرنا جميعًا اندفاع المشاعر والأدرينالين بمجرد مشاهدة شخص آخر يؤدي أنشطة معينة. نحن كائنات متعاطفة بطبيعتنا، ومع ذلك قد تحاول مجالاتنا الاجتماعية والتعليمية إزالة هذا التعاطف الداخلي أو الحد منه. إن أساس نجاح عملية التفكير التصميمي والمُنتَج النهائي هو الحفاظ على الانفتاح والوعي بتطوير التعاطف في أثناء التفاعل مع المستخدمين. الخلاصة يهمنا التعاطف كوننا مصممين وخاصةً المعنيين بالتفكير التصميمي؛ لأنه يسمح بتفهُّم وكشف الاحتياجات والمشاعر الكامنة للأشخاص الذين نصمم لهم. وهكذا يمكننا تصميم حلول تُحقِّق المعايير الثلاثة لنجاح الخدمة أو المُنتَج، وهي: رغبة المُستخدِمين Desirability الجدوى Feasibility والفاعلية Viability وهذا ما يُطلَق عليه "مرحلة التعاطف" في التفكير التصميمي Design Thinking. إن التصميم مع التعاطف هو ما يميز المُنتَج المُتمحور حول الإنسان، مثل جهاز التدفئة المحمول The Embrace Warmer، وعن المنتجات الأخرى، مثل نظارة Google. والجيد في الأمر أنه يمكن لأي أحد أن يتقن التعاطف ويُصبِح مُفكِّرًا تصميميًّا ممتازًا؛ لأننا جميعًا متعاطفون بالفطرة. ترجمة -وبتصرُّف- للمقال Design Thinking: Getting Started with Empathy. اقرأ أيضًا نظرة عامة حول التفكير التصميمي ما يجب معرفته لإتقان التفكير التصميمي معوقات حل المشكلات والابتكار في التفكير التصميمي

تُعَد مساعدة المستخدم في تنفيذ المهام بأكبر كفاءة ممكنة إحدى مهام المصمم. وتُعَد شركات برامج الحاسوب، مثل أدوبي Adobe ومايكروسوفت Microsoft، خبيرةً في هذا المجال، وكثيرًا ما تستخدمان نموذج تصميم يُدعَى "مركز الاهتمام Center Stage"، الذي يساعد المستخدم في التركيز على العنصر الأهم. يسهم مبدأ مركز الاهتمام Center Stage في إنشاء التسلسل المرئي للتصميم؛ لذا يفيد الاطلاع على هذا النمط من تصميم واجهة المستخدم، في معرفة كيفية إنشاء تنسيق عام لشاشة العرض يساعد المستخدم. وستتأكد من فائدته حين تلاحظ ازدياد التفاعل. مشكلة التصميم يجب عرض أهم المعلومات واللوحات والنوافذ أو مجموعة الأدوات بوضوح في واجهة المستخدم. يحتاج المستخدمون في أثناء تأديتهم مهمةً ما لجزء مركزي يُنفِّذون فيه الإجراءات والعمليات، مع إمكانية الوصول الفوري للوحات الفرعية، ومجموعات الأدوات، وما إلى ذلك. يميل بصرنا وعقلنا فطريًّا للبحث عن نقطة مركزية أو عناصر وتصاميم مفيدة وجميلة. يمكن أخذ الموقع النرويجي التالي كمثال؛ حيث تتجلى المهمة الرئيسة في هذا المتجر الإلكتروني باختيار مُنتَج أو شرائه. ستربك خيارات الصفحة الكثيرة المستخدمين غالبًا، وذلك لعدم وجود أي مُنتَج في مركز واجهة المستخدم. إنه مثال مُبالَغ فيه بطبيعة الحال، لكن المبدأ ذاته ينطبق على الصفحات الأبسط. قد تتجه عيناك إلى الدراجة الموجودة في المربع الأصفر والأبيض القريبة من المنتصف. يُعَد تصميمًا بعيدًا تمامًا عن مفهوم مركز الاهتمام Center Stage؛ حيث يغرق المستخدم بالكثير من الصور والنصوص بدلًا من إرشاده إلى الخطوة البديهية التالية. لن نسيء إلى المصمم، بل سنتخيل مثلًا أن أحدهم قد صمم نشرةً إعلانيةً لهذا المتجر وتركها في ماسح ضوئي للشركة، فظهرت بالخطأ مكان صفحة الإنترنت الأصلية، حيث يظهر بحر من البيانات مع الكثير من الصور المُفكَّكة، بدلًا من توجيه المستخدمين بأسلوب مريح إلى الغاية المرغوبة بعرض معلومات مدروسة. المحزن في الأمر أنه لا شيء واضح هنا، رغم إمكانية وجود عروض رائعة لهذه الشركة. لا يُقدِّم هذا المتجر النرويجي الدعم الأمثل لمهمة المستخدم الأساسية، ألا وهي: اختيار أو شراء مُنتَج، إذ تُشتِّت كثرة الخيارات في الصفحة المستخدمين بسهولة؛ لأن العناصر الموجودة في الصورة غير بارزة، وعلى المستخدم تحليل التصميم بعمق؛ ليتمكن من اختيار مُنتَج أو معرفة سعره، وهو أمر مجهد لن يؤدي إلى تجربة مستخدم جيدة. حل مشكلة التصميم تجنَّب الفوضى السابقة، وذلك أولًا بإيجاد تسلسُل للعناصر التي ترغب بعرضها. ضع العنصر الأهم من واجهة المستخدم الرسومية في الجزء الأكبر، ثم أدرِج الأدوات الداعمة ومجموعات الإجراءات، وما إلى ذلك في اللوحات الأخرى الأقل بروزًا. بوضع المعلومات الأهم أو اللوحات الأكثر استخدامًا في مركز الاهتمام؛ ستجذب انتباه المستخدم نحوها، وتسمح له بالتركيز عليها في أثناء تنفيذ مهامه. يُعَد مركز الاهتمام Center Stage نموذجًا رائجًا لتصميم واجهة المستخدم، ويُستخدَم في معظم التطبيقات، مثل المواقع وجداول البيانات وحِزَم البرامج كـ MS Paint و Gimp. يستخدم تطبيق MS Paint نموذج مركز الاهتمام Center Stage؛ لجذب الانتباه إلى مهمة المستخدم الأساسية، ألا وهي: معالجة العناصر الموجودة في رقعة الرسم. وهنا لا عذر حقيقي لعدم تمكُّن المستخدم من تحديد الخطوة التالية. لماذا عليك اختيار نموذج تصميم مركز الاهتمام Center Stage؟ يجب أن يوفر ترتيب واجهة المستخدم إشارات مرئية واضحة عن المهم والعناصر المتعلقة بهدف المستخدمين الأساسي. يمكنك استخدام الحجم لإبراز العنصر الأهم، وبذلك تضمن توجيه انتباه المستخدمين مباشرةً إلى الجزء الأهم والأكثر صلةً بهم من شاشة العرض. يمكنهم بعد ذلك مباشرةً معرفة أن كل مهام اللوحات الأخرى الإضافية والمرتبطة باللوحة المركزية. بمعنى آخر، يمكنهم مباشرةً معرفة أن هذه اللوحات الأخرى تُقدِّم وظائف داعمةً لمعالجة الإجراءات في اللوحة الرئيسة الموجودة في مركز الاهتمام Center Stage. إذا أخذت هذا المفهوم بالحسبان في أثناء عملك؛ فستكون عند إنهائك للنموذج الأولي قد سهَّلت الإعداد الفعال الذي يجب أن يتمكن المستخدمون من فهمه فطريًّا، وتوقُّع الخطوة التالية في رحلتهم ضمن تجربة المستخدم. كيفية تطبيق مبدأ مركز الاهتمام Center Stage عليك أولًا تحديد الجزء الأهم من واجهة المُستخدِم سواءً كانت لوحةً أو نافذةً أو مجموعة أدوات. وسيكون واضحًا منذ البداية؛ لأنها لوحة العمل المركزية للمُستخدِم عادةً، مثل اللوحة الحاوية على المستند النَّصي، أو جدول البيانات، أو رقعة الرسم. امنح هذه اللوحة الجزء الأكبر من واجهة المُستخدِم مع التأكد أن باقي العناصر أصغر منها. ينصح بعض خبراء تصميم واجهات المستخدم بجعل لوحة مركز الاهتمام Center Stage على الأقل بضِعف حجم العنصر الأصغر منها مباشرةً في واجهة المستخدم مثل شريط الأدوات. استخدِم الألوان لتمييز محتويات اللوحة عن اللوحة بحد ذاتها؛ إذ يكون الجزء المركزي من اللوحة الكبرى أبيض عادةً والأجزاء المحيطة رمادية. استخدِم العناوين لتمييز اللوحات عن بعضها ولمساعدة المُستخدِم في تحديد مجموعة أدوات مُحدَّدة أو المجموعات أو الإجراءات أو اللوحات الأخرى الرديفة. رتِّب العناصر المختلفة وفقًا لتوقعات المُستخدِمين. من المهم وضع اللوح الأساسي في مركز الاهتمام Center Stage، كما يهم أيضًا ترتيب اللوحات الأخرى لمساعدة المُستخدِمين على تنفيذ الإجراءات المطلوبة بسرعة ودقة؛ لذلك على الرغم من أن دور اللوحات ومجموعات الأدوات الأخرى داعم فقط؛ فإنها يجب أن تبقى مرئية، لكن دون أن تحجب اللوحة الرئيسة عن المُستخدِم. يوضح هذا المثال من تطبيق Balsamiq كيف يمكنك تطبيق مبدأ مركز الاهتمام Center Stage، حيث اللوحة الأهم هي الأكبر. تُستخدَم الألوان والعناوين لتمييز اللوحة الرئيسة عن اللوحات الأخرى، وقد أُدرِجت اللوحات حول المساحة الرئيسة وفقًا لمهام المُستخدِم. ويمكنك استنتاج مكان الأدوات اللازمة وعمل اللوحات والأزرار المختلفة بوقت قصير. مشكلات محتملة لمبدأ مركز الاهتمام Center Stage كيف تعرف الترتيب الأفضل للوحات حول مركز الاهتمام Center Stage؟ الجواب ببساطة أنه لا يُوجَد ما يُسمَّى بالترتيب الأفضل؛ لأن المُستخدِمين مختلفون، وبالتالي ستتنوع أهدافهم وأساليبهم في إنجاز المهام. عند استخدام مجموعة برامج الرسم مثلًا، قد يُركِّز المُستخدِم على جزء مُحدَّد من الصورة يعمل عليه آنيًّا، وبالتالي لا يجب وضع اللوحات الثانوية في هذا الجزء لتجنُّب تحديد رؤيته. وتُوجَد نقطة أخرى، وهي أخذ الأوامر الأهم بالحسبان؛ ليتمكن المُستخدِم من إيجادها بسهولة بالنسبة للمزيد من الأوامر الخاصة أو المتقدمة، والتي قد يرغب الخبراء فقط بالوصول إليها عادةً. مهما اعتقدت أنك تعرف عن ميول مجموعة المُستخدِمين المعنيين، فلن تتمكن كونك مصممًا وحيدًا في مكتبك من القيام بأكثر من تخمين ثانوي لتعامُل كل فرد مع تصميمك المبدئي. والطريقة الوحيدة لمعرفة مدى نجاح تخمينك، هي الحصول على تقييمات المُستخدِمين؛ لذا لا تخشَ من اختبار المُنتَج، وكُن مستعدًّا للتعلم والإعادة! قبل أن تصل لهذه المرحلة، سيساعدك تذكُّر القاعدة الذهبية الآتية: الطريقة الوحيدة للتأكد مما إذا كان ترتيب اللوحات صحيحًا حول مركز الاهتمام Center Stage، هي اختبار المُستخدِمين للمُنتَج. فإذا اختبرت التصميم باكرًا خلال العمل على النماذج الأولية؛ فستتمكن من تعديله بسرعة وتوفر على نفسك الارتباك لاحقًا. الخلاصة باستخدام هذا النمط الفعال في التصميم، يبقى مركز الاهتمام Center Stage للأجزاء الأهم، ويساعد المُستخدِمين على التركيز وعدم التشتت بعناصر تُبعِدهم عن مهمتهم الأساسية. أبسط طريقة لتطبيق هذا التصميم هي أخذ الأجزاء الأهم من التصميم وجعْلها الأكبر في الواجهة. ينصح بعض خبراء تصميم واجهات المُستخدِم بجعل لوحة مركز الاهتمام Center Stage على الأقل بضِعف حجم العنصر الأصغر منها مباشرةً من واجهة المُستخدِم، مثل شريط الأدوات. باختبار سريع لبعض النماذج الأولية، ستحدد أفضل ترتيب للوحات حول مركز الاهتمام Center Stage. يمكنك بهذه الطريقة تقديم الدعم الأمثل لمهام المُستخدِمين، وستوفر على نفسك التعب في مراحل لاحقة من عملية التصميم. وأفضل ما في الأمر أنك ستصل إلى التصميم الأمثل. ترجمة -وبتصرُّف- للمقال Center Stage – Help the User Focus on What’s Important. اقرأ أيضًا أساسيات تصميم تجربة المستخدم أساسيات التصميم المرئي تعزيز حرية مستخدميك عبر حقول الإدخال القابلة للتعديل

يُوجَد جدل قائم حول ما إن كان الأفضل هو التصميم المُتجاوب Responsive Design أم التصميم المُتلائم Adaptive design، لكن سيُعتمَد التصميم المُتجاوب في حالات كثيرة؛ لانخفاض تكاليفه، في وقتنا الحالي على الأقل. وبالتالي يحتاج المصمم للاطلاع على المفاهيم الأساسية وبعض الإرشادات عن التصاميم المتجاوبة. في الأيام الأولى للإنترنت، كان يُفترَض أن يُناسِب الموقع الإلكتروني شاشة العرض، وبمجرد أن يُناسِب شاشة حاسوب محمول، فإنه يبدو جيدًا على كل شاشات الحواسيب الأخرى. بعد ذلك ظهرت الحوسبة المحمولة Mobile computing لتُغيِّر مجرى الأمور. تتنوع الأجهزة الإلكترونية اليوم كثيرًا من أجهزة ذات شاشات صغيرة، مثل الهواتف المحمولة، إلى شاشات العرض الكبيرة. بحيث يجب إنشاء تجربة مستخدم ملائمة لكل هذه الأجهزة، وهنا يأتي دور التصميم المُتجاوب. ما المقصود بالتصميم المتجاوب Responsive Design؟ يُعَد التصميم المُتجاوب أسلوبًا لتطوير خصائص الإنترنت؛ بحيث يُحدِّد الجهاز المُستخدَم أسلوب عرض الموقع. يستخدم عادةً مبدأ "الهاتف المحمول أولًا"؛ أي تصميم تجربة مستخدم مناسبة للأجهزة المحمولة، مثل الهواتف المحمولة، والأجهزة اللوحية، ثم تُعدَّل أبعادها؛ لتلائم شاشات أكبر. السبب الأساسي لاعتماد هذا المبدأ هو ازدياد عدد مستخدمي شبكات الهواتف المحمولة حاليًّا، تُستخدَم الهواتف المحمولة للوصول إلى الإنترنت أكثر من الحواسيب، وتُقدِّم ميزات مختلفة عنها، مثل شاشات اللمس، وبيانات نظام تحديد المواقع العالمي GPS، ومقاييس التسارع، ونحوها. يدفع الهاتف المحمول المصممين إلى التفكير ببساطة، وذلك لأن تجربة المستخدم محدودة جدًّا في الهاتف المحمول بسبب مساحة العرض المحدودة للشاشة؛ إذ من الصعب وأحيانًا من المستحيل تضمين كل اللوحات الجانبية والإعلانات ومُدخَلات وسائل التواصل الاجتماعي وما إلى ذلك؛ لذا يجب تبسيط تجربة المستخدم، مع السماح ببعض التعقيد فقط حين تسمح به مساحة العرض على الشاشة. المبادئ الثلاثة الرئيسة للتصميم المتجاوب Responsive Design تُوجَد ثلاثة مبادئ رئيسة تحكم التصميم المُتجاوب Responsive Design. وهناك مبادئ أخرى بالتأكيد، إلا أنها تلعب دورًا محدودًا في تصاميم معينة، بينما تشترك كل المواقع المُتجاوبة في هذه المبادئ الأساسية. أنظمة الشبكة المرنة Fluid Grid Systems. استخدام الصور المرنة Fluid Image Use. استعلامات الوسائط Media Queries. نظام الشبكة المرنة Fluid Grid System الطباعة موجودة قبل دخول الإنترنت؛ إذ تُحدِّد الطباعة حجم العناصر المطبوعة، ومواقعها بقياسات دقيقة. وقد استمر هذا التوجه عند دخول الإنترنت؛ حيث استمر تحديد المواقع وفق الأحجام بالبكسل. لم تنجح فكرة الأحجام المطلقة بهذا الأسلوب في الإنترنت المُتجاوب، بل استُبدِلت فكرة الأحجام المطلقة بالأحجام النسبية. تُوضِّح المعادلة الرياضية في المثال التالي مبدأ هذه الفكرة: بفرض أنك تعمل على موقع إلكتروني يحوي غلافًا مُصمَّمًا ليعرض الموقع بعرض أعظمي 960 بكسل، بينما العرض الأعظمي لنافذة تصفُّح الجهاز 1280 بكسل، سيكون الحجم المطلوب هو 960 بكسل، وإطار الجهاز هو 1280 بكسل؛ أي: ينطبق هذا المبدأ على العناصر الفرعية ضمن الغلاف أيضًا، فبفرض أنك تستخدم أسلوب العمودين لتنسيقك، يُفترَض أن يكون العمودان متساويَي الحجم مع هامش 20 بكسل بينهما (يكون بذلك عرض كل عمود 470). نستخدم المعادلة ذاتها مجددًا للأعمدة والهامش: ثم تُطبَّق هذه النسب على الخصائص المناسبة للنَّص البرمجي بصيغة CSS، مثل العرض والهامش ونحوهما. الصور المرنة Fluid Images الصور المرنة Fluid Images هي الصور التي يتغير حجمها ليوافق الإطار، وأسهل طريقة للتعامل معها هي استخدام أمر CSS التالي: img { max-width: 100%;} وبالتالي يعرف المتصفح أن الصورة يجب ألا تتجاوز 100% من قيمة البكسل فيها، وأنه يجب أن يتغير حجمها وفقًا لمحتوياتها. الفكرة هي أن هذا يمنع تمدُّد الصورة عندما يكون حجم الإطار أكبر من حجمها، وبالتالي يحافظ على جودة الصورة، ويضمن تصغيرها لتلائم حجم الإطار عند الحاجة، وهذا يحافظ أيضًا على نسبة أبعاد الصورة الأصلية. قد ترغب باستخدام كثافات بكسل متعددة Pixel Densities، إذ تُوجَد الآن اختلافات كبيرة في كثافات البكسل لشاشات معينة خاصة بالنسبة للهواتف المحمولة، والأجهزة اللوحية، بالإضافة لبعض الحواسيب الثابتة والمحمولة. ولتتمكن من ذلك؛ يمكنك ضبط الصورة لتكون أكبر من الإطار (عادةً ضِعف عرضه). يسهل استخدام ملفات بصيغ SVG الأمر؛ فهي الملفات الأصغر حجمًا للصور، كما يمكن تعديل حجمها لأي دقة عادةً. في التصاميم الأعقد عندما يحوي التصميم مثلًا الكثير من الصور، تُقدِّم مؤسسة الصور التفاعلية Responsive Image Organization الأسلوب التالي: استعلامات الوسائط Media Queries إن استعلامات الوسائط مُصمَّمة لتغيير تنسيق الموقع عند استيفاء شروط معينة. على سبيل المثال، قد لا يكون تنسيق العمودين المرتفعين عمليًّا بالنسبة للجزء المرئي من شاشة هاتف محمول. الفكرة أنه يمكنك حينها استخدام استعلامات الوسائط Media Queries؛ وذلك لتحدد متى تجب إعادة ترتيب العناصر الظاهرة على الشاشة. ستجد أن هذا الأسلوب ينطبق بأفضل ما يمكن مع مبدأ "الهاتف المحمول أولًا"، وذلك حين تعمل بالنسبة لشاشة الهاتف، ثم تُعدِّل الأحجام بعدها. فقد يبدو النَّص البرمجي CSS كالتالي: @media screen and (min-width: 480px) { /* ..larger screen sizes here.. */ } بعد ذلك يمكنك تحديد سلسلة من أوامر CSS لكل نقطة توقُّف Breakpoint؛ أي عند تَلَف التنسيق في بعض أحجام الشاشات. ستحتاج لاختبار المحتوى؛ لمعرفة مكان حدوث نقاط التوقف Breakpoint. وستجد بالنهاية إمكانية التنبؤ بأماكن نقاط التوقف؛ وفقًا لدقة شاشة الجهاز. أطر العمل Frameworks من المفيد اعتماد إطار عمل موجود مسبقًا للتصميم المُتجاوب بدلًا من إعادة إنشائه من الصفر. يُعَد بوتستراب Bootstrap مثلًا أحد أشهر أُطُر العمل المُعتمِدة على مبدأ "الهاتف المحمول أولًا" المتاحة على الإنترنت، ويمكنك تحميلها مجانًا من موقعها الإلكتروني. الخلاصة يحتاج التصميم الصحيح لمواقع الإنترنت المُتجاوبة Responsive Web Design بعض الممارسة. ويساعد اعتماد المبادئ الثلاثة المشروحة سابقًا في اختصار الوقت، والحصول على تصاميم مُتجاوبة صحيحة. سيستمر التصميم للأجهزة المتعددة، وعلى المصممين امتلاك القدرة على إنجازه بسرعة. ترجمة -وبتصرُّف- للمقال Responsive Design – Let the Device Do the Work. اقرأ أيضًا أساسيات تصميم الويب المتجاوب فلسفة تصميم الويب المتجاوب نماذج تصميم الويب المتجاوب الصور في تصميم صفحات الويب المتجاوب الدليل الشامل لشرح النقاط الحدية لصفحات الويب المتجاوبة ميزات تشغيل الأجهزة المحمولة والتصميم المتجاوب معها

إن حاولت بناء منزل دون إنشاء المُخطَّطات الأولية فإنه سينهار ببساطة، والسبب هو أنه لا يُمكِنك بناء منزل دون مُخطَّط. فلماذا قد تُنشِئ إذًا صفحة هبوط دون مُخطَّطات مُشابِهة رغم أنك في النهاية بحاجة لأساس متين لكسب تحويلات مُنتظِمة؟ فكِّرْ بالمُخطَّط الهيكلي على أنه التخطيط لصفحة الهبوط. سنتحدث فيما يلي عن أداة التخطيط الرائعة هذه وكيف يُمكِن إنشاء أداة مُشابِهة. ما المخطط الهيكلي لصفحة الهبوط؟ وما أهميته؟ يُحدِّد الإطار الهيكلي Wireframe العناصر الأهم ضمن صفحة الهبوط Landing Page دون أي تنسيق نمطي. إليك مثالًا من مُدوَّنة Unbounce عن عناصر صفحة الهبوط. لماذا تُعَد المُخطَّطات الهيكلية مهمةً لصفحات الهبوط تحديدًا؟ لصفحات الهبوط هدف تسويقي واحد، وتحصل عند إنشاء مخطط هيكلي لصفحة الهبوط على فرصة لربط كل قسم منها بهذا الهدف. ويُعَد التخطيط المُسبَّق لكيفية دعم الأقسام لهدفك الأساسي أسهل من تأجيله لمرحلة لاحقة. يُمكِنك إعادة استخدام المُخطَّطات الهيكلية لصفحة الهبوط في عدة حملات؛ حيث يكفي تعديل موضوع القسم وفق الحاجة. ستُنشِئ اليوم مُخطَّطًا هيكليًّا يحوي تفاصيل أكثر من المثال السابق. ستُنشِئ أولًا مُخطَّطًا لأقسام صفحة الهبوط، ثم تضيف أهم عناصر نسختك وصورك. إنشاء مخطط هيكلي لصفحة الهبوط Landing Page Wireframe سنتعرف تاليًا أهم عناصر ومبادئ إنشاء مخطط هيكلي لصفحة الهبوط. التنسيق Layout يُوجِّه تنسيق المُخطَّط الهيكلي رحلة الزائرين بدءًا من النقر إلى التحويل. يجب أن تقودهم فطريًّا ضمن المحتوى باستخدام أول مبدأين من مبادئ التصميم المُرتكِز على تحويل المستخدمين Conversion-Centered Design، وهما: مُساعَدة المستخدمين على التركيز، وإنشاء هيكل متين. اتبع النصائح التالية لإنشاء تنسيق يعرض محتوى صفحة الهبوط بسلاسة للمستخدمين: رتِّب المعلومات وفق تسلسُل منطقي: أنشِئ قائمةً بأقسام صفحة الهبوط، ورتِّبها وفق أهميتها للعملاء، ثم رتِّب أقسام المُخطَّط الهيكلي بالمثل. جهِّز تسلسلًا مرئيًّا: يقرأ المستخدمون صفحة الهبوط بتسلسل مرئي فطريًّا، رتِّب الأقسام وفق النمط Z أو النمط F، وهما اتجاهان فطريان لقراءة البشر للمحتوى. أبقِ عرض القيمة Value Proposition في الجزء المرئي من الصفحة: ضع عرض القيمة إن وُجِد في القسم الأول أو الثاني من صفحة الهبوط؛ إذ يجب أن يراه المستخدمون دون التمرير للأسفل. تذكَّرْ إدراج الدليل الاجتماعي Social Proof في أثناء تحديدك لأقسام صفحة الهبوط وترتيبها. تُعَد الشهادات والمراجعات ودراسات الحالة ومنشورات التواصل الاجتماعي والأدلة الأخرى لإعجاب الناس بمنتجك، إضافات مُناسِبة لصفحات الهبوط. تذكَّرْ وضْعها بجانب الميزات التي تُقدِّمها لتحسين تقييمك. المحتوى Content والآن بعد أن جهزت هيكلًا متينًا لصفحة الهبوط، حان الوقت للتخطيط لمحتوى الصفحة. لن تحتاج خلال هذه الخطوة لتجهيز النسخة النهائية ولا الصور. بل ستُحدِّد فقط إطارًا لهذه المحتويات. العنوان Headline يُوصَى بوضع العنوان النهائي في أثناء التخطيط الهيكلي للمحتوى. إن عنوان صفحة الهبوط أحد أول العناصر التي يراها زوار الموقع. كما أنك بكتابة العنوان في أثناء عملية التخطيط الهيكلي، تُنشِئ سمةً عامةً لباقي المحتوى. كيف تتأكد أن العنوان يعطي انطباعًا أوليًّا جيدًا ويُمهِّد الطريق لنجاح المحتوى؟ درس CoSchedule أكثر من 200,000 عنوان ووجد أن للعناوين التي حصدت أعلى تفاعُل العديد من السمات المشتركة. وقد تضمنت بعض هذه العناوين كلمات إجرائيةً، وأشارت لميزات واضحة. لاحِظ كيف تزيد الممارسات التالية جاذبية العنوان في صفحة هبوط Mixmax: يُلخِّص هذا العنوان تطبيق Mixmax في ثلاثة إجراءات كالآتي: تنظيم بريدك الإلكتروني. تحديد أولويات تركيزك. العمل التلقائي ليومك. حاوِل اتباع صيغة معينة إن احترت في أثناء محاولة الوصول إلى عنوان مُقنِع. يتفاعل المستخدمون معهم لتطبيقهم أفضل مُمارَسات العناوين. تُلخِّص صيغ العناوين الشائعة الأجزاء الأساسية من المعلومات، مثل: عرض القيمة، أو الدعوة إلى اتخاذ إجراء. النسخة Copy بعد أن يجذب عنوانك الزوار، ستحتاج لإبقائها على الشاشة بنسخ ممتازة. خلال هذه المرحلة من إنشاء المُخطَّط الهيكلي، حدِّد الرسائل الأساسية التي توصلها نسختك لكتابتها بكفاءة أكبر لاحقًا. إن لم تكُن متأكدًا من أين تبدأ، جرِّب استخدام برامج الكتابة الإعلانية بمساعدة الذكاء الاصطناعي AI Copywriting؛ لمُساعَدتك على توليد أفكار عن رسائلك الأساسية. تُعَد الكتابة الإعلانية بمساعدة الذكاء الاصطناعي جيدةً لتوليد أفكار يُمكِن تحسينها لاحقًا وفق مبادئ الكتابة الإعلانية وأسلوب علامتك التجارية. يتألف محتوى مُخطَّطك الهيكلي الآن من أفكار عامة. يُمكِنك أيضًا وضع أفكارك بكتابة العناوين الرئيسة والفرعية لكل قسم. لاحِظ العناوين الفرعية Sub-Head في صفحة الهبوط التالية لـ Evernote: إن كنتَ تُنسِّق محتوى قسم الميزات السابق، فاكتُب ببساطة اسم كل ميزة، وعندما تتعمق في النسخة لاحقًا، ستحتاج فقط إلى تلخيص كل ميزة في جملة. الصور Images بعد إعداد تنسيق المحتوى العام وموضوعاته الرئيسة، يأتي دور تحديد مكان الصور الأساسية. الصور مهمة لنجاح صفحة الهبوط؛ لأنها تعطي جاذبيةً وتفصل أجزاء النسخة وتُوجِّه المُشاهِد ضمن الصفحة؛ لكن حتى تُحقِّق هذه الأهداف، يجب أن تنسجم مع باقي الصفحة. لاحِظ دور الصور في بنية صفحة الهبوط في المثال التالي: تتناوب النصوص وصور الكلاب في كل قسم من هذه الصفحة، لتأخذك في رحلة حيوية ضمن المحتوى. لن تكون الصفحة بهذا الوضوح إن أدرج المصمم الصور لاحقًا كإضافات. تذكَّرْ في أثناء إنشائك للمُخطَّط الهيكلي أنك لست مُجبَرًا على الالتزام بصور مُحدَّدة حتى الآن. يُمكِنك استخدام مربعات نصية أو صور بسيطة لتحديد المساحة المُخصَّصة للصور. تأكَّدْ فقط من اتباع أفضل المُمارَسات لصور صفحات الهبوط عند وضع الصور النهائية في هذه الأماكن. حمل العبء الأكبر لباني صفحة الهبوط Landing Page Builder قد يبدو أن إنشاء صفحة هبوط من الصفر أمرًا مُرهِقًا، لكن الاختيار الصحيح لباني صفحات الهبوط سيوفِّر الكثير من الجهد. ويُمكِنك الاستفادة من المعلومات التي اكتسبتها اليوم عن المُخطَّطات الهيكلية لتعديل قوالب صفحات الهبوط لتُلائِم رؤيتك. ترجمة -وبتصرُّف- للمقال How to Build a Landing Page Wireframe لكاتبه Francois Marchand. اقرأ أيضًا تصميم صفحة هبوط (Landing Page) 9 مبادئ لتصميم صفحة هبوط احترافية العناصر الأساسية لتحصيل صفحات هبوط ناجحة مجموعة نصائح لتحسين صفحات الهبوط SaaS

يمكنك تحسين تجربة المستخدم باعتماد تأثير الإنتاج الذاتي The Self-Generation Effect في تصميم واجهة المستخدم. تأثير الإنتاج الذاتي مرغوب في الكثير من أدوات تخصيص المنتجات المستخدمة بكثرة، حيث يمنح المستخدمين قدرةً على التحكم من خلال تخصيص أدواتهم ومهامهم. عكست بعض المنتجات الرائجة تأثير الإنتاج الذاتي في تصاميمها مثل أدوبي فوتوشوب Adobe Photoshop ومايكروسوفت وورد Microsoft Word وإعدادات التحكم في سلسلة ألعاب الفيديو الرياضية EA Sports وسلسلة MX لتصاميم فأرة الحاسوب التي تنتجها Logitech. ستتعلم تاليًا كيف تطبق تأثير الإنتاج الذاتي في تصميم واجهة المستخدم وتُدخله في تصاميمك من خلال أمثلة عن البرامج وكل من المنتجات الإلكترونية والمادية. تأثير الإنتاج الذاتي The Self-Generation Effect يصف تأثير الإنتاج الذاتي تحسن تذكر المعلومات عندما تُنشأ ذاتيًا بالنسبة لتذكرها حين أخذها والتفاعل معها كمتلقي سلبي. درس هذه الظاهرة القوية العديد من باحثي علوم الإدراك ومنهم Norman Slamecka وPeter Graf عام 1978، حيث لاحظا هذه الظاهرة من خلال مجموعة متنوعة من تمارين التذكر تتضمن معلومات لفظية وصورًا وحتى مسائل حسابية. تعد فرضية التفعيل المعجمي Lexical Activation المكتشفة من قبل عالمي الإدراك John Gardiner وJames Hampton عام 1985 إحدى نظريات تأثير الإنتاج الذاتي. وتوضح أن للذاكرة الدلالية دورًا أكبر في عملية الإنتاج الذاتي للمعلومات من مجرد القراءة. اقترح Gardiner وHampton أن فرضية التنشيط المعجمي تدعم نظريتهم بناءً على نتائج ثلاث تجارب. اختبرت إحدى التجارب المشاركين بمجموعة كبيرة من التراكيب المكونة من حرفين Bigrams وهي عبارة عن حرفين متتاليين مأخوذين من تسلسل حروف. وكانت النتيجة أن أداء التذكر أسوأ بكثير عند تعلم تراكيب ثنائية لا معنى لها بالموازنة مع تذكر الاختصارات المعروفة ذات المعنى. اختبرت التجربة الثانية المشاركين بكل من الأعداد المركبة والمنفصلة (مثل تذكر 25 كعدد مركب وتذكر 2 و5 كعددين منفصلين) أظهرت النتيجة دور الإنتاج الذاتي في تذكر الأعداد المركبة ولم يلعب دورًا في تذكر الأعداد المنفصلة. وفي تجربة ثالثة اختبر Gardiner وHampton المشاركين بأزواج من الكلمات المألوفة والغريبة المشكلة لأسماء مركبة وأسماء مكونة من كلمتين أو أكثر. ووجدوا تأثير الإنتاج الذاتي فقط عند تقديم أزواج كلمات مألوفة ذات معنى (مثل كعكة الجبن Cheesecake) دون وجوده عند تقديم أزواج كلمات غير مألوفة ولا معنى لها (مثل كاتشب الجبنة Cheese Ketchup). بالاستناد إلى فرضية التنشيط المعجمي Lexical Activation يبدو أننا بحاجة لتشجيع الإنتاج الذاتي للمعلومات لزيادة الإحساس بمعناها بدلًا من تلقينها سلبيًا للمستخدمين؛ إذا أردت منح المستخدمين تذكرًا أفضل في كل تسجيل دخول إلى تطبيقك أو تجربة أفضل في كل مرة يلعبون لعبة من تصميمك، فعليك تشجيعهم على إعداد عناصر المنتج بأنفسهم، لأن ما يعرفه الناس منذ القرن التاسع عشر هو التالي: بالمقابل توجد حجج كثيرة ضد تأثير الإنتاج الذاتي حيث حاولت نتائج العديد من التجارب تفسير الظاهرة بأن تخيل أحد المشاركين للمحتوى أثناء القراءة يمكنه من تذكر الأشياء (باستعادتها من الذاكرة) بذات الكفاءة عند إنتاجها ذاتيًا. كما توجد دراسات استبعدت تأثير الإنتاج الذاتي بإعطاء المشاركين تعليمات عن كيفية معالجة المعلومات عند القراءة، الأمر الذي يجعل كفاءة التذكر مماثلة للإنتاج الذاتي. يبقى رغم ذلك فهم كيفية دمج الإنتاج الذاتي في تصاميمك لواجهة المستخدم بهدف تحسين تجربة المستخدم أمرًا مهمًا، كما ينعكس في العديد من المنتجات الناجحة التي صممتها بعض الشركات الرائدة. 4 أمثلة عن كيفية تأثير الإنتاج الذاتي على تصميم تجربة المستخدم نعلم مسبقًا بناءً على خبرتنا المدرسية أن "اختبار الذات" بإنشاء أسئلة اختبار أو بطاقات استذكار flash-cards طريقة رائعة لتذكر كل شيء من أعوام التاريخ إلى المصطلحات البيولوجية. لكن كيف يُطبق ذلك في تصميم المنتجات وواجهات المستخدم؟ 1. مساحات عمل قابلة للتخصيص في برنامج الفوتوشوب يعد برنامج أدوبي فوتوشوب Adobe Photoshop مثالًا ممتازًا للاستفادة من تأثير الإنتاج الذاتي في تصميم واجهة المستخدم للحصول على منتجات ناجحة ورائجة على نطاق واسع. أحد أسباب محبة المستخدمين الدائمين لهذا البرنامج هو مرونته وكفاءته في إنشاء مساحات العمل ذاتيًا. يستفيد المستخدمون من مرونته في تنظيم مساحات عملهم وإضافة العناصر إليها بالإضافة لإمكانية حفظ هذه التعديلات لاستخدامها مستقبلًا. بهذه الطريقة تتحسن قدرة المستخدمين على تذكر مواقع الأدوات ما يحسن تجربة المستخدم النهائي لانخفاض الحاجة للذاكرة والأداء المعرفي في كل مرة يفتح فيها التطبيق. يسمح الفوتوشوب بالإنتاج الذاتي من خلال منح المستخدمين القدرة على إنشاء وحفظ إعدادات مساحة العمل المفضلة لديهم. 2. شريط أدوات وورد القابل للتخصيص يعد برنامج مايكروسوفت وورد Microsoft Word مثالًا رائعًا أيضًا عن كيفية تمكين المستخدمين من تخصيص مجموعة أدواتهم ليبقى المنتج أحد أفضل برامج معالجة الكلمات المتوفرة والرائجة إلى الآن بعد عقود من إطلاقه للمرة الأولى. يتيح وورد للمستخدمين إنشاء وتعديل وحفظ العديد من صيغ وأنماط النصوص ليتمكنوا من تنسيق كتابتهم بالطريقة التي يفضلونها. يمكّن وورد المستخدمين من إنشاء وتعديل وحفظ العديد من صيغ وأنماط الكتابة. الأمر الذي يعكس فهم المصمم لتأثير الإنتاج الذاتي. 3. وحدات تحكم قابلة للتخصيص في لعبة فيفا FIFA لا تقتصر أمثلة واجهة المستخدم التي تدمج تأثير الإنتاج الذاتي في تحسين تجربة المستخدم على تخصيص البرامج وتطبيقات الإنترنت. حيث تظهر فوائد التخصيص والإنتاج الذاتي في العديد من المنتجات المادية أيضًا. تعتبر لوحة التحكم المستخدمة في لعبة FIFA الإلكترونية المصممة من قبل شركة Electronic Arts وهي إحدى أشهر شركات تصميم الألعاب في العالم مثالًا رائعًا عن تعزيز حماس واندماج اللاعبين عند تطبيق الإنتاج الذاتي. تعزز FIFA تحكم المستخدمين بأسلوب اللعب من خلال السماح لهم بتخصيص أزرار وإعدادات لوحة تحكم اللعبة. 4. أزرار يمكن تخصيصها في فأرة الحاسوب اللاسلكية MX Master لشركة Logitech إن الفأرة اللاسلكية Logitech MX Master التي أنتجتها شركة Logitech International S.A. مثال آخر رائع عن تصميم منتج مادي يمكن للمستخدم تخصيصه بهدف تطبيق تأثير الإنتاج الذاتي وتحسين تجربة المستخدم. تسهل فأرة الحاسوب اللاسلكية Logitech MX Master حياة المستخدم بتعزيز تحكمه في تخصيصها بأسلوبه وإنشاء مهامه الخاصة، لخوض تجربة أكثر إنتاجية وكفاءة أثناء استخدامه المنتج. الخلاصة يساعد فهم الإدراك البشري وكيفية تسهيل عمليتي الذاكرة والتعلم على المستخدمين في تحسين تصميم تجربة المستخدم. ويستفيد المستخدمون من تخصيص واجهة المنتج خاصة عندما تحوي الكثير من الأوامر والمهام المتاحة ليتمكنوا من تعديل الأدوات والمهام بما يتماشى مع تحسّن كفاءتهم مع الوقت. تذكر أن تأخذ بالحسبان الصعوبات المواجهة للتعلم البشري وفكر بآلية تسهّل عملية التعلم على المستخدمين وحافظ على مرونة أي واجهة مستخدم تصممها. ترجمة -وبتصرّف- للمقال The Self-Generation Effect: How to Create More Memorable User Interfaces. اقرأ أيضًا قواعد تصميم الواجهات واجهات المستخدم اﻷكثر شيوعا مقدمة عن أنماط تصميم واجهة المستخدم وقوالب تصميمها مع أمثلة عملية دليل المصمم لتصميم واجهات تطبيقات ويب مذهلة الوصايا العشر لتصميم واجهات مستخدم احترافية

سنطرح موضوعًا مشتقًا من الرياضيات وموجودًا في كل مكان من حولنا، ألا وهو النسبة الذهبية. لن نعود إلى الفصول الدراسية، بل سنتعرف هذا المفهوم، ونعرف لماذا يُعَد جزءًا أساسيًّا لإنشاء تصاميم تجذب المُستخدِم. تُعَد قصة النسبة الذهبية إحدى الأساطير، والتي يعود تاريخها إلى تاريخ الرمز Pi (صيغة رياضية أخرى أساسية لفهم خصائص الدوائر) أطلق عليها العلماء -ومنهم فيثاغورس، وإقليدس- أسماءً عديدةً، مثل: المتوسط الذهبي Golden Mean، والقسم المُقدَّس Divine Section. لقد ساد لعدة قرون الاعتقاد بزيادة جاذبية الفن والعمارة والطبيعة عند اعتماد التصاميم والبِنَى على النسبة الذهبية، حيث تزخر الحضارات البشرية منذ اليونان القديمة بالعديد من الأمثلة عنها. توافق تماثيل البارثينون النسبة الذهبية وكذلك بعض المجسمات الأفلاطونية الخمسة (ومنها المكعب، والمجسم اثنا عشري الوجوه)، وقد اشتهرت النسبة الذهبية في عصر النهضة، وسعى فنانو تلك الفترة إلى اعتمادها لتقديم أعمال مبهجة جماليًّا. يمكننا استخدامها اليوم في تصميم التطبيقات ومواقع الإنترنت لتحسين التنسيق وجذب البصر، مع الثقة الكاملة بها كونها حقيقةً عريقةً. ما هي النسبة الذهبية؟ استُخدِمت النسبة الذهبية لإنشاء تصاميم جذابة بصريًّا عبر التاريخ، وأصبحت رسميًّا جزءًا من نظرية التصميم في عصر النهضة. لفت ظهورها المتكرر في الهندسة -كما في المضلعات، والنجوم الخماسية- انتباه علماء الرياضيات اليونانيين القدماء؛ حيث درسوها منذ 2400 عام على الأقل. تعتمد النسبة الذهبية على العلاقة بين الأرقام المتتابعة في متتالية فيبوناتشي Fibonacci Sequence. متتالية فيبوناتشي بسيطة للغاية، ولا يُشترَط أن تكون عالم رياضيات لتتمكن من فهمها، يساوي كل عدد فيها مجموع العددين السابقين له. تبدأ بـ 1 (1+الصفر غير المرئي=1) وتكون الأعداد الـ 10 الأولى للمتتالية كالتالي: 1, 1, 2, 3, 5, 8, 13, 21, 34, 55 وتستمر إلى ما لا نهاية. يمكننا حساب النسبة الذهبية باستخدام المعادلة السابقة، ونُعبِّر عن الناتج بالحرف اليوناني فاي Phi. تبلغ قيمة النسبة 1.618 تقريبًا، ورغم أنها تحوي الكثير من الأرقام بعد الفاصلة العشرية، مثل العدد Pi، فإنه لا داعي للقلق بشأن تجاوُز الرقم 1.618 في مجالنا. كيف نستخدم النسبة الذهبية في التصميم؟ تخيَّلْ مستطيلًا بعرض يساوي 1؛ لحساب المستطيل الأفضل جماليًّا، يمكنك ببساطة ضرب العرض بالنسبة الذهبية التقريبية 1.618. يساوي الضلع الطويل في هذه الحالة 1.618. حاوِلْ رسم مستطيل بهذا المقياس إذا كان بقربك قلم رصاص وورقة ومسطرة، أو أنشِئ واحدًا في تطبيق الرسم إن أمكن. ما تراه أمامك ليس مجرد مستطيل، إنما هو المستطيل المثالي! يمكننا حساب النسبة الذهبية في كل مجالات التصميم، فقد استخدمها المهندسون المعماريون قديمًا في حساب قاعدة وارتفاع أكروبوليس أثينا في اليونان. ستجد دأن تنسيق الغالبية العظمى من الكتب الموجودة ضمن مكتبتك موافقًا لهذه النسبة. تُوجَد النسبة الذهبية أينما نظرت حرفيًّا، فقد كبرنا ونحن معتادون عليها، ربما لأننا محاطون بالأشكال والأشكال مُشتقَّة أساسًا من النسبة الذهبية. نحتاج كوننا مصممين إلى أخذ هذا المفهوم عن ألفة المستخدمين للنسبة الذهبية وراحتهم بالنظر إليها بالحسبان في أثناء التصميم لهم. يحب الأشخاص النظر إلى هذه النسبة؛ لذلك تستخدم مجلة ناشيونال جيوغرافيك National Geographic مستطيلًا أصفر موافقًا للنسبة الذهبية. لا تساعدنا النسبة الذهبية على إنشاء مستطيلات جميلة فحسب، بل يُمكِنك أيضًا إنشاء تكوين حلزوني باستخدام أطوال أضلاع مبنية على ترتيب تنازلي لمتتالية فيبوناتشي. إن بدأنا بطول ضلع 55 يُمكِننا تشكيل الحلزون برسمه للداخل؛ بحيث يُصبِح الطول الجديد للضلع الذي يوجهنا بالرسم 34 بعد تجاوُز نقطة البداية. نواصل الرسم إلى الداخل بأطوال 21, 13, 8, 5, 3, 2, 1, 1 حتى نصل إلى الوسط بطول ضلع 1. يعتمد هذا الشكل الحلزوني على النسبة الذهبية، ويبدو أجمل للعين البشرية من الشكل اللولبي المتوازن؛ لأنه موجود في الطبيعة في النباتات والمحار وحتى الرخويات، كما يُقال أن نسب أجسام العديد من الحيوانات الأكبر وحتى الأجسام البشرية موافقة للنسبة الذهبية. يُمكِننا القول إن النسبة الذهبية جزء منا؛ لذا يمكنك كونك مصممًا استخدام هذا النوع من الأشكال الحلزونية لجذب وتركيز انتباه أيِّ مُستخدِم على نقطة معينة من تصميمك. أظهرت الأبحاث أن العين البشرية تتعرف الصور الموافقة للنسبة الذهبية بسرعة أكبر من الصور الأخرى، وكذلك يفسرها الدماغ ويعالجها بسرعة أكبر. يمكننا أيضًا استخدام النسبة الذهبية لموازنة العناصر ضمن التصميم. عناصر شعارات تويوتا وبيبسي -على سبيل المثال- مرتبة وفق النسبة الذهبية؛ فالأشكال البيضاوية متوازنة وفق النسبة الذهبية في شعار تويوتا، وكذلك الدوائر في شعار بيبسي. هل تذكر علامات تجارية أخرى موافقة لهذه النسبة "السحرية"؟ قد تكون السبب لظهور شعارات إبداعية. حساب النسبة الذهبية سنتطرق الآن إلى الرياضيات باختصار، المعادلة بسيطة لحساب النسبة الذهبية، والنسبة الذهبية هي العلاقة بين بُعدَي التصميم عادةً الأفقي والعمودي. لا يهم أي جانب نعُدُّه الأطول (A) وأيهما الأقصر (B). (أما إن كنت تتأكد أن تصميمًا ما موافق النسبة الذهبية، ستحتاج إلى تحديد أي الجانبين أطول أو أقصر). تكون المعادلة كالتالي: A/B = (A+B)/A = 1.618033987 = Φ Φ هو الحرف اليوناني Phi المُستخدَم للتعبير عن النسبة الذهبية. لماذا يكون A/B = (A+B)/A؟ هذه المعادلة صحيحة لاعتمادنا متتالية فيبوناتشي، ولأن A وB (إن عبَّرنا عنها بأرقام صحيحة) هما مجرد عددين متتاليين من متتالية فيبوناتشي؛ يمكننا التقريب إلى 1.6 و1.61 و1.618 في التصميم دون الإخلال بجمالية النسبة الذهبية، وذلك لأن بصرنا لا يلاحظ هذه الانحرافات الطفيفة. استخدام النسبة الذهبية في التصميم يُمكِنك استخدام النسبة الذهبية في تصاميمك بسهولة. تسمح تطبيقات مثل أدوبي فوتوشوب Adobe Photoshop وأدوبي إليستريتور Adobe Illustrator بإنشاء أدلة Guides أو طبقات Layers تساعدك على التصميم باستخدام النسبة الذهبية. وإن لم يحسب البرنامج الذي تستخدمه النسبة الذهبية تلقائيًّا، يمكنك دومًا استخدام أدوات على الإنترنت تُحدِّد نسبة أطوال الأضلاع. الخلاصة إن النسبة الذهبية أساسية للمصممين والمستخدمين على حد سواء، وقد اعتمدها الفلاسفة وعلماء الرياضيات والمهندسون المعماريون والفنانون والمصممون لأكثر من ألفَي عام. تحيط بنا الشعارات الموافقة للنسبة الذهبية، مثل: شعار بيبسي، وكذلك الكائنات الطبيعية، مثل صدفة النوتيلاس nautilus shell. يتعرف بصرنا على هذه الأشكال بسرعة لانتشارها ويعالجها دماغنا كونها أشكالًا مألوفةً وجميلةً. رغم معرفة النسبة الذهبية ودراستها لعدة قرون وعلم اليونانيين القدماء بها، فإن عالم الرياضيات الإيطالي فيبوناتشي هو مَن حدد تسلسُلها الشهير في العصور الوسطى. إن أساس فهم النسبة الذهبية المُمَّثلة بالحرف اليوناني فاي Phi هو استخدام سلسلة فيبوناتشي (سلسلة أعداد تبدأ بالرقمين 1,1, ونجمع آخر عددين للحصول على العدد التالي). تُستخدَم النسبة الذهبية على نطاق واسع في تصميم التطبيقات ومواقع الإنترنت. ويسهل اعتمادها عند إنشاء المُخطَّطات الهيكلية Wireframes. يُمكِنك التأكد من ترتيب أولويات المحتوى الذي تحتاج إليه بطريقة صحيحة، ومن وجود المتطلبات الجمالية للتخطيط، وذلك دون الحاجة لبذل الجهد في التصميم منذ البداية. ويبدأ العمل الفعلي عندما تُقرِّر أين ستضع العناصر والميزات في هذا المُخطَّط الهيكلي. في الصورة العلوية للمثال السابق النسبة بين منطقة المحتوى واللوح الجانبي تساوي فاي؛ أي: 1.618. يمكنك التأكد بالقياسات التالية: العرض الإجمالي للمُخطَّط الثابت هو 960 بكسل، وهو مُقسَّم إلى منطقة محتوى وشريط جانبي، منطقة المحتوى هي الأطول. بتقسيم الطول الإجمالي 960 بكسل على قيمة فاي 1.618 نحصل على 593 بكسل، نعتمد هذا الطول لمنطقة المحتوى. نعتمد الطول المتبقي؛ أي: 367 بكسل للوح الجانبي. تتمتع هذه الأرقام بالمرونة لأنها نسبة، هذا يعني إمكانية تطبيقها بسهولة لإنشاء عدة مُخطَّطات تصميمية؛ حيث لا داعي لاستخدام أرقام ثابتة، وكل ما عليك فعله هو التأكد أن الجزء الأكبر أطول بـ 1.618 مرة من الجزء الأصغر. يُمكِنك تطبيق النسبة الذهبية في أي جزء من تنسيق صفحتك، إذ يُمكِنك مثلًا استخدام النسبة الذهبية ضمن الترويس Header؛ لجذب انتباه المُستخدِم، ثم استخدامها مجددًا في المتن. يظهر في الصورة السفلية من المثال السابق الشكل الحلزوني الموافق للنسبة الذهبية. يُمكِننا بسهولة إنشاء تصاميم حلزونية موافقة للنسبة الذهبية؛ باستخدام متتالية فيبوناتشي بترتيب تنازلي لأطوال جوانب اللولب. نعرف كوننا مصممين قيمة البرامج المتاحة لتسهيل إدراج النسبة الذهبية في أعمالنا وتحسين تجربة المُستخدِم، مثل شركة Adobe التي تُقدِّم هذه المُساعَدة الرائعة في برنامجَي Photoshop، وIllustrator. ترجمة -وبتصرُّف- للمقال The Golden Ratio - Principles of form and layout.. اقرأ أيضًا أساسيات الوزن البصري في التّصميم الجرافيكي - الجزء الأوّل مبادئ تصميم الرسوميات أساسيات التصميم الجرافيكي - الجزء الأول: العناصر

حتى لو لم تكن من محبي قوائم المهام To-Do Lists يبقى استخدام القوائم أسلوبًا ممتازًا لعرض المحتوى للمستخدمين. تسمح القائمة للمستخدم بالانتقال السريع إلى الجزء الأهم من المحتوى مع الحفاظ على اطلاع كامل على المعلومات المتاحة، كما تساعده على فهم التسلسل المنطقي للمحتوى، وذلك بعرض الفئات المختلفة وتشعباتها. يساعد تعلم المزيد عن أنواع القوائم المستخدمة في إنشاء تصاميم مميزة وفهم كيفية تطبيق كل منها والوقت الأنسب لاعتمادها في الوصول إلى أفضل النتائج. مشكلة التصميم عند كثرة العناصر والخيارات ستحتاج إلى تقديمها للمستخدمين بأسلوب يمكّنهم من تأدية مهامهم، قد تتضمن هذه المهام عرض محتوى عناصر مختلفة بسرعة أو البحث عن عنصر محدد واختياره. أفضل أنماط التصميم في هذه الحالة هي الأنماط التي توفر على المستخدم تخطي العديد من النوافذ والصفحات أثناء تصفحه للمحتوى. يجب أيضًا دعم المستخدمين في البحث عن عنصر واختياره بتوجيههم إلى غايتهم عبر فئات أوسع، الأمر الذي ينطبق على عرض عناصر مرتبة زمنيًا. وفي كلتا الحالتين عليك التأكد من إمكانية إنجاز المستخدمين لمهامهم بأقل جهد ممكن وأشمل نظرة عامة، حتى عند تشعب مجموعة العناصر والخيارات بما يكفي لتهديد التحكم بكامل واجهة المستخدم. حل مشكلة التصميم يكون الحل باستخدام القوائم حيث توجد أنواع مختلفة من القوائم وهي مفيدة باختلاف الحالات. تسمح قائمة البيانات المتجمعة List Inlay للمستخدم برؤية محتوى كل العناصر مرتبةً ضمن قائمة بذات الشاشة، وذلك بمجرد النقر على العنصر. تعرض القائمة عادةً تسميات واضحة أو وصفًا موجزًا للمحتويات، وتظهر تفاصيل إضافية متشعبة من كل تسمية عند النقر عليها ثمّ يُزوَّد المستخدم بأداة لإغلاق العنصر وذلك بالنقر على المساحة العامة لمحتويات العنصر أو قائمة مختصرة للوصف أو اسم العنصر أو الأزرار أو الأيقونات كرموز + و -. تدمج قوائم الأرشفة Archive Lists مجموعات البيانات في فئات واسعة، مُرتبة وفق اليوم أو الأسبوع أو الشهر أو السنة التي أُدرجت أو عُدلت فيها معلومات العناصر. كما ترى في مثال قائمة الأرشفة التالي أُضيف نوع الإجراء إلى كل إجراء بتاريخ معين للسماح للمستخدمين بتضييق نطاق بحثهم وفقًا لليوم أو المجموعة التي ينتمي إليها العنصر المطلوب. يعرض المثال التالي قائمة أرشفة للوحة شبكة التخزين السحابي المتزامن Sync. أُضيف نوع الإجراء إلى كل إجراء بتاريخ معين لتضييق نطاق بحث المستخدمين وفقًا لليوم أو المجموعة التي ينتمي إليها العنصر المطلوب. تسمح قائمة التمرير Scrolling List بالوصول إلى كل الخيارات المتاحة في الصفحة أو النافذة أو اللوحة بالإضافة إلى العناصر الموجودة أسفل القائمة عن طريق التمرير. تستخدم قوائم التمرير Scrolling Lists غالبًا في تصاميم واجهة المستخدم الحاوية على مجموعة من الخيارات التي تنبثق في جزء منفصل من مربع الحوار أو النافذة أو الصفحة أو في لوحة أخرى. تتألف قوائم التمرير عادة من أعمدة خيارات مرتبة ترتيبًا أبجديًا أو أي ترتيب منطقي آخر. يمكن للمستخدم التحرك مرارًا (للأعلى والأسفل) عبر هذه الخيارات بالنقر على الأسهم أو بضغط أسهم لوحة مفاتيح الحاسوب أو بالسحب في شاشات اللمس أو باستخدام بكرة الفأرة. عند بدء تشغيل تطبيق Photoshop، يظهر نموذج تصميم قائمة تمرير تعرض للمستخدمين الملفات المفتوحة مؤخرًا. ما يساعدهم في فتح ملف قد يرغبون باستكمال العمل عليه. ستظهر خيارات محدودة فقط دون استخدام قائمة التمرير، وقد تختفي نصائح التعلم الأساسية أسفل الصفحة، الأمر الذي يقلل احتمال الوصول إليها. لماذا عليك اختيار نموذج تصميم قائمة List Design Pattern؟ إذا أردت تزويد المستخدمين بالعديد من الخيارات أو الملفات أو رسائل البريد الإلكتروني أو مجموعة عناصر أخرى، فإن قائمة البيانات المتجمّعة List Inlay مفيدة خاصة عندما تشغل العناصر مساحة كبيرة من الشاشة أثناء عرض المحتوى كاملًا. تتيح قائمة البيانات المتجمّعة للمستخدم رؤية قسم كبير من العناصر الأخرى في القائمة حتى أثناء عرض أحد المحتويات، وبالتالي يمكن الانتقال بسهولة من قسم إلى آخر. يخضع المستخدمون لمحدودية الإدراك البشري حيث يستهلك عرض الكثير من العناصر معًا المزيد من الوقت للعثور على العناصر التي يبحثون عنها. توجه قوائم الأرشفة Archive Lists المستخدم في الوصول إلى المعلومات من خلال فئات مصنفة تحافظ على عدد مقبول أو سهل التعامل من الخيارات الظاهرة معًا على الشاشة في أي وقت. ثم يمكن للمستخدم الانتقال إلى شاشة عرض أخرى بالنقر على هذه التصنيفات، تعرض هذه الشاشة محتويات الفئة المحددة معًا مرة واحدة أو ضمن قوائم أضيق. يختصر توجيه المستخدمين بهذا الأسلوب وقت الاطلاع على الكثير من العناصر ريثما يصلون إلى المعلومة المطلوبة. تعرض قوائم التمرير Scrolling Lists الكثير من الخيارات دون أن تشغل جزءً كبيرًأ من واجهة المستخدم. بالإضافة إلى سماحها بالاطلاع على الكثير من العناصر دون الحاجة للانتقال بين عدة أجزاء من واجهة المستخدم. يستخدم مجلد الصور الموضح هنا نموذج تصميم قائمة أرشفة Archive List يساعد المستخدمين على التصفح ضمن المحتوى الواسع. بالتصغير إلى مستوى السنة، بإمكانك تحديد الإطار الزمني التقريبي بسرعة، ثم التقريب مرة أخرى للمزيد من التفاصيل. أفضل الممارسات: كيفية تطبيق القوائم بداية وقبل أي شيء آخر، عليك جمع كل الخيارات ثم ترتيبها في فئات أوسع إذا لزم الأمر (تقسم قوائم الأرشفة مثلًا إلى أيام وأسابيع وأشهر وسنوات) ثم اختيار عناوين مناسبة لهذه الخيارات. نسّق الخيارات بترتيب منطقي: يمكن ترتيب القائمة مثلًا وفق تاريخ آخر تعديل للملفات، كما هو الأمر في بعض تطبيقات إدارة الملفات، أو وفق الترتيب الأبجدي ببساطة. وأيًا كانت الطريقة التي اعتمدتها تأكد أن ظهورها فوري وأنها تحوي أنسب ترتيب ممكن. لن يكون ترتيب رسائل البريد الإلكتروني أبجديًا على سبيل المثال خيارًا مثاليًا للمستخدمين لحاجتهم عادةً إلى تمييز الرسائل الجديدة عن المقروءة. عند استخدام نموذج تصميم قائمة التمرير Scrolling List تأكد من توضيح أداة التمرير دون مبالغة. واسمح باستخدام لوحة المفاتيح للانتقال بين الخيارات. وفّر للمستخدم اختصارات للانتقال إلى الخيارات التي يفتحها كثيرًا، كأن تفتح بمجرد كتابة الحرف الأول من اسم العنصر أو بتثبيتها تلقائيًا أعلى القائمة بعد فتحها عدة مرات. اعرض المحتويات أقرب ما يمكن إلى القائمة دون الانتقال بين أجزاء واجهة المستخدم مثل علامات التبويب أو النوافذ أو الألواح المستقلة. عند تطبيق قائمة بيانات متجمّعة List Inlay يجب عرض المحتوى أسفل العنصر المحدد مباشرةً ويجب أن تسمح العلامة ذاتها للمستخدم بإغلاق المحتوى مجددًا وإعادة القائمة إلى شكلها الأصلي. تسمح بعض التصاميم للمستخدمين بفتح العناصر بمجرد النقر على المساحة التي يشغلها اسم الخيار، ثم إغلاقها بالنقر على المساحة التي تشغلها المحتويات. يقلل ذلك من الدقة المطلوبة لفتح العناصر أو إغلاقها أو التبديل بينها بسرعة. تأكد أن المحتويات تفتح تلقائيًا وأنها مرئية مباشرةً دون أن يبحث المستخدم عنها. أضف استجابة تؤكد فتح العنصر بنجاح وذلك بتغيير لون الجزء المحدد. تأكد أن عناوين الفئات تظهر بأسلوب قابل للنقر ليعرف المستخدم العناصر المُتجاوبة. قد يعطي استخدام خط منقط أو سهم موجه أسفل عناوين الفئات على سبيل المثال الانطباع بأن العنصر متفاعل. قد يفيد أيضًا تغير لون اسم الفئة عندما يختاره المستخدم بنجاح. وبذلك يعرف المستخدم أن نقرته صحيحة، ويعرف الفئات التي عاينها أثناء بحثه عن عنصر وذلك لتغير لون الخيارات التي فتحها مسبقًا، ليوفر بذلك الوقت والجهد. تتفاوت أهمية عناصر القائمة بالنسبة للمستخدم، ويصعب إيجاد تصميم ثابت لواجهة مستخدم تراعي هذه الفروقات الفردية بين الأشخاص. لذلك يجب توفير إمكانية لتخصيص عرض واجهة المستخدم في المواقع والتطبيقات التي قد يستفيد فيها المستخدمون من إبراز تواريخ معينة. السماح للمستخدمين بوضع نجمة بجانب فئات محددة على سبيل المثال أو بإنشاء لوحة تحكم خاصة بهم تتضمن التواريخ المهمة ليصبح التصميم مناسبًا لهم دون الحاجة للتحايل على التصميم. يسمح تطبيق Wunderlist للمستخدمين بتخصيص قوائمهم بنجوم توضع بجانب عناصر محددة لتمييزها. ويمكنهم إبراز هذه العناصر لإمكانية ترتيب القائمة بناءً على وجود نجمة للعنصر. مشاكل محتملة للقوائم تحوي القوائم بطبيعة الحال على الكثير من العناصر المختلفة، والتي تحوي بدورها الكثير من المعلومات. وبالتالي قد يستمر ازدياد طول القائمة عند فتح أكثر من عنصر معًا. ما يدفع المستخدم للتمرير بين الكثير من المعلومات للعثور على العنصر المطلوب عندما يترك أكثر من عنصر مفتوحًا معًا. يُغلق أحد الأساليب العنصر المفتوح تلقائيًا عندما يفتح المستخدم عنصرًا آخر، يضمن ذلك الحفاظ على طول مقبول للقائمة ويوفر على المستخدم اتخاذ إجراءات أخرى. إذا كانت أسماء الفئات غامضة أو غير مناسبة وغير مألوفة للمستخدمين، فلن يكونوا متأكدين إلى أين سينقلهم فتح العنصر. تفشل الأسماء الرديئة أيضًا في التعبير عن محتوى الفئة، فلا يتضح للمستخدم مكان وجود عناصر معينة. لذلك يجب أن تكون لغة أسماء العناصر مألوفة للمستخدمين ومرتبطة بأهدافهم عامّةً. عندما تحوي فئة معينة صورًا شخصية مثلًا يكون اسم "صوري" مناسبًا فهو واضح ومباشر. بينما يكون الاسم "مجلد 123" غير مناسب لأنه لا يعبر عن المحتويات. الخلاصة تتجلى فائدة نموذج تصميم القائمة عند الحاجة لعرض محتوى كبير للمستخدم ليختار منه عنصرًا محددًا أو يبحث عن مهمة محددة لإنجازها. توجد نماذج متعددة لتصميم القوائم، وهي مفيدة في حالات مختلفة. قائمة البيانات المتجمّعة List Inlay مفيدة خاصّة عند حاجة المستخدم للتقريب إلى فئة أو عناصر محددة مع الحفاظ على اطلاع على باقي الفئات بالمجمل. تتيح قوائم التمرير Scrolling Lists تصميم قوائم أكبر دون ازدحام الصفحة كثيرًا. بينما تستخدم قوائم الأرشفة Archive Lists خاصّة في الحالات التي يبحث فيها المستخدم عن العناصر بناءً على التواريخ. يجب أن تظهر عناصر كل القوائم بأسلوب قابل للنقر، وتتحسن تجربة المستخدم كثيرًا إن تمكّن من تخصيص ترتيب لعناصر القائمة وفق تفضيلاته. ترجمة -وبتصرّف- للمقال Increase Competitiveness in Users with Leader Boards. اقرأ أيضًا تنسيق القوائم (Lists) في CSS إظهار المحتوى أثناء التمرير رصف العناصر (Layout) في CSS

اتسع مجال تصميم الرسوميات (التصميم الجرافيكي) في العقود القليلة الماضية وزادت مجالاته بدخول البُعد الرقمي. لقد ركَّز تصميم الرسوميات بدايةً على وسائل الإعلام المطبوعة، وازداد إنتاج المحتوى واستهلاكه كثيرًا بعد ظهور وسائل التواصل الاجتماعي، وبذلك تنوعت مجالات عمل مصممي الجرافيك؛ كما ازداد الطلب على أعمالهم. تأتي فرص العمل الجديدة بما فيها من إرهاق وضغط. تُعَد الزيادة الكبيرة في عدد المصممين مشكلةً أخرى لهذا المجال؛ حيث تُوجَد أدوات جيدة على الإنترنت تُساعِد الأشخاص على التصميم دون معرفة مُسبَّقة ببرامج التصميم المعتادة مثل فوتوشوب Photoshop وإليستريتور Illustrator وكوريل Corel. ولن يحتاج المرء إلا لحاسوب واتصال جيد بالإنترنت وحسٍّ فني. يُصادِف مصممو الجرافيك خلال حياتهم المهنية الكثير من الأعمال والعملاء، وسيستعرض هذا المقال بعض المشكلات الشائعة التي تُواجِه مصممي الجرافيك ويقترح حلولًا لها. إذا كُنتَ مُصمِّمًا، فستألف معظم هذه المشكلات، وقد تجد بعض الحلول البسيطة لها. 1. مواكبة موضوعات التصميم الرائجة رغم اجتهاد المصممين في مواكبة مواضيع التصميم الرائجة، فإنهم يشعرون دومًا بأن أمرًا جديدًا قد فاتهم، إذ تتغير موضوعات التصميم الرائجة باستمرار. يُعنَى مجال التصميم، بالموضوعات الرائجة المختلفة في مجالات التسويق الرقمي والطباعة والتغليف وتصميم المواقع ومجالات التصميم الأخرى، ولهذا يصعب على المصممين الإلمام بكل الجوانب. الحل يفيد حِفظ بعض المواقع التي تنشر مقالات تغطي مختلف الموضوعات المتعلقة بالتصميم للعودة إليها عند الحاجة. وفي أسلوب آخر يمكن اتباعه، نجد تخصيص وقت أسبوعيًّا لتصفُّح المواقع المتعلقة بالتصميم، مثل: بيهانس Behance، ودريبل Dribble، وغيرها؛ بالإضافة لوسائل التواصل الاجتماعي، وبخاصَّة إنستغرام Instagram، فهي مصدر جيد لمواكبة أحدث توجهات التصميم الرقمي. 2. تقديم تصميم غير مناسب هناك مشكلة أخرى تواجه المصممين، وتُعَد امتدادًا للمشكلة السابقة، وهي عدم القدرة على إنشاء تصاميم مناسبة للسوق أو العلامة التجارية. تعتمد المعلومات الأولية التي تحصل عليها كمصمم على العميل وفهمه للتصميم ومشاركته في المشروع، بالتالي لا يمكنك الاكتفاء بها ويتوجب عليك البحث مُسبَّقًا. الحل يُعَد بحث التصميم مجالًا أكاديميًّا، ويكفي بالنسبة لك كمصمم وضع مجموعة خطوات لإجراء البحث المطلوب قبل التصميم. تُمثِّل الخطوة الأولى بفهم المعلومات الأولية المُتاحَة، ثم يُمكِنك الاطلاع على أعمال المصممين الآخرين في هذا المجال والتخطيط لتصميمك بناءً على ذلك. 3. عدم كفاءة التواصل وسير العمل إن التواصل السلس أساس أيِّ مشروع ناجح، بغض النظر عن مجال المشروع. قد يضر الافتقار إلى التواصل المُنظَّم مصممي الجرافيك للغاية، وينطبق الأمر ذاته على سير العمل، إذ تحتاج كمصمم لامتلاك فكرة واضحة عن سير المشروع. وقد تفاقمت هذه المشكلة أكثر مع زيادة العمل عن بُعد. الحل يُعَد إنشاء القنوات المُناسِبة أفضل طريقة لضمان تواصُل سلس. تُوجَد أدوات جيدة للتواصل وإدارة المشروعات، مثل: منصة أنا و Slack، و Asana، وغيرها يُمكِنك تجربتها. يجب عليك أيضًا تجهيز آلية للمراجعة والالتزام بها لضمان تسليم تصاميمك في الوقت المُحدَّد. 4. تأثير التصميم على معدل التحويل كثيرًا ما يتلقى المصممون تقييمًا بأن التصميم جيد لكنه لا يجذب العملاء المحتملين. ونظرًا لزيادة التنافسية في عالم التسويق الرقمي، يريد العملاء حاليًّا تصاميم سحريةً تزيد معدل التحويل (معدل تحويل الزوار إلى عملاء) وتُحسِّن أرباحهم. الحل رغم عدم وجود علاقة مثبتة بين التصميم والتحويل، فإنه ما زال بإمكان المصمم أخذ بعض العوامل بالحسبان لإنشاء تصاميم قد تُحسِّن معدل التحويل. تُوجَد أيضًا عوامل أخرى؛ مثل المبادئ النفسية، وعلم الألوان، وغيرها، على المصممين الاطلاع عليها. 5. الاطلاع على تصميم المواقع انقسم مجال التصميم الجرافيكي منذ مدة طويلة إلى عدة مجالات، مثل المطبوعات والإعلام الرقمي والتغليف وتصميم المواقع وغيرها، ولا يُمكِن لمصمم واحد احتراف كل المجالات. يُعَد تصميم المواقع تحديًا يواجه معظم المصممين، تتداخل عوامل كثيرة في تصميم مواقع الإنترنت تُصعِّب هذا المجال على المصمم. الحل في ظل عدم وجود حل مباشر، يحتاج المصممون إلى تخصيص وقت لدراسة الجوانب المتعلقة بتصميم مواقع الإنترنت، مثل واجهة المستخدم وتجربة المستخدم والتصميم المُتجاوِب وغيرها، ثم يأتي دور التدريب والمُمارَسة ليتحسن مستوى المصمم في هذا المجال. تكمن النقطة الأهم في أن مواقع الإنترنت -بعكس التصاميم الأخرى- مُكوَّنة من عدة عناصر متحركة، وبالتالي يرتبط تصميم بعضها بالآخر. أسهل حل للمصممين الجدد هو استخدام خدمة تصميم سحابية، مثل Wix و Divi و Elementor، وغيرها؛ إذ توفر ميزة تصميم مواقع مُبسَّطة تسمح للمستخدمين بإنشاء مواقع إنترنت عالية الجودة ومُوافِقة للهواتف المحمولة؛ من خلال ميزات نظام WYSIWYG (What You See Is What You Get) سهلة الاستخدام. 6. البحث عن خطوط مميزة يشعر المصممون دومًا بنقص مصادر التصميم الجيدة، ولا سيَّما الخطوط. قد تسأم بصفتك مصممًا من استخدام مجموعة الخطوط ذاتها، أو قد يطلب منك العميل تصميمًا مُميَّزًا. وفي الحالتين ستشعر بنقص الخطوط وبالحاجة للبحث عن خطوط جيدة لاستخدامها. الحل إن اطلاع المصممين جيدًا على أساليب الكتابة Typography أمر أساسي. يجب أن تعرف نوع الخط المناسب لكل تصميم والخطوط الأخرى الملائمة لإضافتها كخطوط ثانوية في التصميم، وبناءً على ذلك يمكنك البحث عن خطوط سميكة أو خطوط كتابة يدوية أو خطوط قديمة الطابع. من الجيد أيضًا إبقاء مجلد للخطوط ليُساعِدك في البحث. 7. إنشاء معرض أعمال باهر يتوقف إبداع المصمم حين يبدأ بتصميم معرض أعماله؛ حيث يهمل المصممون معارض أعمالهم؛ لانشغالهم بالعمل معظم الوقت، وحتى حين يعدُّونها، فإنها لا تعكس دومًا قدراتهم الحقيقية في التصميم. يواجه كل مصمم هذه المشكلة، ومع ذلك فإنه لا يعطي الأولوية لإنشاء معرض أعماله. الحل يُعَد تصميم معرض أعمال ممتاز فنًّا بحد ذاته، وعليك بصفتك مصممًا، التعامل معه مثل مشروع لعلامتك التجارية؛ حيث تنشئ وتعرض عملك كعلامة تجارية. يفيد البدء بالبحث عن أحدث التوجهات والاطلاع على بعض معارض الأعمال السابقة للحصول على الإلهام. وبناءً على هذا البحث وعلى أعمالك، ستتمكن من إنشاء معرض أعمال جذاب بعيد عن الفوضى قد يُساعِدك في إيجاد عمل أفضل. 8. إيجاد عمل مجز المشكلة التالية التي تظهر بعد تصميم معرض أعمال ممتاز هي العثور على فرص عمل جيدة. يُعنَى المصممون المستقلون الذين يعملون عن بُعد بهذه المشكلة أكثر من غيرهم. وحتى مَن لديهم عمل ثابت، قد يُجرِّبون العمل الحر لزيادة دخلهم وخبراتهم. يعتمد إيجاد العمل على خبرة المصمم، وسعر خدماته، ومكان إقامته والعديد من العوامل الأخرى. الحل توجَد العديد من المنصات على الإنترنت تُقدِّم فرص عمل حُر بسعر مُجزٍ، مثل منصات مستقل وخمسات والكثير غيرها. تحتاج فيها إلى إنشاء حساب شخصي وعرض أعمالك والبدء بتقديم عروض على المشروعات، كما توجَد العديد من مواقع مسابقات التصميم؛ حيث يُمكِنك المشاركة في المشروعات والحصول على مكافآت جيدة. ويمكن للمصممين أيضًا تصميم أعمال مختلفة وبيعها كمنتجات رقمية، مثل: التصاميم الطباعية الجاهزة القابلة للتعديل، أو القوالب المختلفة للمواقع، والعروض التقديمية، وغيرها الكثير من المنتجات التصميمية؛ ومن ثَم عرضها للبيع بأسعار مُحدَّدة على منصات مختلفة متخصصة في مجال بيع المنتجات التصميمية الرقمية، مثل: منصة بيكاليكا وغيرها. 9. إيجاد الأدوات المساعدة المناسبة تحتاج أحيانًا إلى أدوات بالإضافة لبرامج التصميم الأساسية، خاصَّةً عند العمل على مشروع بفكرة جديدة لم تعتَدها أو عند التعاون مع مصمم أو مطوِّر آخر. يُوجَد عدد جيد من الأدوات الإضافية التي قد تساعدك، وتبقى المشكلة في تحديد الأدوات المناسبة لك. الحل يشبه الأمر اختيار الأدوات الإضافية المناسبة للتسوق لشراء حذاء. يجب ألا تختار أول ما تقع عيناك عليه، بل عليك التأكد أولًا من أنها مناسبة لك وأنها تلبي احتياجاتك وأنك مرتاح عند استخدامها. اطَّلِع على تقييمات هذه الأدوات على الإنترنت، واختر العروض أو فترات التجربة المجانية إن كانت متاحةً، وبمجرد وصولك للمعلومات المطلوبة، حدِّد أداةً نهائيةً لاعتمادها. 10. تخطي الجمود الإبداعي Creative Block إن المشكلة الأشهر بالنسبة لمصمم الجرافيك هي الدخول في حالة الجمود الإبداعي Creative Block. قد تعمل أحيانًا على مشروع لتجد أنك توقفت عند نقطة محددة دون تقدُّم، وقد يعود ذلك إلى نقْص الإلهام أو عدم كفاية المعلومات الأولية أو الإرهاق، لكن ذلك لا يُعَد مبررًا للتوقف عن العمل ولا لتقديم تصاميم بجودة سيئة. الحل أول خطوة للخروج من حالة الجمود الإبداعي هي الاعتراف بوجوده، بعدها عليك البحث عن السبب. فإن كان السبب هو نقْص الإلهام، فأنت بحاجة للرجوع إلى ملاحظات مرحلة البحث. تصفَّحْ أكثر على الإنترنت بحثًا عن أفكار تصميم جديدة. إن كان الجمود بسبب الإرهاق، فيُمكِنك الخروج للتنزه أو القيام بنشاط ترفيهي، وتُعَد الطبيعة مصدرًا قويًا لإلهام الإبداع، كما توجَد أيضًا العديد من التمارين البسيطة التي يُمكِن ممارستها للخروج من هذا الجمود الإبداعي. 11. تقديم خدمات إضافية غير التصميم أخذت الخدمات تتداخل بعد اتساع عالم التسويق الرقمي، إذ يُفضِّل العملاء الآن الأشخاص متعددي المواهب القادرين على تلبية أغلب متطلباتهم. ستصادف بصفتك مصممًا، عملاءً يطلبون منك خدمات في تطوير مواقع الإنترنت وإنشاء المحتوى أو حتى تحسين محركات البحث SEO؛ وهذا بسبب عدم فهمهم الكامل لمجال عملك أو للخدمات التي يحتاجون إليها أو لرغبتهم بالعمل مع مُزوِّد خدمات شامل. الحل لا يوجد حل بسيط لهذه المشكلة للأسف. والخيار الأول هو الرفض المُباشِر لهذه الطلبات. يُمكِنك الرفض مُباشَرةً عندما تكون مصممًا محترفًا وتملك مصدر دخل جيد؛ أما الخيار الآخر فهو تقديم الخدمات التي يطلبونها، إذ يفيد اكتساب مهارات متنوعة المصمم دومًا، وهذه المشروعات مفيدة لتنمية مهارات المصمم. توجَد العديد من الأدوات الجيدة التي تُوفِّر الحلول المتكاملة يُمكِنك الاستعانة بها، إذ لن تحتاج لإنجاز كل شيء من الصفر، ويُمكِنك الاكتفاء باستخدام هذه الأدوات للحصول على النتائج المرغوبة، لتحصل بذلك على ثلاث ميزات؛ حيث إنك لن ترفض طلب العميل، ولن تحتاج لتعلُّم مهارات مختلفة، كما ستزداد أرباحك. 12. الجداول الزمنية غير الواقعية والدفع بعد تسليم العمل لقد احتفظنا بأكثر المشكلات شيوعًا لمصممي الجرافيك للنهاية، فهي مشكلات يصعب حَلُّها. وستُصادِف مرارًا عملاءً يطلبون التصميم بأسلوب التهديد، كما قد يعاندك بعض العملاء ولا يدفعون بعد استلامهم العمل. لذا فإن كنت مصممًا مُستقِلًّا ستكون هذه المعاملات جزءًا من حياتك المهنية. الحل يُعَد التواصل الواضح أفضل حل لهذه المشكلات. تأكَّدْ مُسبَّقًا من توضيح تقارير المشروع والجداول الزمنية وشروط الدفع، بالإضافة لتذكير العميل بقاعدة المثلث في التصميم؛ حيث إن نقاط المثلث هي جودة العمل والوقت اللازم لتسليمه والسعر المطلوب. وتحصل على أفضل نتيجة عند تَساوي أضلاع المثلث، وإلا ستختلّ إحدى النقاط. وفيما يتعلق بالدفع، من الجيد اعتماد أسلوب الدفع المُسبَّق؛ لتجنُّب الشعور بالاستغلال لاحقًا. يجد الناس أن حياة مصمم الجرافيك رائعةً، لكن الواقع أنهم يواجهون بعض المشكلات السابقة باستمرار. تحتاج بصفتك مصممًا إلى تنمية عادة المُطالَعة أو على الأقل الاطلاع على أعمال التصميم الجديدة، وعليك العمل في الوقت ذاته على تحسين مهاراتك باستمرار والإضافة لمعرض أعمالك. هذا إلى جانب حاجة التعامل مع العميل إلى الوضوح والتواصل السلس وتعزيز حسك الإبداعي، فإن تمكنت من تطبيق هذه الأمور البسيطة، فستتفوق في حياتك المهنية كمصمم جرافيك. ترجمة -وبتصرُّف- للمقال Common Problems Graphic Designers Face and How to Solve Them لكاتبه HR. اقرأ أيضًا مقدمة مفصلة إلى التصميم الجرافيكي أساسيات التصميم الجرافيكي - الجزء الأول: العناصر ما هو النّظام اللوني Color model لماذا يجب عليك أن تصبح مصمما متعدد التخصصات ولماذا لا يصلح تقسيم المصممين إلى تخصصات النسخة الكاملة لكتاب أساسيات تصميم الرسوميات

عليك الإلمام بحملات التسويق عبر البريد الإلكتروني، سواءً كنت تُحاول تحسين المبيعات، أو زيادة عملائك المحتملين، أو زيادة تفاعلك مع العملاء. ووفقًا لتقرير معهد التسويق المباشر Direct Marketing Institute لعام 2019؛ يوفّر التسويق عبر البريد الإلكتروني عائدًا على الاستثمار ROI بقيمة £42 لكلّ £1 (أو 52$ لكلّ 1$ يتم إنفاقه ابتداءً من 20-8-2021)، ولا يتعلّق الأمر بمجرّد زيادة الإيرادات، حيث تُحوّل الحملات التسويقيّة الناجحة العملاء المحتملين إلى عملاءَ دائمين، وتبني تمييزًا لعلامتك التجاريّة، وتزيد حركة مرور الموقع. سنتعرّف على ماهية التسويق عبر البريد الإلكتروني وما فوائده ونوازنه مع أساليب التسويق الأخرى. ما هو التسويق عبر البريد الإلكتروني التسويق عبر البريد الإلكتروني هو أحد أشكال التسويق المباشر، ويضم التفاعل مع العملاء والعملاء المحتملين بالبريد الإلكتروني، وعلى عكس أشكال التسويق الأخرى، فالتسويق عبر البريد الإلكترونيّ هو أسلوب اشتراكٍ، حيث إن عناوين البريد الإلكتروني في قائمة المستلمين هي لأشخاصٍ سجلوا اشتراكهم مسبقًا لتلقّي محتواك الترويجيّ، ولرسائل البريد الإلكترونيّ التسويقيّة هدفان رئيسيان هما: الترويج، أو الإبلاغ. وتهدف رسائل البريد الإلكترونيّ الإعلاميّة إلى تثقيف العملاء عن علامتك التجاريّة وعملها ومنتجاتك وخدماتك، وتتضمّن الآتي: رسائل الترحيب: تشكر المتلقّي على اشتراكه في قائمتك للمراسلة، وقد تكون جزءًا من سلسلة بريدٍ إلكترونيٍّ مصمّمةٍ لتحويل القارئ إلى عميلٍ. الرسائل الإخبارية: تُعلم المتلقّي بأحدث خدمات ومنتجات وأخبار وتحديثات شركتك. الرسائل المهمّة عن الشركة: تُعلم المتلقّي بالتغيرات المهمّة التي تطرأ على العلامة التجاريّة، مثل تغيير المدير التنفيذي أو الاستحواذ. رسائل الهدايا: تُقدّم للمتلقّي محتوًى مجانيًّا، مثل الكتب الإلكترونيّة ومقاطع الفيديو والمدوّنات الصوتيّة Podcasts. وتهدف رسائل البريد الإلكترونيّ الترويجيّة لبيع المنتجات والخدمات للعملاء، وتتضمّن: رسائل العروض: تُقدّم خصمًا للعملاء أو تُعلن عن العروض القادمة. رسائل الأحداث الخاصّة: تُقدّم صفقةً خاصّةً للعملاء احتفالًا بحدثٍ مميّزٍ، مثل الذكرى السنويّة لقائمة المراسلة. رسائل المنتجات أو الخدمات الجديدة: تُطلع العملاء على المنتجات الجديدة. رسائل التذكير بسلّات التسوّق المهملة: هي رسائل بريدٍ إلكترونيٍّ لتعزيز المبيعات، تُرسل للمتلقّي بعد إهماله عناصرَ سلة التسوّق لمدةٍ تتراوح بين 24-72 ساعةً، وتذكّره باستكمال عملية الشراء، حيث يستخدم كثيرٌ من المسوّقين نَوعَيّ الرسائل الإعلاميّة والترويجيّة في حملاتهم التسويقيّة عبر البريد الإلكترونيّ، وقد يكون للبريد الإلكترونيّ الواحد محتوًى إعلاميٌ وترويجيٌّ بذات الوقت، للعديد من رسائل البريد الإلكترونيّ الإخباريّة، مثلًا (محتوى إعلاميّ) زرّ دعوة لاتّخاذٍ إجراءٍ CTA ينقل العميل لمتجر الشركة (محتوى تسويقيّ). 13 ميزة للتسويق عبر البريد الإلكتروني لجأ المسوّقون إلى التسويق عبر البريد الإلكترونيّ لزيادة المبيعات منذ عام 1978 حين أرسل Gary Thuerk أول بريدٍ إلكترونيٍّ تسويقيٍّ لعملاء شركة Digital Equipment Corp، وحقّق أرباحًا تُقدّر بـ 13,000,000$ لمبيعات منتج الشركة الجديد، رغم مراسلته لنحو 400 شخصٍ فقط، إلا أنك لن تُحقّق كلّ حملات التسويق عبر البريد الإلكترونيّ هذا النوع من النجاح، لكن يبقى للتسويق عبر البريد الإلكترونيّ الكثير من الميّزات، إليك تاليًا 13 ميزةً، ومنها: 1. تكلفة الحملة منخفضة كلّف التسويق الشركات تاريخيًا مبالغَ ضخمةً، على اللوحات الإعلانيّة والإعلانات التلفزيونيّة والملصقات الجذّابة، ويُعَد التسويق عبر البريد الإلكترونيّ غير مكلفٍ، حيث لن تحتاج سوى حاسوبٍ وبعض الوقت ونظام تسويق حملاتٍ عبر البريد الإلكترونيّ، وبالتالي تتراوح تكلفته لشركةٍ متوسطةٍ بين 9$ و1000$ شهريًا، إذ إن إيرادات التسويق عبر البريد الإلكترونيّ كبيرةٌ بالنظر إلى التكلفة المنخفضة. 2. الوصول لجمهور متفاعل تتوجّه بعض أساليب التسويق، مثل التسويق عبر مواقع التواصل الاجتماعي والتسويق باللوحات الإعلانيّة إلى عملاءَ محتملين لا يعرفون علامتك التجاريّة؛ إذ إن التسويق عبر البريد الإلكترونيّ مختلفٌ عن هذه الأساليب، فعلى العملاء التسجيل عبر موقعك الإلكترونيّ لإضافتهم إلى قائمة المراسلة. وتعني موافقتهم المسبقة على تلقّي رسائلك التسويقيّة، أنهم جمهورٌ متفاعلٌ ومهتمٌ بشدّةٍ بعلامتك التجاريّة وبمنتجاتك وخدماتك، ولكن ما فائدة ذلك؟ من السهل تحويل الجمهور المتفاعل إلى عملاء، حيث لن ينضموا لقائمة المراسلة إن لم يكونوا عملاءَ متأهبين بالفعل، فالتسويق عبر البريد الإلكتروني فعّالٌ للغاية، فهو يستفيد من منصّةٍ يتفاعل الأشخاص معها، ووفقًا لموقع Statistica، يستخدم البريد الإلكترونيّ حوالي 4.1 بليون شخصٍ عالميًا، ويرغب المستهلكون بتلقّي رسائل بريدٍ إلكترونيٍّ تسويقيّةٍ، حيث يرغب 40% على الأقل من المستهلكين في الولايات المتّحدة بتلقّي رسائل بريدٍ إلكترونيٍّ من شركاتهم المفضّلة مرةً شهريًا على الأقل، فبالتالي يجعل ذلك من رسائل البريد الإلكترونيّ التسويقيّة استثمارًا تسويقيًّا ممتازًا، فهو يتفاعل مع مُشترين مُهيئين عبر منصّةٍ يرغبون بتلقّي محتوًى ترويجيٍّ عليها. 3. إنشاء حملات مخصصة تخيّل أنك وجدت أثناء تفقُّد بريدك الوارد رسالةً من شركةٍ أولى محتواها: "مرحبًا، لقد أطلقنا منتج شايٍ أسودٍ جديدٍ"، وفي الوقت ذاته تلقيت رسالةً ترويجيّةً من شركةٍ أخرى محتواها: "مرحبًا (اسمك)، لقد أطلقنا منتج شايٍ أسودٍ جديدٍ"؛ فمن أيّ الشركتين تُفضّل أن تشتري؟ وفقًا لدراسة أجرتها شركة Lifecycle Marketing على أكثر من 7 بليون رسالة بريدٍ إلكترونيٍّ، يزيد احتمال فتح الأشخاص لرسالة بريدٍ إلكترونيٍّ بنسبة 50% إن كان العنوان مخصّصًا، فقد كان معدّل فتح رسائل البريد الإلكترونيّ غير المخصّصة 14.1% بينما معدّل فتح الرسائل التي تحوي اسمًا 21.2%، والتسويق عبر البريد الإلكترونيّ مثاليٌ للتخصيص؛ بإمكانك توجيه رسائل البريد الإلكترونيّ التسويقيّة لعملائك بالاسم، وهو ما يُنشئ تواصلًا شخصيًا ويُشعر عملاءك بتقديرهم كأفرادٍ، وهذا التواصل يبنى الولاء على المدى البعيد وتعزيز ولاء الجمهور أمرٌ مهمٌ لازدهار شركتك، حيث يُمكن لزيادة المحافظة على العملاء بنسبة 5% أن تزيد أرباحك بنسبة قد تفوق 25%. 4. توليد العملاء المحتملين والاهتمام بهم في تقرير حالة المبيعات 2020-2021 لموقع pipedrive صنّف 51% من المشاركين توليد العملاء المحتملين مثل أكبر التحدّيات لمندوبي المبيعات، ومن المهم بطبيعة الحال البحث عن أساليبَ أخرى لتوليد العملاء المحتملين، بما فيها التسويق عبر البريد الإلكترونيّ؛ إذ يُولّد التسويق عبر البريد الإلكترونيّ عملاءَ محتملين رفيعي المستوى لعلامتك التجاريّة، حيث يُمكنك جذب العملاء المحتملين إلى قائمة المراسلة بمنحهم مغناطيس العملاء Lead Magnet؛ ومغناطيس العملاء هو شيءٌ تقدّمه للعميل المحتمل مقابل انضمامه لقائمة المراسلة، وهناك أشكالٌ عديدةٌ للمحتوى الذي يُمكن تقديمه كمغناطيسٍ للعملاء، مثل: كتاب إلكترونيّ. منتجات مجانيّة. نسخة تجريبيّة مجانيّة (إن كنت تبيع برنامجًا أو خدمةً معتمدةً على الإشراك). مستندات تقنيّة. استشارات أو نصائح مجانيّة. خصومات وعروض ترويجيّة. يُتيح لك التسويق عبر البريد الإلكترونيّ إمكانية جذب العملاء المحتملين بأساليبَ متعدّدةٍ، وذلك بفرزهم إلى مجموعاتٍ أو فئاتٍ سكانيّة؛ فالفرز هو تقسيم قائمة المراسلة إلى مجموعاتٍ وإرسال رسائل بريدٍ إلكترونيٍّ خاصّةٍ بكلّ مجموعةٍ، حيث يُمكنك مثلًا تقسيم قائمة المراسلة إلى 3 مجموعاتٍ من العملاء حسب الموقع، في كلٍّ من كندا والولايات المتحدة والمكسيك، ثم توجيه عروضٍ معتمدةٍ على موقع كلّ مجموعةٍ، إذ يُساعدك الفرز على الاهتمام بالعملاء بأسلوبٍ شخصيٍّ، فيزيد احتمال البيع لكلّ عميلٍ بسبب بنائك علاقةً أعمق معه. 5. زيادة الإيرادات بالدعوات لاتخاذ إجراء CTA لا يقتصر التسويق عبر البريد الإلكترونيّ على توليد العملاء المحتملين والاهتمام بهم، إذ يُعَد أيضًا منصّةً ممتازةً لإتمام المبيعات، كما تُعَد الدعوات لاتّخاذ إجراء CTA أفضل طريقةٍ لإتمام المبيعات باستخدام البريد الإلكترونيّ، إذ توجّه الدعوة لاتّخاذ إجراءٍ CTA جمهورك لاتّخاذ أولى خطوات إنهاء عملية الشراء؛ فالدعوات لاتّخاذ إجراءٍ هي الذروة أو القمة للبريد الإلكترونيّ، حيث يُبنى باقي المحتوى ليوجّه المتلقّي نحوها، وإن كنت تكتب رسالة بريدٍ إلكترونيٍّ عن الذكرى السنوية مثلًا، فابدأ بترحيبٍ، مثل: "مرحبًا (اسم)، ذكرى سنوية سعيدة!"، ثم عرض رسالة: "أردنا شكرك فقط، ومنحك تخفيضًا بنسبة 10% على طلبك القادم"، ثمّ الدعوة لاتّخاذ إجراء CTA: "انقر هنا للحصول على قسيمتك لتخفيض بنسبة 10%". كما يُمكنك تضمين الدعوات لاتّخاذ إجراءٍ في أساليب التسويق الأخرى، إلّا أن رسائل البريد الإلكترونيّ الخاصّة خيارٌ أساسيٌّ لإتمام المبيعات، فعلاقتك بالمتلقّي راسخةٌ، ويجد 59% من المسوّقين أن البريد الإلكترونيّ أكبر مصدرٍ عائدٍ على الاستثمار ROI لشركاتهم، وأن 4 من كلّ 5 مسوقين مستعدون للتخلّي عن أساليب التسويق عبر مواقع التواصل الاجتماعيّ مقابل الاحتفاظ بأساليب التسويق عبر البريد الإلكترونيّ إن أُجبروا على الاختيار بينهما. 6. بناء تمييز للعلامة التجارية ما أوّل علامةٍ تجاريةٍ تتبادر إلى ذهنك عند ذكر "مواقع التواصل الاجتماعيّ"؟ رغم وجود مئات منصّات التواصل الاجتماعيّ عبر الإنترنت، إلّا أنك فكّرت غالبًا بالعلامات التجاريّة سهلة التمييز، مثل فيسبوك Facebook وتويتر Twitter، فهذه روعة تمييز العلامة التجاريّة، حيث لن تحتاج إلى قراءة كلمة "Facebook" لتفكّر بالموقع، إذ إن التسويق عبر البريد الإلكترونيّ يُعَد أسلوبًا رائعًا لبناء تمييزٍ لعلامتك التجاريّة بين مُتلقي رسائلك الإلكترونيّة، وبإمكانك إنشاء هُويّةٍ لعلامتك التجاريّة، وأن تُحدّد هذه الهُويّة السمات الرئيسيّة لعلامتك التجاريّة مثل رسوماتٍ وأساليبَ وأنماطٍ خاصّةٍ، مما يُسهّل تمييزها، وعندما يتذكّر العميل علامتك التجاريّة، سيميل لتفضيلها عن المنافسين. كيف تبني تمييزًا لعلامتك التجاريّة في التسويق عبر البريد الإلكترونيّ؟ بإمكانك استخدام الآتي: مجموعةٌ محدّدةٌ من الألوان والخطوط وعناصر التصميم (مثل رؤوس الصفحات) في كلّ الرسائل. مجموعة قوالبَ تُلائم الرسائل المرئيّة لعلامتك التجاريّة. عنوانٌ بأسلوبٍ مناسبٍ، مثل "مرحبًا (اسم)، أردنا اطلاعك على..." أو "(اسم):.......". تصميمٌ متناغمٌ مع موقعك الإلكترونيّ أو العلامة التجاريّة لمنتجاتك. توقيع بريدٍ إلكترونيٍّ مخصّصٍ. 7. بإمكانك استخدام اختبارات A/B لتحسين التسويق تُوضّح لك البيانات ما يُلائم جمهورك وما عليك تجنّبه، وتحسّن الحملات التسويقيّة المعتمدة على البيانات وصول عروضك الترويجيّة إلى الجمهور إلى الحدّ الأقصى، حيث يُعَدّ التسويق عبر البريد الإلكترونيّ أسلوبًا مُعتمدًا على البيانات، حيث يسمح بتقييم نجاح رسائلك الإلكترونيّة باختبارات A/B؛ كما تُتيح اختبارات A/B إمكانية تقييم نجاح رسالة بريدٍ إلكترونيٍّ تحوي أسلوبًا جديدًا بالنسبة لرسالةٍ سابقةٍ من نفس الحملة، وتُستخدم اختبارات A/B أساسًا لتحديد فعالية أسلوبٍ ترويجيٍّ جديدٍ مع جمهورك، قبل إدخاله لخططك المعتادة في التسويق عبر البريد الإلكترونيّ. واختبار A/B ممتازٌ للتحقُّق من: قالب جديد. دعوة جديدة لاتّخاذ إجراء. تصميم جديد. أساليب جديدة للكتابة. إعادة التسمية. عناوين جديدة. التخصيص. يُعَدّ اختبار A/B ميزةً للتسويق عبر البريد الإلكترونيّ، لأنّه يُحدّد استراتيجياتٍ مجرّبةً وصحيحةً، ويُحسّن اختبار A/B أيضًا العائد على الاستثمار ROI، حيث تُظهر الأبحاث أنّ للعلامات التجاريّة التي تستخدم اختبار A/B لديها عائد استثمار يقدّر بـ 48$ لكلّ 1$، وهو أعلى من متوسّط العائد على الاستثمار الذي يقدّر بـ 42$ لكل 1$. 8. جمع البيانات والتقييمات بالاستبيانات يُعَدّ التسويق عبر البريد الإلكترونيّ وسيلةً ممتازةً لجمع البيانات، حيث يُمكنك إرسال استبيانٍ لأكثر العملاء ولاءً وتحصل بالتالي على بياناتٍ قيّمةٍ، مثل: لماذا يفضّلون علامتك التجاريّة أو منتجاتك؟ لماذا انضموا لقائمتك التسويقيّة للمراسلة؟ مَن هم؟ (العمر والجنس والبلد ومستوى الدخل والمهنة والاهتمامات). بعد أن تجمع هذه البيانات، حدّد وفقها جمهورك الهدف وصمّم حملاتك التسويقيّة القادمة بما يُلائم هذا الجمهور. 9. إبلاغ العملاء يُساعدك التسويق عبر البريد الإلكترونيّ على إبلاغ عملائك بالأحداث الطارئة، حيث ينقل المعلومات المهمّة بسرعةٍ إلى عملائك مباشرةً، وهو ما يجعله مثاليًا لإرسال المعلومات عن تأخيراتٍ محتملةٍ أو الرسائل عند الأزمات مثل توقُّف موقعك الإلكترونيّ، كما تُعزّز رسائل البريد الإلكترونيّ الإعلاميّة علاقتك مع العملاء، فهي تُمكنّك من الربط بين علامتك التجاريّة وعملك الخيّر، وإن اشتركت علامتك التجاريّة في حملة جمع تبرعاتٍ مع مؤسسةٍ خيريّةٍ محليّةٍ مثلًا وتبرعت بمبلغ 34000$، فيُمكنك مشاركة ذلك برسالةٍ إخباريّةٍ، إذ يربط مشتركو قائمة المراسلة علامتك التجاريّة بعملك الخيّر. 10. تحسين حركة مرور الموقع يبدو التسويق عبر البريد الإلكترونيّ وسيلةً مستقلّةً بذاتها، إلّا أنه ليس كذلك تمامًا، حيث بإمكانك استخدام رسائل البريد الإلكترونيّ التسويقية لاستقطاب حركة مرورٍ إلى وسائلك التسويقيّة الأخرى بما فيها موقعك الإلكتروني؛ إذ تُحسّن زيادة حركة مرور الموقع من أرباحك، فكلّما زاد تفاعل عملائك المحتملين مع المحتوى، زادت فرصة إتمام عملية البيع، ولإيصال القرّاء إلى موقعك الإلكترونيّ بالرسائل الإلكترونيّة، جرّب: إضافة الرابط مباشرةً إلى محتوى رسالة البريد الإلكترونيّ. إضافة قسمٍ للمقالات المميّزة، حيث تضيف روابط مقالاتٍ ذات صلةٍ. إضافة الروابط إلى الصفحات الأساسيّة (مثل، أقسام الأسئلة الشائعة والتعريف والتواصل) في الهامش السفلي للبريد الإلكترونيّ. إضافة رابطٍ لكلّ منتجٍ مذكورٍ. كلّما كانت الروابط جيدةً، زادت المبيعات. 11. الحملات سهلة الإدارة من السهل إدارة حملة تسويقٍ عبر البريد الإلكترونيّ، حيث يُمكنك استخدام نظامٍ تلقائيٍّ لتخطيط وتنفيذ وتقييم حملتك؛ بوجود العديد من أدوات أتمتة التسويق عبر البريد الإلكترونيّ، بإمكانك إنشاء رسائل البريد الإلكترونيّ وفق قوالبَ وإجراء اختبارٍ A/B وإرسال الرسائل الإلكترونيّة، ثم مشاهدة النتائج بالوقت الفعلي، وتسمح برامج مثل Mailigen أيضًا بتقسيم قائمة المشتركين بسهولةٍ وفرزهم ضِمن مجموعاتٍ وتوجيه رسائلَ بريدٍ إلكترونيٍّ مصمّمةٍ خصيصًا لكلّ مجموعةٍ، وتُتيح لك هذه الميزة القدرة على التفعيل التلقائيّ للتسويق دون التضحية بالجودة. 12. التأثير الفوري يستغرق التخطيط لحملة لوحاتٍ إعلانيّةٍ أشهرًا بين تصميم اللوحة وطباعتها وعرضها، وإن حدث أمرٌ مهمٌ خلال هذه الفترة، لن تتمكّن من تعديلها فقد فات الأوان، ولا ينطبق هذا الأمر على التسويق عبر البريد الإلكترونيّ، حيث بإمكانك تعديل الرسائل مباشرةً بعدّة نقراتٍ، يسمح ذلك بتخصيص رسائل البريد الإلكترونيّ في الأحداث المهمّة، ما يعمّق علاقتك مع عملائك ويجنّبك الإعلانات الفارغة، وإن كانت علامتك التجاريّة تبيع الأدوات المدرسيّة لأولياء أمور أطفال المدراس الابتدائيّة وعلمت أن معظم العملاء يعتمدون على التعليم عن بعد، بإمكانك تغيير العروض في رسائلك الترويجيّة للتركيز على أدوات التعلُّم عن بُعد فقط. 13. النتائج سهلة القياس باستخدام أدواتٍ متوفّرةٍ كثيرًا، بإمكانك معرفة تفاعل المشتركين مع رسائلك الإلكترونيّة بتتبُّع البريد الإلكترونيّ، ويمنحك ذلك معلوماتٍ أساسيّةً عن نجاح رسائلك الإلكترونيّة، ويُمكنك استثمار تلك المعلومات لتحسين الحملات المستقبليّة. في التسويق عبر البريد الإلكتروني يُمكنك معرفة: معدّل فتح الرسائل: عدد المشتركين الذين فتحوا بريدك الإلكترونيّ. نسبة النقر إلى الظهور: عدد القرّاء الذين نقروا على روابطَ البريد الإلكترونيّ. معدّل تحويل المبيعات: النسبة المئويّة للمشترين بعد النقر على رسالة البريد الإلكترونيّ. معدّل نمو القائمة: معدّل نمو قائمة المشتركين. معدّل إعادة تحويل البريد الإلكترونيّ: معدّل المشتركين الذين أعادوا تحويل بريدك الإلكترونيّ للآخرين. كيف توازن بين التسويق عبر البريد الإلكتروني وأساليب التسويق الأخرى للتسويق عبر البريد الإلكتروني أعلى عائد استثمارٍ بالنسبة لكلّ وسائل التسويق الرقميّ الأخرى، حيث يُعطي عائدًا على الاستثمار يتجاوز 3500%، ولكن هذه ليست الطريقة الوحيدة للموازنة بين التسويق عبر البريد الإلكترونيّ وأساليب التسويق الرقميّ الأخرى، فمن المتوقّع أن يبلغ عدد مستخدمي البريد الإلكترونيّ 4.5 بليون مستخدمٍ بحلول عام 2025، مع ما يُقدّر بـ 4.4 بليون مستخدمٍ لوسائل التواصل الاجتماعيّ، إذ يزداد عدد مستخدمي البريد الإلكترونيّ بسرعةٍ بمعدّل 3% سنويًا؛ لذا إن كنت تبحث عن وسيلة تسويقٍ ناجحةٍ مستقبلًا، اختر التسويق عبر البريد الإلكترونيّ. خاتمة تُعَدّ حملة التسويق عبر البريد الإلكترونيّ استثمارًا ممتازًا لعملك، إذ يُحسّن التسويق عبر البريد الإلكتروني أرباحك، ويُساعدك على التواصل مع العملاء مباشرةً، فالبريد الإلكترونيّ يُعَد وسيلةً متعدّدة الاستخدامات في الحملات التسويقيّة، والتي تسمح بتخصيص الرسائل وتعديلها في الأحداث المهمّة، وتحسّن حملاتك بفضل اختبار A/B. خلاصة القول، إن التسويق عبر البريد الإلكترونيّ يُؤمّن عائدًا رائعًا على الاستثمار، وهو سهل التطبيق بفضل برامج التسويق عبر البريد الإلكترونيّ؛ المسألة فقط في العثور على البرنامج المناسب. ترجمة -وبتصرُّف- للمقال Top 13 benefits of using email marketing. اقرأ أيضًا كيف تبدأ التسويق عبر البريد الإلكتروني بنجاح كيف تخطط لإنشاء حملتك التسويقية الأولى عبر البريد الإلكتروني التسويق بالبريد الإلكتروني وأهم الخطوات اللازمة لتنفيذ حملة تسويقية ناجحة

بفرض أنّك تُريد شراء حذاءٍ جديدٍ وأمامك خياران، كيف ستختار إن كان لهما الشكل والسعر ذاته؟ فبما أن الأحذية متطابقةٌ عمليًا، فقد بقي أمرٌ واحدٌ يُميّزهما وهو عرض القيمة Value Proposition. لقد سُوّق أحد الحذائين على أنه مصنوعٌ محليًّا من جلدٍ صديقٍ للبيئة، أمّا الآخر فتصميمه مريحٌ ويُمكّنك من ارتدائه ليوم ٍ كاملٍ دون ألمٍ؛ بطبيعة الحال، ستختار حذاءً يحقّق المعايير التي تبحث عنها، حيث لا يتعلّق الأمر برفع السعر مقابل الجودة فقط، إنما بالقيمة المتوقّعة أيضّا، ووفقًا لموقع نيلسِن Nielsen، يفشل إطلاق المنتجات في أكثر من 80% من الحالات، وجوهر المشكلة إمّا أن تجربة المنتج مخيبةٌ للأمل، أو أن عرض القيمة ضعيفٌ. سيعرّفك هذا المقال على ماهية عرض القيمة Value Proposition وكيف تنشئه باحترافيّة، حيث لن تحتاج إلى أدواتٍ غريبة، ولا لتعمّقٍ في مجال التسويق، لكنك ستجمع بيانات مبيعاتك الموجودة وتحليلاتك ثمّ تحوّلها إلى عرض قيمةٍ Value Proposition. تعريف عرض القيمة Value Proposition عرض القيمة ببساطةٍ هو أسلوبٌ تسويقيُّ يُحرّك حاجةً لدى العملاء بإبرازه الصفات الفريدة لمنتجٍ في السوق، أي هو أسلوب إيصال القيمة للعملاء، فلماذا قد تحتاج إلى عرض القيمة؟ يُعَد إنشاء القيمة بحدّ ذاته ركيزةً أساسيّةً للمبيعات، وستتمكّن من إنشاء عرضك للقيمة بعد تحديد قِيَمك الأساسيّة؛ إذ إن عرض القيمة أكثر من مجرّد عبارةٍ جذّابةٍ، فهو جزءٌ لا يتجزّأ من علامتك التجاريّة ككل، والهدف هو ضمان تجربةٍ مُرضيةٍ للمستهلك النهائي؛ ومع ذلك، من الرائج الآن بين الشركات إدراج عرض القيمة في الجزء المُثبّت من صفحات مواقعهم الإلكترونيّة، وبهذه الطريقة يرى العميل عرض علامتك التجاريّة مباشرةً. إليك مثال عن عرض القيمة Value Proposition: "منتجاتٌ صديقةٌ للبيئة، مع سرعةٍ في التوصيل، أكثر من 2000 خيارٍ لبضائعَ عالية الجودة خاليةً من البلاستيك بسعرٍ مخفّضٍ". يُعالج هذا العرض الانتقادات المُحتملة جيّدًا، بالإضافة لاحتياجات العملاء المتوقعة، مثل: أريد منتجاتٍ صديقةً للبيئة. أريد سرعةً في التوصيل. أفضّل وجود خياراتٍ أوسع. تهمّني التكلفة. يجبُ التمييز بين عرض القيمة Value Proposition والميزة التنافسيّة Unique Selling Point USP، حيث تُستخدم الميزة التنافسيّة USP في الخطط الداخليّة وتُحدّد الاختلافات عن المنافسين القريبين، بينما يُعَدّ عرض القيمة إيضاحًا خارجيًا يُحدّد كيف يستفيد العملاء من العروض الفريدة. ما الذي يجعل عرض القيمة مميزا؟ يمنح عرض القيمة المميّز العميل سببًا واضحًا ليختارك. ومع أن البساطة هي الأساس، إلا أنك تحتاج جهدًا هائلًا لإنشاء عرض قيمةٍ مناسبٍ، لأنه يُؤثّر على مقاييس المبيعات، لذا حاول ألّا تنساق وراء أول فكرةٍ تأتي لذهنك، وإليك بعض الملاحظات: 1. لا تعرض المنتج بحد ذاته إنما الفائدة المرجوة منه ما المشكلة الأساسيّة التي يحلّها منتجك؟ ابدأ بالعصف الذهني هنا، وتساءل عمّا يُميّز منتجك أو خدمتك، وفكّر بطريقةٍ بسيطةٍ تُوصل تلك القيمة للعميل، استخدم القالب التالي إن لم تصل لنتيجةٍ: "نحلّ (المشكلة) بتأمين (الميزة)، لمساعدة (الجمهور) على تحقيق (هدف الجمهور)". فلنفترض أنك تبيع قمصانَ مصنوعةً من موادَّ عضويةٍ بأيدٍ محليّةٍ، يُمكن أن يكون الإعلان، كالتالي: "نبيع قمصانَ عضويةً مصنوعةً بأيدٍ محليةٍ، تمنح هذه القمصان المشترين مظهرًا رائعًا، بعد أن تسوّقوا بوعيٍ بيئيٍ". ثم فكّر مثل العميل، وتساءل ماذا تريد الفئة المستهدفة؟ قد يُفكّر العميل، على أساس: "أحتاج إلى قميصٍ مريحٍ صُنع بأخلاقيّةٍ بيئيّةٍ، من شركةٍ موثوقةٍ". حيث ستكون نقطة البدء لعرض القيمة الخاص بك: "نقدّم قمصانَ مريحةً، محلية الصنع، ستشعر أثناء ارتدائها ...". أكمل الجملة بوصف يناسب عرض علامتك التجاريّة، وبعد أن تصل لعرض قيمة، أعد صياغته إلى جملةٍ بسيطةٍ سهلة التذكّر. مثلًا، تستخدم علامة Econic العبارة الوصفيّة الموجزة: "مستدام وأخلاقي وكندي". 2. تميز عن المنافسين لعلّ لك بعض المنافسين الذين يحاولون مواكبتك، فكيف تتميّز عن الآخرين؟ يعود نشاطك التجاريّ لامتلاكك وصفةً سريّةً لمنتجاتٍ لا يملكها الآخرون، وقد حان الوقت للعمل على عرضك المميّز، حيث إن عرض القيمة ليس مجرّد جملةٍ تُعطي العملاء سببًا لشراء منتجك، إنّما يشرح حاجتهم لشرائه منك رغم وجود منافسين، فكيف تُنشئ عرض قيمةٍ يُميّزك عن الآخرين؟ قبل أن تتسرّع بتدريبٍ صارمٍ عن الكتابة الإعلانيّة، عُد خطوةً للوراء، هل لعلامتك التجاريّة صوتٌ فريد؟ إن كنت تملك دليلًا لعلامتك التجاريّة، فذلك رائع، وإن لم تملك واحدًا فقد حان الوقت لإنشاء دليلك. بعد أن تُنشئ شخصيةً وصوتًا لعرضك، حدّد الأمور الأساسية التي تميّز منتجك عن منتجات المنافسين. وهنا عليك التركيز على ثلاثة محاور: التجربة التي تمنحها للعملاء. ميّزات منتجك. ميّزات منتجك عن منتجات الآخرين. وبعد أن تُحدّد هذه العوامل، اكتب ما أمكنك من الجمل التسويقيّة لعرض القيمة، ثمّ وازن هذه الجمل مع المُستخدمة في عروض القيمة لمنافسيك؛ فهل ميّزتك تلك الجمل عنهم؟ إن لم تفعل، عُد إلى مسوداتك وحاول من جديد حتى تصل إلى الجملة المرجوّة، وستكون الجملة المثاليّة منتميةً إلى علامتك التجاريّة بأصالةٍ، ومُميّزةً لها، كما تُميّز جملة "نصنع الجودة بإتقان" شركة Wendy's. 3. استخدم لغة تلائم جمهورك المستهدف تَمنح لغة عرض القيمة عملاءك فكرةً واضحةً عن علامتك التجاريّة وعن قِيَمك؛ لذا خذ عرض القيمة لمتجر الألبسة Kewe Collective مثل: "صُنع بوعيٍ، واُختيرت المصادر بمسؤوليّةٍ". رغم قلّة الكلمات في هذا العرض، إلّا أن كلًا منها يُوضّح قيمةً أساسيةً للمتجر: تُشير كلمة "صُنع" إلى أنهم يعملون باهتمامٍ أكثر. تُشير كلمة "بوعي" إلى أنهم صمّموا عملية إنتاجٍ موافقةٍ لقِيَمهم. تُشير كلمة "المصادر" إلى أنهم بحثوا عبر سلسلة التوريد بأكملها، ثم انتقوا موادهم الأوليّة وفقًا لذلك. تُشير كلمة "بمسؤوليّة" إلى إدراكهم لقوّتهم كتجارةٍ ضخمةٍ وعملهم من أجل الصالح العام. تخيّل استبدال متجر Kewe Collective كلمات عرضهم بمرادفات، وتغييرهم عرض القيمة إلى "صُنع بانتباهٍ، واُختيرت المصادر بحذرٍ". هل سيُغير ذلك انطباعك عن العلامة التجاريّة؟ الفكرة هنا أن اختيارك للكلمات يرسم صورة علامتك التجاريّة، لذا اخترها بحكمةٍ. 4. حافظ على الوضوح وسهولة التذكر أيّ الجملتين التاليتين أسهل بالتذكّر: "أرخص الأدوات، دومًا" أم "هنا في متجر Mike للأدوات، نبيعك أرخص أدوات العمل في كلّ مرّةٍ". لعرضيّ القيمة السابقين نفس المعنى، إلا أن أحدهما مكونٌ من ثلاث كلماتٍ فقط، بينما الآخر من 12 كلمةً، حيث إنّ الجملة الأولى أسرع بالنطق، وهو ما يزيد من احتمالية تذكّرها بدقّةٍ، لأن لذاكرتنا قصيرة الأمد قدرةً محدودةً تحتفظ بما بين 5 و9 عناصرَ فقط في المرّة الواحدة، لهذا ركّز أثناء تصميمك لعرض القيمة على الجمل القصيرة، سهلة النطق والتذكّر. ما يعني الحدّ من الآتي: الصفات، اكتب مثلًا "أدوات رخيصة" بدلًا من كتابة "أدوات منخفضة السعر، معقولة التكلفة". المبالغة، اكتب مثلًا "أدوات رخيصة" بدلًا من كتابة "أرخص الأدوات في العالم". النفي المضاعف، اكتب مثلًا "لدينا أرخص الأدوات" بدلًا من كتابة "لا يُقدّم أيّ متجرٍ آخر عروضًا أفضل من عروضنا". مثاليًا، يجب أن تكون لغتك واضحةً كفايةً ليفهمها شخصٌ مستواه الدراسي لا يتجاوز الصف السادس الابتدائي، مثل اللغة التي تستخدمها سلسلة مطاعم KFC "الدجاج المقلي المشهور عالميًا". كيف تستفيد من بيانات المبيعات في إنشاء عرض القيمة؟ تعتمد العلامات التجاريّة ذات عروض القيمة المُؤثّرة على بيانات المبيعات لكتابتها، حيث تُخبرك تلك البيانات بما ينوي عملاؤك شراؤه. إليك تاليًا بعض الأساليب لتطوير عرض القيمة بالاعتماد على بيانات المبيعات: 1. حدد عروض المبيعات الرائجة واستفد منها قد يختلف تصوّرك لعلامتك التجاريّة اختلافًا جذريًّا عمّا يتصوّره عملاؤك، وتعتقد أنهم يقدّرون قيمةً معيّنةً، بينما يقدّرون قيمةً أخرى تمامًا، وهنا يأتي دور عروض المبيعات الرائجة Sales Trends. تُظهر عروض المبيعات الرائجة ما تفضله الغالبية العظمى من قاعدة العملاء، حيث يشتري العملاء المزيد من المنتجات ذات الميّزات المرغوبة، وعددًا أقل من المنتجات الأخرى، ولتحديد الميّزات الأساسيّة لعلامتك التجاريّة، رتّب منتجاتك من الأكثر إلى الأقل مبيعًا، ثم ابحث عن عواملَ مشتركةٍ بين هذه المنتجات، حيث قد تُلاحظ مثلًا أن مبيعات المنتجات محلية الصنع أفضل، أو أن مبيعات المنتجات ذات الشحن المجانيّ أسرع، وبعد أن تضع قائمةً بالميّزات المشتركة المفضّلة لجمهورك، قيّم مبيعات هذه المنتجات على المدى الطويل، وستُحدّد بذلك تفضيل عملائك لميّزاتٍ معيّنةٍ دوريًا، أو على مدار العام، كأن تعرف إن كان عملاؤك يشترون المنتجات ضِمن علب هدايا على مدار العام، أو في شهر ديسمبر فقط؛ وبعد أن تجمع تلك البيانات، استفد منها لإنشاء عرض قيمةٍ مناسبٍ للميّزات المفضّلة لعملائك. 2. حدد نقاط الألم للعملاء Pain Points يُقصد بنقاط الألم المشاكل التي تُواجه العملاء ويرغبون بحلّها، وتتنوّع بين إزعاجاتٍ بسيطةٍ مثل "تأخّر شحن الطلب"، أو مشاكل كبيرةٍ مثل "جودة المنتج منخفضة"، حيث إن الانتباه لنقاط ألم عملائك يُعَد خطوةً مهمةً جدًّا في إنشاء عرض القيمة، حيث إنّ هذه المشاكل مهمةٌ للعميل بما يكفي ليحاول حلّها، وبطبيعة الحال، كلّما كانت مشكلة العميل أكبر، اهتم بها أكثر. ولتحديد الأهم لعملائك، افرز شكاوى العملاء وتعليقاتهم بالإضافة للمراجعات السلبيّة، ثم حدّد نقاط الألم المشتركة في تقييماتهم. لسوء الحظ، لن تتمكّن من إيجاد حلولٍ لكلّ مشاكل العملاء، فالعديد منها خارجٌ عن إرادتك، لذا ركّز على المشاكل القابلة للحلّ عمليًا، ثم أعِد صياغة عرض القيمة بما يُوافقها. 3. أنشئ دليلا مفصلا لشخصيات المشترين دليل شخصية المُشتري Buyer persona هو تمثيلٌ وهميٌ للخصائص السكانيّة لجمهورك المُستهدف إضافةً لقِيَمهم وأذواقهم وسلوكهم كعملاء، ويعرض دليل شخصيّة المشتري القِيَم المهمّة للعملاء لإنشاء عرض القيمة وفقها، بعد أن تُكوّن فهمًا أفضل لدوافعهم ومحفّزاتهم. لإنشاء دليل شخصية المشتري، اجمع كلّ الأبحاث عن عملائك في السوق ورتّب العملاء في مجموعات وفق ميّزاتٍ أساسيّةٍ، مثل: العمر. المدينة. البلد. الجنس. مستوى التعليم. مستوى الدخل. القِيَم. الاهتمامات. الحالة الاجتماعية (أعزب أو متزوج ولديه أطفال أو مطلّق وما إلى ذلك..). إن لم تملك بياناتٍ كافيةً لإحدى هذه الفئات، تخطّاها ببساطة، فكل ما تبحث عنه هو أنماط عامّة، ولن تحتاج إلى بياناتٍ مفصلةٍ عن كلّ عميلٍ، وبعد أن تقسّم جمهورك المستهدف حسب الأنماط السكانيّة، ابحث عن التوجّهات الرائجة والقِيَم لكلّ فئةٍ. قد تُلاحظ مثًلا أن الرجال الذين تتراوح أعمارهم بين 30 و45 عامًا يُفضلون المنتجات الآمنة للأطفال، وأن النساء بين 50 و55 عامًا تُفضلن المنتجات سريعة الشحن. للاستفادة من هذه البيانات، وازنها مع عرضك الحالي وتساءل: هل العرض متوافقٌ مع اهتمامات عملائنا؟ فإن لم يكن كذلك، عدّله حسب الحاجة. 4. استخدم التوقعات للتنبؤ بالتوجهات المستقبلية إن تعلّمنا أيّ درسٍ من رواج لعبة Fidget Spinner عام 2017، فهو أن التوجهات الرائجة Trends لا تدوم للأبد، وكذلك الأمر بالنسبة لقِيَم عملائك، لأن أولويات الناس واهتماماتهم ونشاطاتهم تختلف مع الوقت، ولتحديد التوجهات المستقبليّة Future Trends واستخدامها في عرض القيمة للمبيعات، حدّد بين 5 و7 احتمالاتٍ مُمكنةٍ مثل الشحن المجانيّ، ثم حدّد المنتجات المناسبة لكلّ توجّهٍ وحلّل تأثيره باستخدام بيانات المبيعات، وبعد أن تجمع هذه البيانات، رتّب المواضيع الرائجة من الأكثر إلى الأقل تأثيرًا، واختر المفيدة منها واستخدمها في عرض القيمة ليُلائم الموضوع، فإن لم تحصل على بيانات المبيعات، حدّد المواضيع الرائجة من خلال بحث السوق، كما بإمكانك إجراء أبحاث السوق باستخدام التقارير الصناعيّة، والأدوات مثل Google Trends، أو بطلبك من مجموعةٍ من العملاء تقييم درجة اهتمامهم ببعض المواضيع الرائجة من الأكثر للأقل، إذ لا حدود لأساليب جمع البيانات القيّمة، والمهم هو استخلاص رؤيةٍ قيّمةٍ من تلك البيانات لتستخدمها أثناء تنفيذ خططك المستقبليّة. ملاحظات لإنشاء عرض قيمة تسويقي فريد عليك التفكير بأكثر من مجرّد البيانات ليكون عرض القيمة جذّابًا، وإليك تاليًا بعض العوامل لمراعاتها: 1. إجراء أبحاث عن منافسيك وباقي السوق يُحسّن إجراء الأبحاث عن السوق جودة عرضك للقيمة، ويُوضح لك الثغرات الحاليّة التي بإمكانك استغلالها، ولإجراء بحثٍ تسويقيٍ عن المنافسين، حدّد بدايةً 2 إلى 5 من أقرب المنافسين، ثم حلّل عروضهم التسويقيّة باستخدام أداة SWOT التحليليّة. يقيّم تحليل SWOT منافسك من خلال 4 نواحٍ: نقاط القوة Strengths: وهي مزايا منافسك في السوق. نقاط الضعف Weaknesses: وهي المجالات التي يفشل فيها منافسك. الفرص Opportunities: وهي الفرص التي يُمكن لمنافسك استثمارها ليزدهر عمله. المخاطر Threats: وهي العوامل المهدّدة لعمل منافسك. بعد أن تحلّل وفق SWOT، حدّد العوامل المفيدة لتسويق عرضك للقيمة، وأضفها إليه ليصبح أكثر تنافسيةً، وإن لاحظت مثلًا أن خدمة العملاء سيئةٌ لدى منافسك، فغيّر عرض القيمة لعلامتك التجاريّة من "جوارب مميزة بأسعارٍ مميّزة" إلى "جوارب مقبولة السعر من أشخاصٍ مهتمين". 2. اختبر عرض القيمة عبر وسائل الإعلام اختبار أ/ب A/B هو صيغة بحثٍ تسمح بموازنة تأثير عرض قيمةٍ جديد بعرضك الحالي، حيث يُحسّن إجراء اختبار A/B من عرضك، ويمنحك فكرةً عن فعاليته قبل إدراجه نهائيًّا ضمن موقعك وحساباتك على مواقع التواصل الاجتماعي وعلامتك التجاريّة، ولإجراء اختبار A/B، انشر محتويين متطابقين مع عرض قيمةٍ مختلفةٍ لكلّ منهما، إمّا على موقعك أو بالتسويق عبر البريد الإلكتروني، أو وسائل التواصل الاجتماعي أو تسويق المنتجات، ثمّ وازن تفاعل عملائك مع كلّ منهما بتحديد أيّ العبارتين رفعت نسبة النقر إلى الظهور ومعدل تحويل المبيعات وحصدت تقييماتٍ إيجابيةً أكثر؛ وبعد إجرائك لاختبار A/B، اختر عرض القيمة المؤثر. 3. اختر عرض قيمة منفصل لكل نوع من منتجاتك أو خدماتك إن كنت تقدّم مجموعةً متنوعةً من المنتجات والخدمات، فاختر عروض قيمة متنوعة، فقد تكون جملة "أرخص الأدوات" مناسبة لمجموعة مثاقب، لكنها غير مناسبة لأحذية عمل. كيف تنشئ عدة عروض قيمة؟ لإنشاء عدّة عروض قيمةٍ متناسقةٍ فيما بينها، حدّد النقاط المشتركة التي يجب أن تؤكدها كلّ العروض، مثل "تكلفة مقبولة"، ثم اكتب قائمةً بالنقاط الأساسيّة لكلّ عرض قيمةٍ بمفرده، واكتب بعض الأمثلة ووازن بينها. وللحفاظ على تناسق الجمل، حافظ على تشابه التنسيق والشكل والأنماط بينها، حيث يُمكن مثلًا لمتجر معدّاتٍ أن يستخدم العروض التالية بحسب منتجاته "أرخص الأدوات، دومًا" لمجموعة الأدوات، و"أرخص الأحذية، دومًا" لمجموعة الأحذية، و"أرخص الحافظات، دومًا" لمجموعة حافظات التخزين. 4. تأكد من أن شركتك تفهم عرض القيمة بتباين فهم كلّ عضو في الشركة لعرض القيمة، سيتباين فهم العملاء له وسيبدو غير متّسقٍ، لأن كلّ عضوٍ يعكسه بصورةٍ مختلفةٍ، لذا تأكّد من فهم الجميع لعرض القيمة كرؤيةٍ ومعنًى. وللتأكّد بأن الجميع يفهمون عرض القيمة تمامًا، أدخله ضمن عملية إدارة المبيعات، ويمكنك فعل ذلك عن طريق: عقد اجتماعٍ تعريفيٍ للفريق. إدخاله ضمن أدوات تهيئة الموظّفين الجدد. إدخاله ضمن دليل العلامة التجاريّة. أدخله في نظام إدارة علاقات العملاء CRM، والشبكة الداخليّة للشركة. خاتمة يروي عرض القيمة قصّةًً عن علامتك التجاريّّة، تشرح مَن أنت وماذا تُقدّّم ومَن تُمثّل، ولإنشاء عرض قيمةٍ مقنعٍ، عليك أن تعرض قيمة منتجك، وتميّز نفسك عن المنافسين، وتختار لغةً مناسبةً وواضحةً، حيث يُمكنك الوصول إلى عرض القيمة المثالي بالاعتماد على بيانات مبيعاتك وموازنتها بأبحاث السوق والتجارب الداخليّة؛ وخلاصة القول هنا هي أن إنشاء عرض القيمة المثالي معتمدٌ على اختيار جملةٍ تعكس ما تقدّمه للعملاء، لذا اختره بحكمةٍ. ترجمة -وبتصرُّف- للمقال How to use sales and analytics to create a great value proposition in marketing. اقرأ أيضًا مقاييس المبيعات الأساسية التي يجب تتبعها 8 خطوات لبناء استراتيجية مبيعات ناجحة تنشيط المبيعات والترويج لها اعتماد المنتج وكيف يمكن تحسينه للزيادة من المبيعات

تُعَد الاستراحات المنتظمة من العمل أمرًا مهمًا، إلا أن إجازات العاملين قد تُهدّد الشركات في مجاليّ التسويق والمبيعات، فهل ستكون نهاية مبيعاتك مأساويّةً؟ وما مصير الإيرادات والتدفّق النقديّ؟ ومن سيُدير الحملات أثناء غياب أعضاء الفريق؟ ستصل تلك المخاوف إلى أعضاء فريقك، وبالتالي سيتردّدون في أخذهم لإجازةٍ أو في الابتعاد عن العمل تمامًا خلالها، حيث كشف تقرير التوازن بين العمل والحياة الخاص بشركة Priceline أن 21% فقط من الأمريكيين أخذوا إجازاتهم المدفوعة كاملةً خلال عام 2020، بينما ندم أكثر من النصف على عدم أخذها كاملةً، ووجدت نسخةٌ سابقةٌ من هذا التقرير أن 29% من الأمريكيين مستعدون للعمل ضِمن الإجازة، ويشعر 38% بالضغط لوجوب تفقُّد البريد الإلكتروني خلالها، كما يعمل 15% لفترةٍ من كلّ إجازةٍ، مع ذلك تُحقُّق الإجازات غايتها في تشجيع الموظّفين على الراحة؛ وفقًا لشون أكور Shawn Achor في كتابه ميزة السعادة The Happiness Advantage: فالإجازات مفيدةٌ سواءً للشركة أو لأعضاء الفريق، إلّا أنّ المحافظة على تحقيق أهداف المبيعات، وإنتاجيّة الفريق تحتاج إلى التخطيط بحكمةٍ. وهنا بعض الأساليب والأدوات للحفاظ على قوّة المبيعات على مدار العام. كيف تتأكد من استمرار مبيعاتك خلال الإجازات وبعض الأدوات المساعدة إليك تاليًا أسلوب التعامل مع الوقت قبل أن يأخذ أحد أعضاء فريقك إجازةً مدفوعةً وخلال إجازته وبعدها، مع أدواتٍ لتنظيم ذلك. 1. شجع أعضاء فريقك على التقدم في كل صفقة من مسار مبيعاتهم خلال الأسابيع السابقة للإجازة سيخرج مسار المبيعات عن سيطرة أعضاء الفريق عند ابتعادهم عن العمل لأسبوعٍ أو أسبوعين، وتنتابهم مخاوف عن رد العملاء المحتملين على رسائلهم الصوتيّة أثناء غيابهم، وعن مسؤوليتهم في التحقُّق من العملاء المؤهلين الذين شارفوا على الشراء، وفساد الصفقة إن أرسل لهم العميل بريدًا إلكترونيًا ولم يتلقَ ردًا منهم، فقد لا يملك المسوّقون أثناء إجازتهم القدرة على التحكّم في ردود عملائهم المحتملين والمؤهلين، لكن ما يملكون التحكّم المطلق به هو أفعالهم قبل الإجازة، وتلك قاعدة البيع المعتمد على التفاعل وهي التركيز على أعمال، مثل المكالمات والاجتماعات ورسائل البريد الإلكتروني والمتابعات بدل التركيز على النتائج، والتي تكون خارجةً عن سيطرة المسوّق. حفّز أعضاء فريقك على المُضي قدمًا في أكبر عددٍ ممكنٍ من الصفقات من مسار مبيعاتهم، ووفقًا لموقع كلّ عميلٍ من القمع التسويقيّ، فمثلًا: بالنسبة للعملاء المؤهلين Prospects الموجودين في منتصف أو قاع القمع التسويقيّ، يُمكن للمسوّق أن يذكر غيابه في الفترة القادمة ويعرض دعمًا إضافيًا بسؤاله العميل إن كان يرغب بإتمام الصفقة قبل ذلك. بالنسبة للعملاء المحتملين leads الموجودين أعلى القمع التسويقيّ، يُمكن للمسوّق أن يُجدول مواعيد اجتماعاتٍ ومتابعاتٍ للإجابة عن أسئلة العميل، وأن يضمن بذلك تحويله إلى قاع القمع، وبهذه الطريقة سيحصل كل العملاء المؤهلين والمحتملين على المعلومات التي يحتاجونها لإتمام عملية الشراء أو الانتقال إلى الخطوة التالية من رحلتهم الشرائيّة. وفقًا للوك جينوير Luke Genoyer، المسؤول عن قسم توليد الطلب في الشركة الفرعيّة Global Call Forwarding. "نطلب من المسوّقين أن ينهوا مراجعة وترتيب أولويات ثلاثة أنواع من العملاء والعملاء المؤهلين قبل أخذ إجازاتهم المدفوعة، وهم العملاء المحتملون المتفاعلون المهمون، والعملاء الجدد (بما فيهم الحسابات التجريبيّة المجانيّة)، والعملاء الحاليون ذوو الصفقات المعلّقة؛ يحُدّد المسوّقون الخطوات التالية لكلّ عميلٍ ما يُسهّل تمرير العمل لباقي أعضاء الفريق". اطلب من أعضاء فريقك أن يتعاونوا، فذلك مفيدٌ في تحسين الإنتاجيّة، بالإضافة للهدف الأساسيّ وهو أن يتمكّنوا من إنجاز صفقات بعضهم عند غياب أحدهم، بعد أن يناقشوا ذلك مع العملاء المحتملين خلال متابعاتهم قبل الإجازة؛ هكذا يعرف العملاء المحتملون مع مَن يتواصلون إن أرادوا اتخاذ إجراءٍ أثناء إجازةٍ من اعتادوا التواصل معه، وبإمكانهم أيضًا إضافة معلومات التواصل لأعضاء الفريق المستعدين لإكمال صفقاتهم إلى المجيب الآلي والرسائل التلقائيّة، وبذلك يضمنون عدم خسارة أيّ صفقةٍ أو ضياعها. 2. العمل على أتمتة سير العمل أثناء غياب أعضاء فريقك يُمكن لمندوبي المبيعات استكمال العمل مع العملاء المحتملين حتى أثناء إجازاتهم، وذلك بفضل أتمتة سير العمل Workflow Automation؛ حيث إن أتمتة سير العمل Workflow Automation هي عملية توكيل مهامٍ ضروريّةٍ، لكنها روتينيّة إلى مشغلٍ تلقائيٍ، وبإمكانك الاعتماد على أتمتة سير العمل في مختلف أنواع المهام، بما فيها إنشاء الصفقات وإرسال العقود والإشراف اليدوي. إليك تاليًا بعض الإجراءات لطلبها من أعضاء فريق المبيعات قبل بدء إجازاتهم المدفوعة: تثقيف العملاء المحتملين: إن كان العميل المحتمل جاهزًا لكنّه بحاجةٍ لمزيدٍ من الوقت والمعلومات، فأدخله ضمن حملة تثقيفٍ تُرسل له محتوًى داعمًا تلقائيًّا. نقل ملكية الصفقة: لتجنّب انتظار العميل المؤهّل بعد اتخاذه إجراءً أثناء غياب عضو الفريق المسؤول، حوّله تلقائيًّا للتواصل مع عضوٍ آخر يهتم بأعمال العضو الغائب. إنشاء مهمات متابعة: إن عمل أحد أعضاء الفريق مع عميلٍ محتملٍ قبل إجازته ولم يتلقَ منه ردًّا أثناءها، فأرسل له تذكيرًا بالمتابعة حال عودته. تُطَمئن أتمتة سير العمل العملاء المحتملين والمؤهلين وتنبّه باقي أعضاء الفريق للتدخُّل في حال غياب المسوّق للحفاظ على تدفُّق العمل، وبذلك يستمر مسار المبيعات دون الحاجة لجهودٍ عمليّةٍ أو لتحقّق أعضاء الفريق من بريدهم الإلكترونيّ أثناء الإجازة. 3. ساعد أعضاء الفريق على تنظيم جداولهم بعد العودة قد تكون العودة من الإجازة تجربةً مزعجة، حيث سيربك كلٌ من تسارع العمل وتراكم رسائل البريد الإلكتروني والتطورات حتى أكثر أعضاء فريق المبيعات تنظيمًا، وبتطبيق الطريقتين السابقتين، ستستمر صفقات أعضاء فريق المبيعات حتى أثناء غيابهم ولاستثمار هذه الجهود، ساعد أعضاء الفريق على تنظيم جداولهم بعد العودة. ركّز على التالي لتوفير الوقت: تفريغ يوم العودة الأول من المكالمات والاجتماعات الخارجية: شجّع أعضاء فريقك على تخصيص يومٍ فاصلٍ لمواكبة مستجدات البريد الإلكترونيّ، والتواصل مع الزملاء الذين اهتمّوا بعملهم أثناء الإجازة، ثم مراجعة ملاحظات وفعاليات إدارة علاقات العملاء CRM. تخصيص باقي أيام الأسبوع الأول للمراجعات: حدّد الصفقات التي تطورت أثناء غياب العضو، وهي الآن بحاجةٍ إلى متابعة، والعملاء المحتملون الذين لم يتواصلوا مجدّدًا، واطلب من عضو الفريق أن يُكرّس بقية الأسبوع في متابعة الصفقات النشطة ويجعلها قيد التنفيذ. التركيز على العملاء المؤهلين بشدّة: من المرهق مواكبة كلّ شيءٍ في يومٍ واحدٍ فقط، لذا ذكّر مندوبي المبيعات بمنح الأولويّة للصفقات الأهم، والتمهّل في الصفقات التي ما زالت في أعلى قمع المبيعات، وساعد أعضاء الفريق على تحقيق توازن وقت المبيعات وتجنّب المشتتات، ليعودوا للتسارع الطبيعي للعمل ويواصلوا تحقيق أهدافهم. 4. استخدم أدوات لمتابعة سير الصفقات فيما يلي أدوات تيسّر التعاون والمتابعة وأتمتة العمل والتخطيط لفريق المبيعات أثناء غياب أحد أفراده. إدارة علاقات العملاء Customer Relationship Management CRM إدارة علاقات العملاء CRM هي متابعة كلّ عميلٍ محتملٍ يدخل مسار المبيعات ويستمر في العملية التسويقيّة، حيث تُحوّل بعض البرامج هذه العمليّة إلى عمليّةٍ مرئيّةٍ وبسيطةٍ مع ميّزات السحب والإفلات Drag-and-Drop. إن استخدام أداةٍ لإدارة علاقات العملاء CRM أمرٌ مهمٌ على مستوى الفريق، فكلّ صفقةٍ تضيف بياناتٍ جديدةٍ من جهات اتصالٍ وملاحظاتٍ ومكالماتٍ وفعالياتٍ مجدولةٍ، وبهذه الطريقة عندما يأخذ أحد مندوبي المبيعات إجازةً، يُمكن لآخر أن يُكمل تمامًا من حيث توقّف مع وجود كامل البيانات. أداة لجدولة الاجتماعات يتطلّب وجود العديد من الاجتماعات والمتابعات إجراء عدّة اتصالاتٍ لجدولة اجتماعٍ واحدٍ فقط، وتزداد صعوبة ذلك عندما يترتّب على أعضاء الفريق إعادة جدولة صفقات بعضهم بسبب الإجازات، حيث تُسهّل بعض الأدوات عرض الأوقات المتاحة لاجتماعٍ أو مكالمةٍ، كما يُمكن لكلّ عضوٍ باستخدامه عرض أوقات تواجده الشخصيّ للعملاء المحتملين الذين يهتم بهم في غياب العضو المسؤول عنهم. أتمتة البريد الإلكتروني يجب أن تُنجز عملية إرسال الرسائل الالكترونيّة التثقيفيّة لمرةٍ واحدةٍ فقط؛ وذلك بكتابة قالب الرسالة وتقسيمه ليُلائم عدّة عملاء، إذ تربط أداة أتمتة البريد الإلكترونيّ الملائمة بين سير المبيعات والتسويق بسلاسةٍ لحملات البريد الإلكترونيّ المخصّصة؛ وبإمكانك إنشاء المحتوى الأساسي مرةً واحدةً وتِسهّل بذلك على أعضاء الفريق تفعيل التدفُّقات قبل أخذهم الإجازة. توثيق المبيعات اترك الأسعار والعروض والعقود متاحةً وسهلة الوصول والاستخدام لكلّ الفريق، وبذلك عندما يريد عميلٌ مؤهلٌ الشراء مثلًا، سيُمكن لأيّ عضوٍ من الفريق أن يأخذ مكان العضو الغائب ويُنشئ ويُرسل عقدًا للعميل في غضون دقائق، بدلًا من استغراقه ساعات، كما بإمكانك تنظيم هذه العملية باستخدام أدواتٍ تسمح لك بمزامنة حقولٍ من نظام إدارة علاقات العملاء وإنشاء جداول الأسعار وعروض المتاجر ومشاركة الروابط، مع تلقّيك إشعاراتٍ عند كلّ دخولٍ أو تعديلٍ، فيتصرّف مندوبو المبيعات بفضله أثناء الصفقة. التعامل مع الإجازات المدفوعة وحصص المبيعات لفريقك إليك تاليًا كيفية التعامل مع فريق المبيعات حين يتعلّق الأمر بالسماح بالإجازات المدفوعة وتأثيرها على حصص المبيعات، بالاعتماد على خطط وأدوات أُعدّت لذلك. حدد المواعيد الأنسب والأسوأ للإجازات هل تعرف آلية تأثير المواسم المختلفة مثل أشهر الصيف وإجازات الشتاء على مبيعاتك؟ إن كان لمبيعاتك في الحالة الطبيعية ذروات ارتفاعٍ وانخفاضٍ على مدار العام، فستتمكّن عندها من تحديد الأوقات الأنسب والأسوأ للإجازات المدفوعة. وفقًا لسارة آرتشر Archer Sara مديرة التسويق والمبيعات في منصة Chartmogul: "إن تمكّنت من فهم تأثير هذه المواسم، فستتمكّن من التخطيط لها بتعزيز مسار المبيعات حين يكون العمل مزدهرًا، وهو ما يُتيح لك إمكانية منح أفراد فريق المبيعات استراحةً يستحقونها". بتوثيقك لأسابيع وأشهر انحدار وازدهار العمل، ستُزيل الضغط الذي قد يشعر فريقك باستمرار وجوده، وتحفزهم ليقدموا أفضل ما لديهم في فترات الانشغال المتوقّعة. اطلب من أفراد فريقك اختيار وحجز مواعيد إجازاتهم باكرا بعد أن تُحدّد أنت وفريقك مواسم المبيعات، شجّعهم على جدولة إجازاتهم مبكّرًا، ولهذا الأمر العديد من الميّزات، منها: منح الفريق بأكمله وقتًا كافيًا للاستعداد لغياب أحد الأعضاء. يُمكن لباقي أعضاء الفريق تنظيم وقتهم وفقًا لما حُجز مسبقًا. يُمكنك تنظيم مشاريعَ أخرى بناءً على تواجد الفريق بدقّةٍ، مثل المشاريع الخارجيّة أو تجارب ضغط العمل المماثلة لتكثيف العمل إلى أربعة أيامٍ فقط من الأسبوع. إن التخطيط المبكّر لإجازات العمل المدفوعة مفيدٌ للجميع، حيث ستزيد فرصة قبول طلب الإجازة لمَن يحجزها، وينظّم بقية أفراد الفريق الوقت الذي يهتمون خلاله بصفقات زميلهم. لا تنس إمكانية تخفيف حصص المبيعات Quota Relief تخفيف حصص المبيعات هو تعديلٌ على حصص مبيعات عضوٍ في الفريق إلى أقلّ عددٍ من أيام العمل خلال فترةٍ محدّدةٍ، وهي خطةٌ اختياريّةٌ يُمكن استخدامها لتخفيف الضغط على المسوّقين أثناء غيابهم؛ وفي مثال عن ذلك، إن أخذَ أحد مندوبي المبيعات إجازةً لأسبوعٍ مع بقاء حصص مبيعاته الشهريّة ذاتها، فلن يبتعد تمامًا عن العمل خلال إجازته، لأنه خسر 25% من الوقت وما زال عليه إنهاء صفقاتٍ بذات العدد، وسيريحه تخفيف حصص المبيعات. ومع ذلك فإن تخفيف حصص المبيعات ليس الحلّ الأمثل لكلّ الحالات: إن طبّقت الأساليب المذكورة سابقًا، فقد لا تنخفض مبيعاتك إطلاقًا خلال إجازة أحد الأعضاء. إن كانت دورة مبيعاتك طويلةً، كأن تكون 90 أو 120 يومًا بدلًا من أن تكون شهرًا، فلن يكون تخفيف حصص المبيعات بذات الأهميّة. إن كانت أهداف مبيعاتك سنويّةً، فيُمكنك نقل حصص المبيعات إلى فتراتٍ أنشط من العام دون أن يتأثّر الهدف السنويّ. وجد استبيان أجرته The Bridge Group أن تخفيف حصص المبيعات رائجٌ في المنظمات الكبيرة وذات نمط المبيعات الشهري، ويكاد ينعدم استخدامه في المنظمات الأصغر وذات نمط المبيعات ربع السنويّ، ويقول مندوبو المبيعات الذين لم يحتاجوا مطلقًا لتخفيف حصص المبيعات بأنهم لا يأخذون إجازاتٍ مطلقًا، ولم يبتعدوا عن العمل تمامًا لأكثر من يومين متتاليين، لذا حدّد مقدار الإجازات المدفوعة الذي يأخذه أعضاء فريقك حاليًا ومدى تأثيره على معنويات الفريق واندفاعه، واستفد من هذه المعلومات وحدّد إن كان اقتراح تخفيف حصص المبيعات Quota Relief مناسبًا لموقفك. هل عليك رفض أي من طلبات الإجازات المدفوعة لأعضاء فريقك؟ غالبًا ما سيطلب أعضاء فريقك إجازاتٍ وستُوافق عليها، لكن ماذا إن لم تجرِ الأمور بسلاسةٍ؟ متى ترفض طلب إجازةٍ مدفوعةٍ؟ فيما يلي نذكر حالاتٍ لمراعاتها: 1. عدم تقديم مندوب المبيعات إشعارا مناسبا إن أراد أحد مندوبي المبيعات طلب إجازةٍ قريبًا، في غضون أسبوعٍ أو أسبوعين مثلًا، فسيبقى وقتٌ ضيّقٌ لك ولباقي أفراد الفريق للاستعداد لغيابه، وكذلك هو الأمر بالنسبة للوقت للمندوب ذاته للتقدُّم في الصفقات الرئيسيّة وتجهيز سير عملٍ تلقائيٍّ وتنظيم نشاطه في أول أسبوع عودةٍ، حيث يعرّض ذلك المندوب والفريق لخطر خسارة حصص مبيعاتٍ في تلك الفترة. 2. حجز مندوب المبيعات للكثير من الإجازات المدفوعة مرة واحدة أو حجزها خلال موسم ضغط عمل بعد أن تُحدّد مواسم ازدهار المبيعات وانخفاضها، شجّع أعضاء فريقك على طلب إجازاتهم بناءً على تلك المواسم، وأدخل ذلك إلى أساليب الفريق وكافئهم على احترام لهذا المبدأ، حيث يُمكنك اختيار مكافآتٍ، مثل القسائم والتدريبات والمنتجات والتقدير في الشركة أو حتى المكافآت النقديّة، فإذا حجز أحد أعضاء الفريق إجازةً مدفوعةً خلال أكثر المواسم فرصًا للمبيعات بما في ذلك المعارض التجاريّة والفعاليات المهمّة، أو تقاطعت إجازته الطويلة مع هذه الفترات، ففكّر برفض الطلب. 3. الطلب مخالف لسياسة الإجازات المدفوعة بإمكانك رفض الطلب إن كان مخالفًا لإحدى سياسات الشركة للإجازات المدفوعة، كأن يطلب أحد الأعضاء إجازةً تتجاوز الأيام المسموحة له خلال سنةٍ، ومع ذلك تأكّد من التواصل مع هذا العضو ومعرفة سبب طلبه لإجازةٍ طويلةٍ جدًّا، وما إذا كان يُواجه مشكلةً صحيّةً أو ظرفًا شخصيًا لا يُمكنه التعامل معه أثناء العمل، أو أنه مرهقٌ لدرجة الاستنزاف، إذ إنه من المحتمل لا يقصد التحايل على نظام الإجازات المدفوعة، لكنّه فقط بحاجةٍ إلى دعمٍ أو وقتٍ إضافيٍ ليتجاوز مشكلته، لذا احرص على فعل ما بوسعك لدعمه ومساعدته. اعمل مع باقي أعضاء الفريق على إيجاد حلول بديلة هذا من مبدأ التعاطف والتفهُّم للرغبات والمشاكل والحاجات الفرديّة لفريقك، ولا تنهِ الأمر برفضك طلبات الإجازات، بل أنشئ بيئةً آمنةً بين أعضاء الفريق لشرح حاجاتهم والعمل معًا لإيجاد حلولٍ بديلةٍ إن لم يكن الطلب الأصلي ملائمًا. هل عليك إنشاء جدول للإجازات المدفوعة؟ إن وجدت أن طلبات الإجازات للفريق تتداخل مرارًا أو أنها تتقاطع مع مواسم ضغط المبيعات، فقد يُساعدك إنشاء جدولٍ للإجازات، وهو جدولٌ محدّدٌ مسبقًا للأوقات المتاحة للإجازات، وقد يزيل وجود جدولٍ مسبقٍ للإجازات المتاحة الحاجة لطلب إجازةٍ ثم انتظار الموافقة، وذلك لأن الأعضاء يختارون بين فترات إجازةٍ مقبولةٍ مسبقًا ويكون الحجز بحسب الأسبقيّة، إذ إن تعزيز ثقافة قوّة الإنتاجية، والتعاون والعمل الجماعيّ، يدفع أعضاء فريقك لإنجاز العمل بأسلوبٍ مفيدٍ للفريق، وسيهتمون بتقييم زملائهم بقدر اهتمامهم بتقييمهم، وذلك يعني اطّلاعهم على الجداول الزمنيّة للجميع أثناء حجزهم لإجازاتهم، وبذلك قد لا تحتاج إلى جدول إجازاتٍ؛ أما إن اخترت تطبيق جدول الإجازات، فتعامل معه مثل تجربةٍ واطلب آراء الفريق وتقييمهم له بانتظامٍ، وأخيرًا، تأكّد من تضمين جدول الإجازات في الجدول العام للمناوبات والمواعيد، حيث سيسهُل الوصول إليه من قِبل كلّ أعضاء الفريق. خاتمة رغم أن الإجازة مرهقةٌ في مجال المبيعات، لكنّك تعلم الآن أن ذلك ليس حتميًّا، لذا ساعد مندوبي المبيعات في التخطيط المسبق لأنشطة مبيعاتهم، واطلب مساعدة أعضاء الفريق أثناء غياب أحدهم وساعده على المواكبة بسرعةٍ عند عودته، وعندما تتوجّه تلقائيًا إلى التعاطف والعمل الجماعيّ، ستكسب كلّ شيءٍ؛ فريق مبيعاتٍ منتجٍ ومدركٍ لأهمية الراحة واستعادة الطاقة. ترجمة -وبتصرُّف- للمقال How to keep your sales and marketing going when team members take personal time off. اقرأ أيضًا فهم فرق العمل وإدارتها أفضل الطرق لتحسين إنتاجية فريق العمل المهارات العملية والإنسانية التي تحتاجها لقيادة فريقك

يستغرق إتقان التسويق عبر البريد الإلكتروني وقتًا، وعليك أن تأخذ بالحُسبان أفضل الممارسات مع كلّ حملةٍ تسويقيّةٍ تعمل عليها لتتجاوز أخطاء المبتدئين الشائعة، وأن تحسّن من رسائل البريد الإلكتروني بما سيحسّن التفاعل، ومع ذلك لن تضمن هذه الممارسات وحدها النجاح، لذا فعليك أيضًا أن تفهم كيف تقيّم نتائج جهودك، حيث تتغيّر هذه المقاييس باستمرار، كما هو حال التسويق عبر البريد الإلكتروني، وعندما تُطلق ميزاتٍ مثل ميزة حماية خصوصيّة البريد الخاصّة بـ Apple، فهناك احتمال أن تتغيّر رؤيتنا للنجاح في التسويق عبر البريد الإلكتروني؛ لذا من المهم أن تبقى مطّلعًا على آخر المستجدات في هذا المجال، لكن قبل أن تتعمّق في كل ما يمكنك تعلمه عن التسويق عبر البريد الإلكتروني، عُد خطوةً للوراء وحدّد أهدافك، ثم قرّر كيف ستقيّم نجاحك، إذ تختلف كلّ حملةٍ تسويقيّةٍ عبر البريد الإلكتروني عن الأخرى، ولا سيّما باختلاف أهدافك مع اختلاف الحملات، مثل إضافة عملاء محتملين وتوسيع قاعدة المشتركين، لكن هناك بعض المقاييس الأساسيّة التي يجب على كل مسوّقٍ عبر البريد الإلكتروني أن يتعلّم كيفيّة تقييمها. مقاييس للتسويق عبر البريد الإلكتروني على كل مسوق معرفتها إليك مجموعةً من مقاييس التسويق عبر البريد اﻹلكتروني يجب على كل مسوّقٍ معرفتها، وهي كالآتي: 1. معدل فتح الرسائل Open Rate يُعَد معدل فتح الرسائل أحد أكثر المقاييس استخدامًا من قِبل المسوّقين عبر البريد الإلكتروني عالميًا -رغم أنه من أبسط تلك المقاييس-، وتمنحنا متابعة النسبة المئويّة للمشتركين الذين يفتحون رسالة بريدٍ إلكترونيٍ معيّنةٍ رؤيةً عن تفاعلهم، كما تعطينا فكرةً عن فعاليّة مختلف العناوين، حيث عندما ستُتيح Apple ميزة حماية خصوصيّة البريد للعامّة، فإنّها ستُوقِف بفاعليّة تتبّع فتح الرسائل للمستخدمين الذين يفعلونها، ما يجعل معدّل فتح الرسائل Open Rate مقياسًا غير موثوقٍ نسبيًّا، ومع تزايد مزودي البريد الوارد الذين يطلقون ميزاتٍ شبيهةً، ستقل موثوقيّة معدّل فتح الرسائل أكثر فأكثر، ومن الجيّد أن هناك العديد من المقاييس الأخرى ضِمن هذه القائمة لتقييم النجاح. 2. نسبة النقر إلى الظهور Click-through Rate CTR إن نسبة النقر إلى الظهور CTR مقياسٌ آخر شائع يُساعدك على تحديد جودة أداء حملتك، حيث يقيس معدل النقر إلى الظهور CTR عدد الأشخاص الذين ضغطوا على الرابط ضِمن البريد الإلكتروني؛ على سبيل المثال، إن أرفقت رابطًا لاسترداد قيمة عرض، فإن معدّل النقر إلى الظهور CTR يحسب النسبة المئويّة للمشتركين الذين نقروا على الرابط المرفق؛ إذ أن هناك العديد من الأساليب لزيادة معدّل النقر إلى الظهور عند كتابة البريد الإلكترونيّ، مثل إرفاق الرابط في أماكنَ مناسبةٍ ضمن البريد الإلكتروني، وإضافة زرّ دعوةٍ لاتّخاذ إجراءٍ واضحٍ وجذابٍ يُمكن للمشتركين قَبول عرضك بالضغط عليه، فمعدّلات النقر إلى الظهور CTR عادةً أقل بكثير من معدّلات فتح الرسائل، ويتجاوز معدّل النقر إلى الظهور في معظم الحملات التسويقيّة 4% بقليل. 3. معدل التحويل Conversion Rate بينما يقيس معدّل النقر إلى الظهور عدد الأشخاص الذين نقروا على الرابط الذي أرفقته، يحدّد لك معدّل التحويل عدد الأشخاص الذين نقروا على الرابط ثم أكملوا إجراءً محددًا؛ على سبيل المثال، إن أرفقت في البريد الإلكتروني الذي كتبته رابطًا يستفيد عن طريقه المشتركون من تخفيضاتٍ معيّنةٍ، يقيس لك معدّل التحويل النسبة المئويّة للأشخاص الذين نقروا على الرابط ثم أكملوا عمليّة الشراء؛ إذ تمنحك معدّلات التحويل رؤيةً فريدةً لعائدات الاستثمار، وعند حسابك لنفقاتك وعدد المشتركين الذين حولتهم لعملاء،س يسهل عليك تحديد ما إن كانت الحملة التسويقيّة تستحق ما أنفقته عليها أم لا. 4. معدل ارتداد الزوار Bounce Rate عندما ترسل بريدًا إلكترونيًا لحملةٍ تسويقيّةٍ، سترغب أيضّا بتتبّع معدل ارتداد الزُوّار، حيث يُحدّد معدّل ارتداد الزُوّار عدد عناوين البريد الإلكتروني للمشتركين الذين لم يستلموا بريدك الإلكتروني، وتكشف الارتدادات المرنة Soft Bounces المشاكل المؤقتة في عناوين البريد الإلكتروني، بينما تكشف الارتدادات المُحكمة Hard Bounces المشاكل الدائمة فيها، حيث سيمنحك قياس معدلات ارتداد الزُوّار مقابل معدلات فتح الرسائل فكرةً أوضح عن جودة قوائم المشتركين الخاصّة بك، فقد يُشير وجود نسبةٍ مئويةٍ عاليةٍ لمعدّلات الارتداد المحكم Hard Bounces، إلى أن قائمتك مليئةٌ بعناوينَ بريدٍ إلكترونيٍ وهميةٍ أو قديمةٍ أو مكتوبةٍ بطريقةٍ خاطئةٍ، وبإمكانك خفض معدّلات ارتداد الزُوّار مسبقًا، وذلك بطلب تأكيد اشتراكٍ مزدوجٍ، حيث يطلب من المشتركين تأكيد عنوان بريدهم الإلكترونيّ، ثم تأكيد رغبتهم بتلقّي رسائلَ إلكترونيّةٍ من علامتك التجاريّة، حيث يُعَد طلب تأكيد اشتراكٍ مزدوجٍ خيارًا رائعًا يضمن تحسين جودة قوائم عناوين البريد الإلكترونيّ وخفض معدّلات ارتداد الزُوّار. 5. عدد إلغاءات الاشتراك Number of Unsubscribers يُعَد حساب عدد من ألغوا اشتراكهم أمرًا بسيطًا للغاية، وسيُظهر لك أيّ مزود خدمة بريدٍ إلكترونيٍ عدد الأشخاص الذين ألغوا اشتراكهم بعد تلقّيهم رسالة بريدٍ إلكترونيٍّ منك، ويُمكنك إيجاده عادةً في لوحة التحكّم الرئيسيّة Main Dashboard أو لوحة التحكّم الخاصّة بالمقاييس Metrics Dashboard، حيث من المحبط أن تجد عددًا كبيرًا ممّن ألغوا اشتراكهم، ومع ذلك يعطي المسوّقون عبر البريد الإلكتروني الأولوية لمقياس التسويق. هذا ويجعلون إلغاء الاشتراك علامةً جيّدةً، فهي تعني أنّك تحسّن من قائمة المشتركين، وبالإضافة لذلك، فإن منح المشتركين فرصةً واضحةً لإلغاء اشتراكهم، يعني أنهم يملكون القرار في اختيار نوع المحتوى الذي يرغبون بتلقّيه من علامتك التجاريّة، وهو ما يُساهم في بناء الثقة. 6. معدل نمو القائمة List Growth Rate إن معدّل نمو القائمة List Growth rate هو المقياس الذي يقيس المعدّل الذي تتزايد قائمتك على أساسه، ولحساب هذا المعدّل يُمكنك طرح عدد الذين ألغوا اشتراكهم من عدد المشتركين الجدد، ثم تقسم الناتج على العدد الكلّي للعناوين في قائمتك، وتضربه بـ 100، حيث من الطبيعي أن تُواجه فتراتٍ من التراجع، لذا ركّز على أساليبَ لإغناء قائمتك باستمرار، واستقطاب المزيد من المتابعين، وإيجاد متابعين جددٍ ومخلصين. 7. شكاوى البريد الإلكتروني العشوائي Spam Complaints من المُحبط أن تُحدّد رسائلك الإلكترونيّة مثل بريدٍ عشوائيٍّ (مزعج) Spam، وقد تفضّل تجاهل هذه الحالات، إلا أنه من المهم تسليط الضوء على شكاوى البريد الإلكتروني، حيث يميل مزوّدو خدمة البريد الإلكتروني إلى ضمان الجودة وتتبّع شكاوى البريد الإلكترونيّ العشوائيّ، حيث تُشير أيّ زيادةٍ مرتفعةٍ في هذا المعدّل إلى إمكانيّة اتّخاذ مزوّد خدمة البريد الإلكترونيّ إجراءاتٍ ضدّك، بالإضافة لحظر حسابك، وقد يُحدّد مزوّد خدمة البريد الإلكتروني هذا الرقم نيابةً عنك، ولكنّك قد تُفضّل مراقبته بنفسك للتأكّد من أن رسائلك الإلكترونيّة خاليةٌ من الأخطاء التقنيّة، وأن كتابتك التسويقيّة تُحقّق المعايير المرغوبة. 8. معدل إعادة إرسال البريد الإلكتروني ومشاركته Forwarding Rate/Email Sharing يُحدّد معدّل إعادة إرسال البريد الإلكترونيّ ومشاركته النسبة المئويّة للمشتركين الذين إمّا شاركوا المحتوى عبر وسائل التواصل الاجتماعيّة، أو أعادوا إرساله لصديقٍ بالبريد الإلكترونيّ، حيث يُعَد معدّل إعادة إرسال البريد الإلكتروني أو مشاركته مقياسًا عمليًا للتقييم؛ فهو يمنحك فكرةً عن عدد الذين يجرون دعوةً لعلامتك التجاريّة، فهو يعرض لك النسبة المئويّة للمشتركين الذين يرشحون رسائلك الإلكترونيّة للآخرين؛ إذ إن اكتساب أشخاصٍ يجرون دعوةً لعلامتك التجاريّة هو خطةٌ رائعةٌ في التسويق عبر البريد الإلكترونيّ، وخاصّةً بسبب تأثّر 81% من قرارات الشراء للمستهلكين بما ينشره أصدقاؤهم عبر وسائل التواصل الاجتماعيّ. 9. التفاعل باختلاف الوقت Engagement Over Time يُوجّهك تقييم التفاعل باختلاف الوقت إلى أفضل الأوقات لإرسال الرسائل خلال اليوم، حيث بإمكانك الاستفادة من التشغيل التلقائي في مزوّد خدمة بريدك الإلكترونيّ لإرسال الرسائل الإلكترونيّة بالاعتماد على سلوك العميل أو على منبه، إلا أن الاعتماد على التفاعل باختلاف الوقت يُوضّح لك متى تحصل على معدّل أعلى لفتح الرسائل الإلكترونيّة التي لم تُرسل تلقائيًا، حيث يفعّل بعض مزودي خدمة البريد الإلكترونيّ هذه الميزة تلقائيًا ويجمعون البيانات اللازمة لك، ومع ذلك فمن الجيّد أن تُقيّم هذا المقياس بنفسك وتُحدّد الأوقات الأنسب للإرسال بالنسبة لمجال عملك وقاعدة المشتركين لديك. 10. العائد العام على الاستثمار Overall ROI العائد العام على الاستثمار Overall ROI هو مقياسٌ للبريد الإلكترونيّ على كلّ مسوّقٍ تقييمه، حيث يظهر لك هذا المقياس إجمالي عائد الاستثمار لحملاتك، ولحسابه تطرح المبلغ الذي أنفقته على تنفيذ الحملة من المبلغ الذي أحرزته مبيعات الحملة، وتقسم الناتج على الأموال المُستثمرة في الحملة ثم تضربه بـ 100، وقد يتطلّب التسويق عبر البريد الإلكترونيّ استثمارًا، لكنّه يملك أعلى عائدٍ على الاستثمار بين كلّ أساليب التسويق الرقميّ. 11. معدل مشاركة البريد الإلكتروني Email Sharing Rate يُشير معدّل مشاركة البريد الإلكترونيّ Email Sharing Rate إلى عدد المرات التي شارك فيها المستلم بريدك الإلكتروني في حساباته على مواقع التواصل الاجتماعي، دون حساب المشاركة عبر البريد الإلكتروني نفسه، حيث يُحسب هذا المقياس من زرّ المشاركة Share This في البريد الإلكتروني، ولحسابه قسّم عدد نقرات زرّ المشاركة على عدد الرسائل الإلكترونيّة التي استُلِمت، ثم اضرب الناتج بـ 100؛ إذ يسمح لك هذه المعدّل أيضًا بحساب بعض المؤشّرات العمليّة الأخرى الخاصّة بالبريد الإلكتروني. 12. معدل فتح الرسائل باستخدام جهاز محمول Mobile Open Rate يعمل بنفس آليّة معدّل فتح الرسائل العادي، إلا أنه يُطبّق خاصةً على الأجهزة المحمولة مثل الهواتف النقّالة والأجهزة اللوحيّة، وتكثر معدّلات فتح الرسائل باستخدام الأجهزة المحمولة في عطلات نهاية الأسبوع، على عكس معدّلات فتح الرسائل من الحواسيب Desktop Open Rate، والتي غالبًا ما تُفتح خلال أيام الأسبوع حين يكون الأشخاص في عملهم. تذكّر أن هذا المقياس سيتأثّر أيضًا بميزة حماية خصوصيّة البريد الخاصّة بـ Apple، وذلك ليس لانعدام إمكانيّة تحديد فتح الرسائل فحسب، بل لأن ميزة حماية خصوصيّة البريد MPP تحجب إمكانيّة معرفة الجهاز أو نظام التشغيل للمستخدم؛ ما يعني عدم معرفة إن كان المستخدم قد فتح الرسالة من حاسوبٍ أو من جهازٍ محمولٍ بعد تفعيله لتلك الميزة. 13. معدل النقر باستخدام جهاز محمول Mobile Click Rate تعمل معدّلات النقر باستخدام جهازٍ محمولٍ بطريقةٍ مشابهةٍ لمثيلاتها باستخدام الحواسيب، إلا أنها متعلقةٌ بالأجهزة المحمولة مثل الهواتف النقّالة والأجهزة اللوحيّة، حيث تكون معدّلات النقر باستخدام جهازٍ محمولٍ أقلّ بكثيرٍ من معدّلاتها باستخدام الحواسيب، والسبب في ذلك هو أن المستخدمين يميلون دومًا لفتح نوافذَ متعددةٍ واعتماد مناوراتٍ معقدةٍ أخرى أثناء التصفُّح، وذلك أسهل بكثيرٍ باستخدام حاسوب منه باستخدام جهازٍ محمولٍ. الأمر هو نفسه بالنسبة لمعدّل فتح الرسائل باستخدام جهازٍ محمولٍ، حيث أن معدّل النقر سيتأثّر أيضًا بميزة حماية خصوصيّة البريد MPP، وإن كنت ترغب بالوصول إلى جمهورك عبر الأجهزة المحمولة على وجه الخصوص، فمن المفيد تذكُّر أن عطلات نهاية الأسبوع هي أفضل وقتٍ لذلك. 14. معدل فتح الرسائل تبعا للنطاق Domain Open Rate هذا المعدّل مهم بشدّةٍ لضمان استلام المشتركين للرسائل بنجاح، فهو ما يجعله أحد أهم مقاييس التسويق عبر البريد الإلكترونيّ، حيث يسمح لك هذا المعدّل بمعرفة النسبة المئويّة للأشخاص الذين فتحوا رسائلك الإلكترونيّة على مزوّد بريدٍ إلكترونيٍ محدّدٍ، وبذلك قد تتمكّن من تحديد مشاكلَ في فلترة البريد الإلكترونيّ العشوائيّ على نطاقٍ محدّدٍ، ومجددًا، لن تتمكّن من تقييم هذا المقياس بدقّةٍ لدى مستخدمي بريد Apple، لكنّه ما زال مفيدًا لمَن لم يفعل ميزة حماية خصوصيّة البريد MPP. 15. معدل النقر تبعا للنطاق Domain Click Rate مثل معدّل فتح الرسائل تبعًا للنطاق، سيسمح لك بمعرفة عدد الأشخاص الذين نقروا على رسائلك الإلكترونيّة على مزوّد بريدٍ إلكترونيٍ محدّدٍ؛ إذ سيُساعدك هذا المقياس على تحديد أيّ مشاكل في سياسة البريد الإلكترونيّ العشوائيّ لنطاق بريدٍ إلكترونيٍّ محدّدٍ، وذلك بموازنة معدّلات النقر بين المزوّدين Providers، لذا كل ما عليك فعله هو حساب معدّل النقرات الوسطي بين المزوّدين، ثم موازنته مع كلّ مزوّدٍ إفراديًا. 16. الربح لكل رسالة بريد إلكتروني Revenue Per Email يُظهر لك العائد على الاستثمار ROI تأثير عائداتك العامّة على الاستثمار، بينما يُظهر تحليل الربح لكلّ رسالة بريدٍ إلكترونيٍ Revenue Per Email نجاح كل رسالة بريدٍ إلكترونيٍ بمفردها، كما يُساعدك تحديد هذه العناصر على معرفة رسائل البريد الإلكترونيّ الأكثر تأثيرًا بسهولةٍ، إضافةً إلى أنه يُبيّن وجود أيّ انخفاضٍ في إجمالي العائد على الاستثمار، حيث إن أفضل طريقةٍ لتقييم العائد على الاستثمار لرسالة بريدٍ إلكترونيٍّ محدّدة، هي التركيز على مقاييس، مثل عدد النقرات وحركة مرور الويب والمحادثات. 17. الربح لكل مشترك Revenue Per Subscriber يمنحك حساب الربح لكلّ مشتركٍ فكرةً أدق عن العائد على الاستثمار، مثل بعض مقاييس تقييم الأداء الأخرى في التسويق عبر البريد الإلكتروني، لكن ما يُميّزه عن الربح لكلّ رسالة بريدٍ إلكترونيّ هو قدرته على تحليل الخصائص السكانيّة ومعرفة أيهم يعود بإيرادات؛ وبمعرفة ذلك ستتمكّن من تعديل رسائل البريد الإلكترونيّ، وتخفيف التركيز على فئةٍ سكانيةٍ محدّدةٍ، أو إعادة توجيه مواردك والتركيز على فئةٍ أخرى. خاتمة كانت تلك المقاييس أهم 17 مقياسًا للتسويق عبر البريد الإلكتروني على كلّ مسوّقٍ التقييم على أساسها، وبالرغم من التغييرات الكبيرة التي تواجهها بعض هذه المقاييس إلا أنها تستحق الاطلاع، وأثناء البحث عن تقييم فعاليّة حملاتك التسويقيّة، ابحث دومًا عن مقاييس التسويق عبر البريد الإلكترونيّ التي تُحقّق النقاط التالية: تُزوّدك ببياناتٍ قيّمة تُوجّه حملاتك عبر البريد الإلكترونيّ. تُعطي رؤيةً عن تفاعل المشترك. تُساعد على إبقاء تركيز فريقك على أهداف الحملة. ستُساعدك مقاييس البريد الإلكتروني هذه على تقييم نجاحك العام بعد وضعك لأهداف الحملة، وستُساعدك أيضًا في إجراء التعديلات الضروريّة على خطتك. ترجمة -وبتصرُّف- للمقال ‎17 Email Marketing Metrics Every Marketer Needs to Know. اقرأ أيضًا الدليل الشامل للمبتدئين في التسويق عبر البريد الإلكتروني كيف تُصمّم خطة تسويق ناجحة عبر البريد الإلكتروني التخطيط لإستراتيجية التسويق عبر البريد الإلكتروني التسويق بالبريد الإلكتروني وأهم الخطوات اللازمة لتنفيذ حملة تسويقية ناجحة

يختلف تصميم الأيقونات Icons كثيرًا عن تصميم الرسومات Graphics، فهناك الكثير من القواعد والحدود التي لا يمكن تخطّيها أثناء تصميم الأيقونات. وفي أي منصة ومهما اختلف التصميم، فالأيقونة دائمًا تُعَد أداةً لإيصال فكرة معينة، فالأيقونات هي تصاميم صغيرة تُغني عن استخدام الكلمات وتحسّن التصميم عمومًا، نظرًا لعدم إمكانية تزويد المواقع والتطبيقات بتصاميم ومعلومات مرئية متكاملة لكل خطوة، وهذا ما يزيد من جدوى استخدام الأيقونات. يجب مراعاة الكثير من الجوانب أثناء تصميم الأيقونات لتتميزها عن الرسومات. ولتوجيهك في هذا المجال إليك قائمةً تجمع 14 خطأً لتجنّبه، حيث نعرض فيها أخطاءً فادحةً يسهل الوقوع فيها، مع كيفية تجنبها. 1. التصميم دون استراتيجية وخطة واضحة إياك البدء بتصميم دون تخطيط مسبق ووضع خطة استراتيجية واضحة للتصميم. قد لا تحتاج لتخطيط محكم ومناقشة لاستراتيجيات الأيقونات بحد ذاتها، لكن الأمر جوهري للعلامات التجارية وتجربة المستخدم، وهذا ما يفعله المحترفون والساعون للكمال، لذا ناقش المشروع كاملًا بأهدافه ومتطلباته مع عميلك وفريقك، ويُفضّل وضع الأهداف بعيدة المدى نصب عينيك قبل التفكير بمرحلة التصميم، إذ ستجد فرقًا في التصميم وتجربة المستخدم عندما تتبع أسلوبًا منظمًا جيدًا ومتسلسلًا واختيارًا مناسبًا لمواقع الأيقونات، وكذا خطةً محكمةً للتصميم، فقد لا تلبّي أيقوناتك دوافع التصميم وتطلعات تجربة المستخدِم بدون استراتيجية أساسية وتخطيط مسبق. 2. إهمال تنوع أبعاد الشاشات أثناء تصميم الأيقونات عليك أخذ أبعاد الشاشة التي تُعرض فيها أيقوناتك بالحسبان، حيث يجب إبقاء الأيقونات واضحةً مهما اختلفت أبعاد الشاشة، أي يجب تصميم الأيقونة بحيث تتكيف بمرونة مع اختلاف الأبعاد. تستطيع إضافة عناصر وتفاصيل لإبراز تصميمك في تصميم الرسومات، لكن في تصميم الأيقونات تكون المساحة محدودةً جدًّا، بحيث أن إضافة التفاصيل سيزيدها تعقيدًا وسيؤثر على التصميم عند اختلاف الشاشة، فقد تبدو مشوشةً وغير واضحة في الشاشات الصغيرة، لذا حافظ دومًا على بساطة التصميم وفكّر بالأحجام المختلفة للشاشات، وكيف ستبدو أيقوناتك فيها، وتجنّب تصميم الشكل على حساب وضوح الأيقونات. 3. الاختيار الخاطئ لمكان الأيقونات إذا كنت تعمل على تصميم كامل أو على تصميمك الخاص، فستصمم الأيقونات بدايةً وتختار أماكنها أيضًا. ومكان الأيقونة هو الموقع الذي ستأخذه لمساعدة المستخدِم وإيصال الرسالة المطلوبة له بصورة صحيحة، طبعًا يجب طرح هذا السؤال قبل تصميم الأيقونات، فتحديد الموقع يُمكّنك من إنشاء تصميم أوضح وأكثر فعالية، ويُعَد مكان الأيقونة أحد العناصر الأساسية التي قد تؤثر سلبًا على التصميم إن لم تنتبه لها كفايةً، فوضع الأيقونة المناسبة في المكان المناسب يجعل التصميم مريحًا ويساعد المستخدِم على فهم أفضل للتصميم، لذا خُذ الموقع المبدئي للأيقونات بالحسبان أثناء تصميمها. 4. التصميم دون استخدام الشبكات Grids الشبكة Grid هي مربعات تملك الحجم ذاته تفصلها مسافات متساوية، وتساعد في الحفاظ على تناسق الأيقونات ضمن حدود موحدة، فقد تتجاوز حجم أو مساحة العنصر سهوًا أثناء تصميمك للأيقونات، وإن لم يكن لأيقوناتك الحجم والمسافات ذاتها، فقد لا تبدو مثل أيقونات أساسًا، وسيعطي التصميم النهائي للأيقونات المبعثرة والعشوائية انطباعًا خاطئًا. ولتجنّب هذا النوع من الأخطاء اعتمد على الشبكات في تصميمك للأيقونات، حيث ستساعد الشبكات المصممين الهواة كثيرًا، وبالتدريب المستمر سيتمكنون من التصميم جيدًا دونها. 5. كثرة العناصر من الأخطاء التي يجب تجنّب الوقوع بها أيضًا، هي زيادة الإضافات والعناصر غير الضرورية إلى الأيقونات لأسباب مختلفة منها تحسين مظهر أيقوناتك، والتي تنتهي عادةً بجعل التصميم أسوأ، لأن أي زيادة بدون توجّه ودراسة ستعيق وصولك للغاية من الأيقونات، إذ يجب تحقيق التوازن بين العناصر الأساسية والكمالية. قد تتمكن من توظيف المنظور والظلال بحكمة في التصميم، لكن لا يمكن للأشكال والخطوط والعناصر غير الضرورية تحسين تصميمك بالطريقة التي تتوقعها، لذا تجنّب استخدام الكثير من العناصر لأجل المظهر فقط. 6. أخطاء المنظور والظلال بفرض أنك تصمم مجموعة أيقونات لموقع أو برنامج معقد، وعليك تصميم أيقونات صغيرة مبتكرة لجعلها أكثر تميّزًا، فإذا حاولت تمييزها بمنظور غير مألوف، فسيكون الأمر صعبًا، إذ في معظم الحالات يجب امتلاك كل أيقونات المجموعة للمنظور ذاته، وعند تغييرك للمنظور من أيقونة إلى أخرى، فهذا سيعرّض مهاراتك التصميمية للنقد. وذات الشيء بالنسبة للظلال، فلها ارتباط مباشر بالمنظور، وتطبيق تأثير الظل على وجه خاطئ أو مبالغ به، سيُفقِد التصميم شكله الاحترافي. لذا يفضل الحفاظ على البساطة إن لم تكن ترغب بإهدار الوقت في إنشاء منظور مميز وظلال فريدة، وإذا أردت ذلك فتأكد من أن المنظور والظل يحسّنان التصميم بزيادة وضوحه وتناسقه. 7. استخدام النصوص يُعَد استخدام النصوص أمرًا آخر عليك تجنّبه أثناء تصميم الأيقونات، وهذا أمر شخصي لأنك قد تضطر أحيانًا لاستخدام نصوص، مثل تصميم أيقونة تتضمن شعار علامة تجارية تحتوي نصًّا، فوقتها ستصبح ملزمًا بإدراجه، ويجدر بك الاهتمام أكثر بالتصميم لأن الشعارات التي تحوي خطوطًا صغيرة ستبدو أصغر عند استخدامها ضمن الأيقونات، كما قد تفقد الوضوح وجمال التصميم. عدا ذلك لا تجعل النص أحد عناصر أيقوناتك، لأن النص قد يجعل الأيقونة مشوّشةً ويخل بالتعريف الأساسي لتصميم الأيقونات، لهذا استغل المساحة في إضافة عنصر مميز واجعل الأيقونات مفيدةً في إيصال أبسط المعلومات للمتلقين. 8. أخطاء التناسق تجنّب ارتكاب أخطاء التناسق Consistency Mistakes، وهي الإضافات التي تُفقد التصميم تناسقه، حيث يجب لمجموعة الأيقونات امتلاك تناسق مرئي، يمنحها هويةً واحدةً، وإذا صنعت تعديلًا مميزًا لكل أيقونة بالمجموعة، فلن تحافظ على درجة واحدة من الاتساق وستُفقدها الترابط المرئي بينها، لذا تذكر الحفاظ على التناسق دون خسارة الإبداع والجمال. 9. عدم أخذ تغيير الأبعاد بالحسبان إذا زدت حجم تصاميمك النقطية Raster Designs فستحصل على نسخ مُخرّبة ومموهة لأيقوناتك، لذا يُفضّل العديد من المصممين تصميم الأيقونات بصيغة الرسومات الشعاعية Vector Format، ولكنها ليست الطريقةً العملية المثالية، ففي بعض الأحيان قد لا تملك أدنى فكرة أين ستُستخدم تصاميمك وكيف ستُعدّل، وإن لم يكن عميلك متأكّدًا من مكان استخدامها النهائي، فقد تواجه تصاميمك بعض المشاكل، وفي هذه الحالات يفضّل إنشاء الأيقونات بأحجام مختلفة كيلا تتأثر عند تغيير حجمها، بحيث تحافظ على جودتها. لذا فالأفضل تصميمها أساسًا بمختلف الأحجام المطلوبة. 10. عدم التركيز على الفئة المستهدفة يُعَد عدم فهمك للفئة المستهدفة هو أحد الأخطاء الفادحة التي قد يرتكبها المصمم، فالتصميم النهائي له هدف، وإن لم يفهم المستخدمون الأيقونات أو لم يتقبلوها، فستكون خاطرت بعدم تحقيق هدفك، إذ قد لا يكون الشكل أو التصميم المثالي بالنسبة لك جيّدًا كفايةً للمستخدِمين، لذا قبل تصميم الأيقونات عليك أن تأخذ بالحسبان أعمار المستخدمين ومعتقداتهم التقليدية وعاداتهم الاجتماعية والمعاني الثقافية وما إلى ذلك، فإن لم تكن الأيقونات مناسبةً أو مقبولة، فستكون المسؤول عن خسارة التصميم كاملًا، ولهذا فمن الأفضل إعطاء الوقت المطلوب وإجراء البحث الكافي لفهم فئتك المستهدفة. 11. اختيار لوحات ألوان غير ملائمة تُعَد الألوان عنصرًا أساسيًا في أي تصميم، ويمكن مساهمة مخطط ألوان Color Scheme جيّد بتحسين تصميمك إلى مستوىً أفضل، وبالعكس، فقد يدمّر مخطط ألوان سيء تصميمًا رائعًا، لذا في تصميم الأيقونات عليك عدم العبث بالألوان كثيرًا، وهذا لا يقلل من أهميّة اللون بأي شكل، حيث يجب أن تتميّز تصاميمك عن تصاميم الآخرين لتبقى في ذهن المستخدِمين ويتمكّنوا من تذكّرها بسهولة، ولهذا تجنّب التصاميم أحادية اللون Monochromatic colors والألوان الباهتة Bland Colors في الأيقونات، واستخدم مخططات لونية Color Schemes جذّابة ومؤثرة لجذب الانتباه المطلوب والتميّز عن المنافسين. وفي نقطة أخرى، لا تغير اللون من أيقونة لأخرى ضمن نفس المجموعة، فقد يخلّ ذلك بعنصر التناسق. 12. الأيقونات المتشابهة كثيرا من المهام الصعبة على المصمم، الحفاظ على تناسق الأيقونات فيما بينها مع إضفاء لمسة مميزة لكل أيقونة بمفردها، فقد يخل أحيانًا بالتوازن بين عنصري التناسق والإبداع عندما يُطلب تصميم مجموعة أيقونات كاملة، فإن كانت أيقوناتك متشابهةً كثيرًا فيما بينها، فقد لا يفرّق المستخدم بينها، وبالتالي لا يُفهم الهدف المحدد لكل منها، كما قد تربك المستخدِمين. لذا حاول الحفاظ على تناسق العناصر الأساسية مع جعل كل تصميم مميّزًا عن البقية لضمان فهم أسهل. 13. تعقيد التصميم التصميم المعقد هو التصميم المتضمن لكثيرٍ من التفاصيل ضمن الأيقونات التي قد تبدو جيدةً في مواقع محددة لكنها غير عملية، فعند إضافة الكثير من التفاصيل لتصميمك، فسيصعُب الفهم على المستخدم، لأن التصميم المعقد يستهلك منك الوقت ويمنح المستخدم تجربةً سيئة، لذا عليك الاكتفاء بتفاصيل تقنعك، ولا تعقّد تصميمك وتجعله صعب الاستخدام. 14. التصميم من الصفر أسهل طريقة لإيجاد الأيقونات هي تصميمها من الصفر، لكن عندها من المحتمل تكرار العناصر الموجودة مسبقًا، وهناك سبب لإنشاء المصممين تصاميم جديدة، فهو أمر مهم لكل من العملاء والمستخدِمين إضافةً لكسره حاجز اللغة، فالأيقونات القديمة والمتشابهة لا تخدم أي هدف، ورغم أهمية استخدام العناصر المتداولة للحصول على أيقونة مألوفة، فيجب تجربة العديد من النماذج والسير والمضي بالعمل حتى الوصول إلى مجموعة أيقونات مميزة وجذابة وعصرية، وبهذه الطريقة تشحذ إبداعك وتتحدى مهاراتك لإنشاء أيقونات مألوفة لكن بطريقة مبتكرة. خاتمة يبدو تصميم الأيقونات بسيطًا للوهلة الأولى، فهو إظهار لخصائص عنصر ما بطريقة مباشرة ومفهومة، إلا أن صعوبة تصميم الأيقونات تكمن في السبب ذاته، ففي تصميم الرسومات Graphic designing، ينصهر إبداعك بعدة عناصر أخرى بهدف إيصال رسالة ما؛ أما بتصميم الأيقونات فأنت تملك إبداعك مع القليل من العناصر الأخرى فقط، وتجعل مجموعة الأيقونات الناجحة التصميم ملفتًا وواضحًا سهل الفهم، وبذلك تخدم العلامات التجارية في منح المستخدِم تجربةً أفضل، فارتكاب أبسط الأخطاء أثناء تصميم الأيقونات يسبِّب التباسًا في رسائل واضحة بمعلومات مضللة، مؤديًا إلى تجربة غير موفقة للمستخدِم، لقد شملت القائمة المذكورة بالأعلى كل تفصيل دقيق ومهم عليك معرفته بصفتك مصممًا، ويكمن دورك الآن في توظيف هذه المعرفة في تصميم أفضل للأيقونات. ترجمة -وبتصرّف- للمقال 14 Things Not To Do When Designing Icons. اقرأ أيضًا تصميم عالم صغير في زجاجة بالفوتوشوب تصميم ملصق لشعار فيلم Deadpool ببرنامج الفوتوشوب تصميم ملصق فضاء ذو أسلوب قديم مع أضواء ملونة بالفوتوشوب

يُعَد الفوتوشوب برنامجًا مُسليًا وكثيرَ الخيارات، حيث تستطيع من خلاله تصميم لوحات فنية عديدة، بتأثيرات جذابة وبدقة عالية، لذلك سنطلق العِنان لمخيلتنا ونبدأ بتجربة فنية بديعة. سنتعلّم في هذا المقال كيفية إدخال بحر إلى زجاجة باستخدام التقنيات العديدة لأنماط الدمج Blending mode والمرشحات Filters، وكذا مختلف تقنيات الفوتوشوب العملية، بحيث نحصل على تلاعب جميل بالصور يكون مشروحًا بسرعة وسهولة. وسنتعلّم أيضًا العديد من المعلومات المميزة والتقنيات المبهرة. وإن أردت الرقي بمهاراتك التصميمية إلى مستوىً أفضل، فهذا المقال موجه لك وسيكون مفيدًا لك في ذلك. سيحتاج هذا التصميم صورًا كثيرة، لذا جهّز مجموعةً من الصور مثل الموجودة بالأسفل، والتي يمكنك الحصول على صور مشابهة لها في مواقع تخزين الصور Stock photos websites. أدرج صورةً لزجاجة في ساحة العمل، وأزل أي شعار موجود عليها. سمِّ هذه الطبقة "زجاجة"، واضغط عليها مرتين من أجل فتح إعدادات الطبقة Layer Style، ثم اسحب منزلق المزج Blending حتى تقلل من الشفافية. غيّر لون الزجاجة من Image > Adjustments > Photo Filter. ولتعديلٍ أفضل لدرجة اللون اختر Image > Adjustments > Selective Color. أدرج صورةً لغطاء من الفلين وضَعه في فوهة الزجاجة. أضف قناعًا Mask لطبقة غطاء الفلين ليبدو وكأن جزءًا منها داخل الزجاجة، بعد ذلك ارسم على القناع بفرشاة ذات تعتيم 50% حتى تخفي جزءً من الغطاء ضمن الزجاجة. خفّف الإضاءة بسحب خط منحنيات الإضاءة للأسفل من Image > Adjustments > Curves. واجعل أجزاء الزجاجة الملامسة للماء داكنةً، وذلك عن طريق سحب الخط كما في الصورة الموالية. الماء وسطح المحيط حدّد لأي مستوى في الزجاجة ترغب ملئ الماء به. لوّن الماء بفرشاة زرقاء وفق الشكل الذي رسمته، ثم غيّر نمط الدمج Blend mode إلى Multiply. لمنح الماء تأثير الشفافية عبر اختراق الضوء له، أنشئ تدرجًا في الألوان من الفاتح إلى الداكن. بعد ذلك انسخ جزءًا من صورة بحر إلى ساحة العمل، وامسح الأجزاء الإضافية فيها ليبقى فقط سطح البحر الملائم لعملنا. امنح السطح تأثير التقوّس بالضغط على الطبقة مرتين لفتح إعداداتها، ثم إضافة تأثير ظلّين الأول خارجي Drop Shadow والثاني داخلي Inner Shadow، واضبطهما كما في الصورة الموالية. غيّر صبغة لون سطح الماء Hue من Adjustments > Hue/Saturation، ثم غيرّ تألقه من Adjustments > Curves إلى ما يلائم عملنا. يمكننا إضافة تأثير ارتطام أمواج البحر بسطح الزجاجة باستخدام أجزاء من صورة بحر هائج، وأدرجها مع إخفاء الأجزاء غير اللازمة. الصياد والمركب أدرج صورةً لصياد ثم غيّر أبعادها ومكانها. أخفِ أجزاء الصورة غير المطلوبة، وعدّل ألوانها لتلائم باقي العناصر من Adjustments > Curves. خفّف التعتيم إلى نحو 75% مما يعطي تأثيرًا بوجودها تحت الزجاج. أكمل الجزء السفلي من المركب بالاستعانة بصورة لمركبٍ آخر، وأخف الأجزاء غير الملائمة، مع وضعها بطريقة يبدو من خلالها الجزآن مركبًا واحدًا، ثم غيّر التعتيم إلى 30%. يبدو المجداف طويلًا وبالتالي غير مكتمل، لذا علينا رسمه يدويًا، وعند الانتهاء استخدم أداة الحرق Burn Tool لإضافة ظلال تمنح المجداف عمقًا. طيور النورس وتفاصيل البحر أدرج صورةً لطيور نورس في ساحة العمل. ولدمج الصورة سريعًا، عدّل نمط الدمج. امسح الأجزاء الإضافية غير اللازمة بتلوينها بالأسود ضمن قناع Mask على الطبقة. أدرج صورة دلافين وألغِ إشباعها اللوني. غيّر نمط الدمج إلى Overlay. امسح الأجزاء الزائدة. أدرج صورةً لقناديل بحر بنفس الطريقة التي أُضيفت بها الدلافين. أدرج صورةً لشعب مرجانية، وحرّكها إلى قاع الزجاجة. امسح أجزاءً منها كما هو موضّح، ثمّ امنح الطبقة ظلًّا خارجيًا بالنقر عليها مرتين Layer Styel > Drop Shadow، ثم اضبط الإعدادات كما في الصورة الموالية. سنملأ المنطقة الفارغة أسفل المرجان ببعض الرمال، ثم نحددها بأداة التحديد Select Tool ونلوّنها بالأبيض، بعد ذلك غيّر لون المقدمة Foreground color ولون الخلفية Background color إلى درجتين من اللون البني، ثم من شريط الأدوات بالأعلى اختر Filter > Add Noise، أضف تمويهًا Blur أو زد وضوح الصورة Sharpen بحسب ما تفضل. يمكنك إضافة أصداف ونجم البحر فوق الرمال لإبراز المزيد من التفاصيل. الفقاعات ارسم دائرةً واضحة الحواف بفرشاة قاسية Hard brush، ثم أزل المركز بفرشاة ناعمة Soft brush كما في الصورة، وبعد الانتهاء أدرجها مثل فرشاة جديدة من خلال تحديد مساحة تحوي الشكل المطلوب، ثم اختر Edit > Define Brush Preset. اضبط إعدادات الفرشاة كما في الصورة، ثم ابدأ برسم الفقاعات، وأضف بعضها حول كل من الشعاب المرجانية والمجداف وذيل الدلفين. أشعة الضوء والهالة المحيطة ما سنفعله باختصار هو إدراج السُحُب عبر Filter > Render > Clouds وFilter > Render > Difference Clouds، وتطبيق تأثير التمويه Blur filter عليها، ثم إزالة الأجزاء الإضافية، وتغيير نمط الدمج إلى Overlay وتخفيف التعتيم Opacity. والخطوات ذاتها بالنسبة لأشعة الضوء. عناصر إضافية إدراج خلفية باهتة لسماء وغيوم. أخفِ الأجزاء الواقعة خارج الزجاجة، وخفّف التعتيم إلى 20%. ولكسر الزجاجة، أدرج صورةً كالآتية. ضعها في موقع مناسب بتحريكها Edit > Free Transform، وامنحها تأثير الالتفاف من Edit > Puppet Wrap، حتى تصل إلى شكل كالتالي: امسح الأجزاء الزائدة عن حواف الزجاجة. وغير نمط الدمج إلى Soft Light. ضاعف الطبقة وحرّك الطبقة الجديدة بضع بكسلات للأسفل، مما يعطي انطباعًا بسماكة الزجاجة. وبالعودة إلى طبقة الزجاجة، امسح جزءًا منها يوافق الكسر. أدخل أشعة شمس من فتحة الكسر وذلك بتحديد مسار الأشعة، ثم اختر Image > Adjustments > Curves واضبط الإعدادات كما في الصورة. عند الانتهاء يمكننا إضافة ظل للزجاجة، لهذا ارسم شكلًا بيضويًّا وتأكد من تحديده، واختر Select > Modify > Feather، ثم أدرج طبقةً جديدةً ولوّن التحديد السابق باللون الأسود، مع التعديل على الموقع والتعتيم حتّى تصل إلى التأثير المرغوب. زِد الظلال وانعكاسات الضوء على سطح الزجاجة، وبهذه الخطوة ينتهي عملنا. بخصوص الصورة النهائية فقد أضفنا يدًا إلى المشهد ككل لمنح المشاهد استيعابًا للأحجام، بحيث يُدرك أنها زجاجة سحرية صغيرة. ولإنهاء العمل غيّرنا أبعاد الصورة وزدنا الوضوح مع تطبيق تصحيحات بسيطة للألوان، وأضفنا خلفيةً بديلةً ممكنةً. نتمنى أن الدرس قد مفيدًا وممتعًا. ترجمة -وبتصرّف- للمقال Create A Tiny World In A Bottle Photoshop Tutorial. اقرأ أيضًا تصميم ملصق فضاء ذو أسلوب قديم مع أضواء ملونة بالفوتوشوب تصميم ملصق لشعار فيلم Deadpool ببرنامج الفوتوشوب

سنتعلم في هذا المقال كيفية تصميم ملصق جذَاب ومؤثر بطابع قديم، حيث سنطبق خطوات إنشاء خطوط ضوئية جميلة وفريدة تعطي الملصق طابعه المميز، ولفهم المحتوى بصورة أفضل سنحتاج لمعرفة مسبقة بأساسيات الفوتوشوب، فتصميمه يتطلّب استخدام أدوات البرنامج الأساسية، مثل أداة الحرق Burn Tool وفُرَش الرسم والمرشحات Filters وغيرها، وفي النهاية سنضيف بعض البُنى المميزة التي توحي بأن الشكل من عالم آخر، ويمكنك توظيف التقنيات المشروحة في تصميم الملصقات الإعلانية أو استخدامها مثل تأثيرات أنيقة لصورك، وذلك فقط باطّلاع بسيط على مجال التصميم وقليل من الجهد، ونتمنى لك تعلّم أساليب جديدة. 1. أنشئ مستندا جديدا بالفوتوشوب أنشئ مستندًا جديدًا بالفوتوشوب Ctrl/Cmd + N واضبط الإعدادات كما يلي: ثم اختر أداة دلو الطلاء Paint Bucket Tool واختصارها B، ولوّن الخلفية بالأسود ذو الدرجة #000000. 2. أضف تدرجا لونيا للخلفية لإضافة تدرج لوني Gradient Overlay، اضغط مرتين على طبقة الخلفية من نافذة الطبقات لإلغاء القفل عنها، ثم كرر الضغط عليها مرتين لفتح نافذة الإعدادات Layer Styles، واضبط الإعدادات مثل الصورة التالية: 3. أضف المزيد من الألوان إلى الخلفية في الخطوة السابقة أضفنا تدرجًا لونيًا للخلفية، والآن سنضيف المزيد من الألوان لجعلها أجمل، لهذا أدرج طبقةً جديدةً واختر فرشاة رسم كبيرة وناعمة لأداة الفرشاة Brush Tool واختصارها B، ثم لوّن ضمن اللوحة عشوائيًا، وغيّر خيارات الفرشاة حتى تصل لنتيجة مُرضية. لقد اخترنا درجات من اللونين الأصفر والبرتقالي، ولست مضطرًا طبعًا للتقيّد بذلك ويمكنك اختيار أي درجة تُلائم ملصقك. حوّل هذه الطبقة إلى طبقة ذكية، وذلك بالنقر عليها بالزر الأيمن ثم اختر Convert to Smart Object، ولدمجٍ أفضل للألوان، طبّق مرشح تمويه الحركة Motion blur filter من شريط الأدوات بالأعلى Filter > Blur > Motion Blur وفق الإعدادات المرفقة بالصورة التالية، ثم غير اسم الطبقة إلى "ألوان 1" واجعل التعتيم Opacity 15%. يجب إبقاء الخلفية داكنةً، فلن يعطي تأثير الإضاءة الذي سنصممه لاحقًا التأثير ذاته عندما يُطبّق على خلفية فاتحة، سنحاول حاليًّا إضفاء بعض الألوان بلطف على الخلفية السوداء. 4. استمر بإضافة المزيد من الألوان إلى الخلفية أدرج طبقةً جديدةً، وكرر الخطوات السابقة بألوان مختلفة، وللحفاظ على ترتيب وتنظيم العمل، سمِّ هذه الطبقة "ألوان 2". 5. ادمج بنية أضواء النجوم ابحث في الإنترنت عن صورة مشابهة لصورة الإضاءة بموقع Star-Light، ثم افتحها على فوتوشوب وحرّكها إلى ساحة العمل بأداة التحريك Move Tool ذات الاختصار V، بعد ذلك حوّلها إلى طبقة ذكية Smart object، ثم اجعل الصورة أصغر باختيار Edit > Free Transform أو الاختصار Ctrl/Cmd + T، ثم قلِّل الأبعاد أثناء ضغط زر Shift دون إفلاته، وذلك للحفاظ على تناظر الصورة. غيّر الآن اسم الطبقة إلى "بنية أضواء النجوم" ثم غيّر نمط الدمج Blending mode إلى Overlay وتعتيم 20%. 6. أضف صورة الفضاء ابحث عن صورة فضاء مناسبة وافتحها على الفوتوشوب، وبما أننا نريد بُنية الصورة فقط دون ألوانها، فألغِ إشباعها اللوني من شريط الأدوات بالأعلى Image > Adjustment > Desaturate، أو بالاختصار Ctrl/Cmd + Shift + U. حرّك الصورة إلى ساحة العمل الأساسية بأداة التحريك Move Tool، ثم حوّل الطبقة إلى طبقة ذكية واستخدم التحريك الحر Ctrl/Cmd + T لتغيير حجم الصورة وتدويرها بالزاوية التي تجدها مناسبة، ثمّ سمِّ هذه الطبقة "بنية الفضاء"، وغيّر نمط الدمج إلى Soft Light وتعتيم 30%. 7. إنشاء النجوم أدرج طبقةً جديدةً ولوّنها بالأسود #000000 بأداة دلو الطلاء Paint Bucket Tool التي اختصارها G، وانقر على هذه الطبقة بالزر الأيمن وحوّلها إلى طبقة ذكية، ثم من شريط الأدوات بالأعلى اختر Filter > Noise > Add Noise واضبط الإعدادات مثل الصورة الآتية، وسمِّ الطبقة "نجوم"، مع تغيير نمط الدمج إلى Screen لإزالة اللون الأسود، والآن أصبح لديك الكثير من النقاط البيضاء لكنها لا تشبه النجوم بعد. أدرج طبقة ضبط المستويات Levels adjustment layer لإنقاص عدد النقاط البيضاء، وذلك عبر Layer > New Adjustment Layer > Levels واستخدم الإعدادات الموضحة بالصورة، ولإنقاص عدد النجوم أكثر ومنح التأثير المزيد من الواقعية، يمكنك إضافة قناع Mask إلى طبقة النجوم Layer > Layer Mask > Reveal All والرسم بفرشاة سوداء B لإزالة المزيد. 8. ابدأ تصميم تأثير الأضواء الملونة أدرج طبقةً جديدةً أعلى الطبقات Shift + Ctrl/Cmd + N، واختر أداة مستطيل التحديد Rectangular Marquee Tool التي اختصارها M، وحدد شكلًا كما في الصورة، واضبط اللون إلى الأبيض #ffffff، ثم اختر أداة التدرج Gradient Tool التي اختصارها G، وتأكد من نافذة الخيارات بأن التدرج هو بين اللون الأبيض والشفافية، ثم اضغط زر Shift. وبدون إفلاته اسحب الخط الأفقي لأداة التدرج من الحافة اليسرى لإطار التحديد إلى حافته اليمنى، ثم اختر Select > Deselect أو الاختصار Ctrl/Cmd + D لإزالة التحديد. حافظ على ترتيب العمل بتسمية هذه الطبقة "خط"، ولإضافة قناع إلى هذه الطبقة اضغط Layer > Layer Mask > Reveal All، واضبط اللون إلى الأسود #000000 مع التأكد من أن أداة التدرج ما زالت بوضع التدرج بين اللون الأبيض والشفافية، ثم أضف تدرجًا يبدأ هذه المرة من أعلى الخط الأبيض، ثم تدرجًا آخرًا من أسفل هذا الخط كما توضح الصورة: 9. العمل على الخط انقر بالزر الأيمن على طبقة "خط" التي أنشأتها في الخطوة السابقة، واختر Convert to Smart Object، ثم ضاعف هذه الطبقة Ctrl/Cmd + J واختر Edit > Transform > Flip Horizontal، ثم حدد طبقتي الخطين معًا من قائمة الطبقات من خلال الضغط على الطبقات المطلوبة مع زر Shift أو Ctrl/Cmd، وبعد تحديد طبقتي الخطين اضغط Edit > Free Transform أو الاختصار Ctrl/Cmd + T، ثم اسحب الحافة العلوية للأسفل لتقليل ارتفاعهما فلا نريد أن تصل الخطوط إلى نهاية الحافة العلوية للّوحة. 10. تغيير إعدادات الطبقة ضع طبقتي الخطين معًا في مجموعة جديدة وسمّها "1". يمكنك إنشاء المجموعة بالاختصار Ctrl/Cmd + G، ثم غيّر تعتيم المجموعة "1" إلى 80%، ولإنشاء تأثير الإضاءة ضع المجموعة "1" ضمن مجموعة جديدة وسمّها "خطوط"، ثم غيّر نمط الدمج إلى Color Dodge. الآن يفترض أنك حصلت على خطين ملونين شبيهين بالصورة الموالية: 11. ضاعف الخط سنستخدم الخط المُنشأ مثل قالب للخطوط الأخرى، ثم نعدل كل منها لمنحه هيئةً واقعيةً، بدايةً ضاعف المجموعة "1" وذلك بسحبها ووضعها فوق أيقونة إدراج الطبقة الجديدة أسفل نافذة الطبقات، ثم حرّك عناصر المجموعة الجديدة إلى اليمين بأداة التحريك Move Tool واختصارها V، وذلك حتّى تتقاطع مجموعتا الخطوط كما في الصورة. قلّل ارتفاع المجموعة الثانية بتحديدها، ثم اضغط على Edit > Free Transform أو الاختصار Ctrl/Cmd + T، ثم اسحب الخط العلوي لمربع التحريك إلى الأسفل قليلًا، وغيّر تعتيم المجموعة إلى 70%. 12. أنشئ المزيد من الخطوط كرر الخطوة السابقة لإنشاء المزيد من الخطوط، وغيّر ارتفاع كل مجموعة باستخدام التحريك الحر واختصاره Ctrl/Cmd + T، خفّض تعتيم كل مجموعة بالتدريج مع الاقتراب إلى طرفي اللوحة. 13. أنشئ خطوطا أصغر أنشئ مجموعةً جديدةً وسمِّها "خطوط صغيرة"، وغير نمط الدمج إلى Color Dodge وضعها أسفل مجموعة "خطوط"، ثم ضاعف إحدى طبقات الخطوط من مجموعة "خطوط" Ctrl/Cmd + J، وضعها في المجموعة الجديدة. اجعل الطبقة أصغر بتحريكها بينما تضغط زر Shift من Edit > Free Transform، أو الاختصار Ctrl/Cmd + T. ضاعف هذه الطبقة Ctrl/Cmd + J ثم اختر Edit > Transform > Flip Horizontal. وأخيرًا ضع هذين الخطين منتصف اللوحة كما في الصورة الآتية. 14. إنهاء الخطوط استمر بإضافة خطوط صغيرة بين الخطوط الكبيرة، وغير التعتيم لكل طبقة منها ضمن المجال 40-70%. 15. تخصيص فرشاة جديدة خصص فرشاةً جديدةً لإضفاء بعض التفاصيل على الملصق، وذلك باختيار أداة الفرشاة Brush Tool التي اختصارها B، ثم اختر فرشاةً قاسيةً مثل نقطة بداية ننطلق منها، ثم افتح نافذة الفرشاة F5 واضبط الإعدادات مثل الصورة التالية لتخصيص فرشاتك، بعدها احفظها بالضغط على زر Create new brush الموجود أسفل هذه النافذة: 16. استخدم الفرشاة الجديدة ضاعف طبقة "خطوط" وحولها إلى طبقة ذكية بالضغط عليها بالزر الأيمن واختيار Convert to Smart Object، بعدها أدرج قناعًا لهذه الطبقة Layer > Layer Mask > Reveal All، وغير اللون إلى الأسود #000000، ثم اختر الفرشاة التي أنشأتها، ولوّن بها القناع لإزالة أجزاء من هذه الطبقة، مما يعطي الإضاءة تفاصيل أنيقة، بعد ذلك استخدم الفرشاة بقطر رئيسي حوالي 50px في مركز الخطوط، ثم أصغر من ذلك بالاتجاه نحو أطراف الخطوط. غيّر نمط الدمج إلى Overlay بتعتيم 25%، وأضف تأثير تمويه من Filter > Blur > Motion Blur، مع ضبط الإعدادات كما في الصورة، ثم أضف بعض التشويش من Filter > Noise > Add Noise. 17. أدرج صورة الفضاء ابحث في الإنترنت عن صورة لمجرة كونية وافتحها على الفوتوشوب، ثمّ ألغِ إشباعها اللوني بالاختصار Ctrl/Cmd + Shift + U وحرّكها إلى لوحة العمل، سمّ هذه الطبقة "بنية"، ثم حوّلها إلى طبقة ذكية، واجعلها أصغر ودوّرها من Edit > Free Transform أو بالاختصار Ctrl/Cmd + T، واضغط على زر Shift دون إفلاته أثناء تصغير الحجم. ضع هذه الطبقة ضمن مجموعة جديدة Ctrl/Cmd + G سمّها "فضاء"، واضبط نمط الدمج إلى Color Dodge، مع الضغط على طبقة "بنية" لتفعيلها وأضف قناع أسود اللون من Layer > Layer Mask > Hide All، الآن اختر فرشاةً بيضاء ناعمةً لأداة الفرشاة Brush Tool واختصارها B بتعتيم 50% وقطر رئيسي 100px، ثم لوّن باستخدام الفرشاة ضمن الجزء العلوي من اللوحة لإظهار الأجزاء التي ترغب بها من صورة الفضاء. 18. اجعل درجات الألوان ذات طابع قديم احفظ ملف العمل بالصيغة التي تريدها، ويفضّل بصيغة PSD (صيغة فوتوشوب)، ثم حمّل مجموعة تأثيرات الفوتوشوب الجاهزة من صفحة DeviantART، وجرّبها للحصول على ألوان متنوعة، وعندما تجد ما يناسبك تكون قد أنهيت العمل. حدّد كامل العمل Ctrl+A ثم انسخه وادمج عناصره Ctrl+Shift+C وألصقه، ثم اختر Filter > Sharpen > Unsharp Mask > OK مما يجعل الشكل أوضح، وحاول عدم المبالغة باستخدام هذا التأثير. ختاما بهذا نكون قد أنهينا ملصق الفضاء القديم وأنشأنا تأثير إضاءة مميزة باستخدام الفوتوشوب، كما أنشأنا نجومًا من تأثير التشويش. نتمنى ان تكون استمتعت وتعلمت بعض تقنيات التصميم المفيدة. اقرأ أيضًا تصميم ملصق لشعار فيلم Deadpool ببرنامج الفوتوشوب كيفية تصميم ملصق مستوحى من فيلم حرب النجوم باستخدام فوتوشوب كيفية إنشاء تأثير كاريكاتيري مضحك في Adobe Photoshop كيفية قص الشعر من الخلفيات المعقدة في الفوتوشوب