Make WordPress UI

Recent Updates Toggle Comment Threads | Keyboard Shortcuts

  • lessbloat 6:52 pm on February 26, 2013 Permalink | Log in to leave a Comment  

    Icon feedback 

    I’d like to kick off another round of icon feedback, this time with several constraints. If you have any concerns with the flat icons currently in trunk, now is your time to speak up.

    A few rules for this exercise:

    DO’s:

    • Please be constructive. Each icon has a letter assigned to it, if you’ve got feedback for 2 out of the 13 icons, tell us what you don’t like about each one individually (or even better, mock something up for each one).
    • Please leave admin UI out of all mockups for this exercise (just icons on a white background for now).

    DON’Ts:

    • Don’t make broad declarations (i.e. “I don’t like them”, or “I like the old icons better”).
    • Don’t comment on the color/contrast (we’ll save that for another discussion).

    Thoughts:

    Source File

     

    • George Stephanis 7:07 pm on February 26, 2013 Permalink | Log in to Reply

      I’m going to assume these letters aren’t the letters that the characters will necessarily be mapped to in an icon font (if that happens).

      L (key): I don’t like how narrow the point is where the disc connects to the key blade.

      Apart from that, I like it all.

      • lessbloat 7:09 pm on February 26, 2013 Permalink | Log in to Reply

        Right, just random lettering, they have nothing to do with the mappings. ;-)

    • Norcross 7:10 pm on February 26, 2013 Permalink | Log in to Reply

      from a strictly visual perspective, I’d prefer to see the them be aligned either by the top or the bottom. A and E (the paintbrush and camera, respectively) seems to be shorter than the rest.

      • Tom Auger 8:35 pm on February 26, 2013 Permalink | Log in to Reply

        That’s a good observation. In fact, it would be ideal if they were all the exact same pixel height. To that point, I, E and possibly A don’t appear to match.

    • Isaac Keyet 7:21 pm on February 26, 2013 Permalink | Log in to Reply

      Some thoughts…

      B: Compared to E, G, H, and I (which are all rounded) the comment bubble seems way too rounded and like it’s the odd one out. The big > also makes it seem less vertically centered (optically).
      H: compared to G and L, H seems “too long” and the optical center is off to the upper right which throws off the balance.
      E: most likely modeled after a classic camera (e.g. a Leica) and not a modern DSLR it makes sense in theory, but compared to other icons it’s less than round corners seems off. Especially when compared to C and F – these icons have very straight lines for a reason.
      I: my biggest pet-peeve is with this icon. It’s overly complex compared to most other icons in it’s detail, which becomes especially noticable in the small size. An icon with only two levers (one up, one down) would convey the exact same thing and reduce the overall business of the admin and settings sidebar section. The previous icon also only had two levers if I remember correctly.
      M: the cogs in the gear seem too tall, mainly because there’s no second gear to relate this cog to. Presumably the second gear would have smaller teeth to grip into this one, but as it is now all you have to go on is this icon on it’s own so you have to assume that subsequent gears have the same teeth size, which makes this gear impossible to work. (I know I’m being super picky now, but if you’re going to do it, better do it right! ;) ). A gear with bigger gaps in between the teeth/shorter teeth would make more sense.
      A, C, D, F, G (and to some extent I): these icons have gaps in between different parts of the icon, but they’re not all the same size (at least it doesn’t look that way) for consistency the gaps should all have the same optical depth.

      I’d be happy to mock up any of this. Or all of it. Source files? :)

    • sara cannon 7:21 pm on February 26, 2013 Permalink | Log in to Reply

      is (M) the gear for settings or (I) the board? Personally I like the gear.

    • Ipstenu (Mika Epstein) 7:24 pm on February 26, 2013 Permalink | Log in to Reply

      L – which is for ‘Sites’ in Network Admin has always felt a little indistinct. What does a ‘key’ have to do with your sites?

      G – I greatly prefer this to the straight horizontal icon before. +1 Having it at an angle feels better.

      E – I prefer E2 since it indicates that there’s more than just ONE type of media to be uploaded.

      B – I’m torn here. I prefer the B-original aesthetically, but B2 fits the schema more.

      M – I agree with Issac – The cog teeth are too tall. (Where is this being used? The icon for settings is the slider). Depending on how it resizes, maybe a dial with an arrow instead?

      I – Two sliders in the icon (like we use today) would be better I feel.

    • Chip Bennett 7:24 pm on February 26, 2013 Permalink | Log in to Reply

      A, G, and H (A and G in particular) are very, very similar; especially when viewed at a glance, and without accompanying text labels – and especially considering their on-screen/in-menu proximity.

      Is a paintbrush the best/most accurate icon for “Appearance”? Perhaps a painter’s palette, or a paint can/brush? Or maybe a monitor/screen with content, or a “layout” option (with boxes for header/content/footer/sidebar)?

      • Ipstenu (Mika Epstein) 7:27 pm on February 26, 2013 Permalink | Log in to Reply

        A painter palette would be more distinctive. (I think G and H look more ‘alike’ when on their angle… Maybe flip G so the prongs point straight down?

      • Isaac Keyet 7:33 pm on February 26, 2013 Permalink | Log in to Reply

        Nice thoughts…

        On this topic, I just realized that while A + G + H + J + L are all similarly tall, skinny and on a 45° angle, they seem to be on their particular angle randomly (A + G + H pointing up+right, J + L pointing down+left).

        If A + G + H is about changing up your site (not producing content), I think the Key (L) should also be pointing up+right.

    • Helen Hou-Sandi 7:30 pm on February 26, 2013 Permalink | Log in to Reply

      A and H having such differently shaped handles is what strikes me first, especially alongside G with its squarely terminated cable. I think the wrench (H) is perfect, so if sticking with a paintbrush, then I suppose I’d like to see what it’d look like with a handle similar to the wrench.

      However, I’m still torn about whether or not a paintbrush is really the right icon. I like it in many ways, but some of the items under the Appearance menu (widgets and menus in particular) don’t seem to fit with what a paintbrush conveys.

    • Tom Auger 8:38 pm on February 26, 2013 Permalink | Log in to Reply

      I like the simplicity of it all. I daresay F might be just a little too simple – could you add the typical “page curl” without increasing the visual clutter too much?

    • acsearles 8:52 pm on February 26, 2013 Permalink | Log in to Reply

      L (the Key) kinda bothers me. I think the joining of the teeth and the circle seems a little to fragile to me. At first I thought the key would be better horizontally but I think that the diagonal works with best with A D F G H J. Here’s an example that I like from the noun project. http://thenounproject.com/noun/key/#icon-No655

      B2 (comment bubble) is much better. Side note, I’ve never liked how a comment bubble tends to look like a thumbs down at small sizes but I’m not really sure how to get over that yet. Maybe something like this? http://cl.ly/image/3k463V0t1s0v This would take advantage of the top-right to bottom-left diagonal we have going and make it look a little less like a thumbs down. I also slimed down the height on the bubble. It was starting to have a little to much mass to it. It sticks out when it’s so big.

      E2 (media) I like the inclusion of the music note but the terminals on the end look weird to me as circles. Correct me if I’m wrong but most often a music note is more oval and sits kinda on a diagonal, which could be good for consistency. Here’s what I’m thinking. http://cl.ly/image/3z0x082d151V

      M (gear) I agree the notches are to tall. Just slightly down some would help. But I’m kinda with isaac on this one about two gears. I know one gear has become a common icon for settings pages and such but it’s really the gears working together that is the concept not just the gear itself. But these icons are pretty simple so a second gear might get too complicated. But if you do a second one, it should be on the same diagonal as everything else. This one from the Noun project I think does it well if we stick with a single gear. http://thenounproject.com/noun/gear/#icon-No6052 the difference is the inner-circle is wider and the notches are not rectangles they’re trapezoids. Plus the notches aren’t as tall.

      I (slider panel) is too complicated compared to everything else. Two would be better. Conceptually, with out text, I’m not sure what the difference between the M and I would be if I clicked on it. So maybe I needs to go back to the drawing board.

      A (paint brush) I like the eye idea from Isaac. But maybe we could go with something more like this. http://thenounproject.com/noun/eye/#icon-No2307 Isaac’s revered out eye is a little creepy. But I’ll a little hesitant to get away from the paint brush because it fits really nicely with everything else, where I don’t think an eye would. If we did an eye, I would put some thought into trying to make it conform to the diagonal that we’ve already go set. I don’t love it but I would start here. http://cl.ly/image/0a2O1i2C473f

      F (pages) Sorry Tom, I think the curl might be too much. if you ad the curl then you’ll need a line to help distinguish it. I don’t think it needs it. But for the pages I would bring down the page on top to overlap more of the page on bottom. That way it’s a little more stream lined but you keep everything else that’s good about it. I agree with some commenters above that it stands a little to tall. Here’s where I think you should move it to. http://cl.ly/image/2G0X092d1G1G

      Well, that’s all my thoughts. Sorry it’s a little long.

    • Matt Thomas 3:07 am on February 27, 2013 Permalink | Log in to Reply

      I think the individual forms are looking good, but they could benefit from tweaking the size relationships between them. If we extend square or rectangular icons all the way to the edges of their specified size, then non-square icons all look optically too small by comparison. The Chrome Web Store has some really simple but relevant guidelines on how to space differently-sized icons for optimal size consistency between them. https://developers.google.com/chrome/web-store/docs/images#iconsize

    • Ricky Lee 3:24 am on February 27, 2013 Permalink | Log in to Reply

      It is such a drastic departure from current textured icons. I understand that flat design is in right now but a slight inner shadow would work wonders.

      https://dl.dropbox.com/u/12607958/menu.png

    • Aaron D. Campbell 4:37 am on February 27, 2013 Permalink | Log in to Reply

      I definitely like B2 & E2. The Key (L) looks a little funny. I think most keys have a shoulder up next to the round part. Adding that might help.

    • lessbloat 2:19 pm on February 27, 2013 Permalink | Log in to Reply

      Overall I think these are looking great. Ben has done an awesome job getting us to this point. All that’s left in my mind is a bunch of nit picky minor stuff to make them more cohesive.

      My thoughts:

      A – The top most rounded corner of the paintbrush seems off (could it be smoothed out)

      A – The width of the white line between the brush and the handle seems inconsistent with the rest of the white lines in the set (i.e. between the roof and the house in C)

      B2 – I prefer this one over B, but it still seems inconsistent when compared to the border radius on E & I.

      C – Lines here are all very straight compared to the other icons. Could we slip in some very slightly rounded corners?

      C.32 – I think it’s an optical illusion, but the gap between the roof and the house seems almost too thick.

      C.16 – The thickness of the roof is somewhat lacking, which causes it to appear lighter than the rest of the house

      D.32 – The thickness of the inner ring seems just right. The outer rings seem a tad thick.

      E2 – I like it. We should try to reduce the overall height to better match the other icons if possible. I like what acsearles said about oval terminals if we can work that in.

      F – Again, the straight edges stand out to me. Even slightly mouse nibbled corners would help bring this one inline with the others.

      G – I like it.

      H – Seems slightly too large

      H – You might be able to drop the hole at the bottom of the handle. It shows a level of detail that is not present it the rest of the icons, and I think it will make resizing the wrench a bit more manageable.

      I – If we can get away with two sliders, I think that would be best. As it stands it’s currently rather complex compared to the others.

      J – I like it.

      K – You might get away with flattening the bottom curvy line. It stands out to me since most of the other icons in the set have a flat bottom.

      L – I agree with Aaron Campbell Squaring off where the key meets the round part should help here.

      M – Rounding the corders of the tips of each cog might help

      M.32 – You could bring the inner circle here out a tad.

      In general:

      As Matt Thomas and others pointed out, we should take a close look at the size relationships, and see if there is anything we can do to make these more uniform.

      There seems to be a lack of consistency in line widths, as well as white spaces. Compare the roof in C, with the link widths in D, with the plug widths in G, and the pin needle width in J. They are all slightly different. Then compare the white spaces in-between the brush and the handle in A, with the roof and the house in C, with the space between links in D, with the white lines in F, G, and I. It’s super nit picky, and in several of those cases there might not be much that can be done about it. But it’s worth taking a second glance.

    • Empireoflight 3:48 pm on February 27, 2013 Permalink | Log in to Reply

      http://cl.ly/image/162s2W3Y2T0X
      a: I smoothed out the curve at the top of the brush a bit, and added a few “eye” options. A palette will get to complicated at the small size. The eye seems creepy to me.
      b. I bumped the speech arrow over a pixel; a bit more like @acsearles recommended.
      c. I lowered the rook a bit so the white line is softer.
      d. Unchanged; I tried making the outer rings a bit skinnier but it looked too thin compared to the rest of the icons
      f. unchanged
      g. I made the stem slightly rounded per @helen‘s suggestion. I don’t think we can put it in the same boat as paintbrush and wrench, as those terminate and the plug should suggest continuing outside the icon, but I think this is a decent compromise.
      h. nuked the hole. I like the hole.
      I. did a few variations. I like three sliders best.
      j. untouched
      k. straightened the bottom of the profile. I like the curve better, it suggests the old icons and makes it more human.
      l. Made the diaganol cogs a bit skinnier and the outer ring larger.
      m. Make the connection point to the main part of the key bigger. I tried flipping/rotating the key but it looked really weird. It has a precedent in the post icon so it’s not an anomolly.
      overall: I didn’t touch positioning or lining them up. They are in slightly different places based on their context in the menu, and if I line them up they look wack when seen in the menu. I didn’t touch scale; again, some may look too big or small but when I originally designed them I did it in context and they seem much better proportioned when seen that way.

  • Matt Mullenweg 5:08 pm on February 25, 2013 Permalink | Log in to leave a Comment
    Tags: hangout   

    It seems to be moving in the right direction, but just to make sure we’re all on the same page let’s do a G+ hangout for discussing the Great Flattening — how about one of these times:

    • Wednesday Feb 27 at 11a PST / 19h UTC.
    • Thursday Feb 28 at 10:30a PST / 18:30h UTC.
    • Saturday Mar 2 at 9a PST / 17h UTC.

    Leave your name and which times work for you, if any, and we’ll pick one.

     

  • Helen Hou-Sandi 2:10 pm on February 12, 2013 Permalink | Log in to leave a Comment  

    Discuss: Icons 

    If you’re running trunk, you’ve probably noticed some new icons being tried on for size. There’s ticket #23333 on Trac for them, but it’s quickly becoming overwhelming and I’d like to give design-minded folks a chance to focus in on the icons themselves and discuss without as much distraction regarding the rest of the admin (see #23415, which absolutely goes hand-in-hand), SVG-vs-font-vs-plugins oh my, developer rabbit holes, etc. Trac just isn’t a great fit for some of the discussion, anyway.

    I’m seeing a few focal points for discussion:

    • Icons themselves, from a graphic design standpoint. What works, what doesn’t, what might make this style of icon “WordPress-y”, other things that I personally (as a non-designer) can’t prompt very well.
    • What kind of treatment flat/vector-style icons need to really work in the WordPress admin, e.g. hover states, colors, etc. Size is also perhaps a part of this, although do keep in mind that we can play with the sizing and styling of other elements as well.
    • What other icons we need beyond the admin menu – post formats is definitely one, and perhaps we can also start thinking of other places that could use icons as a part of the visual vocabulary.

    Some helpful links from the 88 and counting comments on the ticket:

     

    • Helen Hou-Sandi 2:17 pm on February 12, 2013 Permalink | Log in to Reply

      I’d particularly like to see @empireoflight and @melchoyce combine forces and work to create a more complete set for use around the admin – there are elements in each set that seem very strong to me. Of course, I would think that any contributions are welcome; I’m just going with what’s been done so far so things keep moving.

      Post formats needs an icon for each of the 10 formats – not sure if standard should just use the regular pin icon or if there are any other icons than can be reused. I’m also seeing where an icon could be used in the inputs/textareas themselves – URL, quote, quote source, embed code/URL, image, and gallery. @melchoyce’s wireframes used icons and placeholder text rather than visible labels, so I’d like to at least give that look a shot. For the record, so nobody jumps on me, in my current patch, labels are still there, just not visible, and we’d need to keep it that way for accessibility.

    • esmi 2:43 pm on February 12, 2013 Permalink | Log in to Reply

      Speaking from a purely design/usability pov, I find the darkness/heaviness of http://bendunkle.com/wp-admin-icons/ somewhat intrusive when it comes to readability. Any chance we could lighten them (a la the current icon set) and then revert to a heavier/darker version hover and onfocus? That might also sidestep the accessibility issues of using red as a highlight color. The Post and Appearance icons look rather similar to me at first glance. Perhaps the Post icon could be swapped out for the more stylised pin in http://core.trac.wordpress.org/attachment/ticket/23333/icons-18-24-32.png

      • Chip Bennett 1:35 pm on February 16, 2013 Permalink | Log in to Reply

        That\’s my biggest complaint thus far: Post, Appearance, and Plugin icons are all way too similar. Also: I don\’t get \”paintbrush\” = \”appearance\”. (I assume that\’s what the appearance icon is?) IMHO, a paintbrush implies \”format\” or \”color\”, not header/background/Theme options.

    • @mercime 5:23 pm on February 12, 2013 Permalink | Log in to Reply

      I’m all for the icon fonts by Ben Dunkle. Instead of making heavy/solid icon fonts, how about making it outlines instead for a cleaner look? Compare bbPress and BuddyPress outline icons with solid wp-admin icons http://mercime.files.wordpress.com/2013/02/wp-admin-buddypress-bbpress.png?w=145

    • Empireoflight 7:53 pm on February 12, 2013 Permalink | Log in to Reply

      @mercime, the outlined look doesn’t translate to an icon font very easily; hence the solid icons. However, it gives me an idea for an “open face” icon set, as a variation on the theme.
      As for the icons looking too large, the intention is for more padding to be added but we’re playing w/that. They do seem a bit dark, but the great thing is you can quickly change the color w/css.

    • Hugo Baeta 12:14 am on February 13, 2013 Permalink | Log in to Reply

      What if the icons were a very light embossed look? (it could still be an icon font, with text-shadow to create the effect).

      I am with the other comments I’ve seen, the icons look too bold there. One personal opinion about this style of simplified shape is that it really looks better if you keep simplifying, maybe even make them smaller?

      On a discussion with @koop he made a mockup of a super minimalist menu, removing the divider lines and adding more padding to the items. It felt so airy and light, I loved it! I’ll try to reproduce it and make a screenshot for y’all.

      • Hugo Baeta 7:23 am on February 13, 2013 Permalink | Log in to Reply

        ok, talked with @koopersmith before posting this here. One important thing to take note is that I don’t intend to distract from the discussion about the icons with the other changes showed in this screenshot. But it’s an interesting new way to look at the menu. Also keep in mind that the menu simplification is not my doing, but Koop’s and I love it so much I use it on my installations :P

        This said, here’s what I did: ( http://cl.ly/image/0a3S0a2G053I )

        • reduced the opacity of the icons
        • increased the margin around them

        What do you think?

        • lessbloat 8:00 pm on February 14, 2013 Permalink | Log in to Reply

          Really loving this @hugobaeta. Nice work with that screenshot!

        • lessbloat 8:10 pm on February 14, 2013 Permalink | Log in to Reply

          Here’s a before and after comparison:

          There is so much less for your brain to process with the one on the right. Though I’d argue that we could probably go even smaller with the icons there.

          • Ipstenu (Mika Epstein) 8:36 pm on February 14, 2013 Permalink | Log in to Reply

            I think that size is really good. Smaller and you start running into readability issues with people who don’t have aces vision. (And telling me to +1 font size in my wp-admin is a crap answer, by the way.) We COULD go smaller, but I think this is a really nice balance between size and all-around readability.

            • lessbloat 2:38 pm on February 15, 2013 Permalink

              As a clarification, I said smaller icons, not smaller text. ;-) Smaller icons would command less attention and actually improve readability for the text.

            • Ipstenu (Mika Epstein) 4:37 pm on February 15, 2013 Permalink

              I dunno, visual ‘readability’ of icons also suffers at smaller sizes. This icon size is really perfect. I feel like I’m not missing out on details and I can clearly see what everything is easily. If you made the images smaller, the thing lines in the images themselves would lose distinction.

            • Hugo Baeta 5:06 pm on February 15, 2013 Permalink

              My point with going smaller with the icons was also to go simpler, reduce detail. If you look at the old icons, they look “smaller” and more elegant comparing to these new ones, because the new ones are a solid block instead of gentle lines with highlights.

            • Ipstenu (Mika Epstein) 5:14 pm on February 15, 2013 Permalink

              Hugo, the current ones are so small for me I have a hard time noticing the visual diff between Feedback and Appearance today. Smaller images will lose pattern recognition ability (I don’t know if that’s the right term…) and make it harder to tell everything apart at a quick scan when you collapse the bar. A lot of people cannot collapse the sidebar now because they lose the ability to tell what’s what when they do.

              Since we’re already removing the detail and going with flatter images, which I like by the way, we have to make sure to keep them distinct. I feel smaller will lose that.

            • Hugo Baeta 5:18 pm on February 15, 2013 Permalink

              and, actually, the old ones ARE smaller! Here’s the evidence:

            • Hugo Baeta 5:28 pm on February 15, 2013 Permalink

              Fair argument @ipstenu. But if the icons are getting bigger, then the text also needs to follow that to keep proportion. Maybe that’s exactly what the menu needs… do you guys remember how clear the old (pre 2.7) menus were? yes, the horizontal blue bar at the top!

              quick mockup with inspector:

        • Mel Choyce 12:51 am on February 21, 2013 Permalink | Log in to Reply

          Late to the game on these, but just wanted to comment on how much I like this layout & grouping. I think we could play with spacing and division between content & settings a little more, but this feels like a much nicer fit for the new icons.

      • Drew Strojny 2:56 pm on February 14, 2013 Permalink | Log in to Reply

        One personal opinion about this style of simplified shape is that it really looks better if you keep simplifying, maybe even make them smaller?

        I haven’t read through much of the discussion to date, but this is the first thing that jumped out at me when I updated and saw the current flat icons. While I love them, they look disproportionately large and out of place to me in the current menu. +1 for making them smaller and/or re-evaluating the proportions of the surrounding elements. I think Hugo / Koop are on the right track with the screenshot.

        I also think @lessbloat echoed similar comments in the Trac ticket and provided a screenshot of a non-gradient version with more spacing, which I also think is on the right track.

        I’m also not a big fan of the white hover on the current background. Not enough contrast. I’d say a subtle change to a lighter grey when hovering would work well.

    • Helen Hou-Sandi 6:22 am on February 13, 2013 Permalink | Log in to Reply

      Something that came up while I was talking to @koopersmith about something else entirely – the toolbar icons seem to really work well in terms of language and staying power, and maybe even personality, as minimal as they are. The admin menu icons in trunk clash somehow – perhaps it’s the roundness, perhaps it’s something else. That part I can’t quite quantify. What I’m trying to say is that I think the existing toolbar icons are an important starting influence :) The admin menu icons are less a cue and more a unique reference, so they do function a bit differently, but having two different styles of vector icons is going to give a disjointed experience.

    • Archetyped 8:37 pm on February 14, 2013 Permalink | Log in to Reply

      Thank you for starting this discussion @empireoflight and thanks to @helen for bringing the discussion out of Trac (is it okay to say it’s chaos in there?).

      I’m curious what the “official” goal for this potential icon reboot is? “Scalability and utility” (as put forth by @empireoflight) are good reasons, but are they a higher priority for WP than things like branding and personality?

      These icons feel rather “generic” to me. While the official icons have their flaws, they are unique and give WP a particular flaire that helps to identify WP as “different”.

      It’s not about flat vs shaded, it’s about identity. Sure, generic icons would definitely make it easier to implement WP as a white-label CMS for clients, but I for one would feel the loss of a certain amount of whimsy and fun that drew me to WP those many years ago.

    • Chip Bennett 1:41 pm on February 16, 2013 Permalink | Log in to Reply

      Are these icons being tested with the menu both expanded and collapsed?

      Most of the icons make sense, but in the collapsed state, the old \”Appearance\” icon is far more meaningful than the new one, IMHO.

    • lessbloat 4:32 pm on February 21, 2013 Permalink | Log in to Reply

      Was chatting with @joen about the icons, and he mocked up:

      As a riff on some of the icons styles. Posting it here to add to the existing discussion.

    • Empireoflight 12:40 pm on February 22, 2013 Permalink | Log in to Reply

      I did a ton of tweaking, both the images and css last night. Icons are a bit smaller still and include an orange hover state (it should be orange like the text, not white). It’s pretty much what we currently have in 3.5 with new icons. I used @melchoyce ‘s suggestions for the angled plug; Mel, let’s talk soon about the post format and other icon.s I added an active state into the menu sprite. I’ll submit it to trac today, but here’s the preview: http://cl.ly/image/2j0a3F2W271b (how do I insert images directly to this thread?)

      • Hugo Baeta 9:36 pm on February 25, 2013 Permalink | Log in to Reply

        Hey @empireoflight – I like what you did there, the size reduction makes them feel a bit more proportional. And the all gray treatment (including text) also makes the new icons fit better.

        To include an image inline, just write the html for it <img src="… ;)

  • lessbloat 8:24 pm on February 7, 2013 Permalink | Log in to leave a Comment  

    Here’s round 7 of our menus usability tests with 23119.25.diff applied.

    User #13

    Here’s the video.

    Step 1: Log in

    No issues.

    Step 2: Go to menus

    No issues.

    Step 3: Reorganize pages

    No issues.

    Step 4: Preview changes

    No issues.

    Step 5: Remove menu item

    No issues.

    Step 6: Add another menu

    3:50 – He struggled to notice the “Add Menu” link. He finds it at 4:10.

    Step 7: Add links

    No issues.

    User #14

    Here’s the video.

    Step 1: Log in

    No issues.

    Step 2: Go to menus

    No issues.

    Step 3: Reorganize pages

    No issues.

    Step 4: Preview changes

    No issues.

    Step 5: Remove menu item

    No issues.

    Step 6: Add another menu

    No issues.

    Step 7: Add links

    No issues.

    Observations/Thoughts

    • I feel like these speak for themselves. ;-)
    • The first user had a bit of trouble finding the “Add Menu” link, but I’m okay with that seeing as a) it conforms to the way other “add new” links are done in the admin, and is likely much easier for users who have used WP before to any degree, b) as we’ve discussed adding more than one menu is somewhat of an edge case for the majority of users.

    Thoughts?

     

    • Joey Kudish 8:30 pm on February 7, 2013 Permalink | Log in to Reply

      sweet!

    • Bob Gregor 7:05 pm on February 22, 2013 Permalink | Log in to Reply

      I have to agree with user #14 at around 3:10: “how do I create a new menu?” hmmm….a HA! there it is up top. there is a good 4 second pause.

      I think the add new menu need to be a little more prominent – the problem is that on the edit screen there are a lot of items in the visual field. I think part of the problem is that the “Menu 1 has been Updated.” message creates a giant dividing line in the visual field. If we have it auto slide up after a few seconds, it will make it cleaner, and make it easier for a user’s eyes to drift up to “Menus – add new”

  • lessbloat 7:10 pm on February 5, 2013 Permalink | Log in to leave a Comment  

    I tested two more users on our menus scenarios with 23119.23.diff applied. With the addition of the zero menus state, I had to modify the script a bit, as it eliminated the need to 1) create a menu, 2) add menu items, and 3) assign your first menu to a theme location for first time users.

    (More …)

     

  • Helen Hou-Sandi 8:50 pm on February 4, 2013 Permalink | Log in to leave a Comment  

    Round 3 of post format UI user testing, using Crowd Favorite’s code for UI and display fallbacks along with San Kloud as the theme.

    Tasks:

    1. Login
    2. Look at the Dashboard and get to add post from toolbar
    3. Add a (standard) blog post with title and text
    4. Preview your blog
    5. Add an image blog post, with image from a URL
    6. Add a video post, with YouTube video URL provided
    7. Add a link blog post
    8. Add a quote blog post
    9. Add a gallery post
    10. Preview your blog again to see all the posts

    Test 1: http://wpusertesting.com/videos/DC7-5.mp4

    Note: there are a lot of comments in the video that are interesting but not relevant to the task at hand. Leaving out for the sake of brevity.

    1. Fine.
    2. Fine.
    3. Notes that that that was not where he was expecting to see the Publish button; seems to also feel that the box is overfull with all the options.
    4. Notes that it isn’t a preview so much as just viewing what you did.
    5. Finds the format tabs and chooses Image. Saves the image but not sure he needs to. Doesn’t see anything specific to an image post in the UI and finds it confusing. Goes to Add Media and finds the Insert from URL panel. Fills in the extra fields for caption, etc.
    6. Wants to watch the video in the editor.
    7. Notices that there’s no http:// in the URL field. Discovers that without http:// the display fallback code just shows “View on”, which is confusing.
    8. Wants a clear field for the quotation itself and for the field layout to reflect how it’s usually seen in the front. Notes that there’s no indication about whether or not the source URL field is required. On preview, notices that the display cuts off a word – thinks it shouldn’t truncate words, but would really rather be able to change the title.
    9. Uses the “Add images” button. Discovers shift-click. Wonders why one is blue – maybe the cover of the gallery? Doesn’t see a way to drag/drop them into a different order. New media modal inserts into the content editor rather than updating the Gallery Images area.
    10. Notices a post called “47″ – the image post that didn’t have a title. Thinks the title should have been the image caption he specified.

    Overall observations:

    • He’s opinionated :) Watch the whole video to see.
    • The output fallback seems to be helpful. Otherwise the theme wouldn’t show any of the data he entered and then who knows what the opinion might have been.
    • What other fallbacks might need to be in place for auto-generating of titles?

    Test 2: http://wpusertesting.com/videos/DC7-6.mp4

    1. Fine.
    2. Had to click the New menu in the toolbar to get the dropdown. Not sure what was going on there.
    3. Also has to scroll around briefly to find the Publish button, but doesn’t seem concerned about it.
    4. Fine. (Still the toolbar dropdown issue.)
    5. Chooses the image format tab. Just pastes the image URL into the content editor; isn’t clear where it was supposed to go.
    6. Puts the video URL in the specified fields; notes that there wasn’t such a field for image.
    7. Adds title to a regular post first, then switches to Link. Types URL with www but without http://.
    8. Fine.
    9. Uses the “Add images” button. Discovers shift-click. Uses “Insert into post”, as it’s the only option. Same effect as the previous test.
    10. Doesn’t see my favorite website, is afraid to click the link. Notices that the picture isn’t there. Video post is missing but she doesn’t seem to notice.

    Overall observations:

    • Found it easy to choose different formats for her blog post. Found WP overall to be easy to use, even with some of the things that seemed to not quite work.
    • This time, both users were concerned about the ordering of the images in the gallery.
     

  • Helen Hou-Sandi 4:03 pm on January 31, 2013 Permalink | Log in to leave a Comment
    Tags: , post formats   

    Have made it through the second round of user testing videos for post formats (thanks, @lessbloat). These were on core as-is, using Twenty Twelve as the theme. Should have switched to San Kloud to enable all formats, but it actually may not have made much of a difference for these. There’s a third round still to watch and annotate.

    Tasks:

    1. Login
    2. Look at the Dashboard and get to add post from toolbar
    3. Add a (standard) blog post with title and text
    4. Preview your blog
    5. Add an image blog post, with image from a URL
    6. Add a video post, with YouTube video URL provided
    7. Add a link blog post
    8. Add a quote blog post
    9. Add a gallery post
    10. Preview your blog again to see all the posts

    Test 1: http://wpusertesting.com/videos/DC7-3.mp4

    1. Fine
    2. Fine
    3. Takes a moment finding the Publish button, but otherwise fine.
    4. Fine
    5. Notices it says nothing about a title; adds one anyway. Uses Add Media -> Insert from URL.
    6. Again goes to Add Media -> Insert from URL. Inserts the video, which gets linked. Doesn’t work for oEmbed to have it linked :( Again adds a title herself
    7. Again goes to Add Media -> Insert from URL, but says she doesn’t think she’s doing it right. Tries to click the link that’s inserted in the editor to check if it goes to the right place.
    8. Corrects then to than :D Adds it as plain text in the editor.
    9. Add Media -> Media Library (woo!) Selects the three images using multi-select and inserts them all into the post.
    10. Checks the sesamestreet.org link, which works. Then she closes the tab, so it’s over before getting to see some things like video.

    Overall observations:

    • She never once noticed the post formats metabox or wondered why the instructions were telling her to write blog posts of various kinds.
    • Not having a title bothered her a bit, perhaps because it looks so important/required.
    • The media modal certainly seems usable/comfortable, as she kept returning to it and was really quite handy with it.

    Test 2: http://wpusertesting.com/videos/DC7-4.mp4

    1. A little copy paste mishap, but otherwise fine
    2. Fine
    3. Scrolls to look for the Publish button, then has to digest the whole Publish metabox to find the button. After publish, does not expect to stay on the edit screen, because she’s “done” / ready to move on.
    4. Fine
    5. Opens the URL and drags the images over to the other tab directly and drops into TinyMCE. Observes that more and more things on the computer support drag and drop, so it’s a familiar mechanism.
    6. Looks immediately for embed code. Copies and pastes code into the Visual editor; observes that it doesn’t show her what it will look like. Says that she would preview the post, but the test doesn’t say to do so, so she doesn’t. Wonders if there’s another way to embed; finds the format metabox. Selects “Link” and updates. Notes that changing and updating doesn’t seem to make anything look different. Wonders what it’s for – maybe a layout, but doesn’t make a difference to her.
    7. Remembers the format she discovered in the last task and selects it. Notes she wants selecting a format to come before adding information (not sure if flow or layout wise); because it’s under Publish she doesn’t notice it, and considers anything under there to be of use after publishing. Says she always previews/checks posts for formatting on her own blog :) Wonder what she uses…
    8. Selects format – “What is the difference here, exactly?” Is really expecting the editor area to change with selecting a format; wonders what the value even is.
    9. Selects Image format, presumably because Gallery isn’t available in Twenty Twelve. Looks around and eventually finds “Add Media”. Figures out to use shift to do a multiselect. Inserts them all; wonders if she did something wrong but notices that it’s formatted/shows images in the editor. Now wonders if Add Media should have been used for embedding the video to get a nice formatted view.
    10. Notices the “Link” flag on that post, but it doesn’t seem otherwise formatted. Considers lack of formatting in various posts to be a consequence of her mistakes.

    Overall observations:

    • Whenever a user thinks that it is their mistake that something didn’t make a difference or work right, we really need to look at how to fix that – to help them avoid the mistake in the first place and feel confident that they know what to do or can figure it out.
    • This could have been one of us testing such a feature. Her observations are all very astute – there’s no value in selecting a format when editing, which was further enforced by the theme display; the location on the screen is counter-intuitive to workflow; oEmbed is buried/not discoverable (and not just by WP); creating galleries as opposed to batch insertion is not something naturally thought about; and “Add Media” quickly becomes a familiar place to do more than insert images or upload files.
     

  • Helen Hou-Sandi 10:26 pm on January 21, 2013 Permalink
    Tags:   

    3.6 Core Development Cycle 

    If you’re looking to contribute to core UI, you’ll want to keep an eye on Make/Core, as we’re shifting our thinking of core UI contributions to being an integral part of various areas of core rather than a separate group/workflow/etc. All of the planned features for 3.6 include UI components and participation in them is highly encouraged. Office hours are either set or being set for each team and will be held in #wordpress-dev, so as always, feel free to join discussions as they’re held, whether in IRC, on the Make/Core P2, Trac, or elsewhere. Regular updates/summaries will be posted on that P2.

    Also, as you’ve probably noticed, we haven’t been having weekly UI group chats, due to a combination of the end of the 3.5 cycle and a shift in how we’re thinking about this group. For more, see @jenmylo‘s comment: http://make.wordpress.org/ui/2012/11/16/coming-soon-weekly-updates/#comment-22558. The #wordpress-ui IRC channel is always open, and we can use it for UI-focused discussions if #wordpress-dev is otherwise focused on something, but let’s all get comfortable in #wordpress-dev, too :)

    One last thing: this shift in thinking also applies to Trac. Right now there is a “UI” component, which is a bit of a mess and ultimately not a great help for watching for tickets of interest, as UI-related items are just as often found in other components. We’re working on emptying the component out by moving things into more relevant components (Administration is a good fallback if you don’t see another) and, for the time being, adding a manual keyword of “ui-focus”. In moving things, it’s also good to just be reviewing the issue the ticket raises and testing any patches provided, marking as needs-refresh if it doesn’t apply or closing the ticket (or making it with the close keyword) if it’s no longer relevant. There are almost 3500 tickets open right at this moment, which is an unmanageable number that leads to things getting lost. Let’s help get that down while we get Trac organized. Here’s the list of tickets in the UI component, and the newer list of things tagged ui-focus. If you’re not Trac-minded, don’t worry. If you are, we’d appreciate the help!

     

  • lessbloat 7:44 pm on January 21, 2013 Permalink  

    I thought I’d run one more user through testing our current concept of having both a “manage” screen and a “add/edit” screen for menus.

    For this test I added a quick little JS hack to visually highlight the “Menus in your theme” meta box when a user clicks there from the “add/edit” screen success message. You’ll see in the video that my implementation is ugly as sin. ;-) I just wanted to test the concept with the knowledge that if it worked, we could always improve the design.

    I also pulled the last step, which asked users to add a custom menu widget. While adding a custom menu widget is somewhat related, we likely won’t be addressing anything in widgets for this release.

    Here’s the video for user 9 (in our series of menus user tests).

    (More …)

     

    • Jerry Bates (JerrySarcastic) 8:54 pm on January 21, 2013 Permalink | Log in to Reply

      Great test, even if the cursor was a bit funky! I thought the feedback over audio was pretty informative as well.

      Having not seen all the videos in this series, how common is feedback like “I have no idea what I’m doing here, just following instructions” amongst subjects? This seems like a fundamental stumbling block that prevents users from getting to the right part of the dashboard in the first place.

    • adamsilverstein 10:26 pm on January 21, 2013 Permalink | Log in to Reply

      how about in the new menu and edit menu screens, we offer them the ability to assign the menu as the primary (or other menu), instead of adding an extra step. near the save button, “assign this menu to: [none, primary, footer, etc.]” that way you get to pick the spot the menu is going right from the beginning (or choose not too if using in a non standard location)

    • Diane Kinney 2:42 pm on February 3, 2013 Permalink | Log in to Reply

      I’m not sure where the right spot is to offer up this thought – but my single biggest frustration with menus is that they are not integrated with pages. Most of the sites we build are not blogs, but sites with lots of pages structured into different menus. It would save a lot of effort if I could tick off add this page to Menu A or Menu B right from the page editing screen.

  • lessbloat 8:09 pm on January 11, 2013 Permalink  

    Here are the results from user 7 (in our menus user testing series) & user 8 both with the 23119.17.diff patch applied.

    (More …)

     

    • Joey Kudish 8:20 pm on January 11, 2013 Permalink | Log in to Reply

      Sweet! this is looking good!

    • Drew Jaynes (DrewAPicture) 8:23 pm on January 11, 2013 Permalink | Log in to Reply

      User testing is so awesome. Maybe we should get more general with the link in the updated notice. “Manage your site’s menus” or something.

    • Jerry Bates (JerrySarcastic) 9:22 pm on January 11, 2013 Permalink | Log in to Reply

      I notice that User 7 did not correctly set the Custom Menu Widget to the Sites I Love menu. She left it set to Main Menu, which is filled by default instead… Maybe it would be better to have the Widget show a list with checkboxes (of the available menus) with none of them checked by default? Seems like an easy way to avoid that mistake.

      Perhaps if the Custom Menu widget was similar to the Categories metabox on the Add Menu screen? I.E. has a list with checkboxes for the menus, plus tabs at top for Recent, View All, and Search. That would add some parity between creating a menu, and configuring the Custom Menu widget.

      • lessbloat 4:02 pm on January 21, 2013 Permalink | Log in to Reply

        These are all good thoughts. Let’s make sure we address them when we tackle the widgets page UX.

    • kristofferR 9:25 pm on January 15, 2013 Permalink | Log in to Reply

      User 7 got confused at task 7, around 3:30, and did not manage to actually set the menu titled “Main menu” as the primary menu of the site. Some part of the issue may simply be because the name of the menu was confusing (“Main” and “Primary” are synonyms after all, no wonder she though the Main menu was the Primary menu), but I also think it was because the “Manage Menus” screen doesn’t provide adequate instructions like the other screens does.

      While the user previously was guided through the process of creating a menu with clear instructions positioned roughly the same place on the screen (top of main box on the right), after clicking the “replace your sites main navigation” link she was redirected to another page where other elements, mainly the table list of the available menus, are much more noticeable than the action she actually wants to take, which is setting the primary menu. The user shouldn’t have

      There could be solved in a few different ways.
      1. Add a sentence or two of explaining text in a yellow box
      2. Make the “Menus within your theme” box larger and more noticeable
      3. Grey out the table until a primary menu is set if the user came from clicking the “replace your sites main navigation” link.

      I think a combination of 1 and 3 would be best. Here’s a really quick mockup of what something like that could look like: http://molakki.com/files/wp-menu-1.png

      As a side note not really related to the menu UI changes we’re talking about here directly, but still seen in the user testing videos is how confusing the experience of saving widgets are. The user receives no feedback at all that the widget has been saved except for a spinning circle for half a second. It should instead be similar to how the experience is saving new changes in the customizer, like this:
      http://molakki.com/files/saving-widgets.mp4

      • lessbloat 4:04 pm on January 21, 2013 Permalink | Log in to Reply

        RE: Main menu – I’d like to try and move that to “Screen Options” and see what comes of it.

        RE: Widgets: – I agree, when we tackle widgets, let’s make sure we address this.

← Older posts

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