We already have filled at least one web form to signup to a website. but there are some small tips than can make forms more usable and can make benefit for the business.

1. ‫وب‬ ‫های‬ ‫فرم‬ ‫کاربری‬ ‫تجربه‬ ‫بهبود‬
‫وب‬ ‫صفحات‬ ‫های‬ ‫المان‬ ‫ترین‬ ‫ساده‬ ‫به‬ ‫تر‬ ‫دقیق‬ ‫نگاهی‬

2. ‫داریم؟‬ ‫فرم‬ ‫این‬ ‫به‬ ‫نیاز‬ ‫اصال‬ ‫ما‬ ‫آیا‬
•‫بهتر‬ ‫فرم‬ ،‫کمتر‬ ‫فیلد‬
•‫حریم‬ ‫حفظ‬‫فرمها‬ ‫در‬ ‫خصوصی‬
(‫درخواست‬ ‫حذف‬‫موبایل‬=‫کاهش‬bounce rate)
•‫مقاله‬:‫دکمه‬300‫دالری‬ ‫میلیون‬!
Article Link: bit.ly/300button
Back to basics

3. ‫کنه؟‬ ‫پر‬ ‫رو‬ ‫فرم‬ ‫باید‬ ‫کاربر‬ ‫چرا‬
•‫کنید‬ ‫پیدا‬ ‫عضویت‬ ‫برای‬ ‫بهتری‬ ‫دلیل‬(‫تقویت‬UX writing)

4. ‫فرم‬ ‫یک‬ ‫سازنده‬ ‫عناصر‬
Email
(text box)
Your Email will be your username
mymail@gmail.com
•‫متن‬ ‫جهت‬(text align)
•‫زبان‬(Direction)
•‫اندازه‬(width)
•‫کنترل‬ ‫نام‬(textbox1)
•HTML5Type attribute
•‫فوکوس‬ ‫جابجایی‬(Autofocus)
•‫فارسی‬ ‫اعداد‬/‫انگلیسی‬
Link: NNgroup: bit.ly/nnforms

5. ‫فرم‬ ‫یک‬ ‫سازنده‬ ‫عناصر‬:textbox
•‫متن‬ ‫جهت‬(text align)
•‫زبان‬(Direction)
•‫اندازه‬(width)
•‫کنترل‬ ‫نام‬(textbox1)
•HTML5Type attribute
•‫فوکوس‬ ‫جابجایی‬(Autofocus)
•‫فارسی‬ ‫اعداد‬/‫انگلیسی‬Input types link: bit.ly/html5types

6. ‫فرم‬ ‫یک‬ ‫سازنده‬ ‫عناصر‬:textbox
•‫متن‬ ‫جهت‬(text align)
•‫زبان‬(Direction)
•‫اندازه‬(width)
•‫کنترل‬ ‫نام‬(textbox1)
•HTML5Type attribute
•‫فوکوس‬ ‫جابجایی‬(Autofocus)
•‫فارسی‬ ‫اعداد‬/‫انگلیسی‬

7. ‫فرم‬ ‫یک‬ ‫سازنده‬ ‫عناصر‬:Button
•‫دکمه‬ ‫استایل‬(‫رنگ‬ ‫پر‬)
•‫دکمه‬ ‫اندازه‬
•‫فرم‬ ‫یک‬ ‫در‬ ‫دکمه‬ ‫چند‬
•‫دکمه‬ ‫نام‬=Action
•‫لینک‬ ‫و‬ ‫دکمه‬ ‫های‬ ‫تفاوت‬
Submit Submit
0912
Enter Phone:
Save Or this one
0912
Enter Phone:

8. ‫فرم‬ ‫یک‬ ‫سازنده‬ ‫عناصر‬:Button
•‫دکمه‬ ‫استایل‬(‫رنگ‬ ‫پر‬)
•‫دکمه‬ ‫اندازه‬
•‫فرم‬ ‫یک‬ ‫در‬ ‫دکمه‬ ‫چند‬
•‫دکمه‬ ‫نام‬=Action
•‫لینک‬ ‫و‬ ‫دکمه‬ ‫های‬ ‫تفاوت‬
Button Forgot password

9. ‫فرم‬ ‫یک‬ ‫سازنده‬ ‫عناصر‬:Captcha
•‫پیچیده‬ ‫حد‬ ‫از‬ ‫بیش‬
•‫کامپلیت‬ ‫اتو‬ ‫کپچای‬!
•‫کاربراتون‬ ‫سن‬ ‫به‬ ‫توجه‬
•‫یابان‬‫توان‬ ‫به‬ ‫توجه‬

10. ‫فرم‬ ‫یک‬ ‫سازنده‬ ‫عناصر‬:‫بازشو‬ ‫منوی‬‫یا‬‫رادیویی؟‬ ‫دکمه‬
•‫ها‬ ‫گزینه‬ ‫تعداد‬(‫از‬ ‫بیش‬4‫گزینه‬)
•‫پیشفرض‬ ‫گزینه‬ ‫وجود‬
•‫ها‬ ‫گزینه‬ ‫همه‬ ‫عمدی‬ ‫نمایش‬
•‫همزمان‬ ‫چشمی‬ ‫مقایسه‬

11. ‫فرم‬ ‫یک‬ ‫سازنده‬ ‫عناصر‬:‫بازشو‬ ‫منوی‬‫یا‬‫رادیویی؟‬ ‫دکمه‬
•‫ها‬ ‫گزینه‬ ‫تعداد‬(‫از‬ ‫بیش‬4‫گزینه‬)
•‫پیشفرض‬ ‫گزینه‬ ‫وجود‬
•‫ها‬ ‫گزینه‬ ‫همه‬ ‫عمدی‬ ‫نمایش‬
•‫همزمان‬ ‫چشمی‬ ‫مقایسه‬

12. •‫منو‬ ‫در‬ ‫جستجو‬(‫کمبوباکس‬)
•‫منو‬ ‫های‬ ‫گزینه‬ ‫بندی‬ ‫دسته‬
•‫توسط‬ ‫دایره‬ ‫اندازه‬ ‫تغییر‬CSS
•‫روی‬ ‫کلیک‬ ‫امکان‬label
•‫استایل‬ ‫تغییر‬label‫با‬‫تغییر‬ ‫و‬ ‫هاور‬
‫موس‬ ‫گر‬‫اشاره‬
‫فرم‬ ‫یک‬ ‫سازنده‬ ‫عناصر‬:‫بازشو‬ ‫منوی‬‫یا‬‫رادیویی؟‬ ‫دکمه‬

13. •‫منو‬ ‫در‬ ‫جستجو‬(‫کمبوباکس‬)
•‫منو‬ ‫های‬ ‫گزینه‬ ‫بندی‬ ‫دسته‬
•‫توسط‬ ‫دایره‬ ‫اندازه‬ ‫تغییر‬CSS
•‫روی‬ ‫کلیک‬ ‫امکان‬label
•‫استایل‬ ‫تغییر‬label‫با‬‫تغییر‬ ‫و‬ ‫هاور‬
‫موس‬ ‫گر‬‫اشاره‬
‫فرم‬ ‫یک‬ ‫سازنده‬ ‫عناصر‬:‫بازشو‬ ‫منوی‬‫یا‬‫رادیویی؟‬ ‫دکمه‬

14. ‫یک‬ ‫سازنده‬ ‫عناصر‬‫فرم‬:‫پسورد‬ ‫باکس‬
•‫هست؟‬ ‫پسورد‬ ‫گرفتن‬ ‫به‬ ‫نیازی‬ ‫اصال‬
•‫پسورد‬ ‫نمایش‬ ‫امکان‬
•‫پسورد‬ ‫مجدد‬ ‫تایپ‬!!
•‫انگشت‬ ‫اثر‬ ‫از‬ ‫استفاده‬
•‫کاراکتر؟‬ ‫چند‬(‫کد‬ ‫پین‬)

15. ‫پیشرفت‬ ‫نوار‬
•‫پیشرفت‬ ‫نوار‬ ‫از‬ ‫استفاده‬
•‫باقیمانده‬ ‫راه‬ ‫میزان‬ ‫و‬ ‫کنونی‬ ‫وضع‬ ‫نمایش‬

16. ‫پیشرفت‬ ‫نوار‬:‫فرم‬ ‫کردن‬ ‫تکه‬ ‫تکه‬
•‫الگین‬ ‫صفحه‬ ‫در‬(‫حتی‬)!
•‫آنالین‬ ‫های‬ ‫آزمون‬ ‫سواالت‬ ‫صفحه‬
•‫ها‬ ‫فروشگاه‬ ‫حساب‬ ‫تسویه‬ ‫صفحه‬ ‫در‬

17. ‫پیشرفت‬ ‫نوار‬
•‫چپ؟‬ ‫به‬ ‫راست‬ ‫پیشرفت؛‬ ‫نوار‬ ‫جهت‬
ganjoor.net

18. ‫پیشرفت‬ ‫نوار‬
•‫بر‬‫پیش‬ ‫نوار‬ ‫در‬ ‫رفتن‬ ‫جلو‬ ‫و‬ ‫عقب‬ ‫هایی‬ ‫دکمه‬(‫باکس‬ ‫کست‬ ،‫یوتیوب‬ ‫در‬)

19. ‫فرم‬ ‫طراحی‬ ‫اولیه‬ ‫اصول‬
•‫کیبورد‬ ‫با‬ ‫فرم‬ ‫هدایت‬(tab index)
•‫دیتابیس‬ ‫سمت‬ ،‫سرور‬ ‫سمت‬ ،‫کالینت‬ ‫سمت‬ ‫اعتبارسنجی‬
•‫ستونه‬ ‫تک‬ ‫ترجیحا‬
•‫متد‬Get‫یا‬Post
•‫فرم‬ ‫اتومات‬ ‫کردن‬ ‫پر‬

20. ‫فرم‬ ‫چیدمان‬ ‫اصول‬
•‫ها‬ ‫لیبل‬ ‫قرارگیری‬ ‫محل‬

21. ‫فرم‬ ‫چیدمان‬ ‫اصول‬
•‫متن‬ ‫جعبهء‬ ‫باالی‬ ‫های‬ ‫لیبل‬ ‫در‬ ‫چشم‬ ‫حرکت‬ ‫کاهش‬
Google research team article: bit.ly/formLabels

22. ‫وب‬ ‫های‬ ‫فرم‬ ‫در‬ ‫خطا‬ ‫نمایش‬
•‫انسان‬ ‫عادی‬ ‫زبان‬ ‫به‬ ‫خطا‬ ‫متن‬ ‫نگارش‬
•‫خطا‬ ‫نمایش‬ ‫هنگام‬ ‫رنگ‬ ‫کور‬ ‫افراد‬ ‫گرفتن‬ ‫نظر‬ ‫در‬
•‫آیکون‬ ‫و‬ ‫عالمت‬ ‫مثبت‬ ‫اثر‬
‫خانوادگی‬ ‫نام‬ ‫و‬ ‫نام‬
‫را‬ ‫خود‬ ‫نام‬ ‫لطفا‬‫حداکثر‬ ‫در‬24‫کاراکتر‬‫نمایید‬ ‫وارد‬

23. ‫وب‬ ‫های‬ ‫فرم‬ ‫در‬ ‫خطا‬ ‫نمایش‬
•‫نکنید‬ ‫اعتبارسنجی‬ ‫آنرا‬ ،‫فیلد‬ ‫شدن‬ ‫پر‬ ‫از‬ ‫قبل‬(lost focus)
‫ایمیل‬:
‫نیست‬ ‫صحیح‬ ‫ایمیل‬.
hossein@yah|

24. ‫کاربری‬ ‫تجربه‬ ‫تکرارشونده‬ ‫فرایند‬

25. ‫شما‬ ‫توجه‬ ‫از‬ ‫تشکر‬ ‫با‬
Twitter.com/macromediax
Linkedin.com/in/Hossein-Sharafi
interaction-design.org/Hossein-Sharafi