روانشناسی در طراحی وب: نحوه استفاده صحیح از آن

همه ما می دانیم که روانشناسی یک ابزار قدرتمند است. هنگامی که به درستی استفاده شود، می تواند افراد را تحت تأثیر قرار دهد و آنها را متقاعد کند که اقدام کنند. در دنیای طراحی وب، این امر بسیار مهم است.

اگر می خواهید یک وب سایت موثر ایجاد کنید که بازدیدکنندگان را به مشتری تبدیل کند، باید از روانشناسی طراحی وب استفاده کنید. برای فهمیدن بیشتر همچنان بخوانید.

روانشناسی طراحی وب چیست؟

طراحی وب سایت شما نباید فقط وب سایت شما را زیبا کند. باید بازدیدکنندگان شما را تحت تاثیر قرار دهد، توجه آنها را جلب کند و آنها را به سمت عمل هدایت کند.

این جایی است که روانشناسی طراحی وب وارد می شود. هر رنگ، نوع فونت و فضا دارای اهمیت روانی است و به افراد کمک می کند به وب سایت شما متصل شوند. این عناصر واکنش‌های ناخودآگاه را تحریک می‌کنند، که باید از آنها برای رسیدن به آن عمل مورد نظر استفاده کنید.

چند ثانیه طول می کشد تا مردم تصمیم بگیرند که آیا وب سایت شما تمام انتخاب ها و اطلاعات مورد نیاز شما را دارد یا خیر. روانشناسی طراحی وب به شما ، طراح، کمک می کند تا این فرآیندهای ناخودآگاه و نحوه مهار آنها را درک کنید.

مزایای استفاده از روانشناسی در طراحی وب سایت

مزیت اصلی استفاده از روانشناسی در طراحی وب، صحبت کردن با مردم به زبان آنهاست. همچنین صحبت کردن به زبان شما و یافتن نقاط مشترک است . به این ترتیب می توانید اعتماد ایجاد کنید.

شما می‌خواهید از رنگ‌ها و الگوهای آشنا استفاده کنید، عناصری که شما را متمایز می‌کنند، اما با مردم ارتباط برقرار می‌کنند. شما به بازدیدکنندگان نیاز دارید تا بفهمند وب سایت شما در مورد چیست و از کجا می توانند اطلاعات بیشتری را به سرعت دریافت کنند. سپس، شما باید محرک های مناسب را فشار دهید. برای مثال Comic Sans یک محرک فوق‌العاده است و در زیر به آن خواهیم پرداخت. رنگ، فضا و خطوط نیز تأثیر خاصی بر نحوه درک مردم از وب سایت شما ایجاد می کنند.

مهمتر از همه، همه این عناصر لحن را برای تعامل بازدیدکنندگان با وب سایت شما تعیین می کنند.

نحوه استفاده از روانشناسی در طراحی وب سایت

اکنون متوجه شدید که چرا دانستن اصول روانشناسی انسان در طراحی وب ضروری است. بیایید ببینیم چگونه می توانید از آن استفاده کنید!

1 . ترتیب

روانشناسی گشتالت نشان می دهد که چگونه این عناصر زیر بر بازدیدکنندگان شما تأثیر می گذارند:

• شباهت  - افراد اشیاء مشابه را به عنوان یک مفهوم یا حداقل بخشی از یک مفهوم درک می کنند.
• نزدیکی  - چیزهای نزدیک به یکدیگر به عنوان بخشی از یک گروه تلقی می شوند.
• تداوم  - شما می خواهید نگاه بازدید کننده شما به طور طبیعی از یک عنصر به عنصر دیگر منتقل شود.
• بسته شدن  - شیئی که کاملاً بسته نیست هنوز به عنوان یک کل درک می شود زیرا مغز افراد همیشه شکاف ها را پر می کند.
• شکل و زمین  — افراد تصاویر را به اشیاء اصلی که به آنها نگاه می کنند (شکل) و سایر عناصر (پس زمینه) ساده می کنند.

وب سایت Target Jobs یک مثال عالی در اینجا است زیرا:

• اشیاء مشابه گروه بندی می شوند: توجه کنید که چگونه سه تصویر اول جوانان شاد را در محیط های مختلف حرفه ای نشان می دهد. این موقعیت نشان می دهد که Target می تواند به هر کسی کمک کند شغل رویایی خود را پیدا کند.
• این تصاویر در نزدیکی کلیدواژه‌های خاصی قرار می‌گیرند: جوانانی که در حال خندیدن هستند، درست در کنار CTA « کاوش در فرصت‌ها» قرار می‌گیرند. بنابراین، مشاغل هدف با شادی و شانس آینده شما مرتبط است .
• رنگ‌ها، فونت‌ها و فاصله‌ها یک انتقال صاف را امکان‌پذیر می‌کنند: کاربران هدایت می‌شوند که به پایین پیمایش کنند و از یک بخش صفحه وب به بخش بعدی بروند. همچنین، توجه داشته باشید که چگونه هر بخش موضوع خاص خود را دارد که بر روی مزایای Target Jobs متمرکز است.
• رنگ‌های متضاد (نارنجی، سفید، بنفش و غیره) از تکنیک شکل و زمین استفاده می‌کنند: بنابراین، تمرکز بر یک بخش باعث می‌شود قسمت‌های دیگر بخشی از پس‌زمینه شوند. فایده اینجا این است که توجه شما به یک میلیون قطعه تقسیم نمی شود. شما می توانید در یک زمان روی یک چیز تمرکز کنید و بفهمید که تارگت جابز می خواهد به شما بگوید.

2 . شکل ها

هر شکل یک ارتباط ناخودآگاه متفاوت دارد:

• مثلث ها و مربع ها نشان دهنده حرفه ای بودن، قدرت و قدرت هستند.
• دایره ها، بیضی ها و بیضی ها نماد روابط، عشق و اتحاد هستند.
• خطوط افقی حس آرامش و اجتماع را القا می کند.
• خطوط عمودی نشان دهنده قدرت و عمل است.

فقط به وب سایت AT & T نگاه کنید . همه چیز اجتماع و آرامش را به نمایش می گذارد، از لوگوی گرد گرفته تا خطوط افقی که هر بخش را محدود می کند.

اما این وب سایت هر چیزی جز کسل کننده است. توجه کنید که چگونه هر دکمه CTA (“بیشتر بیاموزید”، ​” اکنون ثبت نام کنید”) با یک فلش کوچک دنبال می شود. این شکل از یک زاویه مربع استفاده می کند که توسط بدنه فلش به دو زاویه حاد تقسیم شده است. به این ترتیب، هر چند کوچک، فلش نشان دهنده عمل و قدرت است. علاوه بر این، بخش ها در مربع مرتب شده اند، که دوباره نماد تصمیم و قدرت است.

3 . فضا

مهم نیست که کسب و کار شما در چه صنعتی است، فضا در طراحی وب ضروری است. صفحات وب خود را شلوغ نکنید حتی اگر انگیزه طبیعی شما تا حد ممکن اطلاعات بیشتری را در خود جمع کند.

از فضای سفید فراوان استفاده کنید و سعی کنید رویکردی مینیمال داشته باشید. نقطه فروش منحصر به فرد را در هر صفحه شناسایی کنید و به افراد کمک کنید روی آن تمرکز کنند.

صفحه وب DOGUE را بررسی کنید . فضاهای سفید هر عنصر ضروری را جدا می کند، بنابراین هر بخش به وضوح ارائه می شود. اولین چیزی که متوجه می شوید عنوان و تصویر سگ های شاد است. سپس نگاه شما به سمت شعار سمت راست می رود. پس از آن، متوجه بخش های زیر آن بزرگ ​” Dogue” می شوید. بخش بعدی وب سایت خدمات شرکت را برجسته می کند (به عنوان مثال، داماد، شام، بازی و غیره). به نحوه نمایش هر سرویس از طریق یک کلمه کلیدی سریع و آسان توجه کنید. علاوه بر این، تصاویر این کلمات کلیدی را کاملاً نشان می دهند. حتی بهتر از آن، این تصاویر دارای پس‌زمینه خاکستری مایل به سفید هستند که با فضاهای سفید بین آنها ترکیب می‌شود. بنابراین اگرچه وب سایت شلوغ تر از سایرین است، اما شما آن را نامرتب یا نامشخص درک نمی کنید.

SendInBlue ، یک سرویس بازاریابی ایمیلی، از رویکرد فضای سفید مشابهی برای طراحی خود استفاده می کند، و عالی کار می کند زیرا بازدیدکنندگان وب سایت می توانند آنچه را که می خواهند با سهولت بیشتری پیدا کنند و به طور کلی بسیار تمیزتر به نظر می رسد.

4 . رنگ

رنگ های مناسب می توانند توجه را به خود جلب کنند، علاقه را حفظ کنند و حتی منجر به عمل شوند. علاوه بر این، رنگ شناخت برند را تا 80 درصد افزایش می دهد .

در اینجا حداقل چیزی است که باید در نظر بگیرید:

• هدف شما  - می‌خواهید بازدیدکنندگان در صفحه شما چه کاری انجام دهند؟ برای مثال، اگر می‌خواهید بازدیدکنندگان فرمی را پر کنند، ممکن است بخواهید از رنگی استفاده کنید که برجسته باشد و به راحتی قابل مشاهده باشد. اگرچه آبی امن‌ترین انتخاب است، زیرا بیشتر مورد پسند است ، اما رنگ قرمز باعث اعمال بیشتر می‌شود.
• مخاطبان شما  - فرهنگ ها با رنگ ارتباط متفاوتی دارند. به عنوان مثال، در دنیای غرب، رنگ سفید نشان دهنده خلوص است. با این حال، رنگ سفید در آسیا با مرگ و سوگواری همراه است.
• حالتی که می خواهید ایجاد کنید  — آیا می خواهید وب سایت شما حرفه ای باشد؟ آرامش و آرامش؟ هیجان انگیز و پر انرژی؟ می‌خواهید برند شما چگونه شناخته شود؟

صفحه اول Moat یک نمونه فوق العاده از رنگ است:

• بنفش و نارنجی تضاد خوشمزه ای ایجاد می کنند که بازدیدکنندگان را در جهت درست راهنمایی می کند. توجه داشته باشید که چگونه هر CTA نارنجی است – یک رنگ فعال.
• بنفش نشان دهنده آرامش، شجاعت و خرد است. این یک رنگ عالی برای پس زمینه شما است زیرا بسیار تثبیت کننده است.

Lending Bee Singapore از رنگ و فضای سفید برای نمایش محتوای تولید شده توسط کاربر در صفحه وب خود استفاده می کند:

نمونه عالی دیگر از ترکیب رنگ های مختلف برای ایجاد اعتماد ، وب سایت Identity Guard است که خدمات حفاظت از سرقت هویت را ارائه می دهد. همانطور که در وب سایت می بینید، آنها از رنگ سفید مینیمالیستی ترکیب شده با سبز استفاده می کنند که رنگ رسمی Trustpilot (یکی از محبوب ترین دایرکتوری های بررسی) است. این انتخاب رنگ کمک می‌کند تا صحت بررسی‌ها را برجسته کنیم، همراه با ذکر اینکه این بررسی‌ها از Trustpilot گرفته شده‌اند.

5 . تایپ فیس ها

یک طراحی وب خوب مانند یک لباس خوب است: باید چشم نواز باشد اما نه بیش از حد.

در مورد تایپ فیس ها هم همینطور است.

در حالی که یک وب سایت باید از حروف چاپی مختلفی برای افزایش علاقه استفاده کند، استفاده از آنها در حد اعتدال ضروری است. تعداد بسیار زیاد تایپ‌فیس‌های مختلف می‌تواند بسیار زیاد باشد و سایت شما را به هم ریخته نشان دهد.

در عوض، روی استفاده از چند نوع حروف مهم در سراسر سایت خود تمرکز کنید و از تغییرات (مانند حروف برجسته یا ایتالیک) برای افزایش جذابیت بصری استفاده کنید. به عنوان مثال، ممکن است بخواهید از یک تایپ سریف برای سرفصل های خود و از یک تایپ بدون سریف برای متن اصلی خود استفاده کنید.

فراتر از ظاهر ساده، فونت ها همچنین می توانند برای راهنمایی کاربران به سمت انجام اقدامات خاص استفاده شوند. به عنوان مثال، فونت‌های Sans-serif مانند Arial یا Helvetica عموماً به‌طور آنلاین قابل خواندن‌تر هستند، و آنها را به انتخاب خوبی برای متن متن تبدیل می‌کند. از سوی دیگر، اسکریپت‌ها و فونت‌های تزئینی برای سرفصل‌ها یا فراخوان‌ها مناسب‌تر هستند، زیرا به جلب توجه به عناصر ضروری در صفحه کمک می‌کنند.

صفحه کاپیتان مارول مارول به نظر چیزی است که یک  کودک 10 ساله در دهه 1990 طراحی کرده بود . این صفحه وب از زرق و برق ها، گیف ها، فضای شلوغ و حروف شنیع Comic Sans وحشتناک است.

و این نکته است. کاپیتان مارول با اجتناب از اسپویلرهای داستانی به دهه 90 پیوند خورده است و ظاهر یکپارچهسازی با سیستمعامل بخشی از این پیام است. اخلاقیات صفحه وب این است که گاهی اوقات اگر می خواهید احساس خاصی را به مخاطب خود منتقل کنید، باید شجاع باشید و قوانین را زیر پا بگذارید. مارول با طراحی ساده‌اش که به عنوان ماشین زمان در دهه‌ی طولانی و طولانی دهه‌ی نود عمل می‌کند، موفق به انجام این کار می‌شود.

بسته شدن

اگر می خواهید توجه بازدیدکنندگان وب سایت خود را حفظ کنید، علاقه خود را حفظ کنید و به اقدام منجر شوید، استفاده از اصول طراحی بالا ضروری است. با استفاده از فضا، حروف، چینش، اشکال و رنگ ها در طراحی وب خود، می توانید وب سایتی ایجاد کنید که هم از نظر بصری جذاب باشد و هم در انتقال پیام شما موثر باشد.

با این حال، این اصول فقط دستورالعمل هستند. شما باید شجاع باشید و از شهود خود استفاده کنید. به یاد داشته باشید که هدف طراحی وب، صحبت کردن با مخاطبان با استفاده از زبان آنهاست.