97 نکته طراحی سایت موبایل فرندلی

منظور از وب سایت سازگار با موبایل، طراحی سایتی است که برای گوشی های هوشمند و تبلت ها بهینه شده است. طراحی سایت موبایل فرندلی طراحی سایتی است که نه تنها متناسب با سایز صفحه نمایش موبایل است بلکه برای تجربه کاربری آن نیز برای موبایل طراحی شده است. طراحی سایت سازگار با موبایل، عملکرد سایت را در انواع سایزهای مختلف صفحه نمایش در نظر می‌ گیرد و طراحی آن طوری است که به راحتی در صفحه نمایش با سایزهای مختلف نمایش داده شود.

آیا وب سایت من برای موبایل مناسب است؟

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

• Google’s Mobile-Friendly Test and PageSpeed Test
• HubSpot’s Website Grader
• mobiReady
• Media Genesis’ Responsive Design Checker

چارچوب های طراحی وب مناسب برای موبایل

برای طراحی سایت موبایل فرندلی، دو رویکرد (یا چارچوب) اصلی وجود دارد، واکنش گرا (Responsive) و تطبیقی (Adaptive). در طراحی سایت ریسپانسیو، طراحی وب سایت به گونه ای طراحی می شود که تمام المان های موجود در سایت با تغییر سایز دستگاه تغییر می کند. اما در طراحی تطبیقی، طراحی وب سایت برای هر دستگاه جداگانه طراحی می شود. سایت های واکنشگرا معمولاً سریعتر لود می‌ شوند و بهتر از سایت های تطبیقی  سئو می شوند و از نظر توسعه و نگهداری در بلندمدت پایدارتر هستند. 

چک لیست طراحی سایت موبایل فرندلی

- چک لیست سایت از نظر چیدمان صفحه

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

1. عناصر مهم را در دسترس کاربر قرار دهید (بخشی که لمس آن با انگشت شست آسان است)
2. لوگوی خود را در بالا سمت راست قرار دهید
3. در صورتی که سایت فروشگاهی دارید، سبد خرید را در بالا سمت چپ قرار دهید 
4. باکس جستجو را در بالا سمت راست قرار دهید
5. تعداد موارد منو یا پیمایش را به حداقل برسانید

- چک لیست سایت از نظر طراحی گرافیکی

آیکون ها، نوشته ها و ... در یک سایت استاندارد ممکن است در دستگاه های با سایز کوچک تر به درستی نمایش داده نشود و صفحه خیلی شلوغ بنظر برسد. در طراحی سایت برای موبایل، این نکته را در نظر داشته باشید تا کاربر تجربه خوبی داشته باشد و به شما در رسیدن به یک طراحی UX خوب کمک کند.

    6. سایت را ساده نگه دارید. سایت‌ های ساده از نظر زیبایی‌ شناختی دلپذیرتر هستند، به راحتی قابل پیمایش هستند و تعداد مراحل انجام کار (پیدا کردن محصول، خواندن، خرید و ...) را کاهش می‌ دهند.
    7. استفاده از فضای سفید در سایت و به حداقل رساندن حجم کدها که بر عملکرد سایت نیز تأثیر مثبت دارد می گذارد.
    8. یک فونت معمولی با سایز خوانا انتخاب کنید تا کاربر مجبور از کوچک کردن یا بزرگ کردن صفحه جلوگیری کند.
    9. اطمینان حاصل کنید که هر محتوای قابل پخش (ویدئو) به صورت خودکار پخش نمی شود و در همه دستگاه های مورد نظر پشتیبانی می شود.
    10. برای اولویت بندی عملکرد بهتر سایت، تعداد تصاویر را به حداقل برسانید.
    11. یک رنگ ثابت که نشان دهنده برند شماست، انتخاب کنید.
    12. مطمئن شوید که عناصر و آیکون های سایت در اندازه و مقیاس مناسب هستند.
    13. از دکمه ها جذاب استفاده کنید که کاربر را به انجام فعالیتی ترغیب کند
    14. برای طراحی UX از طیف رنگی جذاب و متناسب با رنگ سازمانی، فونت های خوانا، آیکون های زوم و ... استفاده کنید.
    15. مطمئن شوید که همه صفحات مشابه هم هستند از نظر ساختاری یکسان باشند
    16. جزئیات بیشتر را با یک "+" یا با منوهای فرعی پنهان کنید
    17. از نظرات کاربران، عکس های با کیفیت و شبکه های اجتماعی استفاده کنید

- چک لیست سایت از نظر دسترسی ها

دسترسی ها در سایت ها اغلب مهمترین عنصر تجربه کاربری است، بنابراین انواع منوها، نحوه کار و مکان قرارگیری آنها از اهمیت بالایی برخوردار است. هدف آسان است. 

    18. از منوی همبرگری (سه خط انباشته) را برای دسترسی ب بخش های مختلف سایت به جای منوی نواری قدیمی، که فضای بیشتری هم اشغال می کند، استفاده کنید.
    19. دسترسی را با حداقل تعداد کلیک آسان کنید تا کاربران به آنچه کاربران می خواهند سریعتر برسند.
    20. یک نوار دسترسی ثابت در پایین صفحه با حداکثر 5 مورد پر کاربرد قرار دهید. از نمادها یا ترکیبی از نمادها و متن استفاده کنید.
    21. از آیکون ها برای دسته بندی ها و عملکردهای  رایج سایت خود استفاده کنید.
    22. فونت یا رنگ  منو، آیکون و یا دکمه ای که کاربر در حال استفاده از آن است، تغییر کند.
    23. اگر سایت شما پروفایل کاربری دارد، از آیکون استاندارد برای پروفایل (نشان دهنده شخص باشد) استفاده کنید.
    24. نحوه باز و بسته کردن موارد یا منوهای کشویی مشخص باشد.
    25. نحوه بازگشت به قبل مشخص باشد.
    26. مخفی کردن عناصری که کابر خیلی به آنها احتیاجی ندارد مانند پروفایل، راهنما، تنظیمات.
    27. در صورتی که سایت شما فروشگاهی است، آیکون های مسیر خرید و کامل کردن مراحل خرید استفاده کنید مانند آیکون مرحله قبل، مرحله بعد و ...
    28. از ربات‌ های چت آنلاین برای بهبود جستجو، بهبود تعامل با کاربر و یا بهبود خدمات مشتری استفاده کنید.

- چک لیست سایت از نظر دکمه ها

هدف از طراحی و قرار دادن دکمه ها (Buttons) این است که کاربر به انجام یک کار در سایت اقدام کند. اصطلاحا به این دکمه ها Call To Action یا CTA می گویند. مانند دکمه افزودن به سبد خرید، دکمه تماس و ... اما در نظر داشته باشید که تعداد استفاده از این دکمه ها نباید زیاد باشد و یا دسترسی به دکمه ها نباید دشوار باشد که باعث گم شدن کاربر در سایت شود.

    29. چک کنید که دکمه ها و آیتم های منو به اندازه کافی بزرگ هستند و با لمس آنها به درستی کلیک می شوند.
    30. از رنگ متضاد برای متن و پس زمینه استفاده کنید که وضوح قابل مشاهده باشد.
    31. باز لمس دکمه، دکمه ها باید اکشنی مانند حرکت انیمیشنی، تغییر حالت، تغییر رنگ، ایجاد و ... از خود نشان دهند
    32. مهم ترین دکمه سایت باید به وضوح قابل مشاهده باشد.

- چک لیست جستجو در سایت

جستجو کردن در سایت ها کار بسیار رایجی است و بخش جستجو در سایت باید طوری طراحی شود که کاربر به نتیجه مورد نظرش برسد. در ادامه چک لیستی تهیه شده است که با آن می توانید بخش جستجوی سایت را بررسی کنید. 

    33. از آیکون ذره بین استاندارد برای جستجو استفاده کنید
    34. یک کادر جستجو با متن "جستجو" یا "جستجوی محصول" به عنوان راهنمایی باز کنید.
    35. جستجو را در سمت راست بالای صفحه قرار دهید
    36. جستجو را در همه صفحات به طور ثابت قرار دهید
    37. جستجو را آسان تا جایی که می توانید آسان کنید و باید پاک کردن برای جستجوی مجدد را داشته باشد
    38. باید قابلیت تصحیح غلط املایی را نیز داشته باشد
    39. نمایش جستجوهای قبلی 
    40. نمایش تعداد نتایج یافت شده
    41. مطمئن باشید که شما در بین جستجوها موردی را دارید که در سایت موجود نیست پس باید جستجوی جایگزین، آیکون های دسته بندی و غیره نمایش داده شود.
    42. اگر جستجوی در سایت هدف اصلی شماست، آن را به طور واضح در صفحه اصلی قرار دهید
    43. تعداد پیش فرض نتایج جستجو را برای لود سریعتر کاهش دهید
    44. قابلیت پشتیبانی از چندین مدل نمایش برای نتایج جستجو (مانند جزئیات محصول، تعداد نتایج و...)
    45. اجازه فیلتر کردن نتایج جستجو را بدهید و کاربر باید نتایج فیلتر شده را ببیند و به راحتی بتواند فیلترها را پاک کند.
    46. ​​برای سرعت بخشیدن به جستجو، جستجو را به صورت خودکار تکمیل کنید
    47. موارد پر جستجو به صورت پیشنهاد ارائه شود
    48. گزینه جستجو بر اساس دسته بندی را درج کنید
    49. از هوش مصنوعی استفاده کنید (بر اساس سلیقه کاربر، جستجو و یا خریدهای قبلی کاربر می توانید جستجوهای پیشنهادی ارائه دهید)
    50. قابلیت پشتیبانی از جستجوی صوتی

- چک لیست کارآیی و عملکرد سایت

سرعت سایت برای تجربه کاربر بسیار مهم است. اگر لود یک سایت در نسخه موبایل بیش از سه ثانیه طول بکشد، 53 درصد از کاربران سایت را ترک می کنند و 10 نتیجه اول جستجوی در گوگل اغلب بین 1 تا 2 ثانیه لود می‌ شوند. قانون سرانگشتی گوگل این است که "وزن صفحه" بیش از 1000 کیلوبایت نباشد. پس باید هنگام طراحی سایت حجم فایل ها و کدهایی که استفاده می کنیم توجه کنیم.

    51. حجم تصاویر را به حداقل برسانید.
    52. مطمئن شوید که سرور وب سایت شما می تواند سرعت مورد نیاز شما را فراهم کند
    53. کش مرورگر را فعال کنید
    54. درخواست های HTTP یا HTTP requests را به حداقل برسانید
    55. از CSS برای افزودن عناصری مانند سایه ها، گوشه های گرد استفاده کنید
    56. اسکریپت ها را در پایین صفحه قرار دهید یا آنها را حذف کنید تا صفحه سریعتر بارگذاری شود.
    57. برای بهبود تجربه کاربری، ابتدا هدر صفحه لود شود
    58. حجم کدها (HTML، CSS، جاوا اسکریپت) را با حذف عناصر غیر ضروری، فضاهای اضافی، اسکریپت ها و ... کم کنید.

- چک لیست سبد خرید سایت های فروشگاهی

طراحی سایت فروشگاهی کمی با طراحی سایت های معرفی محصول و خدمات یا به اصطلاح شرکتی متفاوت است. علاوه بر موارد بالا بخش هایی مانند سبد را نیز باید چک کرد. در ادامه چک لیست سبد خرید را مشاهده می کنید:  

    59. مراحل ثبت نام و ورود از طریق ایجاد حساب جدید یا ورود با حساب شبکه های اجتماعی را کنترل کنید
    60. فیلدهای فرم ثبت نام را به حداقل برسانید
    61. اجازه پرداخت به کاربرران مهمان را بدهید
    62. به کاربران اجازه دهید پیش نمایش رمز عبور را روشن/خاموش کنند
    63. پشتیبانی از پرداخت های دیجیتال مانند کیف پول های دیجیتال، درگاه های پرداخت آنلاین علاوه بر خرید کارت نقدی را کنترل کنید
    64. از ذخیره آدرس، جزئیات کارت و ... پشتیبانی کنید
    65. پشتیبانی از اسکن جزئیات کارت اعتباری با OR کد
    66. مشخص کنید مبالغ به تومان هستند یا ریال 
    67. تمامی محصولات، اندازه ها، قیمت ها در سبد خرید نمایش داده شود
    68. قیمت نهایی محصول با در نظر گرفتن هزینه ارسال و اعمال کد تخفیف  را در صفحه سبد خرید نمایش دهید.
    69. 4 عدد ابتدایی و انتهایی کارت را بصورت پیشنهاد نمایش دهید
    70. نمایش تعداد اقلام اضافه شده به سبد خرید
    71. هنگامی که یک کالا به سبد خرید اضافه می شود، در قالب یک "به سبد اضافه شد" ارائه دهید
    72. انواع گزینه های نحوه ارسال و هزینه هایشان را ارائه دهید
    73. نحوه مرجوعی کالا و بازگشت وجه
    74. پشتیبانی از مراحل خرید بدون ورود تا مرحله پرداخت
    75. گزینه خرید آنلاین و تحویل در فروشگاه را ارائه دهید.
    76. نظرات و امتیاز کاربران را چک کنید
    77. سیستم های «اکنون بخرید، بعدا پرداخت کنید» را برای تقسیم پرداخت ها به اقساط در نظر بگیرید. این گزینه نرخ تبدیل را افزایش می دهد.
    78. پیشنهاد گزینه های حمل و نقل سبز مانند استفاده از کمترین پلاستیک و کاغذ در بسته بندی یا طرح جمع آوری کارتن های ارسال.

بیشتر بخوانید: طراحی سایت ریسپانسیو با طراحی سایت موبایل فرندلی چه تفاوتی دارد؟

- چک لیست بررسی فرم ها

فرم ها در طراحی وب سایت نقش پر رنگی دارند اما باید برای طراحی فرم چند نکته مهم رعایت کنید تا برای کاربران آزار دهنده نباشد. سریعترین راه برای از دست دادن مشتریان این است که خیلی سریع از آنها درخواست پر کردن فرم کنید.

    79. فیلدها را به حداقل برسانید
    80. فرم های تک ستونی طراحی کنید
    81. از متغیرهای متنی در هر فیلد برای درک بهتر استفاده کنید
    82. صفحه کلیدهای متنی و عددی مناسب را برای فیلد ارائه دهید
    83. تصحیح خودکار غلط املایی را فعال کنید
    84. از تکمیل خودکار استفاده کنید
    85. در صورتی که فیلدی به اشتباه پر شده است، با یک اکشنی به کاربر ارائه شود
    86. استفاده از Call To Action های مناسب در فرم ها
    87. از مشخصات کاربری های مختلف استفاده کنید
    88. پس از اتمام به طور خودکار صفحه را به پایین اسکرول کنید یا موارد تکمیل شده را دور از دید قرار دهید
    89. یک نشانگر پیشرفته برای تکمیل مراحل تجارت الکترونیک درج کنید

- چک لیست امنیت سایت

با چک کردن موارد زیر از امنیت سایت خود مطمئن شوید:

    90. از HTTPS و نماد "قفل" آن استفاده کنید
    91. یک هاست یا میزبانی وب امن انتخاب کنید
    92. در صورت لزوم، بیان کنید که اطلاعات (آدرس، کارت اعتباری) محرمانه خواهد بود
    93. قوانین و مقرارت و حریم خصوصی را در سایت ارائه دهید
    94. آیکون های اینماد، سامان دهی و سایر مجوزهای لازم را در سایت ارائه دهید
    95. نحوه تماس و پشتیبانی در جاهای مختلف سایت نمایان باشد
    96. برای امنیت بیشتر، از احراز هویت 2 عاملی یا چند عاملی پشتیبانی کنید
    97. لایه های امنیتی را در بخش های مختلف سایت رعایت کنید