اصول طراحی وب سایت برای موبایل

آموزش طراحی سایت نسخه موبایل,ایجاد نسخه موبایل سایت,بهینه سازی سایت موبایل

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

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

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

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

سوالاتی که در رابطه با طراحی وب سایت برای موبایل پاسخ خواهیم داد:


1- چگونه وب سایتمان را برای موبایل بهینه کنیم؟
2- اصول سئو کردن وب سایت برای موبایل چگونه است؟
3- بهترین روشهایی که میتوانیم وب سایتی را برای گوشی های موبایل بهینه کنیم چیست؟

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

1. Homepage و Navigation:

آموزش طراحی سایت نسخه موبایل,ایجاد نسخه موبایل سایت,بهینه سازی سایت موبایل

صفحه اصلی می تواند یک فضای تبلیغاتی باشد که به کاربر خوش آمد می گوید. اما باید به کاربران محتوایی که به دنبالش هستند را هم نمایش دهد. صفحه اصلی که بر روی تبدیل کاربر به مشتری تمرکز دارد باید این موارد را رعایت کند: دکمه های فراخوان یا CTAهای دقیق، کلید میانبر یا Shortcut صفحه اصلی، استفاده حداقلی از تبلیغات و مکانیزم های فروش.

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

دکمه های فراخوان یا Call To Action شما هم می توانند کاربر را به مشتری تبدیل کنند و هم می توانند Bounce rate صفحات شما را افزایش دهند. برای طراحی دکمه های فراخوانی که کاربر را به مشتری تبدیل می کند، نوشته ها و طراحی این دکمه ها را بهینه کنید. برای مثال در انتخاب کلمات، رنگ ها، اندازه دکمه، فونت و غیره دقت کنید. یادتان باشد که انتخاب رنگ سایت بسیاااااار مهم است.

تا به حال گم شدن در راه یا یک فروشگاه بزرگ را تجربه کرده اید؟ مسئله ای مشابه می تواند زمانی اتفاق بیفتد که در سایت های موبایلی، منوهای navigation یا location bar وجود نداشته باشند. کاربران موبایلی انتظار دارند با یک لمس کوتاه به صفحه اصلی بازگردند. حالا یا با لمس لوگوی شما یا با کلیک بر روی منوی Navigation. برای آنکه نتیجه بهتری بگیرید، از لوگوی خود به عنوان Shortcut صفحه اصلی استفاده کنید.

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

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

با پاسخ به این سوالات، قرار گرفتن تبلیغات در homepage مشکلی ایجاد نکرده و به تجربه کاربری لطمه ای وارد نمی کند.

2. تجارت و نظرات کاربران:

سئو سایت موبایلی,طراحی سایت موبایلی,طراحی نسخه موبایلی

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

پاسخ این سوال این است که باید به کاربران و بازدیدکنندگان اجازه دهیم به هر شکلی که خودشان می خواهند خرید کنند.

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

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

یکی از بهترین کارهایی که می شود برای سایت موبایلی تجارت الکترونیک انجام داد، ایجاد چند روش برای پرداخت می باشد. در دسترس بودن روش هایی مانند Apple pay، PayPal و Android Pay می تواند نرخ تبدیل ها را بالا برده و استرس کاربران برای وارد کردن اطلاعات کارت اعتباری را کاهش دهد. برای کاربرانی که از این سرویس ها استفاده نمیکنند، می توانید فیلدهای داده را به صورت پیش فرض ذخیره کرده و بارگذاری کنید و به این ترتیب به کاربران برای تکمیل فرآیند خرید کمک نمایید.

آمار و ارقام نشان میدهند که 92% از مصرف کنندگان نظرات کاربران را پیش از خرید محصول یا عقد قرارداد با کمپانی می خوانند. این بدین معناست که نظرات کاربران بخش مهمی از پروسه تصمیم گیری مصرف کنندگان را تشکیل می دهند. بخش نظرات را در وب سایت خود فعال کنید و بعد فیلترهایی برای این نظرات در نظر بگیرید. فیلترهایی شامل “جدیدترین نظرات”، “مثبت ترین نظرات” و “کم ترین امتیازها”.

3. کاربردی بودن سایت:

طراحی نسخه موبایلی سایت,طراحی وب سایت خوب,قوانین طراحی سایت

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

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

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

مواظب باشید که برچسب لینک سایت دسکتاپی را full site یا سایت کامل نزنید. این مسئله باعث می شود بازدیدکنندگان گیج شده و فکر کنند سایت موبایلی شما کامل نیست و بخواهند به سایت کامل یا همان سایت دسکتاپی بروند. تنها کافی است که برچسب لینک را “desktop site” بزنید و عنوان سایت موبایلی را “mobile site” بگذارید.

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

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

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

منابع زیادی وجود دارند که فرم هایی با قابلیت استفاده از تقویم و دیگر تنظیمات را ارائه می دهند. برای مثال می توانید از Google forms، Zamarin Forms و FormHub استفاده کنید.

4. موارد فنی:

آموزش طراحی سایت نسخه موبایل,ایجاد نسخه موبایل سایت,بهینه سازی سایت موبایل

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

  • برای سایت های موبایلی و دسکتاپی، از آنالیتیک استفاده کنید و بر روی تبدیل های صورت گرفته نظارت داشته باشید.
  • به عنوان یک بازدیدکننده سایت خود را ارزیابی کنید و محتوایی که می خواهند را روی سایت بگذارید.
  • سایت موبایلی خود را با دستگاه ها و مرورگرهای متفاوت امتحان کنید و برای این دستگاه ها بهینه کنید.
  • تبلیغات موبایلی باید کاربر را به سایت موبایلی منتقل کنند، نه سایت دسکتاپی.
  • سرعت سایت خود را با استفاده از ابزار Google Speed tool بسنجید.
  • به دنبال اجزا و عناصر Flash باشید و آنها را حذف کنید چرا که بر روی iOS اجرا نمی شوند و در سیستم عامل Android کند هستند.
  • نقشه سایت XML سایت خود را که شامل صفحات موبایلی هستند در گوگل ثبت کنید.

در مرحله آخر هم، سایت خود را با آزمون Google’s Mobile-Friendly Test بسنجید.

منوها را ساده و مختصر کنید

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

فرم ها را کوتاه و شیرین نگه دارید

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

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

زمینه های فرم را ساده کنید

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

چشم بازدید کننده خود را با CTA بگیرید

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

 در طراحی صفحات موبایل ارتباط با ما را آسان کنید

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

2 نظر در مورد مقاله “ اصول طراحی وب سایت برای موبایل ” ثبت شده است
  1. حمید

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


    • محمد نصیری

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


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

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

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