المحتوى عن 'الألوان'.



مزيد من الخيارات

  • ابحث بالكلمات المفتاحية

    أضف وسومًا وافصل بينها بفواصل ","
  • ابحث باسم الكاتب

نوع المُحتوى


التصنيفات

  • التخطيط وسير العمل
  • التمويل
  • فريق العمل
  • دراسة حالات
  • نصائح وإرشادات
  • التعامل مع العملاء
  • التعهيد الخارجي
  • التجارة الإلكترونية
  • الإدارة والقيادة
  • مقالات ريادة أعمال عامة

التصنيفات

  • PHP
    • Laravel
    • ووردبريس
  • جافاسكريبت
    • Node.js
    • jQuery
    • AngularJS
    • Cordova
  • HTML
    • HTML5
  • CSS
  • SQL
  • سي شارب #C
    • منصة Xamarin
  • بايثون
    • Flask
    • Django
  • لغة روبي
    • Sass
    • إطار عمل Bootstrap
    • إطار العمل Ruby on Rails
  • لغة Go
  • لغة جافا
  • لغة Kotlin
  • برمجة أندرويد
  • لغة Swift
  • لغة R
  • لغة TypeScript
  • سير العمل
    • Git
  • صناعة الألعاب
    • Unity3D
  • مقالات برمجة عامة

التصنيفات

  • تجربة المستخدم
  • الرسوميات
    • إنكسكيب
    • أدوبي إليستريتور
    • كوريل درو
  • التصميم الجرافيكي
    • أدوبي فوتوشوب
    • أدوبي إن ديزاين
    • جيمب
  • التصميم ثلاثي الأبعاد
    • 3Ds Max
    • Blender
  • نصائح وإرشادات
  • مقالات تصميم عامة

التصنيفات

  • خواديم
    • الويب HTTP
    • قواعد البيانات
    • البريد الإلكتروني
    • DNS
    • Samba
  • الحوسبة السّحابية
    • Docker
  • إدارة الإعدادات والنّشر
    • Chef
    • Puppet
    • Ansible
  • لينكس
  • FreeBSD
  • حماية
    • الجدران النارية
    • VPN
    • SSH
  • مقالات DevOps عامة

التصنيفات

  • التسويق بالأداء
    • أدوات تحليل الزوار
  • تهيئة محركات البحث SEO
  • الشبكات الاجتماعية
  • التسويق بالبريد الالكتروني
  • التسويق الضمني
  • التسويق بالرسائل النصية القصيرة
  • استسراع النمو
  • المبيعات
  • تجارب ونصائح

التصنيفات

  • إدارة مالية
  • الإنتاجية
  • تجارب
  • مشاريع جانبية
  • التعامل مع العملاء
  • الحفاظ على الصحة
  • التسويق الذاتي
  • مقالات عمل حر عامة

التصنيفات

  • الإنتاجية وسير العمل
    • مايكروسوفت أوفيس
    • ليبر أوفيس
    • جوجل درايف
    • شيربوينت
    • Evernote
    • Trello
  • تطبيقات الويب
    • ووردبريس
    • ماجنتو
  • أندرويد
  • iOS
  • macOS
  • ويندوز

التصنيفات

  • شهادات سيسكو
    • CCNA
  • شهادات مايكروسوفت
  • شهادات Amazon Web Services
  • شهادات ريدهات
    • RHCSA
  • شهادات CompTIA
  • مقالات عامة

أسئلة وأجوبة

  • الأقسام
    • أسئلة ريادة الأعمال
    • أسئلة العمل الحر
    • أسئلة التسويق والمبيعات
    • أسئلة البرمجة
    • أسئلة التصميم
    • أسئلة DevOps
    • أسئلة البرامج والتطبيقات
    • أسئلة الشهادات المتخصصة

التصنيفات

  • ريادة الأعمال
  • العمل الحر
  • التسويق والمبيعات
  • البرمجة
  • التصميم
  • DevOps

تمّ العثور على 5 نتائج

  1. هل تواجه شركتك بعض المشاكل في تحديد مدى أهمية تجربة المستخدم؟ لا تقلق، فقد قام "جوزيف توث"، كبير مستشاري واجهة المستخدم أو تجربة المستخدم UX/UI في شركة فايزر "Pfizer" بإجمال بعض أقوى الإحصائيات المتعلقة بتجربة المستخدم. 1- التمرير المستمر والذي هو خاصية تحميل المحتوى كلما مررت بالصفحة لأسفل بإمكانه أن يخفض عدد الزوار لموقعك، فنسبة الزوار لموقع Time.com كانت قد انخفضت بمقدار 15% بعد أن قاموا باستخدام خاصية التمرير المستمر. المصدر 2- استثمار بقيمة 10 آلاف دولار في الشركات المتخصصة بالتصميم قد يعود خلال 10 سنوات بربح بنسبة 228% أكثر من نفس قيمة الاستثمار في البورصة الأمريكية "S&P". المصدر 3- زادت إيرادات موقع ESPN.com بقيمة 35% بعد أن استمعوا لجمهورهم وللاقتراحات المتعلقة بتصميم صفحتهم الرئيسية. المصدر 4- اختيار درجة معينة من اللون الأزرق والتخلي عن بعض الدرجات الأخرى نتج في زيادة الأرباح السنوية بمقدار 80 مليون دولار لشركة Bing. المصدر 5- قيمة الربح العائدة على كل 1 دولار يتم إنفاقه على التسويق عبر البريد الإلكتروني هي بمعدل 44.25 دولار. المصدر 6- 88% من المستهلكين عبر الإنترنت قد لا يعودون لزيارة موقعًا إلكترونيًا ما بعد تجربة سيئة. المصدر 7- المواقع التي تستغرق وقتًا أطول في التحميل تكبد تجار التجزئة عبر الإنترنت خسائر تقدر بـ 2.5 مليار دولار سنوياً. المصدر 8- الحكم على مصداقية الموقع تعتمد بنسبة 75% على المظهر الكلي للموقع والكماليات. المصدر 9- الانطباع الأول عن الموقع تعتمد بنسبة 94% على التصميم. المصدر 10- 85% من الأشخاص البالغين يعتقدون بأن نسخة الأجهزة المحمولة لموقع إلكتروني خاص بشركة يجب أن يكون بنفس جودة نسخة الحاسوب إن لم يكن أفضل منها. المصدر 11- في تقييم لـ200 موقعًا إلكترونيًا خاصًا بشركات صغيرة، وُجد بأن 70% منها لم تعرض حثًا واضحًا للتفاعل على صفحاتها الرئيسية كالعروض الخاصة والنشرات الإخبارية عبر البريد الإلكتروني والأدلة الإرشادية والنسخ التجريبية والأدوات التفاعلية. المصدر 12- 90% من الأشخاص يستخدمون شاشات متعددة بشكل متعاقب. المصدر 13- هنالك فرصة بأن تتسلق قمة إيفرست 279.64 مرة على أن تضغط على لافتة إعلانية! المصدر ترجمة -بتصرف- للمقال ‎13 Impressive statistics on user experience لصاحبه: Jozef Toth
  2. اليوم، تبدأ التجارب عادةً على أروقة الإنترنت قبل نزولها إلى الشارع. وفي بعض الحالات، تنتهي التجربة بمجرد عودتها إلى الويب. إذا كنت ترسم فراغًا، لا تنظر إلى أكثر من ذلك. يعرف الزبائن مدى جودة الأكل على الإنترنت من خلال التقييمات و التوصيات. وحتى بعد اختيار المكان المثالي على الإنترنت، يأخذ الزبائن محتوى Yelp معهم - متذكرين أي من مقدمي الخدمة هو الأفضل أو أي الساندويشات تكون "بخبزٍ جيد". بعد ذلك، وبعد انتهاء الوجبة يعود الزبون للتقييم ويتفاعل مع الآخرين. إنّ علاقة الإنترنت - بدون إنترنت (online-offline) ليست محدودة بتطبيقات التقييم. في الواقع، تؤكد أحد أحدث المبادرات الشخصية في InVision على تحويل العلامة التجارية الرقمية خاصتنا إلى تجربة ملموسة - ونحن نشارك الأفكار والرؤى الداخلية مع أي شركة تبحث عن هذا. أشياء رئيسية لوضعها في الحسبان قبل إحضار علامتك التجارية للحياة عندما يكون هدفك هو خلق تجربة، سيكون هناك الكثير من المصاعب قبل أن يتم أي شيء بشكل صحيح. 1. تحديد الزمن إنّ تحديد وقت زمني في البداية يساعد على توضيح إمكانيات كل من له دور. لذلك، يمكن للتجربة أن تتمدد أو تتقلص لتناسب الفترة - أسابيع أو حتى ساعات- لتنافس الأولويات، كما يجب توقع المشاكل. وعندما تبدأ الكرة بالدوران، تستطيع القيام بقرارات استراتيجية عمّا يجب احتواءه أو تجاهله بناءً على كمية الوقت التي تملكها مقارنةً بالنتائج المتوقعة. 2. وضع مصادر الأفكار وجمع الإلهام الداخلي تتضمن الخطوة الثانية، العمل الجماعي. في الوقت الذي تقوم به بتحضير تفاصيل التجربة التي تريد إنشاءها، قم بجمع المصادر من فريقك. عند هذه النقطة، سيكون كل شيء نظريًا - وإن دمج وجهات نظر من مجالات وظيفية متعددة- هي طريقة مؤكدة لتمثيل علامة تجارية كاملة، ليس فقط أفكار منظمي الاحتفالات والأحداث وخبراء التسويق. كيف نعلم أنّ هذه الخطوة خطوة أساسية؟ لأننا نعلم من واقع خبرتنا أنّ إخراج الأفكار هو تجربة تأتي بعد الدعوة إليها فقط، وأنّ فكرة استخدام تنسيق غداء قابل للتطور أتت من عضوٍ في الفريق. جرى تصميم العشاء الجماعي للتفكير في التصميم حول عدة مواقع واتجاهات. 3. اختر إما الوكالة أو داخل المؤسسة عندما يكون لديك ولفريقك أفكار قوية وثابتة وخط زمني للعمل عليها، أنشئ نصًّا موجزًا ولوحة مرئية عنها. سيربط مصدر الثقة هذا خبرتك مع المشاركين الآخرين. ستحتاج هنا إلى رسم خط. هل ستُنشِئ كل شي داخل مؤسستك، أم ستوكل أعمال التصميم إلى وكالة مختصة؟ إنّ القيام بهذا العمل داخليًا يعني في حالتنا، أننا سنتحكم بشكل أكبر بكل جماليات التصميم. كما أننا أردنا أن تكون التجربة مؤمنة بشكلٍ كبير. كل وحدة صورية تكون ذات أهمية كبيرة في عالم التصميم الرقمي- كما هي اللمسات الفنية في كل شخص. 4. قم باتخاذ القرارات المهمة المتعلقة بالعلامة التجارية في الكثير من الأوقات، الحل الأول هو طباعة لافتة كبيرة أو ملصق جداري مع اسم الفعالية وشعار الشركة. يغيِّر ذلك كيفية استقبال الزوار للفعالية وما قمنا بخلقه - خاصة إذا لم تترجم علامتك الرقمية إلى عرض تجاري أو وليمة. إن قرارات العلامة التجارية التي تتخذها هي المفتاح لتأسيس الإحساس بتجربتك. وقبل أن تبدأ بوضع الأشياء مع بعضها، قرِّر عدد العناصر التجارية الخارجية التي ستكون جزءًا من الخليط. هل ستستعمل ألوان الشركة؟ هل سيكون شعار الشركة موجوداً على كل عناصر التصميم؟ وهل هدفك هو التعريف عن علامتك التجارية أم أنّ هناك هدف آخر؟ هناك فرق كبير بين وضع علامتك التجارية على رأس البيئة الموجودة، والتي تعمل بشكل طبيعي. تصميم تجربة دون العلامة التجارية العلنية عندما يحين الوقت لإظهار شخصية شركتك، ركز على السبب وليس الكيفية. ستتمكن من التحكم في شعور الحاضرين من خلال تأطير كل قرار من قرارات العلامة التجارية الخاصة بك حول الأهداف، وتوليد العملاء المتوقعين في سوقٍ جديدٍ، والالتقاء بالعملاء وإظهار التقدير للمجتمع. قالت ميكايلا أليكساندر، مديرة الفعاليات التسويقية التي قادت حفل العشاء الجماعي للأفكار في التصميم: في هذا السيناريو، كان "السبب" هو إعطاء رواد التصميم بيئة ملهمة للإبداع لمناقشة تحديات هذا المجال والتفكير في التصميم دون ضغطٍ من حضورٍ إعلامي أو غيره. كان شعار أسبوع التصميم في سان فرانسيسكو ، "اسأل عن كل شيء". مع وضع كل هذه الأشياء في الحسبان، جعلت InVision كل تفاصيل الأمسية مفاجئة بطريقةٍ أو بأخرى من خلال تصميمها. باستثناء عدد قليل من التفاصيل الصغيرة، حيث أنّ شعار الشركة لم يكن موجودًا، وبالتأكيد لم يكن نقطة الارتكاز. باستخدام السرد الذي استخدمناه في مراحل التخطيط وبالتزامن مع موضوع أسبوع التصميم، اعتمدنا في كل قرار للتصميم، على تجربتنا المستهدفة. عند القيام بذلك لعلامتك التجارية الخاصة، فكر في الطريقة التي تجسد بها تجربتك في شعار الشركة أو مهمتها. يعد هذا بمثابة علامتك التجارية، دون الحاجة لمئات الشعارات. ولإثارة الفكرة القائلة بأن قادة القرار سيجتمعون في بيئة نخبوية ومريحة، أضفنا العديد من اللمسات الشخصية. ومن بين الأشياء الأخرى التي قمنا بها لتجسيد علامتنا التجارية، ما يلي: استخدام البيئة لتعزيز مقاصدنا جعل التجربة مرنة كالسوائل من خلال دمج أماكن متعددة التحكم في أجواء كل مكان بالتعاون مع البائعين اختيار البائعين مع فلسفات التصميم المتطابقة والمناهج التي تطابق الجمالية التي يتم إنشاؤها المكونات الرقمية المبدئية للاحتفال بالتصميم خارج مجتمع الإنترنت ركز على نقاط الاتصال هذه لتنشيط علامتك التجارية مع وضع جميع الاعتبارات الأخرى جانبًا، وجدنا أنّ هذه المناطق هي الأكثر أهميةً لإنشاء تجربة خارج الشبكة العنكبوتية. تُرسم كل نقطة اتصال من تجاربنا الخاصة، ولكن يمكن تكييفها بسهولة للعمل مع علامتك التجارية. اختر البيئة التي تدعم سردك بشكل أفضل عندما يكون هدفك هو ربط الناس، فإن البيئة التي تضعهم فيها مهمة بقدر أهمية المحادثات. اقترب من ذلك مثل مصمم صفحات الإنترنت الذي يأخذ في الحسبان المحددات الرقمية للواجهة وكيف يؤثر ذلك على رحلة المستخدم عبر موقع الإنترنت أو التطبيق. ولكن بدلًا من رحلة على الشاشة، فأنت تقوم بتصميم رحلة فعلية. ولتعيين نغمة هذه التجربة وربطها بالخط الزمني والتنسيق، استخدمنا صفحةnVite . عكست اللغة تطور الفعالية، ونقلت الجدول الزمني، وألمحت إلى الجمالية العامة. ونظرًا لأننا أردنا تسهيل الاتصالات الأصلية والحفاظ على قدرة تخمين الحضور، فإن العشاء الرائع في أماكن متعددة منح الضيوف رحلةُ واضحةً، إذ أُلهمت كل أمسية من اقتباس مختلف عن التصميم من قادة الصناعة المختلفين. تحديد الأماكن والبائعين اللازمين لإكمال التجربة على غرار اختيار البيئة المناسبة، يتم اختيار البائعين المناسبين - وأماكن أخرى، إذا لزم الأمر – للإحاطة بكل الجوانب. لا يتم إنشاء البيئة دائمًا في مساحة واحدة فقط. ولجعل الحركة جزءًا حقيقيًا من التجربة، اخترنا 3 أماكن تكميلية لترسيخ كل مرحلة. في كل مكان، تم تعريف الحضور على سؤالٍ مختلف حول التصميم أو تحدياته. عندما يتعلق الأمر بالبائعين، اخترنا مقدمي خدمات محترمين تتشابه أساليبهم مع الحِرَف بالطريقة التي تتبعها شركات تقديم الأفكار في التصميم. ونتيجةً لذلك، ساعدت كل التفاصيل في تشكيل التجربة وتعزيز الأفكار ذاتها التي استخدمناها لبناء الفعالية. تصور العناصر المرئية وكيف ستقوم بإنشائها للحصول على جوهر إنشاء تجربة قائمة بذاتها - وليس مجرد امتداد لعلامة تجارية في علامة تجارية أخرى متوازنة مع الهدف. لذلك، أرَدتُ أن أبتعد عن الخيارات المعتادة. وباعتباري مسوقةً، هناك دافع لجعل العلامة التجارية ذات صدىً عالٍ قدر الإمكان من خلال لافتات وشعارات قابلة للسحب عند كل منعطف. بدلًا من ذلك، أردت أن أرتقي وأدمج ذلك في التجربة - ميكايلا ألكساندر- ، مديرة فعاليات التسويق. وهناك واحدة من أكثر الطرق إبداعًا لإكمال علامتك التجارية، وهي استخراج العناصر المرئية التي تساعد في التعرف عليها على الإنترنت، ثم تطبيقها على المساحة المادية. على سبيل المثال، عملنا مع البائعين لإضافة نقاط من اللون الوردي لـ InVision إلى القائمة دون الابتعاد عن نظام الألوان العام. قد تتعرض لمحددات بصرية لكن هذا هو المكان الذي تلعب فيه الحلول الإبداعية. يختلف تصميم الويب عن الطباعة. في بعض الحالات، قد تؤدي هذه الاختلافات إلى إلقاء نظرة خاطفة على خططك نظرًا لارتباطها بالجمالية العامة. وقال كونور مورفي، مصمم InVision الذي أنشأ العشاء الجماعي للتفكير في التصميم: على سبيل المثال، كانت لدينا مواد سوداء وذهبية لطيفة مع خطة لجعلها وكأنها مختومة. لقد أضاف عنصرًا فاخرًا، لكنه لم يكن قابلاً للتنفيذ في ذلك الوقت. من أجل حل المشكلة، نظرت إلى درجات أخرى من الذهبي واخترت واحدة أعطت تأثيرًا مماثلًا. ترجمة المكونات الرقمية إلى التفاصيل المادية من المحتمل أنك قد اعتدت على العمل مع العناصر الرقمية لعلامتك التجارية. تحتوي الأدلة على التفاصيل، ويوفر كل مشروع نظرة ثاقبة لتحديات الواجهة وأفضل الممارسات التي تظهر على الشاشة. لسوء الحظ، فإن نقل كل ذلك من الشاشة إلى المشهد ليس سهلًا كما يبدو. الألوان يناسب اللون الأسود والذهبي العشاء الجماعي للتفكير في التصميم بشكل أفضل، لذلك لم نواجه التحدي المتمثل في مطابقة نقاط InVision الوردية المعتادة. إذا اخترت المزيد من العلامات التجارية التقليدية، ستكون الألوان أمرًا يجب مراعاته بالتأكيد. إن ترجمة الشيفرات الست عشرية إلى PMS لا تسفر دائمًا عن تطابق تام، لذلك يجب عليك اختيار بديل يحافظ على العلامة التجارية. قرارات أسلوب المحتوى تم دمج الاقتباسات من قادة التصميم في الصورة لإعطاء أفكار أكبر عن التصميم، ولكن تم طباعتها — على عكس معظم ميزات المحتوى من InVision. يختلف التصميم للطباعة أو لأي مواد مادية عن تصميم شيء ما على الشاشة. من خلال الشاشة، يمكنك رؤية الشكل الذي سيبدو عليه التصميم تمامًا - مع كل الألوان الصحيحة والخطوط المناسبة وجودة الصورة وما إلى ذلك. أما في الطباعة، يكون الأمر أصعب قليلًا. لا تظهر الألوان عادة على الورق كما تظهر على الشاشة، وقد تتغير الخطوط عند الطباعة، وتصبح القراءة أكثر صعوبة. - كونور ميرفي ، مصمم-. تؤثر الفروق الدقيقة في الطباعة أيضًا على المكونات الأخرى للتصميم. كانت إحدى نقاط الأمسية الوحيدة التي تحمل علامة تجارية هي الشاشة مع شعار InVision والكلمات "Question Everything". ومع ذلك، فقد تم عرض هذا نهارًا في مساحة كبيرة إلى حدٍ ما، لذلك لم يكن نظام الألوان أو الخط ذاته بهذه السهولة. كان العنصر الثاني الذي قمنا بتضمينه هو غلاف الحاسوب المحمول المخصص لكل ضيف، منقوشًا عليه InVision. ومع ذلك، فقد بدا التصميم العلوي المصغر من علامة InVision مختلفًا تمامًا ومختومًا في الجلد في صفحة المنتج الرئيسية. في النهاية، قررنا الابتعاد عن الشعار المعتاد كما قررنا استخدام جميع الحروف الكبيرة. الأحجام والنسب يجب أن يُؤخذ حجم الكتابة في الحسبان عندما يتعلق الأمر بالمواد المادية. هل سيحتاج الناس إلى قراءة رسالة من بعيد أم أنها ستكون أمامهم مباشرة؟ كيف يمكن أن تكون الرسالة مثيرة للاهتمام دون أن يصبح بسيطًا أو يصعب قراءته؟ وأخيرًا، هل يلزم دمج الخطوط للطباعة؟ دمج طرق أصيلة للسعادة إنّ تصميم تجربة برعاية عالية كانت طريقتنا في مفاجأة وإسعاد الضيوف. يتماشى اختيار الأشياء من أجلهم فقط مع فكرة الاحترام وتكريم الآراء المختلفة من قادة التصميم، وجعل الأمسية مرحبة بـ InVision كمضيف – ليست نقطة محورية. قال مورفي: مفاجأة الضيوف بشكل جيد مع موضوع السؤال عن كل شيء. في وقتٍ مبكر، اقترح أحد أعضاء الفريق أن نستخدم أغطية الطاولات لعمل تحدي افتراض ما هو صالح للأكل. وبعد التعاون مع متعهد الطعام، قررنا أن نجعل السلطات جزءًا من تصميم الأزهار الفعلي. كيف تريد أن ينخرط الناس ويتواصلوا مع شيء تنتجه علامتك التجارية - خاصة عندما تكون ملموسة - هي فرصة كبيرة لترك انطباع دائم. وأحيانًا، تتكلم أكثر عندما لا تشوش الرسالة. الذهن المنير والحاد يأخذك بعيدًا، والتواصل مع السرد والهدف يمكن أن يأخذك أبعد من ذلك. أكبر فوز لديك هو جعل الناس يتواصلون إنّ التجربة بأكملها مهمة عندما تقوم بترجمة علامتك التجارية الرقمية إلى العالم الواقعي. يجب التفكير في كل نقطة اتصال من منظور العلامة التجارية والتصميم — وقد تقود الاختلافات في التصميم اللعبة النهائية. إذا كنت مصممًا، فهذا يعني التفكير في التفاصيل الصغيرة وفي تجربة المستخدم في سياق الغرفة أو المساحة المادية، وضبط الأنماط الرقمية لتكملة العناصر الخارجة عن سيطرتك. من منظور التسويق والعلامة التجارية، يعني هذا تجربة "لماذا" الخاصة بك بما تنتجه. يجب فحص كل شيء بدءًا من قوائم الكوكتيل وحتى رسائل الترحيب من خلال عين الشخص وليس الاحتمالات. إذا تم ذلك مع الاهتمام بالتفاصيل والهدف، فإنّ إنشاء تجربة - بدلاً من مجرد فعالية آخرى - يمكن أن يلبي حاجة يتردد صداها مع الناس لعدة أشهر. ترجمة- وبتصرف -للمقال How to transform your digital brand into a real world experience لصاحبه Kaysie Garza
  3. يتحدّث هذا الدّرس عن اثنين من مبادئ التّصميم المرئيّ التّي تساعدك في توجيه انتباه المُستخدم، فبعض أجزاء التّصميم أكثر أهمّية من غيرها، ولكنّها قد لا تكون أوّل ما يلحظه المُستخدمون، وعلينا أن نُعين المُستخدم ليُلاحظها. فهرس سلسلة مدخل إلى تجربة المستخدم: مدخل إلى تجربة المستخدم User Experience فهم ودراسة المستخدمين في مجال تجربة المستخدم دراسة الشريحة المستهدفة في مجال تجربة المستخدم كيفية التصميم للأجهزة المختلفة هندسة المعلومات في تجربة المستخدم تعرف على أنماط التصميم في مجال تجربة المستخدم أشياء لا يمكن اعتبارها رسوما تخطيطية (Wireframes) في مجال تجربة المستخدم تعرف على الرسوم التخطيطية (Wireframes) في مجال تجربة المستخدم مفهوم الثقل المرئي (Visual Weight) والألوان في مجال تجربة المستخدم (هذا الدرس) التكرار ومخالفة الأنماط في مجال تجربة المستخدم المحاذاة والقرب في مجال تجربة المستخدم تعرف على أساليب مسح الواجهة والتراتب المرئي في مجال تجربة المستخدم أساليب الإطلاع في مجال تجربة المستخدم: التصفح، البحث والاكتشاف تصميم هيكل صفحة الويب والعناصر الأساسية في مجال تجربة المستخدم الأزرار، النماذج والدعوات إلى الإجراء في مجال تجربة المستخدم استخدام علم النفس في مجال تجربة المستخدم لتكييف المستخدم وإقناعه كيف تغير الخبرة من تجربة المستخدم؟ تصميم تجربة المستخدم من خلال بيانات وإحصائيات المستخدمين تعرف على أنواع المخططات الإحصائية في مجال تجربة المستخدم اختبارات أ/ب (A/B Test) في مجال تجربة المستخدم فكرة "الثّقل المرئيّ" (Visual Weight) بديهيّة نسبيًّا، فبعض العناصر تبدو "أثقل" من غيرها في تخطيط الواجهة، فتجذب الانتباه بصورة أسهل، وهذه الفكرة مهمّة لك كمصمّم لتجربة المُستخدم. وظيفتنا هي أن نُساعد المُستخدم على مُلاحظة الأشياء المُهمّة، وألّا نُشغله عن هدفه في الوقت ذاته. بإضافة ثقل مرئي لبعض عناصر التّصميم، يمكنك زيادة احتمال أن يراها المُستخدم، وبالتّالي تغيير ما سيقوم به بعد ذلك. تذكّر: الثقل المرئيّ مفهوم نسبيّ، وكلّ مبادئ التّصميم المرئيّ تقوم على مقارنة عنصر في التصميم بما حوله من عناصر. ولكي لا نطيل الحديث، إليكم نجم هذه السّلسلة من الدّروس: البطّة المطّاطيّة الأصيلة! التباين تجذب البطّة في المنتصف النّظر أكثر ممّا حولها، فالتّباين يؤثّر في الثّقل المرئيّ. هو الفرق بين العناصر الداكنة والعناصر الفاتحة، وكلما زاد الفرق بين عنصرين زاد التّباين بينهما. ما نريده في تجربة المُستخدم هو زيادة تباين العناصر المُهمّة، كالبطّة السّوداء في الصّورة أعلاه، فمعظم محتوى الصّورة فاتح اللّون، وهذا يؤدّي إلى زيادة مُلاحظة البطّة السّوداء، ولو كانت الصّورة سوداء في معظمها، لبدت البطّات البيضاء أكثر ثقلًا. لو كانت هذه البطّات أزرارًا في واجهة، لنقر معظم المُستخدمين الزّر الدّاكن. العمق والحجم يميل البشر إلى الانتباه إلى العناصر القريبة منهم في العالم المادّيّ أكثر من تلك البعيدة عنهم. وبالمثل فإنّنا نميل إلى فهم العناصر الأكبر حجمًا في العالم الرّقميّ على أنّها "أقرب" إلينا، كالبطّة الوسطى في الصّورة أعلاه، والعناصر الأصغر حجمًا على أنّها أبعد عنّا (كالبطّة المُشوّشة أعلاه). لو كانت هذه البطّات متماثلة الحجم، لنظرنا إليها غالبًا من اليمين إلى اليسار (كما نقرأ). يؤدّي استخدام تأثير التّشويش (blur) والظّلال إلى زيادة واقعيّة مفهوم العمق، والحجم يعطي هذا التأثير حتى لو كان التّصميم يتبع الأسلوب المُسطّح (flat design). كقاعدة عامّة، اجعل العناصر الأكثر أهمّية ذات حجم أكبر من تلك قليلة الأهميّة، وهذا يؤدّي إلى إنشاء تراتب مرئيّ ضمن الصّفحة يُسهّل فحصها بالعين، ويُساعدك على اختيار ما يُلاحظه المُستخدم أوّلًا. من هنا نُدرك خطأ فكرة "جعل الشّعار أكبر"، لأنّنا لا نريد للمستخدمين أن يُطيلوا النّظر في شعارنا بدل أن يشتروا شيئًا ما من الموقع! اللون لدينا في الحياة الواقعية نور الشمس، والأضواء الصّناعيّة، والحرارة والبرودة، والثياب، والأسماء التّجارية وكثير من العوامل المشابهة الّتي تؤثّر في إدراكنا للون، ونحن كمصمّمي تجربة المُستخدم علينا أن نفهم الألوان، وإن لم يكن من المطلوب التعمّق في تفاصيلها. أي هذه الألوان يبدو باردًا؟ وأيها يبدو وكأنّه تحذير؟ للألوان معنى. أي من هذه البطّات تبدو وكأنّها أقرب؟ يمكن للألوان أن "تتقدّم" أو "تتراجع". يمكن لنا أن نتعلّم بعض الأمور من البطّات في الصّورتين أعلاه. عادةً ما ننجز الرّسوم التّخطيطيّة (wireframes) بالأسود والأبيض، وهذا أمر حسن، لأنّه يسمح لنا بالتّركيز على الوظيفة، أمّا المظهر فهو مسؤوليّة مصمّمي الواجهة. إلّا أن الألوان في بعض الأحيان تكون ذات وظيفة، كألوان إشارات المرور، أو كأن يكون لون "المصّاصة" مطابقًا لطعمها، فهذا مهمّ! معنى الألوان في الصّورة الأولى ضمن الفقرة السّابقة، نرى ثلاث بطّات: زرقاء وصفراء وحمراء، وهي بطّات جميلة، ويمكن أن نُلاحظ مُباشرة أن لكلّ بطّة صبغة، ولكلّ من هذه الصّبغات "معنى" ما. لو كانت البطّات أزرارًا، فقد تكون: "تأكيد" و "إلغاء الأمر" و "حذف"، ولو كانت مؤشّرًا لامتلاء الخزّان، لكانت "مليء" و "نصف مليء" و"فارغ"، ولو كانت مؤشّرًا في فرن لكانت "بار" و "دافئ" و "حار". لعلّك أدركت الفكرة: البطّات متماثلة، لكنّ اللّون غيّر المعنى. إن لم تكن بحاجة للإشارة إلى الاختلاف في الوظيفة، فدع مصمّم الواجهة يختر الألوان، وإلّا فاجعل الألوان جزءًا من رسومك التّخطيطيّة. التراجع والتقدم يمكن للألوان كذلك أن تكون "صاخبة" أو "هادئة"، ففي الصّورة الثّانية نُشاهد بطّة حمراء واثنتين زرقاوين، تبدو الحمراء أقرب قليلًا، ولكنّها ليست كذلك. الجأ إلى هذه الحيلة في أزرار الشّراء حيث تبدو وكأنّها "تقفز" من الشّاشة، فالمستخدم يميل إلى نقر الألوان الأقرب. وبالعكس، قد ترغب أحيانًا بأن تُبقي بعض العناصر ظاهرة دون أن تُشتّت انتباه المستخدم، كالبطّتين الزّرقاوين، فهي تبدو "متراجعة"، وهذا الأسلوب مناسب لقائمة تبقى دومًا ظاهرة على الشّاشة، فلو كانت "صاخبة" لصرفت انتباه المُستخدم عن عناصر أهمّ. أبق رسومك بسيطة استخدم الألوان في الرّسوم التّخطيطيّة لبيان الوظيفة فقط، فلا داعي للمبالغة في استعمالها أو الحرص على تجميلها لعرضها أمام الزّبون، فقد يدخل معك في نقاش لا طائل من وراءه لاختيار ألوان أخرى. اجمع مبادئ التصميم المرئي معا يمكن استخدام الألوان مع ما تعلّمناه عن الثّقل المرئيّ، إذ يسهل ملاحظة العناصر الكبيرة، وأمّا العناصر الكبيرة حمراء اللّون فيستحيل تجاهلها! اجعل رسائل الخطأ والتّحذيرات حمراء وعالية التّباين، وأمّا إن كانت رسالة تأكيد لنجاح العمليّة، فيكفي أن تكون صغيرة الحجم بلون أخضر مُتراجعٍ. ترجمة بتصرّف للدّرسين Visual Weight, Contrast & Depth و Colour من سلسلة Daily UX Crash Course لصاحبها Joel Marsh.
  4. تعلّمنا في الدرسين السابقين كيفية إنشاء ونشر موقعنا الأوّل. في الحقيقة موقعنا حاليًّا بسيط وذو محتوى قليل وليس جذّابًا بعد. سنتعلّم في هذ الدرس كيف نستخدم تنسيقات CSS لتنسيق الصفحة. كما سنتعلّم في درس لاحق كيف نضيف المزيد من التنسيقات إلى موقعنا وذلك بمساعدة إطار عمل اسمه Bootstrap. البنية والتنسيق Structure and Style لنتذكّر معًا: يُعبّر HTML عن بنية صفحة الويب، في حين تُعرّف CSS المظهر العامّ للصفحة. يُعتبر فصل بنية الصفحة عن تنسيقها أمر في غاية الأهميّة وله الكثير من المزايا رغم أنّه ليس إلزاميًّا. لذلك سنعمل دومًا على جعل رُماز HTML وتنسيقات CSS في ملفات منفصلة. الربط مع ملف CSS ملف CSS هو ملف نص عادي له الامتداد (css.) ونربط معه من داخل ملف HTML. أنشئ ملف جديد ضمن المجلّد Portfolio وسمّه main.css. افتح الملف index.html واضف العنصر <link> ضمن العنصر <head>. سنخبر الصفحة index.html عن طريق العنصر <link> أن تُحمّل ملف CSS، أي سننشئ رابط بينهما: <link rel="stylesheet" href="main.css"> أضف العنصر السابق إلى العنصر <head>. ستبدو الشيفرة لديك مُشابهة لما يلي: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="main.css"> <title>Web Portfolio of Marco</title> </head> <body> <h1>Web Portfolio of Marco</h1> <h2>Welcome!</h2> <p>Thanks for stopping by.</p> <p>Please have a look around. In the blog section I document my experiences in programming. You may also look at my web projects. Have fun.</p> <img src="marco.jpg" alt="Picture of me"> <p>Marco :-)</p> </body> </html> ملاحظة مهمّة: لكي يكون من الممكن الوصول لملف CSS، يجب أن تحتوي السمة href على المسار الصحيح للملف. وهذا يعني بدوره أنّه إذا كان ملف CSS في مجلّد فرعي، يحب أن نضم هذا المجلّد الفرعي إلى مسار الملف كما هو واضح. يمكنك مراجعة هذا الموضوع في الدرس الأوّل في فقرة عناوين URL النسبيّة والمطلقة. الألوان إلى الآن ما يزال ملف CSS فارغًا، لنبدأ الآن بكتابة أولى تنسيقات CSS. تحوي CSS ما يُعرف بالقواعد CSS Rules. يمكننا باستخدام قاعدة CSS أن نُخبر المتصفّح كيف يُعالج جزءًا مُحدّدًا من مستند HTML. كمثال على ذلك، سنغيّر لون الخلفيّة ولون النص للعنوان من المستوى الثاني h2 ضمن الملف index.html الخاص بنا. أضف ما يلي إلى ملف CSS: الملف main.css h2 { background-color: #607d8b; color: #ffffff; } يجب أن تحصل على شكل شبيه بما يلي: أكواد الألوان Color Codes تظهر الألوان على الشاشة كمزيج من نسب متفاوتة من الأحمر والأخضر والأزرق (RGB). يمكن التعبير عن المزج بين هذه الألوان الثلاثة في CSS بطريقتين: كقيم RGB عشرية (محصورة بين 0 إلى 255 لكل لون) أو كقيم RGB ستة عشرية hex values. وفي الواقع تُستَخدم القيم الستة عشرية في الغالب. إذا نظرنا إلى مثالنا الأخير، فنجد أنّنا قد عيّنا لونًا أزرقًا مائلًا للرمادي كلون خلفية باستخدام كود اللون 607d8b# بالترميز الستة عشري. أمّا لو أردنا استخدام الترميز العشري المُكافئ له فسنكتب (rgb(96, 125, 139. في التمثيل الستة عشري، يُعبّر أوّل رمزين من اليسار عن اللون الأحمر، والرمزين في الوسط عن اللون الأخضر، ويُعبّر الرمزان الأخيران عن اللون الأزرق. العمل مع أكواد الألوان يُعتبر التعامل مع الألوان كأكواد، شائع جدًا لكنه صعب في الحقيقة. لأنّك تتعامل مع قيم ورموز وليس مع ألوان، يُنصح دوماً استخدام أداة لانتقاء الألوان color picker. إذا كنت تستخدم المحرّر Brackets عندها يمكن أن تفتح أداة انتقاء اللون الموجودة ضمن ملف CSS الذي تعمل ضمنه. فقط تحتاج لأن تنقر بزر الفأرة الأيمن على كود اللون وتختار تحرير سريع Quick Edit أو أن تضغط Ctrl+E من لوحة المفاتيح. يؤدي ذلك إلى ظهور أداة اختيار الألوان حيث يمكنك اختيار اللون الذي يناسبك بسهولة. كما يمكنك اختيار ترميز اللون بالصيغة التي ترغبها من خلال ثلاثة أزرار موجودة في الأسفل. أدوات اختيار الألوان من الانترنت إذا لم تتوفّر أداة لاختيار الألوان ضمن المحرّر لديك، فيمكنك استخدام عدد كبير جدًّا من هذه الأدوات ولكن على الانترنت، فعلى سبيل المثال لا الحصر: HTML Color Codes ColorPicker ألواح الألوان من الانترنت نحتاج في كثير من الأحيان إلى أكثر من لون واحد لاستخدامه في موقعنا. لذلك نحتاج إلى أداة تزوّدنا بمجموعة من الألوان المنسجمة، والتي تتناغم مع بعضها لإضفاء تأثير جميل على الموقع. وهذا ما تفعله ألواح الألوان color palettes. هناك بعض المواقع على الانترنت التي توفّر مثل هذه الميزة. أمثلة على مواقع بمجموعات ألوان معرّفة مسبقًا: Colour Lovers Design Seeds Google Color Palette أمثلة على مواقع تولّد مجموعات ألوان حسب رغبة المستخدم: Kuler: يُعرّف قاعدة لون (سنتكلّم عن القواعد بعد قليل)، ويسمح لنا بالحصول على خمسة ألوان منسجمة معًا. Paletton: أداة متقدّمة للحصول على مجموعات ألوان منسجمة. Colourco.de: مولّد ألواح ألوان عملي أيضًا. قواعد CSS رأينا كيف تُغيّر CSS من هيئة عناصر HTML من خلال تأثيرها على الألوان. لنلقي نظرة عن كثب حول CSS وطريقة عملها. تُعتبر القاعدة rule البنية الأساسية لـ CSS وهي تتكوّن من ثلاثة عناصر: المحدِّد Selector والخاصية Property والقيمة Value. تُشير القاعدة السابقة إلى أنّ جميع عناصر <h2> يجب أن يكون لها لون خلفية له الكود 607d8b#. محددات CSS تُقرّر المحدّدات أيّ عناصر HTML ستُطبّق عليها قاعدة CSS. ملاحظة: سنتعلّم هنا المحدّدات الأكثر أهمية. من أجل الاطلاع على أنواع المُحدّدات الأخرى ابحث في Google عن CSS Selectors. محددات النوع Type Selectors تستهدف محدّدات النوع جميع العناصر التي يكون لها وسم HTML مُحدّد. فلو أردنا مثلًا استهداف جميع عناصر الفقرة p ضمن المستند بتنسيقات معيّنة، فسنكتب شبيه بما يلي: CSS p { ... } HTML <p>...</p> <p>...</p> محددات الصنف Class Selectors تُستخدم هذه المحدّدات بشكل متكرّر، وتُعتبر أنّها مُخصّصة أكثر قليلًا من مُحدّدات النوع، كما أنّه بإمكانها استهداف مجموعة مخصّصة من العناصر بدلًا من عناصر النوع الواحد فقط. لاستخدام محدّدات الصنف نضيف السمة class إلى العنصر المراد استهدافه، ونسند إليها قيمة مُعبّرة من اختيارنا. عند استخدام محدّد الصنف فإنّنا نستخدم نقطة عادية يليها قيمة السمة class التي أضفناها إلى العنصر. سيستهدف محدّد الصنف في المثال التالي، جميع العناصر التي لها سمة class تحمل القيمة highlight: CSS .highlight { ... } HTML <p class="highlight">...</p> <p>...</p> <p class="highlight new">...</p> لاحظ من شيفرة HTML في الأعلى، أنّ التنسيق سيُطبّق على عنصر p الأوّل والثالث فحسب، لأنّ عنصر p الثاني لا يمتلك سمة class لها القيمة highlight. كما نلاحظ أنّ عنصر p الثالث له أكثر من قيمة ضمن سمة class الخاصة به (highlight وnew). في الحقيقة يمكن استخدام عدة قيم لعنصر واحد بشرط أن نفصل بينها بفراغات. محددات معرف العنصر ID Selectors تشبه هذه المحدّدات محدّدات الصنف. فهي تستهدف جميع عناصر HTML التي تملك السمة id بقيمة مُعيّنة. من المهم أن نوضّح أنّ السمة id عبارة عن مُعرّف العنصر ضمن شيفرة HTML ورغم أنّه ليس من الملزم وضعها مع كل عنصر، إلّا أنّه في حال وجودها يجب أن تكون القيمة التي تحملها فريدةً ضمن كامل مستند HTML. نستنتج إذًا أنّ أي محدّد معرّف عنصر سيستهدف في الواقع عنصر واحد فقط ضمن مستند HTML. عند استخدام محدّد معرّف العنصر فإننا نكتب الرمز # يليه معرّف العنصر (قيمة السمة id). سيستهدف محدّد معرّف العنصر في المثال التالي عنصر واحد فقط ضمن مستند HTML بحيث تكون قيمة السمة id له هي navigation: CSS #navigation { ... } HTML <p id="navigation">...</p> <p>...</p> محددات الفروع Descendant Selectors يمكنك باستخدام هذا النوع من المحدّدات استهداف العناصر الأبناء لعنصر مُعيّن. ونقصد بالعناصر الأبناء لعنصر معيّن، تلك العناصر التي تقع ضمن هذا العنصر بصرف النظر عن المستوى الذي تقع فيه. انظر المثال التالي: <p id="level1"> <p id="level2"> <a href="myfile.html">My File</a> </p> </p> نلاحظ بأنّ كلًّا من العنصر <p> (ذو المعرّف level2) والعنصر <a> هما ابنان للعنصر <p> (ذو المعرّف level1). لأنّهما يقعان ضمنه بصرف النظر عن المستوى. في حين يُعتبر العنصر (ذو المعرّف level2) ابنًا مباشرًا للعنصر <p> (ذو المعرّف level1). أمّا بالنسبة لمحدّدات الفروع فنلق نظرة خاطفة على هذ المثال البسيط قبل أن نبدأ بالشرح: CSS p a { ... } HTML <p> <a href="http://code.makery.ch">My Website</a> </p> <a href="http://www.example.com">Example Website</a> نلاحظ بأنّ محدّد الفروع p a يستهدف جميع عناصر <a> أينما وُجدَت داخل عنصر <p>. وبناءً عليه نجد أنّ التنسيق سيُطبّق على My Website وليس على Example Website لأنّ الأخيرة موجودة ضمن عنصر <a> لا يقع ضمن أي عنصر <p> كما هو واضح. ملاحظة: ليس من الضروري أن يكون العنصر <a> في المثال في الأعلى ابنًا مباشرًا للعنصر<p>. فمحدّد الفروع السابق يستهدف أي عنصر <a> موجود ضمن أي مستوى ضمن العنصر <p>. إذا أردنا استهداف الابن المباشر فحسب، فيمكننا استخدام مُحدّد الابن ( > ). خصائص CSS تُقرّر قواعد CSS كيف يجب أن تظهر عناصر HTML. هناك العديد من الخصائص التي يمكن تعريفها في CSS. في الواقع لقد صادفنا اثنتان منهم: background-color وcolor. لن نتوسّع في الحديث عن خصائص CSS المختلفة، لأنّ هذا الدرس ليس مرجعًا لهذه الخصائص، لكن سنتعلّم كيف نجد المزيد من المعلومات عنها بأنفسنا. سنستفيد بشكل أكبر عندما نتعلّم هذه الخصائص عندما نحتاج إليهم فعليّا. توجد حالتان مختلفتان يمكن أن نصادفهما لنتعلُّم المزيد عن CSS. الحالة الأولى: عندما نصادف خاصية CSS لا نعرفها في هذه الحالة نبحث عن معلومات عنها في الانترنت، اكتب اسم الخاصية متبوعًا بكلمة css ضمن محرّك البحث. يمكنك أن تجرّب هذه الطريقة الآن لتحصل على معلومات حول خاصية CSS جديدة وهي: padding: 5px; استخدم css padding كعبارة بحث. لا تكتفي بالاطلاع على نتيجة البحث الأولى، بل اطّلع على النتائج الخمس الأولى أو أكثر إن أحببت. بعد ذلك قرّر أيُّ المواقع ستوفّر المعلومات المناسبة لك. جرّب تطبيق قاعدة CSS السابقة (أي القاعدة padding: 5px) على عنصر h2 في مشروعنا. الحالة الثانية: نريد تغيير أسلوب عرض أحد العناصر ولكن لا نعرف خاصية CSS المناسبة ابحث في الانترنت عن الشيء الذي ترغب أن تقوم به، متبوعًا بكلمة css. ربما تحتاج إلى إجراء عدة عمليات بحث قبل أن تجد ضالّتك. فإذا أردنا مثلًا تغيير حجم النص. في هذه الحالة استخدم الكلمات التالية text size css في محرّك البحث. ومرّة أخرى لا تكتفي بالنتيجة الأولى فقط من نتائج البحث. قيم CSS لقد صادفنا قبل قليل بعضًا من قيم CSS، فمثلًا القيم الست عشرية مثل ffffff# أو تلك القيم المتعلّقة بتعيين قياسات الأحجام مثل 5px. يتوجّب علينا أحيانًا وبحسب خاصية CSS المستخدمة استخدام كلمات مُعيّنة مثل left أو right لمحاذاة النصوص على سبيل المثال. أكثر قيم CSS المستخدمة هي القيم المتعلّقة بتعيين قياسات الأحجام. لذلك سنتناولها بشيء من التفصيل. غالبًا ما يُعرّف الحجم باستخدام البيكسل Pixel، ونرمز له اختصارًا بالرمز px. p { font-size: 16px; } توجد إمكانية أخرى وهي تعيين الأحجام باستخدام النسبة المئوية Percentage. دائمًا ما تكون النسب المئوية نسبيّةً بالنسبة للعنصر الأب. في المثال التالي سيشغل العنصر p ما مقداره 60% من عرض width العنصر الأب الذي يقع ضمنه، في حين سيشغل العنصر الأب عرض النافذة كاملًا. p { width: 60%; } توجد وحدة قياس مشهورة أخرى للأحجام وهي em. والـ em ترتبط دومًا بحجم الخط. ويعني ذلك أنّنا إذا غيّرنا حجم الخط فإنّ حجم العنصر المُقاس بالوحدة em سيتغيّر أيضًا. كمثال على ذلك إذا كان لعنصر ما حجم خط مقداره 20px وعرض 5em، فسيكون عرض العنصر الفعلي في هذه الحالة 100px (أي 20 مضروبة بـ 5). انظر إلى الشيفرة التالية: p { font-size: 20px; width: 5em; } محددات الصنف في مشروعنا إذا أردنا تكبير العنوان الرئيسي في موقعنا: "Web Portfolio of Marco". فسيكون ذلك ممكنًا بتعريف قاعدة CSS للعنصر h1 كما يلي: h1 { font-size: 65px; } المشكلة التي ستصادفنا هنا أنّ جميع عناصر h1 الموجودة في المستند ستكبُر بتأثير هذه القاعدة. لذلك فإذا أردنا أن نُكبّر عنوان h1 الأوّل الموجود في المستند فسنستخدم لهذا الغرض مُحدّد صنف class selector. سنضيف السمة class إلى عنصر h1 المراد استهدافه، ويمكننا بالطبع إسناد أي قيمة لهذه السمة، سنختار القيمة title: <h1 class="title">Web Portfolio of Marco</h1> يمكننا الآن استهداف عنصر h1 هذا بكتابة قاعدة CSS بالشكل التالي: .title { font-size: 65px; } إذا جرت الأمور على ما يرام فستحصل على شكل شبيه بما يلي: سننتقل الآن إلى الدرس الرابع، والذي يتحدّث عن أدوات التطوير البرمجية المتاحة ضمن متصفّح الانترنت. ترجمة -وبتصرّف- للمقال HTML & CSS Tutorial - Part 3: Introduction to CSS لصاحبه Marco Jakob.
  5. علم الألوان النفسي وقدرتها على الإقناع هو من أكثر جوانب التسويق إثارة للجدل والاهتمام. ويعود السبب إلى أن كثيرٌ من نقاشات هذه الأيام حول قدرة الإقناع بالألوان هي تخمينات وأدلة غير مؤكدة ومسوّقين يعملون على تضخيم العلاقة بين "الألوان والعقل". وللتخفيف من حدة هذا الاتجاه ومنح هذا العنصر الرائع حقاً من السلوك البشري المعاملة المناسبة، سنغطي اليوم مجموعة من أكثر الأبحاث موثوقية في نظرية الألوان والإقناع. مفاهيم خاطئة حول علم الألوان النفسيلماذا يستدعي علم الألوان النفسي الكثير من المناقشات، لكنه مدعومٌ بالقليل جداً من الحقائق؟ فالسبب كما تبيّن لنا الأبحاث يعود إلى مساهمة عناصرٍ مثل التفضيل الشخصي والخبرات والتنشئة والاختلافات الثقافية والمحيط. إلخ، في تشويش تأثير الألوان علينا. وبذلك فإن فكرة أن بعض الألوان كالأصفر أو الأرجواني لها القدرة على إثارة بعض المشاعر، هي بنفس مستوى دقّة قراءة بطاقة الحظ أو الأبراج الخاصة بك. ويزيد الأمر سوءًا بصور مبتذلة تلّخص علم الألوان النفسي بحقائق مدهشة كهذه: بالرغم من هذا لا تقلق. الآن قد حان الوقت لنلقي نظرة على أبحاث مدعومة لوجهات نظر حول دور الألوان في الإقناع. أهمية الألوان في التسويقفي البداية دعونا نتحدث عن العلامات التجارية، والتي تعدّ واحدة من أهم القضايا المتعلّقة بمفهوم الألوان والمجال الذي جعل العديد من المقالات تواجه مشاكل فيه. كانت هناك العديد من المحاولات لتصنيف استجابة المستهلك لمختلف الألوان: لكن حقيقة الأمر هي أن الألوان تعتمد بشكل كبير على التجارب الشخصية حتى تكون ترجمة عالمية لمشاعر معينة. لكن هناك رسالة أشمل في مفاهيم الألوان. على سبيل المثال، تلعب الألوان دوراً كبيراً إلى حدٍ ما في عمليات الشراء والعلامات التجارية. في دراسة تحمل عنواناً مناسباً وهو تأثير الألوان في التسويق، وجد الباحثون أن 90% من القرارات المفاجئة للمنتجات قد تعتمد على الألوان فقط (وفقاً للمنتج). وفيما يتعلّق بالدور الذي تلعبه الألوان في العلامات التجارية، فتظهر لنا النتائج من الدراسات مثل دراسة التأثير التفاعلي للألوان، أن العلاقة بين العلامات التجارية والألوان يتوقّف على مدى ملائمة لون الشيء المستخدم لعلامة تجارية معينة (وبمعنى آخر، هل "يتناسب" اللون مع الشيء المُباع). وأكّدت أيضاً دراسة الأحمر المثير والأزرق القويّ أن نية الشراء تتأثّر بشكل كبير بالألوان نظراً للتأثير الذي لديها على الطريقة التي يُنظر بها للعلامة التجارية. ما يعني أن الألوان تؤثر على الطريقة التي يرى بها المستهلكون هوية العلامة التجارية المعنيّة (على كل حال، من يريد أن يشتري دراجة نارية لشركة هارلي دافيدسون إن لم تعطي شعوراً أن الهارلي قوي ورائع؟). وكشفت دراسات أخرى أن عقولنا تفضّل العلامات التجارية المعروفة، مما يجعل الألوان مهمة جداً عند إنشاء هوية العلامة التجارية. بل أنه قد اُقترح في بحث الألوان والتطبيق أنه من الأهمية الأساسية للعلامات التجارية الجديدة أن تستهدف ألواناً للشعار تضمن فيها تميّزها عن باقي المنافسين الراسخين (إن استخدم جميع المنافسين الأزرق، فستبرز باللون الأرجواني). حين يأتي الأمر عند اختيار اللون "الصحيح"، وجدت الأبحاث أن ردة فعل المستهلك المتوقعة اتجاه اللون المناسب مع ارتباطه بالمنتج هي أهم بكثير اللون نفسه. وبالتالي إذا قام صاحب دراجة هارلي بشراء المنتج كي يشعره بالقوّة، فبالإمكان أن تفترض أن الإصدار ذو اللون الوردي واللامع منه لن تكون مبيعاته جيّدة. أجرت جينيفر آكر-العالمة النفسية وأستاذة جامعة ستانفورد-دراسات حول هذا الموضوع بالذات في بحثها أبعاد هوية العلامات التجارية، ووجدت دراساتها خمسة أبعاد أساسية تلعب دوراً في هوية العلامات التجارية: (قد تشترك العلامات التجارية في صفتين، لكن في الغالب تُهيمن عليها صفةً واحدة. آخر صيحات الموضة تبدو أنيقة، معدات التخييم تبدو صلبة). وأظهر بحث آخر أن هناك علاقة حقيقية بين استخدام الألوان ومفهوم العملاء لهوية العلامة التجارية. بعض الألوان تنحاز بصورة عامة إلى صفات محددة (على سبيل المثال، البني مع الصلابة، الأرجواني مع الرقيّ، والأحمر من الإثارة). لكن تقريباً كل دراسة أكاديمية عن الألوان والعلامات التجارية ستخبرك أن تكون ألوان علامتك التجارية تدعم الهوية التي تريد تصويرها أكثر أهمية بكثير من أن تحاول مجاراة الصورة النمطية المربوطة باللون. بالنظر إلى عدم الدقة في التصريحات الفضفاضة مثل "الأخضر يعني الهدوء". هناك نقصٌ في السياق، في بعض الأحيان يُستخدم للترويج لقضايا بيئيّة مثل موقع Timberland’s G.R.E.E.N standard، لكن في بعض الأحيان يهدف للترويج في المساحات المالية مثل موقع Mint.com. في حين أن اللون البني قد يكون مفيداً في المستلزمات الصلبة (مثل شركة Saddleback Leather)، وعندما يوضع اللون البني في سياق آخر فقد يُستخدم لخلق الدفء، يجذب المشاعر (عيد الشكر) أو لإثارة شهيتك (في كل دعايات الشوكولاتة التي شاهدتها من قبل). الخط الفاصل:لا أستطيع أن أعرض عليك إرشادات سهلة وواضحة لاختيار لون علامتك التجارية، لكن بإمكاني أن أؤكد لك أن السياق الذي تعمل فيه هو بالتأكيد اعتبارٌ أساسي. الذي يلعب دوراً في الإقناع هو ما تخلقه علامتك التجارية من مشاعر، طابع، وصورة. كن متأكداً من معرفة أن الألوان تلعب دوراً فقط عندما تتناسب مع هوية العلامة التجارية المطلوبة (على سبيل المثال، استخدام الأبيض لربطه بحب شركة أبل للتصميم البسيط والنظيف). ومن غير السياق، فاختيار لون على آخر لا معنى له، وهناك القليل من الأدلة لدعم نظرية أن "البرتقالي" سيجعل الناس على الصعيد العالمي يشترون المنتج أكثر من اللون "الفضي". تفضيلات الألوان حسب نوع الجنسالحسّ المناسب قد يفسر سبب أن أكثر السيارات باللون الأبيض، أسود، فضّي ورمادي ... لكن هل هناك شيءٌ يفسّر سبب عدم وجود أدوات كهربائية باللون الأرجواني في العمل؟ واحدة من أفضل الدراسات في هذا الموضوع هي دراسة جو هالوكس مهام الألوان. تعرض معلومات هالوكس بعض التفضيلات الواضحة في بعض الألوان بين الجنسين. من المهم أن نلاحظ أن بيئة الفرد -وخصوصاً مفاهيمه الثقافية- تلعب دوراً قوياً في فرض اللون المناسب للجنس، وهذا بدوره بإمكانه أن يؤثر على اختيارات الفرد. افترض، مثلاً، قد غطّت مجلة سميثسونيان تفاصيل أسباب أن اللون الأزرق يصبح لوناً للأولاد واللون الوردي يعتبر في النهاية لوناً للفتيات (وكيف اعتادت أن تكون العكس!). وهنا نتائج هالوكس للألوان الأكثر والأقل تفضيلاً لدى الرجال والنساء: الألوان المفضلة للرجال الألوان المفضلة للنساء الألوان الأقل تفضيلاً لدى الرجال الألوان الأقل تفضيلاً لدى النساء أهم النقاط البارزة في هذه الصور هي سيادة اللون الأزرق في كلا الجنسين (كان اللون المفضّل في كلا المجموعتين) وتفاوت المجموعتين في اللون الأرجواني. أدرجن النساء اللون الأرجواني ضمن أول الألوان تفضيلاً، لكن الرجال لم يدرجوه في قائمة الألوان المفضّلة. (قد يكون هذا السبب في عدم وجود أدوات كهربائية باللون الأرجواني، لأنه منتجٌ مرتبط بالرجال إلى حدٍ كبير؟) ويظهر بحث آخر في دراسات لمفاهيم الألوان وتفضيلاتها أنه عندما يتعلق الأمر بالعمق، الألوان الخفيفة ودرجة اللون فيبدو أن الرجال يفضّلون الألوان الغامقة بينما تفضّل النساء الألوان الهادئة. وكذلك الرجال في الغالب يختارون الألوان العميقة كمفضّلة لديهم (الألوان مع إضافات الأسود)، بينما النساء يتقبلون الألوان الخفيفة (الألوان مع إضافات الأبيض): المصدر: KISSmetrics. الصور تعرض التفاوت بين تفضيلات الرجال والنساء. ابقِ هذه المعلومات في بالك عند اختيار لوحة الألوان الأساسية لعلامتك التجارية. تقديم الاختلاف الكبير بين التفضيلات الذوقيّة المبيّنة أعلاه، يدفع إلى جذب الكثير من الرجال أو النساء إن شكّلوا النسبة الأكبر من مشتريك المفترضين. تنسيق الألوان وروابط التحويلأصبح موضوع الكشف عن "أفضل" لون لمعدلات الانتقال على المواقع شائعٌ في الآونة الأخيرة (بدأ هنا ولاحقاً هنا). وقد قدّموا بعض النقاط الممتازة، لأنه بالتأكيد صحيح أنه لا يوجد لون واحد مفضّل لاستخدامه في روابط التحويل. وضّح المبدأ النفسي المعروف بـ تأثير العزلة أن العنصر الذي "يبرز مثل قرحة الإبهام" فسيبقى في الذاكرة على الأرجح. وتبيّن البحوث بوضوح أن المشاركين قادرين على التعرّف وتذكّر العنصر أفضل بكثير عندما تبرز بوضوح عن محيطها. زر التسجيل بارز لأنه مثل "الجزيرة" الحمراء في البحر أزرق. وجدت الدراسات التالية الاستجابة الجمالية لدمج الألوان وتفضيلات المستهلكين من دمج الألوان أنه في حين أن الغالبية العظمى من المستهلكين الذين يفضّلون أنماط الألوان بنفس الدرجة، يفضّلون الألوان البارزة والمتناقضة للغاية. فيما يتعلّق بدمج الألوان (كما هو مبيّن في الرسم التوضيحي لـ KISSmetrics)، فهو يعني إنشاء هيكل بصري مكوّن من قاعدة ألوان أساسية وخلطهم بألوان تكميلية بارزة (أو بإمكانك استخدام ألوان ثلاثية): المصدر: KISSmetrics وهناك طريقة أخرى لدمج الألوان تكون باستخدام الخلفية، الأساس والألوان البارزة لإنشاء تسلسل هرمي (كما قد بيّن جوش من StudioPress في الأسفل) على موقعك والذي يُمرّن العملاء على اللون الذي يستطيعون الضغط عليه: المصدر: StudioPress لمَ هو مهم: مع أنك قد تشعر بأنك مصممٌ داخلي بعد قراءة هذا الجزء، إلا أن هذه الأشياء هي بالواقع مهمة جداً لتساعدك في فهم السبب خلف نسبة ارتفاع وهبوط الضغط على الروابط. وعلاوة على ذلك، سيساعد في إبعادك عن مثالية معدلات الانتقال على المواقع والذي يضلّل الكثير من الأشخاص. ضع في اعتبارك، على سبيل المثال، هذا المثال الذي غالباً ما يذكر عن زيادة عدد المنتقلين عبر الروابط بسبب تغيير لون الزر: زاد من تغيير لون الزر عدد المنتقلين عبر الروابط بنسبة 21 بالمئة، لكن هذا لا يعني أن اللون الأحمر يحمل نوعاً من أنواع السحر ليجعل الناس يضغطون عليه. ألقِ نظرةً فاحصةً على الصورة: من الواضح أن بقيّة الصفحة يتجه نحو اللون الأخضر، مما يعني أن الزر الأخضر سيندمج مع ما حوله. في خلال ذلك يوفّر اللون الأحمر التناقض البصري الشاسع (وهو لون مكمّل للأخضر). وجدنا دليل آخر عن تأثير العزلة في عدد لا يحصى من التجارب المتنوعة، متضمنة هذه التجربة التي أُجريت بواسطة باراس كوبرا والمنشورة في مجلة سماشينق (Smashing). كان كوبرا يختبر ليرى كيف يكون بإمكانه الحصول على أكبر عدد من التنزيلات لبرنامجه PDFProducer، وضمّن هذه الاختلافات التالية لتجربته: هل تستطيع تخمين أي المجموعات قد أدّت بشكل جيّد؟ (تلميح: تذكّر، تناقض الألوان مهمٌ جداً). هكذا كانت النتائج: وكما ترى، فالمجموعة #10 قد تفوّقت على الأُخريات بحدٍ كبير. بالتأكيد هي ليست مصادفة أنها كانت هي المجموعة الأكثر تفاوتاً بالألوان. ستلاحظ أن اسم البرنامج مكتوب بخط صغير وبلون رماديّ فاتح، لكن النص الإجرائي ("التحميل مجاناً") كان كبيراً وبلونٍ أحمر، مما يخلق التباين اللازم لرفع نسبة الضغط على الروابط. في حين أن هذه ليست سوى دراسة من عدة دراسات، إلا أنك يجب أن تبقي تأثير العزلة في بالك عند تجربتك للألوان لخلق التباين في تصميم موقعك وإرشاد المتصفحين للمناطق التي تحتوي على روابط. لماذا نحب "الموكا" لكننا نكره اللون " البني"؟ بالرغم من إمكانية النظر للألوان بطرقٍ مختلفة، كذلك أسماء هذه الألوان تهُمُّ أيضاً. وفقاً لهذه الدراسة، عندما يُطلب من الأفراد تخمين منتجات بأسماء ألوان مختلفة (مثل المكياج)، كانت تُختار أسماءً "فاخرة" في كثير من الأحيان. على سبيل المثال، وُجِدَ الموكا مفضلاً أكثر من البني بشكل ملحوظ-على الرغم من أن الباحثين قاموا بعرض نفس اللون للأفراد. وجدت دراسة إضافية أن نفس التأثير ينطبق على منتجات كثيرة، يصنّف المستهلكين أسماء طلاء الألوان الأكثر راحة للعين بشكل دقيق أكثر من أسماء نظيراتها. كما تَبيّن أيضاً أن أكثر أسماء الألوان الفريدة والغير معتادة تزيد من نية الشراء. على سبيل المثال، عندما يكون هلام الفول مسمىً بأسماء مثل رازماتاز، تكون مختارةً أكثر من أسماء هلام الفول الأخرى مثل صفار الليمون. قد وُجِدَ هذا التأثير أيضاً في المواد الغير غذائية مثل القمصان. وكغرابة ما تبدو عليه، فاختيار أسماء وصفية ووابداعية لا تنسى لوصف لونٍ معين (مثل اختيار "اللون السماوي" على "الأزرق الفاتح") قد يكون جزءاً مهماً للتأكد من أن لون المنتج يحقق تأثيراً كبيراً. ترجمة -وبتصرّف- للمقال: The Psychology of Color in Marketing and Branding لصاحبه GREGORY CIOTTI.