Here is the second iteration of the UX update for the Widget Context plugin. Please check out the live demo and let me know what you think! 

The Concept

The number of locations where you might want to show or hide a widget can vary significantly — having “Related Posts” widget on all blog entries except on posts that are tagged “twitter” (many); or showing the “About Me” widget only on the front page of a blog (few). However, the combinations are endless.

Therefore, I realized that the most important feature should be the ability to find those groups of locations very fast. So there will be only two ways to sort through the content: (1) search, or (2) choose one of the core locations such as homepage, blog index, all pages/(custom)posts or their indices (archives).

Once you have found and selected the sections, it is only a matter of ordering (or chaining) them according to their “power” — low power locations sink to the bottom and are overwritten by the ones floating above them. This is done via drag-and-drop.

The question is — can you think of a combination of locations that can’t be covered using this approach?

Related posts

1. Request for Feedback: Widget Context UI Update 2011, v1
2. Widget Context Update — Word Count Check
3. Widget Context Update for WordPress 2.8

Those arriving at WordPress.com front page are either from other blogs hosted on WordPress.com or search engines, and most of them are interested in creating a blog for themselves. Those who want to explore featured posts are mostly the existing users. Therefore, I suggest to:

1. make the sign-up area more prominent, and
2. featured posts more easy to scan.

Here is a greyscale mock-up of what I mean with the first suggestion:

Suggestions for improving WordPress.com redesign

What do you think?

Related posts

1. WordPress Admin Header Design Tweak, Take Two
2. Tweaking WordPress Admin Header
3. Design on April 2009

Another WordPress Admin Header Tweak

What do you think?

Related posts

1. Tweaking WordPress Admin Header
2. Squeeze the Header of the New WordPress 2.7 Dashboard
3. WordPress Dashboard UI Idea #3

Here is how my admin area currently looks like:

WordPress admin header redesigned

Ideas behind this redesign

1. You know the title of your blog very well, therefore it is unnecessary to make it so large.
2. If you have several blogs, it is important to be able to distinguish in which admin area you are currently in. To do so, we make the background color of the blog title different for each blog (green, in the screenshot above).

Result: saved 50 pixels of vertical space

How to achieve this on your blog

Install the Admin CSS plugin.

Go to Settings › Admin CSS and add this CSS:

#wphead h1 a { background:#186F00; border-color:#030;  }

#wphead { height:0; background:none; float:right; }
#wphead img { display:none; }
#wphead h1 { font-family:"Lucida Grande","Lucida Sans Unicode",Tahoma,Verdana,sans-serif; font-size:11px; line-height:15px; float:left; margin:0 0 -3em 0; padding:1.2em 1.75em 0 0; position:relative; overflow:visible; font-size-adjust:none; border-right:1px solid #ddd; }
#wphead h1 a { color:#fff; display:block; float:left; -moz-border-radius:1em; -webkit-border-radius:1em; padding:3px 1em 4px; border-width:1px; border-style:solid; font-weight:bold; }
#wphead h1 a:hover { background:#333; border-color:#000; color:#fff; text-decoration:none; }
#wphead h1 span { display:none; }
#wphead-info { float:right; margin:0.15em 1.25em -10em 0.5em; position:relative; }
#icon-index { margin-top:0.9em; }
#user_info { font-size:0.88em; }
#user_info a:link { color:#666; }
#screen-meta-links { margin:0; float:right; margin-right:44em; }
#wpbody ul.folded { margin:0; padding:0.75em 1em; }
#themeselector { position:relative; bottom:-2em; right:210px;  }
#adminmenu { margin-top:1em; }
p.search-box { margin:0.5em 0 -0.5em 0; }
.wrap h2 { font-style:normal; font-size:1.75em; padding-top:0.5em; }
.wrap h2.long-header { width:40%; }

Limitations imposed by the current HTML structure

It is worth noting that the horizontal order of the items in the header is very limited due to the current HTML structure of the page – blog title, favorite actions and user links are placed inside #wphead while page title and screen options are inside #wpbody, which is below it.

Update: My WordPress Design Tweak Entry

This is how I would like the admin header area to look like, if it would be possible to change the underlying HTML structure. Notice that I have renamed Screen Settings to Panels and placed it into a pill button together with Help.

Suggestions for improving WordPress Admin Header

What do you think of this tweaked design?

Let me know, leave a comment.

Related posts

1. Squeeze the Header of the New WordPress 2.7 Dashboard
2. WordPress Admin Header Design Tweak, Take Two
3. Replace WordPress Login Logo With Your Site’s Name and Link