سوف نتحدث في هذا المقال عن موضوع يُخفِي في طياته أكثر مما يبدو لنا، وهو تناسق العلامة التجارية. لماذا سنتحدث عن هذا الموضوع؟ ببساطة، لأن الفهم المعمق لمفهوم التناسق في تصميماتك سيولد نتائج مذهلةً، أولها مثلًا إسعاد المستخدمين، إذ يتيح التصميم المتناسق للمستخدمين الشعور بالألفة تجاه موقعك الإلكتروني وعلامتك التجارية أو أيًا كان ما تصممه، بحيث يجعلك مطمئنًا إلى أن ما يهتمون به ويتفاعلون معه هي علامتك التجارية.
ويعني ذلك ضمان التناسق الاهتمام الدقيق بجميع مراحل التصميم وأجزائه وأصغر مكوناته، بحيث تنسجم مع بعضها البعض في مشروع واحد، إذ سيؤدي التخطيط والتصميم والاختبار -مع مراعاة مفهوم التناسق في التصميم- إلى توفير الكثير من المتاعب في نهاية عملية التصميم.
فمثلًا، إذا كنت تعمل على مشروع تصميمي، فسيكون له حضور فعلي، لهذا يجب ألا تكون الرسالة الضمنية للعلامة التجارية ونظام الألوان المستخدم وما إلى ذلك من أمور تصميمية أخرى، متناسقةً مع موقعك الإلكتروني فحسب، بل كذلك مع رسالة العلامة التجارية في كامل حيثياتها، أي يجب أن ينسجم الواقع الافتراضي مع العالم الحقيقي.
قد يخلق هذا التناسق جوًا من الثقة ويوفر للمستخدمين تجربةً يمكنهم الاعتماد عليها في كل مرة، كما يذهب إلى أبعد من شكل وأسلوب الموقع، ليصل إلى أنماط تفاعلية وسلوكية. وبما أنك مصمم، فأنت تحتاج إلى أن تضمن تحقيق التناسق في تصميماتك بدءًا من نواة الشركة، إذ يُولَد التناسق من رحم التوافق بين النشاط التجاري للشركة وأهداف المستخدمين.
كيف يتعامل الناس مع علامتك التجارية؟ وكيف تريد أن تُعرف شركتك؟ وما هي الأسئلة التي قد يطرحها المستخدمون لديك؟ وما هي أسهل الطرق بالنسبة لهم لإكمال مهمة أو عملية معينة في موقعك؟ من المهم للغاية وضع تصور يصاحبه تناسق في التصميم، وبالتالي تقديم تجربة مستخدم متناسقة ذات تصميم متناسق.
تاريخ تطور مفهوم التناسق في تصميم هوية العلامة التجارية
في خمسينيات القرن الماضي، في مرحلة ما بعد الحرب العالمية المليئة بالتفاؤل، تطورت عقلية تجارية جديدة تسمى بتوحيد المعايير، وهي عملية تطوير وتنفيذ المعايير الفنية، والتي برزت بوصفها قوةً مركزيةً في عصر جديد من الازدهار.
ورغم وجود الرؤى اللازمة، إلا أن التقنيات المتوفرة في ذلك العصر كانت تفرض قيودًا على أعمالهم، فقد اعتمدوا على الإعلانات الإذاعية، والإعلانات التلفزيونية للأطفال (على بضع قنوات قليلة)، وتقنيات الطباعة الأقل تطورًا، أي لم تستطع الشركات الوصول إلى المستهلكين كما هو الحال في وقتنا الحاضر.
ومع ذلك، استفاد مصممو الإعلانات من وسائل الاتصال التي كانت متوفرةً لديهم إلى أقصى حد ممكن، وسعوا جاهدين لتحقيق البساطة في إخراج تصاميمهم بطرق لم يواجه العملاء مشاكل في فهمها، فكانت العلامات التجارية تتمحور حول التصميمات البسيطة والجذابة، والتي يمكن لسائقي السيارات مثلًا استيعابها في ثوان أثناء مرورهم بجانب اللوحات الإعلانية الطرقية.
وما يزال مفهوم تناسق العلامة التجارية الذي كان في الماضي معمولًا به حتى يومنا هذا، لكن مع تغير في البيئة، التي أصبحت أكثر تطلبًا وتنافسيةً، فقد تغيرت الطريقة التي تتعامل بها الشركات مع علامتها التجارية على نحو جذري بالموازنة مع ذلك العصر، ولم يَعُد يكفي اختيار كلمات ذكية وتصميمات ثابتة ومتوازنة مثل ما كان في تصاميم العقود الماضية، والتي أصبحت اليوم عبارةً عن شعارات مبتذلة بألوان غير جريئة ومظهر تقليدي جدًا، وفي حال لم يكن هذا هو هدفك منها، فقد يكلفك ذلك الكثير.
أما اليوم، فقد أعادت التقنيات الحديثة من تعريف الواقع للمستخدمين بطرق عديدة، فقد كانت الشركات في السابق مقيدةً بالتقنيات المتاحة في ذلك العصر، والتي كانت بدائيةً، مما جعلهم محميين بها؛ لكن في نفس الوقت، لم يكونوا قريبين من المستخدم مثلما هو الحال اليوم، كما لم يكن عليهم مواجهة التحديات التي يواجهها نظراؤهم في هذا العصر.
أصبح مجتمعنا في عصرنا هذا صعب الإرضاء فيما يتعلق بإعجابه بالعلامات التجارية، فقد كان اعتماد العلامات التجارية على إعلانات الراديو والتلفاز والإعلانات المطبوعة مثل الصحف والمجلات؛ أما اليوم، فقد تطور ذلك إلى بُعد جديد كليًا، إذ أجبر الإنترنت الشركات على تطوير مستواها فيما يتعلق بالترويج للعلامات التجارية والإعلان عنها، خاصةً مع ظهور وسائل التواصل الاجتماعي، فاليوم يتفاعل المستهلكون مع العلامات التجارية بأساليب وأماكن عديدة، بحيث أصبح التناسق في تصميم العلامة التجارية عمليةً أكثر تعقيدًا.
يحلل العديد من المستخدمين اليوم النتائج، ويدققونها ويستخلصونها بناءً على معايير عديدة، كما يلاحظون تواجد العلامة التجارية عبر قنوات وأجهزة مختلفة وعديدة، وفي عدد لا يُحصى من السياقات، ومع كل هذه العوامل التي يجب أن توضع في الحسبان، كيف يمكن للشركات أن تصل أو تحقق تناسقًا في علامتها التجارية؟ وما الذي يمكن للمصممين فعله لتلبية متطلبات العلامات التجارية في بيئة مشبعة بالتوقعات المتغيرة باستمرار؟
حسنًا، يعني التعقيد الذي يحدث اليوم لنا -نحن المصممين- أنه يجب عليك السعي لتحقيق تناسق تام، رغم إدراكك أن تنوع القنوات والأجهزة والسياقات التي يتفاعل المستخدمون والشركات معها سيجعل الأمور أكثر صعوبةً، لذا علينا أن نظل واقعيين في العالم الحقيقي للمستخدمين لتوفير أفضل تجربة ممكنة لهم. ولحسن الحظ، هناك عدة طرق من شأنها مساعدتك على مواكبة توقعات المستخدمين والتكيف معها.
الأمر لا يتعلق فقط بالتسويق
التناسق هو تكرار لنشاطات التسويق، أي أنه يضمن أن يجد المستخدمون دائمًا نفس الرسالة التي تبثها العلامات التجارية مرارًا وتكرارًا، لذا فكر في سلسلة المطاعم المفضلة لديك، وتخيل أنك تشعر بالجوع، وقد انعطفت لتوك عند زاوية الشارع، متوقعًا أن ترى تلك اللافتة التي اعتدت رؤيتها فوق المطعم.
سواء أكنت تدرك ذلك أم لا، فإنك تشعر بالراحة عندما يقع نظرك على تلك العلامة المميزة بشعارها ونظام ألوانها، ومن خلال رؤية هذا المعيار المحفوظ في ذاكرتك، يصبح لديك إيمان بأنك على بعد خطوات قليلة من الحصول على ما تطلبه معدتك، وبذلك يكون تناسق التصميم قد أدى وظيفته.
لكن أصبح مفهوم التناسق في التصميم اليوم أوسع مما كان عليه سابقًا، إذ تحتاج الشركات وعلاماتها التجارية إلى أن تكون أكثر جرأةً في هذا المضمار الجديد، فقد تطور مفهوم الهوية البصرية عما كان عليه في ذلك الزمان، والذي كان فيه الشعار يعني كل شيء، فقد أصبحت الطريقة التي تتفاعل بها العلامة التجارية اليوم مع المستخدمين في العالم الافتراضي -وكذلك العالم الحقيقي-، لا تقل أهميةً عن شعارها، من أجل إنشاء هوية والحفاظ عليها.
لقد انتقلت العلامات التجارية من الأساليب التقليدية القديمة وغير المباشرة (مثل الإعلانات على شاشة التلفزيون أو اللوحات الطرقية أو إعلانات المجلات) إلى سلسلة طويلة من العمليات التفاعلية، وإذا كنت تعتقد أن مثل هذه التفاعلات تجرى على أجهزة الحاسوب، فأنت محق في رأيك.
بحسب دراسة أجرتها شركة جوجل، وجدت فيها أن 90% من الوسائط تُستهلك على شاشات الأجهزة، كما يكون حوالي خُمسيها على الهواتف الذكية، أي أن المستخدمين يتفاعلون مع العلامات التجارية عبر أجهزتهم المحمولة أكثر من أي شيء آخر، لذا كان على العلامات التجارية إعادة التفكير في استراتيجيتها، وكان على المصممين المعاصرين الدخول في هذا المضمار عبر إنشاء هويات شديدة المرونة للعلامات التجارية.
تقديم تجربة متسقة
التناسق هو السبيل نحو تحقيق ما يسمى بقابلية الاستخدام Usability والوصول إلى تجربة مستخدم فعالة، إذ يسهل التصميم المتماسك في جميع الأجهزة والتنسيقات عملية التعلم ويعزز الألفة والترابط، كما يضمن عدم اضطرار المستخدمين إلى إعادة التعرف على العلامة التجارية للمرة الثانية.
يُعَد التصميم المتسق أمرًا لا بد منه من أجل الجوانب العاطفية والمعرفية للمستخدم؛ كما أنه من الأسهل أيضًا الحفاظ عليه من وجهة النظر التنظيمية، إذ سيكون المستخدمون قادرين على تذكر التفاصيل في التصميم؛ أما التغيرات الكثيرة، فستجعل الأمر أصعب عليهم، مما قد يدفعهم إلى التساؤل عما إذا كانت العلامة التجارية ليست كما تدعي، وهذا قد يكلفها خسارة إيمانهم بها، حتى لو كانت هناك حاجة إليها في بعض الأحيان.
يعلم من شاهد مباريات كأس العالم على التلفاز أن الإعلانات هي عامل جذب كبير للمشاهدين، إذ تَعرِض التصميمات الرائعة للإعلانات العلامات التجارية على الجماهير التي أصبح من الصعب إرضاؤها مع كل هذا التطور، لذا تُعَد طريقةً مناسبةً لجذب المستخدمين عبر شاشات التلفاز في جميع أنحاء العالم؛ كما تعلم العلامات التجارية ذات الميزانيات الهائلة أن اختيار هوية مميزة لعلامتها التجارية يُعَد أمرًا حيويًا بالنسبة لنشاطها التجاري، إذ سيتفاعل المشاهدون مع العلامات التجارية على هواتفهم المحمولة حتى أثناء جلوسهم في المنزل ومشاهدة المباريات على شاشات التلفاز الكبيرة، كأن يتفقدوا الإعلانات المميزة للعلامات التجارية، أو يطلعوا على أحدث أخبارها لرؤية ما قد فاتهم.
يواجه المستخدمون اليوم خيارات واسعةً لا تنتهي من منتجات العلامات التجارية، وكثيرًا ما تراهم يواجهون صعوبةً في الاعتياد على منتجات شركة ما، إذ تبدو ببساطة بمظهر مختلف فيما بينها، مما يصيب المستخدمين بما يسمى بتجربة المستخدم المتكسرة.
تُعَد تجربة المستخدم المتكسرة مشكلةً كبيرةً تواجهها العلامات التجارية، ولحسن الحظ يمكن معالجتها عبر خمس طرق يجب أن تعرفها بوصفك مصممًا:
- التناسق البصري والتبسيط: اجعل تصاميمك أكثر بساطةً في مرحلة التخطيط عبر استخدامك لخطوط وألوان موحدة، وما إلى ذلك من أمور تضيف الانسجام إلى كامل تصاميمك.
- التناسق السلوكي: أي إعادة استخدام أنماط التصميم التي ثبت نجاحها.
- التحسين السلوكي: أي التصميم بهدف جعل المستخدمين يؤدون المهام إما بجهد أقل (أو أكثر فاعلية)، وذلك عبر التخلي عن التكرار (أو العمل غير الضروري).
- استراتيجية التجربة الموحدة: وتعني إعادة النظر في سير العمل المثالي بالنسبة للأفراد العاملين في المشروع.
- ثقافة تجربة المستخدم UX: وتعني فهم تجربة المستخدم وجعلها أولويةً أساسيةً قبل أن تصمم.
التصميم المتناسق
بمجرد أن تحدد المتطلبات اللازمة لتصميم تجربة مستخدم متسقة، يجب أن يُترجَم هذا التناسق على شكل واجهة مستخدم وتصاميم رسومية، ولتحقيق هذا التناسق البصري علينا أن نراعي عدة عوامل في تصميماتنا، مثل:
- الألوان: ما هو اللون الأساسي المستخدم في التصميم؟ وما هي الألوان الثانوية؟ ضع في حسبانك أهمية الألوان المختلفة، وما هي طبيعة علامتك التجارية؟
- الرسوميات: كيف ستستخدم الصور؟ وماذا عن الأيقونات والأزرار؟ فكّر في هوية وشخصية علامتك التجارية، هل من المناسب أن تكون قاسيةً وعمليةً كما هو الحال دائمًا؟ أم أن علامتك التجارية أقل جديةً؟ إذ يجب أن يُعكس ذلك على الرسوميات المستخدمة.
- الطباعة: ما هو التسلسل الهرمي الذي ستستخدمه للمحتوى (العناوين الرئيسة والعناوين الفرعية وما إلى ذلك)؟ وما هي أحجام الخط؟ وأين سيُعرض النص المتعلق بعناصر التصميم الأخرى؟ وهل هناك إمكانية لإضافة جرعة من المرح إلى تصميمك؟
- الأحجام: ما هو حجم كتل المحتوى التي ستستخدمها؟ وما هو حجم الصور؟ وما هي العلاقات التي ستربط بين عناصر التصميم فيما يتعلق بالحجم؟
على الرغم من أهمية التناسق بين جميع الصفحات، إلا أنه من المهم على نحو خاص أن تكون متسقًا بالطريقة التي تستخدم بها العناصر الأكثر أهميةً في التصميم المرئي وتصميم الواجهة، إذ سيلاحظ المستخدمون ما إذا كان شعارك يقفز إلى موضع مختلف مع كل صفحة جديدة، كما سيلاحظون ما إذا كان توضع القائمة مثلًا سيتغير فجأةً من أعلى الصفحة إلى جانبها، أي أنهم سيلاحظون التناقضات في العناصر الأكثر أهميةً في الصفحة أكثر من ملاحظتهم لاختلاف الخط في الفقرة الثالثة عشرة من المحتوى.
أصبح لزامًا على المصممين في الآونة الأخيرة أن يكونوا أكثر شجاعةً، لكن دون أن يتهوروا، فهذا العصر هو للعلامات التجارية التي تتميز بالمرح وقابلية التكيف. فكّر مثلًا في جوجل وشعارها الذي نراهم دائمًا لا يخشون تعديله وتكييفه! فقد ولَّت أيام تقديم التصميم وافتراض أنه سيعجب المستهلكين.
أصبح اليوم يتعين على المصممين تلبية احتياجات المستهلكين بناءً على ملاحظاتهم، ورغم أنها لعبة محفوفة بالمخاطر، إلا أنها تؤدي الغرض منها، لذا التزم بالمبادئ الأساسية التي قامت عليها العلامة التجارية وحافظت عليها تاريخيًا مع التأكد من تلبيتها لاحتياجات وخصائص المستخدمين المستهدفين، ومن هنا اجعل تصميمك يتحلى بالمرونة اللازمة.
بناء التناسق في تصميماتك
لحسن الحظ هناك العديد من الطرق لضمان الوصول إلى تناسق في تصميماتك:
دليل الأسلوب
دليل الأسلوب -أو كما يسمى بالإنكليزية Style Guide- هو توثيق يحدد كيفية استخدام عناصر التصميم. إنه مثل الملاحظات الإرشادية التي يقدمها العملاء للمصممين في بعض الأحيان، لكنه يتعمق أكثر ليربط الأنماط مع العناصر الرئيسية للتصميم، وغالبًا ما ينشئ معظم مصممي مواقع الإنترنت دليل أسلوب من أجل أن يكونوا على وفاق مع متطلبات العميل منذ المراحل الأولى لعملية التصميم.
مكتبات الأنماط
وتشبه دليل الأسلوب، لكنها أوسع، فهي عبارة عن وثائق مفصلة لكل عنصر سيستخدم في التصميم. تأتي مكتبات الأنماط عادةً بثلاثة أنواع هي:
- أنماط التصميم.
- أنماط التوصيف.
- أنماط المحتوى.
حيث أن:
- أنماط التصميم: توضح تفاصيل عناصر التصميم وكيفية استخدامها، بحيث تشمل أنماط العناوين والنصوص والأيقونات وما إلى ذلك.
- أنماط الترميز: وهي مكتبة أنماط لكلا لغتي التوصيف CSS وHTML، مع توفير أصناف لكليهما، بحيث يكون من السهل توسيع الموقع الإلكتروني باستمرار في المستقبل.
- أنماط المحتوى: تحدد هذه المكتبة أسلوب المحتوى الذي سوف تستخدمه على الموقع، لكن في نفس الوقت تُعَد عملية تطويرها صعبةً في بعض الأحيان، إذ من الصعب توقع جميع أنواع المحتوى التي قد تستخدمها في المستقبل، ومع ذلك يمكن أن يساعد تقديم أنماط المحتوى إلى العملاء في ضمان توافق تصميماتك مع المحتوى الذي يستخدمونه.
أطر عمل لغة التوصيف CSS
تُستخدم أطر العمل بلغة التوصيف CSS لمساعدتك في تحقيق تناسق في التصميم، حيث يمكنك استخدام أي إطار عمل تفضله من أجل التوصيف بتعليمات CSS، وتُعَد شائعةً جدًا في تصاميم ووردبريس؛ أما أكثر أطر العمل استخدامًا فهي منصة تويتر بوتستراب.
خاتمة
يتيح التناسق للمستخدمين الشعور بالألفة تجاه الموقع الإلكتروني والعلامة التجارية التي تصممها، حيث نستخدم -نحن المصممين- التناسق في تصميماتنا لتعزيز الثقة مع مستخدمينا، وقد كان هذا الأمر أسهل في العقود الماضية؛ أما اليوم في عصر تفاعلي متعدد المنصات، فلدينا مجموعة كبيرة من التنسيقات والقنوات والأجهزة التي يجب مراعاتها واختيارها.
لذا في مرحلة وضع المفاهيم العامة للتصميم، فكّر في ما قد يربطه المستخدمون بعلامتك التجارية وكيف يشعرون تجاهها. أي على سبيل المثال، إن كنت تصمم لصالح مصنع لتصنيع ألعاب الأطفال، فيجب أن تضيف جرعة من المرح إلى الصور والخطوط؛ أما إذا كنت تصمم لبائع زهور، فيجب أن تحافظ على نغمة محايدة، لأن الزهور تصلح لجميع المناسبات.
تذكر أن هذا التناسق يُحدَّد عبر مواءمة النشاط التجاري للعلامة التجارية مع أهداف المستخدمين المستهدفين، ثم نقلها إلى جميع أجزاء الشركة، وذلك بدءًا من العلامة التجارية والتسويق وتجربة المستخدم (هنا نتحدث عن التناسق في سلوك المنتج والخدمة عبر جميع الأجهزة المختلفة والمنصات)، إلى الواجهة والتصميم الرسومي.
كيف تريد أن يشعر المستخدمون تجاه علامتك التجارية؟ يجب أن ينعكس جواب هذا السؤال على تصميمك الذي تعمل عليه؛ بحيث يكون تصميمك قادرًا على توجيه المستخدمين للتفاعل مع علامتك التجارية، كما يجب دائمًا أن تحافظ على التناسق حتى في أصغر الأشياء مثل الهوامش، فقد يلاحظ المستخدمون أدق التفاصيل. ضع في حسبانك أيضًا أن التناسق في التصميم يجعل العلامة التجارية جديرةً بالثقة في نظر العملاء، إذ يثق المستخدمون في التصميم الذي يحافظ على تناسقه خلال كامل تجربة المستخدم.
ترجمة -وبتصرّف- للمقال Consistency: MORE than what you think لصاحبه Mads Soegaard.
أفضل التعليقات
لا توجد أية تعليقات بعد
انضم إلى النقاش
يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.