۷ نکته برتر برای طراحی وب سایت سازگار با موبایل

۷ نکته برتر برای طراحی وب سایت سازگار با موبایل

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

 این رویکرد در دهه اخیر بسیار مهم شده است. بر اساس تحقیقات Statista، بیش از نیمی از کل ترافیک وب سایت در حال حاضر در دستگاه تلفن همراه رخ می دهد و تقریباً ۴۵٪ از کل خریدهای آنلاین را شامل می شود. با توجه به اینکه گوشی‌های هوشمند تنها در ده سال گذشته تولید شده‌اند، انتظار می‌رود که این اعداد تنها زمانی افزایش پیدا کنند که مرور وب‌سایت‌های تلفن همراه حتی ریشه‌دارتر می‌شود و طراحی‌ها شهودی‌تر می‌شوند.

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

۷ نکته برتر طراحی وب سایت سازگار با موبایل

–

از رویکرد موبایل اول استفاده کنید

از ابعاد توصیه شده برای موبایل استفاده کنید

برای حالت پرتره بهینه سازی کنید

منو را به حداقل برسانید

جمع کردن محتوای ثانویه

فیلدهای فرم و ورودی متن را محدود کنید

Mobile-friendly به معنای دوستدار انگشت شست است

نکته ۱: از رویکرد اول موبایل استفاده کنید

–

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

 با متمرکز کردن جهت هنری حول تجربه تلفن همراه، طراحان تشویق می‌شوند تا بر اساس محدودیت‌ها در تصمیم‌گیری‌های طراحی حکومت کنند. نه تنها محدودیت‌هایی در اندازه وجود دارد، بلکه کاربران تلفن همراه اغلب با یک دست تعامل دارند و ورودی فراتر از ضربه زدن و کشیدن انگشت، دست و پا گیرتر از روی دسکتاپ است. به عنوان مثال انیمیشن های شناور را در نظر بگیرید که به ورودی ماوس متکی هستند: اگر نسخه دسکتاپ شما به شدت به این نوع بازخورد بصری متکی باشد، بعداً برای موبایل مشکل ساز خواهد شد.

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

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

نکته ۲: از ابعاد توصیه شده برای موبایل استفاده کنید

–

در یک دستگاه دستی، فضا نسبت به هر زمینه طراحی دیگری محدودتر است. اما در نظر گرفتن محدودیت های اندازه در شروع پروژه بهترین راه برای جلوگیری از تضادهای بعدی است.

 رزولوشن صفحه نمایش موبایل بسته به دستگاه متفاوت است، اما طبق تحقیقات انجام شده توسط statcounter، در حال حاضر بیشترین استفاده از آن ۳۶۰×۶۴۰ (نسبت تصویر ۹:۱۶) است. گوگل آنالیتیکس می‌تواند به شما بگوید که کاربران شما کدام دستگاه‌های خاص را ترجیح می‌دهند، و باید مطمئن شوید که طراحی وب‌سایت شما به اندازه کافی پاسخگو باشد تا تغییرات را در خود جای دهد.

وقتی صحبت از اندازه فونت برای طراحی موبایل می شود، حداقل ۱۶ پیکسل برای کپی بدنه توصیه می شود. این نیز بسته به نوع حروف مورد استفاده می تواند متفاوت باشد (بر اساس ساختار آنها، برخی از فونت ها در ۱۶px کمتر از بقیه خوانا خواهند بود).

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

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

 آخرین اما نه کم اهمیت، اندازه دکمه در طراحی وب سایت سازگار با موبایل بسیار مهم است، با توجه به اینکه صفحات لمسی نسبت به ماوس و صفحه کلید در دریافت ورودی کاربر بسیار کمتر قابل اعتماد هستند. یک مطالعه با تمرکز بر روی کاربران مسن، دکمه های صفحه نمایش لمسی بین ۴۲ تا ۷۲ پیکسل را برای دسترسی بهینه توصیه می کند.

نکته ۳: برای جهت گیری پرتره بهینه سازی کنید

–

اگرچه وب‌سایت‌های تلفن همراه از نظر فنی می‌توانند در حالت افقی با چرخاندن دستگاه استفاده شوند، حالت عمودی بسیار رایج‌تر است. بلک بری در دهه ۲۰۰۰ نگه داشتن تلفن همراه با دو دست را رایج کرد، اما با ظهور گوشی های هوشمند این امر کاملاً کنار گذاشته شد و کاربران به حالت پرتره با یک دست علاقه نشان دادند.

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

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

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

طراحی در بخش ها نیز برای گروه بندی اطلاعات مشابه مفید است تا کاربر هدف کلی هر بخش را بدون نیاز به مطالعه عمیق درک کند. این به ویژه زمانی مفید است که در نظر بگیرید که تقریباً ۷۹٪ از بازدیدکنندگان صفحه فقط محتوای وب سایت را بررسی می کنند. پس‌زمینه‌های رنگی متفاوت به تمایز این بخش‌ها کمک می‌کند و حاشیه‌های بخش خلاق، احساس جعبه‌ای را که این بخش‌ها ترویج می‌کنند، مختل می‌کند.

نکته ۴: منو را به حداقل برسانید

–

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

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

 بسته به اینکه منوی شما چقدر پیچیده است، هر گزینه منو ممکن است دارای گزینه های تو در تو یا یک زیر منو باشد. هنگامی که کاربر روی یکی از این زیر منوها کلیک می کند، بهتر است فهرست جدید گزینه ها جایگزین منوی موجود شود تا لیست کوتاه بماند.

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

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

 بسیاری از طراحان UX این روزها همچنین در حال بررسی راه‌حل‌های ناوبری فراتر از ورودی‌های مبتنی بر ضربه هستند – کش رفتن افقی و/یا عمودی رایج‌ترین آنها است. هنگامی که همه چیز با شکست مواجه می شود، نماد جستجوی مفید در تلفن همراه معمول است تا به کاربر اجازه دهد چیزهای خاصی را که به دنبال آن است بیابد.

نکته ۵: محتوای ثانویه را جمع کنید

–

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

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

طراحان باید محتوای در حال جمع شدن را برای کپی ردیف پایین‌تر در زیر هدر رزرو کنند. محتوای تکراری را می توان با هم ادغام کرد تا فضای یکسانی را همپوشانی کند نه اینکه روی هم چیده شود.

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

نکته ۶: فیلدهای فرم و ورودی متن را محدود کنید

–

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

فرصت‌های تکمیل خودکار، مانند برداشتن بیشتر یک آدرس از کد پستی یا ارائه گزینه‌های از پیش پر شده برای پسوندهای ایمیل رایج، می‌تواند درد برخی از این تعاملات را کاهش دهد. اطلاعات شخصی و ورود به سیستم کاربر نیز می‌تواند از طریق ادغام با سایر نرم‌افزارهای مبتنی بر نمایه مانند اپل، گوگل یا فیسبوک با چند کلیک ساده شود.

 ادغام شخص ثالث با ارائه دهندگان پرداخت مانند PayPal همچنین می تواند در خرید صفحات برای وب سایت های خرید مفید باشد، جایی که جستجوی جزئیات کارت اعتباری می تواند حتی در دسکتاپ سخت باشد. اگر این گزینه در دسترس نیست، می‌توانید به کاربران اجازه دهید به‌عنوان مهمان سریعاً تسویه‌حساب کنند و اطلاعات حمل و نقل خود را در اطلاعات صورت‌حساب خود تکرار کنند.

نکته ۷: Mobile-friendly به معنای دوستدار انگشت شست است

–

بر اساس تحقیقاتی که در کتاب جاش کلارک طراحی برای لمس گنجانده شده است، کاربران در حداقل ۷۵ درصد از تمام تعاملات تلفن همراه با انگشت شست خود تعامل دارند. این شامل تمام اسکرول کردن، کلیک کردن، کشیدن انگشت و وارد کردن متن می شود، در حالی که بقیه انگشتان مشغول پشتیبانی از پشت تلفن هستند. این را نیز در نظر بگیرید که در بسیاری از شرایط، کاربران هنگام انجام کارهای دیگر، گوشی خود را با دست کمتر غالب خود مرور می کنند. بنابراین واضح است که طراحان باید دسترسی انگشت شست را برای تمام تعاملات تلفن همراه در اولویت قرار دهند.

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

 مکان عناصر تعاملی در صفحه به همان اندازه مهم است. معمولاً یک دستگاه تلفن همراه از انتهای پایینی با انگشت شست در وسط نگه داشته می شود. برای رسیدن به عناصر تعاملی در بالا، کاربر باید کل دست خود را تغییر مکان دهد یا از انگشتان دست دوم خود استفاده کند. مطالعات نشان می‌دهد که منطقه تعامل ایده‌آل (که باعث کوچک‌تر شدن گوشی‌های بزرگتر می‌شود) در اطراف ناحیه میانی پایین است.

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

طراحی وب سایت سازگار با موبایل را در آغوش بگیرید

–

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

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

منبع