Thoughts on WordPress 3.2 UI Refresh

[mmuro]

If you aren't aware, WordPress 3.2 is most likely getting a UI refresh. There's plenty of information on the UI dev blog. I'd recommend downloading the latest nightly to get a real sense of what kind of changes they are making to the dashboard.

I know that things are currently being tweaked and development is still ongoing, but for the most part, what you see is going to be very similar to the final product. With all of that being said, I'm not very happy with the UI refresh. Everything seems too monochromatic with a lack of contrast among major elements and smaller font sizes. If they are "trying to move away from all the gray" then they are going in the wrong direction.

I think this UI refresh is being rushed to make it into 3.2 without much outside user testing. How hard would it be to target various wordpress.com users and gain feedback in much the way they have done in the past? If big changes aren't made to improve upon the design, I will probably be looking for a way to revert back to the pre-3.2 design (Dashboard CSS, TinyMCE buttons, et al).

[DennisBarker]

I'mplaying with 3.2 on one of my blogs and I prefer the 3.1 user interface personally - I like to see the things i need regularly infront of me rather than hidden in dropdown menus. I'm sure there woill be a plugin to revert back to the previous stule Ui pretty soon after this release and I'll be using it for a while at least.

[Otto]

I definitely like the new UI a lot more. The left hand menus have been tweaked to not take up as much space, basically, and I like that. I've never been a big fan of the icon-only left hand menus, but they move and work pretty slickly now. The blue color scheme just got updated a few days ago, so if you're running trunk, check that out too. Everything just moves a bit smoother and it seems less cluttery.

[Ryan]

Some parts of it seem more practical, but I don't think it looks as pretty as it used to.

[chipbennett]

The part I'm still iffy about is the Site Title. The font size is smaller that it used to be, and the background color is now white - so it almost completely disappears. (I actually use that Site Title, given the number of sites I'm currently running; it helps to know where I am. :) )

Other than that, I like pretty much everything else. Also: I generally use a collapsed menu.

[Elpie]

It "looks" cleaner but I have serious reservations about it.
Firstly, there is not enough colour contrast. I find the lack of contrast almost impossible to work with and the illogical heading structure slows me down. Like Chip, I don't like the disappearing site title. It might work for people who are maintaining one site and always know where they are, but I like having a visual reminder of what site I am on. This is especially important if I am working on several sites at the same time.

However, what really worries me is the lack of care for accessibility. I use keyboard navigation all the time as this speeds up my work. I also work with users who have disabilities.

At the moment, the dashboard contains 9 (yes, NINE) links with Tabindex=1.
Tabbing through gives no indication of where you are until you hit the Quick Press when the cursor suddenly appears for the first time, but there's no focus or highlighting to tell you where the heck it is.
It takes 3 tabs to get off the index.php, then another two to take you off edit.php. Once either is selected I haven't a clue where the cursor goes to.
The only clue that the cursor is even on a link on the dashboard is the name of the files showing at the bottom of the browser.
To most people, these file names won't say much. In order, this is the tab navigation:

index.php
edit.php
post-new.php (well, thats a new post but has a disappearing cursor if you select it)
edit-comments.php
profile.php
tools.php

Then nothing to indicate that the cursor has jumped over to Quick Press title. Nothing shows in the browser to indicate the cursor has moved.

Tab through Quick Press - can't get to reset. No focus on "Submit for Review" and the colour hides the fact that the cursor is there.

Next, back to index.php
/?unfoldmenu=1
edit.php
/?unfoldmenu=1
profile
tools
/?unfoldmenu=1
site URL (outside of admin, with no warning that this is happening).

For each menu, navigating by keyboard to submenus doesn't happen.

I've spent a couple of hours trying to work out how to use keyboard navigation in the new UI, and not having any success. I keep getting totally lost because I can't see where the cursor is going. Heaven help anyone who doesn't have good sight and a good knowledge of WordPress.

FWIW, the last iteration of the UI was almost as bad. Hiding things and changing the colours just makes this one worse. Since 2.7, the admin UI has been steadily getting less accessible and slower to use (in terms of taking time to get around in).

[dgwyer]

OK so finally fired up 3.2 UI to see what all the fuss is about. Some (very quick) first impressions..

1. Whoa, hello. This is quite a change from previous versions. Initial response is this too a little cluttered and overly compact.
2. After a few minutes, kinda getting used to the new menu design. Like the way it is further up the screen. I think it looks a bit more squashed and compact because of the left hand margin/padding being removed.
3. Couldn't even see the site title straight off! Now I know where it is, hmm, really not sure about this. I know it has probably been moved to save space on the LHS menu, but I use this all the time (as a visual cue, and to navigate to the front end of the site).
4. Haven't yet got my head round the fact that the site title (and WP logo) are smaller than the main headings on every page. Just looks a bit wrong to me. Feels like it should be the other way around, and that the WP title and logo could be a couple of points larger without taking up much more space.
5. The second biggest surprise is the change of default font. It seems to be Arial by default now? The characters are SO close together it is really hard to read just scanning your eyes around admin pages quickly. Try, it. Then go straight back to WP 3.1 to compare. The text is WAY more readable in 3.1.

OK, so those were literally my first impressions of 3.2 admin UI. It will be interesting to see how they change after using it for a while. I like a lot of the small changes here and there, but then again I was happy with 3.1 so not really fussed either way. I think, however, if the default font type is not changed back it will be a mistake. In WP 3.1 you can really get away with the small size of font on a lot of pages because of the choice of font type. Arial really doesn't work for me at smaller sizes and I can really see myself getting serious headaches trying to read it for any length of time!

[Otto]

Having used it for a while, I don't like the smaller Site Title now either. It makes it very difficult to know what site I'm on and harder to get to the front end of the site to see my changes easily, because the link is now harder to click on. I may need to adjust this with a plugin if it's not corrected before 3.2 ships.

[Otto]

Works for me. Elaborate as needed.

 <?php 
/* 
Plugin Name: Embiggen Site Title
Description: Embiggen the Site Title in wp-admin. Debiggen the Page headers. Ditch the useless icon.
*/
 
add_action('admin_print_styles', 'big_site_title');
 
function big_site_title() {
?>
<style>
.wp-admin #wphead {
    height: 42px;
}
.wp-admin #wphead h1 {
    font-size: 28px;
    #font-family: "HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,sans-serif;
}
.wp-admin #header-logo {
    background-image: url("images/logo.gif");
    background-size:32px 32px;
    width:32px;
    height:32px;
}
.wp-admin .wrap h2 {
    font-size:16px;
    padding-top: 1px;
    padding-bottom: 0px;
    height:20px;
}
.wp-admin .icon32 {
    display:none;
}
</style>
<?php
}  

[Otto]

Also: http://ottopress.com/2011/wordpress-...a-admin-tweak/