آیا به دنبال ایجاد یک وب سایت برای یک فروشگاه آنلاین هستید؟ موفقیت فروش و قابلیت استفاده یک وب سایت تجارت الکترونیک به طراحی موثر بستگی دارد.
اما از کجا باید شروع کرد؟ در اینجا، یک طرح شش مرحله ای سریع و ساده برای طراحی یک سایت تجارت الکترونیکی کشف کنید که بازدیدکنندگان شما را به طور موثر و زیبا از صفحه اصلی به سبد خرید و فروش هدایت می کند.
نکاتی را برای طراحی سایت فروشگاهی حرفه ای که به بازدیدکنندگان شما اولین برداشت عالی می دهد، بهینه سازی کاتالوگ های محصولات خود برای آسان کردن آن ها و ایجاد صفحات محصول که تضمین کننده کلیک «افزودن به سبد» است، انتخاب کنید.
این راهنمای نهایی خود را برای ایجاد هر سایت تجارت الکترونیک متمرکز بر محصول، خواه برای مد، مبلمان، غذا یا زیبایی در نظر بگیرید.
چگونه نقشه سایت تجارت الکترونیک خود را ایجاد کنیم
اولین کار شما هنگام طراحی سایت برای تجارت الکترونیک، ایجاد نقشه سایت است. این می تواند به سادگی یک دنباله طراحی شده با دست از طرح های قاب سیمی یا تصاویری شبیه سازی شده از صفحات با استفاده از برنامه ای مانند Adobe Photoshop باشد. چه در حال کار با یک توسعه دهنده برای شناسایی سایت باشید، چه قصد دارید خودتان سایت را کدنویسی کنید، یک نقشه سایت ساده پایه خوبی برای هر پروژه طراحی وب است.
مسیر UX سایت های تجارت الکترونیک بسیار ساده است. پس از همه، قصد شما باید این باشد که کاربران را در سریع ترین زمان ممکن به سمت فروش سوق دهید.
با تجزیه و تحلیل طیف گسترده ای از وب سایت های تجارت الکترونیک، متوجه شدم که اکثر آنها به این ترتیب ساده شش مرحله ای از صفحات پایبند هستند. نقشه سایت من برای سایت خیالی Linen Co. این توالی را منعکس می کند، از صفحه اصلی شروع می شود و به محصولات ویژه (که در زیر صفحه اصلی قرار دارد)، کاتالوگ دسته بندی (مانند لباس های زنانه)، صفحه محصول، سبد (یا سبد خرید) می رود. ) صفحه و صفحه تشکر.
چگونه برای هر صفحه از سایت تجارت الکترونیک خود قالب طراحی کنید
هنگامی که نقشه سایت خود را ترسیم کردید، می توانید از آن به عنوان طرحی برای شکل دادن به طراحی قالب ها برای هر یک از شش نوع صفحه استفاده کنید.
به خاطر داشته باشید که بسیاری از کاربران با استفاده از دستگاه تلفن همراه به سایت شما دسترسی خواهند داشت، بنابراین طراحی یک طرح برای صفحه نمایش موبایل و دسکتاپ بسیار مهم است.
برای تبلت‌ها، می‌توانید با در نظر گرفتن «عرض شکست» آی‌پد طراحی کنید. این نقطه ای است که در آن یک طرح بندی قابل پیمایش محتوا را به زیر صفحه شکسته فشار می دهد. این 768 پیکسل برای iPad است.
برای آیفون ها و به عنوان یک قانون کلی برای سایر دستگاه های تلفن همراه، این 375 پیکسل است.
طرح‌بندی‌های نمونه زیر با در نظر گرفتن صفحه دسکتاپ یا لپ‌تاپ طراحی شده‌اند و طرح‌ها در فتوشاپ پیش‌نویس شده و به عرض ۱۴۰۰ پیکسل تنظیم شده‌اند. این صفحه با ارتفاع صفحه 900 پیکسل جفت شده است، این صفحه‌آرایی و وضوح متناسب با بیشتر صفحه‌نمایش‌های دسکتاپ و لپ‌تاپ را در اختیار شما قرار می‌دهد.
برای یک صفحه نمایش با عرض 1400 پیکسل، طراحان وب توصیه می کنند حداکثر عرض 1280 پیکسل را برای محفظه محتوای اصلی رعایت کنید. این تضمین می‌کند که محتوا، حتی در عرض صفحه‌های بزرگتر، خیلی کشیده نمی‌شود.
همچنین ایده خوبی است که طرح‌های صفحه خود را به ستون‌هایی تقسیم کنید، به این ترتیب یک توسعه‌دهنده وب طرح‌بندی صفحه را ساختار می‌دهد.
با در نظر گرفتن این موضوع، می توانید یک محفظه مرکزی 1280 پیکسلی را در صفحه ای با عرض 1440 پیکسل، قبل از تقسیم بخش 1280 پیکسلی به 12 ستون، با یک ناودان 30 پیکسلی، برش دهید، همانطور که من در اینجا برای ایجاد الگوهای این وب سایت انجام داده ام. .
هنگامی که طرح بندی صفحه خود را به ستون ها تقسیم کردید، می توانید شروع به پیش نویس طرح های هر صفحه کنید. برای کشف نکاتی برای استفاده حداکثری از هر نوع صفحه در سایت تجارت الکترونیک خود، از صفحه فرود تا سبد، به ادامه مطلب مراجعه کنید.
صفحه اصلی
در حالی که برخی از کاربران ممکن است مستقیماً از سایت‌هایی مانند Google Shopping، Lyst یا Pinterest وارد صفحه محصول شوند، برخی دیگر احتمالاً به عنوان اولین نقطه ورودی خود در صفحه اصلی قرار می‌گیرند.
صفحه اصلی سایت تجارت الکترونیک شما باید مشتریان را با برند فروشگاه آشنا کند و همچنین آنها را به کاوش بیشتر در سایت ترغیب کند. عکاسی تمام عریض و دراماتیک روشی موثر برای ایجاد احساس غوطه وری در صفحه اصلی است و لوگوی کسب و کار باید عنصر برجسته طراحی باشد. آن را در هدر یا بدنه اصلی صفحه قرار دهید.
صفحه اصلی همچنین باید نقطه شروع یک سفر موثر کاربر باشد و کاربر را به سرعت به آیتم های کلیدی منو، محصولات ویژه و جستجو هدایت کند.
یک لایه ایجاد کنید که نشان دهد چگونه یک منوی کشویی یا بازشو در طرح شما ظاهر می شود. این به شما کمک می کند تا ارزیابی کنید که به چه تعداد ستون در منوی خود نیاز دارید. همچنین به شما نشان می‌دهد که چقدر متن باید در دسته‌ها و زیرمجموعه‌های منو ظاهر شود و به شما کمک می‌کند تا اساس قالب‌بندی H1 و H2 را ایجاد کنید.
صفحه محصولات ویژه
بیشتر سایت‌های تجارت الکترونیک باید برای مشتریان خود تازه و به‌روز به نظر برسند. اهمیت دادن به محصولات ویژه یا فصلی می تواند به فروشگاه کمک کند تا احساس مرتبط و هیجان انگیزی داشته باشد، به ویژه برای مشتریان بازگشتی.
شما ممکن است انتخاب کنید که یک محصول یا مجموعه ویژه را در صفحه اصلی برجسته کنید، و مشتریان را تشویق کنید تا برای دسترسی به صفحه ای که به آن محدوده محصول اختصاص داده شده است، کلیک کنند. از طرف دیگر، می‌توانید کاربران را تشویق کنید تا برای مشاهده کاتالوگ پیمایشی از محصولات ویژه، از «تا» صفحه اصلی عبور کنند.
استفاده از فلش‌ها یا جلوه‌های نگهدارنده نشانگر به تشویق پیمایش کمک می‌کند، در حالی که دکمه‌ها یا متن زیر خط‌دار (مثلاً «اکنون خرید کنید» یا «مجموعه جدید را مشاهده کنید») کاربران را به کلیک کردن ترغیب می‌کند.
صفحه دسته و زیر مجموعه
یک دسته نشان دهنده گروهی از محصولات مرتبط است، به عنوان مثال. "لباس مردانه." در این، زیر مجموعه هایی مانند "شلوار"، "لوازم جانبی" و غیره وجود دارد.
قالب‌ها برای صفحات دسته‌بندی و زیرمجموعه‌ها می‌توانند بر اساس طرح‌بندی یکسانی باشند، که تغییری در طرح شطرنجی خواهد بود. ممکن است بخواهید برخی از پیش‌نمایش‌های تصویر را بزرگتر کنید و به آنها اجازه دهید دو ستون را پوشش دهند، در حالی که برخی دیگر فقط یک ستون را اشغال می‌کنند. برای یک سبک الهام گرفته از Pinterest، ارتفاع تصاویر را تغییر دهید تا یک خط پایه شاداب و ردیف‌های «شکسته» ایجاد کنید.
در این مورد، من یک چیدمان یکنواخت بسیار ساده را انتخاب کرده‌ام، با تصاویر پرتره‌محور برای گرفتن عکس‌های بلند از اقلام لباس.
در یک لایه جدید، با قرار دادن یک بلوک رنگی تا حدی مات، نام محصول و قیمت در بالای یکی از تصاویر، تصویری از افکت شناور ایجاد می‌کنم.
صفحه محصول
صفحه محصول بدون شک مهمترین طراحی صفحه در سایت تجارت الکترونیک شما است. این به این دلیل است که صفحه معادل یک مرحله فروش است و هدف آن متقاعد کردن مشتری برای کلیک بر روی افزودن به سبد خرید است.
تصاویر محصول در مقیاس بزرگ و به زیبایی که طیف وسیعی از زوایا و نمای نزدیک از مواد و رنگ‌ها را نشان می‌دهند، کمک زیادی به شما در فروش می‌کنند. توضیحات واضح محصول، گزینه‌های رنگ، موجود بودن موجودی یا اندازه نیز به ایجاد یک تجربه خرید روان‌تر کمک می‌کند.
دکمه "افزودن به سبد خرید" باید برجسته و قانع کننده باشد. شما نیازی به استفاده از رنگ‌های بسیار روشن ندارید، اما یک حاشیه و متن کمی بزرگتر به‌طور نامحسوس کاربران را به سمت درست سوق می‌دهد.
صفحه خرید
هنگامی که کاربران کالایی را به سبد خود اضافه کردند (که «سبد خرید» نیز نامیده می‌شود)، می‌توانید آنها را به «ادامه خرید» یا «رفتن به سبد خرید» تشویق کنید.
سایت‌های تجارت الکترونیکی که بر روی محصولات کم‌ارزش متمرکز هستند، ممکن است مسیر «خرید ادامه دهید» را به بخش برجسته‌تری از تجربه UX تبدیل کنند. از دکمه‌ها، «تحویل رایگان بیش از x دلار» و بنرهای کد کوپن برای تشویق کاربران به افزودن اقلام بیشتر به سبد خرید خود استفاده کنید.
از طرف دیگر، برای یک محصول با ارزش بالاتر مانند یک کالای لوکس یا بزرگ، ممکن است احساس کنید مهم تر است که کاربر را تشویق کنید تا محصول را فوراً بخرد، و به او اجازه ندهید نظر خود را تغییر دهد.
دکمه «افزودن به سبد خرید» در صفحه محصول را به دستورالعمل «رفتن به سبد خرید/سبد» تبدیل کنید و از رنگ متضاد یا اندازه فونت بزرگتر برای جلب توجه استفاده کنید.
این کاربر را به صفحه سبد هدایت می‌کند که سفارش را خلاصه می‌کند، هزینه‌های تحویل را فهرست می‌کند و به کاربر فرصت استفاده از کد کوپن را می‌دهد.
دکمه پرداخت بسیار مهم است. از یک دکمه برجسته در رنگ متضاد استفاده کنید تا چشم را از قیمت تمام شده محصول دور کنید و در واقع فروش را تکمیل کنید.
صفحه تشکر
صفحه نهایی در مسیر UX برای اکثر سایت های تجارت الکترونیکی یک صفحه ساده "متشکرم" است.
این یک صفحه کاربردی است که به مشتری اطمینان می دهد خرید موفقیت آمیز بوده است. این مکان خوبی برای یادآوری به کاربران است که تأیید سفارش به آدرس ایمیلی که ارائه کرده‌اند ارسال می‌شود و همچنین از کاربران می‌خواهد سفارش را در حساب آنلاین خود مشاهده کنند.
برای تکمیل حلقه UX، یک call-to-action اضافه کنید که کاربران را به ادامه مرور هدایت کند. هدایت آنها به صفحه اصلی یا محصولات ویژه راه خوبی برای نگه داشتن مشتریان در سایت شما برای مدتی طولانی است.
نتیجه گیری: 6 مرحله برای ایجاد یک طراحی سایت تجارت الکترونیکی موثر
در این مقاله به این موضوع پرداخته‌ایم که چگونه می‌توانید با تمرکز بر طراحی قالب‌های شش صفحه، یک وب‌سایت تجارت الکترونیک ساده و مؤثر را ترسیم کنید و بازدیدکنندگان خود را از صفحه اصلی به یک فروش کامل هدایت کنید.
اکنون که طرح های قالب خود را آماده کرده اید، می توانید از آنها به عنوان پایه ای برای توسعه وب سایت خود استفاده کنید. می توانید این طرح ها را به یک توسعه دهنده وب بسپارید یا از قالب ها به عنوان مبنایی برای کدنویسی طراحی سایت خود استفاده کنید.
پس از آماده شدن قالب های شش صفحه، می توانید از عناصر طراحی مشابه در سایر نقاط لمسی استفاده شده در سفر کاربر خود در سایت استفاده کنید. همین مسیر را برای ایجاد قالب های ایمیل دنبال کنید، از ایمیل های تبلیغاتی یکباره گرفته تا ایمیل های فاکتوری که هنگام خرید در سایت ارسال می شوند.
برای وب سایت های تجارت الکترونیک، هدف اولیه همیشه هدایت سریع و آسان کاربر به سمت فروش است. اما، این بدان معنا نیست که سبک باید فدای عملکرد شود. عکاسی همه جانبه، تایپوگرافی زیبا و طرح‌های رنگی متداول، همگی به آرمان‌پذیری و خاطره‌انگیز شدن سایت شما کمک می‌کنند و کاربران بیشتری را وادار به بازدید مجدد می‌کنند.
منبع: https://www.shutterstock.com/