البحث في الموقع

سأقدِّم لك أداةً رائعةً للتصميم: أرأيت؟ ألم ترَ؟ إنها الفراغات البيضاء! حسنًا، ربما مزاحي لم يكن في محلّه، أعترف بذلك. أنا آسف. صحيحٌ أنَّ تعريفي للفراغات البيضاء لك لم يكن مثاليًا، لكن الفراغات البيضاء هي من أهم الأدوات في تصميم الويب، ولكن يغفل عنها الناس معظم الوقت. أعلمُ أنَّ من الممتع العمل على عناصر أخرى من تصميم الويب، مثل سمة الألوان، أو الخطوط، أو التخطيط العام للصفحة… خصوصًا عندما تُنشِئ مشروعًا لعميلٍ ما (ملاحظة شخصية: لا أظن أنَّ هنالك عميلًا في العالم يلقي بالًا لطريقة تحسين الفراغات البيضاء لموقعه الجديد!). ومع ذلك، قد تستفيد من الفراغات البيضاء خيرَ استفادة إن استطعت استخدامها استخدامًا صحيحًا. وسأتطرّف في هذا الدرس إلى آلية فعل ذلك. لماذا الفراغات البيضاء مهمة في تصاميم الويب بدايةً، الفراغات البيضاء ليست مفهومًا جديدًا في عالم التصميم، إذ استعمِلَت لقرون كالأداة رقم 1 لإعطاء تركيز على العناصر المهمة في التصميم. والأمر سيانٌ في يومنا هذا. على سبيل المثال، إذا كانت لديك لوحةٌ جميلةٌ وتريد أن تُظهِر اهتمامك بها، فإن أفضل طريقة هي: (1) وضع إطار حولها، و (2) ألّا تضع أيَّ شيءٍ آخر على ذاك الجدار (انظر الصورة أدناه). وبشكلٍ مشابه، أفضل طريقة لإعطاء أولوية لأحد عناصر صفحة الويب هي عدم وضع أي شيء حوله، وكلما قلَّت الأشياء التي حول ذاك العنصر، كلما كان ذلك أفضل. ما رأيك أن ترى مثالًا بدلًا من إطالة الكلام (الصورة خيرٌ من ألف كلمة). هذا موقعٌ تدخل إليه يوميًا: يستعمل موقع Google هذا المظهر منذ سنوات، وربما أصبح شكله مألوفًا، لهذا قد لا تفكّر في تصميم الصفحة كثيرًا. لكن دعنا نتوقف قليلًا ونفكِّر كم أنَّ من السهل أن تضع Google بعض الأشياء الإضافية في الصفحة. إذ يستطيعون تضمين الأخبار (من Google News) وسيكون بعض الأشخاص سعداء بذلك. ويستطيعون أيضًا تضمين مربع لبريد Gmail لكي يتمكن الجميع من التحقق من الرسائل التي تأتيهم على بريدهم مباشرةً. أو أن يضعوا مربعًا لتقويم Google، وهلم جرًا… الاحتمالات والإمكانيات غير محدودة، إلا أنَّ Google قرروا عدم وضع أيّا من تلك الاحتمالات في الصفحة الرئيسية؛ إذ قرروا أنَّ يضعوا حقل البحث فقط (بالإضافة إلى الشعار، وبعض الأشياء في الركن العلوي الأيمن إن سجَّلتَ دخولك). لكن لماذا؟ لماذا وضعوا حقل البحث فقط؟ الجواب بسيطٌ للغاية، وإنّي واثقٌ أنَّك تعرفه مسبقًا: بوضع حقل البحث في الصفحة بمفرده، فسيظهر الغرض من الصفحة جليًا أمامك. فسيعلم زائر الصفحة بعد دخوله إليها مباشرةً ما الغرض منها وكيف يستعملها، فلا يضيع وقته بمحاولة «فهم» ما الذي يجري في الصفحة. وهذا يتوافق تمامًا مع هدف Google الرئيسي. يريدونك أن تستعمل محرك البحث الخاص بهم، وتُشكِّل الفراغات البيضاء أحد الأشياء التي يستعملها مطورو Google لكي يحثوك على فعل ذلك. لتلخيص ما سبق، يمكن للفراغات البيضاء المُستعمَلة استعمالًا صحيحًا أن: تساعد في حثّ المستخدم على القيام بأمرٍ معيّن تساعد على التركيز على أحد العناصر تساعد في توضيح الغرض من الموقع تعطي تركيزًا على الأشياء المهمة تجعل الأشياء التي ليست مهمة جدًا بأولوية منخفضة تساعد الزائر على المسح البصري للصفحة وتقرير ما الذي يهمه مباشرةً سنتحدث الآن عن كيفية استعمال الفراغات البيضاء بفعالية، بعد بأخذ كل ما سبق بعين الاعتبار. كيف تستعمل الفراغات البيضاء بفاعلية في تصاميم الويب لنتحدث عن الفراغات البيضاء من ناحية منهجية التعامل معها، وبعض المعلومات التقنية الأساسية لكيفية إنشاءها (لكنا لن نشرح الأدوات والطرق المستعملة لذلك). أولا: استعمل الفراغات البيضاء لتدعيم الهدف الأساسي من موقعك حسنًا، هنالك هدفٌ من إنشاء كل صفحةٍ أو كل موقعٍ على الويب. ومن الممكن أن يكون هنالك هدفٌ وحيدٌ لكل صفحات الموقع، أو أن يكون لكل صفحةٍ هدفٌ خاصٌ بها. أيًّا كان، يمكنك أن تستعمل الفراغات البيضاء لجعل تلك الأهداف واضحةً كالبدر في الليلة الصافية. على سبيل المثال، لنلقِ نظرةً على الصفحة الرئيسية لموقع Bigcommerce: من الواضح أنَّ الهدف الرئيسي من الصفحة هو إقناعك -أي الزائر- أن تُسجِّل تجريبيًا في Bigcommerce. وفي الواقع، لا يوجد أيٌ شيءٍ في الصفحة سوى عنوان بخطٍ كبير الذي يحاول إقناعك، بالإضافة إلى فراغات بيضاء كبيرةٍ حوله. حسنًا، تُمثِّل الصورة مثالًا عن المنتج، لكنها موجودةٌ في مركز الصفحة، مما يزيد في إضفاء الأهمية على العنوان. لم يسبق لي التّعامل مع Bigcommerce، إلا أنني متأكدٌ أنَّهم يستطيعون إضافة أشياءٍ كثيرةٍ في الصفحة الرئيسية؛ إلا أنَّهم قرروا عدم فعل ذلك. لماذا؟ لتدعيم الغرض الرئيسي من الصفحة. ثانيا: استعمل الفراغات البيضاء للحث على القيام بإجراء معين هذه إحدى قواعد التصميم الجيد للويب: افترض دومًا أنَّ الزائر لا يعرف ماذا عليه أي يفعل في الخطوة القادمة. أنَّى لهم أن يعلموا؟ لا تنسَ أنهم لم يصمموا أو يبرمجوا الصفحة، وإنما أتو لتوهم إليها … ربما عن طريق الخطأ! استعمل الفراغات البيضاء لمساعدة الزوار ليعلموا ماذا عليهم أن يفعلوه. الفكرة بسيطة: إذا لم يكن هنالك الكثير من الأشياء في الصفحة فيمكن للزائر أن يتفاعل مع الأشياء القليلة المتبقية في الصفحة. هذا مثالٌ من Crazy Egg: قد نعتبر أنَّ الصفحة السابقة فارغة تقريبًا، إذ أنَّ التصميم شبيهٌ جدًا بتصميم صفحة Google الرئيسية؛ لكنه يوضِّح ماذا يستطيع أن يفعل المستخدم. حتى لو لم تتعامل مع Crazy Egg من قبل، فيمكنك أن تعرف ماذا عليك أن تفعل بسرعة. حيث يوجد حقل إدخالٍ فيه تلميحة ("Your website URL") وزر يقول "Show Me My Heatmap". الغرض من هذه الصفحة واضحٌ ألا وهو حثّ المستخدم على اتخاذ إجراء، وتساعد الفراغات البيضاء بذلك، وتجعل الصفحة أكثر "نظافةً". ثالثا: ليس من الضروري أن تكون الفراغات البيضاء "بيضاء" ربما هذه اللحظة مناسبة لكي أصحِّحَ لبسًا في المفاهيم: ليس من الضروري أن يكون لون الفراغات البيضاء هو اللون الأبيض. بأبسط الكلمات، الفراغات البيضاء تعني عدم وجود أي عناصر ذات محتوى، ولا تعني أنَّ تلك الفراغات لونها أبيض. بهذا الخصوص، تستطيع استخدام مختلف العناصر كفراغات بيضاء. يمكنك أن تستعمل الألوان التي تحبها، على سبيل المثال Marshall: أو يمكنك أن تستعمل خلفية مشوشة (blurred) أو نقوش. مثالٌ من Zapier: في النهاية، يمكنك أن تخاطر باستخدام صور غير مشوشة لطالما كان هنالك تباينٌ كبيرٌ بينها وبين محتوى الصفحة. يمكنك رؤية مثالٍ عمليٍ عنها في موقع Grammarly: رابعا: استخدم الفراغات البيضاء في القسم العلوي للصفحة شاعت في الآونة الأخيرة ما نسميه أقسام hero‏ (hero sections) أو صور hero ‏(hero images) التي هي الأقسام التي تظهر في أول الصفحة والتي تسترعي انتباه الزوار. ترويسة الموقع أو قسم hero هو المكان الملائم لاستخدام الفراغات البيضاء. حيث ستجد أنَّه من السهل جدًا استعمال الفراغات البيضاء في تلك الأماكن، وستعطيك مكانًا رائعًا للتحدث فيه عن خدمتك التي تقدمها. الذي أقصده هو أنَّ هذا القسم في أعلى الصفحة وسيراه كل زائر… حيث لا يمرر إلى أسفل الصفحة إلا القليلون، بينما سيرى جميع الزوار القسم العلوي منها. لذا ركِّز على هذا وتأكّد أن تستغل الفراغات البيضاء جيدًا في هذا القسم. على سبيل المثال، إحدى صفحات موقع Teespring: سنرى الكثير من العناصر في القسم الذي يلي قسم hero مع فراغات بيضاء قليلة. إلا أنَّ المنطقة العلوية تقوم بعملها على أتم وجه بدعم بتدعيم الهدف الرئيسي من الصفحة وتوضيح الأمور للزائر. خامسا: استخدم الفراغات البيضاء للتلاعب بالمشاعر هنالك الكثير من الأدوات بحوزتك إن كنت تسعى خلف التأثير عاطفيًا على الزائر فيمكنك أن تستعمل الألوان، أو صورة جيدة، أو قد تستفيد من الفراغات البيضاء! جميع العناصر السابقة لها دورٌ عندما يأتي الأمر إلى إنشاء استجابة عاطفية، لكن الفراغات البيضاء تضفي لمسةً من «الدراما» إلى الموقف. فبنفس الطريقة التي تستطيع الفراغات البيضاء تدعيم هدف الصفحة، ستستطيع أن تدعِّم العاطفة التي تود التأثير عليها عند الزائر. لننظر إلى هذا المثال من Todoist: Todoist هو أداة لإنشاء قائمة بالمهام. لكن باستخدامهم للمسافات البيضاء استخدامًا جيدًا حول العنوان الرئيسي، جعلوا الصور بارزةً وأضفت بعض المشاعر الإيجابية. فبدلًا من عرض صورة للمنتج نفسه، عرضوا صورةً لشخصٍ سعيدٍ يبدو أنَّه يستمتع بيومه، بعد أن أنهى مجموعةً من المهام الموكلة إليه. سادسا: حارب نزعة المصمم لملء الفراغات حسنًا، نحن البشر نحب أن نملأ الفراغات؛ فعندما نرى مكانًا فارغًا، سنفكر -لا إراديًا- كيف نستطيع أن نملأه. لكن هذه العقلية -الطبيعية جدًا- قد تسبب مشكلةً للمصمم. فعلى عكس رفوف المكتبة، ليس عليك في تصميم الويب أن تطمح إلى ملء جميع الفراغات. لذا ابدأ هكذا: ضع هدفًا للصفحة واختر عنصرًا وحيدًا يستطيع تحقيق ذاك الهدف؛ الذي يمكن أن يكون «عنوانًا رئيسيًا + دعوةً إلى إجراءٍ ما». ضع ذاك العنصر في منتصف التصميم. ضع فراغات حوله. أضف عناصر أخرى حول تلك الفراغات. سابعا: فكر بما تستطيع حذفه، لا بما تستطيع إضافته هذه النقطة مرتبطةٌ بالنقطة التي تسبقها؛ لكن بالمقلوب. بعد أن تنتهي من تصميمك، قد تشعر أنَّ هنالك أشياءً كثيرةً هنا وهناك، وستبدأ بالتفكير بالعناصر التي تستطيع حذفها من الصفحة والتي لا تؤثر تأثيرًا سلبيًا على الهدف الرئيسي. فكلما قللت العناصر، كلما كان ذلك أفضل. ويمكنك أن تعتبر أنَّ تصميمك كاملٌ إن لم يبقَ شيءٌ تستطيع حذفه، لا إضافته. ثامنا: كلما كبر حجم الخط، كلما احتجت إلى فراغ أكبر العناوين الكبيرة أصبحت "موضة" في هذه الأيام، وخصوصًا في عصر التصميمات المسطحة والعقلية السائدة المؤيدة لها. لكن الخطوط الكبيرة تحتاج إلى مساحة للتنفس؛ فإن لم تكن هنالك فراغات كافية حول العناوين الضخمة في تصميمك، فستخسر قوتها وستبدو كأنها صعبة القراءة… بغض النظر أنَّها لم تعد فعالةً. لذا ستكون القاعدة كالآتي: استخدم نصًا كبيرًا إذا ما استطعت توفير فراغات بيضاء كبيرة حوله. انظر هذا المثال من Dior: لاحظ حجم الخط الكبير جدًا للعنوان، وكمية الفراغات البيضاء التي حوله. الفراغات البيضاء على الهواتف المحمولة؟ كن حذرًا هنا. صحيحٌ أنَّ القواعد والمبادئ العامة تنطبق على تصاميم مواقع الهواتف المحمولة، ومن المحتمل أن تستفيد من الفراغات البيضاء فيها؛ إلا أنَّ هنالك حدًا دقيقًا فاصلًا بين "الاستخدام الجيد للفراغات البيضاء" وبين "ترك فراغات كثيرة بين العناصر". يكون الحد الفاصل عادةً هو عدِّة بكسلات في أحد الاتجاهات، ومن السهل جدًا أن تنتقل من تجربةٍ رائعةٍ للمستخدم إلى واجهةٍ صعبة التصفح نتيجةً لوجود الكثير من الفراغات. أرى أن تحاول جعل كل كتلة من المحتوى المهم (مثل العنوان + عبارة لحث المستخدم على اتخاذ إجراء) تملأ شاشة الهاتف بأكملها، وإن كانت هذه المهمة صعبةً في بعض الأحيان. على سبيل المثال، انظر إلى هذا التصميم من Evernote عندما يُعرَض على هاتفٍ محمول: ستُعرَض الكتلة الرئيسية من المحتوى على كامل الشاشة، ومن ثم سيبدأ المستخدم بالتمرير إلى الأسفل ليرى ماذا تحتوي بقية الصفحة. النقطة الصعبة هنا هي أنَّه عليك أن تتعامل مع أجهزةٍ مختلفةٍ، وفي حين أنَّك تستطيع اختبار التصميم على أكثر الأجهزة شيوعًا، إلا أنَّه من المستحيل أن يبدو تصميمك بشكلٍ صحيح على كل الأجهزة. أضف إلى ذلك أنَّك تريد أن يُعرَض عرضًا سليمًا على الحواسيب أيضًا؛ مما يزيد التعقيد كثيرًا. الرسالة الرئيسية التي أريد أن أوصلها لك هنا هي أن تبقى حذرًا، والزم المبادئ العامة لآلية استغلال الفراغات البيضاء دون الإفراط باستخدامها، وسيكون الأمر على ما يرام. ترجمة -وبتصرّف- للمقال The Importance of Whitespace in Web Design لصاحبه Karol K.

موقعك ميّت؟ يوجد أمل في ذلك. إن المواقع العظيمة لا توجد بالصدفة. يُعتبر الموقع ناجحًا إذا كان مفيدًا، ملائمًا للغرض الذي صُمّم من أجله، ومصمّمًا بصورة جيّدة. أقوم، بصفتي مدير قسم UX في منصّة تصميم المواقع بدون شِفرات، بقضاء الكثير من الوقت بالتفكير حول التصاميم العظيمة وكيفية استخدامها لإنشاء مواقع عظيمة. توجد لمشاريع المواقع المختلفة احتياجات مختلفة، وعلى الرغم من ذلك توجد بعض مبادئ وممارسات التصميم التي تعمّ جميع المواقع. سنلقي نظرة في هذا المقال على خمس نصائح تساعدك على إنعاش موقعك الميّت. 1. فكر في التحويلات Conversionيجب أن يجد العملاء سببًا مبررًا من شأنه إن يؤدي إلى التحويل. التصميم لا يتعلّق بمفهوم الجمال فحسب وإنّما يذهب إلى أبعد من ذلك. نعم أنت تريد من الموقع أن يكون جذّابًا بصريًّا، لكن يجب أن تأخذ بنظر الاعتبار إنّ الموقع ليس عمًلا فنيّا. لا يأتي العملاء إلى الموقع فقط ليُعجبوا بالمظهر المرئي، وإنّما لسبب مبرر؛ كأن يبحثوا عن معلومات معيّنة أو لتنفيذ مهمّة معيّنة. إنّ الموقع الناجح هو الذي يفهم هذه الاحتياجات؛ أي يجب أن يرشد الأشخاص إلى فعل الشيء الذي جاؤوا من أجله بالضبط. عليك أن تتذكّر إنّ إمكانية التحويل للموقع هي عنصر متكامل من تصميم الموقع. إن عملية التحويل تعني تحويل الشخص من مجرد كونه زائر عادي إلى عميل؛ يصبح عضوًا في الموقع، يشترك للحصول معلومات إضافية في المستقبل، أو مجرّد يقوم بملء نموذج استطلاع. يلعب كل جانب من جوانب تصميم الموقع دورًا في قيادة العملاء إلى وجهاتهم وتحويلهم. الصور: يجب أن تكون الصور مثيرة للاهتمام، فريدة من نوعها، وذات جودة عالية.اللون: هل نظام الألوان جذّاب وملفت للنظر؟النص: ويشمل النص المستخدم للمراسلة وكذلك الوصف، التعليمات، والبطاقات.التصفّح: كيف يمكن للأشخاص أن يتنقلوا بسلاسة خلال موقع؟هذه ليست سوى بعض العناصر التي تساهم في التحويلات الناجحة. وبشكل أساسي، كل جزء من أجزاء التصميم يُعتبر عاملًا في تحويل العملاء. انظر إلى المثالين أدناه وقرر أي من هذه المواقع سيحصل على تحويل أكثر؟ موقع Device Magic يمتلك جميع عناصر التحويل الجيد. مفاجأة! هذا الموقع هو موقع حقيقي. إذًا، كيف تعرف أنّ موقعك يمتلك خيارات التصميم الصحيحة فيما يتعلّق بالتحويلات؟ الأمر ليس أن تتخذ قرارًا ثم تجلس آملًا الأفضل، لا بل يجب عليك اختبار قرارات التصميم هذه وأن تكون قادرًا على عمل التعديلات الضرورية. إنّ اختبار A/B هو وسيلة رائعة لمقارنة النتائج بين تصميمين مختلفين. على سبيل المثال، إذا كان لديك زر دعوة إلى إجراء (call-to-action button) كبير على الصفحة الرئيسية لموقعك؛ يجب عليك معرفة اللون، الخط، وحتّى الموضع الذي سيكون أكثر فعّالية لهذا الزرّ. اختبار A/B ضروري لمعرفة ما يصلح أو لا يصلح لتحويل أفضل. عندما تُجري الاختبار الذي يرى فيه بعض المستخدمين الخيار (A) والبعض الآخر يرى الخيار (B) يمكنك بذلك دراسة النتائج لمعرفة البُنية ذات الأداء الأفضل والتي ينتج عنها تحويل أكبر للعملاء. عندئذ يمكنك عمل تغييرات وإجراء تجارب إضافية في محاولة إيجاد أفضل خيار مُتاح للزرّ. وهذا هو الشيء الذي يجب أن تفعله للتصميم النهائي لموقعك. 2. لا تخش المساحات البيضاءالمساحات الكافية بين العناصر تعني تجربة قراءة ممتعة أكثر. الاستخدام الفعّال للمساحات البيضاء هو خاصيّة أخرى مهمّة لتصميم موقع عظيم. يُنظر إلى المساحات البيضاء من قِبل غير المصمّمين على أنها المساحات من الموقع التي لم يُطبّق عليها تصميمًا معيّنًا. بينما يعتبرها خبراء تصميم المواقع مساحات مصمّمة بتأنٍّ، سواءً استُخدمت هذه المساحات حول الصور، المحتوى النصّي، أزرار التحويل، أو أي عنصر آخر من عناصر الموقع. ويصِف المصمم البارز Ellen Lupton المساحات البيضاء أفضل وصفٍ بقوله: (أي إنّ المساحات البيضاء مهمّة بقدر المساحات المملوءة بعناصر التصميم). في بعض الأحيان، تتصور الشركات صفحات مواقعها على أنها صحيفة، حيث تسعى إلى ملء كل بكسل متوفّر بمحتوى معين، واحِدًا تِلوَ الآخر، تمامًا كالذي يحاول ملء كل بوصة من الصحيفة بأعمدة من النصوص. قد يصلُح هذا الاستخدام العدواني للمساحات في مجال الصحف، لكنّ المواقع ليست صحف، والأشخاص لا يستخدمون محتويات المواقع بنفس الطريقة التي يستخدمون بها الصفحات المطبوعة. إنّ المباعدة الكافية بين عناصر الصفحة تُتيح لزوّار الموقع تجربة قراءة أكثر متعة، كما تسمح لهم بالتركيز على أجزاء معيّنة من الصفحة بدون تشتيتهم بالأشياء الأخرى حولها. تُتيح المساحات البيضاء التألق للمحتوى دون الحاجة إلى قتال ما يجاوره من أجل جذب الانتباه. توجد طريقة رائعة لاستخدام المساحات وهي Parallax Scrolling. يُعرّف Parallax على أنّه اختلاف المنظر، وهو تأثير يحدث عندما تتحرك الصور الأمامية في الموقع بسرعة مختلفة عن الصور الخلفية مما يعطي الموقع إحساسًا بالعمق والحركة. يمكن استخدام هذا التأثير بصورة فعّالة جدًّا كأداة رواية القصّة Storytelling. تظهر العناصر الأخرى للصفحة (كالصور، النصوص، الخ) على الشاشة في أوقات مختارة عندما يقوم المستخدم بالتمرير خلال الصفحة. ومن الضروري استخدام التوقيت المناسب والمُباعدة الفعّالة لجعل العناصر تمتلك الوقْع الأقوى. يخاف العديد من المصمّمين من المتطلبات التقنية لإضافة Parallax Scrolling، لأن الشفرة البرمجية للمواقع والضرورية لتشغيله يمكن أن تكون شاقّة لغير المطوّرين. مع ذلك، تتوفر إضافات Parallax Scrolling والتي تجعل، وبشكل بديهي، تطبيق هذه التأثيرات أكثر سهولة، بالإضافة إلى المساحات المناسبة بين هذه العناصر المتحرّكة، كلّ ذلك دون الحاجة إلى كتابة سطر واحد من الشفرات. 3. تنسيق النصوص، تنسيق النصوص، تنسيق النصوصلا تستخفّ أبدًا بالخطوط. على الرغم من أن الفيديوهات الرائعة والصور المذهلة لها مكانة عظيمة على الإنترنت، ألا أنّ حقيقة الأمر إنّ المواقع هي في الغالب عبارة عن محتوى نصّي. فلو كانت هنالك مساحة واحدة في موقعك يمكن من خلالها جلب انتباه إضافي إلى التصميم، سيكون ذلك عن طريق أسلوب تنسيق النص لهذا الموقع. اقتصرت إمكانية المواقع، ولعدة سنوات، على استخدام مجموعة من "الخطوط الآمنة للمواقع" مثل: ArialVerdanaTimes New RomanGeorgiaTahomaLucidaImpactوغيرها الكثيرهذه هي الخطوط المؤكّد تثبيتها أساسًا على جهاز الحاسوب الخاص بك (لأن المواقع ستقرأ الخطوط من جهاز الحاسوب). على الرغم من ذلك، اتخذ اختيار الخطوط في السنوات الأخيرة قفزة كبيرة إلى الأمام وذلك بعد استحداث خاصيّة font-face@. بهذه الخاصيّة يمكن إرفاق ملفات الخطوط مع المصادر الأخرى، كالصور، والتي يحتاج الموقع استخدامها لغرض العرض بصورة صحيحة. لذلك، وبدلًا من جلب الخطوط من حاسوب المستخدم يمكن للموقع استخدام ملفات الخطوط المرفقة، مما يسمح لهذا الموقع الوصول إلى مجموعة مذهلة من خيارات الخطوط المستخدمة في ذلك التصميم. إنّ امتلاك إمكانية وصول إلى أنواع كثيرة من الخطوط يُعتبر أمرًا رائعًا، لكنّ طريقة الاستفادة من هذه الخطوط هي النقطة المهمّة هنا. ومع تعدد الإمكانيات المتوفّرة لمصممي المواقع في الوقت الحاضر، ما تزال المهارات العالية في فن تنسيق النصوص هي الجزء الحاسم أكثر من أي وقت مضى. فضلًا على ذلك، يجب اختيار نوع الخط المناسب لغرض استخدامه في مشروع معيّن بالرغم من وجود العديد من أنواع الخطوط المذهلة. المفتاح هنا هو أن تعرف إي نوع من الخطوط يكون مناسبًا لتصميمك (serif، sans-serif، slab-serif، إلخ). لا يقتصر فن تنسيق النصوص على اختيار نوع الخط فقط، وإنمّا اختيار حجم ولون الخط الذي يستخدم لكتابة النص، بالإضافة إلى سُمْك الحروف، المسافات بين الحروف والكلمات وحولها، وغيرها الكثير من الأمور. وقبل كل شيء يُعنى هذا الفن بالمحتوى النصّي الممتع والسهل للقراءة. صفحة Design Can Change هي مثال جيد على التوازن. موقع Design Can Change هو مثال جيّد على استخدام العناصر الصحيحة المذكورة في هذا المقال. تجعل النصوص باللون الأسود والأبيض ذات الأحجام المختلفة من الرسالة واضحة داخل الخلفية ذات اللون الأحمر الزاهي، بالإضافة إلى المساحات البيضاء الكافية التي ترشدك إلى قراءة الرسالة التي قد تكون قصيرة ولكنّها مؤثّرة. تذكّر، الموقع ليس مجرّد صورة جميلة وُجدت لغرض الإعجاب بها. إذا احتوى الموقع على نصوص (وأي موقع لا يحتوي على نصوص؟) فإنّ ذلك يعني أنه وُجِد لكي يُقرأ. قد يكون إيصال الرسالة من خلال موقعك هو من مهام كاتب المحتوى، لكنّ تنسيق النصوص بشكل رائع سيضمن وصول الرسالة بشكل واضح ومؤثّر. 4. أقل وليس أكثرقد تكون بضع كلمات جيّدة المعاني أقوى تأثيرًا من مجموعة من المعلومات إذا أردت توضيح نقطة معيّنة. هنالك مقولة لِـ Antoine de Saint-Exupery من المقولات المتعلّقة بالتصميم المفضّلة لديّ: هنالك دائمًا ميلان لإضافة المزيد من الأشياء عند تصميم المواقع. يطلب العملاء المزيد من الخصائص لإضافتها، يريدون المزيد من الأزرار المحشورة للتصفّح، أو يطلبون بعض الأشياء الأخرى لتكويمها في موقهم الجديد. إن إضافة العناصر أو المحتويات الضرورية لنجاح الموقع يُعتبر شيئًا جيّدًا، لكنّ أيّ شخص يكون قد أجرى هذه المحادثات سيُقرّ بحقيقة أن كل شيء يتم إضافته هو بالتأكيد أمرٌ غير ضروريّ. تؤدّي هذه الإضافات في كثير من الأحيان إلى فوضى في التصميم بدلًا من الوضوح. لذلك فكّر فيما تمتلكه في الموقع وحدّد ما يمكن إزالته عِوضًا عن التفكير فيما يمكن إضافته إلى الموقع. لنأخذ شريط التنقّل Navigation Bar كمثال. إذا كانت لديك عشرة روابط أو ألسنة tabs في ذلك الشريط، فإنّ ذلك سيستغرق الزوّار وقتًا أطول لتحديد الرابط الذي يحتاجونه. وسيقلّ هذا الوقت إذا كانت لديك ثمانية خيارات. وإذا استطعت تقليلها إلى خمسة أو ستّة خيارات فسيكون ذلك أفضل بكثير. الأقل هو الأكثر في هذه الحالة هو لأن العدد القليل من الخيارات سيؤدي إلى السرعة في اتّخاذ القرار. إنّ مستوى الوضوح الذي يمكن تحقيقه من خلال تقليل العناصر (في هذه الحالة روابط التصفّح) ستكون ذات فائدة عظيمة خصوصًا مع الصبر القليل للزوّار والوصول الفوري إلى المحتوى الذي يطالبون به. مثال آخر على مبدأ "الأقل هو الأكثر" هو عندما تحاول التأكيد على شيء معيّن في الموقع. فكّر لدقيقة في موقع نموذجيّ. تستخدم معظم الشركات الصفحة كمنصة لتعزيز أي جزء ممكن من المحتوى قد يحتاجه عملائهم. فهم يقومون بإضافة محتوى كبير للصفحة والتأكيد عليه بجعله كبيرًا، ساطِعًا، وسميكًا. وعلى الرغم من كلّ ذلك فإن النتيجة تكون معاكسة، حيث لا يتم التأكيد على أي شيء رغبوا في التأكيد عليه. عندما تصرخ جميع العناصر من أجل جذب الانتباه يضيع كلّ من هدف ورسالة الموقع في تنافر من الضوضاء. وبإزالة بعض العناصر، ستحظى العناصر المتبقّية بمزيد من التركيز تلقائيًّا. عندما ترغب في التأكيد على جزء معيّن من الصفحة حاول إزالة بعض الأشياء المحيطة به، واستخدم مبدأ المساحات البيضاء، بدلًا من معالجتها بصريًّا بجعلها أكبر أو أكثر سُمكًا. في اللحظة التي تتحرر فيها العناصر المتبقّية من الفوضى المحيطة ستبرز تلقائيًّا، لأنّه أصبح بإمكانها أن تتألق دون أن تتنافس مع عناصر الصفحة الأخرى. هذا الموقع هو مثال جيَد على هذا المبدأ. 5. أضف بعض المرح ولكن لا تتجاوز المعقولإنّ أحد الأهداف التي تملكها، على الأرجح، لموقعك وتواجدك على الأنترنت هو أنك تريد أن تترك انطباعًا معيّنًا لدى الزوّار؛ تريد منهم أن يتذكروا عملك. وإحدى الطرق لتحقيق ذلك هي إضافة بعض "المرح" إلى التجربة. التجربة الممتعة هي عندما يستمتع الأشخاص، وإذا امتلك الأشخاص تجربة ممتعة فهي على الأغلب تجربة لا تُنسى. ربّما تكون ردّة فعلك الأولية هي أنّك لا تستطيع أن تمتلك موقعًا ممتِعًا. لكن لنعرّف المقصود بالممتع هنا. لا يُقصد بالممتع أن يكون تافهًا، الموقع يمكن أن يكون ممتعًا ومِهنيّا في نفس الوقت بإضافة لمسة من البهجة إلى التجربة. وهذا يعني إزالة ما هو ممل واستبداله بشيء آخر بارز. لنأخذ موقع "The Dangers of Fracking" كمثال. هذا الموقع يدور حول مخاطر التكسير الهيدروليكي، لن يتبادر إلى ذهنك المرح إذا فكّرت بهذا الموضوع، مع ذلك هو موقع جذّاب، لافت للانتباه، وبارز بسبب استخدام الرسوم التوضيحية، الرسوم المتحرّكة، وتأثير parallax-style storytelling. يعتبر هذا مثالًا رائعًا على استخدام "المرح" في موقع جادّ لجعل الرسالة والتجربة أكثر قوّةً وتأثيرًا. على الرغم من ذلك يجب ألّا تنسى أنّ هنالك خط لا يجب تجاوزه عند إضافة المرح. من السهل أن تذهب بعيدًا وتنحرف عن الأهداف الأساسية للموقع. من المهم أن تعرف مكان هذا الخط عندما تستخدم هذه الطريقة لكي تتجنّب التجاوز. تذكّر فقط أن هنالك دائمًا فسحة للمرح والبهجة في تجربة الموقع، لكن عملك كمصمّم هو أن تعرف الخط الفاصل بين "الكثير" و "الكافي" ولجلب موقعك عند هذه النقطة. ختاماإذا كان موقعك يحتاج إلى علاج، فإنّ جرعة صحيّة من التصميم، متضمّنة النصائح الخمس المذكورة في هذا المقال، قد تكون هي ما ينصح به الطبيب. أخبر مصمّم موقعك عن أهداف الموقع، وكيف إن إدخال التحسينات إلى التصميم من الممكن أن يساعد على إنعاش موقعك الميّت. ترجمة -وبتصرّف- للمقال 5Web Design Best Practices For a Great Website لصاحبه: Tomer Lerner.

يحبّ المصممون استخدام المساحات البيضاء، ويريد أصحاب المواقع ملأها. قد تبدو المساحات البيضاء واحدة من أكثر الجوانب المثيرة للجدل في التصميم. لماذا هي مهمّة جدًا إذًا وكيف يمكننا أن نضمن استخدامها بأفضل طريقة ممكنة؟ المساحات البيضاء هي حجر البناء الأساسي للتصميم الجيّد. إنّها واحدة من أوائل الأمور التي يفكّر بها أيّ مصمم. ولكن بالنسبة إلى العديد من أصحاب المواقع، فإنّها بكلّ بساطة مجرّد إهدارٍ لمساحةٍ كان يمكن استخدامها بشكلٍ أفضل لإيصال الرسائل، الخدمات والمنتجات التي يريدونها. أرغب في هذا المقال في أنّ أشرح سبب أهميّة المساحات البيضاء وكيفيّة إبقاءها ضمن التصميم دون الإضرار بمهام العمل. وعلى كلّ حال وقبل أن أبدأ في ذلك، يجب علينا أن نوضّح ما نعنيه بـ"المساحات البيضاء". مالذي يعنيه المصممون بالمساحات البيضاء؟عندما يتحدّث المصممون عن المساحات البيضاء، فهم يعنون المساحة السلبية بذلك. بعبارةٍ أخرى فهم يقصدون المسافة بين العناصر على الشاشة. وهي ليست دائمًا "بيضاء". فقد تكون هذه المساحة ملوّنة أو خليطًا من الألوان، ولكن وفي كلتا الحالتين فهي مساحة ضمن تصميم لا تحتوي على أيّ عناصر. يمكنك بالأسفل أن ترى بعض الأمثلة على المساحات البيضاء في عدّة مواقع. الآن وبعد أن قمنا بتعريف مصطلح "المساحات البيضاء" بوضوح، فإنّ السؤال التالي سيكون: “لماذا هي مهمّة؟". لماذا المساحات البيضاء مهمّةالمساحات البيضاء هي عنصر أساسي لأيّ تصميم لسببٍ وجيه. إذا تمّ استخدامها بشكلٍ جيّد فيمكنها أن تحوّل من شكل التصميم وتوفّر له العديد من المزايا والمحاسن. بعض هذه المحاسن يكون جماليًا بحتًا بينما تمتلك غيرها أثرًا مباشرًا على فعالية موقعك. أشارك معكم أدناه 4 إيجابيات لهذا النوع الأخير: تحسين الوضوحأفضل ميّزة للمساحات البيضاء هي أنّها تزيد من الوضوح. تحتاج فقط إلى مقارنة الأمثلة الظاهرة أدناه والمستنقاة من http://alistapart.com/article/whitespace حول المساحات البيضاء لتلاحظ كيفّ أنّ استخدامها بشكلٍ جيّد يمكنه أن يحسّن بشكلٍ هائل من درجة وضوح موقعك: فهمٌ أعلىصدّق أو لا تصدّق، يمكن للمساحات البيضاء بين الفقرات وحول أقسام النصوص أن تساعد الناس على أن يفهموا ما يقرؤون بشكلٍ أفضل. وفقًا لدراسة في 2004، يمكن لهذا النوع من المساحات البيضاء أن يحسّن نسبة الفهم بنسبة 20% تقريبًا. تركيزٌ أفضليمكن للمساحات البيضاء أيضًا أن تكون طريقةً رائعة لجذب اهتمام المستخدمين إلى عنصر معيّن على الشاشة. بالنسبة إلى غير المصممين، فإنّ أسهل طريقة لجعل شيءٍ ما يجذب اهتمامًا أكبر هي عبر جعله أكبر. ولكن غالبًا ما يكون إحاطة العنصر بالمساحات البيضاء فعّالًا بنفس الدرجة. إيصال النبرة الصحيحةوأخيرًا، فإنّ استخدام المساحات البيضاء يمكن أن يكون طريقةً ممتازة لإيصال أناقة ونضارة وانفتاح التصميم. طبعًا، هذه ليست الأمور التي تريد إيصالها دومًا عبر تصميمك، ولكنّ عندما تكون هي ما تريده، فليس هناك شيءٌ أفضل من استخدام العديد من المساحات البيضاء في التصميم. أصبحت محاسن المساحات البيضاء واضحةً الآن. ولكن أحيانًا يحصل وأن يتم طرد المساحات البيضاء خارجًا من التصميم. ولمنع هذا فإنّه يجب علينا أن نفهم لما قد يحصل هذا وكيف نتغلّب عليه. أعداء المساحات البيضاء الثلاثأعتقد أنّه هناك ثلاث أعداء رئيسيين يمنعون من استخدام المساحات البيضاء ضمن التصميم. إذا كنتَ تفهم ما هي هذه الأشياء وكيف تتعامل معها، فحينها ستوفّر فرصة أكبر لتصميمك ليستخدم المساحات البيضاء التي يحتاجها. فلنبدأ بالحديث عن الطيّ (the fold). الطيّ The foldيتم طرد المساحات البيضاء خارج التصميم عادةً بسبب أنّ شخصًا ما ضمن المؤسسة يعتقد أنّ المستخدمين لا يقومون باستخدام شريط التمرير (scrollbar). النتيجة هي أنّهم يصرّون على وضع أكبر كمّية ممكنة من المحتوى في أعلى مكان ممكن على الصفحة مما يمنع من استخدام أيّ مساحات بيضاء ضمن التصميم. وعلى كلّ حال، فقد تم إثبات خطأ فكرة أنّ المستخدمين لا يقومون باستخدام شريط التمرير مبكّرًا في عام 1997، بل وأظهرت دراسات حديثة أنّ المستخدمين يقومون باستخدام شريط التمرير بكثرة للانتقال إلى نهاية الصفحات. بالإضافة إلى ذلك، فإنّه من المهم أن تتذكّر أننا لا نعرف النقطة التي سيقوم المستخدمون بالبدء فيها باستخدام شريط التمرير. يعتمد هذا على نوع نظام التشغيل، المتصفّح، دقّة الشاشة والعديد من العوامل الأخرى. في النهاية فإنّ القلق على فكرة "طيّ" الصفحات هي فكرة خاطئة. بعد قول هذا، فإنّه ما يزال من الجيّد أن تضمن أنّ الرسائل التي تحثّ المستخدمين على اتّخاذ إجراء بالإضافة إلى المحتوى موضوعةٌ في أعلى الصفحة. ولكن، هذا لا يعني أنّه يجب عليك تجاهل المحتوى الآخر ضمن الصفحة. أضف إلى ذلك أنّ وضع الكثير من المحتوى في رأس الصفحة وبدايتها سيقلل من أهمّية المحتوى الرئيسي لأنّه سيتم تجاهله في مقابل محتوىً مجاورٍ أقل كما وضّحنا في نقطة "زيادة الانتباه" في الأعلى. محاولة قول الكثيرسببٌ شائع آخر يتم من أجله عدم استخدام المساحات البيضاء ضمن التصميم هو وجود الرغبة في إيصال الكثير من المعلومات في وقتٍ واحد. يمتلك معظم أصحاب المواقع الكثير من الأشياء التي يريدون قولها ولكنّ المستخدمين لسوء الحظ لا يعيرون سوى القليل من الاهتمام. لذلك فإنّه من المهم بالنسبة لك أن تقوم بـ"صرف" هذا الاهتمام بشكلٍ حكيم. صفحتا جوجل وياهو الرئيسيتان هما مثالٌ جيّد على هذه المشكلة. تعرض كلا الشركتان خدماتٍ مشابهة. ولكنّهما تتخذان مسارًا مختلفًا لطريقة هيكلة صفحتيهما الرئيسيتين. كما يمكنك أن ترى من لقطات الشاشة التالية، تحاول ياهو جلب المستخدم لينظر إلى كلّ شيءٍ في وقتٍ واحد. بينما تعرف جوجل أنّ المستخدم لديه تركيز محدود معك ولذلك فإنّهم يركّزون على منتجهم الرئيسي أولًا – البحث. عبر النظر إلى كلتا الصفحتين فإنّك تدرك مباشرةً أيّ واحدة منهما هي الأكثر فعالية. لكي تستفيد من هذه الفكرة أقترح عليك(أو على أولئك الذين يعملون ضمن مؤسستك والذين يريدون دفع المزيد من المحتوى) أن تقوم بتحديد 15 نقطة لاهتمام المستخدم. كلّ عنصرٍ تقوم بإضافته إلى الصفحة يكلّف نقطةً واحدة. إذا كان عنصرٌ ما على الشاشة أكثر أهمّية بالنسبة لك من واحدٍ آخر فإنّك بحاجة إلى إعطائه المزيد من النقاط لتجعله بارزًا. بعددٍ قليل من النقط المتوفّرة فإنّه يصبح من الواضح بشكلٍ سريع أنّك لا تستطيع قول كلّ شيءٍ تريده على الصفحة الرئيسية، ولذا فإنّه لا يوجد حاجة لإخراج المساحات البيضاء من التصميم. السياساتبالطبع وحتّى في أحسن الأحوال في العالم فإنّ صاحب الموقع قد يضطر إلى إضافة الكثير من المحتوى إلى صفحةٍ ما بسبب سياساتٍ داخلية. عندما يصرّ أحدٌ ما أعلى منك ضمن المؤسسة أن يظهر محتوى مشروعه أو مشروعها بأكمله على الصفحة الرئيسية فإنّه هناك القليل مما يمكنك فعله. هذا هو المكان الذي يعرض فيه كتاب "Laws of Simplicity" بعض النصائح الرائعة. إذا كنت لا تستطيع إزالة قطعة معيّنة من المحتوى من الصفحة، فحينها حاول تقليصها أو إخفاءها. خذ على سبيل المثال الطريق الذي استخدمناه على صفحة موقع Wiltshire Farm Foods الرئيسية. لأسباب عدّة فقد تقرر أن تحتوي الصفحة الرئيسية على الطعام وأخبار الصحّة بغضّ النظر عنّ أنّ هذه المعلومات ستشوّش على الزائر أن يقوم باتخاذ الإجراء المطلوب منه (شراء وجبة) ولم يكن شيئًا تهتم به الشريحة الكبرى من المستخدمين. كان حلّنا هو توفير هذا المحتوى ولكن إخفاؤه إلّا في حال قرر المستخدم عرضه. قطعة صغيرة من شفرة جافاسكربت كانت كافية لتوسيع ذلك القسم عند طلب المستخدم. هذا أخفى ذلك المحتوى عن أولئك المستخدمين الغير مهتمين به وسمح للتصميم بأن يحتوي على المزيد من المساحات البيضاء. الخاتمةهناك جدالٌ بسيط حول ما إذا كانت المساحات البيضاء عبارةً عن أداة قيّمة في التصميم يمكن أن تجعل أيّ موقع يبدو أكثر فعالية. ما أراه هو أنّه لا حاجة لأن تكون هذه النقطة هي نقطة خلاف بين المصممين وأصحاب المواقع. أؤمن بأنّ أيّ تصميم سيكون قادرًا على استخدام المساحات البيضاء بشكلٍ يلائم العمل المطلوب منه تنفيذه. ولكن مالذي تعتقدونه أيها الأصحاب؟ مالمشاكل التي واجهتموها مع المساحات البيضاء؟ لماذا تعتقدون أنّ المساحات البيضاء ضمن التصميم مهمّة جدًا؟ أو لماذا لا تعتقدون ذلك؟ شاركونا آرائكم في التعليقات أدناه. تمّت ترجمة المقال: Why whitespace matters وبتصرّف لصاحبه Paul Boag. حقوق الصورة البارزة: Designed by Freepik.