Call to Action، چه هستند و چه اهمیتی دارند.

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

به طور معمول، Call To Actions، در واسط‌های وب، ظاهر دکمه‌های فعالی را به خود می‌گیرند که پس از کلیک روی آن‌ها، ناوبر را برای تکمیل یک عمل بسیار خاص (پرداخت، درج داده‌ها در فرم، روند خرید، و غیره) ارسال می‌کند.

با توجه به حساسیت موضوع، قوانین دقیقی برای انجام بهینه و موفقیت آمیز Call To Action وجود دارد. چند پیشنهاد بسیار جالب توسط سایت ارائه شده است مجله SASHING, که یک تصویر نسبتاً گسترده و مفصل با مثال های واقعی ارائه می دهد.

بنابراین، برای همه طراحان وب، اعم از متخصص و غیرمتخصص، ارزیابی جنبه هایی که می تواند به طور مثبت یا منفی بر Cll To Action تأثیر بگذارد بسیار مهم است. و بنابراین، ما دوباره در مورد دسترسی و قابلیت استفاده صحبت می کنیم. اصطلاحاتی که اخیراً به فراموشی سپرده شده اند و دلیل آن را نمی فهمم.

کپی‌نویسی (راست) برای وب‌سایت‌ها و شبکه‌های اجتماعی

با این حال، Call To Action فقط به جنبه گرافیکی محدود نمی شود:

به عنوان یک عنصر مهم بازاریابی متقاعد کننده، واضح است که باید از نظر محتوا نیز ارزیابی شود. یعنی چه چیزی پشت یک Call to Action وجود دارد و چرا ناوبر باید در آنجا کلیک کند نه در جای دیگر.

Call To Action یک فراخوان واقعی برای اقدام است، آن عملی که باید آن را القا کنید یا می خواهید انجام شود و در محدوده آن قرار می گیرد. ارتباط متقاعد کننده زیرا وقتی کاربر وارد سایت ما شد، نباید اجازه خروج او را بدهیم، برعکس، حتی باید او را متقاعد کنیم که کاری را انجام دهد که می تواند برای هر دو، یعنی برای ما و کاربر مزیت شود. من بر این عقیده هستم، راستش را بپذیریم، من مطمئناً می دانم که 10.000 بازدید روزانه با نرخ پرش 99٪ کمتر از 500 بازدید با نرخ پرش 10٪ و نرخ تبدیل 5 یا حتی 10٪ مفید است. .

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

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

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

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

معناشناسی فراخوان‌ها به کنش‌ها باید خود توضیحی باشد. یک دکمه، یک پیوند، باید دارای برچسبی باشد که دقیقاً عملی را که کاربر قرار است انجام دهد، مشخص کند. من اخیراً تغییرات ایجاد شده توسط برخی از شبکه‌های اجتماعی و CMS را در فراخوانی اعمال آپلود تصویر مشاهده کردم: اساساً اکنون دو دکمه داریم که می‌گویند «انتخاب تصویر». به طور باورنکردنی، دکمه ای که می گوید «آپلود عکس» وجود ندارد. این باعث سردرگمی کاربران می شود، همچنین در نظر داشته باشید که کسانی که با صفحه خوان پیمایش می کنند دید دارند. سریال تلویزیونی از صفحه، یعنی فاقد نمای کلی کلی است که برای کاربرانی که با مرورگر بصری پیمایش می کنند، معمول است.

از برچسب های مبهم باید اجتناب شود، عمومی یا نامشخص برچسبی که کاملاً باید از آن اجتناب شود "اینجا را کلیک کنید" است. اگر صفحه‌ای را مرور می‌کنید که فراخوانی‌ها به کنش‌ها را با برچسب‌گذاری مشابه با صفحه‌خوان ارائه می‌دهد، یک سری بی‌پایان «(لینک) اینجا را کلیک کنید» خواهید شنید که هیچ اطلاعات مفیدی در مورد ماهیت اقدامی که می‌خواهید در اختیار شما قرار نمی‌دهد. فعال سازی.

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

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

nginx: یک وب سرور جدید

جاوا اسکریپت و استفاده صحیح از آن

با توجه به نحوه فعال سازی این اقدامات، باید در جاوا اسکریپت تأمل کرد.

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

تمرینی که باید از آن اجتناب کرد پیوندهایی است که هیچ ارزشی برای ویژگی ندارند href، به عنوان <a href="" id="trigger" >...</a>. در مرورگرهای بدون پشتیبانی جاوا اسکریپت مانند Lynx، پیوندی از این نوع تأثیر بارگیری مجدد صفحه را به طور کامل خواهد داشت. بدیهی است که ما می توانیم به طور کامل با جاوا اسکریپت ماشه را تولید کنیم، اما اگر جاوا اسکریپت پشتیبانی یا غیرفعال نشود، پیوند در دسترس نخواهد بود. بسیاری از سایت‌های استاتیک نیز از این تکنیک برای ایجاد پیوندهای دائمی استفاده می‌کنند، زیرا مرورگر صفحه فعلی را به عنوان مقدار گمشده ویژگی در نظر می‌گیرد. href.

بنابراین لازم است به این ویژگی مقدار داده شود، همچنین با توجه به این واقعیت که برای مشخصات XHTML این ویژگی href نمی تواند خالی باشد. اما کدام؟ بسیاری انتخاب کرده اند که از کاراکتر پوند (#) به عنوان پر کردن استفاده کنند. با این حال، این راه‌حل محدودیت‌هایی نیز دارد، زیرا با غیرفعال شدن یا پشتیبانی نشدن جاوا اسکریپت، اثری ایجاد یک مرجع به یک لنگر وجود ندارد، که می‌تواند افرادی را که با فناوری کمکی غیربصری در وب مرور می‌کنند، منحرف کند.

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

  راهنما

  
      ایمیل باید با فرمت username@domain.extension باشد
  

بیایید استایل هایی را به div خود اختصاص دهیم که با جاوا اسکریپت مخفی می کنیم. اگر جاوا اسکریپت پشتیبانی یا غیرفعال نشود، div ما به سادگی قابل مشاهده خواهد بود. برای پنهان کردن آن، از یک کلاس CSS برای پیوند در هنگام بارگذاری سند استفاده می کنیم:

پنهان {
موقعیت: مطلق;
بالا: -1000em;
}

هم jQuery و هم Prototype متدهایی برای مخفی کردن یک عنصر دارند، اما به یاد داشته باشید که از اعلان استفاده می کنند. display: none. این عبارت متأسفانه توسط خوانندگان صفحه تفسیر می شود، که پشتیبانی جزئی از جاوا اسکریپت دارند و از خواندن محتوای یک عنصر جلوگیری می کنند. در این مرحله، اگر از jQuery استفاده کنیم، می توانیم بنویسیم:

$('#trigger').click(function() {

    $('#email-help').removeClass('hidden');

})؛

من عمداً از درج این بیانیه اجتناب کردم return false; زیرا برخی از صفحه خوان ها قادر به تفسیر یک رویداد هستند click، در برخی موارد آن را با یک رویداد صفحه کلید برابر می کند. اگر من چنین اظهارنامه ای را وارد کرده بودم، آن برنامه ها مقصد پیوند را دنبال نمی کردند و بنابراین نمی توانستند محتویات div ما را بخوانند. تنها اثر ناخوشایند برای مرورگرهای معمولی مشاهده لنگر اضافه شده به URL صفحه فعلی است، اما این کوچکترین تأثیری بر دسترسی و قابلیت استفاده آن ندارد.

با تغییرات مناسب، مشاهدات یکسان برای دکمه ها نیز اعمال می شود، بدیهی است که تفاوت در محدوده رویدادهای جاوا اسکریپت موجود را در نظر می گیرد.

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

• طرح فراخوان برای اقدام
• برچسب زدن فراخوان به اقدام

هر یک از جنبه ها به طور جدایی ناپذیر با دیگری پیوند دارد. طرح یک فراخوان هرگز نباید قابلیت تشخیص آن را به خطر بیندازد. یک دکمه روی یک فرم، هر چند با استفاده از CSS اصلاح شده باشد، همیشه باید کاربر را به این فکر کند که "اکنون اینجا کلیک می کنم". در واقع، طبق آنچه استیو کروگ بیان می کند، کاربر باید بدون اینکه فکر کند چیزی که می بیند یک دکمه است یا نه کلیک کند. این اقدام باید فوری باشد (در عرض 300 میلی ثانیه یا کمی بیشتر، دقیقاً همان چیزی که توسط تحقیقات اخیر در مورد تجربه کاربر مشخص شده است).

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

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

طراحی برای شرکت ها، Sketchin: "همیشه از تغییر شروع کنید..."