WordPress.org

Make WordPress Design

Recent Updates Page 2 Toggle Comment Threads | Keyboard Shortcuts

  • Hugo Baeta 6:18 pm on June 2, 2016 Permalink |
    Tags:   

    Design Chat Summary for June 2 

    This is the summary from the Design Chat on June 2 (Slack log)

    Attendees: @karmatosed, @mapk, @johnragozzine, @voldemortensen, @afercia

    Topics

    • Design Chat, starting next week, is moving to Thursday June 9, 20:00 UTC – I’ve asked for the meetings page to be updated with the new time.
    • We discussed #35191 and it seems like the ticket will be divided into two: one about the tool tips, another about the visual changes to the table. @afercia mentioned he wants some more feedback on the link/text placement and wording, and that can happen in the existing ticket. So comment away!
    • That discussion spinned off (ha!) into a side conversation on the need to add a spinner to the shinny updates project, and how it’s important to keep consistent with the existing spinners in the admin.
    • I gave an update to the 50 Shades of Gray project. @voldemortensen helped me compile a list of colors, a total of 174 unique color declarations were found in the admin css. I’ve started organizing it in a codepen and the next step is to start making changes and then doing some QA (@johnragozzine offered to help with this) to make sure the changes are not messing anything up.
    • Open Discussion didn’t get any takers, so I shared an idea to replace Open Sans on the WordPress.org sites now that core is moving to system fonts. I made an exploration with a pairing of Source Sans Pro and Noto Serif on a codepen in an attempt to bring back a serif typeface to WordPress.org. Feedback welcomed!

    That is all for this week. Thanks to the attendees! @karmatosed will lead next week’s chat (on the new time slot) on Thursday June 9, 20:00 UTC!

     
  • Hugo Baeta 4:49 pm on June 2, 2016 Permalink |
    Tags:   

    Design Chat Agenda for June 2 

    the design weekly chat happens in a few minutes, at 17:00 UTC. Short agenda today, feel free to add more topics in the comments or bring something up during open discussion:

    • @karmatosed brought up some time conflicts and is proposing we move the time of the Design Chat, starting next week, to June 9, 20:00 UTC. Let’s discuss and if everyone agrees, we’ll switch it.
    • @afercia needs some feedback on #35191
    • The 50 Shades of Gray – Continued.
    • Open Discussion

    See you in a few minutes!

     
  • Tammie 5:59 pm on May 26, 2016 Permalink |
    Tags:   

    Design Chat Summary for May 26 

    Archives can be found here.

    We had a shorter meeting with a few main points brought up.

    Thoughts are still wanted for #36922.

    We discussed #36424 as requested by @ocean90. I added a comment that sums up our thoughts, we need to know why this is important on this screen, before we even look at the visual idea.

    @westonruter brought up #34923. @mapk is going to update the ticket with our feedback discussed.

    There was an open floor but no other subjects were brought up.

    Next week’s meeting will be lead by @hugobaeta and at the same time in #design on Slack.

     
  • Tammie 11:31 am on May 26, 2016 Permalink |
    Tags:   

    Design Chat Agenda for May 26 

    The weekly design meetings continue today at 17:00 UTC in #design on Slack. Topics to include this week:

    As you can see, we only have one agenda item, so we need more! Feel free to bring things up in the open discussion or leave a comment here for discussion.

     
  • Hugo Baeta 10:58 pm on May 20, 2016 Permalink |
    Tags:   

    Design Chat Summary for May 19 

    This is the summary from the Design Chat on May 19 (Slack log)

    Attendees: @mapk, @voldemortensen, @melchoyce, @kenshino, @empireoflight, @isaackeyet, @zetaraffix, @celloexpressions, @westonruter, @obenland, @emanweb.

    Topics

    • Shades of Gray – the never-ending story update
      With the help of @voldemortensen, who generated a list of admin colors for us, I was able to start compiling them in a list on codepen. The idea is to use this list to help visually merge some close values. We’ll need to also figure out context before we start opening tickets with patches to change the values.
    • #34893: Improve Customizer setting validation model (slack log)
      @celloexpressions and @westonruter jumped in the chat to explain what is going on here. Essentially, the ticket adds the ability for customizer settings to provide feedback to the user when there are errors, warnings, or info that should be provided regarding the validity of a setting. There was a lengthy discussion about this, where it was decided to add a section outline and/or a field outline for affected fields with errors.
    • Shiny Updates Review
      @mapk and @obenland stepped in to share the progress of the project. Basically they need design reviews and testing testing testing!
    • Open Discussion
      • #34923 needs design feedback and testing
      • The redesign of WordPress.tv came up, but the project is stalled (at least the community involvement is) since it’s an Automattic site.

    Thanks to everyone who attended. @karmatosed will be leading the chat next week on Thursday May 26, 17:00 UTC!

     
  • Hugo Baeta 4:28 pm on May 19, 2016 Permalink |
    Tags:   

    Design Chat Agenda for May 19 

    The weekly design meetings continue in less than an hour at 17:00 UTC. This week subjects will include:

    Not a lot of topics in the agenda, so feel free to bring things up in the open discussion or leave a comment here! See you in a bit!

     
  • Konstantin Obenland 5:11 pm on May 16, 2016 Permalink |
    Tags: , review, shiny-updates   

    Shiny Updates Review 

    Howdy designers!

    We’d like to have Shiny Updates in the best shape it can be in before it gets merged to core. It would help us tremendously if you could look over the latest version and review the design decisions that were made along the way.

    Some of the issues that saw a lot of design related discussion were about notifications, theme updates, activating freshly installed plugins (wip), and update-core (wip).

    If you do encounter issues during your review, it would be great if you could file those on GitHub for us to discuss and fix them.

    Our next chat will be on Tuesday, May 17 at 19:00 UTC in #feature-shinyupdates, in case you have questions or want to discuss any aspect of Shiny Updates. We’re also around to answer questions outside of that of course, please feel free to let us know.

    Thank you!

     
    • Mark Uraine 9:21 pm on June 8, 2016 Permalink | Log in to Reply

      Testing flows for any design reviews can be found here: https://make.wordpress.org/core/features/shiny-updates/

    • Michael Arestad 9:34 pm on June 8, 2016 Permalink | Log in to Reply

      Plugin interactions review

      plugin-install.php

      • When installing via plugin-install.php, the spinning arrows are okay, but shouldn’t be red. Make it blue or a dark grey. Red looks a bit warning-like or dangerous.
      • Once installed, the success message is there for a fraction of a second before changing to Activate. It’s pretty jarring. Maybe slow it down or move the success message elsewhere.

      Deleting a plugin

      • The popup is pretty jarring. We don’t have any in-app modals we can use or anything like that?
      • I would remove the red flash. It’s also pretty jarring and unnecessary.

      Bulk actions

      • The update notice still feel out of place with its alignment to the left and right.
      • Deleting multiple plugins is strange as I might not have anything on the screen letting me know what was deleted (due to a long plugin list).
      • Konstantin Obenland 10:25 pm on June 8, 2016 Permalink | Log in to Reply

        Sounds like plugin interactions in general are pretty jarring 🙂

        The popup is pretty jarring. We don’t have any in-app modals we can use or anything like that?

        This seems to be the way Core currently handles AYS messages. We didn’t consider it to be in the scope of Shiny Updates to open that can.

        I would remove the red flash. It’s also pretty jarring and unnecessary.

        The idea was to have that en par with how Comments are being deleted.

        Deleting multiple plugins is strange as I might not have anything on the screen letting me know what was deleted (due to a long plugin list).

        Are you missing a bulk notification up top?

      • Tammie 9:06 pm on June 9, 2016 Permalink | Log in to Reply

        I’d like to +1 everything said already by @michael-arestad. A few additional thoughts of mine on running through:

        • I really felt the updates should have almost been on top. My eye associated them with the plugin below:
        • View details feels really tight and hard to read:
          https://cldup.com/MgaDbiPX2o.png

        https://cldup.com/1ubnnlF6te.png

    • Michael Arestad 9:49 pm on June 8, 2016 Permalink | Log in to Reply

      Theme interactions review

      theme-install.php

      • For some reason, this has a different interaction than installing a plugin. When I click install, the button changes to installing, but then disappears on success accompanied with a success message fixed to the top. https://cloudup.com/csVKFSaTTyU
      • There also is no way for me to activate the theme from here. Not even in the Customizer view post-install.
      • When installing via the live preview, the only success message is a disabled button and, again, there’s no way to activate from here. (kinda big deal)

      I think these interactions need to be brought in line with the plugin install flow. They should be nearly identical.

      themes.php

      • The Update notice at the top of the theme feels really out of place. It’s also pretty far from the other actions. It might make more sense over the bottom of the image right above the actions.
      • Activating from here gives me a page refresh?
      • When deleting, the pop up is jarring. The rest of the delete is good.
      • Why do we show a plugin that was deleted and not a theme? Let’s keep it consistent and either make the whole plugin disappear or add some way of showing the theme that was removed. I’d lean toward the former.
      • Konstantin Obenland 10:35 pm on June 8, 2016 Permalink | Log in to Reply

        Activating from here gives me a page refresh?

        Activations (and deactivations with plugins) always need a page refresh because some tend to redirect on subsequent page loads.

        When deleting, the pop up is jarring.

        Is that because of the type of pop-up (confirm widow rather than custom built solution), or because we double check in the first place?

        Let’s keep it consistent and […] make the whole plugin disappear

        That was how we used to have it for the longest time but some folks felt like they’d like an inline success notification that goes beyond removal.

        • Michael Arestad 8:26 pm on June 9, 2016 Permalink | Log in to Reply

          Is that because of the type of pop-up (confirm widow rather than custom built solution), or because we double check in the first place?

          It’s the form, not the function. The fact that it’s a browser popup is the problem.

          That was how we used to have it for the longest time but some folks felt like they’d like an inline success notification that goes beyond removal.

          I would just remove the deleted plugin completely.

          • Tammie 9:14 pm on June 9, 2016 Permalink | Log in to Reply

            I’d +1 on no popup.

          • Konstantin Obenland 1:10 pm on June 10, 2016 Permalink | Log in to Reply

            There is precedent for using confirm dialogs for AYS messages, like when you try to permanently delete a media file. If we axed the confirm, an accidental click of the button would delete that plugin immediately with no chance to revert that action.

      • Tammie 9:17 pm on June 9, 2016 Permalink | Log in to Reply

        Again, not wanting to repeat myself but I’d ditto the feedback @michael-arestad says.

        I would like us to consider the colors and how it looks with mutliple update notices. Over the top with more than one it’s just a bit weird and cluttered visually. I’m not sure how to prevent this, but it could be interesting to explore. I don’t consider this a blocker, more something worth iterating on.

        I also find the ‘update now’ to be lost a little with the text.

        https://cldup.com/N97hwGT25Z.png

        This feels even worse on the window view:
        https://cldup.com/CSnnhs3ukL.png

      • Tammie 9:22 pm on June 9, 2016 Permalink | Log in to Reply

        I managed to get not only an update success but one required.. that was kind of unfortunate and I’d suggest shouldn’t happen. You can see here.

        https://cldup.com/T9Iio4z3su.png

        Things got a bit worse too as I then on clicking out of window got the update available message:
        https://cldup.com/t73KdbhlKl.png

        This was all rather odd as I had clicked to update. On refresh the update available message went. I was using Chrome.

    • Michael Arestad 10:17 pm on June 8, 2016 Permalink | Log in to Reply

      update-core.php review

      The list

      Before I get into the detailed feedback of the current Updates list, I want to mention that I think this design could use some iteration. I don’t think any of this needs to be in a literal table format.

      • I don’t understand why we’re showing compatibility.
      • The type of item (plugin, theme, core) is super far away from the item visually on desktop. So is the button.
      • Why are we showing “core”? Lets just let the user update their WordPress. Maybe even break it from the rest of the list via a 20px gap or something to show importance.
      • Clicking an update button is again different than Plugins or Themes. It goes through the cycle and sticks on a disabled Success button. No notice. No removal of the item from the list.
      • If I update core, it redirects me after to the About page. Don’t do that, please. Encourage me to go there, but don’t redirect me.
      • Update all is awesome.
      • Konstantin Obenland 10:50 pm on June 8, 2016 Permalink | Log in to Reply

        I don’t understand why we’re showing compatibility.

        Probably because it currently exists and someone once thought it would be a good idea to have.

        Clicking an update button is again different than Plugins or Themes.

        That should actually be similar to install-plugins.php

        If I update core, it redirects me after to the About page. Don’t do that, please.

        We did not alter existing core behavior there. Should we?

        • Michael Arestad 8:28 pm on June 9, 2016 Permalink | Log in to Reply

          Probably because it currently exists and someone once thought it would be a good idea to have.

          Sorry. I never finished my thought. I think we should only show a compatibility warning if there could be a problem. Otherwise, it’s just unnecessary information.

          We did not alter existing core behavior there. Should we?

          Possibly. I didn’t expect it when updating in bulk. I might expect it when updating just core. I’m not sure here.

      • Dominik Schilling (ocean90) 10:56 pm on June 8, 2016 Permalink | Log in to Reply

        > If I update core, it redirects me after to the About page. Don’t do that, please. Encourage me to go there, but don’t redirect me.

        That’s currently a technical issue, the redirect is required for cookie changes and user sessions IIRC.

      • Tammie 8:56 pm on June 9, 2016 Permalink | Log in to Reply

        Keeping my comments also in the sections started. I agree with pretty much everything that @michael-arestad has said, my additional thoughts are:

        • WP logo feels giant compared to a theme image if you have one next to it:

        https://cldup.com/nHOHa5XuCG.png

        • I agree with core being removed, feels super odd.
        • This page really needs some formatting and fixing up of rhythm.
        • I’m not sure about the right aligned action buttons. My eye is getting super confused here.
        • The update notice message here to me should reflect the update one over the plugins/themes. I found it got visually lost. It also needs some care typography wise and a new line for each bit of information.

        https://cldup.com/pI7zDZPITR.png

        • The ‘check again’ box I felt was lost visually. It felt weird to say time and then ‘check again’. That header itself just needs a little adjusting and attention.
        • The updating animation I felt could be green as it’s ‘doing’ something. This may go against other patterns though.
      • Mark Uraine 5:59 pm on June 10, 2016 Permalink | Log in to Reply

        Here’s a quick survey to figure out what’s a “nice to have” and what is a “must have” for the update-core.php page before merge.

        http://goo.gl/forms/7kzLwsFMHdf11LRP2

    • Mark Uraine 4:17 am on June 10, 2016 Permalink | Log in to Reply

      For the sake of time here, we should focus design reviews on the things Shiny Updates actually changed or enhanced.

      I’ve noticed some comments above regarding things that already existed before Shiny Updates, and I think we should probably be mindful of that.

    • Mark Uraine 2:23 am on June 11, 2016 Permalink | Log in to Reply

      I’ve made a few design modifications.

      1. The ‘type’ column data is now on the same baseline as the update item title and the ‘update’ button.
      2. Corrected the spacing around the ‘Re-install’ card.
      3. Made the WordPress logo smaller to feel more balanced in the core row update.

      https://cldup.com/PhQjoTnP5R.png

      I’m going to explore some ways to make the Core redirect a little better.

  • Tammie 8:57 pm on May 12, 2016 Permalink |
    Tags:   

    Design chat summary 12th May 

    Thanks to @zetaraffix for taking amazing notes again, (Slack log).

    Attendees: @hugobaeta, @zetaraffix, @designsimply, @mindsize, @ocean90, @voldemortensen, @karmatosed, @mapk, @swissspidy, @celloexpressions, @aubreypwd, @chrissmith.

    Agenda

      • Shades of Gray – the neverending story update.
        @hugobaeta has been having a hard time getting the actual list of colors used: cssstats.com needs .css urls to make a list, but wp-admin (at least the one running on make sites) uses a compiled .php, so it can be done manually for every single one. Looking for better ways, @voldemortensen offered to run a grep on trunk and did so before the end of the meeting.There are a few duplicate colors because of comments and stuff, but he narrowed it down from 1082 lines to 314. You can find it here.
      • Shiny updates deep dive. We dug into several issues with this as @mapk guided and summarized issues while asking for more opinions. The following is from that.

        Issue 1.
        There’s a disconnect between installing a plugin from the directory, and then knowing where to go to activate it. Right now, with Shiny Updates, the user installs and the button changes over to “installed”… but there’s not indicator to ‘activate’ it. So we’re exploring ways in which we can have them activate it right from the directory, or something.On the the Plugins > Add screen, Shiny Updates kinda keeps the experience inline with the action, since we no longer have a second screen after you click “Install”, the screen that has a “Activate plugin” link on it, and we’re just doing all the installation directly on the same page, we need a new solution, as ‘activation’ will most likely require a page reload.

        The question now becomes ‘when’ this appears if there are multiple installs inline, we can’t reload the page. But rather than trying to figure out the tech difficulties… I think, our discussion here, it should be around experience.Issue seems to be related to multiple installs.

        Also, the issue seems to also include “why” the process is at the moment so clumsy: why we only install and then activate now? (not to introduce a new flow that will cause domino issues we’re not aware of).

        According to @ocean90, we can’t install and activate at the same time because some plugins are doing redirections on activation and other stuff. Another reason is that new menus won’t be visible until a refresh.

        A possible solution (latest proposal) will be to change whatever was a “install” button, into an “activate” link. @mapk asks for more eyes to be better sure. In particular to see if users manifest issues of morphing button fear.

        @mapk proposes to as initial solution around that to have the ‘installed’ button fade out, and in it’s place show a blue primary button which might offer the visual difference needed to help that issue.

        Here’s the link to the trac ticket:
        https://github.com/obenland/shiny-updates/issues/64

        Issue 2
        https://github.com/obenland/shiny-updates/issues/5#issuecomment-218593910

        Trying to figure out what to do with the bunch of buttons that appear at the top of the WordPress Updates page. So far, we’re thinking of dropping the ‘download’ stuff. The ‘update’ button would be inline with the Core software row in the new table. But the ‘re-install’ button needs a home. It seems like an edge case… so I’m proposing we move it to the bottom of that page.Below the updates.

        One suggestion is for it to be a link, not a button (so it’s obviously less relevant) but it’s being that ‘re-install’ is performing an action seems to legitimize it being a button, as in general links are for changing views.

      • #33007: Add a dashboard widget that encourages users to translate WordPress. Looking for a general feedback/opinion on that, so please add your thoughts to the trac.
        Interesting to know how the preferred language is established.
      • User testing handbook page: we now have one thanks to @designsimply. She lead us through this and the following is in her words. A little background:
        • my goal was to make it short but still prescriptive enough to really encourage people to get started (think low barriers to entry)
        • it focuses mainly on a hallway usability testing style because I think that will get the max return for the least effort for this group
        • purposely didn’t mention paid tools like UserTesting.com because the context is open source & volunteer I’m thinking of adding another, more detailed page at @karmatosed‘s suggestion. This page compliments the main User Testing page and is intended to give more detail and tips once someone has made it past the hurdle of getting started with testing. You can find it here.
    • Open discussion: we had only a minute so nothing else came up.

    Next week @hugobaeta will be leading the meeting. Thanks all who came and don’t forget we have this meeting every week, same time and same Slack channel.

     
  • Tammie 7:25 pm on May 11, 2016 Permalink |
    Tags:   

    Design chat agenda for May 12th 

    The weekly design meetings continue with one Thursday at 17:00 UTC. This week subjects will include:

    We’ve not got that many subjects on the agenda so please add anything you’d like covered to the comments here. If you want some help from the designers in core, just come along as you will have a great opportunity to get some assistance this meeting.

     
    • Dominik Schilling (ocean90) 7:32 pm on May 11, 2016 Permalink | Log in to Reply

      I’d like to drop #33007 (Add a dashboard widget that encourages users to translate WordPress) in. Is the idea valuable for core in general? If yes, how can such a box look and what sort of interaction should it provide?

    • designsimply 7:32 pm on May 11, 2016 Permalink | Log in to Reply

      Looking forward to talking about the handbook page!

    • Konstantin Obenland 8:56 pm on May 11, 2016 Permalink | Log in to Reply

      Feature projects help – anyone got anything they need help with?

      Shiny Updates would need help with the question of how to best solve going from installing to activating a plugin from a UX point of few. The quirks we need to find solutions to are 1. what happens when there are plugin install request in the queue while the user wants to activate a plugin, 2. how do we signal a successful installation and change the action to activiating in the button? /cc @mapk

      @swissspidy is looking for UI feedback for the core update buttons. How should they be carried over into the table, should they be carried over at all or can we remove some?

      I won’t be around during your meeting, it would be great if you could leave comments on these issues with your recommendations! Thank you!

  • Hugo Baeta 2:38 am on May 7, 2016 Permalink |
    Tags:   

    Design Chat Summary – May 5 

    This is the summary from the Design Chat on May 5 (Slack log)

    Attendees: @zetaraffix, @afercia, @adamsilverstein, @ocean90, @michaelarestad, @eric, @johnragozzine, @frozzare, @rousseln, @mjcoop, @shramee, @voldemortensen, @andg, @aduth, @codeart, @tddewey, @mikehale, @macmanx, @katzwebservices, @ruknaree, @mgratch, @melchoyce, @arush, @beatstore, @ueli, @helen, @karmatosed, @danw33, @chriscamplejohn, @timothybjacobs, @eightbits, @paaljoachim

    Topics

    • The Shades of Gray project (ticket #35783)
      @afercia shared the progress of this project, and explained how its objective is to reduce the number of grays used in wp-admin by merging hues close to each other, with accessibility in mind. I (@hugobaeta) explained that the WordPress Color Palette I have going on in codepen should evolve along with this project. It was suggested to use a tool like cssstats to generate the list of existing hues, and do a more visual mapping of these. I offered to work on this moving forward, since @afercia doesn’t have much time for it. the goal is to have a bit push on this for 4.6.
    • Theme installer upload button improvements (ticket #35457)
      @afercia explained briefly what the issue was and asked for help with feedback on this ticket.
    • Revamp meta boxes (ticket #36474)
      One of the larger tickets for 4.6 needing design attention. @michaelarestad explains it’s part of a larger set of changes that will hopefully improve the publishing flow, and we need to solidify what we hope to gain from it. This ties into the “Improving Post New” list. It’s important to keep the discussion moving forward in the ticket.
    • “Permalink Settings” admin page is largely blog/post specific (ticket #35796)
      @eric asked for this ticket to be brought up in the chat. The ticket is specifically about the language used around the Permalink settings, but has evolved to a discussion about UI. It was agreed that this discussion should move to a new ticket about a redux to the whole Settings area. @michaelarestad offered to help with this. Him and @eric should touch base about this topic soon.
    • The design of the focus outline on buttons/elements could be improved (Ticket #34904)
      @michaelarestad brought this up during Open Discussion. He wants to commit it, but some concerns were raised about the styling. All feedback should be added to the ticket asap before it gets commited.
    • Other tickets needing attention
      • #34323 Make customizer media control placeholders clickable
      • #9777 add delete button to edit-tags.php
      • #36175 Simplify the Customizer Image Control action buttons
      • #34923 Introduce basic content authorship in the Customizer

    Thanks to @zetaraffix for taking notes during the chat 🙂

    Next meeting is on Thursday May 12, 17:00 UTC

     
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