مطالعات قابل توجهی در مورد جلب توجه، در حوزه علوم شناختی، اعصاب و روان و روانشناسی صورت گرفته است و رقابت بسیار زیاد و شگفت انگیزی برای تبدیل این نتایج به صورت ابزاری در طراحی وب، جهت ایجاد تاثیر معنی دار وجود دارد.
راه های بسیار زیادی برای جلب توجه کاربران در صفحات وب وجود دارد از انتخاب لغات معنی دار گرفته تا جایگزینی تصاویری که باعث ایجاد عکس العمل هایی برگرفته از احساس، شده است. در این مقاله با بررسی عناصر بعضی از وب سایت ها به توضیح این امر مهم یعنی ” جلب توجه کاربران” می پردازیم:
کلمات با تاثیر بالا
بعضی لغات وجود دارند که باعث جذب بیشتر توجه کاربران در مقایسه با بقیه لغات می شوند. این موضوع با عکس العمل های خودکار مغز ما،ارتباط دارد، که اول چشم آن جملات خاص را می بیند اطلاعات برای مغر فرستاده می شود و عکس العمل خودکار نسبت به این اطلاعات صورت می پذیرد.
کلمات می تواند به نوبه خود در ذهن خودمحور ما ، شباهت ها را یادآوری کنند و ما را به حالت آگاهی در بیاورد. لغاتی مثل ” شما”،”هم اکنون”، و “رایگان” می تواند بیشترین مقدار توجه را از بین لغات دیگر برای ما به ارمغان بیاورد. اما این جلب توجه، بیشتر به مضمون سایت و هدف کاربران بستگی دارد. در زیر مثال ها یی از نحوه استفاده لغت “شما” در صفحه وجود دارد که تقریبا نزدیک به دکمه انجام عملیات ( مثل خرید، اطلاعات بیشتر و غیره ) قرار گرفته است.
من می خواهم بیشتر ببینم.
شما چگونه به جلب توجه کاربران اقدام می کنید در حالتی که آنها برای کسب اطلاعات بیشتر ترغیب شوند؟ شیوه سریع این موضوع این است که مقدار کمی از اطلاعات رادر یک زمان مشخص به آنها نمایش دهید این شیوه امکان بررسی سریع مطلب را به کاربر می دهد و در آن حس ” درخواست دیدن بیشتر اطلاعات ” را القا می کند . مثالی که در این زمینه می توان زد تیزر های نمایش متن است که برای امکان مطالعه در چند ثانیه طراحی شده اند.
شما می توانید به تیزر های دیگر نمایش محتوا فکر کنید، نمایشگرهای کوچکی که به کاربران می گوید که ” اینجا مطالب بیشتری وجود دارد که شما به آن علاقه مند هستید”
این وب سایت یک مثال زیبا از چگونگی ایجاد تیزر های متنی است، نمایش گزیده ای از مقالات برای هر دسته بندی. تمام متن ها خلاصه نمایش داده شده است که کاربر در هنگام تمرکز برای مطالعه متوجه می شود که متن خلاصه است لذا برای خواندن متن کامل مشتاق می شود.
سه مثال آخر اسلاید های جالبی دارند که برای نمایش بیشتر از دکمه های بعدی قبلی در سمت راست و چپ استفاده کرده است.
این یک تصویر از وب سایت سابق شرکت bixal است اما اسلایدر استفاده شده در این سایت نمونه بسیار عالی است. عنوان یکی از مطالب، به صورت پیش فرض مرتبط با یک تصویر است ، این موضوع حاکی از این است که عناوین دیگر آن نیز به تصاویر دیگری مرتبط هستند این موضوع باعث برانگیختن حس کنجکاوی کاربر می شود
با توجه به نحوه خواندن کاربران، طراحی کنید
وقتی دارید برای طراحی برنامه ریزی می کنید در مورد اینکه کاربران به چه روشی جذب وب سایت شوند فکر کنید. برای کمک به عناصر برای جلب بیشترین توجه آنها را در جاهای کلیدی در صفحه قرار دهید . برخی از مردم به بنر های تبلیغاتی به ندرت نگاه می کنند متن های بالا و پائین همیشه خوانده می شوند و مردم بیشتر در ظاهر وب غرق می شوند.
مطابق تحقیقات صورت گرفته در انیستیو پوینتر در سال 2007، عناصری که باعث جلب توجه بسیار زیادی می شوند شامل ابزار های هدایتی، گرافیک و تصاویر ، تبلیغ و عناوین . شما تنها کسری از یک ثانیه برای چندین ثانیه برای درگیر کردن توجه کاربران فرصت دارید.
برای جلب بشترین توجه کاربران وب سایت چه راه کارهایی دارید؟
ترکیبی از کلمات بزرگ وانرژی زا برای ایجاد اثر بیشتر استفاده کنید. از تصاویر بزرگ برای برقراری ارتباط با کاربر استفاده کنید. متن های مهم و اطلاعات کلیدی را به صورت بزرگ ( یا بوسیله کنتراست ) در محل های مناسب و قابل رویت قرار دهید
در زمان مناسب در جای مناسب
محتوا و اطلاعات حساس را در محل های مناسب و در زمان مناسب قرار دهید، به کاربران این فرصت را بدهید که ، خود مسیر مورد علاقه خود را طی کنند . یک نمونه عالی برای این موضوع ، استفاده از مقالات یا عناوین مرتبط، بعد یا قبل از عنصری که خود باعث جلب توجه کاربر یا خواننده شده است، می باشد. مثلا شاید شما در بعضی فروشگاه های آنلاین در هنگام خرید یا در اطراف سبد خرید ، متوجه محصولات پیشنهادی شده اید این یک شیوه عالی از جایگزینی محتوا در محل مناسب و در زمان مناسب است.
وقتی که می خواهید یک مقاله در نیویورک تایمز بخوانید متوجه باکس های اسلایدری می شوید که مقالات مرتبط را به شما نمایش میدهند. این یک نمونه عالی از چگونگی نمایش اطلاعات درست، در زمان درست و در محل درست آن است.
ممکن است موارد مهم بسیار زیادی در وب سایت وجود داشته باشد ، اما فقط نمایش یک مورد آنها از بقیه خیلی خیلی مهم تر است که شما قصد دارید نظر خوانندگان و کاربران را به خود جذب کند . استفاده بی رویه از مرکز توجه قرار دادن عناصر در صفحات وب سایت باعث کمرنگ شدن تاثیر مثبت و جذب مخاطبان خواهد شد . تا زمانیکه برای کاربر انتخاب های زیادی وجود داشته باشد ، انتخاب کردن یک مورد از بین آنها برایش سخت می شود و این موضوع در نهایت باعث می شود که هیچ چیزی را برای خواندن ، خرید و … انتخاب نکند.
استفاده از اسلایدر تا زمانی توجه خواننده را به خودش جلب می کنه که یک عنصر جلوی صورت او در حرکت باشد ! . این راه بی برو برگرد توجه کاربر را به دام می اندازد.
کنتراست رنگ
یکی از راه های جلب توجه بازدید کنندگان وب سایت کنتراست (تضاد) رنگ است.با استفاده از تم رنگی صحیح، یک دکمه که با رنگ متضاد از رنگ های سایت طراحی شده می تواند توجه بسیاری را به خودش جلب کند.
یک نمونه بسیار متداول، استفاده از دکمه “call to action” یا دکمه “فراخوانی برای انجام عملیات” است که می تواند در محل مناسب و با رنگی متضاد اجرا شود که بتواند بسیار جذب کننده باشد.
اهمیت تعادل در استفاده از چرخه رنگ وب سایت نباید فراموش شود . فرض کنید که مهم ترین دکمه سایت سبز براق است ، استفاده از رنگ براق برای جلب توجه به تنهایی کافی نخواهد بود ! .اگر رنگ های دیگر خیلی براق یا خیلی پر رنگ باشند، از تاثیر سبز براق کم می شود و آن هم مثل رنگ های دیگر مورد استفاده در وب سایت دیده خواهد شد و توجه خاصی هم به خود جلب نخواهد کرد .
انتخاب رنگ برای وب سایت خود را با دقت فراوان انجام دهید و به آن بپردازید . این موضوع را فراموش نکنید که شناخت رنگها و استفاده از آنها یک علم است ! از قوانین چرخه رنگ استفاده کنید. رنگ هایی که دارای بیشترین تضاد رنگی در چرخه رنگ هستند باید با سمت مخالف چرخه ، جفت شوند مانند همان دکمه سبز رنگ خیلی متداول است که با رنگ قرمز جفت شود . دیگر جفت های متضاد در چرخه شامل زرد با بنفش و آبی با نارنجی است
راه حل دیگر ، برای ایجاد کنتراست این است که رنگ ها را در مقابل رنگ های بیرنگ و کم جان تر و بر عکس ( یعنی رنگ های بی رنگ را در مقابل رنگ های پر قدرت ) قرار دهید و ترکیب کنید. استفاده از رنگ های متداول روشن در مقابل رنگ های تیره یا استفاده از یک رنگ متداول در مقابل رنگ های سفید و سیاه، بسیار موثر است. استفاده از گروه رنگ های که شبیه هم هستند مثلا پالتی که با سه رنگ شبیه هم انتخاب شده است تاثیر غریزی مناسبی جهت جلب توجه کاربر نخواهد داشت !
تاثیر عواطف و احساسات ونیاز به حفظ بقا
در زندگی انسانها بعضی از احساسات غریزی وجود دارند که به حفظ بقای آنها کمک می کند مثل احساس گرسنگی ( نیاز به غذا)، احساس خطر ( نیاز به حفظ بقا) و غیره. . معمولا برای اثر پذیر بودن در تبلیغات از این احساسات و عواطف استفاده می شود بعضی اوقات پیش آمده که تبلیغی شما را محو خود کرده و در آخر شما از خودتان می پرسید این تبلیغ برای معرفی کدام محصول بود؟ تمام تبلیغ در مورد چیز دیگری صحبت می کند و در آخر شما یک شیشه نوشابه در جائی از تبلیغ می بینید. نگران نباشید ، حتی اگر ذهن هوشیار شما از موضوع این تبلیغ سر در نیاورد یا حتی اسم برند معرفی شده را به یاد نمی آورید مطمئن باشید که شما هفته بعد در مغازه در حال خرید این محصول هستید!
تاثیر اطلاعات احساسی و عاطفی در ادراک و تصمیم گیری بسیار زیاد است. در صورتی این اطلاعات احساسی برای حفظ بقای ما به خصوص وقتی احساس خطر نمائیم لازم باشد، بسیار تاثیر گذار و مهم خواهد بود !
این دختر خوشحال به نظر نمیرسد ؟ نباید هم خوشحال باشد ! زیرا از تصویر او در ایجاد یک عکس العمل احساسی ، یعنی ایجاد ترس ( شما را به این باور میرساند که نیاز زیادی به داشتن این بیمه دارید.) استفاده می شود.
در همان وب سایت ما یک مرد خندان را خواهیم دید که دندان های زیبا و درخشانی دارد و ظاهرا بسیار هم از آینده زندگی خود راضی و مطمئن است !
دخترک کوچک و ترسان، مطمئنا نظر شما را به خودش جلب میکند. این سناریوی تهدید، با محتوای وب سایت که در مورد شرکتی است که بادی گارد ارائه می کند تناسب دارد !
در ادامه
امیدوارم از این چند نمونه مثال از وب سایت های خارجی استفاده لازم را برده باشید در صورتی که وب سایت ها ایرانی می شناسید که ازاین تکنیکهای جدید یا مشابه جهت جلب توجه کاربران استفاده کرده به من و خوانندگان دیگر معرفی کنید.
ایمان
30 May 2013
بازم اورین به زحماتی که میکشین.
مهدخت یافتیان
3 June 2013
خوشحالم که خوشتون امده
علی
30 May 2013
نکات جالبی بود. ممنون
مهدخت یافتیان
3 June 2013
تشکر از اینکه مطالعه کردید و امیدوارم بتونید از این نکات استفاده کنید
سعید
1 June 2013
جالب بود :)
مهدخت یافتیان
3 June 2013
خوشحالم که از مطلب خوشتون آمده
اپلیکیشن خرید شارژ
3 June 2013
تهیهی این دست مطالب واقعا دست مریزاد داره. شخصا استفاده بردم. ما در طراحی وبسایت اپلیکیشن خرید شارژ «کارتی» بعضی از این نکات، از جملهی دکمهی Call to action متمایز، تضاد رنگها روی چرخهی رنگ و اسلایدر تصاویر رو استفاده کردیم.
مهدخت یافتیان
3 June 2013
تشکر از اینکه از مطلب خوشتون آمده و مرسی که سایتتون را بابت نمونه معرفی کردید
آموزش طراحی وب سایت
3 June 2013
بسیار عالی
داوود
3 June 2013
Hi MS. Yaftian;
Thank’s a lot for your good translation and the good Choice of article,too.
مهدخت یافتیان
3 June 2013
خوشحالم که خوشتون اومده
محمد
5 June 2013
سلام
عالی بود استفاده کردم.
یه پرینتم ازش گرفتم حیف که رنگاش سیاه و سفید میشه ! هر مطلبی ارزش پرینت روی کاغذو نداره برای من! بازم ممنون
علیرضا غضنفری
19 June 2013
مفید بود و کاربردی، پرهیز از انتشار مطالب غیر مفید و غیر مرتبط مهمترین دلیلی است که من را به وب سایت شما جذب کرده و بطور منظم از محتوای خوبتون استفاده می کنم
مهدي
18 July 2013
بسيار عالي، کامل و مفيد
خدا قوت، هميشه و همه جا شاد و پيروز
در پناه يگانه برنامه نويس عالم
zahra
22 July 2013
http://sixrevisions.com
منابعو ذکر کنید :)
مهدخت یافتیان
23 July 2013
عزیزم منبع که زیر مطلب ذکر شده. در سایت اکثر مقالاتی که ترجمه شدند منبع مطلب زیرش آورده شده
zahra
23 July 2013
اها…ببخشید ندیدم..از حق نگذریم سایتتون عالیه..موفق باشید
فرداد
22 June 2014
درود بر شما …
خیلی خوب بود
سحر
7 November 2014
سلام.ممنونم.دعا کنید برای طراحی وب سایتم اول بشم.ممنون از اطلاعاتتون.خیلی به دردم خورد………..
ali
15 February 2015
خیلی ممنون مطالب شما خیلی برا من مفیده جا داره که از شما تشکر کنم
SeyedMehdi M0usavi
13 May 2015
شما تو سایتتون هر مطلبی که تموم میشه یه سری لینک پیشنهادی میزارین. سعی کنید در طراحی این لینک ها از رنگ های متمایز و همچنین از دایره داخل فوتر استفاده کنید
سعید
15 July 2015
سلام
مظالب خیلی خوبی بود
بر خودم لازم دونستم که تشکر و قدردانی کنم :)
رها
20 August 2016
ممنون از زحمتی که کشیدید و گرد اوری مطالب عالی …استفاده کردیم