Make WordPress UI

Updates from lessbloat Toggle Comment Threads | Keyboard Shortcuts

  • lessbloat 6:10 pm on April 9, 2013 Permalink  

    How can I help with 3.6? 

    Are you looking for something to work on for 3.6, but don’t know where to start? Here a breakdown of a few open UI & front-end dev tasks broken down by skill set:

    UI

    HTML5

    CSS

    JS

    If you’ve always wanted to help out with core, but you’ve never taken the dive, now is your chance. ;-)

     

    • trishasalas 7:19 pm on April 9, 2013 Permalink | Log in to Reply

      I’d love to help out with ticket 23810. I have a test subject who is legally blind as well as color blind…Question though, I am unfamiliar with the ticket system, how would I get started?

    • ArielK 7:35 pm on April 9, 2013 Permalink | Log in to Reply

      Why Post Format also appears in themes that do not support it?
      It’s just unnecessary and misleading.
      Until 3.5.1, if the theme did not support the Post Format, it did not show up on the page.

      • mrwweb 8:01 pm on April 9, 2013 Permalink | Log in to Reply

        @arielk As best I can tell from looking at code in 3.6′s code (though I haven’t read anything about this), it seems like the extra post-format data will be appended/prepended to the the_content() if the theme doesn’t handle it separately. I’m not completely sure about this, so I’d love someone who knows more to clarify, but I think I’m seeing that.

        • ArielK 8:08 pm on April 9, 2013 Permalink | Log in to Reply

          @mrwweb I’m not talking about the theme itself, I’m talking about the display on the edit post.

          • mrwweb 9:05 pm on April 9, 2013 Permalink | Log in to Reply

            To clarify: *Because* post format data for 3.6 is displayed on the frontend regardless of the theme, it’s no longer theme-dependent on the backend.

      • lessbloat 8:51 pm on April 9, 2013 Permalink | Log in to Reply

        I think the plan is to have fallbacks for all post formats, for all themes, even those that don’t support post formats. See http://core.trac.wordpress.org/ticket/23347 for more.

  • lessbloat 2:13 pm on April 9, 2013 Permalink  

    Post formats Usability test – round 4 

    Here’s another round of post formats usability tests (testing against the UI currently in trunk).

    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 7: http://wpusertesting.com/videos/DC7-7.mp4

    1. Fine
    2. Fine
    3. Fine
    4. Fine
    5. She uses “Add Media” to add her image – didn’t really see the post formats options
    6. Since it worked once, she used “Add Media” again. Unfortunately the media modal still doesn’t embed videos from URL’s. This lead to a very confusing user experience.
    7. She still doesn’t see the post formats bar. She is actively looking on the page for something, but doesn’t see the post format icons and opts to add the link via the editor. In the end, the only way she can figure out how to add a link is through the media modals “Add from URL” option.
    8. She uses the editor to add the quote. She’s a little unsure how it works… But she figured it out via the editor.
    9. She adds the 3 images via “Add Media”, but didn’t actually add a gallery (though she thought she had). She just selected multiple images and inserted them.
    10. Fine

    Observations:

    • She didn’t use the post formats selector once. She didn’t even appear to see it.
    • Apart from the video post, she was able to perform all of the tasks successfully with just the media modal and the editor.
    • We really need to make sure that the “Insert from URL” feature inside the media modal embeds video URLS. We’ve seen users attempt to add videos this way in every single round of testing, and they are all very confused when a link is published, instead of the embedded video.
    • The user uses selects multiple images and inserts them thinking she’s added a gallery. I wonder how many users do this very same thing…

    Test 8: http://wpusertesting.com/videos/DC7-8.mp4

    1. Fine
    2. Fine
    3. Fine
    4. Fine
    5. She uses “Add Media” to add the image. Doesn’t see the post formats bar.
    6. She also attempts to add the video from the “Insert from URL” link inside of the media modal. It only adds a link. 6:20, she discovers the post formats bar. She selects the video format, and pastes the video URL into the title, and then the “Video embed code or URL” box. “Maybe I better not mess with it”, she says, unsure of if she should save her changes.
    7. She uses the link format, but ends up using the editor because there was no way to edit the link text via the link post format option.
    8. She goes back to using the editor to add the quote. Struggles a bit to know if it’s doing what she wants. After moving on to the next task, she discovers the quote post format, and tries it out. After she publishes it, and click the “View post” link, she gets a 404 error, and the quote is never really published.
    9. She uses the gallery post format option. Unfortunately that doesn’t take her to the gallery section within the media modal. She ends up just multi-selecting and inserting multiple images (again, thinking she added a gallery).
    10. 15:20 She takes a closer look at the post formats bar.

    Observations:

    • She didn’t see the post formats bar until half way through her test. After she noticed it, she thought it was handy, and mentioned that for the quote format, she preferred to use it.
    • She also attempts to embed a video via the “Insert from URL” option in the media modal, which only adds a link. I’m guessing this happens a lot.
    • There is no “link text” field in the link post format, so even though initially she selected the link post format, she opted to add the link via the editor.
    • She got a 404 error when she tried to publish a quote through the quote post format.
    • When on the gallery post format option, can we link directly to the “gallery” section from the “Add media” button?

    Thoughts?

     

    • George Stephanis 2:22 pm on April 9, 2013 Permalink | Log in to Reply

      Perhaps it’s worth including a new feature pointer to the new post type selector?

      • George Stephanis 2:22 pm on April 9, 2013 Permalink | Log in to Reply

        Errr … post format, rather. D’oh.

      • Matt Mullenweg 5:13 pm on April 9, 2013 Permalink | Log in to Reply

        If you have to point to it, you’re doing it wrong.

        • Mark Jaquith 5:28 pm on April 9, 2013 Permalink | Log in to Reply

          We point to just about everything new we add.

          • Manny Fleurmond 6:23 pm on April 9, 2013 Permalink | Log in to Reply

            But Matt has a point. The new feature has to be obvious or else a user won’t use it. When I first installed the beta, my first thought was that it was unobtrusive to the point of near nonexistence.

            • Mark Jaquith 12:23 am on April 10, 2013 Permalink

              Yeah, I agree. Am batting around some ideas. Some of our previous incarnations/mocks were more prominent.

      • paaljoachim 8:20 pm on April 27, 2013 Permalink | Log in to Reply

        I would personally junk the new Post Type selector as it creates confusion. Or even better incorporate it into the content toolbar area. It is not intuitive as it is seen in the video test.
        From watching test 7 I do so totally agree to how she was handling how to create posts.

        Create new post -> Then begin to think about what one needs to do.

        Inside the content area it is natural to click Add Media as the button is obvious to see. One would naturally also add a gallery in the same way. Adding a link can be a bit hard to understand and she is just kinda guessing how to add a link and clicks the Add Media button as she has become used to using it. It requires some practice in selecting text then clicking the lock icon in the toolbar to then add a link. Adding a video should be as intuitive as the woman in the video test makes it out to be, but for the moment it is not, but it seems that is changing in 3.6.

        Have one post type and then inside the content area…. add the content. Be it an image, gallery, quotes, chat, video etc. Instead of focusing so much on creating post formats it would have been A LOT better if the focus was on creating easier ways on adding content inside one area.

    • Manny Fleurmond 2:25 pm on April 9, 2013 Permalink | Log in to Reply

      I think the post format bar is a bit too unobtrusive. Maybe the icons need to be bigger?

      • Mark Jaquith 12:24 am on April 10, 2013 Permalink | Log in to Reply

        Current idea I’m batting around is bigger with text, at least until you’ve saved a draft and committed to a particular post format, at which point, we could show a more unobtrusive or change-oriented UI.

        • Samuel Wood (Otto) 12:47 pm on April 11, 2013 Permalink | Log in to Reply

          Definitely “with text”. A pure icon based UI is pretty awful in this case because there’s no way to know what those icons mean or do until you click on them. Each of those icons should have text underneath it saying what it is.

          I’m sure that these results might be different if somebody looking to add a “quote” had the word “quote” on the screen somewhere.

    • mindctrl 2:53 pm on April 9, 2013 Permalink | Log in to Reply

      The post format icons are too small and maybe even need to be a bit darker.

      The text that changes at the right end of the bar to indicate what kind of post format you’ve hovering over is too far away and disconnected from the mouse cursor.

      When you first “add new”, the cursor is in the title box, as it should be, but if you select a different post format, such as “link”, the “Enter title here” text goes away, and you’re presented with two boxes. It’s a bit confusing.

      When you enter a title, the permalink text shows up by “sliding” into view, and pushes down the content area box. Never really noticed that until watching the video, but it feels a bit weird now that I notice it.

      The “add media” modal needs work. If someone inserts a YouTube url like she did, the embed should probably show instead of a link.

      When adding a video link via the video post format UI, the video embed/box doesn’t show in the content area. I’m thinking something should show there similar to how an image shows.

      When adding a video post using the new post formats UI, the user is presented with a different flow than, say, the image format and gallery formats (both which have their own differences/inconsistencies). On video, they can paste a url into the box (which is quite big for a url, which I take to mean more than one is allow, and why doesn’t the image format mirror this?), they can use the big box that says “Select Video from Media Library”, they can use the “Add Media” button, and if they know it, they can just paste a URL in the content box if it’s an oEmbed capable link.

      When adding an Image post format post, there’s a box called “Link URL”. What does that mean to a normal person? Having not even tried it yet, I don’t even know what it means. Without having tested it, I would assume it’s a place to paste a direct link to an image. If that’s the case, why is the box smaller than the video URL box, which seems to allow/encourage multiple URLs.

      Note about previous paragraph: because I didn’t know what “Link URL” meant, I had to test it. Turns out, it’s a link that wraps the inserted image. Not intuitive, at least to me, and likely not to my mom or wife or anyone else that doesn’t live on the computer like I do.

      –
      Those are my quick thoughts for now. I’d be glad to share more later.

      Thanks for the user testing videos. They’re helpful.

      • Mark Jaquith 12:27 am on April 10, 2013 Permalink | Log in to Reply

        Thanks for your feedback. You make some really great observations, and I’d like to take action on most of them.

    • Robert Dall 4:02 pm on April 9, 2013 Permalink | Log in to Reply

      Mindctrl my thoughts exactly… Also what if you put a external link for a image in the media uploader. Does that link then get carried forward? Or does it get overwritten by the link url in the post format?

      • mindctrl 2:44 am on April 10, 2013 Permalink | Log in to Reply

        The image format doesn’t present the option to link the image in the media modal when clicking the big “Select/Upload Image” icon. You can only do that from the main post screen in the “Link URL” box – inconsistent with the way it works using the regular “Add Media” method.

        I think I’d rather see the “Select/Upload Image” icon/link and the “Link URL” options go away, and prompt people to use the “Add Media” button like they are when doing a gallery post. It provides both consistency and all functionality.

    • davidossahdez 4:06 pm on April 9, 2013 Permalink | Log in to Reply

      Maybe a text saying “Select your post format” just above the Post Format toolbar can be useful. The user needs to know what are going to do that great looking buttons. Also, the bar is big enough to put a label to the side of each button. The colors must be conserved. They are unobtrusive for people that simple wants to make standard posts, what actually is great.

    • emanuel_blagonic 8:03 pm on April 9, 2013 Permalink | Log in to Reply

      Hi everyone, let me drop in in this discussion. We work a lot with the users and most of them would say that the post format bar is not really visible. I think there are 2 issues there:

      1) The only thing you see when you want to create a new post is the info on the right side saying “Standard Post”. I think the better call to action would be “You’re creating a Standard Post” or something similar. Off course, I’m not a native english speaker so have that in mind. Maybe this will be more helpful?

      2) Visually, the post format bar looks really nice, but what would be better is if the bar would be in a for of a tab-navigation. I think this could make an visual impact for a user to see post formats more clearly and because of the tabs (and seeing the selected tab as well) will lead him to think there is more than only creating Standard Post.

      My 2 cents, sorry for bad english ;)

    • petemurray 8:12 pm on April 9, 2013 Permalink | Log in to Reply

      The other post formats look unclickabe. Grayed out = not an option to most users.

      The head of the page says ‘Add New Post’, I’d think that the post format is already selected. Perhaps ‘Add New’ would work better? It would leave the user with a choice to resolve.

      Perhaps also a visual tweak – make the buttons appear tab like?

    • Mel Choyce 9:15 pm on April 9, 2013 Permalink | Log in to Reply

      Maybe some color could help?

      • Robert Dall 9:48 pm on April 10, 2013 Permalink | Log in to Reply

        I would have to agree… the use of colour would help in the UI a lot… But I would also comment that larger icons would great increase usability for those without great eyesight or getting on in years.

    • Isaac Keyet 9:33 pm on April 9, 2013 Permalink | Log in to Reply

      The problem is fundamental. If you ask someone to post a new post in WP, these are the steps they would have to take:

      1. Log in
      2. Find Posts in sidebar, click Add New
      3. Type up a post, Publish

      If you ask someone to do an image post they’d follow the exact same steps. It’s a problem with intent. If the user intends to post an image post from the start, that should be the starting point. The current UI is not action centric and therefore the process is illogical to users.

      Consider this for a regular post:

      1. Log in
      2. Find “New Post” or equivalent somewhere in the UI
      3. Type post, Publish

      And this for an image post:

      1. Log in
      2. Find “New Image post”
      3. Create post, Publish

      Action-centric.

      • Mark Jaquith 12:33 am on April 10, 2013 Permalink | Log in to Reply

        Or:

        1. Log in
        2. Find “Add New” or “New Post” or equivalent
        3. Be prompted as to what kind of post you’re creating
        4. Create post, Publish

        The problem with making the decision as the first step is that we have a lot of entry points, and our menus would become really huge if each format got a spot.

        Now, that’s not to say that we can’t have such “choose first” points. But I don’t think we can do it universally. I’d actually like if the dashboard had a Tumblr style row of huge post format icons that’d jump you into creating something of that type. I think @melchoyce mocked that up.

        • Mel Choyce 1:26 am on April 10, 2013 Permalink | Log in to Reply

          > I’d actually like if the dashboard had a Tumblr style row of huge post format icons that’d jump you into creating something of that type. I think @melchoyce mocked that up.

          Better yet, @ryelle already coded it up — she was just waiting on me to get her finalized icons. We decided in chat to make it a plugin before putting it into core.

        • mindctrl 3:09 am on April 10, 2013 Permalink | Log in to Reply

          The Tumblr style row of icons with text below would be great for the dashboard, and a smaller-sized version for the post-new screen.

          The default dashboard config has a lot of things that I think average users don’t really care about, and I’ve heard that a few times.

          The “Right Now” box is full of stat data that doesn’t serve a useful purpose for average people. I don’t think most people care that they have 33 posts, 14 pages, 52 categories or 49 tags. I don’t think they care what the name of their theme is and how many widgets are active. At least not in their face every time they login. They don’t need to see which version of WordPress they’re running there too, since it’s already in the footer.

          All of that is precious real estate that could be used better for actionable items like the row of icons.

          Obviously that’s all configurable; just speaking about the defaults – which are many peoples’ first impression.

          I’d love to see that mockup of the row of icons mentioned. That would make a great default dashboard widget.

    • Lance Willett 9:23 pm on April 10, 2013 Permalink | Log in to Reply

      Have we done a variation where the “Add New Post” text changes with the chosen format? I keep thinking it’s a bug that it doesn’t change.

      Example:

      • Robert Dall 9:54 pm on April 10, 2013 Permalink | Log in to Reply

        Agreed… That would help… What about taking a page from Apple’s Mail Program with having the icons under the text.

    • sara cannon 7:41 am on April 11, 2013 Permalink | Log in to Reply

      I did an exploration exercise on post format UI – blog post here http://ran.ge/2013/04/11/re-thinking-wordpress-post-format-ui-an-exercise/ – I agree with lance that the title should change with the format

    • Paul 2:04 pm on April 28, 2013 Permalink | Log in to Reply

      I don’t think making crap icons bigger, or changing them to crappier colors is going to help here. also the whole implementation seems to be half in and out. I don’t mean to hurt anyones feelings but I feel like maybe we need to be a bit more honest about the whole situation. (

      1. I think text based tabs would be better than the current offering, as well as greater clarity of which item is selected. It needs to explicitly show that its actually related to the rest of the items on the page (as one usually does with tabs for example ). I’ve been using the a custom variation on crowdfavourties post formats UI for a while on a number of client projects, and had quite a bit of success with clients getting it straight away.

      2. This all seems to be a blatant attempt to duplicate tunblr’s way of doing this – except doing it poorly. WP has always been one step ahead in usability in my opinion, and its a competitive advantage that should not be sacrificed.

      3. I agree that if you have to point to it you’re doing it wrong. though an initial prompt might be a good idea, with a highly visible “switch format button type”.

      4. There needs to be a meta boes and screen adaption for every post format for the text prompts on screen to place holder text. There could be post format descriptions added though that may be a little long winded. at the verr least the title Must change from add to post to add new standard post / add new video post etc.

      While the above criticism may come accross as a little harsh these are my initial reactions and they should be tempered by the fact that I do believe better support both for developers and users in the core when it comes to post-formats is fantastic, and a great step forward, just not in how its being approached right now, also that I see that its one hell of an undertaking.

  • lessbloat 5:06 pm on March 12, 2013 Permalink  

    We decided to test bringing the theme locations back out as a meta box (instead of using checkboxes) to figure out if the old layout would work for users.

    For this test, I removed theme locations as checkboxes, and added the theme locations metabox back in. I also moved the “Automatically add new top-level pages to this menu” option back to it’s old spot, because it looked odd by itself.

    Here are the results:

    User #17

    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

    2:30 – She doesn’t see the “create a new menu” link. She starts typing in the existing menus name field, thinking she’s creating a new menu.
    3:20 – After saving her changes, she realizes that she made a mistake, and changes the menu name back to “Menu 1″.
    3:30 – She see’s the “create new menu” link, and is on her way

    Step 7: Add links

    No issues.

    Step 8: Delete menu

    No issues.

    Observations/Thoughts

    • This user was sharp. With that said, having the theme locations meta box back in the top left corner, revealed two undesirable behaviors. 1) She assumed that the theme location metabox was where she managed her menus. 2) She thought she could create a new menu by editing the existing menus name field, and saving it. We’ve seen both of these behaviors before the last time we tested having the theme locations meta box in the top left corner.
    • For the next test, I’m going to try moving the theme locations box below the menu item options.

    User #18

    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.

    Step 8: Delete menu

    No issues.

    Observations/Thoughts

    • Overall, the second user succeeded with all of the tasks. She had to look for the “add new” link and the “delete menu” link, but she found them without too much trouble.

    Thoughts?

     

  • lessbloat 2:09 pm on March 7, 2013 Permalink  

    Here’s the last round of menus usability tests with 23450.6.diff​ applied.

    User #15

    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.

    Step 8: Delete menu

    No issues.

    User #16

    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

    4:35 – When she expanded the menu item, the remove link was below the fold, so she did not see it. This caused confusion.

    Step 6: Add another menu

    No issues.

    Step 7: Add links

    No issues.

    Step 8: Delete menu

    No issues.

    Observations/Thoughts

    Overall, everything worked great. We added a task to delete a menu in there, to double check that users were able to spot it at the bottom, and they both seemed to find the link easily enough.

    The second user found a bug. The extra description items (CSS, XFN, Description) were unchecked in screen options, and should not have been showing in the menu item edit screen. Since they were there, the “remove” link was pushed below the fold, which caused her confusion. We’ll need to fix this.

     

    • Chip Bennett 2:18 pm on March 7, 2013 Permalink | Log in to Reply

      Can I throw in a vote for returning the “Theme Locations” meta box? IMHO it is far more intuitive to associate Theme Locations with menus, than to associate menus with Theme Locations. It is also far more useful to see, at a glance, what Theme Locations have assigned menus, than to see what Theme Locations a given menu is assigned to.

      To test:

      Step X: Assign a custom menu to every Theme Location provided by the current Theme

      I think this step – critical to the setup of any given Theme – has been made more difficult with the current UI changes.

      • lessbloat 2:35 pm on March 7, 2013 Permalink | Log in to Reply

        Thanks for your feedback Chip. Honestly, neither solution is ideal. The decision came down to a choice between the lesser of two evils.

        The old way of doing this had several down falls:

        • The positioning of the theme locations meta box was confusing. It was aligned in the left column at the top, which A) pushed the menu item options down (which was not ideal), and B) seemed out of place when the rest of the actions in that column dealt with adding menu items to your menu. With the new layout, all of the items in the left column now perform the same function (adding new menu items).
        • With the old way, adding a new menu was a three step process. 1) Add a new menu (enter the menu name, and click “create menu”), 2) Add menu items, and then 3) Select a theme location. The new approach reduces this to two steps.

        As such, I feel like the new approach simplifies things for the better.

        • Chip Bennett 2:55 pm on March 7, 2013 Permalink | Log in to Reply

          The positioning of the theme locations meta box was confusing. It was aligned in the left column at the top…

          Agreed. But why not put the Theme Locations metabox in the main column, right above the Menu-Edit metabox?

          The new approach reduces this to two steps.

          But the reduction-in-steps isn’t associated directly with the change. After creating a new menu, the user must still assign the menu to a metabox – only using checkboxes now instead of the dropdown.

          Also, this workflow appears to assume: a) a New Theme, with b) no previously created custom nav menus. Have you done UI testing for a user who already has created custom nav menus, then switches Themes?

          And to keep responses in one place:

          Also, you can see at a glance which theme locations are assigned to which menus in the menu select drop down

          “At a glance” requires clicking the select, in order to see all menus/Theme locations. That’s an extra step from the old UI, when all Theme Locations were visible without user interaction. Also, I’ve not tested: how does the current UI scale when the same menu is applied to multiple Theme Locations?

          • Chip Bennett 3:12 pm on March 7, 2013 Permalink | Log in to Reply

            Oh, and I forgot to mention:

            Also, you can see at a glance which theme locations are assigned to which menus in the menu select drop down

            You also cannot tell from that select whether all Theme Locations have menus assigned.

            The only way to know if there are any Theme Locations without menus assigned is to make a mental note of the assigned locations in the dropdown at the top of the page, then compare that mental list with the list of checkboxes at the bottom of the Edit-Menu metabox.

            IMHO, that is a pretty significant UI loss inherent in this change.

        • Chip Bennett 3:51 pm on March 7, 2013 Permalink | Log in to Reply

          I moved discussion to Trac, as it seems more appropriate there. Let me know if I’ve picked the wrong ticket.

      • lessbloat 2:39 pm on March 7, 2013 Permalink | Log in to Reply

        Also, you can see at a glance which theme locations are assigned to which menus in the menu select drop down:

  • lessbloat 6:52 pm on February 26, 2013 Permalink  

    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.

    • t.schwarz 5:41 am on March 9, 2013 Permalink | Log in to Reply

      G/H. I think the relative sizes are a little off. The plug seems too “fat” compared to the wench.

    • Greg 10:28 am on March 18, 2013 Permalink | Log in to Reply

      Hey All

      This is my first contribution to the ‘make’ area so be gentle.

      As a starting point I generalised and said to myself, to create a flat design we remove the ‘edges’ from designs, thats the strokes in between menu items, strokes to delineate areas or functionality and in this case edges to sharply define shapes and icons. With this in mind I removed the sharp points which seemed to unity the feel to the icons.

      Below basic rationalizations to change current icon.

      A: I saw an artists brush as a better representative icon for appearance over a painter’s brush.

      E: This is really tricky as the icon with the camera and musical note has a lot of information in a small area so I felt really motivated to change it, the problem is to what ?? I took the view to represent what can be done with media assets rather than what types assets are supported. So to kept it really clean and used the ‘play’ symbol.

      K: Each icon has a similar level of detail with regard the silhouette, so I added more human attributes to what was an overly simplified silhouette.

      https://dl.dropbox.com/u/504792/icons.png

  • lessbloat 8:24 pm on February 7, 2013 Permalink  

    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  

    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 …)

     

  • 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.

  • lessbloat 7:27 pm on January 9, 2013 Permalink  

    Two more menus user tests, focusing on this layout concept: User 5 (in the series) & User 6.

    (More …)

     

    • Andrea Rennick 7:32 pm on January 9, 2013 Permalink | Log in to Reply

      Can you add to your test adding a link to the home page?

      From what I see with new users, they make a page called home and add that to the menu instead of filling out the custom link box.

      • Andrea Rennick 7:54 pm on January 9, 2013 Permalink | Log in to Reply

        Just to add to this… many new users do not realize that their URL is their home page.

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

        Yeah, this is a pain point for many, I’m sure; it’s a pretty non-obvious process to add “Home” to main navigation, and unfortunately one that varies from theme to theme. :-/

      • lessbloat 2:49 pm on January 10, 2013 Permalink | Log in to Reply

        Hmm… That’s a good point. What if we added a new meta box called “common links” which just had a couple checkbox options:

        • Home
        • Log in
        • Anything else? RSS?

        If we added that, where would we put it? Now that the “Theme Locations” meta box is on another screen, we could probably get away with:

        What do you think?

        • Jerry Bates (JerrySarcastic) 10:45 pm on January 10, 2013 Permalink | Log in to Reply

          Just thinking out loud… since so many use WordPress as a CMS, you could argue that a checkbox for “Blog” makes sense. Maybe have it show only if someone has set a Posts page in their Reading settings (so hidden by default) and get the menu link from that setting?

          IMHO RSS is an edge-case, but it can’t hurt.

        • Andrea Rennick 2:59 pm on January 13, 2013 Permalink | Log in to Reply

          Log in definitely, as it is a pain to add it otherwise. (If you want it to be dynamic)

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

      How about a link in the yellow success message that says something like “would you like to add this menu to your site” or something similar? Seems like a good way to prompt them, and also links them back to where they can make that setting change.

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

      Instead of “Label” how about “Display as” or “Display link as” instead? I think that would be easier to grok the “link text” for the typical (non-techical) new user.

      • Siobhan 2:56 pm on January 10, 2013 Permalink | Log in to Reply

        How about “Link Text”? That would be more intuitive. A “label” is usually attached to something else (like a form field, or suitcase, etc)

        • lessbloat 3:18 pm on January 10, 2013 Permalink | Log in to Reply

          Ya, I think I’ll test “Link Text” next – see what comes of it.

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

            It appeared to work with the two most recent user tests.

← 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