در مقاله بهترین شیوه های طراحی فرم به شما نکات مهم ux – ui که در طراحی فرم همیشه باید رعایت کنید به ساده ترین شیوه توضیح می‌دهیم.
فرم ها برای بسیاری از افراد غیرقابل دسترسی هستند. مطمئن شوید که هر فیلد فرم دارای یک <label> است.
از متغیرهایی به عنوان برچسب اجتناب کنید
استفاده از نگهدارنده مکان به عنوان برچسب باری را بر حافظه کوتاه مدت وارد می کند.
به محض اینکه کاربر شروع به تایپ می کند، برچسب ناپدید می شود و کاربر باید متن ورودی را پاک کند تا برچسب مکان نگهدار دوباره نمایش داده شود.
مکان‌گردان‌ها وقتی خیلی روشن یا تاریک هستند، مشکلات بیشتری ایجاد می‌کنند.
هنگامی که خیلی تاریک است، مکان نگهدار ممکن است با ورودی پر شده اشتباه گرفته شود. وقتی خیلی روشن باشد، برخی از کاربران ممکن است مکان نگهدار را نبینند.
برچسب ها را کوتاه نگه دارید
متن های معرفی کوتاه باشه.
تا حد امکان از برچسب های طولانی خودداری کنید، بنابراین فرم ها به راحتی قابل خواندن و اسکن هستند.
(منظور از برچسب: متن های بالای باکس ها که معرفی میکنن چی توی اون قسمت باید بنویسید؛ و برای چیه.)
طول و ساختار میدان را با ورودی مورد نظر مطابقت دهید.
طول فیلد، دامنه پاسخ را فراهم می کند. از این برای فیلدهایی استفاده کنید که دارای تعداد کاراکتر تعریف شده مانند شماره تلفن، کد پستی و غیره هستند.
فیلدهای فرم باید شبیه فیلدهای فرم باشند
خلاقیت اغلب به نتایج نامطلوبی در هنگام طراحی فرم ها منجر می شود.
ایده های به ظاهر نوآورانه حتی می توانند بزرگ ترین سازمان های جهان را مجذوب خود کنند و قابلیت استفاده را برای میلیون ها، اگر نگوییم میلیاردها نفر کاهش دهند.
گوگل بی سر و صدا فیلدهای متن طراحی متریال خود را در سال 2017 پس از اینکه متوجه شد بسیاری از کاربران نمی دانستند که می توانند با ورودی تعامل داشته باشند، تغییر داد.
وقتی نوبت به فیلدهای ورودی می رسد، به قراردادهای طراحی استاندارد پایبند باشید.
اگر تصمیم دارید چرخ را دوباره اختراع کنید، مطمئن شوید که تست قابلیت استفاده کامل را انجام دهید.
فیلدهای فرم را از سایر elements متمایز کنی. یک فیلد فرم باید عملکرد خود را به صورت بصری ارتباط دهد.
اطمینان حاصل کنید که تفاوت کافی بین سایر عناصر UI اضافه کنید، بنابراین کاربران نیازی به حدس زدن ندارند.
فرم ها باید یک ستون باشند.
اسکن فرم های تک ستونی راحت تر است و با نمایشگرهای موبایل سازگاری بیشتری دارد. چندین ستون می تواند کاربر را تحت فشار قرار دهد و باعث شود که فیلدها به طور تصادفی رد شوند.
مانند بسیاری از بهترین روش ها، استثناهایی برای این قانون وجود دارد (مانند مورد بعدی بهترین شیوه های طراحث فرم شماره ۸ که براتون در پایین ارسال میکنم).
اطمینان حاصل کنید که برای تعیین بهترین ارائه، زمینه ای را که طراحی می کنید همیشه در نظر داشته باشید.
اون استثنایی که ازش حرف زدم در مطلب بعدی میبینید.
اون استثنایی که ازش حرف زدیم اینه
ابتدا تصویر رو ببینید و بعد متن را بخوانید:
فیلدهایی که به طور منطقی با هم همخوانی دارند باید درون خط باشند.
رو هم گزاشتن – انباشتن فیلدهای مرتبط مانند نام، آدرس و اطلاعات پرداخت باعث ایجاد اصطکاک غیر ضروری می شود و می تواند جریان کاربر را از بین ببرد.
فیلدهای غیر ضروری را حذف کنید.
فیلدهای اختیاری را حذف کنید و به راه های دیگری برای جمع آوری داده فکر کنید.
همیشه از خود بپرسید که آیا می توان سؤال را استنباط کرد، به تعویق انداخت یا کاملاً کنار گذاشت.
دکمه های اکشن را مختص کار کنید.
متن دکمه ارسال باید عملکردی را که فراخوانی می کند به طور واضح و مختصر توصیف کند.
⚠️ |• کاربر هرگز نباید در مورد آنچه که پس از فشار دادن اتفاق می افتد سردرگم شود.
ایراد سمت چپی در چیست؟ در فاصله نادرست:
برچسب ها را با ورودی های آنها گروه بندی کنید
برچسب ها را با ورودی مربوطه ارائه دهید تا برای کاربران مشخص باشد که کدام قسمت را پر می کنند.
خطاها معمولاً زمانی رخ می‌دهند که کاربر صفحه را بالا و پایین می‌کند و ارتباط نادرستی ایجاد می‌کند.
از تمام کلاهک ها خودداری کنید بین موارد جمله و حروف عنوان یک موضوع سبک است، اما همه حروف کلاه هرگز ایده خوبی نیستند.
خواندن، اسکن کردن همه حروف‌ها سخت است و فقط ناپسند به نظر می‌رسد.
چک باکس ها و رادیوها را به صورت عمودی ارائه دهید.
اسکن چک باکس و گزینه های رادیویی زمانی که به صورت عمودی ارائه می شوند آسان تر است.
با این حال، ارائه گزینه‌ها با گرافیک مرتبط می‌تواند بُعد اضافی به طراحی اضافه کند که نیاز به ارائه عمودی را نفی می‌کند.
نمایش تمام گزینه های انتخاب در صورت < 6
قرار دادن گزینه‌ها در یک انتخابگر کشویی، انتخاب‌ها را پنهان می‌کند و برای انتخاب یک گزینه به دو کلیک نیاز دارد. هنگامی که بیش از 5 گزینه وجود دارد از یک انتخابگر کشویی استفاده کنید و هنگامی که بیش از 25 گزینه وجود دارد جستجو را در فهرست کشویی قرار دهید.
با این حال، استفاده از انتخابگر کشویی برای کمتر از 6 گزینه، در صورتی که فضا محدود است، مانند شرایط خاص ویرایش درون خطی، اشکالی ندارد.
نمایش خطاها به صورت خطی
سعی کنید تا حد امکان با وضوح کامل و مختصر از بروز خطا جلوگیری کنید.
هنگامی که کاربر خطایی را مرتکب می شود، محل وقوع خطا را به کاربر نشان دهید، دلیل آن را ارائه دهید و نحوه رفع آن را در میان بگذارید.
گروه بندی رشته های مرتبط گروه های منطقی ایجاد کنید تا کاربر بتواند آنچه را که در فرم درخواست می شود سریعتر تفسیر کند و درخواست ها را به صورت دسته ای مدیریت کند.
جدا کردن اقدامات اولیه از ثانویه
برای جلوگیری از اشتباه، عمل اصلی فرم مانند ارسال را برجسته تر از گزینه های ثانویه کنید و همیشه از خود بپرسید که آیا عمل ثانویه حتی مورد نیاز است یا خیر!
نشانه ای از پیشرفت را برای فرم های چند مرحله ای بگنجانید فرم‌های چند مرحله‌ای، با نام مستعار
طراحان در قسمت فرم، باید پیشرفت را نشان دهند تا کاربران بداند کجا هستند و چه چیزی در راه است.
در مقابل مدال ها مقاومت کنید فعل و انفعالاتی که به چند حالت نیاز دارند می توانند باعث خطاهای کاربر شوند. به جای آن، ویرایش درون خطی را در یک مدال در نظر بگیرید.
جهت مطالعه آموزش های رایگان دیگر به وبلاگ اول باش بپیوندید.
سیاوش احمدی هستم، فارغ التحصیل مقطع کارشناسی مهندسی نرم افزار و مدیر وبسایت اول باش. از سال 98 تمرکز خود را بر روی مباحث روز سئو و بهینه سازی سایت قرار داده و پس از کسب تجربه و دانش ارزشمند تصمیم گرفتم تا ثمره آن را با دیگران به اشتراک بگذارم.
همکاری با وبسایت هایی مانند لپتاپیفای ، نیناکالا ، ریگا و... به من آموخته است که هرچه بیشتر دانش خود را عرضه کنی اشتیاق بالاتری برای یادگیری خواهی داشت.
اول باش مرجعی بسیار حرفه‌ای برای دوستاران به طراحی ساخته شده است، تا در یک فضای بسیار منحصر به فرد بتوانیم بهترین طرح های گرافیکی را در اختیارتان قرار دهیم، همچنین در راستای کامل بودن سایت به شما لپ تاپ های مناسب کار های گرافیکی و قیمت مناسب معرفی می‌کنیم تا شروع برتر شما از اول باش باشد.
© کليه حقوق محصولات و محتوای اين سایت متعلق به اول باش است و هر گونه کپی برداری از محتوا و محصولات سایت پیگرد قانونی دارد.
