آموزش ترفندها و راهکارها

31 توصیه برای بهبود صفحه فرود (لندینگ پیج) در موبایل (قسمت دوم)

31 توصیه برای بهبود صفحه فرود (لندینگ پیج) در موبایل
نوشته شده توسط محمد رضایی یزدی

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

توصیه 6: امکان "خرید برای بعد" را حتما لحاظ کنید

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

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

کوکی های زماندار

این کوکی ها برای مدت زمانی که شما از یک وبسایت بازدید می کنید اعتبار دارند و به محض آنکه از وبسایت بیرون بیایید یا پس از مدت زمان خاصی منقضی می شوند.

کوکی های پایدار

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

کوکی های زماندار و پایدار

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

توصیه 7: لندینگ پیج خود را طوری طراحی کنید که دسترسی به بخش های مختلف آن با انگشت شصت آسان تر باشد

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

نوع قرار گرفتن انگشت کاربران هنگام کار با موبایل

همانطور که در شکل مشخص است اکثر کاربران هنگام کار با موبایل انگشت شصت دست راست شان را روی صفحه نمایشگر قرار می دهند. بر اساس تحقیق مذکور 40 درصد از کاربران هنگام کار با موبایل شان عملا هیچ اطلاعاتی را وارد نمی کنند. در آزمایشی که استیو هوبر (Steve Hoober) روی 1333 نفر از کاربران موبایل به عنوان نمونه انجام داد مشخص شد که 49 درصد از آنها عادت دارند یک دستی با موبایل شان کار کنند. شکل زیر محدوده استفاده از انگشت شصت را در گوشی های آیفون طی دهه گذشته نشان می دهد.

محدوده استفاده از انگشت شصت را در گوشی های آیفون طی دهه گذشته

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

توصیه 8: تجربه کاربری را مد نظر داشته باشید

با ابزاری همچون Mobile Phone Emulator رابط کاربری لندینگ پیج موبایلی تان را تست کنید. شما می توانید علاوه بر لندینگ پیج صفحات دیگر وبسایت موبایلی تان را چه در حالت تخت (لندسکیپ) و چه قائم (پورتریت) از لحاظ دسترسی مناسب به تمام بخش ها تست کنید. همچنین امکان شبیه سازی برندهای مختلف گوشی و ابعاد صفحه نمایشگر آنها نیز وجود دارد. بدین ترتیب می توانید بببینید لندینگ پیج تان عملا در گوشی های مختلف چطور به نظر می رسد. رابط کاربری Mobile Phone Emulator چیزی شبیه به شکل زیر است:

رابط کاربری اپلیکیشن Mobile Phone Emulator

عمل به توصیه های Mozilla Developer Network می تواند باعث بهبود تجربه کاربری و دسترسی ها در لندینگ پیج شما شود. این توصیه ها به تفکیک حوزه عبارتند از:
– رنگ، پادنمایی (کانترست) رنگ ها در لندینگ پیج شما باید مطابق استانداردهای WCAG 2.0 AA level  باشند.
– قابل رویت بودن، از تکنیک پنهان سازی محتوا بیش از حد استفاده نکنید و اطمینان حاصل کنید که محتوایی که نباید نشان داده شود (محتوای نامرئی) عملا نشان داده نمی شود.
– تمرکز، تمام المان هایی که کاربر می تواند با آنها تعامل فعال داشته باشد همچون دکمه، لینک، فیلدهای یک فرم و از این قبیل باید به صورت پیش فرض قابلیت تمرکز داشته باشند. توضیح اینکه قابلیت تمرکز به معنای انتقال کنترل از یک آیتم قابل تعامل به آیتم دیگر است. در رایانه شما می توانید با دکمه Tab کنترل را از یک آیتم به آیتم دیگر منتقل کنید. بدین ترتیب دیگر نیازی به حرکت نشانگر موس به آیتم دیگر برای انتقال کنترل به آن نخواهید داشت.
– توضیح نوشتاری، اگر المانی در لندینگ پیج شما وجود دارد که نیاز به توضیح نوشتاری دارد حتما این توضیح را برای آن لحاظ کنید. این به خصوص در لندینگ پیج های موبایلی کاربرد دارد.
– مدیریت وضعیت، برای کنترل های دیگر به غیر از کنترل های استاندارد همچون تیک خور (چک باکس) و دکمه رادیویی تغییر وضعیت کنترل را از طریق صفحه اینترنتی ARIA States مدیریت کنید.

چند توصیه دیگر

استفاده کنید: استفاده از HTML5، Jquery و تصاویر با فرمت JPG و GIF در لندینگ پیج های موبایلی توصیه می شود.
استفاده نکنید: فریم ها، فایل های فلش، پلاگین های قدیمی و قابلیت بزرگ نمایی و کوچک نمایی (زوم) با نزدیک کردن یا دور کردن دو انگشت از هم روی صفحه نمایشگر چیزهایی هستند که باید حتی الامکان از آنها حذر کنید.

توصیه 9: تغییر کیبورد با توجه به نوع فیلدهای یک فرم

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

تغییر کیبورد با توجه به نوع فیلد

 برای استفاده از کیبوردهای سفارشی شده در لندینگ پیج موبایلی تان می توانید از کدهای HTML5 type استفاده کنید:

کد HTML5 برای استفاده از کیبوردهای سفارشی

در مقاله بعدی به مبحث دوم در بهبود لندینگ پیج های موبایلی یعنی پیام رسانی خواهیم پرداخت. با ما باشید!

منبع: وبسایت klientboost

31 توصیه برای بهبود صفحه فرود (لندینگ پیج) در موبایل (قسمت اول)

عضویت خبرنامه
برای عضویت در خبرنامه ایران اپس ایمیل خود را وارد کنید تا از پیشنهادهای ما با خبر باشید
ساخته شده توسطARForms

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

به این مطلب امتیاز دهید

31 توصیه برای بهبود صفحه فرود (لندینگ پیج) در موبایل (قسمت دوم) - 8

8

امتیاز کل

User Rating: 5 ( 1 votes)

یک نظر

نظر بدهید