چند نکته اساسی در طراحی وب‌سایت‌های فروش آنلاین
سعید کشاورز کرمانی (سردبیر)
طراحی در واقع نوعی ارتباط است، مثل یک گفتگو. طراحی می‌تواند مخاطب را جذب کند، اطلاعات را منتقل کند و احساسات را برانگیزد و همه‌ی این‌ها روی تصمیم‌گیری مشتری تأثیر مستقیم دارد. طراحی خوب کیفیت «ارتباط» را افزایش داده و به مشتری اطلاعات لازم برای احساس اطمینان در خرید را می‌دهد.
عناصر اصلی یک طراحی وب عالی
عناصر کلیدی که بسیاری از سایت‌های موفق حول آن‌ها شکل می‌گیرند عبارت‌اند از:
- دسترسی (Accessibility)
- پالت رنگ (Color palette)
- تصاویر و ویدیو (Images and video)
- عملکرد (Functionality)
- ناوبری (Navigation)
- تایپوگرافی (Typography)
در ادامه هر یک از این مفاهیم را به طور جداگانه توضیح خواهیم داد.
اگر می‌خواهید یک طراحی حرفه‌ای برای وب‌سایت یا اپلیکیشن خود داشته باشید کنترل اعداد همراه شماست.
دسترسی (Accessibility)
این مفهوم هم از منظر قوانین و هم از منظر طراحی اهمیت دارد. آن دسته از تصمیمات طراحی که باعث شلوغیِ بصری می‌شوند مثل انیمیشن‌های آزاردهنده، می‌توانند برای کاربران نورودایورجنت (کسانی که الگوهای عصبی، فکری و رفتاری متفاوتی دارند) یا حتی کاربران نوروتیپیک (افراد معمولی)، منجر به خستگی چشم و کاهش درک محتوا شوند. در آغاز طراحی، رعایت اصول دسترسی (مثل قراردادن متن جایگزین برای تصاویر) کمک می‌کند تا همه‌ی کاربران بتوانند به راحتی از سایت استفاده کنند. Shopify ابزارهایی برای اضافه کردن alt text و افزونه‌های دسترسی دارد و در صورت نیاز می‌توانید از تیم‌های متخصص برای رعایت استانداردهای W3C استفاده کنید.
عموما این موارد باید برای ایجاد دسترسی بهتر بررسی شوند:
- انیمیشن‌ها و حرکت‌ها
- فرم‌ها، فیلدها و خطاها
- فرایندها و تکمیل وظایف
- جایگزین‌های تصویری و رسانه‌ای
- اجزای تعاملی
- جهت‌گیری و ورودی‌ها
- انسجام و ثبات در نماها
- متن و لحن نگارش
- راهنمایی و بازخورد کاربر
- کنترل‌های کاربر و سیاست‌ها
پالت رنگ (Color palette)
رنگ‌ها تقریباً روی همه‌ی عناصر طراحی تأثیر می‌گذارند؛ خصوصاً خوانایی متن. نیازی نیست برای حفظ هویت برند خوانایی را قربانی کنید. ترکیب‌های با کنتراست بالا (مثل متن سیاه روی پس‌زمینه سفید) خواناتر هستند، اما می‌توانید به‌جای سفیدِ خالص و سیاهِ خالص از مقادیر ملایم‌تر مانند کرمِ کم‌رنگ یا سفید مات یا ذغالیِ نرم استفاده کنید تا چشم کاربر کمتر خسته شود. رنگ‌هایی که انتخاب می‌کنید باید معرف برند باشند و در سراسر سایت یکدست و یکنواخت داشته باشند.
تصاویر و ویدیو (Images and video)
اگر پالت رنگ شما ملایم است، می‌توانید با اضافه کردن عکس و ویدیو رنگ و شخصیت وارد سایت کنید. تصویربرداری محصول را به شکل استاندارد انجام دهید. (مثلاً همه محصولات روی پس‌زمینه‌ای مشابه و با نور طبیعی مشابه عکاسی شوند) تا حس یکپارچگی در کاتالوگ ایجاد شود. در عکس‌های لایف‌استایل و ویدیوها فضای بیشتری برای معرفی برند وجود دارد. این نوع محتوا می‌تواند شخصیت برند را بهتر نشان دهد و حتی در مواردی به‌عنوان تایید اجتماعی (social proof) عمل کند.
عملکرد (Functionality)
در نهایت سایت باید در خدمت هدف اصلی باشد که عموما فروشِ محصول یا انتقالِ اطلاعات است. هر عنصر طراحی که اضافه می‌کنید باید تأثیرش را روی سرعت سایت بررسی کنید. برای مثال، اگر ویدیو اضافه می‌کنید، حتماً یک تصویر جایگزین (fallback) تعریف کنید تا وقتی اتصال کاربر ضعیف است چیزی جای ویدیو نمایش داده شود. همچنین به خاطر داشته باشید که کاربران از دستگاه‌های مختلف (موبایل، تبلت، دسکتاپ) وارد می‌شوند و کاربرانی که از طریق موبایل وارد وب‌سایت‌ها می‌شوند بیش از نیمی از کل فروش‌های تجارت الکترونیک را تشکیل می‌دهند؛ بنابراین طراحی واکنش‌گرا یک ضرورت است.
ناوبری (Navigation)
طراحی ناوبری یعنی ایجاد یک مسیر کوتاه و واضح تا هدف کاربر. استانداردهای پذیرفته‌شده را تغییر ندهید مگر دلیل محکمی داشته باشید. کاربران توقع دارند لینک‌های ناوبری، آیکون سبد خرید و ابزارهای جستجو یا ورود در نقاط مشخصی از صفحه باشند و شما با تغییر دادن این عادات باعث سردرگمی آن‌ها می‌شوید.
تایپوگرافی (Typography)
تایپوگرافیِ خوب، چشم خواننده را به راحتی از متن عبور می‌دهد. اندازه‌های بزرگ‌تر برای تاکید و ایجاد سلسله‌مراتب بصری استفاده می‌شوند. انتخاب ۱ تا ۲ خانوادهٔ فونت مکمل (و در صورت نیاز یک فونتِ تأکیدی) معمولاً کافی است تا هویت بصری قوی و در عین حال خوانایی حفظ شود. بسیاری از فونت‌های داخلی Shopify گزینه‌های خوب و آماده‌ای دارند، اما در صورت نیاز می‌توانید فونت‌های حرفه‌ای‌تر را از foundryهای معتبر لایسنس کنید.
نکات عملیِ ضروری در طراحی سایت
در این بخش چند اصلِ راهنما که تقریباً در همه‌ی سایت‌ها کارسازند را معرفی می‌کنیم.
بین موارد مورد انتظار و موارد غیرمنتظره تعادل برقرار کنید
انسان‌ها به الگوها عادت کرده‌اند؛ پیروی از کنوانسیون‌ها (مثل قرارگیری سبد خرید بالا سمت راست) باعث می‌شود سایت برای کاربر جدید قابل فهم‌تر باشد. اما اگر همه‌چیز بسیار شبیه به هم باشد، سایت شما شخصیتی نخواهد داشت. بنابراین از تایپوگرافی، تصاویر و رنگ برای ایجاد هویت شخصی برند خود در قابِ یک طراحیِ آشنا استفاده کنید.
فونت‌ها را بر اساس کاربردشان انتخاب کنید
فونتی که برای دکمه دعوت به اقدام یا توضیحات محصول استفاده می‌کنید باید خوانا و متناسب با کاربرد آن باشد. برای هِدلاین‌ها می‌توانید آزادی بیشتری در تزئین یا انتخاب فونت چشمگیر داشته باشید، اما خوانایی را فدای آراستگی و زیبایی نکنید.
کمتر، بهتر (Pare down)
رویکرد مینیمالیسم معمولاً تجربهٔ کاربری قوی‌تری ایجاد می‌کند. تعداد فونت‌ها و رنگ‌ها را محدود نگه دارید (معمولاً ۲ فونت اصلی و شاید یک فونت تأکیدی)، و از رنگ‌ها فقط به مقدار لازم برای ایجاد کنتراست استفاده کنید.
به طول خطوط توجه کنید
متن‌های طولانی را طوری قرار دهید که چشم کاربر مجبور نباشد از یک طرف صفحه تا طرف دیگر برود؛ برای مثال صفحاتی که تصویر در سمت چپ و متن در سمت راست دارند، معمولاً خوانایی بهتری برای توصیفات محصول ایجاد می‌کنند.
از سفید خالص بپرهیزید
نگاه کردن به نور پس زمینه سفید خالص روی نمایشگر می‌تواند چشم مخاطب را خسته کند؛ استفاده از سفیدِ کمی مات یا رنگ‌های پس‌زمینهٔ ملایم و متن ذغالی نسبت به سیاهِ خالص، حس راحتی بیشتری به کاربر می‌دهد.
برای بدترین شرایط اینترنتی، طراحی کنید
شما در محیطی با اینترنت پایدار و دستگاه مناسب طراحی می‌کنید، اما کاربر ممکن است در شرایط نامناسب و اینترنت ضعیف به سایت شما مراجعه کند. برای چنین شرایطی پشتیبان‌هایی در نظر بگیرید (مثلاً غیرفعال کردن autoplay و استفاده از بارگذاری ناهم‌زمان برای محتوای غیرضروری).
جمع‌بندی
- طراحی یعنی برقراری ارتباط: انتقال درست پیام، ایجاد اعتماد و راهنمایی کاربر برای رسیدن به هدفش.
- شش عنصر کلیدی: دسترسی، پالت رنگ، تصاویر/ویدیو، عملکرد، ناوبری و تایپوگرافی.
- اصول عملی: تعادل بین انتظار و خلاقیت، انتخاب هوشمند فونت، ساده‌سازی، تنظیم طول خط، پرهیز از سفیدِ خالص و آماده‌سازی برای بدترین شرایط اینترنتی.
سوالات متداول (FAQ)
چگونه یک وب‌سایت قدرتمند طراحی کنیم؟
یک وب‌سایت حرفه‌ای باید خیره‌کننده باشد، به کاربر حس خوبی بدهد و اصالت هویت برند را به نمایش بگذارد؛ در عین حال طراحی باید به اندازه و کاربردی باشد. واکنش‌گرایی (responsive design) به خصوص برای کاربران موبایل ضروری است. اگر مهارت طراحی ندارید می‌توانید از طراحان حرفه‌ای کمک بگیرید یا از قالب‌های آماده‌ای که مناسب هستند استفاده کنید.
چرا طراحی وب سخت است؟
چون باید میان اولویت‌های متفاوت تعادل برقرار کنید: عملکرد در مقابل زیبایی، خلاقیت در مقابل آشنا بودنِ ساختار. اگر فقط عملکرد را در نظر بگیرید ممکن است سایت خشک و بی‌هویت شود و اگر فقط به زیبایی تمرکز کنید، کاربر را سردرگم می‌کنید.
چگونه از رنگ برای بهبود طراحی استفاده کنم؟
ترکیب‌های با کنتراست بالا را برای ناوبری، دکمه‌ها و متن‌های مهم استفاده کنید. پس‌زمینه را از سفید خالص به سفید کمی مات تغییر دهید تا چشم مخاطب راحت‌تر باشد. همچنین می‌توانید از تصاویر لایف‌استایل یا بسته‌بندی محصول برای افزودن نقطه‌های رنگی و نمایش شخصیت برند بهره ببرید.
اگر می‌خواهید یک طراحی حرفه‌ای برای وب‌سایت یا اپلیکیشن خود داشته باشید کنترل اعداد همراه شماست.
