Theme Options UI: Consistency Matters!

Just tweeted this:

Doing it right: #genesiswp ‘s theme options UI mimics WP’s look instead of having its own fancy UI.

Consistency Matters

A lot of you must have seen how various WordPress themes have different theme options UI design. Most of them opt for pretty looking options page with labels, inputs, buttons, icons, and forms that look wildly different from the rest of the Dashboard.

If your theme is like that, you’re doing it wrong.

Why?

Simply put: consistency is one of the principles of good UI design. By having a consistent UI, you help your user by not making them learn a whole new set of interface.

In The Value of UI Consistency, Bill Higgins explains:

Observing established UI conventions has two main benefits:

  • You reduce your application’s learning curve because the user can (subconsciously) leverage previous experience within your application. For example, when you see blue underlined text on a web page, no one needs to explain that you can click it.
  • Your app is more pleasant to use or, more accurately, your app is less unpleasant to use […]

Joel Spolsky said:

In most UI decisions, before you design anything from scratch, you absolutely have to look at what other popular programs are doing and emulate that as closely as possible.

Or in our case, how the rest of the Dashboard is designed. This might not seem obvious to us who’s been working with WordPress for years, but for common users even the default dashboard UI can be quite overwhelming. A differently-styled theme options UI is simply an unnecessary addition on top of that, very possibly doing more harm than good.

Sounds about right. Is there a WordPress UI Guidelines somewhere I can learn from?

Yes. It’s still in the works, but it’s there. Also, the Make WordPress UI blog is a good start if you want to help out.

You may also like...

4 Responses

  1. Absolutely agree. I just wrote a custom plugin for Restaurants to enter their Menus and I used UI queues from the admin vs. “optimizing” it in a vacuum. I even how to make extra effort to maintain consistency (using a link as an OK button which didn’t respect tab order rather than a form button because that’s how WP does it) but I think it pays off in UX.

  2. Hafiz Rahman says:

    Oh, right. Aside from the UI look-and-feel, keeping consistent behavior is just as important. Thanks for mentioning that, Mike.

  3. Hello! I just wish to give a huge thumbs up for the great information you have got right here on this post. I shall be coming back to your weblog for more soon.

  1. June 4, 2010

    […] for ages. It’s simple to use and consistent with the WordPress UI look (here’s why it’s important). Bonus quote from Ian: (…) if a theme has more options than WordPress … it has too many […]

css.php