WordPress: Improve Widget Settings UI & UX
- 1. IMPROVE WIDGET SETTINGS UI & UX
- 2. ABOUT ME • Tran Ngoc Tuan Anh (a.k.a. Rilwis) • FitWP Team • Deluxe Blog Tips (http://deluxeblogtips.com) rilwis rilwis
- 3. Widgets are configurable WIDGET SETTINGS Users need to understand settings easily & quickly UI + UX
- 4. Widget markup is minimal WIDGET SETTINGS Use default WP HTML markup DEVELOPER No CSS, images No JS interaction Good look & feel Easy to understand Easy to follow Need interaction USER
- 8. CSS style WIDGET UI + UX Use images UI + UX Use Javascript Use advanced fields
- 9. CSS style WIDGET UI + UX Use images Use Javascript • Alignment of inputs • Order of inputs • Font weight, style • Columns Advanced fields
- 10. CSS style WIDGET UI + UX Use images Use Javascript • Icons • Images for radio inputs Advanced fields
- 11. CSS style WIDGET UI + UX Use images Use Javascript • Show/hide elements • For advanced fields Advanced fields
- 12. CSS style WIDGET UI + UX Use images Use Javascript • Color picker • Editor (WYSIWYG) • On/Off with iPhone style • Number slider Advanced fields
- 13. EXAMPLE CSS Alignment Bootstrap for input iPhone style on/off Images for radio input JS interaction
- 15. HOW Use Custom HTML markup
- 16. HOW Enqueue CSS & Javascript
- 17. HOW Note for Javascript • Use jQuery “on” or “delegate” • Avoid using “live”, “click”, “hover”, etc.
- 18. QUESTIONS?
- 19. THANK YOU