طراحی سایت یار حرفه ای

12 قانون طراحی سایت برای دستگاه های تلفن همراه

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

1. قانون سازگاری

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

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

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

همه اینها هنگام تهیه نسخه تطبیقی مورد توجه قرار می گیرد. علاوه بر این ، وجود نسخه موبایل سایت باعث افزایش موقعیت منبع در شبکه های جستجو می شود که این امر بر تعداد بازدید از سایت و بر این اساس ، بر تعداد مشتریان بالقوه تأثیر می گذارد. نسخه تطبیقی وب سایت IDBI به این شکل است :

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

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

2. قانون اندازه های بزرگ

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

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

همین امر برای سایر عناصر - اشکال ، تصاویر ، برچسب ها و سایر بلوک ها نیز صدق می کند. اگر عنصر توجه را جلب نکند ، کلیک کردن ناخوشایند است (به عنوان مثال کاربر "از دست می رود" و به صفحه دیگری می رود) ، احتمال اینکه مشتری سایت را ببندد و به سراغ رقبا برود ، زیاد است.

توصیه هایی برای اندازه عناصر برای کلیک: حداقل اندازه 26 پیکسل است. اپل استفاده از 44x44 px را توصیه می کند.

3. قانون تایپوگرافی بزرگ

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

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

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

4. قانون هیچ چیز دیگری

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

نسخه دسک تاپ

نسخه موبایل

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

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

این روش مطمئناً به سرمایه گذاری زیادی نیاز دارد ، اما تنوع در عملکرد ، قابلیت اطلاع رسانی به کاربر و در دسترس بودن مداوم برنامه برای کاربر می تواند تمام هزینه ها را با نرخ تبدیل بالا جبران کند.

5. قانون محتوا در یک ستون

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

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

6. قانون بدون پنجره های بازشو و ابزارک

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

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

اگر بدون پنجره های بازشو نمی توانید کار کنید ، بهتر است آنها را با اندازه دستگاه تطبیق دهید:

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

7. قانون جزئیات تماس موجود

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

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

به عنوان مثال ، در وب سایت ما ، نماد تلفن کاربر را مستقیماً به برقراری تماس از طریق برنامه موجود در دستگاه هدایت می کند:

8. مثال شبکه های اجتماعی

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

9. مثال فرم های کوتاه

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

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

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

به این ترتیب طراحان بانک Tinkoff فرم دریافت کارت اعتباری را تهیه کردند:

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

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

10. قانون فضا

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

نسخه دسک تاپ

نسخه موبایل

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

11. قانون طراحی عناصر ناوبری

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

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

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

12. قانون مخاطبان هدف

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

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

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

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