{"id":354094,"date":"2023-05-31T15:56:07","date_gmt":"2023-05-31T14:56:07","guid":{"rendered":"https:\/\/blog.jetbrains.com\/?post_type=pycharm&p=354094"},"modified":"2024-01-15T16:44:45","modified_gmt":"2024-01-15T15:44:45","slug":"five-things-to-love-about-the-new-ui","status":"publish","type":"pycharm","link":"https:\/\/blog.jetbrains.com\/pycharm\/2023\/05\/five-things-to-love-about-the-new-ui\/","title":{"rendered":"Five Things To Love About the New UI"},"content":{"rendered":"\n

Are you using the New UI yet? Not yet? Let me tell you why it’s the best thing since sliced bread! <\/p>\n\n\n\n

Let\u2019s get it enabled and take a look around. The easiest way to do that is from the Settings<\/em> cog at the top-right of the UI:<\/p>\n\n\n

\n
\"Menu<\/figure><\/div>\n\n\n

PyCharm will need to restart, but that\u2019s it; you\u2019re done!<\/p>\n\n\n\n

In this interface update, we have introduced more blank space around the various elements. This is to help separate content without adding elements such as dividers on the screen. If you prefer to have the UI elements a little bit smaller, you can select Compact<\/em> in the Meet the New UI<\/em> tool window (or later in your Settings by searching for “new ui”). This setting removes some white space and padding around interface elements.<\/p>\n\n\n

\n
\"\"<\/figure><\/div>\n\n\n

There are a couple of themes that you might notice straight away, including the use of colour and element size to denote information hierarchy. <\/p>\n\n\n\n

For example, in the Dark<\/em> theme, we have a dark gray bar at the top for common entry points to functionality such as VCS actions and Run actions and a black background for the editor. <\/p>\n\n\n

\n
\"The<\/figure><\/div>\n\n\n

Let me give you a tour of the lovable little landmarks in this UI. <\/p>\n\n\n\n\n\n\n\n

#1 – The Main Toolbar<\/h2>\n\n\n\n

The Main <\/em>toolbar <\/em>is cleaner and has a more succinct layout. It has all the functionality you know and love. It is your one-stop shop for project-related information:<\/p>\n\n\n

\n
\"The<\/figure><\/div>\n\n\n

Let\u2019s go from left to right. The first area I want to talk about is the Project <\/em>widget. This is where you can see the name of your current project, switch between recent projects, create new projects and open existing ones.<\/p>\n\n\n\n

To the right of the Project <\/em>widget is the VCS <\/em>widget. This lets you quickly see the status of your project in version control, including the branch and if there are any outgoing (shown in green) or incoming (shown in blue) changes:<\/p>\n\n\n

\n
\"\"<\/figure><\/div>\n\n\n

The VCS <\/em>widget is right next to the name of the project, and it is now a clear entry point for functionality related to your project and version control when you click the drop-down arrow. You\u2019ll see lots of these so-called \u201centry points\u201d for functionality groups as we continue our tour.<\/p>\n\n\n\n

Over to the right is your Run <\/em>widget, which has been redesigned, so I\u2019ll go into more detail in the next section.<\/p>\n\n\n\n

Finally, on the very right-hand side of the Main <\/em>toolbar, you have your more general icons, including Code With Me<\/a>, Search Everywhere, and Settings. It\u2019s worth noting if you like using your mouse, the Settings<\/em> cog icon takes you to some top-level options that you\u2019ll probably use most frequently, including Plugins, Theme, Keymap, and View Mode. I hope you don\u2019t want to, but you can also switch back to the Classic UI here!<\/p>\n\n\n\n

#2 – The Run Widget<\/h2>\n\n\n\n

Let\u2019s look at the Run<\/em> toolbar widget in more detail. The first thing you\u2019ll notice is the bigger, bolder icons. These are great because they give you immediate visual feedback as to the state of your application. For example, before you run or debug your application, your Run<\/em> widget looks like this:<\/p>\n\n\n

\n
\"\"<\/figure><\/div>\n\n\n

If you click the Run icon, it\u2019ll change to this:<\/p>\n\n\n

\n
\"\"<\/figure><\/div>\n\n\n

Now you can see your application is running, and you can stop and re-run it, or stop it entirely. You could also click the debug icon, which will prompt you to stop the currently running application so you can run it with PyCharm\u2019s debugger instead. <\/p>\n\n\n\n

If you run the application with PyCharm\u2019s debugger, the widget will change to this:<\/p>\n\n\n

\n
\"\"<\/figure><\/div>\n\n\n

You can still access all your run configurations from the drop-down menu, and for each one, choose how you want to run it as well:<\/p>\n\n\n\n

\"Accessing<\/figure>\n\n\n\n

The functionality for the currently selected run configuration is available from the vertical ellipse button too.\u00a0<\/p>\n\n\n\n

#3 – The Tool Windows<\/h2>\n\n\n\n

The New UI brings you new icons, an improved layout, and the option to see more tool windows at any time. The new larger icons help reduce the cognitive load of trying to find what you are looking for because there\u2019s less on the screen. <\/p>\n\n\n\n

I\u2019ll show you how to customize where they are in the UI so you can quickly find them when you need them:<\/p>\n\n\n\n

\"Tool<\/figure>\n\n\n\n

You have the option to split your tool windows vertically. For example, in the screenshot below, the Commit<\/em> tool window is below the horizontal separator bar. Tool windows can be dragged below the separator to open them in a vertical split:<\/p>\n\n\n

\n
\"Splitting<\/figure><\/div>\n\n\n

You can also split tool windows on the right-hand side in this way, too:<\/p>\n\n\n\n

\"Splitting<\/figure>\n\n\n\n

Finally, if you want to split your tool windows on the bottom so one is on the left, and the other is on the right, drag the tool window you want to appear on the right-hand side to the right-hand bar. In the screenshot below, I\u2019ve dragged my Problem tool window icon over to the right and then opened it alongside the Terminal tool window:<\/p>\n\n\n\n

\"Splitting<\/figure>\n\n\n\n

All the tool windows now use outline monochrome icons, which are more modern and don\u2019t clutter the interface with any additional unnecessary information. If you do want to see the name and keyboard shortcut of any tool window, hover over the icon. Remember, the handy shortcut to hide all your toolbars is \u2318\u21e7F12 (macOS), or  Ctrl+Shift+F12 (Windows\/Linux).<\/p>\n\n\n\n

#4 – Run and Debug Tool Windows<\/h2>\n\n\n\n

Both the Run<\/em> and Debug<\/em> tool windows are now available from the window tab on the left. This is great from a standardisation perspective as it allows you to quickly access both the tool windows to manage the state of your application.<\/p>\n\n\n\n

In addition, the Debug<\/em> tool window has been updated to have one toolbar that contains the most common actions based on usage statistics. This might mean that some actions you\u2019re used to clicking aren\u2019t where you expect them to be! We haven\u2019t removed any functionality, everything is still accessible, but for example, you may notice that the Evaluate Expression<\/em> icon is gone. <\/p>\n\n\n\n

There are still plenty of ways to evaluate an expression. You can:<\/p>\n\n\n\n

    \n
  • Use \u2325F8 (macOS), or Ctrl+F8 (Windows\/Linux)<\/li>\n\n\n\n
  • Use Shift Shift (macOS\/Windows\/Linux) for Search Everywhere and then type in “evaluate expression”<\/li>\n\n\n\n
  • Select Evaluate Expression<\/em> from the right-click context menu in the Debug<\/em> tool window<\/li>\n<\/ul>\n\n\n\n

    There is also a dedicated field for evaluation in the Debug<\/em> tool window:<\/p>\n\n\n\n

    \"Evaluate<\/figure>\n\n\n\n

    In addition to those changes, there are new tabs for switching between the Threads & Variables<\/em> and Console<\/em> views if there\u2019s a single running configuration.<\/p>\n\n\n\n

    \"The<\/figure>\n\n\n\n

    #5 – The Editor<\/h2>\n\n\n\n

    Last but not least, the editor has had a number of updates in line with the design choices we\u2019ve made. It would be easy to overlook these changes in terms of what to love in the New UI, but these themes that run throughout have given the whole interface a fresh, clean, professional look as you move through your codebase.<\/p>\n\n\n\n

    The Light and Dark colour themes have improved contrast and a consistent colour palette to brighten up (or darken) your day:<\/p>\n\n\n

    \n
    \"Light<\/figure><\/div>\n\n\n

    The iconography has been overhauled in the editor, too with more distinguishable shapes and colours. You will see these changes in the editor and the wider IDE. This has, in my opinion, given PyCharm a fantastic face-lift:<\/p>\n\n\n\n

    \"Icons<\/figure>\n\n\n\n

    Breakpoints are now placed over the line numbers, saving horizontal space:<\/p>\n\n\n\n

    \"Setting<\/figure>\n\n\n\n

    If, on the other hand, you prefer to have your breakpoints next to the line numbers, you can still do that by right-clicking in the gutter and then selecting Appearance<\/em> > Breakpoints Over Line Numbers<\/em>.<\/p>\n\n\n\n

    The colour palette for annotations for Git Blame<\/em> has been updated. The lighter the shade, the older the change is. Conversely, the darker the shade, the newer the change is:<\/p>\n\n\n\n

    \"Git<\/figure>\n\n\n\n

    Summary<\/h2>\n\n\n\n

    Finally, this blog post wouldn\u2019t be complete without talking about why we have updated the interface for JetBrains IDEs. We have gathered a lot of feedback from our users over the past few years, and we learned that our current (Classic) UI is associated with words such as cluttered<\/em>, outdated,<\/em> and less visually appealing<\/em>. <\/p>\n\n\n\n

    Given that, we knew we needed to update our user interface, but how did we decide what it would look like? Fundamentally, we started out by implementing the user experience patterns that I\u2019ve spoken about in this blog post. We subsequently undertook several rounds of rigorous internal and external review cycles and updated the New UI based on your feedback. <\/p>\n\n\n\n

    That’s all for today. I hope this has convinced you to try the New UI and that you fall in love with it as much as I have! Remember, you can enable the New UI from the Settings<\/em> cog at the top left of the IDE window. There\u2019s a link in the Settings<\/em> to share your feedback with us!<\/p>\n","protected":false},"author":1150,"featured_media":359113,"comment_status":"closed","ping_status":"closed","template":"","categories":[1401,601,2347],"tags":[6992,147],"cross-post-tag":[],"acf":[],"_links":{"self":[{"href":"https:\/\/blog.jetbrains.com\/fr\/wp-json\/wp\/v2\/pycharm\/354094"}],"collection":[{"href":"https:\/\/blog.jetbrains.com\/fr\/wp-json\/wp\/v2\/pycharm"}],"about":[{"href":"https:\/\/blog.jetbrains.com\/fr\/wp-json\/wp\/v2\/types\/pycharm"}],"author":[{"embeddable":true,"href":"https:\/\/blog.jetbrains.com\/fr\/wp-json\/wp\/v2\/users\/1150"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.jetbrains.com\/fr\/wp-json\/wp\/v2\/comments?post=354094"}],"version-history":[{"count":10,"href":"https:\/\/blog.jetbrains.com\/fr\/wp-json\/wp\/v2\/pycharm\/354094\/revisions"}],"predecessor-version":[{"id":362421,"href":"https:\/\/blog.jetbrains.com\/fr\/wp-json\/wp\/v2\/pycharm\/354094\/revisions\/362421"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.jetbrains.com\/fr\/wp-json\/wp\/v2\/media\/359113"}],"wp:attachment":[{"href":"https:\/\/blog.jetbrains.com\/fr\/wp-json\/wp\/v2\/media?parent=354094"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.jetbrains.com\/fr\/wp-json\/wp\/v2\/categories?post=354094"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.jetbrains.com\/fr\/wp-json\/wp\/v2\/tags?post=354094"},{"taxonomy":"cross-post-tag","embeddable":true,"href":"https:\/\/blog.jetbrains.com\/fr\/wp-json\/wp\/v2\/cross-post-tag?post=354094"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}