Make WordPress UI

Updates from Helen Hou-Sandi Toggle Comment Threads | Keyboard Shortcuts

  • Helen Hou-Sandi 2:10 pm on February 12, 2013 Permalink  

    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="… ;)

  • Helen Hou-Sandi 8:50 pm on February 4, 2013 Permalink  

    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
    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!

     

  • Helen Hou-Sandi 12:21 am on November 16, 2012 Permalink  

    Coming soon: Weekly updates 

    Part of the duties of a team rep for each area of contributors is to be responsible for a weekly update on the group. At this moment, there is not an established UI team rep, but as a core development team representative, I’m happy to step in until new elections are done sometime in the near-ish future.

    Part of our UI group discussion at the Community Summit was about how we can make these weekly updates both informational and effective, especially when it comes to attracting and retaining contributors. Here’s what we’re thinking:

    • A breakdown of what we did this week, such as discussions held (with links to IRC as applicable), patches uploaded/worked on, and what’s changed in core in a more prose-y manner.
    • Links to ideas from the community at large, which would likely be blog posts on other sites, including your own. Discussion would be encouraged over on those posts rather than here – the creator should be able to really take ownership and pride in their idea and be centrally involved in the discussion. The idea is to both expose some of the great ideas that are happening and open up a platform for idea generation that isn’t “from the top” or carrying the official weight that gets associated with a post on the Make P2s, which are largely status-driven rather than hypothetical.
    • Weekly IRC chat summary with anything not covered above.
    • What needs to get done this week, including any assignments that have been made and ones that need volunteers. We’re thinking this will be a great step toward exposing more ways to get involved in case you’re still figuring things out.

    Thoughts? Love it, hate it?

     

    • karmatosed 10:11 am on November 16, 2012 Permalink | Log in to Reply

      I really like this idea be great to keep up with things. The last point will help greatly in finding ways in for me and others also so that’s really cool. Not everyone can every time get to the IRC meeting so it’s a great way to keep up to date and involved.

    • McGarityDotMe 11:59 am on November 16, 2012 Permalink | Log in to Reply

      All of this helps me out, as I’m trying to get my feet wet and understand more about sub-groups like this I’m interested in participating with. The IRC chats have been where I’ve started, but that’s often like jumping into the deep end of a pool after a swim lesson. :) I especially like the last bullet point, as it’s not immediately clear to this n00b what’s in flight, what’s about to start, etc.

    • lessbloat 12:19 pm on November 16, 2012 Permalink | Log in to Reply

      Yep. +1 to all of it. :-)

    • Jane Wells 1:56 pm on November 16, 2012 Permalink | Log in to Reply

      I was going to post this proposal to the team reps blog, and will, but since you posted this, I’ll pre-empt myself and post my thoughts here as well.

      I’ve been thinking more about this since our team reps discussion at the summit, and I’m still thinking we should re-jigger the UI group. When we talk about core UI, it really seems like that discussion should be happening as a part of the core project, rather than sidelined as a separate group. When I started the UI group, it was because we weren’t a project that really had design contributors yet, and I wanted to change that, but it would have been disruptive to try to get that started on wpdevel (as it was called then). Now that it’s make/core, and now that there are a number of designers (members of this group) participating actively in core, I think it’s time for a change to recognize that core UI is not a separate project, it is an integral part of core.

      At the same time, there are design needs across the WordPress project, like for events, documentation, site improvements, etc. Just as developing a system of team reps was intended to put other contributions on a level with core, I believe it’s time to rethink the UI group altogether.

      What I’d like to see is the stuff going on as “the UI group” currently to be treated as a regular core component (with component owner, if that’s still the plan post-summit) rather than an entirely separate group. I’m thinking the same thing about Accessibility. If something isn’t a separate, sovereign group that gets to make decisions (in this case, UI decisions still are ultimately made by the core team/release leads, not by a standalone UI group), then it should be an active part of the main group. In other words, I think it’s time for UI contributors to level up to the main core team. Updates about what is happening with core UI would be part of the regular core team updates.

      Then, we’d create a Design Corps of all the designers (graphic, interaction, web, print, you name it) that would be contributing to the project as a whole, rather than just core, and to all design needs, not just UI. Each of the contributor groups would have its own embedded contributing designers (like the core ui contributors), while the design corp *group* would be a place to share resources, discuss design problems across teams, and for team reps to post requests for design assistance when needed. This would solve several problems (other groups don’t have design resources, and they see the UI group as limited to CSS or usability).

      I will admit that this is basically a ripoff of how Automattic handles design (just as our new contributor group blogs and team reps are a ripoff of Automattic’s team updates system). The Automattic design group system has been in play for three and a half years now, and I think it works really well. It allows designers to be integral members of project teams, while also being part of a broader design group.

      Anyway, I’ll be proposing this to the team reps for consideration, but would like you guys to be thinking about it, too. @lessbloat and @chexee, as UI Group members who have experienced the Automattic model first-hand may be the best able to comment on whether it is a good model.

      • Helen Hou-Sandi 2:40 pm on November 16, 2012 Permalink | Log in to Reply

        +100000000000 to the overall direction of this group within the project as a whole. Siobhan’s post about handbooks earlier is in a similar vein – UI isn’t a separate handbook, but a component of each contributing area’s handbook. I also think it would be really helpful to promote areas beyond the core web application for folks to actively contribute to – it’s definitely different than ideas for, say, a website. I see plugin developers especially liking having a way to join forces with UI/UX-minded types :)

        P.S. Hey everybody, do get involved in the handbooks if you’re able and willing!

        • Siobhan 6:47 pm on November 17, 2012 Permalink | Log in to Reply

          Yes! Handbooks are cool and awesome and people should get involved!

          Also, I think a design corps group is an excellent idea. I have been thinking that we’ll need design people to help out with making the handbooks look beautiful and I had no idea where to look. This would solve the problem for me :D

      • lessbloat 5:17 pm on November 16, 2012 Permalink | Log in to Reply

        Love it. I think that’s a great idea.

      • Mel Choyce 8:06 pm on November 16, 2012 Permalink | Log in to Reply

        This sounds like a great way to create more opportunities for designers to get involved. Awesome idea!

      • studionashvegas 11:13 pm on November 17, 2012 Permalink | Log in to Reply

        Multidisciplinary groups like what you’re suggesting are very common in the agency setting, and (from what I’ve experienced) seem to work very well, as all of the parts know what’s going on (which leads to a more cohesive experience).

        +1

      • karmatosed 11:53 pm on November 17, 2012 Permalink | Log in to Reply

        Sounds like a great idea and gives lots of scope for getting involved which is really cool.

      • Amy Hendrix (sabreuse) 2:26 pm on November 18, 2012 Permalink | Log in to Reply

        Yay! Destroy the silos!

      • Chelsea Otakan 10:12 pm on November 18, 2012 Permalink | Log in to Reply

        The Design Corps within Automattic work pretty well, IMO. We are a tight group and do our best to communicate well with each other.

        I really like the concept of spreading out the UI group to include design across the WP community. A lot of designers want to pitch in, but their skills might not be the best fit for core, but there’s currently no formal way to pitch in anywhere else.

        In short: Jane said all the things already :) Sounds great to me! Weekly check in post for each group would be helpful.

      • Sheri Bigelow 4:39 pm on November 27, 2012 Permalink | Log in to Reply

        +1 I like the proposal. Seems to me developers would be more likely to reach out to a multifaceted design group vs. the current setup which is pretty intensely focused on Core UI.

    • acsearles 4:35 pm on November 16, 2012 Permalink | Log in to Reply

      I’ve sat on the sidelines for a long time, wanting to get more involved but not knowing where to get my feet wet. I’ve been following along, reading what I can and trying to stay up-to-date on the happenings of this group. So, I think this could help more people have an easier entry point into contributing. So I can continue to keep watching and when I see some low hanging fruit I’ll be able to pick a few things off. Eventually, as I get more of a grasp about what’s going on, I’ll be able to contribute in a more substantial way.

      Jane, I also really like the idea of designers becoming apart of other groups that are working on other projects. I know that in my line of work I do best when working on a team of people with different skill sets, then coming back to the group of designers to share ideas and critique.

      Sounds like so many good things came out of the summit. I’ll be excited to get started. And hopefully we can see everyone in Birmingham at our next WordCamp. Which reminds me, @saracannon, we need to get that started really really soon.

      a

    • RDall 5:44 pm on November 16, 2012 Permalink | Log in to Reply

      I really like where this is going… I also agree with what Jane said as well… The UI group should be more then just the core dev… As I have struggled to find a place that I can contribute too that both use my strengths and fits WordPress needs as well…

  • Helen Hou-Sandi 2:56 pm on November 15, 2012 Permalink  

    A summary of the Community Summit discussion on the UI group has been published. Thanks to @sabreuse for her wonderful note-taking! Feel free to discuss the notes, and do hold us accountable for our action item. Weekly summaries will also begin very soon.

    http://make.wordpress.org/summit/2012/11/06/core-ui-team-discussion/

     

    • karmatosed 3:03 pm on November 15, 2012 Permalink | Log in to Reply

      That all sounds really cool. I will openly admit I really want to contribute to the UI team but had a hard time finding a way to and was a little daunted. I have contributed in other areas but found the UI team a bit harder to find a way in with. Having projects that can bring those of us new to the team into things would be great. I look forward to hopefully finding a way to get involved.

      • Helen Hou-Sandi 3:06 pm on November 15, 2012 Permalink | Log in to Reply

        Do you mind describing what you’ve tried or thought about trying so far? Just for data/things to think about as we constantly evaluate what we do.

        • karmatosed 4:27 pm on November 15, 2012 Permalink | Log in to Reply

          Sure, my first starting point was watching the blog and getting to know the blog posts. I found the discussion very lively which was really cool. I then started attending the dev chats and tried to get involved in the dashboard but every time I did something seemed to have been agreed outside of the chats or was already assigned as a task so it was hard to find a way in to contribute. I was made very welcome I’d like to make that clear and nothing I’m saying is against anyone, I just got lost from the welcome to the doing :)

          I have in a few cases responded to things in discussion threads though, so I have tried through that but would love to do a bit more than just comment.

          I do front end code and design so was open to either as a contribution. It totally may have been the time I tried to join in and that everything was already allocated by then, however it seemed that an extra hand wasn’t needed and everything was already tasked up.

          I am involved in the BuddyPress side of things and have a past in Open Source so aware of the ‘get stuck in’ nature of contributing and love it. I’m not usually a wall flower over things so found it odd how hard it felt trying to start.

          I really don’t mean that comment against anyone as know nothing is perfect and it’s as much down to me as it is anyone when contributing comes in. It was just hard to find a place to ‘get stuck in’ that wasn’t already occupied.

          I’d love to work out a way to get involved though as feel whilst I do give to a side project (BuddyPress), I want to give back to the core project also. Maybe some clear areas / teams would help those of us circling around wanting to get involved but not seeing a way in beyond commenting? I know it’s never an easy solution and grateful that it’s being reviewed so hopefully more people (myself included) can step up to get involved.

          • Helen Hou-Sandi 11:57 pm on November 15, 2012 Permalink | Log in to Reply

            Thanks for responding :) On the UI front, I’ll keep an eye out for you in UI chats (and make sure to pipe up, especially at the roll call part – we’re trying to get better about that so we know who’s around). Right now we tend to get bogged down in what’s needed specifically for the release as we approach RC and release stages, but even just getting used to regulars is helpful.

            • karmatosed 10:09 am on November 16, 2012 Permalink

              Thank you and yes mid cycle is totally understandable of being a hectic time.

  • Helen Hou-Sandi 9:29 pm on August 15, 2012 Permalink
    Tags:   

    Meeting summary for 8/14 

    Note: meeting on 8/7 did not really happen, as many were traveling or otherwise out of commission post-WCSF.

    Meeting was largely focused on status check of various items and really bearing down on assignments and breaking down tasks into what can be realistically accomplished within a given time period (the next week) so we can regularly check in. Setting the goal is not the maximum that can be achieved – only the minimum. Things finished early or with aplomb are highly encouraged :)

    • Welcome screen/panel refinements are still chugging along after @lessbloat‘s paternity leave (CONGRATS). Latest iteration at http://make.wordpress.org/ui/2012/07/24/welcome-screen-design-v2/#comment-22349. Discussed possibly having different paths based on whether or not a static front page is assigned. @lessbloat, @melchoyce, and @chexee are looking at the UX/language side. @sabreuse and @georgestephanis are on the dev side. Would like UX/language nailed down before next meeting and rough patch started. Testing can start anytime there’s something testable. Dev-wise, all hook-ability issues should be addressed this go-round. Tickets: #21368, #21331
    • Color picker. @mattwiebe and Devin Price worked on this at WCSF dev day, going with integrating Automattic’s open source Iris color picker, and will continue to work together toward a patch. @mattwiebe worked with us directly on some UI/UX picking and will continue to refine. Designers welcome to take a look and give feedback as well. @koopersmith is on JS consult. We should be able to knock out the consistency issue while we’re at it. Would like to see basic implementation in at least one place (settings screen or customizer – both are needed for final product) by next week. Tickets: #21206 and #19616
    • Cookies are on offer for a solid patch on #16379. There are some finer details that need consideration, such as editing screens and title + slug. More details in the IRC log: https://irclogs.wordpress.org/chanlog.php?channel=wordpress-ui&day=2012-08-14&sort=asc#m51505
    • @tddewey put up a nice big patch for the remainder of the admin UI images needing HiDPI treatment on #21019. Leaving this to @azaozz for review and dropping in, now that gradients are in and extraneous images have been deleted.
    • I (@helenyhou) am on #21391 as my singular dev task – using the post edit screen for attachment editing, and any CPT support and edit screen enhancements that come with. It is quite full of rabbit holes. Would love a dev partner or two (or more) on this – have some leads now thanks to dev chat.
    • Media. @koopersmith is working on making those lovely wireframes a reality. @azaozz working on preview in the editor: #21585
    • Bonus item: UI/UX guidelines for plugins and themes. Discussion stemming from http://wp.smashingmagazine.com/2012/08/08/help-us-help-wordpress/, with a rough potential document started by @melchoyce at https://docs.google.com/document/d/1ZWPeUSFVYlMxClmHFjuAXuekXcZsLso49G3bDRquHcs/edit. Would just like to see how this might pan out in terms of a publishable document. Will be leaving my own comments over on Smashing Mag.

    Reminder: devs should ideally be focused on one large item at any given moment. Working on your own pet projects and roaming around is always fine, but would prefer to stay away from overcommitment, especially for point people. This includes me :)

     

    • Kurt Payne 6:51 am on August 16, 2012 Permalink | Log in to Reply

      @helenyhou I can help with #21391!

      • Helen Hou-Sandi 1:09 pm on August 16, 2012 Permalink | Log in to Reply

        YAY! I will hit you up soon, then. I’ve also got blobaugh, maybe jeremyfelt, maybe tw2113, and possibly tomauger (although I think he is on the ImageMagick stuff as well; trying to avoid doubling up).

    • Shane Pearlman 11:43 pm on August 16, 2012 Permalink | Log in to Reply

      Thanks Helen, stoked to participate in brainstorming. Will work on the document.

      Things that we often debate that would be fantastic to get guidance:

      • When do you combine content into a single meta panel in a post type vs create a new meta panel?
      • When do you create a new submenu vs combine into a submenu
      • What is the proper ux for condensing long settings / form content (tabs?)
      • Thoughts on advance form permutations > thinks like chosen and select 2 which are wonderful aids, but aren’t standardized
      • Inline documentation styles

      …

      • Helen Hou-Sandi 12:38 am on August 17, 2012 Permalink | Log in to Reply

        To be honest, I don’t think it is possible to provide be-all-end-all documentation on the first four items. The documentation would amount to something like “do what feels right and makes sense for your situation” – we can’t possibly expect software-specific guidelines to actually teach what usability means and what creating usable interfaces entails. That’s the issue that I sense will be run into in the end: we can have guidelines for the WordPress community, and we can create awareness via guidelines, but they are not a proper medium for a crash course in human-computer interaction. However, I’d love to be proven wrong, so please do work on the document, and perhaps try to find a time to have an actual discussion beyond notes on said document.

        Inline documentation styles sounds like something that could be looked at, though, and current core usages documented and ideas proposed for extension cases those don’t cover. What we really need is to get bodies on http://dotorgstyleguide.wordpress.com/ (or move it somewhere we can put more people on) and work on items that fall under the current style guide umbrella directly.

  • Helen Hou-Sandi 1:12 am on August 2, 2012 Permalink
    Tags:   

    Meeting summary for 7/31 

    Logs: https://irclogs.wordpress.org/chanlog.php?channel=wordpress-ui&day=2012-07-31&sort=asc#m49644

    • Media wireframes: look at them if you haven’t yet, and leave feedback. Development breakdowns and work will happen in #wordpress-dev when we get there, for the development-minded. WCSF dev day will also be a forum for more discussion for those who are there, and we will be vigilant about sharing those conversations publicly. Tickets to keep an eye on: #21390 and #21391
    • Accessibility is still a big need in terms of expertise and hands on deck, and there are plenty of tasks with UI implications. Discuss on the post if you’re interested or have knowledge when it comes to making things accessible on the web (screenreaders and non-mouse users, for instance) or hit up @sabreuse, who is helping shepherd efforts. Also keep an eye on Make Accessibility.
    • Welcome screen v2 is also still in wireframe and copy feedback stage. We need to drop the Spotlight/Alfred/Quicksilver search thing in terms of core development this cycle (sorry, we know how cool it is) and focus on iterating on the panel that is there. We also need go back to focusing on new user experience (NUX) and initial walkthroughs/links for now. The ideas have been great, and are not being thrown away by any means – we just need to focus so that we can actually get something done in time. Who knows, if we move fast, and get user testing rolling, we might be able to look at more iterations (and toss in a hook to make a plugin for the Spotlight thing possible) :)

    And finally, a reminder that open office hours are every weekday at 19:00 UTC (3PM EDT). #wordpress-ui is always open for discussions, but if you’re a little more nervous about just poking your head in or want to schedule something with a group, it’s a great time to do just that!

     

  • Helen Hou-Sandi 4:52 am on July 24, 2012 Permalink
    Tags: , , , Trac tickets   

    #21019 – Retina All the Things 

    The current goal is to HiDPI/2x current assets, whether that’s through making new versions of various images/icons or converting to CSS solutions (pretty much gradients and perhaps comment bubbles). Longer-term we may end up using other solutions, but for the moment let’s focus on the task at hand.

    I’ve left a long comment about things I’m seeing as still needed. No need to know how to do the CSS patching – a dev can jump in and do that part if you’re more comfortable with the graphics side. What we need is people helping out with creating 2x versions of things, sometimes in various colors. We may need to coordinate with @empireoflight (Ben) to make sure there’s no duplicate effort.

    You’ll want to be uploading files to Trac for the most part – if you want to have somebody take a look first, feel free to post a comment here or talk about it in IRC (office hours are a great time for that). Note that uploading files to Trac does not trigger an email notification, so you’ll want to leave a comment noting what you’ve added so it’s not overlooked. Again, feel free to ask questions here or in IRC if you’re not sure what to do and we’ll try to get you sorted!

     

    • helenyhou 1:52 pm on July 24, 2012 Permalink | Log in to Reply

      @empireoflight has indicated that he’s looking at these now. Keep an eye on the ticket in case he gets to something first.

  • Helen Hou-Sandi 12:51 am on July 11, 2012 Permalink  

    Scope meeting in #wordpress-dev tomorrow, July 11, at 20:00 UTC is an official go. Not being a developer-type doesn’t mean you shouldn’t be there, even if you just lurk. Discussion will be had about scheduling and planning features. See you there!

    http://wpdevel.wordpress.com/2012/07/11/version-3-5-scope-session-on-wednesday-july-11/

     

← 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