Matt (Thomas) Miklic 6:55 pm on March 22, 2013
Tags: mp6 ( 24 )

MP6 version 0.4

It’s Friday, so here’s a little something to make the weekend feel like it’s getting here faster: this week’s update to MP6, version 0.4. This was a short week for the team so there’s not as much as in the last couple of versions, but there’s still plenty here that we’d like your feedback on. Here’s what’s new:

The MP6 toolbar styles now load on the front-end of your site, so we can see how themes interact with the slightly darker, flatter, larger toolbar design.
The Plugins page has been re-thought, eliminating the opacity change for inactive items in favor of a blue border and background to denote activated plugins. We were aiming for something that wouldn’t be overwhelming if you have a long list of all-activated plugins, but that provided for more contrast between active and inactive items than the current design.
Updated MP6’s styling in the Menu management page; this is still unfinished.
New checkboxes are larger (easier to click/tap) and unify the visual styling of checkbox elements across almost all browsers/platforms.
Replaced more PNG raster icons with vector Dashicons — arrows, calendar icon, collapse button, etc.

There are a number of items that have been discussed in the comments and on IRC — just because you don’t see them here yet doesn’t mean we’ve decided not to do it — just that we haven’t done it yet. So keep sharing your ideas and suggestions please; but don’t assume anything you see is considered absolutely final just yet.

This week’s edition includes contributions by Ben, Mel, Otto, and myself. Thanks also to Mark J, Joen, Matt and all the others who offered feedback that made it into this week’s work.

We’ll once again meet in #wordpress-ui on Monday, March 25 at 1800 UTC to go over this week’s edition and discuss your ideas for future iterations. That will be followed by the release of the next version a week from day on March 29.

Looking forward to your thoughts and ideas for improvements!

#mp6

Tevya 7:07 pm on March 22, 2013

Just in case it got lost on the previous post/thread, here’s my suggestion for buttons that blend more with the flat interface, while still looking like buttons by maintaining a subtle gradient. All I did was remove the border radius and the inset shadow:
- Matt Thomas 7:10 pm on March 22, 2013
  
  Yep, we’re still going to take a look at toning down some of the lighting effects on buttons to bring them a little more inline. Mel’s suggestion on the other thread also reminded me of a similar style we’ve used on WordPress.comWordPress.com An online implementation of WordPress code that lets you immediately access a new WordPress environment to publish your content. WordPress.com is a private company owned by Automattic that hosts the largest multisite in the world. This is arguably the best place to start blogging if you have never touched WordPress before. https://wordpress.com/: http://cl.ly/image/2S3v1B463R3N/
  - Tevya 7:15 pm on March 22, 2013
    
    Personally I think I like how the square corners fit with the square corners of everything else. But those look great. They’re much more flat, without being completely flat so they look like buttons. In my humble opinion, either would be awesome.
    - buzztone 1:32 am on March 23, 2013
      
      Definitely agree – the square cornered buttons match really well with the rest of the interface. The rounded cornered buttons look odd – a bit of a remnant left over from 3.5.1.
      - alternatekev 5:09 pm on March 23, 2013
        
        I would normally agree – and visual consistency is important – except that here, we’re hinting at interactivity, and rounded corners inevitably feel more clickable than square corners, especially when square edges adorn just about every other non-clickable page element. Making these 2-3px rounded humanizes the button and allows us not to rely entirely on color and text to denote interactivity.
        
        Just a thought.
- Jesper van Engelen 10:39 pm on March 27, 2013
  
  In my opinion, flattening the buttons this much does not improve the visibility of these elements as buttons. The issue does not occur for the primary buttons as they stand out because of their color (obviously) but the secondary buttons, in this case the “Preview Changes” button blends in so much that it is hardly recognizable as a button. In this particular case, of course, it is well known that there is a button there – but what to think of custom plugins where the button is used inside, for example, a post list table? In that case, the button will blend in with the rest of the content to the extent where people won’t know it’s even usable as a button.
Jerry Bates (JerrySarcastic) 7:15 pm on March 22, 2013

Looks great! I think the pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party page is a big step forward, though I also liked the hover effect on deactivated items; some deemphasis of inactive plugins is still helpful, even with the blue boxes in place.

I did notice a bit of a problem with a repeating down arrow image in the screen options and help tabs on my retina mac, where “arrows-2x.png” are still being called in the stylesheet:
http://cl.ly/image/3X2g2m1z3v0N
- Matt Thomas 7:24 pm on March 22, 2013
  
  Whoops! Good catch. I overrode the 1x graphics but forgot to do the same for the 2x versions. Just committed an update to trunk that fixes this; you should be able to update to it shortly.
Marko Heijnen 7:30 pm on March 22, 2013

I think the checkboxes or little bit to big on the pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party screen. ( don’t think this is a retina issue ).

Also curious what the opinion was to make the menu color on hover blue. I don’t think that makes it really readable.
- Matt Thomas 7:34 pm on March 22, 2013
  
  The checkboxes are intentional — standard checkboxes are 10px square and I find them frustratingly difficult to target, whether with a mouse, trackpad, or touchscreen. The new checkboxes are 16px square, and add some hints that you can interact with them, by changing the cursor to pointer and darkening the background color. I’m happy to consider sizing alternatives here, but I hope folks will try using the big checkboxes for a few days and see if they start to feel normal to you; they definitely do to me now.
  - Tevya 8:07 pm on March 22, 2013
    
    I really like the large checkboxes. They look great and are easy to click.
  - Archetyped 8:59 pm on March 22, 2013
    
    I don’t have an issue with larger checkboxes, but at least on Firefox, the styling has caused the checkboxes to be less usable.
    
    System/OS controls do not reactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/. to styling the same way across all platforms, which is why modifying default styling of these controls is generally not recommended.
    
    If larger hit targets (especially for mobile) is the goal, then why not allow clicking on the pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party titles, or clicking anywhere on the plugin’s row (save for where actual links are) for that matter, to cause the checkbox to be selected?
    
    That would be far more finger friendly and wouldn’t the maintenance nightmare that modifying system controls can be.
  - buzztone 1:56 am on March 23, 2013
    
    I think the larger checkboxes are an improvement – but on Firefox they are very hard to see. Better on Chrome and better still in IE9.
    
    Also I get no on-hover over checkboxes feedback in either Firefox or IE9 and only extremely subtle in Chrome.
    
    The blue on-hover over checkboxes in 3.5.1 is very strong which compensates partly for the overly small box size.
  - Matt Thomas 2:07 am on March 23, 2013
    
    Yeah; Firefox is a little unkind in how it treats checkmarks with -moz-appearance: none applied (not how you’d expect, given the way that webkit browsers do it). Lovely thing about browser-prefixed selectors though; if a browser doesn’t support it fully, we can just eliminate the rule for that browser. Removed -moz-appearance: none from trunk for now so Mozilla browsers will see default checkboxes, everybody else gets the new ones.
- Matt Thomas 7:35 pm on March 22, 2013
  
  Regarding blue on hover: the contrast of the light blue against the dark grey felt contrasting enough for me, and there haven’t been too many complaints about its readability yet. But this is something we may continue to tweak along with borders in the sidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme. and a number of other possible treatments for menu bar items.
Ipstenu (Mika Epstein) 10:34 pm on March 22, 2013

Woah. Plugins YAY. That blue line caught my eye and within a second I knew “Oh, this is active!” It’s like the Apple Dock and the little light. That was great, Matt!

The actual colors though are … well I couldn’t tell it was a blue box on my non-Retina Macbook until I leaned waaaaaaaay back and angled the monitor. That meant the side-line and bold text was perfect. Even without color it was okay. (My doctor says I have issues with green backgrounds, wonder if this is related…)
- Matt Thomas 2:03 am on March 23, 2013
  
  Thanks! Mark Jaquith suggested the line; Joen suggested the blue background. Together I think they work well. I wanted to use a background color that was subtle enough it wouldn’t be irritating if you’ve got 20 plugins that are all activated (that would be a lot of any strong color). I also wanted to try something that wouldn’t require opacity changes, given esmi’s accessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) concerns about them below. My hope was that this would work with or without the background-color though, so that’s great to confirm. (Un-bolding the text really makes a lot of difference!)
John Blackbourn (johnbillion) 11:17 pm on March 22, 2013

For some reason the “Disable the visual editor” checkbox on the profile screen has its border missing and is generally a tad wonky.
- Matt Thomas 2:00 am on March 23, 2013
  
  Good catch; I found the culprit and added a fix to trunk.
Matt Thomas 2:00 am on March 23, 2013

There were a couple of annoying bugs in 0.4 especially for hi dpi screens, so I tagged 0.4.1 with some fixes for those issues. That’s the version we’ll discuss on Monday.
Dean Robinson 10:54 am on March 26, 2013

Can’t really join in the IRC chats (silly timezones), and only had a quick scan through the logs, so forgive me if this has already been covered and dismissed.

The admin bar and menu being the same colour, with no real division, is probably the only thing I’m not 100% liking after playing with MP6 for a few days. Was any consideration given to styling the admin bar in a similar way to the bar on WordPress.comWordPress.com An online implementation of WordPress code that lets you immediately access a new WordPress environment to publish your content. WordPress.com is a private company owned by Automattic that hosts the largest multisite in the world. This is arguably the best place to start blogging if you have never touched WordPress before. https://wordpress.com/ (quick mockup: http://cl.ly/NpLj ) or would it be somewhat “off limits” to keep .com and .org visually separate.

The blue bar and blue menu item would potentially clash if they were both blue (mockup with grey ‘active’ item: http://cl.ly/Noxy ), and maybe the blue is just too bold when the rest of the UIUI UI is an acronym for User Interface - the layout of the page the user interacts with. Think ‘how are they doing that’ and less about what they are doing. is so dialed down – but its just a thought.
- Matt Thomas 5:34 pm on March 27, 2013
  
  Thanks, Dean. I had tried something similar in my private noodling, but we hadn’t discussed the idea yet. I think there’s something to it for sure, but in the end I think most of us were pretty drawn to the seamless effect created by putting both the toolbar and sidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme. navigation on a single background. As Joen put it, “laying a white piece of paper on a dark surface.” Mark Jaquith’s carpenter’s square analogy also felt apt. Treating it all as one element is an attempt to harmonize what felt before like too many incongruous style choices on what are all essentially navigation elements.
  - Dean Robinson 9:26 am on March 28, 2013
    
    Thanks for the explanation, makes good sense. 🙂
Jose Castaneda 8:33 pm on March 27, 2013

Truly loving the progress so far. The one thing that I did notice is the “wp-menu-separator” gives it a bit of weird look, to me. I understand there should be a difference between the groupings but it looks odd without a noticeable/visible difference.
Till 8:32 am on March 28, 2013

The new toolbar is 32px tall, but the padding is still set to 28px. See in html.wp-toolbar in https://core.trac.wordpress.org/browser/trunk/wp-admin/css/wp-admin.css#L1914

Comments are closed.

The Design Team provides design for the WordPress project.

More information

MP6 version 0.4

The Design Team provides design for the WordPress project.

More information

Share this: