Title: Shiny Updates Review Author: Konstantin Obenland Published: May 16, 2016 --- [ ](https://profiles.wordpress.org/obenland/) [Konstantin Obenland](https://profiles.wordpress.org/obenland/) 5:11 pm _on_ May 16, 2016 Tags: [feature-plugins ( 2 )](https://make.wordpress.org/design/tag/feature-plugins/), 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 coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress.. It would help us tremendously if you could look over [the latest version](https://wordpress.org/plugins/shiny-updates/) 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](https://github.com/obenland/shiny-updates/issues/7), [theme updates](https://github.com/obenland/shiny-updates/issues/54), [activating freshly installed plugins (wip)](https://github.com/obenland/shiny-updates/issues/64), and [update-core (wip)](https://github.com/obenland/shiny-updates/issues/5). If you do encounter issues during your review, it would be great if you could [file those on GitHub](https://github.com/obenland/shiny-updates/issues) for us to discuss and fix them. Our next chat will be on [Tuesday, May 17 at 19:00 UTC](https://www.timeanddate.com/worldclock/fixedtime.html?iso=20160517T1900) 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! [#feature-plugins](https://make.wordpress.org/design/tag/feature-plugins/), [#review](https://make.wordpress.org/design/tag/review/), [#shiny-updates](https://make.wordpress.org/design/tag/shiny-updates/) ### Share this: * [ Threads ](https://make.wordpress.org/design/2016/05/16/shiny-updates-review/?share=threads) * [ Mastodon ](https://make.wordpress.org/design/2016/05/16/shiny-updates-review/?share=mastodon) * [ Bluesky ](https://make.wordpress.org/design/2016/05/16/shiny-updates-review/?share=bluesky) * [ Facebook ](https://make.wordpress.org/design/2016/05/16/shiny-updates-review/?share=facebook) * [ X ](https://make.wordpress.org/design/2016/05/16/shiny-updates-review/?share=x) * [ Reddit ](https://make.wordpress.org/design/2016/05/16/shiny-updates-review/?share=reddit) * [ Email ](https://make.wordpress.org/design/2016/05/16/shiny-updates-review/?subject=%5BShared%20Post%5D%20Shiny%20Updates%20Review&body=https%3A%2F%2Fmake.wordpress.org%2Fdesign%2F2016%2F05%2F16%2Fshiny-updates-review%2F&share=email) 1. ![](https://secure.gravatar.com/avatar/c5876422a37fd6194f1443154e5b8dc0920c99df2e3cc83f3d146bf34992abc5? s=32&d=mm&r=g) 2. [Mark Uraine](https://profiles.wordpress.org/mapk/) 9:21 pm _on_ June 8, 2016 3. Testing flows for any design reviews can be found here: [https://make.wordpress.org/core/features/shiny-updates/](https://make.wordpress.org/core/features/shiny-updates/) 4. ![](https://secure.gravatar.com/avatar/9548b9d111425d5ffc518f40c446753d69a6e2574daaed57b458fd8ce835dad5? s=32&d=mm&r=g) 5. [Michael Arestad](https://profiles.wordpress.org/michael-arestad/) 9:34 pm _on_ June 8, 2016 6. ## PluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory 󠀁[https://wordpress.org/plugins/](https://wordpress.org/plugins/)󠁿 or can be cost-based plugin from a third-party. interactions review 7. ### plugin-install.php 8. * 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. 9. ### Deleting a plugin 10. * 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. 11. ### Bulk actions 12. * 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). 13. * ![](https://secure.gravatar.com/avatar/43e10bdac0c553eccd6b30644312cc245d1d4df3cb04dbc898f44cae8d7d68cf? s=32&d=mm&r=g) * [Konstantin Obenland](https://profiles.wordpress.org/obenland/) 10:25 pm _on_ June 8, 2016 * Sounds like pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory [https://wordpress.org/plugins/](https://wordpress.org/plugins/) or can be cost-based plugin from a third-party. 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 CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. 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? - ![](https://secure.gravatar.com/avatar/9548b9d111425d5ffc518f40c446753d69a6e2574daaed57b458fd8ce835dad5? s=32&d=mm&r=g) - [Michael Arestad](https://profiles.wordpress.org/michael-arestad/) 8:23 pm _on_ June 9, 2016 - > Are you missing a bulk notification up top? - Tried again. Still not notification up top. I’m on the latest version of develop. * ![](https://secure.gravatar.com/avatar/43e10bdac0c553eccd6b30644312cc245d1d4df3cb04dbc898f44cae8d7d68cf? s=32&d=mm&r=g) * [Konstantin Obenland](https://profiles.wordpress.org/obenland/) 1:10 pm _on_ June 10, 2016 * Maybe I misused the word “missed” here 🙂 Should there be a bulk notification up top? * ![](https://secure.gravatar.com/avatar/0c00bc6bb79905cd73ec1cb0f22bf813f7f34f46ee670d018b30b5569b2924dd? s=32&d=mm&r=g) * [Tammie](https://profiles.wordpress.org/karmatosed/) 9:06 pm _on_ June 9, 2016 * I’d like to +1 everything said already by [@michael-arestad](https://profiles.wordpress.org/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 pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory [https://wordpress.org/plugins/](https://wordpress.org/plugins/) or can be cost-based plugin from a third-party. below: - View details feels really tight and hard to read: [https://cldup.com/MgaDbiPX2o.png](https://cldup.com/MgaDbiPX2o.png) * [https://cldup.com/1ubnnlF6te.png](https://cldup.com/1ubnnlF6te.png) - ![](https://secure.gravatar.com/avatar/43e10bdac0c553eccd6b30644312cc245d1d4df3cb04dbc898f44cae8d7d68cf? s=32&d=mm&r=g) - [Konstantin Obenland](https://profiles.wordpress.org/obenland/) 1:12 pm _on_ June 10, 2016 - The only thing we changed for updates was the color of the notice. Everything else is exactly the same as it has been since 4.2 14. ![](https://secure.gravatar.com/avatar/9548b9d111425d5ffc518f40c446753d69a6e2574daaed57b458fd8ce835dad5? s=32&d=mm&r=g) 15. [Michael Arestad](https://profiles.wordpress.org/michael-arestad/) 9:49 pm _on_ June 8, 2016 16. ## Theme interactions review 17. ### theme-install.php 18. * For some reason, this has a different interaction than installing a pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory [https://wordpress.org/plugins/](https://wordpress.org/plugins/) or can be cost-based plugin from a third-party.. 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](https://cloudup.com/csVKFSaTTyU) * There also is no way for me to activate the theme from here. Not even in the CustomizerCustomizer Tool built into WordPress core that hooks into most modern themes. You can use it to preview and modify many of your site’s appearance settings. 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) 19. I think these interactions need to be brought in line with the plugin install flow. They should be nearly identical. 20. ### themes.php 21. * 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. 22. * ![](https://secure.gravatar.com/avatar/43e10bdac0c553eccd6b30644312cc245d1d4df3cb04dbc898f44cae8d7d68cf? s=32&d=mm&r=g) * [Konstantin Obenland](https://profiles.wordpress.org/obenland/) 10:35 pm _on_ June 8, 2016 * > 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 pluginPlugin A plugin is > a piece of software containing a group of functions that can be added to > a WordPress website. They can extend functionality or add new features to > your WordPress websites. WordPress plugins are written in the PHP programming > language and integrate seamlessly with WordPress. These can be free in the > WordPress.org Plugin Directory [https://wordpress.org/plugins/](https://wordpress.org/plugins/) > or can be cost-based plugin from a third-party. 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. - ![](https://secure.gravatar.com/avatar/9548b9d111425d5ffc518f40c446753d69a6e2574daaed57b458fd8ce835dad5? s=32&d=mm&r=g) - [Michael Arestad](https://profiles.wordpress.org/michael-arestad/) 8:26 pm _on_ June 9, 2016 - > 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 pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory [https://wordpress.org/plugins/](https://wordpress.org/plugins/) or can be cost-based plugin from a third-party. completely. * ![](https://secure.gravatar.com/avatar/0c00bc6bb79905cd73ec1cb0f22bf813f7f34f46ee670d018b30b5569b2924dd? s=32&d=mm&r=g) * [Tammie](https://profiles.wordpress.org/karmatosed/) 9:14 pm _on_ June 9, 2016 * I’d +1 on no popup. * ![](https://secure.gravatar.com/avatar/43e10bdac0c553eccd6b30644312cc245d1d4df3cb04dbc898f44cae8d7d68cf? s=32&d=mm&r=g) * [Konstantin Obenland](https://profiles.wordpress.org/obenland/) 1:10 pm _on_ June 10, 2016 * 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 pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory [https://wordpress.org/plugins/](https://wordpress.org/plugins/) or can be cost-based plugin from a third-party. immediately with no chance to revert that action. * ![](https://secure.gravatar.com/avatar/0c00bc6bb79905cd73ec1cb0f22bf813f7f34f46ee670d018b30b5569b2924dd? s=32&d=mm&r=g) * [Tammie](https://profiles.wordpress.org/karmatosed/) 9:17 pm _on_ June 9, 2016 * Again, not wanting to repeat myself but I’d ditto the feedback [@michael-arestad](https://profiles.wordpress.org/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](https://cldup.com/N97hwGT25Z.png) * This feels even worse on the window view: [https://cldup.com/CSnnhs3ukL.png](https://cldup.com/CSnnhs3ukL.png) * ![](https://secure.gravatar.com/avatar/0c00bc6bb79905cd73ec1cb0f22bf813f7f34f46ee670d018b30b5569b2924dd? s=32&d=mm&r=g) * [Tammie](https://profiles.wordpress.org/karmatosed/) 9:22 pm _on_ June 9, 2016 * 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](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](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. 23. ![](https://secure.gravatar.com/avatar/9548b9d111425d5ffc518f40c446753d69a6e2574daaed57b458fd8ce835dad5? s=32&d=mm&r=g) 24. [Michael Arestad](https://profiles.wordpress.org/michael-arestad/) 10:17 pm _on_ June 8, 2016 25. ## update-core.php review 26. ### The list 27. 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. 28. * I don’t understand why we’re showing compatibility. * The type of item (pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory [https://wordpress.org/plugins/](https://wordpress.org/plugins/) or can be cost-based plugin from a third-party., theme, coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress.) 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. 29. * ![](https://secure.gravatar.com/avatar/43e10bdac0c553eccd6b30644312cc245d1d4df3cb04dbc898f44cae8d7d68cf? s=32&d=mm&r=g) * [Konstantin Obenland](https://profiles.wordpress.org/obenland/) 10:50 pm _on_ June 8, 2016 * > 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 coreCore Core is the set of software required to run WordPress. > The Core Development Team builds WordPress., it redirects me after to the > About page. Don’t do that, please. * We did not alter existing core behavior there. Should we? - ![](https://secure.gravatar.com/avatar/9548b9d111425d5ffc518f40c446753d69a6e2574daaed57b458fd8ce835dad5? s=32&d=mm&r=g) - [Michael Arestad](https://profiles.wordpress.org/michael-arestad/) 8:28 pm _on_ June 9, 2016 - > 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 coreCore Core is the set of software required > to run WordPress. The Core Development Team builds WordPress. 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. * ![](https://secure.gravatar.com/avatar/f35b9fb3b4afef01e3c3733a23e362a12a7122cbe6e78db2dc9af01336f55be8? s=32&d=mm&r=g) * [Dominik Schilling (ocean90)](https://profiles.wordpress.org/ocean90/) 10: 56 pm _on_ June 8, 2016 * > If I update coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress., 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. - ![](https://secure.gravatar.com/avatar/0c00bc6bb79905cd73ec1cb0f22bf813f7f34f46ee670d018b30b5569b2924dd? s=32&d=mm&r=g) - [Tammie](https://profiles.wordpress.org/karmatosed/) 8:57 pm _on_ June 9, 2016 - That’s a shame, no way around it? * ![](https://secure.gravatar.com/avatar/0c00bc6bb79905cd73ec1cb0f22bf813f7f34f46ee670d018b30b5569b2924dd? s=32&d=mm&r=g) * [Tammie](https://profiles.wordpress.org/karmatosed/) 8:56 pm _on_ June 9, 2016 * Keeping my comments also in the sections started. I agree with pretty much everything that [@michael-arestad](https://profiles.wordpress.org/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](https://cldup.com/nHOHa5XuCG.png) - I agree with coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. 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](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 headerHeader The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes. 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. * ![](https://secure.gravatar.com/avatar/c5876422a37fd6194f1443154e5b8dc0920c99df2e3cc83f3d146bf34992abc5? s=32&d=mm&r=g) * [Mark Uraine](https://profiles.wordpress.org/mapk/) 5:59 pm _on_ June 10, 2016 * 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](http://goo.gl/forms/7kzLwsFMHdf11LRP2) 30. ![](https://secure.gravatar.com/avatar/c5876422a37fd6194f1443154e5b8dc0920c99df2e3cc83f3d146bf34992abc5? s=32&d=mm&r=g) 31. [Mark Uraine](https://profiles.wordpress.org/mapk/) 4:17 am _on_ June 10, 2016 32. For the sake of time here, we should focus design reviews on the things Shiny Updates actually changed or enhanced. 33. I’ve noticed some comments above regarding things that already existed before Shiny Updates, and I think we should probably be mindful of that. 34. ![](https://secure.gravatar.com/avatar/c5876422a37fd6194f1443154e5b8dc0920c99df2e3cc83f3d146bf34992abc5? s=32&d=mm&r=g) 35. [Mark Uraine](https://profiles.wordpress.org/mapk/) 2:23 am _on_ June 11, 2016 36. I’ve made a few design modifications. 37. 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 coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. row update. 38. [https://cldup.com/PhQjoTnP5R.png](https://cldup.com/PhQjoTnP5R.png) 39. I’m going to explore some ways to make the Core redirect a little better. Comments are closed. # Post navigation [← Design chat summary 12th May](https://make.wordpress.org/design/2016/05/12/design-chat-summary-12th-may/) [Design Chat Agenda for May 19 →](https://make.wordpress.org/design/2016/05/19/design-chat-agenda-for-may-19/)