WordPress.org

Make WordPress Design

Recent Updates Toggle Comment Threads | Keyboard Shortcuts

  • Tammie 2:04 pm on February 5, 2016 Permalink |  

    Revisions UI focus kick off post 

    As @michael-arestad announced, I’m going to be leading a focus on the Revisions UI. This post is the first step on the path to starting to think about how we approach the Revisions UI.

    Background

    This project stems from some interesting discussions at the community summit between @melchoyce, @michael-arestad and @adamsilverstein. It will probably include some way to move between revisions quickly and a revised interface for viewing. This is an opportunity to rethink what we have right now.

    Here is what Revisions currently looks like:

    2016-02-05 at 10.06

    2016-02-05 at 10.08

    Process

    One thing we need to do is ensure we tackle this with a proper process. The structure would be something like:

    • Research: comparative, survey, discussions and trac ticket analysis.
    • Mockups for entire process. This will be influences by the earlier research.
    • Plan. It’s important that the plan is broken down into sensible timeframes to push the project on and get delivering.

    As each section happens the development process should be:

    • Mockups and lo-fi ideas
    • Testing
    • Iteration
    • Testing
    • Development
    • Testing
    • Release

    We also shouldn’t be afraid to go back at any point to revise and iterate. Testing is really important even if it may be peer at times. This way we can easily and swiftly test even the crazy ones – the ones that may just turn out to be the right direction.

    Timeframe

    This focus isn’t something that will result in a deliverable tomorrow. The first process of research I would like to kick off this week and expect research to take a few weeks as we work out the direction for the project. There will be regular posting on this blog for updates.

    Everyone is welcome

    If you are interested in joining us for this ride, let us know in the comments. As things process, we’ll be doing specific calls for tasks. Initially the plan will be to use the design open hours for anything that comes up. As we move into actually developing, we can look at going the route of other feature plugins, if that is needed in Slack.

     
  • Mel Choyce 6:27 pm on January 26, 2016 Permalink |  

    Design Office Hours 

    Have questions or need feedback on core or community design projects? @michael-arestad and I are establishing biweekly design office hours in #design on Slack. We’ll be around from 20:00 UTC to 21:00 UTC each Tuesday and Thursday.

     
  • Mark Uraine 8:53 pm on January 21, 2016 Permalink |  

    New Login Design 

    Hey community! – My name is Mark and I’m a recent addition at Automattic as a Designer on the Apollo Team focusing on Core and WordPress.org. This is my first WordPress.org design project. 🙂

    We recently launched the new login redesign for login.wordpress.org. I really enjoyed learning the processes for undergoing this sort of project and have learned even more now that it’s live – thus my post here on the /design blog.

    There were a few things that brought this redesign into fruition. The first being the incorporation of OAuth – sort of like a single sign in for some of our sites (coming soon). The other was a desire to differentiate it from the WordPress installations.

    wordpress.org-login

    For the sake of comparison, here’s what the WordPress.com login page looks like.

    With that said, I designed variations that would distinguish this login page from self-hosted sites and still hold true to .ORG’s branding, colors, and tone. As I’m still learning processes here with the community, I reached out to others and got some great feedback during it all.

    Another consideration in designing WordPress.org sites is the perceived “dated” appearance. Last summer, @hugobaeta did extensive UX research. As improvements are made to WordPress.org sites, we want to improve the design incrementally as well.

    Here’s the design we launched earlier this week.

    new-wporg-login

    What’s changed?

    1. A darker background
      1. I wanted to stick to the WordPress.org brand colors and thought this dark background (same as the current .ORG header) would provide the contrast and deviation to set it apart.
      2. The dark background here is only meant for the login/OAuth process and not for the entirety of WordPress.org.
      3. There’s also been some concern that the dark background is too different from the rest of design of WordPress.org. We’ve been exploring iterations and concepts, some of which can be viewed here.
    2. The WordPress logotype
      1. I opted to use the full logotype of WordPress to help provide the visual difference as well.
    3. I removed the box from the form
      1. This allowed for more flexibility when inserting some of the partner site information for OAuth onto the page.
      2. There are less constraints as to how the form balances with this information.
      3. The form fields stand out against the background bringing focus immediately to the action required.
    4. The footer
      1. Added smaller text at the bottom stating ‘WordPress.org’ for additional clarity.
      2. Retained the tagline from the inner pages ‘Code is poetry’ here as well.
    5. Tightened up the links below the form to keep things as high on the page as possible, especially on mobile devices.

    There’s been great feedback since launching, including a few suggestions for improvement:

    1. The contrast of labels against the background needs improvement.
    2. Revise the button to align better with the styling from wp-admin buttons.
    3. Add some letter-spacing to the footer text.
    4. Revert back to the ‘W’ mark instead of the whole logo. (I’m still at odds with this one for clarity purposes) 🙂 Maybe the logotype should include the “.org” as it does in the site header?
    5. Work in some intro text to explain exactly what this login is for.

    Do you have other ideas for the login page? What do you like? What do you hate? What improvements can be made?

     
    • Konstantin Obenland 8:59 pm on January 21, 2016 Permalink | Log in to Reply

      Good job Mark!

      Revert back to the ‘W’ mark instead of the whole logo.

      I, for one, like it with the whole logo. I’d even go as far as using the regular WordPress.org logo.

    • Ben Hansen (ubernaut) 9:06 pm on January 21, 2016 Permalink | Log in to Reply

      very nice! i think adding the .org is good idea.

    • Josh Pollock 9:20 pm on January 21, 2016 Permalink | Log in to Reply

      I like this new design. One thing that is really good about the current login design for WordPress.com is it says “WordPress.com”. Why can’t this login say WordPress.org on it?

      I know the browser bar says that, but we all know that the confusion between WordPress.org, WordPress.com and every other WordPress-powered site. Any work to make it as explicit as possible that they are signing into their WordPress.org account is good in my book.

    • Hugo Baeta 9:26 pm on January 21, 2016 Permalink | Log in to Reply

      FYI, the discussion is still going on the ticket as well: https://meta.trac.wordpress.org/ticket/1524

    • Zack Katz 9:34 pm on January 21, 2016 Permalink | Log in to Reply

      I think the placement of the form feels strange, considering that there are now no borders. Check out Squarespace’s login form: https://store.squarespace.com/config/

      There are a few things Squarespace does that I like:

      • Centering the form vertically
      • Use a subtle radial gradient adds dimension
      • Use placeholder text instead of labels (I know there are backward compatibility issues here)
      • The logo size feels more in scale with the login form
      • Better wording (“Stay logged in” instead of “Remember me” – backward compat, I know)
      • Inline “Forgot” links allow users to not look around from where their focus already was
    • Jon Brown 10:46 pm on January 21, 2016 Permalink | Log in to Reply

      Looks really good!

      +1 on vertical centering.
      +1 on liking the SS form a lot, particularly the input fields just being lines (instead of boxes) when frameless.
      +1 placeholder text instead of labels

      One of things that many years ago caused me _great_ confusion for many months of frequent password resetting was that this login is actually shared by wordpress.org, buddypress.org and bbpress.org.

      Nevermind that I think they should NOT be shared logins… it should however be clear to users that this is a shared login for all the sites one is logging into (I think that’s happening soon-ish?).

      In that regard what about representing that to users with something like this: https://cloudup.com/cOrYv4l4r-7

      Note: m not sure I like this exact idea aesthetically just the idea of showing logos some how of all that is being logged into to reduce confusion.

    • Tom J Nowell 10:47 pm on January 21, 2016 Permalink | Log in to Reply

      I have to squint to see the text in between the fields, there needs to be more contrast. Right now it looks nice, but disregarding aesthetics it’s much harder to read with the huge contrast between the boxes and the background next to the low contrast of the labels etc

    • Mark Uraine 4:54 pm on January 22, 2016 Permalink | Log in to Reply

      Excellent feedback! I’d like to address some of it.

      1. Talks about needing the ‘.org’ in the logo have been brewing so there’s obviously some justification here.
      2. Accessibility issues should be resolved now.
      3. I do like Squarespace’s login page, but I think the input field design would veer too far from the rest of the form fields across our site. I guess another question is how far are we willing to break away from our standards on a login page?
      4. Using placeholder text instead of label – I’ve always liked this better too, but it does have usability downsides, especially if we consider focusing cursor on first input when page loads.
      5. Centering form vertically is cool. Logo sizing adjustment is cool. Alternate wording is possible too.

    • Tehran Site Design 4:25 am on January 28, 2016 Permalink | Log in to Reply

      Very Nice Mark, i will use it in my website:
      http://tehran-site-design.com

  • Michael Arestad 4:03 pm on January 11, 2016 Permalink |
    Tags: , post-new, pulishing   

    Improving Post New 

    Before I get into it, I’m going to need help to get some of these projects going. If you see something you’re interested in working on, let me know in the comments. The following project proposals are not intended to be a single feature plugin because they are separate projects with separate goals.

    I could use your help with:

    • running usability tests
    • putting out a survey
    • design
    • managing some of these projects
    • development
    • testing (including accessibility testing)

    The process

    Before we get into designing, we need to do discovery (research) and a clear idea of which specific problems we’re going to solve. All of these will require research, some usability tests, maybe a survey or two,

    Potential projects

    I did a bit of searching on Trac (and am still doing so) specifically looking for anything related to posting or content creation. I have started some initial researching on anything related to creating content. I looked as past usability tests. I looked at some feedback around WordPress.com’s editors as well. We can learn from some of the ideas tried there.

    The following are a list of project ideas. If some get interest and traction, we will do a kickoff post for it (depending on scale) and I’ll add any resources/related information I’m aware of. Ideally, I’d like one of you to step up and lead a few of these if you have the time and are interested. If you have something you’d like to add as a potential project idea, please let me know in a comment.

    Publishing UX

    @helen brought this up as a project idea and it’s a good one. Here’s the proposal:

    When running user tests for post formats during the 3.6 release cycle, one of the most striking observations was that a majority of users had a hard time locating the Publish button at all. Because it’s typically in the top right, it’s possible it’s not on the screen, and is very disconnected from the general content workflow of writing and then publishing. The most common idea is to put the buttons in the bottom bar of the editor, since it pins and makes sense within a writing flow. There are, as always, other considerations to make, such as post types without an editor or various post statuses (another problem in the current box – you can’t actually have a private draft, because it’s the same field in the database). This project would likely involve multiple approaches, storyboards, mock ups, and lots of user testing through all stages.

    Related ticket: #17028

    Shiny saving

    Currently, when saving or updating a post the whole page reloads. The page reload makes it easy to lose your place when saving or updating. Because of the page reload, saving feels slow.

    My proposal is to introduce Ajax saving to prevent the page reload. This will introduce new problems to solve. We’ll need a way to provide feedback to the user about the status of a save. It will need to be accessible. I believe those are both doable.

    Related tickets:

    Toolbar remix

    I’d like to see what we can do to improve the editor’s toolbar. This will likely include a bit of button shuffling and some style changes. For example, I think the drop down to select the type of text (heading 1, paragraph, preformatted) should be in the primary toolbar rather than in the kitchen sink.

    Related ticket: #27159

    Post New UX

    I’d like us to take a look at the Post New UX as a whole. This might result in some mini projects/experiments rather than being a single feature plugin. I suspect the space could be utilized more efficiently. We can probably also make Post New feel a bit less overwhelming for newer users (I don’t want to remove functionality at all).

    Metabox physics

    Metaboxes are helpful. That’s why we have so many of them, right? Let’s see what we can do to make them part of the posting flow rather than a bunch boxes of settings that we have to battle before publishing anything. This project will need a good amount of love and research and will need to consider how plugins/themes use or hijack them. This might be a good place to provide some patterns or suggested design practices as a resource for plugin authors.

    Autosave

    I think if we implement Shiny Saving, we can definitely have autosave functionality. When digging through WordPress.com editor feedback, autosave was almost universally loved. It does have some awkward issues with revisions, but I’ll talk about revisions in a second.

    Revisions UI

    This is a bigger less-urgent project (unless we get Autosave in), but I think the revisions interface could use a bit of a rethink. It is currently a bit difficult to use and understand. I know @melchoyce had come up with some promising ideas during the community summit when we were discussing it with @adamsilverstein. This project will likely include some way to move between revisions quickly as well as potentially showing a different interface for viewing changes.

    Don’t break my divs

    It’s really easy to break just about any theme by forgetting to close a `div` or a `span` (and some other elements). I’m wondering if we can do something to warn users about unclosed html elements to give them some idea why their preview is looking funky. I wouldn’t try to autoclose tags.

    Live preview

    Wouldn’t something like a live preview (even if it’s tiny or off screen) be pretty handy? I think so.

    Proofreading mode

    I’ve had quite a few people request some sort of proofreading mode that allows them to comment/highlight/interact with post content. This is in the realm of projects I’m not sure are right for WordPress core, but might just be. Even if it isn’t, it could be a pretty dang rad plugin (if there isn’t one already).

    Content blocks?

    I was hesitant to add this as it’s been attempt a few times in the last few years (RIP CEUX). The idea of content blocks has come up again in conversation a few times over the last few weeks so I think we should revisit it with vigor. I know the Shortcake group is looking at an interface that might go hand in hand with a content block interface. The initial Shortcake implementation could be great first steps toward the block editor some of us dream about (or have nightmares about).

    Thoughts?

    If you are interested in tackling any of these, have a proposal in addition to these, or are have concerns/thoughts about a project, let me know in a comment.

     

     
    • Tammie 4:18 pm on January 11, 2016 Permalink | Log in to Reply

      This is awesome! Thanks so much for taking the time and leading the charge on this @michael-arestad. I’m really excited about what a focus on improving new posting will bring.

      I’d love to be involved in usability tests, surveys and design. I am also happy to manage one and would be interested in Publishing UX and/or Post New UX (happy to take on more than one).

      I’d also be happy to be involved Revisions UI as I already have worked in that area and absolutely feel that work needs still to be done. That would be more a secondary role as know there is already some great ideas to work from.

    • mapk 4:44 pm on January 11, 2016 Permalink | Log in to Reply

      Count me in. I’m up for usability testing, design, and managing a project as well.

    • jaragozzine 4:56 pm on January 11, 2016 Permalink | Log in to Reply

      I’m up for any of the bulleted items above. Very exciting!

    • Zack Katz 6:13 pm on January 11, 2016 Permalink | Log in to Reply

      I’m in.

    • Hugo Baeta 1:39 am on January 12, 2016 Permalink | Log in to Reply

      Count me in as well, you know where my strengths lie, so feel free to ping me and assign me to whatever you think I’d be of help. I’m particularly interested in the “Toolbar remix” stuff 😉

    • askoxyz 2:19 pm on January 13, 2016 Permalink | Log in to Reply

      @michael-arestad, I’d like a better custom field editing/creating/deleting experience as well. Like, maybe instead of having them below the post editor, use a modal like Squarespace 6 did modals (https://d1w5usc88actyi.cloudfront.net/wp-content/uploads/2013/07/1-Make-a-products-page-710×407.png). I think there’s a lot to learn from Squarespace UX as a whole with no need to copy them.

    • chatmandesign 3:55 pm on January 13, 2016 Permalink | Log in to Reply

      In regards to meta-boxes, I’ve created a simple plugin I’m calling Metaccordion that I’m currently beta testing on one site in development. It adds CSS/JS to convert the never ending list of meta-boxes that allows Publish to scroll off the screen into a fixed position accordion sidebar, with Publish always expanded. This keeps Publish where we’re all used to it being (and avoids any issues with post types without editors), but also ensures it’s almost always visible (the sidebar can be scrolled if there’s too many items to fit, but because the boxes are collapsed, Publish is never far away).

      I’ve found that when editing post types with a significant number of meta-boxes, this condensed UI makes finding the ones I want much, much easier.

      One further step I’d like to take to streamline the meta-box UI would be to group together related meta-boxes into a single expandable item. I’m currently using it on a WooCommerce site, and under any product I have expandable meta-boxes for Product Categories, Product Tags, and Brands. Instead, I’d like to have one item that says something like “Categories & Taxonomies” and expands to show all three of those options. So far I haven’t had time to do this, in part because it requires re-jiggering the DOM and I’m a little concerned that it could break some meta-boxes for some plugins, if they weren’t implemented flexibly enough.

      I believe WordPress.com launched a new post editor UI with elements similar to this not too long ago and received generally positive response to the changes.

      I don’t know if that’s the sort of thing you had in mind, but I’d be happy to contribute what little I have so far, or to further discuss ideas on streamlining, if any of this seems helpful.

      • Michael Arestad 4:57 pm on January 13, 2016 Permalink | Log in to Reply

        That is indeed one of the things I wanted to try. Awesome. Could be a good start for usability tests.

        • chatmandesign 6:53 pm on January 13, 2016 Permalink | Log in to Reply

          Ok, I threw my code up on GitHub:

          https://github.com/cdCorey/metaccordion

          It’s an early development build (written originally as a quick monkey patch for my own use), but it’s been working great for me so far. It should definitely work for usability tests at the very least.

          If anyone cares to contribute, I’m happy to accept pull requests, or of course you can fork it if you’d rather manage things that way.

    • chatmandesign 4:10 pm on January 13, 2016 Permalink | Log in to Reply

      Here are a couple quick screenshots of my plugin, if anyone’s interested:

      Closed: http://glui.me/?i=7wiix0f8v0vmjed/2016-01-13_at_10.02_AM.png/
      Open: http://glui.me/?i=w2onxkp30lxbndg/2016-01-13_at_10.06_AM.png/

      It’s a simple change, but it lets me see all the sidebar meta-boxes at a glance, and I’ve found that to make working with them a lot easier.

    • askoxyz 4:53 pm on January 13, 2016 Permalink | Log in to Reply

      @chatmandesign that’s neat! I could definitely use that. I think that would be a great solution for custom fields as well that are under the post editor. With some sort of + and – icons next to them to add and/or delete.

    • susanasalgado 5:38 pm on January 13, 2016 Permalink | Log in to Reply

      Hi! Count me in! Research, Surveys, Usability testing and/or managing a project.

      • susanasalgado 2:54 pm on January 14, 2016 Permalink | Log in to Reply

        @michael-arestad maybe it’s important for you to know what projects interest me the most:

        • Publishing UX
        • Post New UX
        • Live preview

        Nowadays we work with several big companies that use WordPress in a daily basis so we have access to a lot of potencial users for tests.

        Really want to work on a project like this and improve the user’s experience.

    • Chris Smith 8:37 pm on January 13, 2016 Permalink | Log in to Reply

      @michael-arestad count me in as well: Dev, research, testing, managing pieces

      As far as the projects go, I think the ones that sound the most interesting to me are:

      • Publishing UX, though I am initially leaning more towards a fixed scrolling box/button rather than tying it to the editor for the reasons @helen mentioned about CPT’s without.
      • Shiny Saving, I think this could be tied into the publishing UX as a related project
      • Metabox physics
      • Don’t break my divs
      • Live preview
    • Ahmad Awais 6:42 pm on January 15, 2016 Permalink | Log in to Reply

      Shiny Save would be great!

    • Mel Choyce 11:10 pm on January 15, 2016 Permalink | Log in to Reply

      @karmatosed @mapk @jaragozzine-1 @katzwebdesign @hugobaeta @chatmandesign @susanasalgado @chris_d2d @mrahmadawais and anyone else interested in working on Post New, would you mind filling out this survey?

      http://13233232.polldaddy.com/s/wordpress-org-improving-post-new

      @michael-arestad and I are going to start organizing projects in the next week or two.

    • susanasalgado 11:52 pm on January 15, 2016 Permalink | Log in to Reply

    • Ahmad Awais 6:31 am on January 16, 2016 Permalink | Log in to Reply

    • Ryan Boren 3:25 pm on January 17, 2016 Permalink | Log in to Reply

      Right on. I’ll help with testing and support, especially on touch devices.

      This ticket has some related post new ux discussion. https://core.trac.wordpress.org/ticket/29989

    • David Yarde 7:25 pm on January 19, 2016 Permalink | Log in to Reply

      Definitely interested in helping in any of the areas mentioned. Filled out the survey as well!

    • Stagger Lee 8:14 am on January 21, 2016 Permalink | Log in to Reply

      From my personal experience working with Post edit screen I dont find it much problematic working with many metaboxes as long as most of them are collapsed.

      One thought often crossed my mind. “I would like to have one JS button now to open/close, toggle on/off all metaboxes”. Besides ability to toggle them on/off one by one. Just one JS button for toggle would be enough for me, minus toggling metabox holding “Save” button perhaps.

    • Giuseppe Mamone 8:49 pm on January 21, 2016 Permalink | Log in to Reply

      Filled out the survey 🙂 I’m interested in helping in my spare time and getting to know you all.

    • FolioVision 11:36 pm on January 21, 2016 Permalink | Log in to Reply

      Hi Michael,

      Some great ideas here.

      Shiny saving would be a big improvement, along with a more solid revisions manager. One click to make all the extras disappear and reappear would be great. Mini-plug: our own FV Clone Screen Options is a big help in rolling out identical workflow editing experience among a less technical team. When trying to improve workflow, adding something similar to core (managing screen options for a team might make sense).

      Where we might be able to contribute code:

      • Revisions. Revisions more than three old could be retained on amount of difference (i.e. near identical revisions would be deleted first)
      • Previews. For our own editor Foliopress WYSIWYG (currently in maintenance mode as it’s FCKeditor based while CKeditor is current), we simple made FCKeditor parse and show the CSS styles for the #content box. Makes a world of difference. This should be built into WordPress. Martin and I would be happy to give this a try if there’s interest in real WYSIWYG preview for core.
      • Broken Divs. Great idea. I’d suggest some kind of pop-in or pop-up syntax editor which is not dependent on TinyMCE. Too many javascript dependencies will kill you here (js WYSIWYG editors are hard as we know from long experience). To smooth the experience, one could make Syntax another tab next to Visual and Text (although it would really be running its own miniature environment). There could be a general option in Settings/Writing to enable or disable the Syntax tab.

      We could help right away with Revisions and Previews. We don’t have enough experience with syntax repair libraries to provide prompt help.

      You can find us as FolioVision here or @foliovision

      Thanks, Alec

    • Matthew Haines-Young 2:01 pm on January 22, 2016 Permalink | Log in to Reply

      Great idea. Would love to see Shortcake as part of a broader push towards a better publishing experience!

  • Jen 5:49 pm on January 4, 2016 Permalink |
    Tags: annual survey, contributors   

    2015 Contributor Survey 

    Hi design folks! Thanks for all your hard work and contributions in 2015. Could you contribute few more minutes to fill in the 2015 contributor survey? It will help us establish some baselines around the contributor experience so that we can see how things change over time.

    **This is being posted to all the Make teams, so if you subscribe to a bunch of p2s and keep seeing this post, know that you only need to fill the survey in once, not once per team.**

    The survey is anonymous (so you can be extra honest), all questions are optional (so you can skip any that you don’t want to answer), and we’ll post some aggregate results by the end of January. It took testers 5-10 minutes to complete on average (depends how much you have to say), so I bet you could knock it out right after you read this post! 🙂

    There are two sections of the survey. The first has questions about team involvement, recognition, and event involvement, and is pretty much what you’d expect from an annual survey (which teams did you contribute to, how happy are you as a contributor, etc).

    The second section is about demographics so we can take a stab at assessing how diverse our contributor base is. All questions are optional, but the more information we have the better we can figure out what we need to improve. If there’s some information you’d rather not identify, that’s okay, but please do not provide false information or use the form to make jokes — just skip those questions.

    The survey will be open until January 15, 2016. Whether you have 5 minutes now, or 10 over lunch (or whenever), please take the 2015 contributor survey. Thanks!

     
  • Helen Hou-Sandi 4:58 pm on September 17, 2015 Permalink  

    Potential UI/UX projects in core 

    It’s not uncommon for both existing and potential contributors to feel like they don’t know what to work on. Let’s try listing a few UI/UX items that have come up on wishlists in this post, both as a temporal call for interested parties and to reference later. If you’re interested or have another frequently-requested item in mind, sound off in the comments or join us in the #design channel in the Make WordPress Slack.

    When changing UX, it’s important to be running user tests and surveys. These can be done lo-fi, such as with index cards or a questionnaire, or as high fidelity as using a functioning plugin and a user testing service. It’s also important to assume that it will take multiple iterations to get there and to avoid becoming too attached to a single approach.

    Publishing UX

    When running user tests for post formats during the 3.6 release cycle, one of the most striking observations was that a majority of users had a hard time locating the Publish button at all. Because it’s typically in the top right, it’s possible it’s not on the screen, and is very disconnected from the general content workflow of writing and then publishing. The most common idea is to put the buttons in the bottom bar of the editor, since it pins and makes sense within a writing flow. There are, as always, other considerations to make, such as post types without an editor or various post statuses (another problem in the current box – you can’t actually have a private draft, because it’s the same field in the database). This project would likely involve multiple approaches, storyboards, mock ups, and lots of user testing through all stages.

    Comment Management Overhaul

    A lot of strides have been and are being made in the Comment API behind the scenes, but we still have a generally dated comment moderation experience, from the list to the edit screen to the moderation screen shown when following a link from notification emails. This is a good project for a team to brainstorm on before attacking: What does a good comment management experience need? How do we accomplish that within WordPress?

    There are also some smaller tasks that could be tackled, such as UI improvements. For instance, right now comments are presented with an interface that is very similar to post editing and without much context. What if comments looked and felt like comments while editing (showing an avatar, a better general layout, etc.)? What kind of contextual information would be helpful to show?

    Small screen flow

    The admin adapts fairly well to small screens. There are some places where what’s critical or important on a given screen is overwhelmed by other items. Some particular offenders are the theme/plugin/media filters, filtering and navigation on content lists, and the additional buttons that often appear next to the “Add Media” button above the editor. The content in those areas stacks up and pushes down the primary content below, sometimes completely off the initial screen. We want UI to direct user focus to what they want or need to be doing, and these particular visual components are major offenders against that.

    Tickets: #32558 for the filter bar, #29989 for the media and related buttons.

     
    • Tom Ryan 6:13 pm on September 17, 2015 Permalink | Log in to Reply

      Much of WordPress’ future potential growth will come from new users and the current interface is unnecessarily arcane in many areas (It’s not anyone’s fault, it’s just evolved that way). Here are a few UX areas that could use some help in WP:

      1. Menu Hierarchy – Need a top to bottom review of menu consistency throughout WordPress. The original menu structure was developed when WordPress was mainly a blogging platform. It’s very cumbersome when you are trying to develop a full blown site in WP, rather than just publishing a blog post.

      2. Nested Menuing System – The current menu system breaks down after you get more than one level deep. Then yous have the Customizer, which has a completely different menuing system. This has lead developers to create their own menu systems, which makes the WP UX inconsistent from theme to theme. WordPress needs to provide theme and plug in developers a way to do all of their interface within the WP menu system, rather than having to create their own.

      3. Menu Consistency – This is a related to #2 above. WP has the top menu bar, the admin menus and the Customizer menus, which all feel like they are completely different products. Many of the settings overlap and make no sense to end users.

      4. Integrate “Page Preview” Into the Interface — Currently the Customizer is essentially the “page preview” feature of WP.. Rather than being integral to the main interface, it jolts you into a completely different interface, which overlaps in functionality with other areas of WP. There are ways to integrate the Customizer functionality into the main interface so that it WP becomes a more cohesive product.

      5. Settings Organization — Ensure better consistency of how to adjust settings. Sometimes plugin developers will put their settings under Settings, sometimes it will be in a new top level menu. Sometimes you can get to settings from the plug ins page, sometimes you can’t. Many of the WP core settings have the same issues. There should be a more clear delineation between standard settings and setting added by plug ins. It often hard to find the settings you wan to change because the Settings menu is so large and not organized into core and plug in settings.

      Currently, using WP to create and manage web sites is a “less than delightful experience” The changes above would really go a long way to clear up some of the cruft and make the WP interface easier to work with.

      I’m not a developer, but I would be happy to help with the process in any way I can.

      • allstar 4:10 pm on September 18, 2015 Permalink | Log in to Reply

        Just as you have inactive widgets it would be nice to have inactive menu items as well. There is some overlap when you start to look at Menus and Widgets, both have locations, active, inactive and order. Differences being static-sih individual menu items versus a widget’s instance
        functionality and linear widgets versus multidimensional menus.

        I’m stating something I see in an effort to be constructive. I know a merge would be difficult and an overlap of functionality complicated but it offers a possibility of having similar interfaces and for new people less learning can only be good.

      • dlouwe 12:25 am on September 19, 2015 Permalink | Log in to Reply

        A personal pain point somewhat related to #2 is the method for removing menu items. One or two items are simple to remove, but trying to remove 5+ is a tedious nightmare. A way to bulk delete menu items would save so many headaches.

        Also in regards to #5, this is likely something that would need to be put into the plugin submission guidelines and enforced by the plugin review team, rather than something implemented in core. I can’t imagine a good way to prevent plugins from modifying the admin menu however they please, so this kind of organization would need to happen at the community level.

    • raulalgo 6:36 pm on September 17, 2015 Permalink | Log in to Reply

      Hi,

      I’m fairly new here but I’ve been willing to collaborate for a while. I’m UX designer with big experience on mobile and long time user of WordPress.

      I’ll be happy to give a go at some elements on that list.

      Is there any priority among them?

      • sanit.tmg 9:58 am on September 19, 2015 Permalink | Log in to Reply

        hello sir… i am an IT student.. and i wanna learn about this word press but iv’e tried all videos, tutorials and much more but haven’t got my answers… sir will you plzz answer my questions sirr?

    • Cătălin Dogaru 7:12 pm on September 17, 2015 Permalink | Log in to Reply

      Hey,

      I would be interested in working on #22058 (alternative UI for the Background Image section in the Customizer) and #23120 (provide visual feedback on saving widgets). Some progress has already been made, it would be interesting to take things further.

    • Stephen Rider 1:42 pm on September 18, 2015 Permalink | Log in to Reply

      In response to Tom Ryan:
      You have a lot of good ideas, but I would have to strongly disagree with separating plugin settings from Core settings. I got involved with WP back around v2 or so, and at that time there was a widely accepted idea that plugin settings should all go under the Plugins menu. It was a huge mess. A few people (myself included) began championing the idea that plugins should me integrated cleanly. The best interface for a plugin is to be made in a way that you might not realize it isn’t Core.

      I totally agree with you that plugins should consistently link to their own Settings screens (if they exist) from their entry in the Plugins page. I believe I wrote the first tutorial about how to do that back in 2008: http://striderweb.com/nerdaphernalia/2008/06/wp-use-action-links/

      It would be nice to have some consistency, but at the same time I would hate to bind developers’ hands. It’s more a question of education.

      • Tom Ryan 5:37 pm on September 18, 2015 Permalink | Log in to Reply

        Thanks for your feed back Stephen!

        With respect to separating out plugin-added options, here is the issue I’m trying to address: The WP interface can look VERY different from site to site, depending on which plugins are installed. This makes the WP interface non-standardized and hard to find the things you use on a regular basis. I can understand your point about making the plugin integration seamless, but often settings are all over the place for no good reason. I have one theme that requires 5 other plugins and my top level menu is a mess of options I never use.

        Here is an example of a very a simple interface tweak that could help quite a bit: List all the core Settings items first, then a line, then list all the additional plugin settings below that line. That way, it’s still on the same menu, but you can always find the core WP items in the same place.

        By the way, many of the plugins I use should not be top level item; once they are set up, I only need to access them occasionally. It would be better if they were more like the themes page where you could see icons, for the installed plugins and click on them to configure them.. Maybe to have the best of both worlds, you could include a checkbox to enable the user to add a plug in to the top level menus. That would keep the top level WP menu clean by default, but allow users to include it in the top WP menu if they need to access it frequently.

    • Morten Rand-Hendriksen 4:11 pm on September 18, 2015 Permalink | Log in to Reply

      There’s also the ImageFlow project which looks to change the experience of adding and editing images.

    • FolioVision 4:53 pm on September 18, 2015 Permalink | Log in to Reply

      Hi Helen,

      Thanks for the suggestions. We’ve written a plugin for front end comment moderation (and now caching) called Thoughtful Comments. It works with all themes. We’d be happy to help add front end moderation to WordPress. I’ll take a look at backend moderation and see what might might be improved there.

      Hi Tom/Stephen,

      Plugin settings really must be put back into the Settings Menu and the Tools Menu. Each plugin demanding a top level menu item for itself is totally out of control and make most client sites look almost unusable now. 90% of plugins can get by with a Settings entry and (where necessary) a Tools entry.

      Forcing plugins to link to their own setting pages would be very helpful. I’d love to bind developers hands as consistency is the hallmark of great UI (think Mac OS 7 to 9 and Apple OS X vs Linux/Windows). Adding a requirement to consistently link to setting pages would make me very happy.

      Alec Kinnear

      • Tom Ryan 5:44 pm on September 18, 2015 Permalink | Log in to Reply

        > Each plugin demanding a top level menu item for itself is totally out of control and make most
        > client sites look almost unusable now. 90% of plugins can get by with a Settings entry and (where
        > necessary) a Tools entry.

        Thanks Alec, I agree with you 100%!

        If you think it looks bad as WP developer, can you imagine what it’s like for someone trying to come up to speed on WP for the first time? The WP learning curve is way to steep and long at this point.

        I’m hoping that the UX group will be able to address many of these issues to make WP a more accessible and easy/fun to use product.

    • fredhead 9:56 pm on September 21, 2015 Permalink | Log in to Reply

      I’d be interested to participate in the Publishing UX exercise. From my experience, in most cases simply floating the Publish button at the top as I scroll down the add/edit screen would work wonders for me. I hate having to always scroll up and up just to save my edits.

      FWIW, as a user and someone who sets up WP sites for other people, I totally agree with the discussion about adding flexibility to the WP core navigation as well as the need to provide more guidance about using Settings and Tools as the default location for plugin settings and functionality. The number of top level menus for lightly used plugins is way out of control in my experience and view.

    • th23 8:18 am on September 22, 2015 Permalink | Log in to Reply

      Really great to see, that the team is always looking how to (further) improve the user experience and interface 🙂

      I just yesterday submitted an idea on how to optimize the flow creating / editing a gallery – based on some feedback/ observation of a few friends using and struggeling a bit with finding their way around:
      https://core.trac.wordpress.org/ticket/33950

      In case somebody can point me to what to do next, I am happy to contribute!

    • thomask 7:49 pm on September 30, 2015 Permalink | Log in to Reply

      I would like to point the WP design/UX community to my ticket https://core.trac.wordpress.org/ticket/33931 where i have prepared very detailed wireframes for possible redesign, unification and simplification of many WP pages. I have also described there many problems with unnecessary differencies that might baffle the users and that harden the translation and modification.

    • rodosnews 10:58 pm on January 7, 2016 Permalink | Log in to Reply

      I FIND IT A LITTLE BIT DIFFICULT TO UNDERSTAND IT..

  • lessbloat 2:24 pm on July 31, 2015 Permalink  

    Calling all designers 

    With a location and date officially announced for WordCamp US (Philadelphia, December 4th–6th), it’s time to start thinking about design for the event.

    We’d like to include the entire WP community in this call for designers. If you’re interested, please continue reading:

    Concept proposals

    For those designers interested, we’d like to see a rough design proposal:

    Deliverables
    We’d like to see:

    1. Branding concept (logo, colors, typography for the event)
    2. Attendee badge design concept (dimensions: 4in x 3in)

    NOTE: Please free to submit designs in whatever fidelity you have time for (from sketches to pixel perfect mockups).

    Deadline for proposals
    Aug 10, Noon (PDT)

    Submissions
    To submit a proposal, please ping me privately on Slack (lessbloat is my username) including a link to your proposed design concepts.

    Questions

    When will I hear back?
    We’d like to get started relatively quickly. Please give us a week or so to sort through proposals after the the 10th. Note: I will reply to everyone who submits a proposal (whether you’re selected or not).

    What specific things would I be responsible for designing?
    If you’re selected, you’d design the following:

    • Branding
    • Badges
    • Signage (to be used on location)
    • Website design
    • T-shirts/Swag

    Will I be compensated for my work?
    Unlike most other conferences that charge hundreds or even thousands of dollars to attend, WordCamps tries very hard to keep attendance fees at a bare minimum. We do this by relying heavily on our amazing volunteers. That said, while you won’t receive financial compensation, this is a high profile event, and your work will be seen by everyone in attendance.

    Anything else I should consider?
    It might be helpful to check out the WordPress.org design handbook, specifically the sections on identity, colors, and typography.

    Additional questions?
    Please feel free to ask additional questions in the comments below, in the #design Slack channel, or via a private ping to me in Slack (lessbloat). Thanks!

     
    • lessbloat 9:01 pm on July 31, 2015 Permalink | Log in to Reply

      Two follow up answers from pings I received:

      1) Someone asked about the following sentence:

      That said, while you won’t receive financial compensation, this is a high profile event, and your work will be seen by everyone in attendance.

      Please know that I did not mean this in a “you won’t get paid, but you can add it to your portfolio” sort of way. Though now that I re-read it, I can see how it would come across that way, especially in my use of the words “high profile”. I feel bad. That sort of sentiment is gross.

      To clarify, what I meant to say was, this is volunteer work. The design work done for most WordCamps is done by volunteers. Since it’s volunteer work, naturally you won’t get paid. That said, if you have the time, and inclination to work on this, it should be a pretty great event, and plenty of people in attendance will benefit from your work.

      2) Someone asked if the could apply by submitting a portfolio site, instead of spending time to create proposal/concept designs (rather than spend time on a design with the chance that they might not be selected).

      Yep, that works too. If you’re interested in applying, and you’ve got a strong design portfolio that you feel represents your work well, please feel free to just shoot me a link to it.

      I hope that clears these things up. 🙂 Let me know if you have any additional questions or concerns. Thanks!

  • Stephane Daury (stephdau) 6:13 pm on June 25, 2015 Permalink  

    Core UI Chat, June 25th 2015, WC EU edition 

    Today’s chat did not really happen, for the best of reasons, since most of the regular contributors are currently making their way to the massive WordCamp Europe 2015. The good news is that many Core UI related chats are expected to take place there, as many gather in person.

    Since I ran the meeting for similar reasons last week, I figured I’d post a quick summary of what happened since then in Core UI Land instead.

    Tickets with notable UI-related commits

    #28820, #32213, #32015, #32325, #21845, #30157, #31336, and #31216

    Some active tickets

    • #32346 is being discussed
    • #29906 is alive and well, nearing commit state (needs testing)
    • #32395 got a brand new patch, needs testing
    • #16434 is seeing some patches and chatter
    • #30902 is on fire!
    • #19257 was set to fixed; #30729 got punted to a future release, and #31240 looks like it might as well

    Looking stalled, could use some help, with beta 1 approaching

    #31654, #32398, #26550, #29958, #32152, #32493, #29158, #30154, and #31655

    Main recommendations for commits this week

    I’ve chatted with the accessibility group about a series of List Table and accessibility ticket they have, and I’ve recommended they tag them as commit ASAP. They are all, IMHO, in good shape to be considered. They’ve also clearly been abundantly discussed, iterated upon, etc. Some commit-time tweaks might be required, but nothing I’d consider related to the actual functionality.

     
  • Kelly Dwan 7:04 pm on May 28, 2015 Permalink
    Tags:   

    Dashicons Returned!

    We’re meeting every Thursday at 18:30 UTC (2:30 ET) in #design-dashicons, after the #design meeting. As a reminder, our goal is to switch Dashicons to a collection of SVGs, rather than a font.

    Slack Archive

    We discussed

    To Do

    • Continue working on the feature plugin, starting with identifying code for all current icons
    • Write up the announcement. We have an outline, any help writing the full post in the next week would be much appreciated. Otherwise we might just post an outline 🙂

    As always, check in to #design-dashicons if you want to help out! We’ll meet again Thursday, June 6, 2015 14:30 UTC-4

     
  • designsimply 4:13 pm on May 27, 2015 Permalink
    Tags: , ,   

    User Testing for Customizer Menus 

    Following are testing tasks/questions, my initial walkthrough of the plugin at this stage, and some feedback with blockers separated from nitpicks. I will post testing videos in the comments as they come in.

    Please reply to each comment with the biggest takeaway you learn from the video if you watch any of them. Thank you!

    Tasks

    Intro: You have a blog about travel, and you would like to setup a custom menu for your blog.

    1. Log in with username ******* and password *******
    2. Go to Appearance > Customize and then click on Menus.
    3. Add a new menu named “Main Menu.”
    4. Add all of the pages already saved on the site to the menu.
    5. Reverse the order of the menu items.
    6. Set the “Main Menu” as the primary menu so it shows in the live preview.
    7. Add the “Travel” category to the menu.
    8. Move “Travel” so it is a child of the first item in the list.
    9. Add a link to Twitter and make it a submenu item next to Travel.
    10. Move Travel and Twitter from the first item so they are submenu items under the About page. Save changes.
    11. Create a new menu for social media with at least one social media link in it and add it to the sidebar.
    12. There is a way to use advanced menu settings to enable descriptions for menu items. Try to find it and add a description for the “About” page.

    Questions

    • Would you recommend this feature to a friend who needs to create menus on their website?
    • Have you used WordPress before? If yes, have you used the Menus feature inside the WordPress dashboard before?

    (More …)

     
    • designsimply 7:09 pm on May 27, 2015 Permalink | Log in to Reply

      Test 1

      If you watch the video, please post a comment with your takeaways as a reply here. Thank you!

    • designsimply 2:12 am on May 31, 2015 Permalink | Log in to Reply

      Discussed questions/nitpicks in Slack.

      Resulting tickets raised in GitHub:

      1. 52 – Make item ordering based on usage instead of a random order
      2. 53 – Help people who try to add menu items before they have created content
      3. 54 – Shorten “Currently set to:” to “Current:”
      4. 55 – Use a gear icon for advanced settings toggle instead of the screen options icon
      5. 56 – Unclutter the “Reorder” view by using more streamlined arrow icons
      6. 57 – Cannot delete new menus previously set to a menu location
      7. 58 – Duplicate “Home” page items could be confusing
      8. 59 – Update the menus panel description to make it more clear menus are for already-published content
    • designsimply 11:13 pm on June 22, 2015 Permalink | Log in to Reply

      Test 2 (done May 27, posting it here for reference)

      • designsimply 11:16 pm on June 22, 2015 Permalink | Log in to Reply

        Notes from https://wordpress.slack.com/archives/core-customize/p1434420874000649

        • She misses the “+ Add Items” completely when asked to add pages to the menu. Missing the step to add pages kind of messes up the rest of the test. 🙂
        • Preview looks fast/good!
        • There are some weird cursor artifacts that I haven’t seen before (might have just been a video/recording/playback problem, but should watch out for more).
        • The red outline as a notice that you need to fill in the “Link Text” field worked nicely.
        • She doesn’t seem to have any trouble creating submenus, very cool.
        • Testing note: I might need to clarify the last step to specify they should look for advanced menu settings within the menus panel (if that’s not too big of a hint).
    • designsimply 11:24 am on June 23, 2015 Permalink | Log in to Reply

      Test 3
      (WP 4.3-alpha-32909 + 32678.2.diff)

      If you take the time to watch this user testing video, thank you! Please reply below with one or two of the most important takeaways you found while watching the video.

      Testing note: I’ve figured out that sometimes a tester from usertesting.com starts a test and then stops in the middle (for whatever reason). If that happens, then a main menu is already present when it shouldn’t be as the next tester starts. I’m not sure what to do about that except to say it’s just something that happens and something to be aware of when evaluating tests, and it happened in this test.

      • Konstantin Obenland 12:22 pm on June 23, 2015 Permalink | Log in to Reply

        The bug you opened about duplicate menu names is important. Loosing a created menu that way is bad.

        When she tried to find the twitter link that first time, I kept thinking that the average user probably differentiates between a “common” link, and posts/pages on their site. I’m pretty sure they don’t realize that the whole menu experience is just a fancy way to create links to their own posts/pages.

        Overall it seems like she felt comfortable with the feature. I think if you take away instructions and have users that are on a mission, this will be really fluid and easy to manage.

        Not once was it mentioned that the left sidebar was too small or it felt cramped, either.

      • Stephen Edgar 12:52 pm on June 23, 2015 Permalink | Log in to Reply

        Moving on past the “main menu” already existed stuff…

        • At the 10:20 mark user is searching for the next 40 seconds a way to close the add new posts/pages/category etc panel, cannot find it, gives up by clicking `reorder` and that closes the panel

        • At 12:50, again looking for some type of “close” action out of the current view and clicks the `x` on the Travel Category and deletes this menu item

        • At 13:10, looking for the “close” panel option again, cannot find, clicks “add item” to close the panel

        • The _arrow directional_ reorder navigation does not appear intuitive to the user, resorts to exiting and using drag-n-drop

        • At 15:15 clicks _Save & Publish_, and the reorder arrow navigation action/option stays enabled, shouldn’t this reorder action/option now be closed/finished because the user has _saved and published_?

        • At 16:05 a new menu is about to be created, but for the previous ~30 seconds user clicked various items but essentially no changes were made to the existing “main menu” though the button is displaying as “save & publish”, shouldn’t this remain in the “saved” state as no changes have been made to the menu that need saving?

        • At 17:10 user looks to expand the “about” item to add a description but due to the issue above at 15:15 the “reorder” action/option is still in play so the intuitiveness of clicking something to expand it is missing, at 17:26 user clicks “done” that closes the “reorder” action/option, at 18:30 user ends up where they should have at 17:10, clicks “about” and it expands as per what was originally expected.

    • designsimply 11:27 pm on June 23, 2015 Permalink | Log in to Reply

      Test 4
      (WP 4.3-alpha-32909 + 32678.2.diff)

      If you take the time to watch this user testing video, thank you!

      Please reply to this comment with the most important takeaways you found after watching the video.

      • Nick Halsey 10:49 pm on June 27, 2015 Permalink | Log in to Reply

        Notes:

        • Redundancy is important – if one thing fails (ex. drag & drop), it’s good that we have an alternate approach available (reorder buttons) – taking inspiration from structural engineering here
        • If we have a bug, the user will think they’re doing something wrong (ex. preview fails to load changes) – we need to be very careful with this
        • We should probably debounce the partial refresh a bit when editing ex. a menu item title or description. Constant refreshing while typing gets pretty distracting
        • Our screen options approach here seemed much easier to find for the tester than they are in the admin, based on several user tests that have been done in the past
        • Overall the tester seemed to enjoy the experience and was able to find things with some clicking around. Generally had a positive reaction once they found something, and only really got “stuck” when running into bugs with the preview and drag & drop
    • Stephen Edgar 1:13 am on June 24, 2015 Permalink | Log in to Reply

      • 6:53 “This is a very complicated reversing method” Initially tried to drag’n’drop to reorder the menu items but couldn’t, also tester notes would prefer drag’n’drop, throughout the remainder of the this users testing tester never tries again to use drag’n’drop to reorder menu items

      Some similarity with the reorder vs drag’n’drop notes I added for the previous test

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
Skip to toolbar