ݺߣ

ݺߣShare a Scribd company logo

کاربردپذیری در فرم‌های تحت وب

•Download as PPTX, PDF•
•
Hossein sharafi
Hossein sharafi

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 of 25
Download to read offline
‫وب‬ ‫های‬ ‫فرم‬ ‫کاربری‬ ‫تجربه‬ ‫بهبود‬ ‫وب‬ ‫صفحات‬ ‫های‬ ‫المان‬ ‫ترین‬ ‫ساده‬ ‫به‬ ‫تر‬ ‫دقیق‬ ‫نگاهی‬
‫داریم؟‬ ‫فرم‬ ‫این‬ ‫به‬ ‫نیاز‬ ‫اصال‬ ‫ما‬ ‫آیا‬ •‫بهتر‬ ‫فرم‬ ،‫کمتر‬ ‫فیلد‬ •‫حریم‬ ‫حفظ‬‫فرمها‬ ‫در‬ ‫خصوصی‬ (‫درخواست‬ ‫حذف‬‫موبایل‬=‫کاهش‬bounce rate) •‫مقاله‬:‫دکمه‬300‫دالری‬ ‫میلیون‬! Article Link: bit.ly/300button Back to basics
‫کنه؟‬ ‫پر‬ ‫رو‬ ‫فرم‬ ‫باید‬ ‫کاربر‬ ‫چرا‬ •‫کنید‬ ‫پیدا‬ ‫عضویت‬ ‫برای‬ ‫بهتری‬ ‫دلیل‬(‫تقویت‬UX writing)
‫فرم‬ ‫یک‬ ‫سازنده‬ ‫عناصر‬ 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
‫فرم‬ ‫یک‬ ‫سازنده‬ ‫عناصر‬:textbox •‫متن‬ ‫جهت‬(text align) •‫زبان‬(Direction) •‫اندازه‬(width) •‫کنترل‬ ‫نام‬(textbox1) •HTML5Type attribute •‫فوکوس‬ ‫جابجایی‬(Autofocus) •‫فارسی‬ ‫اعداد‬/‫انگلیسی‬Input types link: bit.ly/html5types
‫فرم‬ ‫یک‬ ‫سازنده‬ ‫عناصر‬:textbox •‫متن‬ ‫جهت‬(text align) •‫زبان‬(Direction) •‫اندازه‬(width) •‫کنترل‬ ‫نام‬(textbox1) •HTML5Type attribute •‫فوکوس‬ ‫جابجایی‬(Autofocus) •‫فارسی‬ ‫اعداد‬/‫انگلیسی‬
‫فرم‬ ‫یک‬ ‫سازنده‬ ‫عناصر‬:Button •‫دکمه‬ ‫استایل‬(‫رنگ‬ ‫پر‬) •‫دکمه‬ ‫اندازه‬ •‫فرم‬ ‫یک‬ ‫در‬ ‫دکمه‬ ‫چند‬ •‫دکمه‬ ‫نام‬=Action •‫لینک‬ ‫و‬ ‫دکمه‬ ‫های‬ ‫تفاوت‬ Submit Submit 0912 Enter Phone: Save Or this one 0912 Enter Phone:
‫فرم‬ ‫یک‬ ‫سازنده‬ ‫عناصر‬:Button •‫دکمه‬ ‫استایل‬(‫رنگ‬ ‫پر‬) •‫دکمه‬ ‫اندازه‬ •‫فرم‬ ‫یک‬ ‫در‬ ‫دکمه‬ ‫چند‬ •‫دکمه‬ ‫نام‬=Action •‫لینک‬ ‫و‬ ‫دکمه‬ ‫های‬ ‫تفاوت‬ Button Forgot password
‫فرم‬ ‫یک‬ ‫سازنده‬ ‫عناصر‬:Captcha •‫پیچیده‬ ‫حد‬ ‫از‬ ‫بیش‬ •‫کامپلیت‬ ‫اتو‬ ‫کپچای‬! •‫کاربراتون‬ ‫سن‬ ‫به‬ ‫توجه‬ •‫یابان‬‫توان‬ ‫به‬ ‫توجه‬
‫فرم‬ ‫یک‬ ‫سازنده‬ ‫عناصر‬:‫بازشو‬ ‫منوی‬‫یا‬‫رادیویی؟‬ ‫دکمه‬ •‫ها‬ ‫گزینه‬ ‫تعداد‬(‫از‬ ‫بیش‬4‫گزینه‬) •‫پیشفرض‬ ‫گزینه‬ ‫وجود‬ •‫ها‬ ‫گزینه‬ ‫همه‬ ‫عمدی‬ ‫نمایش‬ •‫همزمان‬ ‫چشمی‬ ‫مقایسه‬
‫فرم‬ ‫یک‬ ‫سازنده‬ ‫عناصر‬:‫بازشو‬ ‫منوی‬‫یا‬‫رادیویی؟‬ ‫دکمه‬ •‫ها‬ ‫گزینه‬ ‫تعداد‬(‫از‬ ‫بیش‬4‫گزینه‬) •‫پیشفرض‬ ‫گزینه‬ ‫وجود‬ •‫ها‬ ‫گزینه‬ ‫همه‬ ‫عمدی‬ ‫نمایش‬ •‫همزمان‬ ‫چشمی‬ ‫مقایسه‬
•‫منو‬ ‫در‬ ‫جستجو‬(‫کمبوباکس‬) •‫منو‬ ‫های‬ ‫گزینه‬ ‫بندی‬ ‫دسته‬ •‫توسط‬ ‫دایره‬ ‫اندازه‬ ‫تغییر‬CSS •‫روی‬ ‫کلیک‬ ‫امکان‬label •‫استایل‬ ‫تغییر‬label‫با‬‫تغییر‬ ‫و‬ ‫هاور‬ ‫موس‬ ‫گر‬‫اشاره‬ ‫فرم‬ ‫یک‬ ‫سازنده‬ ‫عناصر‬:‫بازشو‬ ‫منوی‬‫یا‬‫رادیویی؟‬ ‫دکمه‬
•‫منو‬ ‫در‬ ‫جستجو‬(‫کمبوباکس‬) •‫منو‬ ‫های‬ ‫گزینه‬ ‫بندی‬ ‫دسته‬ •‫توسط‬ ‫دایره‬ ‫اندازه‬ ‫تغییر‬CSS •‫روی‬ ‫کلیک‬ ‫امکان‬label •‫استایل‬ ‫تغییر‬label‫با‬‫تغییر‬ ‫و‬ ‫هاور‬ ‫موس‬ ‫گر‬‫اشاره‬ ‫فرم‬ ‫یک‬ ‫سازنده‬ ‫عناصر‬:‫بازشو‬ ‫منوی‬‫یا‬‫رادیویی؟‬ ‫دکمه‬
‫یک‬ ‫سازنده‬ ‫عناصر‬‫فرم‬:‫پسورد‬ ‫باکس‬ •‫هست؟‬ ‫پسورد‬ ‫گرفتن‬ ‫به‬ ‫نیازی‬ ‫اصال‬ •‫پسورد‬ ‫نمایش‬ ‫امکان‬ •‫پسورد‬ ‫مجدد‬ ‫تایپ‬!! •‫انگشت‬ ‫اثر‬ ‫از‬ ‫استفاده‬ •‫کاراکتر؟‬ ‫چند‬(‫کد‬ ‫پین‬)
‫پیشرفت‬ ‫نوار‬ •‫پیشرفت‬ ‫نوار‬ ‫از‬ ‫استفاده‬ •‫باقیمانده‬ ‫راه‬ ‫میزان‬ ‫و‬ ‫کنونی‬ ‫وضع‬ ‫نمایش‬
‫پیشرفت‬ ‫نوار‬:‫فرم‬ ‫کردن‬ ‫تکه‬ ‫تکه‬ •‫الگین‬ ‫صفحه‬ ‫در‬(‫حتی‬)! •‫آنالین‬ ‫های‬ ‫آزمون‬ ‫سواالت‬ ‫صفحه‬ •‫ها‬ ‫فروشگاه‬ ‫حساب‬ ‫تسویه‬ ‫صفحه‬ ‫در‬
‫پیشرفت‬ ‫نوار‬ •‫چپ؟‬ ‫به‬ ‫راست‬ ‫پیشرفت؛‬ ‫نوار‬ ‫جهت‬ ganjoor.net
‫پیشرفت‬ ‫نوار‬ •‫بر‬‫پیش‬ ‫نوار‬ ‫در‬ ‫رفتن‬ ‫جلو‬ ‫و‬ ‫عقب‬ ‫هایی‬ ‫دکمه‬(‫باکس‬ ‫کست‬ ،‫یوتیوب‬ ‫در‬)
‫فرم‬ ‫طراحی‬ ‫اولیه‬ ‫اصول‬ •‫کیبورد‬ ‫با‬ ‫فرم‬ ‫هدایت‬(tab index) •‫دیتابیس‬ ‫سمت‬ ،‫سرور‬ ‫سمت‬ ،‫کالینت‬ ‫سمت‬ ‫اعتبارسنجی‬ •‫ستونه‬ ‫تک‬ ‫ترجیحا‬ •‫متد‬Get‫یا‬Post •‫فرم‬ ‫اتومات‬ ‫کردن‬ ‫پر‬
‫فرم‬ ‫چیدمان‬ ‫اصول‬ •‫ها‬ ‫لیبل‬ ‫قرارگیری‬ ‫محل‬
‫فرم‬ ‫چیدمان‬ ‫اصول‬ •‫متن‬ ‫جعبهء‬ ‫باالی‬ ‫های‬ ‫لیبل‬ ‫در‬ ‫چشم‬ ‫حرکت‬ ‫کاهش‬ Google research team article: bit.ly/formLabels
‫وب‬ ‫های‬ ‫فرم‬ ‫در‬ ‫خطا‬ ‫نمایش‬ •‫انسان‬ ‫عادی‬ ‫زبان‬ ‫به‬ ‫خطا‬ ‫متن‬ ‫نگارش‬ •‫خطا‬ ‫نمایش‬ ‫هنگام‬ ‫رنگ‬ ‫کور‬ ‫افراد‬ ‫گرفتن‬ ‫نظر‬ ‫در‬ •‫آیکون‬ ‫و‬ ‫عالمت‬ ‫مثبت‬ ‫اثر‬ ‫خانوادگی‬ ‫نام‬ ‫و‬ ‫نام‬ ‫را‬ ‫خود‬ ‫نام‬ ‫لطفا‬‫حداکثر‬ ‫در‬24‫کاراکتر‬‫نمایید‬ ‫وارد‬
‫وب‬ ‫های‬ ‫فرم‬ ‫در‬ ‫خطا‬ ‫نمایش‬ •‫نکنید‬ ‫اعتبارسنجی‬ ‫آنرا‬ ،‫فیلد‬ ‫شدن‬ ‫پر‬ ‫از‬ ‫قبل‬(lost focus) ‫ایمیل‬: ‫نیست‬ ‫صحیح‬ ‫ایمیل‬. hossein@yah|
‫کاربری‬ ‫تجربه‬ ‫تکرارشونده‬ ‫فرادĬ
‫شما‬ ‫توجه‬ ‫از‬ ‫تشکر‬ ‫با‬ Twitter.com/macromediax Linkedin.com/in/Hossein-Sharafi interaction-design.org/Hossein-Sharafi

More Related Content

کاربردپذیری در فرم‌های تحت وب

  • 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|
  • 25. ‫شما‬ ‫توجه‬ ‫از‬ ‫تشکر‬ ‫با‬ Twitter.com/macromediax Linkedin.com/in/Hossein-Sharafi interaction-design.org/Hossein-Sharafi