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

مضوعات اصلی ذکر شده در این صفحه

 

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

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

 

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

 

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

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

 

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

 

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

 

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

 

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

-در یک دستگاه دستی، فضا نسبت به هر زمینه طراحی دیگری محدودتر است. اما در نظر گرفتن محدودیت های اندازه در شروع پروژه بهترین راه برای جلوگیری از تضادهای بعدی است.رزولوشن صفحه نمایش موبایل بسته به دستگاه متفاوت است، اما طبق تحقیقات انجام شده ، در حال حاضر رایج ترین مورد استفاده 360×640 (نسبت تصویر 9:16) است. گوگل آنالیتیکس می‌تواند به شما بگوید که کاربران شما کدام دستگاه‌های خاص را ترجیح می‌دهند، و باید مطمئن شوید که طراحی وب‌سایت شما به اندازه کافی پاسخگو باشد تا تغییرات را در خود جای دهد.وقتی صحبت از اندازه فونت برای طراحی سایت موبایل فرندلی می شود، حداقل 16 پیکسل برای کپی بدنه توصیه می شود. این همچنین بسته به نوع حروف مورد استفاده می تواند متفاوت باشد (بر اساس ساختار آنها، برخی از فونت ها در 16 پیکسل کمتر از بقیه خوانا خواهند بود).

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

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

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

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

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

 

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

 

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

 

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

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

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

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

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

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

 

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

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

 

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

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

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

 

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

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

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

 

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

 

نکته 7: طراحی سایت موبایل فرندلی  به معنای دوستدار انگشت شست است

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

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

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

 

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد.

9 + 4 =