طرح Z-Patte چیست و چه موقع از آن استفاده کنید؟

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

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

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

یکی از اصلی ترین راه هایی که طراحان بر کاربران تأثیر می گذارند و توجه به مهمترین عناصر صفحه را جلب می کنند ، طراحی صفحه با استفاده از الگوی Z است.

الگوی z چیست؟

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

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

هنگامی که چشم بینندگان در این الگوی حرکت می کنند ، شکل "z" خیالی را تشکیل می دهد:

توجه به این نکته حائز اهمیت است که طرح های الگوی Z لازم نیست مطابق با یک شکل z سنتی باشد و تعداد زاویه های Z در طول الگوی متفاوت باشد.

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

ایجاد یک صفحه وب با Z-layout به ایجاد سلسله مراتب بصری که افراد احتمالاً از آن پیروی می کنند ، کمک می کند و آن را به یک گزینه مناسب برای طرح های صفحه فرود پس از کلیک تبدیل می کند.

اما چرا به جای الگوی F ، یک صفحه را با الگوی z طراحی کنید؟

در حالی که F-Layout تمایل به مناسب تر برای صفحات متراکم با محتوا دارد ، Z-Layout در درجه اول برای صفحات با حداقل کپی در نظر گرفته شده است. در اصل ، الگوی Z برای صفحاتی مناسب است که سادگی در اولویت قرار دارد و غذای اصلی CTA است.

• خط افقی بالا باید شامل مؤلفه های اصلی مورد نظر شما بینندگان باشد که ابتدا روی آنها تمرکز کنند
• خط مورب باید اطلاعاتی از اطلاعاتی را که در تماس با شما ایجاد می شود ، داشته باشد
• خط افقی پایین باید CTA را در مقطعی در طول الگوی برجسته کند

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

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

به خاطر داشته باشید ، برای صفحات فرود کوتاهتر پس از کلیک ، ما کل صفحه را نشان داده ایم. با این حال ، برای صفحات طولانی تر ، ما فقط در بالای برابر نمایش داده شدیم. برای دیدن برخی از نکاتی که در مورد آنها بحث می کنیم ، ممکن است لازم باشد روی هر صفحه فرود پس از کلیک کلیک کنید. علاوه بر این ، برخی از نمونه های ذکر شده ممکن است A/B صفحه خود را با نسخه متناوب نسبت به نمونه نمایش داده شده در زیر آزمایش کند.

یک صفحه فرود پس از کلیک که الگوی z را نادیده می گیرد

صفحه Landing Togage Light Media در زیر از الگوی z پیروی نمی کند. با این حال ، این یک جریان عمدی با یک صفحه تمیز و سازمان یافته است که چشم بینندگان را ترغیب می کند تا یک مسیر مورد نظر را در وسط صفحه به دکمه CTA دنبال کنند:

آنها برای تست A/B صفحه با تنوع زیر هوشمند هستند. این بار ، آنها از طرح الگوی Z پیروی می کنند:

با دیدن این تنوع ، Z-path به شرح زیر است:

1. تیتر سفید ابتدا توجه خود را در برابر پس زمینه تاریک تر جلب می کند ، حتی اگر آرم شرکت در صفحه بالاتر باشد.
2. از آنجا ، مسیر به سمت تیتر فرم اسکن می شود ، زیرا این درست در کنار عنوان صفحه است و با پس زمینه سفید آن به خوبی تضاد دارد. این اولین زاویه Z-الگوی است.
3. در مرحله بعد ، طراحی الگوی به صورت مورب به سمت چپ صفحه به کپی زرد "کشف فرصت" ادامه می یابد.
4. پس از مسیر ، توجه به سمت راست جلب می شود و روی دکمه نارنجی CTA متمرکز می شود.

به خاطر داشته باشید ، این حرکات چشم ذهنی است و همه کاربران صفحات را به همان روش اسکن نمی کنند. نکته کلیدی که باید به خاطر بسپارید این است که بینندگان خود را در مسیری که می خواهید آنها را دنبال کنند متمرکز کنید و آنها را ترغیب کنید تا به CTA خود تبدیل شوند.

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

صفحات فرود پس از کلیک که از الگوی z پیروی می کنند

زندگی

این صفحه پس از کلیک مادام العمر از الگوی z پیروی می کند اما با CTA نتیجه نمی گیرد:

1. بازدید کننده به احتمال زیاد از تیتر شروع می شود ، زیرا این قلم بزرگتر از بقیه کپی ها است و با پس زمینه تاریک به خوبی تضاد دارد.
2. با اسکن به سمت راست ، بیننده سپس روی چهره مرد تمرکز خواهد کرد که اولین زاویه z است.
3. در مرحله بعد ، نگاه چشم به صورت مورب به دکمه CTA قرمز روشن در نقطه عطف دوم سفر می کند.
4. سرانجام ، Focus به تصویر تلفن هوشمند تبدیل می شود.

دقیقاً مانند طرح های الگوی Z نباید یک "Z" سنتی را تشکیل دهند ، مهم است که تشخیص دهیم که CTA ها در زاویه های الگوی Z لازم نیستند. بهتر است اگر CTA ها در نوبت قرار بگیرند ، زیرا این جایی است که چشمان بینندگان به پایان می رسد.

آتش سوزی

این صفحه پس از کلیک Callfire نمونه دیگری است که یک Z سنتی را تشکیل نمی دهد ، اما این الگوی هنوز مشهود است:

1. بینندگان از عنوان صفحه شروع می کنند زیرا بزرگتر از بقیه نسخه است.
2. از اینجا ، بازدید کنندگان با تمرکز روی دکمه فرم و CTA-اولین زاویه z را اسکن می کنند و به سمت راست عبور می کنند.
3. در مرحله بعد ، بینندگان به سمت چپ به سمت فیلم سفر می کنند-ایجاد زاویه دوم Z.
4. سرانجام ، چشمان بینندگان در سراسر صفحه به نمادنگاری و سه مرحله ادامه خواهد یافت.

اوراکل

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

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

ناوستان

این صفحه Landing Fleetmatics پس از کلیک شامل CTA در چندین زاویه z است:

1. شانس وجود دارد ، تیتر و زیر خط در بالا سمت چپ ابتدا توجه بینندگان را به خود جلب می کند.
2. از آنجا ، بازدید کنندگان برای دیدن فیلم پس زمینه به سمت راست اسکن می شوند.
3. بازدید کنندگان با ایجاد اولین مورب در شکل z ، احتمالاً به سمت چپ به سمت اولین دکمه CTA نارنجی اسکن می شوند.
4. در مرحله بعد ، نگاه چشم کاربر از نشان های مشتری عبور می کند و از طریق کپی بولت شده به دکمه دوم CTA نارنجی تغییر می یابد.
5. سرانجام ، Z-Layout دوباره به سمت چپ به سمت تصویر ادامه می یابد و دوباره به دکمه CTA سوم باز می گردد.

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

صفحه بعدی خود را با طرح Z-Patte طراحی کنید

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

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