اصول طراحی

در بخش اول، نحوه ساخت یک فرم اولیه را یاد گرفتید. این بخش در مورد بهترین شیوه ها است. در این ماژول، با تجربه کاربری (UX)، و اینکه چرا یک رابط کاربری (UI) به خوبی پیاده سازی شده می تواند تفاوت بزرگی ایجاد کند، بیاموزید.

ایجاد رابط های کاربر پسند

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

برچسب ها

آیا به خاطر دارید که عنصر <label> برای چیست؟ یک برچسب یک کنترل فرم را توصیف می کند. یک برچسب قابل مشاهده و به خوبی نوشته شده به کاربر کمک می کند تا هدف کنترل فرم را درک کند.

از یک برچسب برای هر کنترل فرم استفاده کنید

آیا می خواهید یک کنترل فرم جدید به فرم خود اضافه کنید؟ با افزودن برچسب برای فیلد جدید شروع کنید. به این ترتیب، اضافه کردن آن را فراموش نکنید.

ابتدا اضافه کردن برچسب‌ها به شما کمک می‌کند تا روی اهداف فرم تمرکز کنید – به چه داده‌هایی در اینجا نیاز دارم؟ پس از مشخص شدن این موضوع، می توانید روی کمک به کاربر در وارد کردن داده ها و تکمیل فرم تمرکز کنید.

عبارت برچسب

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

<label for="email">Enter your email address</label>

یا می توانید آن را اینگونه توصیف کنید:

<label for="email">Email address</label>

کدام توصیف را انتخاب می کنید؟

برای مثال، عبارت «آدرس ایمیل» ترجیح داده می‌شود، زیرا برچسب‌های کوتاه آسان‌تر اسکن می‌شوند، به هم ریختگی بصری را کاهش می‌دهند و به کاربران کمک می‌کنند سریع‌تر بفهمند چه داده‌هایی مورد نیاز است.

موقعیت برچسب

با CSS ، می توانید یک برچسب را در بالا، پایین، چپ و راست یک کنترل فرم قرار دهید. کجا آن را قرار می دهید؟

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

طراحی فرم ها

طراحی فرم خوب می تواند به میزان قابل توجهی نرخ رهاسازی فرم را کاهش دهد . با استفاده از عنصر و نوع ورودی مناسب به کاربران کمک کنید تا داده ها را وارد کنند. برای ارائه بهترین UX، از مناسب ترین عنصر و نوع ورودی برای مورد استفاده خود استفاده کنید. اگر کاربر باید چندین خط متن را پر کند، از عنصر <textarea> استفاده کنید. در مواردی که آنها باید شرایط و ضوابط سایت شما را بپذیرند، از <input type="checkbox"> استفاده کنید.

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

به کاربران در پیمایش فرم ها کمک کنید

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

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

به کاربران در تعامل با فرم ها کمک کنید

برای جلوگیری از ضربه ها و کلیک های تصادفی و کمک به کاربران در تعامل با فرم شما، دکمه های خود را به اندازه کافی بزرگ کنید. اندازه هدف ضربه زدن توصیه شده برای یک دکمه حداقل 48 پیکسل است. همچنین باید با استفاده از ویژگی margin CSS فاصله کافی بین کنترل‌های فرم اضافه کنید تا از تعاملات تصادفی جلوگیری کنید.

اندازه پیش‌فرض کنترل‌های فرم خیلی کوچک است که واقعاً قابل استفاده نباشد. شما باید اندازه را با استفاده از padding و تغییر font-size پیش فرض افزایش دهید.

شما می توانید اندازه های مختلفی را برای دستگاه های اشاره گر مختلف، به عنوان مثال، ماوس، با استفاده از ویژگی pointer CSS تعریف کنید.

// pointer device, for example, a mouse
@media (pointer: fine) {
  input[type="checkbox"] {
    width: 15px;
    height: 15px;
  }
}

// pointer device of limited accuracy, for example, a touch-based device
@media (pointer: coarse) {
  input[type="checkbox"] {
    width: 30px;
    height: 30px;
  }
}

درباره ویژگی رسانه pointer CSS بیشتر بدانید.

خطاها را در جایی که اتفاق می‌افتند نشان دهید

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

برای کاربران روشن کنید که چه داده هایی را وارد کنند

مطمئن شوید که کاربران نحوه وارد کردن داده های معتبر را می دانند. آیا آنها باید حداقل هشت کاراکتر را برای رمز عبور وارد کنند؟ به آنها بگو.

<label for="password">Password (required)</label>
<input required minlength="8" type="password" id="password" name="password" aria-describedby="password-minlength">
<span id="password-minlength">Enter at least eight characters</span>

برای کاربران روشن کنید که کدام فیلدها مورد نیاز است

<label for="name">Name (required)</label>
<input name="name" id="name" required>

اگر یک فیلد اجباری است، آن را آشکار کنید! Anatomy of Accessible Forms جایگزین هایی را برای نشان دادن فیلدهای مورد نیاز توضیح می دهد. اگر بیشتر فیلدهای یک فرم مورد نیاز است، بهتر است فیلدهای اختیاری را نشان دهید .

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

درک خود را بررسی کنید

دانش خود را در طراحی فرم ها تست کنید

منابع

• ایجاد فرم های شگفت انگیز
• بهترین روش ها برای طراحی فرم موبایل
• موسسه بایمرد: تحقیقات UX تجارت الکترونیک
• من را مجبور به فکر کردن نکن