Redesigning PowerToys
Bringing Fluent Design to THE Windows tool for power users!
I have been using PowerToys for a few months now — it’s one of those tools you never knew you missed once you have used it. PowerRename and FancyZones are super useful tools that help me be more productive when renaming files in batch or when snapping my applications.
And the best thing? It’s all open-source!
Yet powerful, the UX can be improved: it feels ‘dated’ and stands out of the default Fluent Design experience users come to love (this is a common Windows problem, even within the OS itself…). While checking out the GitHub repo, I saw there were plans to modernize the UX — and with WinUI 3.0 coming up later this year we can have the best of both worlds — the power of Win32 and the beautiful experiences of modern XAML/Fluent! I decided to help the community to re-imagine the PowerToys UX by redesigning key features — and doing it all in UWP with WinUI 2.3. This means we should be able to re-use some of this XAML (in the actual product) in the future with WinUI 3.0!
Modernizing the application icon
The app icon is a shout out to the legacy PowerToys app. However, in 2020 it feels a bit outdated. I came up with a couple of concepts that are more modern while celebrating the rich history this app has. It’s up in the GitHub repo as an issue as well, so feel free to upvote which icon you like best here. Or even better, provide your own input or concept!
System tray & settings
PowerToys lives in the system tray — however, it’s doesn’t do a lot there. Clicking it once will open the settings, right-clicking brings up a context menu with the Settings and About options. I propose a redesigned system tray that gives you access to some of the other features such as the upcoming Power Launcher and Shortcuts Guide.
The settings view is a powerful way to tweak the many features PowerToys has. The current version tries to mimic the Windows 10 settings panel, but seems slightly off. I have re-designed the panel to be 1:1 in-line with the default OS settings while rewriting a couple of labels to be more consistent. There’s a WinUI 3.0 Alpha repo as well, so that should be easy to pick up once WinUI 3.0 rolls out later in the year
PowerLauncher
PowerLauncher is a new feature that is in development. The team did a great spec on what this feature should be able to do: searching and launching apps super fast (similar to Win+R). I mocked up how this feature could work in UWP — Reveal highlights are front-and-center to integrate better with the Windows shell. Clicking a result will launch the app, while selecting it (with keyboard) / on mouse hover will show some quick actions such as running the app as an admin or to open the file location.
Shortcuts Guide
Shortcuts is super helpful — holding down the Windows key will give you a great overview of relevant shortcuts. However, these shortcuts are not clickable with the mouse. I decided to add this (also listed as an open issue on the repo, btw!) and improving the shortcut tooltips for apps pinned to the task bar: the Guide would now sample the icons for the most recognizable color and use that as a tooltip background, making it easier to distinguish.
Introducing the PowerBar
Inspired by the Windows 10 GameBar, the PowerBar is a new concept: it’s a collection of features that are currently on the PowerToys backlog that is easily accessible with both keyboard and mouse. It’s a horizontal dock that will appear on top of the Shortcuts Guide (maybe there could be a setting to make it available as a standalone dock as well?). Additionally, the dock can animate into the screen when the mouse comes close to the top of the screen — this might be tricky however, taking into account how this should work for multi-monitor setups. Obviously, this command bar can be opened with a keyboard shortcut to quickly get to your favorite power features!
New features — Color Meter, Tapeline & GIF maker
I decided to combine some of the open GitHub issues around additional and upcoming power tools with my concept. One of these is the Color Meter — I’d love to have a ‘native’ colorpicker feature in PowerToys to quickly grab a color and copy the HEX value to my clipboard. Currently, I need to take a screenshot, open it in Photoshop and then pick the color. This would be an absolute time-saver on a daily basis!
Another feature that would be super useful for designers and front-end developers is a measuring tool. This could be used to quickly measure the amount of pixels between UI elements on the screen. Lastly, a screen-recorder/GIF maker tool can be helpful to create captures of your screen — like the ones you see in this article :).
Conclusions
PowerToys is an exciting project. Since it’s open-source we as a community can all influence and provide feedback to the developers at Microsoft and the community building it. That’s huge, and super exciting. Hopefully we’ll see more power tools drop soon. Any cool ideas or want to contribute? Make sure to put up a PR or issue on the GitHub repo!
All concepts you see in this article is part of the PowerToysUX playground UWP app. It’s up on GitHub and free to use, so feel free to check it out to learn more about how I’m using Composition, the Community Toolkit and other Fluent tricks to enhance the UX! And obviously feel free to use it in your own apps!
