Make WordPress UI

Tagged: buttons Toggle Comment Threads | Keyboard Shortcuts

  • Jen Mylo 7:01 pm on November 20, 2011 Permalink
    Tags: buttons   

    We’ve gradually been updating the UI First the… 

    We’ve gradually been updating the UI. First the header went lighter, then the whole thing got a facelift, and in 3.3 the admin bar + header = toolbar. What’s the next style up for grabs? Let’s talk about buttons. In 2008, man did we love those pill-shaped buttons. We were all Apple-cool. Primaries in dark blue with white text, secondaries in gray with black text. Is it time to push a little on the button design? It’s been 3 years, so I’m thinking… probably, yeah.

    Over on the WordPress.com home page, Andy Peatling introduced a new posting form, a la QuickPress, on the main page for logged in users. If you haven’t seen it yet, here’s the new form:

    There’s a lot to like about this (post formats integration, single uploader access point), but the thing I want to point out here is the button styling. Different shape, different colors, different text. I’m not saying these should be transported wholesale into core, but it gives us something to think about.

    The secondary button (Add Tags) looks a little too much like a Windows desktop toolbar item for me b/c it blends into the background  so much, but that primary button (Publish Post) grabbed me right away. In 2.7 we introduced colors in the Dashboard Right Now box — green, orange/yellow, and red — to indicate different statuses.* We always meant to integrate those colors into the rest of the wp-admin design, but never really got around to it beyond coloring delete links red and pending links yellow. ‘Green means go’ is a pretty universal metaphor, thanks to traffic lights around the world. This button is a little too subtle to stand out as the primary action on an action-packed screen like post-new.php, but maybe with bold text and an outline (or maybe an actual green button, or maybe something else) we could consider a shift to using green in the primary buttons.

    We stuck with blue back in 2008 using the logic that the submit would take you to a new screen, similar to the way a link would. Since then, however, it’s been an uphill battle to get people to use buttons for submit actions and links for links. Maybe separating them by color would make the difference (subtly) more clear.

    If anyone is interested in experimenting, post button comps in the comments. Probably won’t devote much attention to this until 3.3 is out, but if we have stuff in progress, maybe we could get it in early in 3.4.

     

    • Coincidentally, Andy Peatling helped choose those colors!
     
    • curtismchale 8:41 pm on November 20, 2011 Permalink | Log in to Reply

      I’m not sure I like the buttons on top for post formats. WordPress already has a nice ‘tab’ interface that you can see for post formats in the post formats UI plugin Alex King released.

      http://alexking.org/blog/2011/10/25/wordpress-post-formats-admin-ui

      I think it would be better to stick with the UI conventions in place from other areas. Of if we wanted that UI style for post formats change the existing tabs UI to match the new UI we see above.

      For the buttons I like the overall idea of but not a fan of the green. Why wouldn’t we stick with using a blue like is currently in the buttons for the text colour?

    • Zach "The Z Man" 4:21 pm on November 21, 2011 Permalink | Log in to Reply

      I agree with the point about bringing the colors more into the grand scheme of the admin (green, red, yellow, etc.) to really tie things together. For those of us who work inside WP all the time, the colors aren’t that big of a deal, but for those people who are brand spanking new to WP (ie: clients, non ‘admin’ literate people (yes they do exist)) colors play a BIG role in know what to do.

      Changing the buttons up seems to fit the trend of where things are going on the internet as a whole, but more importantly, echoing the subtle color schemes throughout as well would be a welcomed enhancement.

    • Ipstenu 4:42 pm on November 22, 2011 Permalink | Log in to Reply

      The new button style/shape feels much more ‘modern’ and right away I like it a lot. Not the red/green (too christmassy?) but straight up that looks like a ‘QuickPress’ I’d actually use and not remove from my dash right away. Now if it only had [+ Add Categories]

    • Ipstenu 6:12 pm on November 22, 2011 Permalink | Log in to Reply

      Here’s a lunchbreak GIMP up of the green as a background (and the text bold): http://cl.ly/1x1m1O060Y1l0L3y0I0d

      And in context http://cl.ly/360I1c262I0o0K2K2W0c

    • Mark McWilliams 3:02 am on November 27, 2011 Permalink | Log in to Reply

      On the subject of QuickPress for WP.com (sorry it’s straying slightly from the square buttons, which I do actually prefer, they’re not so “in your face” … but that might not always be a good thing) it’s along the same idea of what Alex King coded for the WordPress Admin which can only mean one thing also, it might be something to explore for Post Formats in 3.4 too. But yeah, +1 to square buttons from me, I like what Andy’s done! :)

    • Mike Kennedy 5:49 am on December 16, 2011 Permalink | Log in to Reply

      That looks pretty awesome, actually! Much like Tumblr :)

    • Mamaduka 6:46 pm on December 23, 2011 Permalink | Log in to Reply

      Just noticed that new button style of delicious.com look similar to this

  • Jen Mylo 6:15 pm on April 29, 2011 Permalink
    Tags: buttons, , , , links,   

    #17282 – Dashboard Recent Comments “View All” update 

    The “View All” buttons on the dashboard boxes are weird b/c they are buttons, but they aren’t actions, they are links. Would like to start switching over to a standard where buttons are mostly reserved for action/commitments, not just links to another screen.

    Suggestions for Recent Comments box: instead of “View All” button, replace with links to the various views of the comments screen. So:

    View All | Pending (24) | Approved | Spam (6) | Trash (3)

    …where the link styles are the same as on edit-comments.php

     
c
compose new post
j
next post/next comment
k
previous post/previous comment
r
reply
e
edit
o
show/hide comments
t
go to top
l
go to login
h
show/hide help
shift + esc
cancel