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. اقرأ أيضًا قواعد تصميم الواجهات واجهات المستخدم اﻷكثر شيوعا مقدمة عن أنماط تصميم واجهة المستخدم وقوالب تصميمها مع أمثلة عملية دليل المصمم لتصميم واجهات تطبيقات ويب مذهلة الوصايا العشر لتصميم واجهات مستخدم احترافية