تجربه کاربری بهتر وب سایت در موبایل ها

better-user-experience-in-mobile

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

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

۱- فرم ها در موبایل  ( تعیین نوع فیلد )

طراحی فرم ها در موبایل

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

<input type="email" name="email">
<input type="number" name="number">
<input type="password" name="password">

 Date Picker در فرم

datepicker

اما  با انتخاب کردن  نوع datetime-local میتونید یک فیلد رو تبدیل به Date Picker کنید، و کاربر با فوکوس کردن روی فیلد مورد نظر یک پنل برای انتخاب تاریخ و ساعت کنونی نمایش داده می شود که البته این تاریخ میلادی است و من با هجری کردن تاریخ اندورید هم نتوانستم این تاریخ رو شمسی کنم و شاید دوستان موبایلی بتونن این کارو انجام بدن.در ضمن لازمه بگم که ویندزوفون از این قابلیت پشتیبانی نمیکنه.

<input type="datetime-local" name="date">

 ۲ – امکان اضافه کردن یک متن یا لیست توسط کاربران

contenteditable

فرض کنید که میخواهید یک لیستی را از کاربران دریافت کنید یا وب پلیکیشنی نوشته اید که کاربر قرار است کارهای روزانه خود را به صورت یک لیست وارد کنه، با استفاده از قابلیت contenteditable در html5 می تونید به کاربر کیبورد مجازی گوشی رو نشون بدید و بهش اجازه تایپ بدید، این قابلیت در گوشی های ویندوزفون، آیفون و اندورید تست شده است و شما برای چک کردن متون وارد شده میتونید با   InnerHTML ورودی ها را بررسی و دریافت کنید.

 <ul class="list" contenteditable>
      <li>خرید لباس</li>
      <li>تماس با مدیر بخش تولید </li>
      <li>انجام پروژه حسابداری</li>
 </ul>

 

۳- قرار دادن favicon  های مناسب برای سیستم عامل های مختلف در سایز های متفاوت

شما می تونید برای سیستم عامل های مختلف مثل ویندوزفون که قابلیت livetile داره و ios و اندورید، favicon  های منحصر به فردی طراحی کنید برای این کار می تونید از وب سایت ealfavicongenerator.net استفاده کنید و تنها کافیه که ایکون خودتون رو آپلود کنید و کدی که بهتون میده رو داخل تگ head سایتتون بزارید :

<head>
<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">
<link rel="icon" type="image/png" href="/favicon-192x192.png" sizes="192x192">
<link rel="icon" type="image/png" href="/favicon-160x160.png" sizes="160x160">
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<meta name="msapplication-TileColor" content="#00aba9">
<meta name="msapplication-TileImage" content="/mstile-144x144.png">
</head>

همچنین برای اینکه بدونید برای  هر موبایل چه سایز آیکنی مناسبه ، این پیچ تو گیت هاب میتونه کمکتون کنه.

اما در گوشی های ویندوزفون قابلیتی برای هر وب سایت وجود داره به نام pin to start که میتونید سایت مورد نظر خودتون رو به صفحه اصلی اسکرین اضافه کنید، آیکونی که تو صفحه اصلی قرار میگیره همین آدرسی ست که وارده کرده اید

pin-to-start

۴- Live Title در ویندوزفون

خب همونطور که میدونید ویندوزفون ۸٫۱ قابلیت جدیدی به نام live tile داره که میتونه به صورت زنده اطلاعتی رو از سایتی دریافت کنه و در صفحه home ویندوزفون شما نشون بده،  مثلا میتونید rss بلاگ خودتون رو در قالب یک فایل xml معرفی کنید تا نوشته های بلاگ شما به صورت live title نشون داده بشه ( البته در صورتی که وب سایت مورد نظر توسط کاربر در صفحه home ، پین  شده باشه.)

    <meta name="msapplication-badge"
     content="frequency=60;polling-uri=http://host/ badge.xml">
    <meta name="msapplication-notification"
     content="frequency=30;polling-uri=http://host/ live.xml">

حال با اضافه کردن کد بالا زمانی که کاربری سایت شما در صفحه home ویندوزفون خود Pin کنه ، میتونه rss سایت شما رو به صورت Live Tile ببینه.که البته برای انجام یک کار حرفه ای تر میتونید از ابزار Live title creator خود مایکروسافت استفاده کنید و یا اگه از وردپرس استفاده میکنید، میتونید از  این پلاگین استفاده کنید و همچنین برای کسب اطلاعات بیشتر در مورد نمایش Live Tile میتونید به سایت مایکروسافت بروید.

 

این لیست ممکنه در آینده بیشتر بشه و اگر هم شما نکاتی در نظر دارید که در این لیست نبود، پیغام بدید تا با نام خودتون به این لیست اضافه کنم.

مرسی.