مکث کن، نگاه کن، کلیک کن : عناصری برای جلب توجه کاربران در طراحی وب

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


مهدخت یافتیان ۲۳ دیدگاه اصول طراحی وب سایت , تبلیغات و بازاریابی چهارشنبه, ۸ام خرداد , ۱۳۹۲ 19542 بازدید

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

عناصری برای جلب توجه  در طراحی وب - webtarget.ir

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

کلمات با تاثیر بالا

عناصری برای جلب توجه در طراحی وب - webtarget.ir

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

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

عناصری برای جلب توجه در طراحی وب - webtarget.ir

عناصری برای جلب توجه در طراحی وب - webtarget.ir

عناصری برای جلب توجه در طراحی وب - webtarget.ir

عناصری برای جلب توجه در طراحی وب - webtarget.ir

من می خواهم بیشتر ببینم.

شما چگونه به جلب توجه کاربران اقدام می کنید در حالتی که آنها برای کسب اطلاعات بیشتر ترغیب شوند؟ شیوه سریع این موضوع این است که مقدار کمی از اطلاعات رادر یک زمان مشخص به آنها نمایش دهید این شیوه امکان بررسی سریع مطلب را به کاربر می دهد و در آن حس ” درخواست دیدن بیشتر اطلاعات ” را القا می کند . مثالی که در این زمینه می توان زد تیزر های نمایش متن است که برای امکان مطالعه در چند ثانیه طراحی شده اند.

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

عناصری برای جلب توجه در طراحی وب - webtarget.ir

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

عناصری برای جلب توجه در طراحی وب - webtarget.ir

عناصری برای جلب توجه در طراحی وب - webtarget.ir

عناصری برای جلب توجه در طراحی وب - webtarget.ir

سه مثال آخر اسلاید های جالبی دارند که برای نمایش بیشتر از دکمه های بعدی قبلی در سمت راست و چپ استفاده کرده است.

عناصری برای جلب توجه در طراحی وب - webtarget.ir

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

با توجه به نحوه خواندن کاربران، طراحی کنید

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

مطابق تحقیقات صورت گرفته در انیستیو پوینتر در سال ۲۰۰۷، عناصری که باعث جلب توجه بسیار زیادی می شوند شامل ابزار های هدایتی، گرافیک و تصاویر ، تبلیغ و عناوین . شما تنها کسری از یک ثانیه برای چندین ثانیه برای درگیر کردن توجه کاربران فرصت دارید.

برای جلب بشترین توجه کاربران وب سایت چه راه کارهایی دارید؟

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

عناصری برای جلب توجه در طراحی وب - webtarget.ir

عناصری برای جلب توجه در طراحی وب - webtarget.ir

عناصری برای جلب توجه در طراحی وب - webtarget.ir

عناصری برای جلب توجه در طراحی وب - webtarget.ir

در زمان مناسب در جای مناسب

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

عناصری برای جلب توجه در طراحی وب - webtarget.ir

عناصری برای جلب توجه در طراحی وب - webtarget.ir

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

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

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

کنتراست رنگ

یکی از راه های جلب توجه بازدید کنندگان وب سایت کنتراست (تضاد) رنگ است.با استفاده از تم رنگی صحیح، یک دکمه که با رنگ متضاد از رنگ های سایت طراحی شده می تواند توجه بسیاری را به خودش جلب کند.
یک نمونه بسیار متداول، استفاده از دکمه “call to action” یا دکمه “فراخوانی برای انجام عملیات” است که می تواند در محل مناسب و با رنگی متضاد اجرا شود که بتواند بسیار جذب کننده باشد.

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

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

راه حل دیگر ، برای ایجاد کنتراست این است که رنگ ها را در مقابل رنگ های بیرنگ و کم جان تر و بر عکس ( یعنی رنگ های بی رنگ را در مقابل رنگ های پر قدرت ) قرار دهید و ترکیب کنید. استفاده از رنگ های متداول روشن در مقابل رنگ های تیره یا استفاده از یک رنگ متداول در مقابل رنگ های سفید و سیاه، بسیار موثر است. استفاده از گروه رنگ های که شبیه هم هستند مثلا پالتی که با سه رنگ شبیه هم انتخاب شده است تاثیر غریزی مناسبی جهت جلب توجه کاربر نخواهد داشت !

عناصری برای جلب توجه در طراحی وب - webtarget.ir

عناصری برای جلب توجه در طراحی وب - webtarget.ir

عناصری برای جلب توجه در طراحی وب - webtarget.ir

عناصری برای جلب توجه در طراحی وب - webtarget.ir

عناصری برای جلب توجه در طراحی وب - webtarget.ir

عناصری برای جلب توجه در طراحی وب - webtarget.ir

تاثیر عواطف و احساسات ونیاز به حفظ بقا

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

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

عناصری برای جلب توجه در طراحی وب - webtarget.ir

این دختر خوشحال به نظر نمیرسد ؟ نباید هم خوشحال باشد ! زیرا از تصویر او در ایجاد یک عکس العمل احساسی ، یعنی ایجاد ترس ( شما را به این باور میرساند که نیاز زیادی به داشتن این بیمه دارید.) استفاده می شود.

عناصری برای جلب توجه در طراحی وب - webtarget.ir

در همان وب سایت ما یک مرد خندان را خواهیم دید که دندان های زیبا و درخشانی دارد و ظاهرا بسیار هم از آینده زندگی خود راضی و مطمئن است !

عناصری برای جلب توجه در طراحی وب - webtarget.ir

دخترک کوچک و ترسان، مطمئنا نظر شما را به خودش جلب میکند. این سناریوی تهدید، با محتوای وب سایت که در مورد شرکتی است که بادی گارد ارائه می کند تناسب دارد !

در ادامه

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

منبع



نویسنده / مترجم : مهدخت یافتیان

4 سال است به عنوان مدیر پروژه در زمینه طراحی وب سایت فعالیت دارم و مطالب و ترجمه های بسیاری در این رابطه تهیه کردم.


۲۳ دیدگاه برای این نوشته ثبت شده است


  1. ایمان
    ۹ خرداد ۱۳۹۲

    بازم اورین به زحماتی که میکشین.




    • مهدخت یافتیان
      ۱۳ خرداد ۱۳۹۲

      خوشحالم که خوشتون امده




  2. علی
    ۹ خرداد ۱۳۹۲

    نکات جالبی بود. ممنون




    • مهدخت یافتیان
      ۱۳ خرداد ۱۳۹۲

      تشکر از اینکه مطالعه کردید و امیدوارم بتونید از این نکات استفاده کنید




  3. سعید
    ۱۱ خرداد ۱۳۹۲

    جالب بود :)




    • مهدخت یافتیان
      ۱۳ خرداد ۱۳۹۲

      خوشحالم که از مطلب خوشتون آمده




  4. اپلیکیشن خرید شارژ
    ۱۳ خرداد ۱۳۹۲

    تهیه‌ی این دست مطالب واقعا دست مریزاد داره. شخصا استفاده بردم. ما در طراحی وب‌سایت اپلیکیشن خرید شارژ «کارتی» بعضی از این نکات، از جمله‌ی دکمه‌ی Call to action متمایز، تضاد رنگ‌ها روی چرخه‌ی رنگ و اسلایدر تصاویر رو استفاده کردیم.




    • مهدخت یافتیان
      ۱۳ خرداد ۱۳۹۲

      تشکر از اینکه از مطلب خوشتون آمده و مرسی که سایتتون را بابت نمونه معرفی کردید




  5. آموزش طراحی وب سایت
    ۱۳ خرداد ۱۳۹۲

    بسیار عالی




  6. داوود
    ۱۳ خرداد ۱۳۹۲

    Hi MS. Yaftian;
    Thank’s a lot for your good translation and the good Choice of article,too.




    • مهدخت یافتیان
      ۱۳ خرداد ۱۳۹۲

      خوشحالم که خوشتون اومده




  7. محمد
    ۱۵ خرداد ۱۳۹۲

    سلام
    عالی بود استفاده کردم.
    یه پرینتم ازش گرفتم حیف که رنگاش سیاه و سفید میشه ! هر مطلبی ارزش پرینت روی کاغذو نداره برای من! بازم ممنون




  8. علیرضا غضنفری
    ۲۹ خرداد ۱۳۹۲

    مفید بود و کاربردی، پرهیز از انتشار مطالب غیر مفید و غیر مرتبط مهمترین دلیلی است که من را به وب سایت شما جذب کرده و بطور منظم از محتوای خوبتون استفاده می کنم




  9. مهدي
    ۲۷ تیر ۱۳۹۲

    بسیار عالی، کامل و مفید
    خدا قوت، همیشه و همه جا شاد و پیروز
    در پناه یگانه برنامه نویس عالم




  10. zahra
    ۳۱ تیر ۱۳۹۲

    http://sixrevisions.com
    منابعو ذکر کنید :)




    • مهدخت یافتیان
      ۱ مرداد ۱۳۹۲

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




  11. zahra
    ۱ مرداد ۱۳۹۲

    اها…ببخشید ندیدم..از حق نگذریم سایتتون عالیه..موفق باشید




  12. فرداد
    ۱ تیر ۱۳۹۳

    درود بر شما …
    خیلی خوب بود




  13. سحر
    ۱۶ آبان ۱۳۹۳

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




  14. ali
    ۲۶ بهمن ۱۳۹۳

    خیلی ممنون مطالب شما خیلی برا من مفیده جا داره که از شما تشکر کنم




  15. SeyedMehdi M0usavi
    ۲۳ اردیبهشت ۱۳۹۴

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




  16. سعید
    ۲۴ تیر ۱۳۹۴

    سلام
    مظالب خیلی خوبی بود
    بر خودم لازم دونستم که تشکر و قدردانی کنم :)




  17. رها
    ۳۰ مرداد ۱۳۹۵

    ممنون از زحمتی که کشیدید و گرد اوری مطالب عالی …استفاده کردیم



دیدگاه خود را بنویسید





نشانی ایمیل شما منتشر نخواهد شد.

کامنت های شما بعد از تأیید توسط نویسنده وبلاگ، منتشر خواهند شد.

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

شما میتوانید با مراجعه به سایت گراواتار یک آواتار اختصاصی برای خود تعریف کنید، تا در کنار نام شما نمایش داده شود

برای قرار دادن کدهای نمونه می توانید از تگ های [php] ، [html] ، [css] و [js] استفاده کنید.
به عنوان مثال کدهای php را می توان به صورت زیر قرار داد:
[php] var $whoLoveIranians = "WebTarget!"; [/php]



کلیه حقوق مادی و معنوی برای وب سایت وب تارگت محفوظ است ©2017 وب‌تارگت

استفاده از مطالب وب سایت در سایر وب سایت‌ها و نشریات چاپی با ذکر منبع آزاد است.