نوشته اصول طراحی صفحه محصول در وب سایت های فروشگاهی اولین بار در ممتاز دیزاین. پدیدار شد.
]]>7 قدم برای موفقیت در صفحه محصول:
این که آیا فروشنده ای تازه کار هستید یا می خواهید فروش خود را در فروشگاه موجود افزایش دهید، ما چند نکته مهم برای ایجاد یک صفحه محصول واقعاً کارآمد داریم. ما شما را با عناصر اصلی طراحی که برای صفحه محصول به آن نیاز دارید، همراه با نموه های خیره کننده برای الهام گرفتن شما، و نکات دقیق در مورد چگونگی چیدن این قطعات پازل در صفحه محصول به شما معرفی خواهیم کرد.
قبل از شروع به طراحی صفحات محصول خود، چند اصل وجود دارد که باید از قبل بدانید. موارد اصلی عبارتند از:
دانستن جزئیات هر یک از این زمینه ها نه تنها طراحی صفحات محصول شما را آسان تر می کند ، بلکه تأثیر بسیار زیادی نیز خواهد داشت. برای کسب اطلاعات بیشتر در مورد هر منطقه، و اینکه چگونه می تواند به شما در ایجاد صفحات محصول مؤثر تر کمک کند.
تصاویر محصول در صفحه محصول شما کجا قرار دارد؟
تصاویر محصول باید همیشه بالای فولد (ابتدای صفحه) قرار بگیرند، زیرا معمولاً چیزی است که بیشتر مشتریان می خواهند ابتدا به آن ها کمک کنند تا به تصمیم گیری خرید کمک کنند. در حقیقت، 93٪ از مصرف کنندگان هنگام تصمیم گیری در خرید، تصاویر را ضروری می دانند.
بالای فولد چیست؟ اگر چیزی “Above the fold” است، به این معنی است که برای دیدن آن لازم نیست که یک صفحه وب را به پایین اسکرول کنید. بعد از باز کردن صفحه بلافاصله در قسمت بالای صفحه قابل مشاهده است. اگر چیزی “زیر فولد” است، به این معنی است که باید برای دیدن آن به پایین پیمایش کنید.
اولین چیزی که شما می خواهید هنگام برنامه ریزی صفحه محصول به آن فکر کنید، عکس های محصول است و دلیل خوبی هم دارد. عکس های محصول یکی از مهم ترین ویژگی های هر صفحه محصول است. آن ها را به عنوان پایه طراحی صفحه محصول خود در نظر بگیرید. مشتریان می خواهند بدانند که دقیقاً چه چیزی را می خرند. آن ها نمی توانند محصولات شما را تحویل بگیرند و مانند اینکه در یک فروشگاه واقعی هستند به آن ها نگاه می کنند اما می توانند عکس های محصول شما را مشاهده کنند.
هرچه عکس های محصول شما بهتر باشد، تلاش در ترغیب مشتری به اینكه این محصول برای آن ها مناسب است راحت تر می شود.


قیمت در صفحه محصول شما کجاست؟ بالای فولد
قیمت گذاری باید همیشه به وضوح بالای فولد نشان داده شود، مشتریان خود را مجبور به گشتن نکنید تا دریابید که قیمت محصولات شما چقدر است! هیچ کالایی را نمی خرد بدون اینکه بداند قیمت آن چقدر است، بنابراین بهتر است آن را بالای صفحه قرار دهید. معمولاً باید آن را نزدیک به عنوان محصول یا دکمه “افزودن به سبد” قرار دهید.
مهم نیست که محصولات شما چقدر جذاب هستند، مردم می خواهند قبل از خرید از قیمت آن اطلاع داشته باشند. بنابراین منطقی است که شما قیمت ها را تا حد ممکن در صفحه محصول خود نمایش دهید!
حتی اگر کالای شما بسیار گران است، باز هم باید قیمت را واضح و در دید قرار دهید، مثلاً نزدیک عنوان محصول یا نزدیک دکمه “افزودن به سبد خرید” یک انتخاب هوشمندانه است. دلیل این امر این است که مشتری ها معمولاً به طور خودکار به این مناطق کشیده می شوند و قیمت آن به راحتی قابل تشخیص است.
روش های دیگر برای کمک به برجسته شدن قیمت عبارتند از:
اگر به محض ورود به صفحه محصول، قیمت آن مشخص نیست، باید در مورد طراحی خود تجدید نظر کنید، ابتدا با استفاده از نکات بالا شروع کنید و سپس آن را روی دوستان، خانواده یا همکاران آزمایش کنید تا ببینید چقدر سریع هستند می تواند قیمت را تشخیص دهد

تماس برای عمل در صفحه محصول شما کجا قرار دارد؟ بالای فولد
کال تو اکشن (یا CTA) معمولاً یک دکمه یا لینک است که از کاربران می خواهد، اقدامی انجام دهند. به عنوان مثال می توان از دکمه های “افزودن به سبد خرید”، فرم “ثبت نام در اینجا” و “خرید کلی” به عنوالن کال تو اکشن ها نام برد.
CTA شما باید همیشه بالای فولد باشد، زیرا این یک قسمت اساسی در دریافت تبدیل است. اگر مردم محصول شما را دوست دارند، اما دکمه خرید آن را پیدا نمی کنند، فروش شما ضرر خواهد کرد! دکمه های کال تو اکشن (یا CTA) بخش مهمی از سفر مشتری از مرور تا خرید است. وادار کردن خریداران به کلیک بر روی CTA شما هدف اصلی صفحه محصول شما است، بنابراین ارزش دارد که برای درست کردن آن وقت بگذارید.
بدون CTA، خریداران نمی توانند محصولات مورد علاقه خود را به سبد خود اضافه کنند، به این معنی که شما خرید آن ها را از دست می دهید، که وقتی می خواهید سود کسب کنید، این اصلاً ایده آل نیست! این بدان معنی است که بالا بودن CTA در صفحه بسیار حیاتی است، باید به راحتی قابل مشاهده باشد، کلیک آن آسان و قابل فهم باشد در اینجا نکات مهم ما برای استفاده بیشتر از دعوت به عمل خود آورده شده است:

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

اهرم تأیید اجتماعی در کجای صفحه محصول شما قرار دارد؟
شما همیشه باید درجه ستاره محصول یا همان اهرم تأیید اجتماعی را بالای فولد نشان دهید، زیرا این یک نقطه فروش مهم است که اکثر خریداران می خواهند بلافاصله آن را ببینند. در هر صورت خریداران می خواهند نظرات دیگران را درباره محصول مرور کنند، نظرات کامل مشتری را در پایین صفحه قرار دهید.
اثبات اجتماعی پدیده ای است که در آن افراد به احتمال زیاد کاری را انجام می دهند (یا خرید می کنند)، زیرا دیگران را مشاهده می کنند که همان کار را انجام می دهند. به همین دلیل است که به صف رستوران های شلوغ می پیوندیم و به سمت جمعیت جذب می شویم و به همین دلیل بررسی و رتبه بندی مشتری بسیار مهم است.
آیا می دانید 97٪ از مصرف کنندگان می گویند نقد های آنلاین بر تصمیمات خرید آن ها تأثیر می گذارد؟ به همین دلیل داشتن نوعی اثبات اجتماعی بالاتر از حد ضروری است، به طوری که بلافاصله برای خریداران آنلاین قابل مشاهده است. مشهورترین روش ارائه اثبات اجتماعی نشان دادن درجه ستاره محصول در نزدیکی عنوان محصول است.
از آنجا که این طرح طراحی بسیار رایج است، مشتریان شما انتظار دارند بلافاصله درجه بندی ستاره را ببینند – بنابراین آن ها را وادار نکنید که به دنبال آن بروند! همچنین باید نظرات مشتریان را در پایین صفحه قرار دهید تا خریداران بتوانند به راحتی محبوبیت این محصول را ببینند و چرا دیگران از استفاده از آن لذت می برند. این امر بسیار حیاتی است زیرا مشتریان 12 برابر بیشتر از توضیحات محصول نوشته شده توسط فروشنده اعتماد به نظرات مشتری دارند!
سایر نمونه های اثبات اجتماعی که می توانید در صفحه محصول خود استفاده کنید عبارتند از:

توصیه های محصول در کجای صفحه محصول شما قرار دارد؟
توصیه محصولات مشابه یک روش مفید و مؤثر برای حفظ مشتری در سایت شما، افزایش ارزش هر معامله و ایجاد یک تجربه خرید شخصی تر است. با این حال، توصیه های محصول برای جذب مشتری ضروری نیست و حتی می تواند آن ها را از محصولی که در حال حاضر مشاهده می کنند منحرف کند. به همین دلیل توصیه محصولات مشابه بهتر است در زیر فولد قرار بگیرند.
بنابراین، مشتری شما محصولی را به سبد خود اضافه کرده است، هورا! اما حالا چه؟ آن ها ممکن است به سادگی بررسی کنند یا کمی بی هدف در اطراف سایر محصولات شما کلیک کنند. مشکلی نیست، اما اگر بعد از مشاهده یک محصول راهی بهتر برای نگه داشتن مشتری برای خرید وجود داشته باشد، چه می کنید؟ توصیه های محصول بر اساس آنچه در حال حاضر مشاهده می کند، محصولات مختلفی را پیشنهاد می کند که مشتری ممکن است دوست داشته باشد.
اگر می توانید توصیه های محصولات مشابه دقیق و مفیدی از محصول را ارائه دهید، این یک روش عالی برای اطمینان از خرید دیگر است و مشتری را در محل نگه دارید حتی اگر محصول اول را مشاهده نکرده باشد. شما می توانید از موارد زیر به عنوان توصیه محصول استفاده کنید.
حتی می توانید با وعده توصیه های بهتر و متناسب، افراد بیشتری را به ایجاد حساب برای فروشگاه خود ترغیب کنید، این یک تجربه خرید شخصی تر ایجاد می کند و همچنین می تواند تعامل را افزایش دهد. روش دیگر پیشنهاد محصولات، نمایش سایر محصولات برای فروش با عکس های محصول است. به عنوان مثال، ممکن است یک مدل از چکمه و دامن و همچنین بلوز استفاده کند و مشتریان می توانند “همه را بخرند” یا “مجموعه را کامل کنند” و سبد خود را در طول راه پر کنند!

سعی کنید ثابت قدم بمانید. این یک قانون مهم طراحی است. تصمیم بگیرید که همه ویژگی های قید شده را در صفحه محصول خود پیاده سازی کنید (که ما به شدت توصیه می کنیم)، موارد بیشتر را اضافه کنید یا فقط عناصر اصلی را انتخاب کنید، صفحات محصول شما همیشه باید سازگار باشد.
هر کاری انجام می دهید، گزینه های طراحی خود را تغییر ندهید، زیرا باعث سردرگمی مشتریان می شود و توجه آن ها را از محصولات شما منحرف می کند! از جمله موارد دیگری که ممکن است در طراحی به کمی راهنمایی نیاز داشته باشد می توان به موارد زیر اشاره کرد:
اکنون که مهم ترین عناصر موجود در صفحه محصول شما را مرور کرده ایم، شاید از خود بپرسید که چگونه باید همه آن ها را در کنار هم قرار دهید. برای این کار شما می توانید از مشاوران و متخصصان ممتاز دیزاین استفاده کرده و بهترین طراحی وب سایت مناسب خود را ایجاد کنید.
نوشته اصول طراحی صفحه محصول در وب سایت های فروشگاهی اولین بار در ممتاز دیزاین. پدیدار شد.
]]>نوشته چند نمونه از بهترین طراحی برای سایت های فروشگاهی اولین بار در ممتاز دیزاین. پدیدار شد.
]]>اگر می خواهید کاربران از سایت شما بازدید و خرید کنند، به وب سایتی نیاز دارید که بتوانید تجربه کاربر پس از فروش را کنترل کنید. شما به یک طراحی مبتنی بر تبدیل نیاز دارید که باعث شود بازدید کنندگان شما احساس کنند عضوی از یک جامعه هستند و می توانند به شما اعتماد کنند.
برای راهنمایی شما، ما چند نمونه از بهترین طراحی ها برای سایت های فروشگاهی را که در سال 2020 انتخاب شده اند، مورد بررسی قرار می دهیم. این سایت ها توجه بازدیدکنندگان را به خود جلب می کنند، احساس تعلق و اجتماع را ایجاد می کنند و فروش ماهانه را افزایش می دهند.
بهترین طراحی وب سایت فروشگاهی به طور کلی به سایت هایی تعلق می گیرد که از طریق سازگاری با برند تجاری، UX پاسخگو و دوستانه تلفن همراه و یک فرآیند تسویه حساب سریع موفق به ایجاد یک تجربه کاربری عالی شوند.
برنده بهترین طراحی وب سایت فروشگاهی به طور کلی
New Chapter، برند P&G، از نظر نوآوری، مشارکت مصرف کننده و تجربه کلی تجارت الکترونیکی در سایت خود، از عملکرد برند دیجیتال بومی (DNVB) تقلید می کند.
از آزمون ها گرفته تا بسته های نرم افزاری و موارد دیگر، New Chapter تجربه شخصی و ماجراجویی را برای مشتریان خود فراهم می کند. آن ها همچنین از آزمایشات دقیق A / B برای ایجاد بهترین تجربه کاربر استفاده کرده اند.
طبق گفته تیم طراحی New Chapter، این سایت در کمتر از یک سال، به دلیل طراحی خارق العاده، از یک وب سایت با نام تجاری 0 دلار به یک کانال پر رونق و هفت رقمی تبدیل شده است. با استفاده از آزمایش تکرار، بهینه سازی های تبدیل از حالت پرتاب تقریبا 0.4٪ به تقریبا 2٪ افزایش یافته است.
رویکرد متمرکز بر محتوا و آموزش فصل جدید واقعاً به بازدید کنندگان کمک می کند تا مزایای محصولات خود را درک کنند. به علاوه، آن ها از طبقه بندی استفاده زیادی کرده اند و به بازدید کننده اجازه می دهند مکمل ها را بر اساس نیاز های بهداشتی یا مواد تشکیل دهنده انتخاب کند.
برخی از سایت های فروشگاهی جدید معمولا برای مشاغل کوچک، بازار های میانی و شرکت های سطح سازمانی هستند. سایت های دیگر پس از یک تجربه خسته کننده با پلتفرم های قبلی، راه اندازی های جدید هستند.
همه این برند ها در BigCommerce در 12 ماه گذشته راه اندازی شده اند، روند طراحی و UX خود را در ترکیب با نیاز ها و عملکرد پیچیده تجارت الکترونیکی به نمایش می گذارند.
برنده بهترین طراحی وب سایت فروشگاهی اینترنتی جدید
سایت Skullcandy با رنگ های عالی و عکاسی منحصر به فرد از محصول احساس واقعی تری به کاربر می دهد. روند طراحی و در نظر گرفتن مخاطبان آن ها برای ساخت سایتی مهم بود که در بین رقبا برجسته باشد.
به گفته تیم Skullcandy، این سایت در تلاش است محدودیت ها در هر کاری که انجام می دهند را کنار بزند همچنین برای فروش محصولات خود از پلتفرم BigCommerce استفاده می کنند. تلاش اخیر برای تغییر طراحی مجدد در فوریه آغاز شد. این طرح همچنین برای بهره مندی از آزادی بیشتر در بستر کامل خدمات BigCommerce ارتقا یافت.
یکی دیگر از جنبه های جالب سایت skullcandy.com سهولت استفاده و جریان روان سفر مشتری است که کاربر را در هر نوبت درگیر خود می کند. با تلفیق محصول با برند و برند با محصول، بدون کوشش برای لمس محصولات، می توانید کیفیت آن ها را احساس کنید.
این طراحی به عنوان یک تجربه دست اول برای مشتریان Skullcandy طراحی شده است و در ارائه تصاویر جذاب با سرعت زیاد لود بی نظیر است.
استوارت مک میلان، معاون رئیس تجارت الکترونیک در Schuh، می گوید که کیفیت صفحه اصلی سایت فروشگاهی حدود 30٪ جذب مشتری را ایجاد می کند. این بدان معنی است که شما باید تخصص، اعتماد و جامعه تجاری خود را به سرعت به این گروه بزرگ منتقل کنید.
Optimizely لیستی از عناصری را که صفحه اصلی باید شامل شود فراهم می کند، مانند:
برند های زیر کار خوبی در اجرای این روش ها و سایر روش های بهینه سازی تبدیل در صفحه اصلی خود انجام داده اند.
برنده بهترین طراحی صفحه اصلی فروشگاهی اینترنتی
صفحه اصلی Azteca Soccer با رنگ های زیبا و عکاسی عالی از محصولات، بسیار برازنده است. آن ها به کاربران این امکان را می دهند تا در صفحه اصلی به راحتی و با دسته بندی های مختلف یا محصولات برترشان بگردند.
به گفته تیم آزتکا، آن ها تصمیم گرفتند از احساس معمول سازنده فروشگاه آنلاین دور باشند و یک تجربه خاص بوتیک را ارائه دهند. آن ها بر روی داشتن عناصر svg و حفظ تصاویر با کیفیت بالا تمرکز کردند.
کاربران می توانند سریع تر پیمایش کنند و سریع تر آنچه را که به دنبال آن هستند پیدا کنند. این سایت با استفاده بسیار عالی از عکس های محصول روشن را همراه با عکس های سبک زندگی به نمایش می گذارد، بازدید کنندگان را ترغیب می کند تا کل وب سایت را جستجو و کلیک کنند.
تجربه مشتری شامل ایده های اصلی است که در مورد خریداران قبلاً گفته شد. این مورد برای صاحبان فروشگاه مهم است زیرا یک تجربه منحصر به فرد و عالی مشتری همان چیزی است که به شما در وفادار کردن بازدید کنندگان و مشتریان کمک می کند.
با توجه به 42٪ از مدیر عاملان، از داده های گارتنر، بهبود تجربه مشتری عامل اصلی افزایش بیشتر سود است. روش های مختلفی برای بهبود تجربه مشتری با استفاده از داده های مصرف کننده وجود دارد و تعدادی از بازرگانان ما به برخی از روش های ابتکاری به این موفقیت رسیده اند.
برنده بهترین تجربه مشتری

تجربه کاربری Scentos تعادل بین فروش محصول و پرورش جامعه را پیدا می کند.
طبق گفته تیم Scentos، آن ها هرگز حتی یک مورد را به صورت آنلاین نفروخته بودند، اما در سطح جهانی حضور خرده فروشی زیادی داشتند. پس از پیوستن به BigCommerce، آن ها با فروش در بازار هایی مانند آمازون شروع به توسعه حضور تجارت الکترونیکی همه کانال خود کردند.
این سایت توانست به یک صفحه اصلی برای سرگرمی و احساس خلاقیت در کودکان در هر سنی تبدیل شود! Scentos به طرز شگفت انگیزی رنگارنگ است به گونه ای که اغلب نمی بینید. این نوع طراحی کاملا متناسب با برند تجاری است.
کودکان محتوایی را که فقط محصولات نیستند، بلکه مواردی مانند پروژه هایی را که می توانند انجام دهند، دوست دارند، که واقعاً باعث ایجاد تخیل می شود. بسیاری از جزئیات جالب مانند navigation لرزان و پرجنب و جوش وجود دارد و به زیبایی از بالا جمع شده است.
همانطور که می دانید تعداد وب سایت های بررسی شده آنقدر زیاد است که نمی توان از خیلی از آن ها که تقریباً در یک سطح هستند چشم پوشی کرد.
نامزد بهترین طراحی وب سایت فروشگاهی به طور کلی
Bliss احساس سرگرمی، جوانی و انرژی in-spa، محصولاتش را به کانال آنلاین خود برده است. این سایت با استفاده از رنگ های روشن، گرافیک جالب و حتی فایل های گرافیکی شما را به کاوش، تعامل و خرید تشویق می کند.
نامزد بهترین طراحی وب سایت فروشگاهی اینترنتی جدید
TRUE linkswear پس از سوئیچ به BigCommerce و بهبود طراحی سایت خود، تقریباً کمتر از 700٪ افزایش درآمد داشته است.
طبق گفته جاستین ازTRUE linkswear، آن ها با یک شرکت توسعه کار کردند تا یک تم سفارشی بسازند که به آن ها امکان می دهد تمام ویژگی های خاص عملکردی را که به دنبال آن بودند (به عنوان مثال کشیدن و رها کردن، پنجره بازشو) را داشته باشند. تیم طراحی بر اساس زیبایی ظاهری ای که مد نظرشان بود، آن سایت را از نو طراحی کردند که برای راه اندازی مجدد برندشان بسیار مؤثر بود.
نامزد بهترین طراحی صفحه اصلی فروشگاهی اینترنتی
Fronks دارای یک صفحه اصلی منحصر به فرد است که به وضوح نشان می دهد آن ها چه کسانی هستند و محصولات ارائه شده توسط آن ها چیست.
طبق گفته تیم Fronks، آن ها با استفاده از استنسیل و با همکاری یک استودیوی محلی یک سایت فوق العاده ساده، تمیز و مدرن ایجاد کردند که احساس محصول و بسته بندی را به نمایش می گذارد.
همچنین، آن ها بیت های تعاملی سرگرم کننده ای دارند که حس خوبی را برای مشتری ایجاد می کند.
نامزد بهترین تجربه مشتری

کامپیوتر های KOI می خواستند تجربه سایت خود را برای مخاطبان هدف از نظر فنی بهبود بخشند. این به معنای بهبود معماری سایت آن ها و نحوه اشتراک پیشنهادی آن ها بود.
طبق تیم کامپیوترهای KOI، شکایت اساسی نرخ بالای پرش و متعاقباً تماس کم و دریافت از وب سایت بود. طراحان این چالش را به عهده گرفتند که کل وب سایت را دوباره طراحی کنند و عناصر مفیدی را برای غلبه بر این مسائل اضافه کنند.
آن ها یک ویدیو را در صفحه اصلی، یک سبک جدید از کشویی آکاردئون، اضافه کردند و راه حل های ارائه شده توسط KOI Computers را برجسته کردند. این تغییرات تأثیر زیادی بر کسب و کار آن ها گذاشت.
در مجموع، سایت های فوق برای جذب مخاطب هدف خود، در یک معیار تجاری خاص خود کار می کنند، تجربه ای بی نظیر را ارائه می دهند و در نهایت ارزش برند را در این کانال بیش از سایت های دیگر ثابت می کنند.
طراحی خوب یک سایت فروشگاهی به برند ها کمک می کند ارزش ویژه و ارزش ماندگاری مشتری را بالا ببرند. ارزش بالای مشتری در طول زندگی، میزان هزینه شما برای خرید را افزایش می دهد و بنابراین تعیین می کند که آیا می توانید سایر رقبا را در بازار شکست دهید یا نه.
نوشته چند نمونه از بهترین طراحی برای سایت های فروشگاهی اولین بار در ممتاز دیزاین. پدیدار شد.
]]>