چک لیست طراحی Date Picker

انتخابگر تاریخ( Date Picker) یک کادر ورود اطلاعات است که به شما امکان انتخاب تاریخ از طریق ورود متنی و یا تعامل با یک صفحه تقویم را می‌دهد. با وجود اینکه یک جزء نسبتاً ساده است، اما یکی از عناصر متداول در طراحی‌هاست. وقتی کادر تاریخ تولد را پر می‌کنیم و یا قرار ملاقات آنلاین با پزشک یا رزرو مرخصی ترتیب می‌دهیم، با انتخاب کنندگان تاریخ تعامل می‌کنیم. طراحی خوب انتخابگر تاریخ موجب می‌شود؛ کاربران تاریخ را با چند کلیک ساده انتخاب کنند.

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

قسمت ورودی عددی

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

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

از آنجا که در برخی از پیاده سازی‌ها ، هنگامی که کاربر در کادر مورد نظر کلیک می‌کند، جداکننده‌ها ناپدید می‌شود؛ در این زمان برخی از کاربران ساختار مورد نظر را -خارج از دید، خارج از ذهن - فراموش می‌کنند. به همین دلیل وقتی کاربر قسمت ورودی را فعال می کند، ساختار پیشنهادی تاریخ مورد انتظار، باید قابل مشاهده باشد.

• جداکننده را مخفی نکنید.

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

• طراحی با قابلیت حرکت یکپارچه بین روز _ ماه _ سال

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

• آیا باید ورودی‌ها به صورت پیش فرض از قبل پر شده باشند؟

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

• آیا ورودی کادر‌ها -زمانی که کاربر تاریخ ها را انتخاب کرده اما صفحه را مجددا بارگیری می کند- باید پایدار باشد؟

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

صفحه تقویم

• آیا در همه کادرهای ورودی تاریخ، باید صفحه تقویم را قرار دهیم؟

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

• تاریخ فعلی را مشخص کنید.

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

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

• فقط تاریخ‌هایی را نمایش دهید که قابل انتخاب هستند.

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

• با ارائه اطلاعات مفید فرآیند تصمیم گیری را ساده کنید

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

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

• آیا باید روزهای هفته را در تقویم نشان دهیم؟

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

• آیا تقویم به صورت خودکار باز می شود؟

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

نکات اشاره شده در این مقاله می توانید در هدایت کاربر و رساندن آن به لحظه اعتماد( moment of truth) به سرویس و نهایتا ارتقا کسب و کار بسیار کمک کننده باشد.

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

منبع:

https://uxplanet.org/date-picker-design-best-practices-41bd522f10a5