WIXOO

Digest

Designing an Effective Admin Back-End

作者:FWebDe 发布时间 10/03/21 来源 FWebDe

So, you've just created the new CMS that will replace every piece of software used on websites. Of course, the next step would be to release it to the public, right?

After you've got the functionality, you need to work on the design.

Sure, the default theme that users see is pretty important, so that you can effectively show off all of the great features. However, it doesn't need to be perfect, since most people will use change the theme anyway.

You're going to be "selling" your software to the people who will be using the back-end. When convincing people to use your software, its overall usability will be greatly influenced by the back-end, because the visitors of a website don't care what platform it's running.

What Not To Do

Let's start off with an example of what you should not do.

cPanel

I think that, in my opinion, cPanel is a bad example of a site back-end. The navigation is basically just a lot of icons on one page. A new user might find this a bit overwhelming, having simple tools shown right alongside some of the more advanced ones.

The actual icons are in separate categories, but other than that, there isn't much linking similar tools together, which I think would be very helpful.

Another thing that you should avoid is using frames in your back-end. At one time, they were not bad, and they were used in just about every type of software (Especially in forum platforms). However, they have fallen out of use, with newer versions using more "modern" techniques.

A Customizable Layout

Wordpress Admin Dashboard

A great feature of some modern CMSes is a customizable front page (Usually called a Dashboard). This allows the site administrators to quickly view information that is important to them, increasing the overall usability of the back-end.

A nice example of this is the Wordpress Admin Panel.

I also like how Wordpress goes even further with this. Pages like the "Edit Post" page are also customizable, with simple drag-and-drop actions. This way, you can have the tools you need the most right where you need them when writing a post.

In my opinion, using a customizable layout is an excellent way to improve an admin back-end. For tips on implementing this feature, a Google search for "jQuery drag and drop" will give you many guides on doing this, which you can then integrate into your back-end.

Make Common Features Easy To Access

The most commonly used tools in a back-end should be easily accessible from the front page, by using features such as icons. Now, this sounds a bit like what was wrong with cPanel, but remember, this should only be done with the most commonly used features.

A way to put this together with a customizable layout is to be able for the user of the back-end to choose which sections get their own icon, leaving other tools in other menus.

Make Easier Features More Prominent Than Advanced Ones

Normally, you would want your software to seem easy to use. However, your interface should not be dumbed-down so much that you're removing advanced features.

Similar to making common features easy to access, you want to make simpler tools more obvious than the more advanced ones. Keep simple tools large and "above the fold", while moving advanced features to less prominent spots.

A commonly method to do this is to have an "Advanced Features" box on the page, hidden below other features by default. When a link or a button is clicked, the advanced features are displayed, ready to be used.

Stick to Common Organization Schemes

If there are other software out there that are similar to yours, try to keep a similar organization scheme for your back-end. This will help make it easier for people using the other software to get used to yours more quickly.

For example, a typical CRUD-based CMS will have a section for managing content, such as pages and categories, for managing users, and for managing general site settings.

A Few Examples of Effective Admin Back-Ends

How could this post possibly be complete without a a few examples?

IP.Board

ipboard

Wordpress

Wordpress Admin Dashboard

Drupal

drupal-thumb

SilverStripe

silverstripe-thumb

Joomla

joomla-thumb

Share Your Thoughts

Do you have any questions, any other ideas to improve an admin back-end, or any other software that you think has a great admin back-end? Be sure to leave a comment and share what you think.