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 پیدا شده است

حتما بخون  نکات مهم در طراحی سایت فروشگاهی:100% کاربردی

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

پترن Z

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

حتما بخون  بازاریابی محتوا چیست ؟ 5 دلیل پولسازی Content marketing

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

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

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

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

خب طبق اطلاعاتی که از این 2 پترن متوجه شدیم بهتره این موارد رو رعایت کنیم

1)مقدمه ممنوع !

بهتره که در بخش ابتدایی بهترین اطلاعات مورد نیاز مشتری رو در اختیارش بذاریم و سریع بریم سراغ اصل مطلب

چراکه فقط 20 الی 25 درصد کلمات خوانده میشود و بعد در صورتی که احساس نیاز کند میماند و در غیر این صورت صفحه را ترک میکند

2)لینک ها و عناوین در متن (پترن F) در سمت راست قرار دهید

همانطور که در ویدئو آزمایش وبسایت خبری عربی دیدن پترن F در زبان های راست چین بصورت برعکس هست

پس سعی کنید لینک های متنی مهم را در سمت راست قرار دهید

3)سایدبار سمت چپ قرار بگیرد(محصولات و پیشنهاد های ویژه)

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

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

نکته: قبلا باور بر این بود که کلا بصورت F برعکس هست در سایت های ایرانی ولی طبق هیت مپ هایی که یکی از اساتید بنده گرفته

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

همچنین در تحقیقات انستیتو انگلستان به این نتیجه رسیدند که الگوی حرکت های چشمی (الگوی F و Z) در همه ی آدم ها یکسان هست

حتی زبان چینی که از بالا به پایین هست ولی در زمان اسکن کلی طبق الگو ها هست

4)اگر برند سازی برای شما اهمیت دارد 

طبق پترن Z لوگو را در بالا سمت چپ قرار دهید

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

ولی بعضی ها در این بخش هم  CTA قرار میدهند

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

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

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

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

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

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

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

      پاسخ

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

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

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

عضویت ویژه

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

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

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

آخرین آموزش ها

فهرست