نحوه طراحی صفحه محصول: راهنمای نهایی
نحوه طراحی صفحه محصول: راهنمای نهایی
صفحه محصول بخشی از یک وب سایت است که به فروش یک محصول یا خدمات خاص اختصاص داده شده است. برخلاف سایر صفحات وب مانند صفحات اصلی (که عمدتاً اطلاعاتی هستند) یک صفحه محصول برای اطلاع رسانی و متقاعد کردن ساخته می شود – به این معنی که در حالت ایده آل منجر به کلیک مشتری روی دکمه “افزودن به سبد خرید” می شود. این همان چیزی است که طراحی صفحه محصول را به یک چالش تبدیل می کند، در نظر گرفتن یک طراحی زیبا همیشه به یک طراحی با تبدیل بالا منجر نمی شود.
انتخابهای زیباییشناختی باید حتی استراتژیکتر از حد معمول باشد تا محصول از صفحه نمایش خارج شود و به دست مشتریان برسد. برای آسانتر کردن این کار، این راهنمای نهایی برای طراحی صفحه محصول را گردآوری کردهایم.
نحوه طراحی صفحه محصول
–
- اهداف صفحه محصول
- محتوای یک صفحه محصول
- بهترین شیوه های طراحی صفحه محصول
- از نرم افزار مناسب طراحی صفحه محصول استفاده کنید
- از رویکرد طرحبندی مبتنی بر الگو استفاده کنید
- طراحی با در نظر گرفتن بقیه سایت
- اطلاعات را به صورت انتخابی اولویت بندی کنید
- با تصاویر داستانی تعریف کنید
- محتوای تولید شده توسط کاربر را دست کم نگیرید
- تست، تجزیه و تحلیل و تکرار
اهداف صفحه محصول
–
در اصطلاح اولیه، یک صفحه محصول ساخته می شود تا منجر به خرید شود. اما برای رسیدن به این هدف کلی، چندین چیز وجود دارد که یک صفحه محصول باید انجام دهد.
باید توضیح دهد که چه چیزی برای فروش است. یک صفحه محصول باید به بازدیدکننده نشان دهد که یک محصول چگونه به نظر می رسد، چگونه کار می کند و چقدر هزینه دارد.
باید اعتماد ایجاد کند. اولین خرید یک جهش است، به خصوص زمانی که محصول آنلاین است، بنابراین صفحه محصول باید شک و تردید بازدید کننده را پیش بینی کرده و برطرف کند.
باید یک تجربه ایجاد کند. یک صفحه محصول از رسانه های جذاب استفاده می کند تا چیزی دیجیتالی را به مشتری واقعی نشان دهد.
باید شهودی باشد. یک صفحه محصول باید تمام اهداف فوق را بدون بمباران اطلاعات کاربر انجام دهد.
اهداف صفحه محصول و اهداف خریدار
اهداف صفحه محصول باید در واقع با اهداف خریدار هماهنگ باشد. مشتری در این صفحه است زیرا در تلاش است تا نیازی را برآورده کند.
با فرض اینکه محصول راه حل است، وظیفه صفحه محصول این است که بازدیدکننده را متقاعد کند که این درست است. اگر محصول نیست، این نیز باید فوراً روشن شود.
البته همه اینها مستلزم درک نیازهای خریدار شماست. ابتدا باید درک کنید که محصول برای چه مخاطبی بازاریابی می شود و همچنین انواع محصولات و صفحات وب که آنها برای تعامل با آنها عادت دارند.
جمعیت شناسی گسترده، نظرسنجی ها، مصاحبه ها و نمایه های روانشناختی، همگی تکنیک های استاندارد برای تحقیقات مخاطبان هدف هستند. سپس طراحان باید دانش خود را از خریدار به اصول روانشناسی در طراحی ترجمه کنند.
محتوای یک صفحه محصول
–
محتوای اصلی یک صفحه محصول حول “تا” یا نقطه ای که صفحه بقیه صفحه را قطع می کند، ساختار یافته است.
از آنجایی که کاربر باید اسکرول کند تا ببیند چه چیزی در زیر صفحه وجود دارد – به عبارت دیگر، آنها باید یک انتخاب فعال برای ادامه مرور داشته باشند – بخش اولیه “بالای تا” جایی است که مهمترین اطلاعات در آن نگهداری می شود. پس بیایید از آنجا شروع کنیم:
سربرگ: این شامل لوگوی برند و گزینه های منوی ناوبری است. این در اکثر صفحات وب نسبتاً استاندارد است، بنابراین نیازی به بزرگ بودن خاصی نیست. بسیاری از برندها حتی روی دسکتاپ نسخه کمینه ناوبری مانند نماد همبرگر را انتخاب می کنند.
توضیحات محصول: این شامل نام محصول، قیمت، ارزش پیشنهادی، و گاهی اوقات یک عکس فوری بررسی (مانند رتبه بندی ستاره) است. اساساً، این محصول را شناسایی می کند و توضیح مختصری در مورد اینکه چرا بازدیدکننده باید آن را بخرد ایجاد می کند.
تصاویر محصول و رسانه: این شامل تصاویر اصلی محصول است که معمولاً در چرخ و فلک برای بازدیدکنندگان از زوایای مختلف چرخیده است. این همچنین شامل گزینههای مشاهده، مانند رنگها یا مدلهای مختلف میشود.
دکمه Call-To-Action (CTA): این دکمه ای است که به صفحه خرید منتهی می شود. در نزدیکی CTA گزینه های خرید مانند مقدار یا اندازه گنجانده شده است.
موارد باقیمانده محتوایی که فهرست خواهیم کرد، لزوماً نباید در پایین صفحه قرار گیرند، اما مانند موارد فوق، فوراً ضروری نیستند.
اطلاعات پشتیبان: این اطلاعات شامل اطلاعات دقیق تری درباره نحوه کارکرد محصول، مانند وزن و ابعاد، سؤالات متداول و حتی جزئیات بخش های خاص یک محصول می شود.
تأیید همتایان: این شامل توصیفات، نظرات، و فهرستهای برندها یا افرادی است که در گذشته از محصول استفاده کردهاند.
گرافیکهای پشتیبانی: اینها تصاویر غیر ضروری هستند که به پیمایش کمک میکنند، مانند تصاویر/انیمیشنهایی که به صفحه کمک میکنند تعاملیتر و زندهتر به نظر برسد. آنها معمولاً به برندسازی عمومی سایت مرتبط هستند.
محصولات پیشنهادی: این لیستی از محصولات دیگری را که بازدیدکننده می تواند در نظر بگیرد نمایش می دهد. اگر بازدیدکننده در نهایت علاقه ای به این محصول نداشته باشد، محصولات پیشنهادی می توانند به او فرصتی بدهند تا به مرور صفحات دیگر محصولات به جای خروج از سایت ادامه دهند.
چگونه انواع مختلف محصولات بر محتوای صفحه محصول تأثیر می گذارند
محتوای صفحه محصول بسته به ماهیت محصول/خدمت می تواند متفاوت باشد. رایج ترین تفاوت بین محصولات فیزیکی و دیجیتال (یا قابل مشاهده و غیرقابل مشاهده) رخ می دهد.
محصولات فیزیکی یک نقطه ضعف ذاتی در فضای دیجیتال دارند و هدف محتوای صفحه آنها جایگزینی فروشگاه آجر و ملات است. آنها ممکن است این کار را با قرار دادن منابع بیشتر در رسانه ها، مشخصات دقیق محصول یا برجسته کردن سیاست های حمل و نقل/بازگشت انجام دهند.
در عین حال، محصولات فیزیکی مانند شمع که به حواس غیربصری متکی هستند، تمایل به تقلید از محصولات دیجیتال در استراتژی صفحه خود دارند – یعنی تاکید بر توضیحات متقاعد کننده. اما از آنجایی که آنها بر سلیقه شخصی تکیه می کنند، یک روند در این عرصه استفاده از آزمون های داخلی قبل از صفحه محصول بوده است.
اینها از بازدیدکننده سؤالاتی (سرگرم کننده اما استراتژیک) در مورد ترجیحات آنها می پرسند تا این احساس را ایجاد کنند که صفحه محصولی که در نهایت می بینند قبلاً برای آنها تنظیم شده است.
محصولات یا خدمات دیجیتال ممکن است نتوانند تصاویر را نمایش دهند زیرا نمی توان از محصول عکس گرفت. یک سرویس همچنین میتواند اغلب جدید یا ناآشنا باشد، و به زمان بیشتری نیاز دارد تا مشخص شود برند چه کسی است و چه چیزی ارائه میکند. به همین دلیل، قیمت گذاری اغلب برای آخرین بار ذخیره می شود. قیمتی که بدون درک کامل از پیشنهاد ذکر شده است، ممکن است بازدیدکننده را بترساند.
از سوی دیگر، محصولات فیزیکی می توانند در این زمینه ساده تر عمل کنند – یک تی شرت یک تی شرت است، و یا فکر می کنید آنقدر خوب است که بخرید یا نه.
بهترین شیوه های طراحی صفحه محصول
–
اکنون که به اصول اولیه نحوه عملکرد یک صفحه محصول پرداختیم، نکات طراحی را مرور می کنیم و به چند نمونه نگاه می کنیم.
از نرم افزار مناسب طراحی صفحه محصول استفاده کنید
فرآیند طراحی به طور کلی با خلاصه یا فهرستی از ویژگی های لازم آغاز می شود. بیشتر طراحان سپس به طرحهای قلم و کاغذی روی میآورند تا ایدههایی را برای چگونگی تطبیق عناصر با یکدیگر ایجاد کنند. این به عنوان یک قاب سیمی شناخته می شود – یک نمایش ساده و اسکلتی از ساختار صفحه. هنگامی که این موارد را محدود کردید، باید به سمت نرم افزار بروید.
برنامههای نمونهسازی اولیه مانند Sketch و Figma ماکتهای پیچیدهتری ایجاد میکنند و به شما نمایش دقیقتری از ظاهر صفحه میدهند. در همین حال، InvisionApp، نمونه های اولیه تعاملی ایجاد می کند که روند آزمایش را سرعت می بخشد.
مزیت نمونهسازی برنامهها این است که به طراح اجازه میدهد تا در ابتدا تنها بر روی تجربه کاربر تمرکز کند. آنها همچنین تمایل به طراحی کمتر اصلی دارند. در حالی که این اغلب می تواند ترجیح داده شود – هدف یک تجربه خرید یکپارچه است – اگر می خواهید طرح ها، بافت ها یا انیمیشن های خلاقانه تری ایجاد کنید، به نرم افزارهایی مانند Photoshop و After Effects نیاز دارید.
از رویکرد طرح بندی مبتنی بر الگو استفاده کنید
با توجه به اینکه یک سایت تجارت الکترونیکی چندین محصول (اگر نه صدها) خواهد داشت، تنظیم یک صفحه محصول برای هر کالای مجزا امکان پذیر نیست. هدف اکثر طراحان طرحبندی قالب است، که افزودن صفحات محصول جدید را به آسانی کپی و چسباندن محتوا میسازد. یک رویکرد این است که از یک الگو برای همه صفحات محصول استفاده کنید یا از الگوهای کمی متفاوت برای دسته بندی های مختلف محصول استفاده کنید.
طراحی مبتنی بر الگو نیاز به برنامه ریزی دارد: بازاریابان و کپی رایترها باید به تعداد ثابتی از تصاویر، لیست ویژگی ها، پرسش و پاسخ، توصیفات و غیره برای هر محصول متعهد شوند. در عین حال، الگوهای صفحه محصول همیشه نباید ۱۰۰٪ یکسان باشند. به عنوان مثال، اگر رنگ بین محصولات متفاوت است، طرح رنگ صفحه محصول را می توان برای مطابقت تغییر داد.
بسیاری از صفحات محصولات این روزها دارای طرحبندی نسبتاً استانداردی هستند، حتی در شرکتهای مختلف. به عنوان مثال، سایت های تجارت الکترونیک تمایل دارند تصاویر را در سمت چپ با توضیحات محصول، گزینه های سفارشی سازی و CTA در سمت راست نمایش دهند. در زیر لیستی از مشخصات و مزایا و به دنبال آن پرسشهای متداول و بررسیها/توصیهها آمده است.
نقطه قوت طرحبندی فراگیر مانند این آشنایی با آن است: بیشتر بازدیدکنندگان به طور مستقیم میدانند اطلاعاتی را که به دنبال آن هستند کجا پیدا کنند. صراحت آن به ویژه برای پلتفرم های خریدار/فروشنده (مانند Ebay) که برند هیچ کنترلی بر تصاویر و کپی محصول نخواهد داشت، ایده آل است.
طراحی با در نظر گرفتن بقیه سایت
البته، صفحات محصول به صورت مجزا طراحی نمی شوند: آنها باید با بقیه وب سایت ادغام شوند. سازگاری مانند این نه تنها برای برندسازی مهم است، بلکه به این دلیل که یک صفحه محصول ناسازگار می تواند به طور ناخودآگاه برای خریدار احتمالی کمتر قابل اعتماد به نظر برسد.
محدود کردن صفحات محصول به برند موجود نیز می تواند چالشی برای طراحان باشد. فرض کنید یک تیم برندسازی به دلایلی نامربوط تصمیم گرفته است که از فیلترهای سیاه و سفید برای همه تصاویر استفاده کند حالا اگر صفحه محصول بر رنگهای یک مورد تأکید کند، خارج از برند خواهد بود. به همین دلیل است که مشاغل تجارت الکترونیکی که خرید آنلاین را در اولویت قرار می دهند باید فرآیند طراحی وب را با طراحی صفحه محصول شروع کنند.
در عین حال، اجازه دادن به شخصیت برند برای درخشش در صفحه محصول میتواند به آزادیهای خلاقانه نیز منجر شود – طراحی «هودی» که در اینجا تصویر میشود، حس روشنی از نگرش برند را نشان میدهد. اما اگر به بهینهسازی صفحه محصول کمک میکند، هرگز برای در نظر گرفتن طراحی مجدد کامل سایت دیر نیست.
به طور مشابه، صفحه پرداخت اغلب یک نسخه بسیار ساده شده از صفحه محصول است که تصویر کلیدی محصول را به صورت مینیاتوری، قیمت و مقدار را با گزینه هایی برای ایجاد تغییرات نمایش می دهد.
با توجه به اینکه تقریباً ۷۰ درصد سبدهای خرید رها شده اند، زمان پرداخت فرصتی ایده آل برای نمایش مزایای ذکر شده در صفحه محصول مانند زمان ارسال و هزینه های پایین است. پوشاندن صفحه پرداخت در بالای صفحه محصول نیز به جای خروج احتمالی وبسایت، کلیک روی آن را برای بازگشت آسانتر میکند.
اطلاعات را به صورت انتخابی اولویت بندی کنید
صفحات محصول باید بین اطلاع رسانی به خریدار بالقوه بدون غلبه بر اطلاعات، تعادل برقرار کنند. این بدان معناست که طراح باید در مورد آنچه که کاربر باید ببیند و چه زمانی باید تصمیم بگیرد.
بخشی از این مربوط به محتوایی است که در رابطه با فولد قرار می گیرد. اما تکنیک های خاص طراحی (مانند اندازه، رنگ و سبک فونت) که اولویت را ایجاد می کنند در اصول سلسله مراتب بصری خلاصه می شوند.
اینکه چه اطلاعاتی در اولویت قرار می گیرند می تواند به آنچه می فروشید بستگی داشته باشد. برای محصولات زیبایی مانند پوشاک، مبلمان، آثار هنری و غیره، تصویر محصول نقطه اصلی فروش خواهد بود. برای خدمات یا محصولاتی که فاقد عنصر بصری هستند، توضیحات توضیح دهنده محصول اولویت دارد.
همیشه میتوانید روی CTA حساب کنید که در هر زمینهای اولویت بالایی دارد، اما این بدان معنا نیست که باید با رنگهای بلند یا دکمههای بزرگ زیاده روی کنید. یکی از تکنیک های اصلی برای طراحی CTA ایجاد کنتراست در برابر سایر عناصر صفحه است.
در نهایت، ردیابی چشم از طریق ابزاری مانند Crazy Egg میتواند به شما کمک کند تا به طور علمیتر تشخیص دهید که چه بخشهایی از صفحه توجه کاربر را به خود جلب میکند (به ویژه زمانی که توجه آنها به جایی میرود که شما نمیخواهید).
یک تکنیک مهم برای اولویت بندی اطلاعات، فشرده سازی یا جمع کردن محتوای ثانویه است. این امر به ویژه در بخش سؤالات متداول رایج است، جایی که لیستی از سؤالات نمایش داده می شود و کاربر باید یک دکمه (اغلب نماد مثبت یا مثلث) را فشار دهد تا پاسخ را ببیند.
به طور مشابه، از چرخ فلک ها می توان برای نمایش نمونه انتخابی از محتوا (مانند تصاویر یا نظرات مشتریان) در یک بخش باریک و افقی استفاده کرد که به کاربر اجازه می دهد تا برای اطلاعات بیشتر انگشت خود را بکشد.
این رویکردها نه تنها سایت را از احساس به هم ریختگی بیش از حد جلوگیری میکنند، بلکه باعث تعامل میشوند – بازدیدکننده را درگیر نگه میدارند، برخلاف خواندن غیرفعال.
داستانی با تصاویر بگویید
تصاویر به ناچار چشم نوازترین بخش طراحی صفحه محصول هستند به این دلیل ساده که اسکن آنها سریعتر از متن است. بر اساس تحقیقات Salsify، احتمالاً جای تعجب نیست که این روزها خریداران آنلاین انتظار دارند به طور متوسط ۶ تصویر و ۳ ویدیو را در صفحات محصول ببینند.
در عین حال، تصاویر در صفحات محصول باید بیش از حد جلب توجه کند: آنها باید به یک محصول دیجیتال حس واقعی پیدا کنند. این بدان معنی است که تصاویر باید تجربه ای از محصول ایجاد کنند و داستانی را بدون کلام بیان کنند.
نحوه انجام این کار تصاویر می تواند به محصول بستگی داشته باشد. برای محصولات فیزیکی، ابعاد اغلب مهم هستند، و این شامل بیش از نمایش اندازهها است. برای مثال، با مبلمان، تصویری که محصول را در یک اتاق کاملاً مبله نشان میدهد، نه تنها ایدههای تزئینی را به مشتری میدهد، بلکه میتواند آن را با اشیاء مجاور برای درک بهتر مقیاس مقایسه کند.
برندهای پوشاک معمولاً از مدلهایی برای به نمایش گذاشتن تناسب استفاده میکنند، اما میتوانند برای نشان دادن مدلها در تنظیمات خاص تلاش بیشتری کنند و به آیندهای بالقوه که میتواند همراه با خرید باشد اشاره میکنند. در شرایطی که مواد تشکیل دهنده (یا قطعات مکانیکی) نقطه اصلی فروش هستند، میتوان آنها را به روشهای هنرمندانهای به نمایش گذاشت.
برای محصولات یا خدمات بدون جزء بصری، طراحان باید خلاقیت بیشتری داشته باشند و از تصاویری استفاده کنند که تجربه استفاده از محصول را تداعی می کند.
علاوه بر این، استفاده از نمادها یا تصاویر ساده برای همراهی بخش نحوه کار می تواند به راحتی مراحل فرآیند را برای یادگیرندگان بصری خلاصه کند. برای این رویکرد، از طرحهای اینفوگرافیک الهام بگیرید تا درباره نحوه فیلتر کردن دادههای پیچیده از طریق تصاویر ایده بگیرید.
محتوای تولید شده توسط کاربر را دست کم نگیرید
اگرچه این می تواند اولین غریزه شما برای مدیریت هر عنصر در صفحه باشد، اما ایجاد فضایی برای محتوای تولید شده توسط کاربر ارزش هرج و مرجی را دارد که ممکن است ایجاد کند. به طور معمول، این به این معنی است که به کاربران اجازه میدهد نظرات، سؤالات و عکسهای عمومی خود را از محصول ارسال کنند.
این می تواند مانند کابوس یک طراح به نظر برسد: تصاویر تقریباً به طور قطع کیفیت پایینی خواهند داشت و بررسی گاه به گاه آن ایجاد عصبانیت می کند.
از سوی دیگر، کاربران بسیار بیشتر از اینکه به تصاویر و توصیفاتی که یک برند ارائه می دهد اعتماد کنند، به سایر کاربران اعتماد دارند. چنین اعتمادی میتواند باعث ایجاد یا شکست خرید شود. به همین دلیل است که محتوای تولید شده توسط کاربر معمولاً برای پایین صفحه ذخیره می شود، زمانی که بازدیدکننده احتمالاً تمام اطلاعات رسمی را بررسی کرده و در حال بررسی تصمیم نهایی خود است.
وقتی صحبت از آن به میان میآید، میانگین بررسیهای مثبت در ذهن اکثر مصرفکنندگان بیشتر از نظرات پرت منفی است. علاوه بر این، این فضاها می تواند فرصتی برای برندها باشد تا به سوالات و نظرات منفی پاسخ دهند و مراقبت شخصی و خدمات مشتری خود را به نمایش بگذارند.
در مقابل، غفلت از گنجاندن محتوایی مانند این میتواند به عنوان عدم اعتماد به نفس یا اینکه فروشنده چیزی برای پنهان کردن دارد تلقی میشود. برای انجام فروش، اصالت می تواند مهمتر از طراحی صفحه محصول با ظاهری عالی باشد.
تست، تجزیه و تحلیل و تکرار کنید
ما میتوانیم در مورد داشتن یک طراحی عالی به شما مشاوره دهیم، اما نمیتوانیم به شما بگوییم که آیا صفحه محصول نهایی شما موفقیتآمیز خواهد بود یا خیر. اما ما می دانیم که چه کسی می تواند: مخاطبان شما. به عبارت دیگر، موفقیت صفحه محصول شما به این بستگی دارد که آیا ابزارهای تحلیلی مانند Glew یا Google Analytics Enhanced Ecommerce نشان می دهد که مردم در حال خرید هستند یا خیر.
برخی از معیارهای کلیدی که باید به آنها توجه کرد ترافیک و منابع آنها، داده های جلسه و البته نرخ تبدیل است. بخش دشوار این فرآیند ریشهیابی هر مشکلی است، زیرا همیشه طراحی مقصر نیست.
نرخ پرش بالا یا عدم تعامل (از جمله اسکرول) ممکن است نشان دهنده این باشد که صفحه در یک نگاه جالب نیست.
در همین حال، نرخ بالای رها کردن سبد خرید میتواند به این معنی باشد که فرآیند پرداخت بسیار دشوار است (یا هزینههای غیرمنتظرهای وجود دارد). هنگامی که بازدیدکنندگان پس از یک جلسه طولانی به هیچ وجه به مرحله سبد خرید نمی روند، این ممکن است به کپی غیرقابل اعتماد اشاره کند. و اگر صفحه ای ترافیک کم دارد، ممکن است بخواهید استراتژی سئوی خود را دوباره مرور کنید.
در نهایت، باید به تعداد و محتوای نظرات منفی (هم در سایت شما و هم در مجموع بررسیها مانند TrustPilot) توجه کنید، زیرا این میتواند نشان دهنده مشکل در تحویل یا خود محصول باشد.
با فرض اینکه تصمیم میگیرید که طرح منشا مشکل است، باید شجاعت ایجاد تغییرات را داشته باشید – حتی اگر طرحی باشد که تلاش زیادی کرده و برای شما عالی به نظر میرسد. تست A/B یک راه عالی برای آزمایش سریع نسخه های جایگزین یک طرح و تصمیم گیری بر اساس داده هایی است که منجر به عملکرد بالاتر می شود.
یک طراحی صفحه محصول عالی به یک طراح عالی نیاز دارد
–
طراحی صفحه محصول بخشی از علم، سبک و تمام تجارت است. در پایان روز، یک صفحه محصول عالی طراحی شده است تا محصول را از صفحه کامپیوتر خارج کند و به واقعیت روزمره مشتری برساند. امیدواریم این راهنما جایی برای شروع در مورد چگونگی انجام این کار به شما داده باشد. اما هنگامی که برای صفحه محصولی که معامله را بسته است آماده می کنید، مطمئن شوید که با یک طراح با استعداد کار می کنید.