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

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


مهدخت یافتیان 23 دیدگاه اصول طراحی وب سایت , تبلیغات و بازاریابی Wednesday, 29th May , 2013 39317 بازدید

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

عناصری برای جلب توجه در طراحی وب - 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 سال است به عنوان مدیر پروژه در زمینه طراحی وب سایت فعالیت دارم و مطالب و ترجمه های بسیاری در این رابطه تهیه کردم.


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


  1. ایمان
    30 May 2013

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




    • مهدخت یافتیان
      3 June 2013

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




  2. علی
    30 May 2013

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




    • مهدخت یافتیان
      3 June 2013

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




  3. سعید
    1 June 2013

    جالب بود :)




    • مهدخت یافتیان
      3 June 2013

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



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




    • مهدخت یافتیان
      3 June 2013

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




  5. آموزش طراحی وب سایت
    3 June 2013

    بسیار عالی




  6. داوود
    3 June 2013

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




    • مهدخت یافتیان
      3 June 2013

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




  7. محمد
    5 June 2013

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



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




  9. مهدي
    18 July 2013

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




  10. zahra
    22 July 2013

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




    • مهدخت یافتیان
      23 July 2013

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




  11. zahra
    23 July 2013

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




  12. فرداد
    22 June 2014

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




  13. سحر
    7 November 2014

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




  14. ali
    15 February 2015

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



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




  16. سعید
    15 July 2015

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




  17. رها
    20 August 2016

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



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





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

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

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

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

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



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

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