Inputs | ورودیها
ورودیها کنترلهایی در رابطاند که به کاربر اجازه میدهند اطلاعات را به سیستم بسپارد: متن، عدد، رمز، ایمیل، تاریخ، فایل، صدا یا انتخاب از میان گزینهها. برخلاف دکمهای که اقدام را اعلام میکند، ورودی معاملهٔ داده است—کاربر زمان و دقت میدهد تا محصول کاری برایش انجام دهد. کیفیت ورودی مستقیماً روی نرخ تکمیل فرم، خطای داده، دسترسپذیری و اعتماد اثر میگذارد. طراحی ورودی یعنی انتخاب نوع درست کنترل، برچسب روشن، حالتهای بازخورد، و کمینه کردن تلاش، در حالی که معنا برای مرورگر، فناوری کمکی و اعتبارسنجی سمت سرور حفظ شود.
کنترل خالی بهمثابهٔ قرارداد پرسیدن
هر فیلد خالی یک سؤال است. اگر سؤال مبهم باشد، یا بیش از نیاز پرسیده شود، کاربر مردد میشود یا دادهٔ بیکیفیت میدهد. قرارداد خوب روشن میکند چه میخواهید، در چه قالبی، و چرا لازم است—بهویژه برای دادهٔ حساس. ورودی موفق آن است که مسیر پر شدن را کوتاه و اشتباه را گران کند: با مثال، محدودیت معقول، و پیشپر کردن وقتی داده از قبل معلوم است. سادگی اینجا شعار تزئینی نیست؛ کاهش بار شناختی و حرکتی است روی موبایل و دسکتاپ.
ورودی فقط جعبهٔ متن نیست. انتخابگر تاریخ، لغزنده برای محدودهٔ عددی، کلید تغییر وضعیت، رادیو، چکباکس، بارگذاری فایل، و فرمان صوتی همه ورودیاند اگر هدفشان گرفتن داده یا انتخاب باشد. انتخاب کنترل باید با ماهیت داده بخورد: تاریخ آزاد تایپی بدون راهنما خطا میسازد؛ فهرست بسته جایی که گزینه محدود است تحلیل را آسان و اشتباه را کم میکند. اجبار قالب خشک بینالمللی بدون انعطاف، کاربر واقعی را جریمه میکند.
انواع رایج و تناسب با شغل داده
متن آزاد برای نام یا توضیح، رمز با masked بودن و قواعد آشکار، عدد با کیبورد عددی، ایمیل با نوع مناسب و اعتبارسنجی قالب، تلفن با پذیرش فرمتهای رایج، و فایل با محدودیت حجم و نوع—هرکدام انتظارات متفاوتی میسازند. نوع معنایی درست به تکمیل خودکار مرورگر و به فناوری کمکی کمک میکند. فیلد یکبارمصرف یا کد تأیید باید صریحاً از پیشنهاد رمز ذخیرهشده جدا شود تا تداخل خطرناک پیش نیاید.
در فرمهای بلند، افشای تدریجی ورودیهای وابسته صفحه را خلوت نگه میدارد: جزئیات حقوقی فقط اگر «شرکت» انتخاب شود. گروهبندی معنایی—تماس با هم، نشانی با هم—چشم و موتور تکمیل خودکار را هممسیر میکند. ترتیب باید داستان طبیعی بگوید؛ پرسیدن کد پستی قبل از کشور در فرم بینالمللی اصطکاک بیدلیل است.
حالتها: گفتگوی دیداری با کاربر
حالتهای ورودی زبان بازخوردند. فعال میگوید آمادهٔ تعامل است. غیرفعال میگوید الان نمیتوان تغییر داد—و بهتر است دلیلش نزدیک باشد نه فقط خاکستری مرموز. هاور روی اشارهگر آمادگی را زمزمه میکند اما نباید تنها نشانه باشد. فوکوس باید واضح باشد برای صفحهکلید و لمس. خطا قالب یا مقدار غیرمجاز را میگوید و راه اصلاح را نشان میدهد. موفقیت تأیید میکند داده پذیرفته شده، بدون نمایش اغراقآمیز که فرم را شلوغ کند.
بازخورد فوری پس از ترک فیلد معمولاً مهربانتر از سکوت تا ارسال نهایی است، به شرط آنکه وسط تایپ قطع نکند. پیام «نامعتبر» بدون شرح تنبیه است. خطاهای سطح فرم با پیوند به فیلد برای صفحهخوان و برای دیدن چند مشکل همزمان مفیدند. ارسال دوباره باید مقادیر درست را حفظ کند و فقط باقیمانده را برجسته کند. اعتبارسنجی سمت کلاینت تجربه است؛ اعتبارسنجی سمت سرور امنیت و صحت نهایی است—هیچکدام جایگزین دیگری نیست.
برچسب، راهنما و کاهش تلاش
برچسب پایدار مرتبط با کنترل پایهٔ فهم و دسترسپذیری است. متن جاینگهدار جایگزین برچسب نیست؛ با تایپ ناپدید میشود و حافظه را خالی میگذارد. راهنمای کمکی کنار فیلد برای قالب، مثال، یا توضیح حریم خصوصی میآید. کنتراست متن، حاشیه و حالت خطا باید خوانا بماند. هر جا ممکن است گزینهٔ ازپیشپر یا تکمیل خودکار استاندارد را پشتیبانی کنید تا ضربهٔ کلید کم شود—بهویژه برای کاربران با محدودیت حرکتی یا خستگی.
روی موبایل، نوع کیبورد مناسب، اهداف لمسی بزرگ، و پرهیز از پرش مکرر میان انواع کیبورد تفاوت محسوس میسازد. ماسک ورودی اگر با رفتار مکاننما نجنگد مفید است؛ اگر کاربر نتواند رقم وسط را ویرایش کند، ماسک دشمن میشود. آزمون با دادهٔ واقعی—نامهای طولانی پارسی، کدپستی، کارت—فرض زیبایی ماکت را میشکند.
دسترسپذیری فیلد خالی و مسیر صفحهکلید
ورودی دسترسپذیر نام دسترسپذیر دارد، دستورالعمل و خطایش با کنترل مرتبط است، و ترتیب تب با ترتیب دیداری یکی است. گروههای رادیو به نام گروه نیاز دارند. حالت فوکوس هرگز حذف تزئینی نمیشود. اگر خط فقط با رنگ قرمز معلوم شود، بخشی از کاربران آن را از دست میدهند؛ متن و شمایل همراه رنگ لازم است. زمانبندی خطا نباید کاربر صفحهکلیدی را در حلقهٔ اعلام مکرر بیندازد.
ورودی غیوانگلیسی را واقعی بیازمایید: جهت متن، اعداد، و برچسبهای بلند پارسی روی عرض کم. ترجمهٔ تحتاللفظی برچسب انگلیسی اغلب فیلد را مبهم یا شلوغ میکند. در محصولات دو زبانه، طول برچسب و پیام خطا را در هر دو زبان اندازه بگیرید نه فقط در زبان طراحی اولیه.
سیستم طراحی و مرز با فرم و تعامل
اگر هر صفحه ارتفاع، شعاع، رنگ خطا و رفتار اعتبارسنجی خودش را اختراع کند، کاربر هر بار دوباره یاد میگیرد. توکن و الگوی مشترک برای ورودی—حالتها، فاصله برچسب، متن کمک، و دکمهٔ پاککردن—هزینهٔ تصمیم را کم و کیفیت را یکدست میکند. بازبینی باید حالت خالی، پرشده، خطا، غیرفعال و موفقیت را نشان دهد نه فقط فیلد ایدهآل پرشده در ماکت.
ورودی را با کل فرم یکی ندانید: فرم معماری گردآوری و جریان ارسال است؛ ورودی اتم کنترل داده است. همچنین ورودی را با «تعامل» یکی نکنید: تعامل لحظهٔ تبادل کنش و پاسخ است؛ ورودی یکی از کانالهای رایج برای آن تبادل در فرمهاست. تیم بالغ برای هر لایه معیار پذیرش جدا دارد: صحت نوع و حالت کنترل، وضوح ساختار فرم، و کیفیت بازخورد لحظهٔ تعامل.
پیش از انتشار، سناریوهای پذیرش ورودی را روی حداقل یک موبایل و یک دسکتاپ اجرا کنید: مقدار مرزی، فاصله و نیمفاصله پارسی، چسباندن از کلیپبورد، قطع شبکه هنگام ارسال، و فیلد اجباری خالیمانده. ببینید آیا کیبورد درست باز میشود، آیا خطا به فیلد درست میچسبد، و آیا پس از اصلاح، پیام کهنه کاربر را گیج نمیکند. همین آزمون کوتاه بیش از بحث انتزاعی دربارهٔ «زیبایی فیلد» کیفیت را جابهجا میکند. اگر محصول چند زبانه است، همان سناریو را با برچسب و پیام خطای هر زبان تکرار کنید تا شکست خط یا پوشش ناقص متن کمکی غافلگیرتان نکند.
همکاری طراح و توسعهدهنده روی قرارداد ویژگیهایی مثل autocomplete، inputmode و پیام خطای مرتبط، فاصلهٔ ماکت تا رفتار واقعی مرورگر را کم میکند و از غافلگیری در پذیرش جلوگیری میکند. در پایان، ورودیها نقطهایاند که داده وارد محصول میشود؛ هر ابهام آنجا به خطای پاییندست، رهاسازی قیف، یا بار پشتیبانی تبدیل میشود. نوع مناسب انتخاب کنید، برچسب و حالت را کامل بسازید، تلاش را کم کنید، دسترسپذیری را از روز اول در الگو بگذارید، و با دادهٔ واقعی روی دستگاه واقعی بیازمایید. کنترل خالی وقتی خوب طراحی شود دیده نمیشود—فقط کار پر شدن را تمام میکند و اعتماد به پرسیدن محصول را حفظ میکند.
سوالات متداول
کنترلی که به کاربر امکان میدهد داده یا انتخاب—متن، عدد، تاریخ، فایل و مانند آن—را به سیستم بدهد.
برچسب روشن، نوع متناسب با داده، حداقل تلاش با پیشپر یا تکمیل خودکار، بازخورد حالتها، و دسترسپذیری صفحهکلید و کنتراست.
فعال، غیرفعال، هاور، فوکوس، خطا و موفقیت؛ هر کدام وضعیت تعامل یا اعتبار داده را به کاربر میرسانند.
چون با شروع تایپ ناپدید میشود، برای مرور پایدار نمیماند و اغلب برای فناوری کمکی برچسب واقعی محسوب نمیشود.
ورودی اتم کنترل داده است؛ فرم ساختار و جریان گردآوری چند فیلد تا ارسال است. فرم خوب از ورودیهای خوب ساخته میشود اما تصمیمهای اضافهتری دارد.