قطعاً تا به حال اسم طراحی سایت رو شنیدین و میدونین که چطوری انجام میشه، ولی آیا میدونین طراحی وب سایت برای موبایل چیه و چه پروسه‌ای داره؟ ۹۳ درصد از کاربران اینترنت، هر روزه اینترنت رو با تلفن همراه خودشون مرور میکنن. این ۳.۵ میلیارد نفر میتونن به طور بالقوه در هر زمان و مکانی سایت شما رو در موبایل یا تبلت خودشون ببینن؛ بنابراین میشه اینجوری نتیجه گرفت که شما باید تا حد امکان تلاش کنین تا حضور آنلاین خودتون رو در موبایل ها بهینه کنین.
هیچ چیز بدتر از داشتن یک قیف بازاریابی نیست که توی دستگاه‌های غیر دسکتاپ کاملاً بی اثر باشه. برای راهنمایی بهتر شما، توی این مقاله روش‌هایی رو برای طراحی وبسایت برای تلفن همراه و کلاً دستگاه‌های غیر دسکتاپ آوردم. این روش‌ها به شما کمک میکنن تا تجربه کاربر بازدیدکننده‌ها رو ساده و مؤثرتر کنین و تأثیر قیف بازاریابی خودتون رو برای هر نوع دستگاهی به حداکثر برسونین.
۱. از شر نوار ناوبری خودتون خلاص شین
دقت کنین که یک نوار ناوبری موبایل چقدر فضا میتونه اشغال کنه؟ این به این معنیه که باید فضای وب سایت خودتون رو روی موبایل به حداکثر برسونین و از شر هرچیزی که باعث کم شدن این فضا میشه خلاص شین.
آسون‌ترین راه برای انجام این کار اینه که نوار ناوبری رو در تلفن همراه نادیده بگیرین و رهاش کنین. این قدم اول برای طراحی وبسایت برای موبایل هست. در یک لپ‌تاپ یا به طور کلی دسکتاپ، Navbar میتونه فوق العاده مفید عمل کنه. این یک راه ساده برای بازدیدکننده‌ها است که بتونن توی سایت شما چرخی بزنن و به قسمت‌هایی که میخوان برن و چیزایی که میخوان رو پیدا کنن. اما در تلفن همراه، نوار ناوبری شما میتونه یک عالمه فضا رو اشغال کنه. خب جای این فضا میتونین از متن، تصویر یا هر محتوا دیگه‌ای در وب سایت یا صفحات فرود استفاده کنین.
خب حالا ممکنه سوال برای شما پیش بیاد که چجوری بدون نوار ناوبری بازدیدکنندگان بتونن سایت رو مرور کنن و به بخش‌های مختلف برن؟ چند راه در این زمینه وجود داره:
- محبوب‌ترین راه اینه که یه منو همبرگری ترکیب کنین که به شما اجازه میده یک نوار کوچیکتر ولی با همون قابلیت داشته باشین. منو همبرگری به عنوان یک کشو عمل میکنه که از سمت راست یا چپ صفحه شما کشیده میشه به سمت دیگه و آیتم‌های مختلف منو رو در اختیار شما و مخاطبان خودتون قرار میده.
- یا بسته به اندازه صفحات وب خودتون، یک طرح بندی برای صفحات درست کنین که متناسب با انواع مختلف تلفن همراه عمل کنه. این حالت برای مواقعی که وب سایت شما کم محتوا باشه. ولی در مجموع این کار بهترین گزینه برای کسب و کار شما نیست.
۲. عناصر مهم رو در دسترس قرار بدین
به میزان زمانی که روی تلفن‌های هوشمند خودتون صرف میکنین فکر کنین. حاضریم شرط ببندیم اغلب کارها رو با موبایل انجام میدین و همیشه دارین ازش استفاده میکنین؛ وقتی که در اتوبوس یا در حال انتظار در صفی هستین یا شاید الآن که دارین این مقاله رو میخونین! حالا باید از شما بپرسیم که بیشتر چجوری از موبایل استفاده میکنین؟ اگه مثل اکثریت باشین بیشتر از شست دست برای انجام اکثر کارها استفاده میکنین. بر اساس یک مطالعه اخیر توسط Steve Hoober متخصص تجربه کاربر، ۷۵درصد از استفاده کنندگان از موبایل، از شست دست برای تعامل با تلفن‌های همراه خودشون استفاده میکنن. سال‌های پیش شکل هندسی زیر طراحی شد تا به طراحان موبایل دیدی درباره نحوه استفاده کاربران از موبایل و بازدیدکنندگان وب سایت بده.
البته باید حواسمون به این موضوع باشه که طی زمان‌های مختلف هم نحوه استفاده از تلفن‌های هوشمند تغییر میکنه و هم اندازه موبایل‌ها در حال عوض شدن هستن. البته در هر صورت اندازه دست ما فرقی نمیکنه! نحوه نگه داشتن تلفن‌های ما تغییر کردن. به همین ترتیب، Hot spots هم روی صفحه تغییر کرده و با نزدیک شدن به لبه‌های بیرونی صفحه، دقت لمس کمتر شده.
پس باید اینجوری نتیجه گرفت که شما برای طراحی وبسایت برای موبایل ، باید به گونه‌ای محتوا رو تنظیم کنین که تعاملات اولیه در مرکز صفحه اتفاق بیفتن و تعاملات ثانویه و ثالثیه در لبه‌های بالا و پایین صفحه باشن. موقعیت این نواحی به طور مستقیم به سهولت دسترسی برای کاربر مربوط میشه.
3. اندازه فایل‌ها رو بهینه کنین و به حداقل برسونین
شما احتمالاً آگاه هستین که تا چه اندازه بهینه سازی اندازه عکس‌های وب سایت کار مهمیه. اندازه عکس‌ها به شدت در زمان بارگذاری صفحه تأثیر میذارن که اثر آبشاری روی تجربه کاربری و رتبه بندی جستجو صفحات شما داره. این مطلب در تلفن‌های همراه دو برابر بیشتر اهمیت داره. این به این معنیه که اگه صفحه شما به سرعت بارگیری نشه، احتمالاً کاربر به صفحه اجازه نمیده کارش رو به پایان برسونه و از سایت خارج میشه. از یک سایت مثل TinyJPG یا ابزارهایی مثل ImageOptim(فقط Mac) یا Export for Web در فتوشاپ استفاده کنین تا مطمئن بشین که اندازه فایل‌ها رو قبل از آپلود در سایت به حداقل رسوندین. این به حداقل رسوندن میتونه به شما در زمان بارگذاری صفحه سایت کمک کنه و زمان بارگذاری سایت هم یه عامل مهم برای رتبه بندی گوگل است که میتونه سایت شما رو به عرش یا فرش برسونه 🙂
دو ویژگی اولیه وجود داره که بر اندازه فایل تأثیر میذاره:
- کیفیت: کم کردن تنظیمات کیفیت، وضوح تصویر رو کاهش میده و احتمال نمایش Artifact روی تصاویر رو افزایش میده.
- اندازه/وضوح: اندازه واقعی تصویر تأثیر زیادی روی فایل داره. بدیهیه که شما نمیخواین تصاویر رو اونقدر کوچیک کنین که بازدیدکننده‌ها نتونن ببینن. پس قبل از قرار دادن در سایت باید تصاویر رو اصلاح کنین.
۴. شماره تلفن‌ها و آدرس‌ها رو پیوند بدین
بهینه سازی برای تلفن همراه در جهت ساده سازی تجربه بازدیدکننده است. باید برای طراحی وبسایت برای موبایل تا حد امکان این کار رو انجام بدین. به این معنی که شما باید تلاش کنین تا یک کاربر از خرید یا بازدید از سایت شما تجربه خوشایندی به دست بیاره. اگه وب سایت شما وابسته به فروش باشه یا تلفن همراه در قیف بازاریابی شما یک فاکتور مهم تلقی بشه، یکی از مهم‌ترین نکات اینه که تماس گرفتن با خودتون رو برای مشتری راحت کنین.
شماره تلفن
به عنوان یک راه ساده میتونین در قسمت “Contact us” تلفن خودتون رو به عنوان یک لینک قرار بدین. ممکنه تاحالا این تجربه رو کرده باشین که موقع کپی کردن شماره تلفن در یک وبسایت یهویی تمام محتوا اون صفحه رو انتخاب کردین. خب این اتفاق یکم آدم رو عصبی میکنه! یا این که وقتی موفق به کپی کردن شدین و میخواستین شماره تلفن رو وارد کنین، از روی چندتا برنامه رد شدین و حین انجام این کار مشغول کار دیگه‌ای شدین و به طور کل فراموش کردین. این دیگه خیلی وحشتناکه! پس بهتره کاری که گفتم رو انجام بدین و شماره تلفن رو به صورت یک لینک قرار بدین. باور کنین همین یک کار تفاوت بزرگی رو ایجاد میکنه.
آدرس
این کار رو هم میتونین با آدرس خودتون انجام بدین. طوری که وقتی کاربر روی آدرس شما کلیک کنه وارد برنامه نقشه بشه. البته اکثر برنامه‌ها مثل فیسبوک به طور خودکار این تنظیمات رو انجام میدن. شما میتونین آدرس خودتون رو در Google Maps تایپ کنین. بعد پیوند اشتراک گذاری رو کپی کنین تا به وبسایت خودتون پیوند بدین.
همین چیزهای کوچیک هستن که به بازدیدکنندگان کمک میکنن. باعث میشن وقتی که به پیج شما سر میزنن، احساس کنن که چیزی رو از دست نمیدن و مجبور نیستن کار اضافی رو انجام بدن. به عبارت ساده‌تر، اجازه ندین که مرور وبسایت شما تجربه بدی رو به ارمغان بیاره و باعث بشه قیف بازاریابی و فروش شما توی نطفه خفه بشه.
۵. طراحی برای واکنشگرایی
تلفن های همراه قدیمی‌‌‌رو یادتون هست؟ اونها صفحه نمایش کوچکتری نسبت به تلفن‌های امروزی داشتن. در این صفحات اغلب سعی میکردن تصاویر کمتری جا بدن و نسبتاً متن سنگین‌تر بود تا با سرعت پایین مرورگر مبارزه کنن. چون در گذشته شبکه اینترنتی مثل ۳G ،LTE، یا WiFi نبود. در طول این ده سال اخیر، تلفن های همراه به سرعت تغییر پیدا کردن؛ در حال حاضر صفحات بزرگی دارن و همین طور اینترنت بسیار سریع‌تر از گذشته عمل میکنه.
این پیشرفت‌ها و پیشرفت‌های دیگه در زمینه طراحی موبایل، راهی رو برای طراحی واکنشگرایی و سازگاری درست کردن. اگرچه تفاوت‌هایی بین این دو طراحی وجود داره ولی هدف اصلی اونها همچنان یکیه: ایجاد یک طرح وب سایت که به صورت پویا به تغییرات در هر دستگاهی پاسخ میده. یعنی باید طراحی وبسایت برای موبایل به گونه‌ای باشه که وقتی بازدیدکنندگان با هر نوع دستگاهی مشغول بازدید از وبسایت شما هستن به مشکلی برنخورن.
خوشبختانه قالب صفحه وب یا ویرایشگر صفحه فرودی که شما از اون استفاده میکنین، به طور خودکار ورژن صفحه وبسایت شما رو برای موبایل درست میکنه. خب با این کار زحمت شما برای درست کردن این ورژن کم میشه.
چند مورد هست که نیازه ما اونها رو در ذهن داشته باشیم:
اندازه‌های تصویر
اگه تصاویری که برای تولید محتوا استفاده میکنین مهم هستن، پس مطمئن شین تصاویر به وضوح در تلفن‌های همراه قابل مشاهده هستن. تصاویری که ۵۰ درصد عرض در دسکتاپ دارن ممکنه ۵۰ درصد عرض در تلفن همراه رو نشون بدن که خب این خیلی کوچیکه.
طرح بندی/سفارش محتوا
بسته به نحوه سازماندهی عناصر بر روی صفحه و برای دسکتاپ، ممکنه محتوای شما وقتی که روی صفحات موبایل باز بشه، طرح ناخوشایندی رو داشته باشه. پس حتماً چک کنین که همه محتوا در موبایل یا دستگاه‌های دیگه به همون ترتیبی که میخواین قرار گرفته باشه.
انیمیشن‌ها
انیمیشن‌هایی که به خوبی در دسکتاپ عمل میکنن، ممکنه اصلاً در تلفن‌های همراه کار نکنن. پس بررسی کنین که انیمیشن‌ها در نسخه‌های غیر دسکتاپ به مشکلی برنمیخورن.
ویدیو
یادتون میاد مطالب قبلی که گفتم درباره چی بودن؟ این که هرچی فایل سنگین‌تر باشه دیرتر بارگیری میشه و این میتونه باعث بشه تا تجربه تلفن همراه شما رو به شدت کاهش بده. درباه حذف یا پنهان کردن ویدیوها در سایت فکرکنین.
JavaScript
هرچند جاوا اسکریپت یک چیز شگفت انگیزه و جادویی عمل میکنه ولی همیشه در تلفن‌های همراه به درستی عمل نمیکنه. پس حتماً این مورد رو هم بررسی کنین که همه چی طبق روال برنامه ریزی شده کار میکنه.
۶. Popup ها رو غیرفعال کنین
اساساً داشتن Popup و پنجره‌هایی که مداوم در وب هستن و باز میشن، میتونه به شدت از تجربه کاربری خوب جلوگیری کنه و باعث نارضایتی اونها بشه. چون وقتی که یک کاربر روی محتوایی کلیک میکنه دوست داره همون قسمت رو ببینه نه این که به جای دیگه‌ای هدایت بشه.
برای مبارزه با این اتفاق، Google صفحاتی که این کار رو انجام میدن، با کاهش رتبه بندی جستجو جریمه میکنه. پس این پنجره‌های اضافی رو غیرفعال کنین. البته بعضی از این پنجره‌ها مثل “پنجره پیمایش” یا “کلیک کنید” جریمه نمیشن. اگر Popup های شما دارای اهمیت هستن، به اونها محتوا اضافه کنین و بخشی از صفحه قرار بدین. با این کار جلوی جریمه شدن توسط Google رو میگیرین.
۷. فرم‌ها رو برای موبایل بهینه کنین
اگه تا به حال خرید آنلاین انجام داده باشین، قطعاً میدونین که پر کردن این فرم‌ها چقدر کار زمان‌بر و خسته کننده‌ایه. در حالی که تجربه تایپ کردن در موبایل از گذشته تا به امروز حسابی دست خوش تغییرات خوبی بوده، اما همچنان عالی و کامل نیست.
فرم‌های طولانی نیاز به تایپ زیادی دارن. اگه میخواین تأثیر منفی این کار رو در نرخ تبدیل سایت خودتون به حداقل برسونین و طوری کار طراحی وبسایت برای موبایل رو انجام بدین که مو لای درزش نره، باید به همچین چیزهای ساده و به نظر پیش افتاده‌ای هم دقت کنین؛ پس سعی کنین یکی از تغییرات زیر رو در زمینه فرم خودتون ایجاد کنین:
تعداد قسمت‌های فرم رو در صفحه کاهش بدین
این کار خیلی ساده است. تعداد قسمت‌هایی که یک کاربر باید پر کنه رو کاهش بدین. با این حرکت، زحمت اون شخص رو هم کم کردین که میتونه به کاهش اصطکاک بازدیدکننده کمک کنه. البته این همیشه یک گزینه مناسب نیست. چون بالاخره قسمت‌های مختلفی که در یک فرم قرار گرفتن مهم هستن. اما کاهش برخی موارد کمتر ضروری یا ترکیب چند قسمت در یک فرم، شاید بتونه تغییر چشمگیری رو ایجاد کنه.
فرم‌ها رو به چند مرحله تقسیم کنین
تقسیم فرم خود رو به چندین مرحله میتونه به شما کمک کنه نرخ تبدیل رو در تلفن همراه افزایش بدین. به عنوان مثال، اگر شما ۹ فیلد دارین میتونین ۳ فیلد رو در مرحله اول قرار بدین. وقتی یک کاربر این سه فیلد رو پرکنه و دکمه ارسال رو بزنه، به مرحله بعد برای پرکردن فیلدهای دیگه منتقل میشه. این کار باعث میشه تا فرم‌های شما جمع و جورتر و حتی جذاب‌تر از حالت ساده بشن. اما یادتون باشه که آدرس ایمیل رو در مرحله اول قرار بدین. اینجوری بازخورد بهتری رو دریافت میکنین.
۸. استفاده از بخش‌های قابل انعطاف و Accordions
وقتی که محتوا شما تک ستونه باشه، خیلی طول میشکه تا یک بازدیدکننده به انتهای ستون برسه و تمام محتوا رو مطالعه کنه. چون صفحه موبایل مثل دسکتاپ بزرگ و عریض نیست. با این کار رسماً حوصله کاربر رو سر میبرین! یک راه حل ساده برای حل این مشکل، به کار گرفتن یک نوع بخش برای محتوا هست که به عنوان Accordions شناخته شده.
Accordions مخازنی هستن که محتوا رو در خودشون نگه میدارن. در واقع محتوا رو به صورت یک Header یا همون تیتر نشون میدن و هر وقت مخاطب بخواد میتونه روی اون کلیک کنه و بقیه محتوا رو مطالعه کنه.
پس یکی از روش‌های مهم در طراحی وبسایت برای موبایل اینه که از این مخازن استفاده کنین.
امیدواریم این نکات طراحی وبسایت برای موبایل ، به شما بینشی داده باشه که چجوری میتونین تجربه کاربری رو برای افرادی که از وب سایت شما از طریق تلفن های همراه خودشون بازدید میکنن افزایش بدین. اینها مواردی هستن که اغلب نادیده گرفته میشن. میتونیم به شما تضمین بدیم با پیاده سازی این روش‌ها، مخاطبان سایت شما تجربه بهتری رو در وب سایت تجربه کنن.
اگه فکر میکنین این مقاله مفید بوده یا به شخص دیگه‌ای میتونه کمک کنه، پس اون رو به اشتراک بذارین. موفق باشین.
فرم و لیست دیدگاه
هنوز دیدگاهی وجود ندارد.