تفاوت طراحی وبسایت برای موبایل و کامپیوتر میزی در چیست؟

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

سازماندهی محتوا

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

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

برای همین روی موبایل محتوا رو به صورت عمودی درمیارن.

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

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

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

فرم ها

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

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

متن قابل پیش بینی

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

کوچیک کردن فیلدها

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

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

فهرست ها

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

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

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

تفاوت طراحی وبسایت برای موبایل و کامپیوتر میزی