1. آموزش دیجیتال مارکتینگ
  2. دیجیتال مارکتینگ
  3. پترن های FوZ : موفقیت با 2 الگو در تولید محتوا و صفحه فرود

پترن های FوZ : موفقیت با 2 الگو در تولید محتوا و صفحه فرود

پترن F و Z

پترن F و Z و استفاده از آنها

با استفاده از این ۲ الگو خوانایی محتوای متنی و نرخ تبدیل صفحات خود را افزایش دهید

این الگو ها بر اساس تحقیقات متعددی تعیین شده اند و الگوی حرکت چشم های انسان هست

پترن های F و Z

پترن های F و Z به ما کمک میکنند تا بتوانیم محتوا هایی تولید کنیم که هم نکات مهمی که مد نظر دارین در معرض دید بازدید کننده قرار دهیم.

هم نرخ تبدیل را در صفحه های فرود (لندینگ پیج ) افزایش پیدا کند

سوالی که باید از خود بپرسیم !

چشم چطور محتوا رو بررسی میکند و در نهایت در کجا متمرکز میشود ؟!

خب جالبه بدونین که نحوه دریابی چشم در صفحه ی وب از سال 1980 مورد بررسی قرار گرفت

ولی از اولیل سال 1800 در مورد چگونگی حرکت چشم در یک صفجه ، آزمایش ها و تحقیق هایی صورت گرفته ( بر روی کاغذ )

Louis Emile Javol به عنوان اولین کسانی بود که در این حوزه ، تحقیقاتی رو انجام داده .

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

و اینکه چشم چطور حرکت میکند ؟!

باید بدونید که چشم تقریبا بصورت رفت و برگشتی حرکت میکند

و بعد از این حرکت رفت و برگشتی بر روی یک بخش متمرکز میشود که به این اتفاق Fixation (فیکسیشن) گفته میشود

شما روی این بخش محتوا متمرکز شدید و Fixation انجام شد

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

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

خودتون بهتر میدونین که اولین کاری میکنین عناوین یک محتوا رو میخونید (اندازه بیشتر ، طول کمتر )

پترن F (الگوی خواندن در وب)

پترن F

این الگو توسط گروه Nielsen Norman پیدا شده است

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

همانطور که اطلاع دارید خوانندگان خیلی سریع تصمیم میگیرین که ادامه دهند یا نه .

و طبق آمار 3 الی 5 ثانیه افراد تصمیم به ماندن و یا ترک کردن میگیرند

جالبه بدونین طبق Heat Map (نقشه گرمایی) گرفته شده خواننده ها 80 درصد وقت خودشون رو روی بخش های ابتدایی محتوا میذارند

و بقیه ی محتوا با اسکن شدن مورد قضاوت قرار میگیرد (اگر از عناوین و تصاویر مرتبط استفاده نکرده باشین برای چشم خسته کننده تلقی میشود)

تقریبا بازدیدکننده ها 70 درصد وقت خودشون رو صرف نگاه کردن به نیمه چپ صفحه میکنند

پترن F چگونه کار میکند ؟!

1)کاربران ابتدا با یک حرکت افقی معمولا قسمت بالایی محتوا را میخوانند (نوار بالایی F را تشکیل میدهد )

2)بعد کمی به پایین حرکت میکنند و دوباره به صورت افقی (کمی کوتاه تر از حرکت اولی ) حرکت میکنند

3)و در نهایت با حرکت عمودی محتوا را اسکن میکنند که بخش انتهایی F را تشکیل میدهند .

نقشه گرمایی هایی که نشان دهنده پترن F هستند(توسط گروهNielsen Norman)  :

و مثال هایی دیگر از نقشه گرمایی پترن F:

شما طبق این الگو آنچه را که اهمیت بالایی دارد (یک محصول مرتبط و . . .)  بهتر است در بخش بالایی و سمت چپ قرار بدهین .

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

ولی در محتواهایی که برای جذب ترافیک ازشون استفاده میکنم این مسئله رو رعایت میکنم.

چرا باید از پترن F استفاده کنیم ؟!

این الگو به ما کمک میکند که یک طراحی با سلسله مراتب بصری خوب طراحی کنیم که بازدید کننده بتواند به راحتی اسکن کند

 

یکی از موضوعاتی که باید بدونین این هست که پترن F در زبان های راست چین (زبان فارسی و عربی) زمان خواندن متن و محتوا بصورت F برعکس هست و در زمان اسکن کردن صفحات وب (مثل مثالی که در آخر پترن F زده شده) بصورت F عادی هست (طبق هیت مپ های گرفته شده در سایت های ایرانی)

یکی از تحقیقاتی که گروه Nielsen Norman انجام داده اند بر روی سایت خبری عربی بوده که دقیقا از این الگو پیروی کرده است

این ویدئو رو برای شما آورده ام

 

 

پترن F به ویژه برای صفحه پست های وبلاگ و صفحه نتایج جستجو مورد استفاده قرار میگیرد .

ولی در صفحات دیگر وب مثل صفحه اول هم استفاده میشود که من پیشنهاد میکنم از پترن Z استفاده کنید که در ادامه کامل توضیح داده ام

همچنین باید بگم که به این معنا نیست که حتما به صورت F شکل دنبال میکنند

شاید به صورت 3 خط افقی تشکیل شود که باز هم الگوی F به وضوح دیده میشود مثل این تصویر

پترن F

چه زمانی باید از پترن F استفاده کنیم ؟!

الگوی F طرح پیشنهادی برای وبسایت های خبری و وبلاگ ها میباشد

اگر محتوای متنی بسیار زیاد هست ، کاربران با این پترن راحت تر هستند

پترن Z (مناسب برای صفحه فرود یا صفحات وب با اطلاعات کم)

پترن Z

صفحاتی که اطلاعات کمتری در خودشون دارند ،چشم بصورت Z وار صفحه را اسکن میکند

که این اطلاعات توسط بررسی چشم و I tracker ها بدست آمده است

الگوی Z شباهت بسیار زیادی به الگوی F دارد

اما طبق گفته ی Mr. Cao :

تمرکز رو سادگی در الگوی Z آن را برای صفحات فرود بسیار مناسب میکند

دقیقا جایی که میخواهید تمرکز ویژه ای برای جلب توجه داشته باشین و بازدید کننده به اقدام مد نظر خودتون دعوت کنید

شما باید دکمه CTA (دعوت به اقدام) را در انتهای پترن Z قرار بدین تا مطمئن شین مخاطب شما آنرا میبیند

تا نرخ تبدیل شما افزایش پیدا کند

پترن Z چگونه کار میکند ؟

مسیر چشم انسان به صورت چپ راست و از بالا به پایین

1)ابتدا از بالا سمت چپ به بالا سمت راست حرکت میکنند (خط افقی)

2)بعد به پایین سمت چپ صفحه حرکت میکنند (خط مورب)

3)سپس به پایین سمت راست حرکت میکند (خط افقی )

هنگامی که چشم مخاطب در این الگو حرکت کند شکل خیالی Z درست میشود

پترن Z

چند نمونه ی موفق از پترن Z

پترن Z در فیسبوک

پترن Z در فیسبوک

نمونه دوم

مثالی از پترن Z

 

نکته ای که بسیار اهمیت دارد این هست که سایت هایی که برندینگ براشون مهم هست در این پترن در ابتدای پترن Z قرار میدند

دیجیکالا در طراحی قبل به این سبک بود

ولی بعضی از افراد در بخش 1 هم CTA قرار میدهد.

الگوی زیگ زاگ (Zig Zag)

ما میتوانیم از الگوهای Z کوچک ، کوچک استفاده کنیم بجای اینکه از یک حرکت Z بزرگ استفاده کنیم

دقیقا این عملی هست که Dropbox با هدایت کاربران از طریق چندین ویژگی محصول

با الگوی تکراری Z و یک دکمه Call to action به ثبت نام رایگان در سایت دعوت کرده اند

که در این طرح با دکمه (بیشتر بدانید ) افراد را به صفحات مربوط اتقال میدهد

پترن Z در Dropbox

نمونه دوم

پترن Z در طراحی سایت

 

راهکار های عملی برای بازاریابان محتوا و ux کارها

برای دسترسی به محتوای این صفحه باید عضو ویژه باشید

با تهیه اشتراک به تمام آموزش های VIP دسترسی دارید.

 

برای دسترسی به محتوای این صفحه باید عضو ویژه باشید

با تهیه اشتراک به تمام آموزش های VIP دسترسی دارید.

 

 

نوشتهٔ پیشین
8 اصل طراحی صفحه اول وبسایت در دیجیتال مارکتینگ
نوشتهٔ بعدی
دیجیتال مارکتر کیست ؟و وظایف دیجیتال مارکتر 360 درجه

2 دیدگاه. ارسال دیدگاه جدید

  • سینا جهان گرد
    آوریل 20, 2020 6:15 ب.ظ

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

    پاسخ
    • مرتضی عظیمی
      آوریل 21, 2020 1:52 ب.ظ

      سلام سیناجان
      خیلی خوشحالم که مفید بوده و ممنونم ازت بخاطر حس خوبی که فرستادی ❤️
      حتما قوی تر و جدی تر پیش میریم

      پاسخ

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

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

این فیلد را پر کنید
این فیلد را پر کنید
لطفاً یک نشانی ایمیل معتبر بنویسید.

عضویت ویژه

با تهیه عضویت ویژه در هر شاخه ای از سئو که نیاز دارید میتونید به ویدئوهای کامل اون دسته بندی دسترسی داشته باشید.

با اضافه شدن آپدیت هم به همه ی مطالب دسترسی خواهید داشت.

برای خرید اینجا کلیک کنید

فهرست