Upload
fitwp-team
View
847
Download
0
Tags:
Embed Size (px)
DESCRIPTION
Some thoughts about widget settings and the needs to improve its UI & UX
Citation preview
IMPROVE WIDGET SETTINGS UI & UX
ABOUT ME
• Tran Ngoc Tuan Anh (a.k.a. Rilwis)
• FitWP Team
• Deluxe Blog Tips (http://deluxeblogtips.com)
rilwis rilwis
Widgets are configurable
WIDGET SETTINGS
Users need to understand settings easily & quickly
UI + UX
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
WIDGET SETTINGS
BAD
BAD
WIDGET SETTINGS
BETTER
WIDGET SETTINGS
BETTER
CSS style
WIDGET UI + UX
Use images
UI + UX
Use Javascript
Use advanced fields
CSS style
WIDGET UI + UX
Use images
Use Javascript
• Alignment of inputs
• Order of inputs
• Font weight, style
• Columns
Advanced fields
CSS style
WIDGET UI + UX
Use images
Use Javascript
• Icons
• Images for radio inputs
Advanced fields
CSS style
WIDGET UI + UX
Use images
Use Javascript• Show/hide elements
• For advanced fields
Advanced fields
CSS style
WIDGET UI + UX
Use images
Use Javascript • Color picker
• Editor (WYSIWYG)
• On/Off with iPhone style
• Number slider
Advanced fields
EXAMPLE
CSS AlignmentBootstrap for input
iPhone style on/off
Images for radio inputJS interaction
HOW
HTML CSS Javascript
HOW
Use Custom HTML markup
HOW
Enqueue CSS & Javascript
HOW
Note for Javascript
• Use jQuery “on” or “delegate”
• Avoid using “live”, “click”, “hover”, etc.
QUESTIONS?
THANK YOU