wordpress: improve widget settings ui & ux

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