طراحی صفحه فرود: وجه اشتراک بهترین صفحات تبدیلکننده
بهترین صفحات فرود، تصمیمات ساختاری یکسانی دارند. اینکه چه هستند، چرا کار میکنند و چه چیزهایی را باید برای صفحه خودتان در نظر بگیرید.
صفحات فرود با نرخ تبدیل بالا، تصادفی و خلاقانه نیستند. آنها یک الگوی ساختاری مشترک دارند که توجه را جلب میکند، اعتماد ایجاد میکند و اصطکاک را به ترتیب خاصی از بین میبرد. برندهایی که این را درک میکنند، هر شش ماه یکبار طراحی مجدد را متوقف میکنند و در عوض شروع به ترکیب نتایج میکنند.
این مقاله آناتومی، شش صفحه واقعی که ارزش بررسی دارند و قوانینی را که صفحاتی را که تبدیل میشوند از صفحاتی که فقط وجود دارند جدا میکند، تجزیه و تحلیل میکند.
--
آناتومی صفحهای که تبدیل میکند
هر صفحه فرود با نرخ تبدیل بالا، سه مشکل یکسان را به ترتیب یکسان حل میکند: توجه، اعتماد، عمل.
بیشتر طراحان قبل از تأیید عملکرد ساختار، به زیباییشناسی میپردازند. ترتیب مهم است. یک فرهنگ و هنر زیبا که هیچکس به آن نمیرسد زیرا قهرمان داستان آن را از دست داده است، یک دکمه بسیار گران است.
| لایه | چه کاری انجام میدهد | محل قرارگیری | |-------|------------|----------------| | توجه | توضیح میدهد که این چیست و برای چه کسی است | قهرمان (بالای صفحه) |
| اعتماد | اثبات اعتبار ادعا | اثبات اجتماعی، شواهد ویژگی، توصیفات | | اقدام | حذف اصطکاک از مرحله بعدی | قرار دادن CTA، طراحی فرم، میکرو متن |
هر بخش به یکی از این سه وظیفه مربوط میشود. اگر بخشی توجه، اعتماد یا اقدام را جلب نکند، اصطکاک است. آن را حذف کنید یا جمع کنید.
این توالی همچنین غیرقابل مذاکره است. شما نمیتوانید قبل از ایجاد اعتماد، درخواست اقدام کنید و نمیتوانید با کسی که توجه نکرده است، اعتماد ایجاد کنید. بهترین صفحات به این دلیل اجتنابناپذیر به نظر میرسند که به این ترتیب احترام میگذارند.
سلسله مراتب بصری ابزاری است که توالی را قابل مرور میکند. اگر میخواهید مطالعه عمیقتری در مورد چگونگی کنترل ترتیب خواندن توسط سلسله مراتب داشته باشید، مقاله Brainy در مورد سلسله مراتب بصری مکانیکها را پوشش میدهد.
6 صفحه فرود که ارزش مطالعه دارند
این صفحات پول چاپ میکنند و تصمیمات ساختاری پشت آنها اختصاصی نیستند. هر کدام توالی توجه-اعتماد-عمل را به طور متفاوتی حل میکنند و هر کدام چیزی مشخص دارند که ارزش دزدیدن دارد.
Stripe
پخش زنده را در stripe.com ببینید
صفحه Stripe با یک تیتر اعلانی ("زیرساخت مالی برای اینترنت") آغاز میشود که مخاطب را بلافاصله فیلتر میکند. بدون پوشش ریسک، بدون لیست ارزش جدا شده با کاما، بدون "قدرتمند و انعطافپذیر". یک ادعا. یک کار.
در پایین صفحه، Stripe از یک شبکه ویژگی متمرکز بر توسعهدهنده استفاده میکند که به عنوان اثبات عمل میکند، نه توضیح. آنها قطعه کدهای API و نمودارهای زنده را نشان میدهند زیرا خریدار آنها فنی است. اثبات اجتماعی، نهادی است (لوگوهایی از آمازون، گوگل، لیفت) که قبل از خوانده شدن هر ویژگی، برای ایجاد اعتبار سازمانی در اوایل کار قرار داده شدهاند.
چه چیزی باید دزدید: یک تیتر فیلتر در قهرمان همراه با اثبات با نمایش به جای اثبات با ادعا در بخش ویژگیها.
Linear
آن را به صورت زنده در linear.app ببینید
Linear صفحه را تقریباً به هیچ تبدیل میکند و اجازه میدهد محصول وزن را به دوش بکشد. قهرمان دارای یک تیتر دو خطی، یک زیرعنوان، یک فراخوان عمل (CTA) و یک اسکرینشات از محصول است که بر نمای دید غالب است. بدون شلوغی ناوبری. بدون فراخوان عمل ثانویه. بدون چرخ فلک توصیفات حواسپرتکننده.
کیفیت بصری اسکرینشات رابط کاربری، کار ساختاری انجام میدهد. مخاطبان Linear مهندسان آگاه به طراحی هستند که میتوانند کیفیت را از یک نگاه تشخیص دهند. نمایش یک رابط کاربری دقیق و زیبا، اثبات اجتماعی است. صفحه به محصول اعتماد دارد.
چه چیزی را بدزدیم: مقاومت در برابر خزش ویژگیها در قهرمان. Linear ثابت میکند که حذف هر عنصر غیرضروری یک تصمیم تبدیل است، نه یک ترجیح مینیمالیستی.
Notion
پخش زنده را در concept.com ببینید
Notion با مشکل سختتری نسبت به اکثر موارد روبرو است: محصولی که همه چیز را برای همه انجام میدهد، تمایل دارد هیچ ارتباطی با هیچ کس برقرار نکند. راهحل آنها یک تیتر قهرمان انعطافپذیر است که توسط یک دیوار لوگوی عظیم که مستقیماً در زیر تا قرار گرفته است، مهار شده است.
دیوار لوگو بار سنگین را به دوش میکشد. قبل از اینکه بازدیدکننده یک ویژگی واحد را بخواند، لوگوی شرکت خود یا شرکتی را که به آن احترام میگذارد، دیده است. اثبات اجتماعی قرار داده شده که در ابتدا شک و تردید را به کنجکاوی تبدیل میکند. Notion سپس از پیمایش ویژگی مبتنی بر تب برای خدمت به مخاطبان متعدد استفاده میکند بدون اینکه صفحه مانند یک بروشور به نظر برسد.
چه چیزی را بدزدیم: دیوار لوگو به عنوان دومین چیزی که بازدیدکننده میبیند، نه پنجمین.
Vercel
پخش زنده را در vercel.com ببینید
Vercel از عبارت کلیشهای «استقرار سریعتر» صرفنظر میکند و با یک دموی زنده آغاز میکند. قهرمان، دادههای استقرار واقعی و پیشنمایشهای کد را ادغام میکند، به این معنی که اثبات در خود صفحه تعبیه شده است. برای مخاطبان توسعهدهنده، این به طور تصاعدی قانعکنندهتر از نقل قولهای مشتری است.
استراتژی فراخوان عمل آنها نیز شایان ذکر است. «شروع استقرار» در کنار «دریافت دمو» قرار دارد، اما سلسله مراتب آن صریح است. سلف سرویس اصلی و غالب است. مسیر سازمانی از نظر بصری تابع است. دو مخاطب، یک صفحه، سلسله مراتب تمیز.
چه چیزی باید بدزدید: اثبات کار در قهرمان به جای توضیحات. اگر میتوانید محصول خود را در صفحهای که آن را میفروشد، در حال کار نشان دهید، این کار را انجام دهید.
مرورگر Arc
صفحه Arc بر اساس شخصیت ساخته شده است، که نادر و پرخطر است. قهرمان داستان، مرورگر را با فهرستی از ویژگیها توضیح نمیدهد. این صفحه یک حس را منتقل میکند. عبارت «راهی بهتر برای استفاده از اینترنت» تقریباً مبهم است، اما به این دلیل مؤثر است که طراحی بصری و ویدیوی محصول در زیر آن، بلافاصله نشان میدهد که این نوع محصول متفاوت است.
این صفحه از طریق اعتبار طراحی، نه لوگوها، اعتماد کسب میکند. مخاطبان Arc، کاربران اولیهای هستند که از مرورگرهای حجیم خسته شدهاند. نمایش رابط کاربری که هیچ شباهتی به کروم ندارد، کل بحث است.
چه چیزی را باید بدزدید: اگر محصول شما دیدگاه متمایزی دارد، اجازه دهید طراحی آن را منتقل کند، قبل از اینکه متن سعی در توضیح آن داشته باشد.
Loom
پخش زنده را در loom.com ببینید
قهرمان Loom به طور خودکار یک ویدیوی نمایشی از محصول را در بالای صفحه نمایش میدهد. در حالی که شما در مورد Loom میخوانید، در حال تماشای کار Loom هستید. این بزرگترین نقطه اصطکاک در هر سفر خریدار را از بین میبرد: شکاف بین "به نظر مفید میرسد" و "من واقعاً میتوانم خودم را در حال استفاده از این تصور کنم."
متن صفحه Loom تقریباً در درجه دوم اهمیت قرار دارد. ویدیو نقش ترغیب را ایفا میکند. متن، توجیه منطقی را که بازدیدکنندگان برای متقاعد کردن تیم خود استفاده میکنند، ارائه میدهد. این دقیقاً برای یک ابزار ویدیویی مناسب است. رسانه، پیام است.
چه چیزی را بدزدید: قالب نمایش خود را با ارزش اصلی محصول خود مطابقت دهید. Loom ویدیوی ناهمزمان میفروشد. البته صفحه با ویدیو آغاز میشود.
به یک صفحه فرود نیاز دارید که واقعاً تبدیل شود؟ Brainy صفحات را با ساختار میسازد، نه با امید.
بخش قهرمان همه چیز را تعیین میکند
اگر قهرمان شما در کمتر از 5 ثانیه به "این چیست و چرا باید اهمیت بدهم" پاسخ ندهد، بقیه صفحه بیربط است.
قهرمان یک وظیفه دارد: کاری کند که بازدیدکننده تصمیم بگیرد به خواندن ادامه دهد. ویژگیها، قیمتگذاری، توصیفات فقط توسط افرادی دیده میشوند که قهرمان شما آنها را متقاعد به ماندن کرده است. قهرمان، مسئول تبلیغات، بیلبورد و اولین دست دادن به طور همزمان است.
یک قهرمان کاربردی چهار عنصر دارد. نه سه، نه شش. چهار.
| عنصر | کاری که انجام میدهد | اشتباه رایج | |---------|------------|----------------| | تیتر | گزاره ارزش اصلی را بیان میکند | خیلی هوشمندانه، واضح نیست | | زیرتیتر | مشخص میکند که برای چه کسی است و چه تغییراتی ایجاد میکند | تیتر را با کلمات مختلف تکرار میکند | | فراخوان عمل | یک گام بعدی واضح ارائه میدهد | گزینههای متعدد، برچسبهای مبهم مانند "بیشتر بدانید" | | بصری | محصول یا نتیجه را نشان میدهد | عکس استوک، تصویر بدون هیچ محصول واقعی |
تیتر باید از آزمون "خب که چی؟" سربلند بیرون بیاید. تیتر خود را بخوانید. بپرسید "خب که چی؟" اگر پاسخ بلافاصله واضح نیست، تیتر به جای کار تبدیل، کار کپیرایت انجام میدهد.
زیرتیترها وقتی محصول را به جای نتیجه توصیف میکنند، شکست میخورند. «یک ابزار مدیریت پروژه با هوش مصنوعی» یک توصیف است. «پروژهها را سر وقت و بدون ایستادن ساعت ۹ صبح تحویل دهید» یک نتیجه است. بازدیدکنندگان نتیجهها را میخرند، نه ابزار.
--
اثبات اجتماعی معماری است، نه دکوراسیون
لوگوها، توصیفات و لینکهای مطالعه موردی عناصر ساختاری باربر هستند، نه چیزهایی که بعداً در جایی که مناسب هستند پخش میکنید.
اکثر صفحات با تأیید اجتماعی مانند چاشنی رفتار میکنند. صفحه را تمام کنید، یک بخش تأیید را نزدیک پایین صفحه قرار دهید زیرا آنجا جایی است که «مناسب است». این برعکس است. تأیید اجتماعی باید در هر نقطهای که اعتماد درخواست میشود، ظاهر شود.
| نوع تأیید | جایی که به بهترین شکل تبدیل میشود | چرا |
|---|---|---|
| نوار لوگو | بلافاصله زیر قهرمان | قبل از شروع فروش، اعتبار ایجاد میکند |
یک نظر در پایین بخش قیمتگذاری شما هیچ کاری انجام نمیدهد. همان نظر که در کنار ویژگی خاصی که آن را تأیید میکند قرار میگیرد، کار ساختاری انجام میدهد.
برای ساختن زبان بصری که باعث میشود اثبات اجتماعی به جای اینکه به برند شما متصل باشد، حس بومی بودن به برند بدهد، مقالهای در مورد هویت برند Brainy پایه و اساس را پوشش داده است.
--
یک صفحه، یک اقدام
بهترین صفحات فرود بیرحمانه بر روی یک اقدام تبدیل واحد متمرکز هستند.
هر فراخوان عمل اضافی که اضافه میکنید، تبدیل را افزایش نمیدهد. توجه را تقسیم میکند، فلج تصمیمگیری ایجاد میکند و پیام را رقیق میکند. صفحاتی که به طور مداوم عملکرد بهتری دارند، صفحاتی هستند که تصمیم گرفتهاند بازدیدکننده چه کاری انجام دهد و از آن اجتناب کردهاند.
این به معنای یک دکمه واحد در کل صفحه نیست. به معنای یک هدف تبدیل اصلی است. میتوانید آن فراخوان عمل را چندین بار تکرار کنید (قسمت اصلی، وسط صفحه، پاورقی) و برچسبهای مختلف را آزمایش کنید. کاری که نمیتوانید انجام دهید این است که "شروع دوره آزمایشی رایگان"، "رزرو نسخه آزمایشی"، "تماشای ویدیو"، "مطالعه موردی را بخوانید" و "دانلود راهنما" را در همان صفحه قرار دهید و انتظار داشته باشید که هر یک از آنها کار کنند.
یک استثنای مشروع، مخاطبان چند سطحی است. عبارت «همین حالا مستقر شوید» در کنار «یک نسخه آزمایشی دریافت کنید» در Vercel به این دلیل کار میکند که سلسله مراتب آن صریح است. سلف سرویس در اولویت است. سازمانی در اولویت دوم و از نظر بصری کوچکتر است. اگر دو مخاطب متمایز دارید، میتوانید دو مسیر داشته باشید. یکی باید به وضوح غالب باشد.
--
سوالات متداول
چه چیزی یک طراحی صفحه فرود خوب را میسازد؟
یک طراحی صفحه فرود خوب، توالی توجه-اعتماد-عمل را به ترتیب حل میکند. قهرمان با یک گزاره ارزشی واضح توجه را جلب میکند. اثبات اجتماعی، اعتماد را در سراسر صفحه ایجاد میکند، در نقاط تردید قرار میگیرد نه به عنوان یک فکر بعدی. فراخوان عمل، اصطکاک را از یک اقدام متمرکز واحد حذف میکند. سلسله مراتب بصری، ترتیب خواندن را کنترل میکند، بنابراین بازدیدکنندگان مجبور نیستند برای یافتن موارد مهم تلاش کنند.
یک صفحه فرود باید چند بخش داشته باشد؟
تعداد مناسب، حداقل مورد نیاز برای رساندن یک بازدیدکننده شکاک به یک تبدیل مطمئن است. برای اکثر محصولات، این تعداد پنج تا هفت بخش است: قهرمان، نوار اثبات اجتماعی، ویژگیهای اصلی، اثبات عمیقتر (نظرات یا مطالعات موردی)، مدیریت اعتراضات و فراخوان به اقدام. اضافه کردن بخشهای فراتر از این، با اضافه کردن زمان خواندن بدون افزایش اعتماد، به تبدیل آسیب میرساند.
مهمترین عنصر یک صفحه فرود چیست؟
عنوان قهرمان. هر بخش دیگر فقط توسط بازدیدکنندگانی دیده میشود که تصمیم گرفتهاند قهرمان ارزش ماندن را دارد. اگر عنوان شما ارزش اصلی را منتقل نکند و در کمتر از پنج ثانیه مخاطب مناسب را فیلتر نکند، بقیه صفحه نامرئی است.
--
ساختار را قبل از سبک بسازید
طراحی صفحه فرود قبل از اینکه یک نظم بصری باشد، یک نظم ساختاری است.
برندهایی که صفحاتشان بالاترین نرخ تبدیل را دارد، Stripe، Linear، Vercel، Notion، به این دلیل برنده نشدند که پالتهای رنگی آنها بهتر بود. آنها برنده شدند زیرا تصمیمات ساختاری آنها منطقی بود. آنها پاسخ دادند که این برای چه کسی است، در جایی که شک وجود داشت، مدرک قرار دادند، به یک اقدام واحد متعهد شدند و اجازه دادند طراحی به جای نادیده گرفتن آن، در خدمت آن منطق باشد.
وسوسه این است که ابتدا صفحه را طراحی کنید و استراتژی را مقاوم سازی کنید. این کار صفحات زیبایی تولید میکند که تبدیل نمیشوند. فرآیندی که کار میکند، برعکس عمل میکند: ساختار را قفل کنید، سلسله مراتب را اعتبارسنجی کنید، طراحی را مطابق با آن انجام دهید.
اگر صفحه فرود شما تبدیل نمیشود، به دنبال فونت جدید نباشید. ساختار را بررسی کنید. از آناتومی به بالا بازسازی کنید. سپس آن را سبکبندی کنید.
به یک صفحه فرود نیاز دارید که واقعاً تبدیل شود؟ Brainy صفحات را با ساختار میسازد، نه با امید.
Need a landing page that actually converts? Brainy builds pages with structure, not hope.
Get Started
