طراحی وب سایت A-mobile-Friendly یکی از مواردی است که تجربه مروردر موبایل را در اولویت قرار می دهد.
این رویکرد در دهه اخیر بسیار مهم شده است. طبق تحقیقات انجام شده توسط Statista، امروزه بیش از نیمی از ترافیک وب سایتی در یک دستگاه تلفن همراه اتفاق می افتد و تقریباً 45٪ از کل خریدهای آنلاین را شامل می شود. با توجه به اینکه تلفنهای هوشمند فقط در ده سال گذشته به ظهور رسیده اند، انتظار می رود که با تعداد افزایش مرورگرها و طراحی ها افزایش یابد.
به همین دلیل وب سایت هایی که موفق به تلاش صمیمانه و استراتژیک برای ارائه یک تجربه تلفن همراه با کیفیت نمی شوند، به شدت از رقبای خود عقب می مانند. برای کمک به شما در جهت ادامه کار، ما این راهنما را برای برخی از نکات و آموزش های رایج در زمینه طراحی وب سایت های مناسب برای موبایل ارائه داده ایم.
7 نکته برتر در زمینه طراحی وب سایت برای موبایل
- از رویکرد همراه اول استفاده کنید
- از ابعاد اندازه توصیه شده برای تلفن همراه استفاده کنید
- برای حالت عمودی بهینه سازی کنید
- منو را به حداقل برسانید
- جمع کردن محتوای دوم
- قسمتهای فرم و ورودی متن را محدود کنید
- استفاده از انگشت شست
نکته 1: از رویکرد همراه اول استفاده کنید
با مروردر وب سایت موبایل که تقریباً از دسک تاپ پیشی گرفته است، طراحان مجبور شده اند از در نظر گرفتن نسخه “اصلی” سایت دسک تاپ دور شوند. به همین دلیل است که رویکرد اولین همراه ،طراحی وب سایت تلفن همراه قبل از نسخه دسک تاپ برای سالها بهترین روش معمول باشد.
با تمرکز بر جهت هنری موبایل، طراحان تشویق می شوند که به موجب محدودیت ها، در تصمیمات طراحی فرمانروایی و تمرکزکنند. نه تنها محدودیت هایی در اندازه وجود دارد، بلکه کاربران تلفن همراه اغلب با یک دست ارتباط برقرار می کنند و برای ورود و ضربه زدن و کشیدن اطلاعات از دسک تاپ دچار مشکلات زیادی می شودند. به عنوان مثال انیمیشن های شناور را در نظر بگیرید که به ورودی موس شما متکی هستند: اگر نسخه دسک تاپ شما بیش از حد به این نوع بازخورد تصویری متکی باشد، برای استفاده درتلفن همراه مشکل ساز خواهد شد.
طراحی همراه اول به این معنی است که برنامه ریزی برای یک صفحه نمایش کوچکتربه مراتب از ساده تر کردن یک طرح پیچیده آسان ترخواهد بود.
در نتیجه، طراحی از طریق تلفن همراه از همان ابتدا بر سادگی و سهولت استفاده تأکید دارد. بخاطر داشته باشید این رویکرد،استفاده از نسخه های دسک تاپ را به کمترین حد ممکن منتفی نمی کند.
همچنین مهم است که چه رسانه هایی ای خود را در تلفن همراه خودآزمایش کنید زیرا ممکن است عکس ها یا فیلم های ساخته شده برای جهت افقی به خوبی برای برنامه پرتره شما کار نکنند. خواندن جزئیات مانند حالات صورت یا عناصر پس زمینه در اندازه های کوچک دشوارتراند. علاوه بر این، اغلب فقط یکبارو در هر بار فقط فضای خالی وجود دارد، و اگر درابتدا یک وب سایت دسک تاپ، دارای تصاویر سنگین باشد، پیمایش در هر یک از تلفن های همراه ممکن است اضافه و طولانی شود.
شاید این مطلب را بپسندید : اهمیت آیکن ها در طراحی وب
نکته 2: از ابعاد اندازه توصیه شده برای تلفن همراه استفاده کنید
در یک دستگاه دستی، فضا نسبت به سایر زمینه های طراحی محدودتر احساس می شود. اما در نظر گرفتن محدودیت های اندازه در آغاز پروژه، بهترین راه برای جلوگیری از درگیری های احتمالی در آینده است.
وضوح صفحه نمایش تلفن همراه بسته به نوع دستگاه متفاوت خواهد بود، اما طبق تحقیقات انجام شده در حال حاضر بیشترین استفاده متعلق به ابعاد 360 × 640 (نسبت ابعاد 9:16) است. Google Analytics می تواند به شما بگوید که کاربران شما از کدام دستگاه خاص استفاده می کنند و شما باید اطمینان حاصل کنید که طراحی وب سایت شما به اندازه کافی پاسخگوی نیازشان است.
این طراحی موبایل بصورت سلسله مراتب تایپی، واضح و دارای دکمه های بزرگ و زمینه های فرم را حفظ می کند.
وقتی صحبت از اندازه قلم برای طراحی موبایل می شود، حداقل آن 16 پیکسل برای کپی بدنه توصیه می شود. این نیز بسته به نوع حروف استفاده شده می تواند متفاوت باشد (بر اساس ساخت آنها، برخی از قلم ها در 16 پیکسل کمتر از بقیه خوانا خواهند بود).
هیچ اندازه استانداردی برای قلم های عنوان وجود ندارد، اما هدف این است که یک سلسله مراتب تایپی روشن از طریق تضاد در اندازه، وزن و سبک ایجاد شود. اما در صورت تردید، به سادگی اندازه های قلم را روی یک دستگاه تلفن همراه برای خود آزمایش کنید.
در این طرح، یک تصویر الهام بخش برای نسخه موبایل برش خورده است.
دراین تصاویر این سوژه تصویراست که برای حفظ وضوح، بزرگی یا کوچکین را تعیین می کند. بخاطر داشته باشید که لازم نیست متناسب با کل تصویر باشید اما می توانید بر روی سوژه بزرگنمایی کرده و عناصر اضافی پس زمینه را مانند مثال بالا برش دهید.
نکته آخر اینکه، اندازه دکمه در طراحی وب سایت مناسب برای موبایل بسیار مهم است، زیرا صفحه نمایش لمسی در انتخاب ورودی کاربر بسیار کمتر از موس و صفحه کلید است. یک مطالعه با تمرکز بر روی کاربران مسن نشان داده است که دکمه های صفحه لمسی برای دسترسی بهینه بین ابعاد 42 تا 72px را توصیه می کند.
نکته 3: جهت گیری عمودی را بهینه کنید
اگرچه وب سایت های تلفن همراه از نظر فنی می توانند در حالت افقی و در حالی که دستگاه به سمت خود روشن است، مورد استفاده قرار بگیرند، اما حالت پرتره آن به طور عمده رایج ترو کارایی بهتری را دارد. بلک بری نگهدارنده های تلفن همراه دو دست را در دهه 2000 رواج داد، اما این امر با ظهور گوشی های هوشمند کاملاً از رده خارج شد و کاربران درحالت پرتره از یک دست استفاده می کنند.
حتی اگر فضای افقی کمتری در وب سایت های موبایل وجود داشته باشد، طراحان می توانند از فضای خالی و حالت پدینگ برای تأکید، نوشتار بزرگتر و ترویج پیمایش استفاده کنند.
باریک بودن حالت عمودی برای طرح های تک ستونی مناسب تر هستند. در این سبک، عناصر سایت به ترتیب از بالا به پایین قرار می گیرند. اگرچه یک تراز بندی مرکزی برای محتوا معمول است، اما توجیه متناوب چپ و راست می تواند علاقه بصری را بروی طرح دو ستونی ایجاد کند. علاوه بر این، عناصر کوچکتر مانند آیکون ها و عکس ها می توانند در یک شبکه ارائه شوند، در حالی که امکانات تصویر می توانند پیمایش عمودی را با کشیدن افقی از بین ببرند.
گذشته از یافتن روشهای خلاقانه برای شکستن طرح تک ستون، روشهایی وجود دارد که می توانید از آن به نفع خود استفاده کنید. از آنجا که برنامه های شبکه های اجتماعی کاربران موبایل را برای دوره های طولانی پیمایش آماده می کنند، طراحان وب سایت می توانند مطالب را با فضای خالی و پدینگ پخش کنند. با این کار محتوا تمیز و قابل خواندن است که از طریق ادامه پیمایش باعث تعامل می شود.
این طرح از مرزهای گرافیکی مورب و چند ستون استفاده می کند تا باعث شود تراز وسط در وسط تصویرکمتر تکرار شود.
طراحی در این بخش برای گروه بندی اطلاعات مشابه نیز مفید است تا کاربر هدف کلی هر بخش را بدون نیاز به خواندن عمیق درک کند. این به ویژه هنگامی مفید تر است که تقریباً 79٪ بازدیدکنندگان صفحه از محتوای وب سایت ها کمتر استفاده می کنندو ترجیح مس دهند از موبایل استفاده کنند. متفاوت بودن زمینه های رنگی به تمایز این بخش ها کمک می کند لازم به ذکر است که این بخش دارای حاشیه های خلاق و شگفت انگیزی است.
شاید این مطلب را بپسندید : حرفه ای بودن در گرافیک
نکته 4: منو را به حداقل برسانید
پیمایش منطقه بسته به تعداد مقصد و گزینه هایی که به کاربر داده می شود می تواند به سرعت پیچیده شود. در حالی که وب سایت های دسک تاپ دارای یک نوار ناوبری با چندین منو اصلی و زیر منو هستند، استفاده از همه این موارد در یک نمادی مثل همبرگر ساده واستاندارد است. در نتیجه، بیشتر عناوین وب سایت تلفن همراه در هنگام استفاده از این موارد کاهش می یابند.
منوی طراحی وب سایت و موبایل برای وبلاگ سفر
برای سبک منوی واقعی، یک روش معمول، استفاده از نوار کناری است که بخشی از صفحه را با گزینه های محدود خود پوشانده است. این باعث می شود که منو بتواند در ابعادی جداگانه از بقیه محتوای صفحه کار کند، در حالی که فضای لازم برای کاربر، برای خارج شدن از منو و بازگشت به صفحه قبلی وجود دارد.
بسته به میزان پیچیده بودن فهرست شما، هر گزینه منو ممکن است شامل گزینه های تو در تو یا یک زیر منو باشد. هنگامی که کاربر بر روی یکی از این زیر منوها کلیک می کند، برای کوتاه نگه داشتن لیست، بهتر است لیست گزینه های جدید جایگزین منوی موجود شود.
فراموش نکنید که نوار پیمایش را بر روی صفحه تعمیر کنید تا کاربر مجبور نباشد برای این کار تا انتها وبالا پیمایش کند.
منوی پیمایش این سایت تلفن همراه ازچندین برگه برای تجزیه لیست گزینه ها استفاده می کند.
برگه ها به کاربر اجازه می دهد تا بدون نیاز به بارگیری، یک صفحه کاملا جدید، از طریق بخش های دیگر محتوا راجابجا کنند.
این روزها بسیاری از طراحان UX در حال جستجو برای راه حل های ناوبری فراتر از ورودی مبتنی بر شیرو اشتراک گذاری هستند .در صورت عدم موفقیت همه موارد دیگر، نماد جستجو در تلفن همراه امری عادی است که به کاربر امکان می دهد موارد خاصی را که به دنبال آن هستند راپیدا کند.
نکته 5: جمع کردن محتوای ثانویه
وب سایت های دسک تاپ اغلب به جای کپی بدنه، مشخصات محصول و سایر مطالب را دارند. اما از آنجا که سایت های موبایل نیاز به اطلاعات کافی دارند، طراحان باید تمام محتوای غیرضروری را حذف یا کوتاه کنند.
جمع شدن محتوا شامل اختیاری کردن توضیحات با نمادی مانند مثلث یا علامت بعلاوه است که محتوای پنهان را گسترش داده یا آشکار می کند. اگرچه پنهان کردن مطالب شما ممکن است چیز بدی به نظر برسد، اما با استفاده از عناوین متقاعد کننده، یک مرور ساده بیشتر از دادن اطلاعات زیاد سودمند است.
این طرح برای گروه بندی توصیف مشتری استفاده می کند.
طراحان باید محتوای جمع شده را برای کپی ردیف پایین در زیر هدر ذخیره کنند. محتوای تکراری را می توان ادغام کرد تا به جای انباشته شدن روی یکدیگر، فضای مشابه را همپوشانی کند. در طرح Artyom Ost که در اینجا به تصویر کشیده شده است، سه عبارت مشتری در زیر عنوان در نسخه دسک تاپ وجود دارد، و در نسخه تلفن همراه طراح آنها را با هم جمع کرده است.
این طراحی به کاربران امکان می دهد محتوای دقیق را تغییرو گسترش دهند.
محتوای اضافی که در طراحی وب سایت مناسب برای موبایل باید کاملاً از آن اجتناب کنید، محتوای بینابینی و پنجره های بازشو است. اگرچه این موارد با همپوشانی مطالب در یک پنجره جداگانه می توانند باعث صرفه جویی در فضا شوند، اما وب سایت هایی که با پنجره های پر سر و صدا پر شده اند نه تنها کارایی ندارند، بلکه توسط گوگل جریمه می شوند.
شاید این مطلب را بپسندید : 15 نکته در زمینه طراحی بنر برای دریافت کلیک های بیشتر
نکته 6: قسمتهای فرم و ورودی متن را محدود کنید
ورود متن باید یکی از بزرگترین موانع دسترسی موبایل باشد، باید زمینه های فرم را تا آنجا که ممکن است به حداقل برسانید.
این طرح به جای فرم های متن باز، از گزینه های مختلف کشویی و رادیویی استفاده می کند.
فرصت های پر کردن خودکار، مانند آدرسها از طریق کد پستی یا ارائه گزینه های از پیش پر شده برای پسوندهای رایج ایمیل، می تواند درد برخی از این تعاملات را برطرف کند. اطلاعات شخصی و ورود کاربر نیز به همین ترتیب از طریق ادغام با سایر نرم افزارهای نمایه مانند اپل، گوگل یا فیس بوک محدود به چند کلیک ساده می شود.
ادغام شخص ثالث با ارائه دهندگان پرداخت مانند پی پل نیز می تواند در خرید صفحات وب سایت های خرید مفید باشد، جایی که گرفتن اطلاعات کارت اعتباری حتی در دسک تاپ نیز می تواند سخت باشد. اگر این گزینه در دسترس نیست، می توانید به کاربران اجازه دهید به عنوان مهمان سریعاً از صندوق خارج شوند و اطلاعات حمل و نقل خود را در اطلاعات صورتحساب خود تکرار کنند.
نکته 7: استفاده ازانگشت شست
طبق تحقیقاتی که در کتاب جوش کلارک آمده، کاربران حداقل برای 75 درصد از کل تعاملات تلفن همراه با انگشت شست خود ارتباط برقرار می کنند. این شامل تمام پیمایش، کلیک کردن، کشیدن انگشت و وارد کردن متن است، بقیه انگشتان دست مشغول پشتیبانی پشت تلفن هستند. بنابراین واضح است که طراحان باید دسترسی به انگشت شست را برای همه تعاملات تلفن همراه در اولویت قرار دهند.
این طراحی بیشتر عناصر تعاملی را در وسط صفحه یا به سمت پایین نگه می دارد.
هنگام ایجاد دکمه ها، طراحان باید از بزرگترین اندازه برای تعاملات مهم استفاده کنند زیرا اگر قسمت های انگشت شست خارج از دکمه قرار گیرند، صفحه لمسی ورودی را ثبت نمی کند.
همانقدر که مکان قرارگیری عناصر تعاملی در صفحه مهم است، معمولاً موبایل از پایین نگه داشته می شود و انگشت شست در وسط قرار دارد. برای دستیابی به عناصر تعاملی در بالا، کاربر باید کل دست خود را تغییر مکان دهد یا از انگشتان دست دوم خود استفاده کند. مطالعات نشان می دهد که منطقه تعامل ایده آل (که با بزرگتر شدن تلفن ها کاهش می یابد) در اطراف ناحیه میانی تحتانی قرار می گیرد.
منطقه مناسب انگشت شست بسته به نوع دستگاه متفاوت خواهد بود، اما در بیشتر قسمت ها وسط پایین صفحه برای تعامل راحت تر است.
در سال های اخیر، بسیاری از طراحان UX مسئولیت موقعیت یابی میله های ناوبری در پایین صفحه را انجام داده اند. اگرچه این دسترسی آسانتر به انگشت شست را می دهد، اما شکستن قراردادهای طراحی که کاربران به آن عادت کرده اند نیز می تواند تجربه ضعیف تری داشته باشد. زمان نشان خواهد داد که کدام موقعیت ایده آل ترین است، اما در عین حال، بهترین روش برای حل این مشکل برای پایگاه کاربری خود، آزمایش هر دو مورد است.
