Your browser's cookie functionality is turned off. Please turn it on.
هشت صفحه ی هدایت کننده ی برتر در طراحی وب سایت بیـــدسان

طراحی سایت و نرم افزار تحت وب در رشت

هشت صفحه ی هدایت کننده ی برتر در طراحی وب سایت
نویسنده : تاریخ انتشار : 2 اسفند 1393

 

هشت صفحه ی هدایت کننده  ی برتر در طراحی وب سایت

 

 

      یک صفحه ی هدایت کننده ( landing page ) که به خوبی طراحی شده باشد می تواند بین کاربری که جذب محصول می شود و یا علاقه اش به آن را از دست می دهد تفاوت فراوانی ایجاد کند. 

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

اولین و مهمترین امر در این مسئله پیدا کردن یک USP  واضح برای محصول یا سرویس مورد درخواست است و سپس استفاده از طراحی صفحه ی هدایت کننده برای جلب همه ی توجهات به سمت هدف اصلی (Call To Action)می باشد. این هدف ممکن است هدایت مشتری به ثبت نام در وب سایت و یا انجام یک خرید از سایت باشد . این امر از طرق مختلف امکان پذیر است مانند استفاده از فضای سفید ، کنتراست رنگ ها و یا اشاره و توضیحات بیشتر با استفاده از نشانه ها .

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

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

 

• Bear CSS

شما نمی توانید CTA  وب سایت Bear CSS   را نادیده بگیرید . این وب سایت ابزاری است برای طراحان وب تا بتوانند CSS  را بسیار سریع تر و آسان تر بر پایه ی  HTML   موجود خود بسازند. این طرح ساده تمامی قوانین کلیدی طراحی صفحه ی هدایت کننده را شامل می شود . و به شما کمک می کند که به روشی بسیار ساده بتوانید یک شیوه ی پایه گذاری شده و مستحکم ، بدون دخالت دادن اطلاعات اضافی ، بر مبنای داشته هایتان بسازید . 

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

 

• Squarespace

      این وب سایت معرف بسیاری از صفحات هدایت کننده ای است که از ساید-اسکرولینگ استفاده می کنند و البته محبوبیت فراوانی در میان ایده پردازان دارند .  Squarespaceقالب هایوب سایت ها را بر اساس مشترکات آن ها  و با کیفیت بالا تهیه می کند .  با اذعان به این که کاربران به نکات متفاوتی توجه نشان می دهند ، این سایت ، صفحات هدایت کننده ی  فراوانی را که با استفاده از  side-scrolling تحت عناوین مختلف از جمله " فضای خود را بسازید " ، " برند خود را بسازید" ، "فروشگاه خود را بسازید" ، "داستان خود را بسازید" را معرفی می کند. 

همه ی آن ها شامل یک تصویر / نشان از نماد مورد نظر به صورت تمام صفحه ، یک Header  بزرگ در وسط و دکمه ی هدف (Call To Action) که در قسمت پایینی آن قرار گرفته است ، می شوند . در هر صفحه ی هدایت کننده نیز یک ویدئو جهت معرفی به مشتری قرار دارد . ولی همه ی این پنج امکان در نهایت به یک هدف ختم می شوند . یکی از قاب ها را انتخاب کنید و به صورت رایگان امتحان نمایید. 

 

• GiftRocket

یکی دیگر از مثال ها برای متوجه شدن اینکه چگونه می توان از فرمول ساده ی Header به همراه نماد ها و همینطور مشخص کردن هدف اصلی، استفاده کرد وب سایت GiftRockrt است که دارای طراحی زیبایی در صفحه ی هدایت کننده اش می باشد و به خوبی در آن ویژگی های "نماد" به تصویر کشیده شده است. به این ترتیب که شکلی اصلی توسط نماد هایی از محصولات مختلف آن ها و سرویس های قابل ارائه احاطه شده  است. اما در نهایت هدف اصلی آن دکمه ی برجسته ی send the card است که به صورت تکی و با یک رنگ طلایی چشم نواز در یک پس زمینه ی بژ کمرنگ قرار دارد و تمامی توجه مخاطب را به سمت خود جلب می کند.  تمام این نماد ها و نشانه ها برای قانع کردن کاربر به فشار دکمه ی خرید است. در عین حال شما این امکان را دارید که اگر قانع نشدید به پایین صفحه بروید و اطلاعات بیشتری دریافت کنید.

• Hipstamatic

در این اپلیکیشن همه چیز درباره ی به نمایش گذاشتن ویژگی های جالب از جمله ، ظاهر  ، حس برگرفته شده از  این اپلیکیشن می باشد که در حد امکان با مد روز درگیر است تا بتواند کاربران بیشتری را به سمت خود جلب کند.

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

در نهایت ، وقتی شما کاملا فریفته ی محصول شدید ؛ آخرین مرحله از Call To Action فرا می رسد . در پایین آیکن بزرگ اپلیکیشن با این پیغام  قرار دارد: " دکمه ی زرد رنگ را فشار دهید و به سادگی دنیا را به زندگی خود بیاورید "

• Square

بهترین راه برای ترغیب کاربران به بخشی از جزئیات مورد نظرشان ، این است که در عوض خریدی که انجام می دهند یک هدیه ی رایگان به آن ها پیشنهاد دهید. در رابطه با این وب سایت ، کارت خوانِ این شرکت است که این امکان را برای مشتری فراهم می آورد که روند پرداخت های خود را از طریق تلفن همراه خود انجام دهد که مقدار بسیار کمتری از اطلاعات و زمان شخص را در این روند درگیر خواهد کرد.  (وارد کردن  ایمیل و گذرواژه مانع بسیار کوچکی برای وارد شدن است.

همانند Squarespace ، این وب سایت نیز دارای سه صفحه ی ورود است که به زیبایی طراحی شده اند و در راستای یکدیگر حرکت می کنند. آن دو صفحه ی ورود دیگر ، به ترتیب ، کاربر را به سمت ثبت نامِ سرویس این شرکت سوق می دهند. 

عکس های مناسبِ برجسته و CTA های بسیار مناسب که جای هیچ شکی را به جا نمی گذارد که کدام دکمه را فشار دهید.

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

• Apple

اصلا باعث تعجب نیست که سلطان های مسلم طراحی صنعتی در کنار یکدیگر جمع شوند و چنین وب سایتی ، به واقع آراسته را طراحی کنند. سادگی غیر قابل انکار وب سایت اپل باعث شد در سال 2010 "مداد سیاه" مسابقات D&AD را ازان خود کند.

با در نظر گرفتن محصولات  روز ، صفحه ی اصلی تقسیم بندی شده به محدوده ی وسیع محصولات ؟؟؟؟؟

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

این یک واقعیت است که این وب سایت بهترین کلاس برای یادگیری طراحی یک صفحه ی فرود است.

• Pinterest

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

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

• Rdio

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

اگر همه ی این ها برای تحت تاثیرقرار دادن شما کافی نیست ، با اسکرول کردن به پایین شما می توانید جزییات بیشتری پیدا کنید. با توصیف کلید قابلیت ها و USP ها ، پلت فرم های آماده ، آهنگ های انتخاب شده و .... در میان یک نوار افقیِ بزرگ و با رنگی تخت. 

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

 

 

منبع:www.creativebloq.com     

ترجمه شده در دپارتمان طراحی وب سایت بیدسان 


نظری برای این مطلب وجود ندارد





facebook
youtube
vimeo
linkedin
Rss