WordPress: Improve Widget Settings UI & UX
-
Upload
fitwp-team -
Category
Technology
-
view
844 -
download
0
description
Transcript of WordPress: Improve Widget Settings UI & UX
![Page 1: WordPress: Improve Widget Settings UI & UX](https://reader036.fdocuments.in/reader036/viewer/2022062308/5590c6aa1a28ab9d718b4765/html5/thumbnails/1.jpg)
IMPROVE WIDGET SETTINGS UI & UX
![Page 2: WordPress: Improve Widget Settings UI & UX](https://reader036.fdocuments.in/reader036/viewer/2022062308/5590c6aa1a28ab9d718b4765/html5/thumbnails/2.jpg)
ABOUT ME
• Tran Ngoc Tuan Anh (a.k.a. Rilwis)
• FitWP Team
• Deluxe Blog Tips (http://deluxeblogtips.com)
rilwis rilwis
![Page 3: WordPress: Improve Widget Settings UI & UX](https://reader036.fdocuments.in/reader036/viewer/2022062308/5590c6aa1a28ab9d718b4765/html5/thumbnails/3.jpg)
Widgets are configurable
WIDGET SETTINGS
Users need to understand settings easily & quickly
UI + UX
![Page 4: WordPress: Improve Widget Settings UI & UX](https://reader036.fdocuments.in/reader036/viewer/2022062308/5590c6aa1a28ab9d718b4765/html5/thumbnails/4.jpg)
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
![Page 5: WordPress: Improve Widget Settings UI & UX](https://reader036.fdocuments.in/reader036/viewer/2022062308/5590c6aa1a28ab9d718b4765/html5/thumbnails/5.jpg)
WIDGET SETTINGS
BAD
BAD
![Page 6: WordPress: Improve Widget Settings UI & UX](https://reader036.fdocuments.in/reader036/viewer/2022062308/5590c6aa1a28ab9d718b4765/html5/thumbnails/6.jpg)
WIDGET SETTINGS
BETTER
![Page 7: WordPress: Improve Widget Settings UI & UX](https://reader036.fdocuments.in/reader036/viewer/2022062308/5590c6aa1a28ab9d718b4765/html5/thumbnails/7.jpg)
WIDGET SETTINGS
BETTER
![Page 8: WordPress: Improve Widget Settings UI & UX](https://reader036.fdocuments.in/reader036/viewer/2022062308/5590c6aa1a28ab9d718b4765/html5/thumbnails/8.jpg)
CSS style
WIDGET UI + UX
Use images
UI + UX
Use Javascript
Use advanced fields
![Page 9: WordPress: Improve Widget Settings UI & UX](https://reader036.fdocuments.in/reader036/viewer/2022062308/5590c6aa1a28ab9d718b4765/html5/thumbnails/9.jpg)
CSS style
WIDGET UI + UX
Use images
Use Javascript
• Alignment of inputs
• Order of inputs
• Font weight, style
• Columns
Advanced fields
![Page 10: WordPress: Improve Widget Settings UI & UX](https://reader036.fdocuments.in/reader036/viewer/2022062308/5590c6aa1a28ab9d718b4765/html5/thumbnails/10.jpg)
CSS style
WIDGET UI + UX
Use images
Use Javascript
• Icons
• Images for radio inputs
Advanced fields
![Page 11: WordPress: Improve Widget Settings UI & UX](https://reader036.fdocuments.in/reader036/viewer/2022062308/5590c6aa1a28ab9d718b4765/html5/thumbnails/11.jpg)
CSS style
WIDGET UI + UX
Use images
Use Javascript• Show/hide elements
• For advanced fields
Advanced fields
![Page 12: WordPress: Improve Widget Settings UI & UX](https://reader036.fdocuments.in/reader036/viewer/2022062308/5590c6aa1a28ab9d718b4765/html5/thumbnails/12.jpg)
CSS style
WIDGET UI + UX
Use images
Use Javascript • Color picker
• Editor (WYSIWYG)
• On/Off with iPhone style
• Number slider
Advanced fields
![Page 13: WordPress: Improve Widget Settings UI & UX](https://reader036.fdocuments.in/reader036/viewer/2022062308/5590c6aa1a28ab9d718b4765/html5/thumbnails/13.jpg)
EXAMPLE
CSS AlignmentBootstrap for input
iPhone style on/off
Images for radio inputJS interaction
![Page 14: WordPress: Improve Widget Settings UI & UX](https://reader036.fdocuments.in/reader036/viewer/2022062308/5590c6aa1a28ab9d718b4765/html5/thumbnails/14.jpg)
HOW
HTML CSS Javascript
![Page 15: WordPress: Improve Widget Settings UI & UX](https://reader036.fdocuments.in/reader036/viewer/2022062308/5590c6aa1a28ab9d718b4765/html5/thumbnails/15.jpg)
HOW
Use Custom HTML markup
![Page 16: WordPress: Improve Widget Settings UI & UX](https://reader036.fdocuments.in/reader036/viewer/2022062308/5590c6aa1a28ab9d718b4765/html5/thumbnails/16.jpg)
HOW
Enqueue CSS & Javascript
![Page 17: WordPress: Improve Widget Settings UI & UX](https://reader036.fdocuments.in/reader036/viewer/2022062308/5590c6aa1a28ab9d718b4765/html5/thumbnails/17.jpg)
HOW
Note for Javascript
• Use jQuery “on” or “delegate”
• Avoid using “live”, “click”, “hover”, etc.
![Page 18: WordPress: Improve Widget Settings UI & UX](https://reader036.fdocuments.in/reader036/viewer/2022062308/5590c6aa1a28ab9d718b4765/html5/thumbnails/18.jpg)
QUESTIONS?
![Page 19: WordPress: Improve Widget Settings UI & UX](https://reader036.fdocuments.in/reader036/viewer/2022062308/5590c6aa1a28ab9d718b4765/html5/thumbnails/19.jpg)
THANK YOU