در هنگام طراحی یک سایت فروشگاهی، باید بدانید که علاوه بر ظاهر زیبا، رابط کاربری (UI) و تجربه کاربری (UX) دو فاکتور الزامی هستند. یکی از مهمترین پایههای هر چک لیست بهبود رابط کاربری، داشتن یک طراحی سایت استاندارد است که مسیر کاربر را به صورت واضح نشان دهد. رعایت تمامی اصولی که در ادامه مطلب در چک لیست UI سایت فروشگاهی به آن خواهیم پرداخت، تجربه خرید کاربران را لذتبخش و آسان میکنند.
در این مقاله از وبسایت رامیس، معیارهای مهم در این چک لیستها را به شما معرفی میکنیم تا با پیادهسازی تمامی این نکات کلیدی، سایتی کاربرپسند با طراحی زیبا و کارکرد حرفهای داشته باشد.
تفاوت تجربه کاربر (UX) با رابط کاربر (UI) چیست؟
قبل از طراحی یک سایت فروشگاهی، باید تفاوت UI و UX را درک کنید.
UX و UI دو مفهوم کاملا متفاوت هستند که در اکثر مواقع به صورت اشتباه به جای هم استفاده میشوند.
رابط کاربری بر روی ظاهر و تعامل دیداری محصول تمرکز دارد، در صورتی که تمرکز تجربه کاربری با تجربیات و احساس کاربر هنگام استفاده از یک محصول در ارتباط است.
علاوه بر چک لیست UI، استفاده از یک چک لیست UX نیز کمک میکند تا ظاهر سایت با اهداف تجربه کاربری هماهنگ باشد و اعتماد کاربر به سایت شما جلب شود.
طبق گزارش Nielsen Norman Group درباره بهینهسازی تجربه کاربری فروشگاههای آنلاین، رعایت اصول استاندارد در طراحی رابط کاربری فروشگاه میتواند نرخ تبدیل را افزایش دهد.
نکته مهم: در فرایند بهبود تجربه کاربری، انتخاب بین طراحی سایت وردپرسی یا اختصاصی در کیفیت رابط کاربری و سرعت اعمال تغییرات موثر است.
معیارهای مهم در چک لیست UI سایت فروشگاهی
اکنون تمامی عوامل موثر در چک لیست بهبود تجربه کاربری را به طور دقیق بررسی میکنیم که عبارتند از:
1. تایپوگرافی
از جمله عناصر مهم در چک لیست بهبود تجربه کاربری تایپوگرافی است. در تایپوگرافی برای یک پروژه بهتر است از بیشتر از دو فونت و همچنین تعداد زیادی استایل مختلف استفاده نکنید تا نظم، خوانایی و زیبایی طراحی حفظ شود.
2. حروف بزرگ
عامل بعدی که باید در چک لیست ui سایت فروشگاهی لحاظ شود، روش به کار بردن صحیح حروف بزرگ است.
هنگام استفاده از متنی که کاملا از حروف بزرگ تشکیل شده است، بین حروف فاصله قرار دهید تا حروف به یکدیگر نچسبند و متن خواناتر به نظر برسد.
3. فونتهای باریک و کم رنگ
اصول انتخاب فونت در طراحی سایت جزو موارد ضروری در چک لیست بهبود رابط کاربری است.
اگر از این نوع فونتها استفاده میکنید، بهتر است رنگهای لایت و کمرنگ استفاده شوند، اما به طور کلی، این موضوع به نوع فونت شما بستگی دارد. اگر محصولی است که کاربران روی صفحه نمایش خواهند دید، خواندن فونتهای باریک و کمرنگ دشوار است و ممکن است نیم پیکسلهای شکسته در برخی از صفحه نمایشها ایجاد کند.
4. اندازه فونت متن اصلی و سرتیترها
این عامل در چک لیست ui سایت فروشگاهی، این عامل جایگاه خاصی دارد.
شش تیتر از h1 تا h6 وجود دارد. در پروژه خود نباید بیشتر از چهار حالت وجود داشته باشد. همچنین، ترتیب آنها باید رعایت شود.
بزرگترین عنوان یک سایت یا صفحه لندینگ ممکن است از نظر بزرگی به اندازه مورد نظر شما باشد اما نباید بیش از حد با بقیه عناوین فاصله بگیرد زیرا متن خیلی طولانی مانند متن خیلی کوتاه تجربه خواندن را مختل میکند.
برای مثال اگر از Google Chrome استفاده کنیم، تنظیمات پیش فرض مرورگر هر متن اصلی را در اندازه ۱۶px نمایش میدهد که این اندازه برای خواندن بسیار راحت است.
12px را را میتوان به عنوان کمترین اندازه در نظر گرفت یرا اندازههای کمتر به دلیل مشکلات بینایی یا مانیتورهای بد قابل خواندن نیستند.
به هیچ عنوان از اندازههای نزدیک به هم در یک متن استفاده نکنید چون باعث سردرگمی و بینظمی در ظاهر یک محصول میشود.
5. ارتفاع خط
از مهمترین بخشها در چک لیست بهبود رابط کاربری ارتفاع است.
معمولا نیازی به تغییر تنظیمات ارتفاع خط در حالت پیشفرض نیست، اما افزایش کمی ارتفاع میتواند خوانایی متن را بهتر کند. این موضوع در متنهای طولانی مثل وبلاگها، مقالات و بخشهای اطلاعاتی سایتها یا اپلیکیشنها تاثیر بسزایی دارد.
برای عنوانها هم در نظر داشته باشید که فاصله خطوط به اندازهای باشد که انتهای حروف به هم نچسبند.
6. سلسله مراتب متن و سرتیترها
ترتیب متن و تیترها از عوامل کلیدی به شمار میروند که باید در چک لیست ui سایت فروشگاهی مورد توجه قرار گیرند.
برای برجسته کردن بخشهای مهم یک متن از Bold text استفاده کنید. Bold text معمولا برای عنوانها، لینکها، دکمهها و قسمتهایی که نیاز به تاکید بیشتری دارند استفاده میشود. اما بولد کردن کل متن تشخیص بخشهای مهمتر را دشوار میکند.
از آنجایی که همه بخشها به یک اندازه اهمیت ندارند، از Bold text فقط در جای درست استفاده کنید.
7. رنگ متن
این عامل، یکی از ستونهای اصلی در چک لیست بهبود رابط کاربری است.
در طراحی سایت و اپلیکیشن، رنگ متن از اهمیت بالایی برخوردار است. رنگها باید کنتراست کافی داشته باشند تا متنها در هر نوع مانیتوری به آسانی خوانده شود.
این موضوع برای المانهای فرم که معمولا در رنگهای خاکستری روشن هستند از اهمیت بیشتری برخوردار است زیرا اگر کنتراست کمی داشته باشند ممکن است اصلا دیده نشوند.
8. فاصله و حاشیهها
اهمیت این مورد باعث شده تا در فهرست چک لیست ui سایت فروشگاهی قرار گیرد.
وجود فضاهای خالی بین عناصر یا به عبارتی دیگر فضاهای منفی، برای یک طراحی خوب الزامی است زیرا در این حالت رابطه بین اجزا بهتر درک خواهند شد و نظم دیداری، ریتم و تعادل در طراحی ایجاد میشود.
9. عدم استفاده از فریمها و خطوط اضافی
این مورد، یکی از معیارهای مهم در چک لیست بهبود رابط کاربری است.
استفاده از یک قاب یا خط باریک 1px سادهترین روش برای جدا کردن یک بخش از بخشی دیگر است.
اما گاهی در طراحیها با باکسهایی مواجه میشویم که داخل یک باکس، چند باکس دیگر قرار دارد و هر کدام از آنها هم یک قاب 1px دارند.
برای ایجاد یک طراحی تمیز و خوانا، قابهای اضافی را حذف کنید و فقط از یک فریم 1px استفاده کنید.
برای ایجاد تمایز بین اجزا میتوان از سایه یا افزایش فاصله نیز استفاده کرد. این نکته را در نظر داشته باشید که فاصله بین عناصر باید بیشتر از پدینگ داخل هر عنصر باشد. با حذف فریمهای اضافی، فضای بیشتری برای نمایش محتوا خواهید داشت.
محتوا مهمترین بخش برای محصول است درنتیجه طراحی را با فضاهای غیرضروری شلوغ نکنید.
10. حاشیهها
از نظر دیداری حاشیهها از فاکتورهای اصلی در چک لیست ui سایت فروشگاهی هستند که اهمیت آنها غیرقابل انکار است و کمک میکنند تا تشخیص دهیم یک عنصر به کدام بخش تعلق دارد. برای مثال، یک مقاله در یک سایت خبری شامل تصویر، عنوان، متن و تاریخ انتشار است. فاصله تاریخ باید از سایر اجزا کمی بیشتر از فاصله عنوان و متن باشد تا جدا و قابل تشخیص باشد. تصویر نیز باید بیشترین فاصله را نسبت به تاریخ داشته باشد.
11. استفاده کمتر از عناصر
همیشه افرادی هستند که میخواهند همه اطلاعات در یک صفحه یا یک بخش قرار گیرد. مانند عنوان، شماره تلفن، منو، پیشنهاد ویژه و یک لوگوی بزرگ!
در صورتی که هرچه کاربر اطلاعات کمتری دریافت کند، انجام یک کار برای او سادهتر میشود. دریافت تدریجی اطلاعات تجربه کاربری را راحتتر میکند.
کاربر نباید برای فهمیدن رابط کاربری شما دچار سردرگمی شود. به خاطر داشته باشید، قرار گرفتن عناصر زیبا و بدون نقص در کنار هم، لزوما طراحی زیبا محسوب نمیشوند.
بدون توجه به این عامل، چک لیست بهبود رابط کاربری کامل نمیشود.
12. حاشیههای کناری متفاوت در صفحه نمایش
در اطراف محتوا به حاشیهها توجه کنید. اگر محتوا به روشی کلاسیک از گوشه چپ بالا به گوشه راست پایین قرار گیرد، بهتر است حاشیه سمت راست بالا کمی بزرگتر از سمت چپ باشد تا طراحی متوازنتر از حالتی باشد که حاشیههای دو طرف کاملا برابر هستند.
نکات ذکر شده از مواردی هستند که باید در چک لیست ui سایت فروشگاهی گنجانده شوند.
13. تصاویر و رنگها
رعایت اصول تصاویر و رنگها در چک لیست بهبود رابط کاربری به بهتر دیده شدن سایت کمک میکند.
تصاویر، آیکونها و پسزمینه در حالت کلی یک محصول تاثیر زیادی دارند. تصاویر باید نشاندهنده آنچه یک شرکت، اپلیکیشن یا وبسایت ارائه میدهد باشند تا کاربران تجربهای واقعی و قابل اعتماد داشته باشند.
14. لوگوها
از جمله عواملی که در چک لیست ui سایت فروشگاهی نباید فراموش شوند، لوگوها هستند.
طراحی لوگوی مناسب کاری دشوار است، اما یک طراح حرفهای با رعایت اصول و قوانین پایه مثل انتخاب صحیح رنگها میتواند لوگوی خوبی بسازد.
اگر قرار دادن یک نماد روی لوگو سخت بود، از انجام آن خودداری کنید و لوگو را به شکل یک آرم دارای فونت طراحی کنید. طراحی حرفهای در عین سادگی با ارزشتر است.
15. سایهها
سایه زیر یک عنصر هرگز نباید به طور کامل سیاه باشد، چون سایه همیشه تیرهتر از سطحی است که روی آن قرار میگیرد. عناصر یک سایه کوچک و روشن دارند که دقیقا زیر آنها ایجاد میشود و یک سایه بزرگ و تار داند که محیط اطراف را تحت تاثیر قرار میدهد. از سایههای طبیعی و مرتب در پروژههای خود استفاده کنید.
این نکته یکی از شاخصهای حیاتی در چک لیست بهبود رابط کاربری است.
16. تصاویر و آیکونها
هر فایل وکتور، باید به صورت وکتور نیز طراحی شود. در این شرایط تمام آیکونها، فلشها و لوگوها باید با فرمت SVG در اختیار توسعهدهندگان قرار گیرند.
آیکونهای PNG درای لبههای مبهمی هستند و در نمایشگرهای رتینا و LED کیفیت ظاهری بسیار پایینی خواهند داشت. از طرفی دیگر، تصاویر وکتور حافظه زیادی اشغال نمیکنند.
اگر روی آیکونهای یک سایت یا یک اپلیکیشن کار میکنید، همه آنها باید به یک “خانواده” تعلق داشته باشند تا عرضها و شعاعهای گوشهها با هم برابر شوند. همچنین آیکونها باید داخل مربعهایی با اندازه یکسان قرار گیرند و حجم یکسانی داشته باشند.
در صورتی که آیکونها دارای حلقه باشند، قطر همه حلقهها باید یکسان باشد تا در شکل کلی هماهنگی وجود داشته باشد.
بدون در نظر گرفتن این موارد، چک لیست ui سایت فروشگاهی کامل نیست.
جدول خلاصه چک لیست UI سایت فروشگاهی
در این جدول، معیارهای اصلی در چک لیست بهبود رابط کاربری به صورت مختصر آورده شده است:
| معیارها | نکات مهم |
| تایپوگرافی | حداکثر دو فونت باشد، همچنین، جهت تمرکز بر خوانایی و حفظ نظم از استایلهای زیاد استفاده نشود. |
| حروف بزرگ | فاصله بین حروف بزرگ افزایش یابد تا خوانایی حفظ شود. |
| فونتهای باریک و کمرنگ | به علت احتمال شکست پیکسل و خوانایی پایین، مناسب صفحه نمایش نیستند. |
| اندازه فونت و تیترها | ترتیب تیترها رعایت شود و از اندازههای خیلی نزدیک استفاده نشود. |
| ارتفاع خط | برای خوانایی بهتر ارتفاع کمی افزایش یابد مخصوصا برای متنهای طولانی |
| ترتیب و بولد کردن | ترتیب H۱ تا H۶ رعایت شود و از اندازههای خیلی نزدیک استفاده نشود. |
| رنگ متن | به فرمها و رنگهای خاکستری روشن توجه شود. |
| فاصله و فضای خالی | فاصله بین عناصر منطقی و قابل تشخیص باشد. |
| حذف فریمهای اضافی | استفاده از یک فریم ۱px کافی است، برای تفکیک نیز از سایه یا فاصله استفاده شود. |
| حاشیهها | حاشیهها بخشها را مشخص کنند و فاصلهها متعادل باشند. |
| حداقل عناصر در صفحه | برای جلوگیری از سردرگمی کاربر اطلاعات به تدریج نمایش داده شود. |
| حاشیههای کناری صفحه | در چیدمان کلاسیک، کمی تفاوت در حاشیه راست و چپ باعث تعادل بیشتر میشود. |
| تصاویر و رنگها | تصاویر مرتبط، باکیفیت و هماهنگ باشند و رنگبندی منطقی و قابل فهم وجود داشته باشد. |
| لوگوها | طراحی ساده، حرفهای و خوانا باشد و در صورت دشواری نماد، فقط لوگوتایپ استفاده شود. |
| سایهها | سایهها هرگز کاملا سیاه نباشند، طبیعی و ملایم باشند. |
| آیکونها و فایلهای گرافیکی | استفاده از SVG، یکپارچگی در خانواده آیکونها، یکسان بودن قطر حلقهها و اندازهها مهم است. |
کلام آخر
برای داشتن یک فروشگاه آنلاین موفق، رعایت تمامی موارد ذکر شده در چک لیست UI سایت فروشگاهی حائز اهمیت هستند و هر کدام از عوامل فوق جایگاه خاصی در چک لیست بهبود رابط کاربری دارند.
شما با استفاده از اصول موجود در این چک لیستها میتوانید سایتی زیبا و حرفهای داشته باشید که تجربهای بدون سردرگمی برای مشتریان فراهم میکند و تعامل آنها را با سایت شما افزایش میدهد.
