Redesigning the New Project Dialog

Pratik

Last week, we released Visual Studio 2019 version 16.1 Preview 2. If you have the latest update – awesome and thank you. If not, you can download it from the link above. Or, if you already have the Preview, just click the notification bell inside Visual Studio to update. This post discusses one of the most visible interface changes we’ve made in Visual Studio 2019 – the New Project Dialog.

Motivation

In Visual Studio 2019, one of our main objectives was to help you (both new and experienced developers) get to your code faster. You can read more about this journey in the blog post that discussed the new start window. One of the most common ways to start coding in Visual Studio is to create a new project.

The dialog hadn’t changed much since 2010, and the interaction model between folders and items has been in place since Visual Studio .NET back in 2002. We hadn’t put much time into the New Project Dialog because we believed it largely served its purpose. Until recently, we didn’t have the telemetry in place to be able to analyze how this dialog was used. Our initial hypothesis was that most of you interacted with the dialog rarely. And instead you spend much more time modifying projects you had previously created. After a bit of user research and analysis, we found that the latter holds true. But we were quite mistaken about the former. Many of you use the dialog to create new projects to try out new things or add on functionality to existing solutions a lot more often than we thought.

User research

We then dove deeper into the data, particularly looking at the usage patterns from new users of Visual Studio. We found that there was a surprisingly large drop-off in usage after launching Visual Studio to opening a project to start coding. That led us to the hypothesis that the New Project Dialog might be somehow inhibiting success with the tool. So, we expanded our user research and gathered that this dialog was presenting you with too many concepts, choices, and decisions. The process of getting started with your code wasn’t straightforward enough. The hierarchy of the nodes wasn’t consistent. When you installed several workloads you would see too many languages and technologies presented at the top level. Further down into the second and third level of nodes, the taxonomy became quite unmanageable with differences in naming conventions of categories.

When we asked participants in our usability studies to search for code scaffolding to get started with certain types of projects. We saw them click around through the top level nodes, and not click through the hierarchy. Sometimes they completely ignored the structure on the left and focused just on the default list of templates in front of them. What surprised us was that even for experienced developers, some of the options weren’t intuitive. Most couldn’t pinpoint the link to ‘Open Visual Studio Installer’ when the templates they were looking for weren’t available. They glazed over the search box without interacting with it. They seemed to completely ignore the recent templates list. And when they finally selected a template, they lacked confidence in their choice.

In addition, we learned that most of you think about your app type first but there are some who think about languages first when finding templates to start coding. It became clear that this mixed structure wasn’t intuitive for either use case. The barrier to the first actions within Visual Studio was too high. And this was a problem that small UI tweaks weren’t going to solve.

Design principles

During the design and development of Visual Studio 2019, we looked at usage across different areas of the project creation process and honed down on a core design goal –

“Get to code quickly with the minimum necessary scaffolding and help developers configure their application with the right settings”

Remove unnecessary choices

There were several options in the dialog box that we sought to remove as a way of simplifying the set of decisions you had to make. We first cleared out the rarely used toggles to sort templates and change icon size. The checkbox to create a git repository provided little value when creating a project. Our research told us that the right step for git init was either before project creation when you create the local folder or after project creation when you know you want to move ahead with the project. You can now do this in one click through the ‘Add to Source Control’ button in the bottom right of the status bar.

The last option to go was the ability to view and download online extension templates through the dialog. You can also do this through the Manage Extensions dialog in the Extensions menu. So, we eliminated the duplicate behavior to reduce cognitive load while looking for templates. After all that, our design looked something like this:

Search-first

But through design studies we found that this still wouldn’t lead to success. The node structure was still too convoluted to be understandable in early usage. We initially wanted to flatten the tree so that there was less digging and clicking to do. But we soon realized that with the overabundance of supported project types, it was an exercise in futility coming up with a single taxonomy that supported every single template. So, we decided to fundamentally shift the way users could discover templates. The search box had low usage in the old dialog box because its position made it a secondary function. But search is a prominent discoverability mechanism across the industry. So, we wanted to improve the way Visual Studio utilized search to help find what you need.

Our early studies saw participants gravitating towards the search box when we changed its position. But there was still a slight hesitation before typing something in – “what do I search for?”. This led to the realization that search cannot be a catch all, and there needs to be a little more guidance. We took the values we knew from the old dialog’s node structure and saw that they roughly fell into three categories – ‘languages’, ‘platforms’, and the more vague ‘project types’. So we introduced filters and tags as secondary mechanisms to support search. Browsing through the tags in the template list will help you discover the different capabilities of Visual Studio based on the tool-sets installed in your instance. Setting filters will allow you to narrow down the list to your preferred choices when starting with a new project.

One decision at a time

We also broke up the process into two separate screens. There is a single decision point on the first screen – select a template. And all the interface elements direct you to make that choice. The second screen is all about providing details about the project type you’ve selected. You can modify the values here or move through the project configuration screen without changing anything since all the recommended defaults are set for you. Some of the more complex project templates then open a third screen which has custom options specific to that project type.

Looking at the template list itself, we made a point to sort this list by our most recommended project templates for the workloads you have installed. So, the template that you should select if you aren’t exactly sure what to do would be the one placed higher in the list. We found that most of you don’t use more than 10 different types of templates, so we’ve made the recent templates list even more prominent than it was in Visual Studio 2017, so that you can get to your most common templates without having to search for them.

Looking forward

This is the first iteration of a new design paradigm we’re trying to adopt for Visual Studio. We’ve been measuring adoption and engagement since the launch of Visual Studio 2019 earlier this month and we’re happy to see a significant increase in success rate through the get to code journey. But at the same time, we acknowledge that the evolution of the experience isn’t over just yet. We’re continuing to listen to your feedback and learning from you to ensure success. We’re on the path to make improvements to search and filtering as they are now the key functionality to finding the right templates. In addition, we recently built in the ability to add tags to your own custom templates. If you’re a template author, find out more on how to update your templates in this blog post. We released this functionality as the result of your direct feedback, and we thank you for it. But we are looking to do better and could use more of your help. Please continue to share your feedback through the Visual Studio Developer Community.

119 comments

Comments are closed. Login to edit/delete your existing comments

  • Eugene Kuchynski

    Maybe new dialog is worse than old, at least now. But I think this subject doesn’t deserve so much noise at all. In the morning, when I launch VS, I just continue to work on yesterday’s project. And when rarely it’s needed to create new project, both dialogs work well. Instead, when VS is launched, it’s interesting to see what’s new in the world of development, new technologies, extensions, articles, etc.

  • Fares Eidi

    I also find the new menu unusable and the worst part of VS 2019 
    Drastic changes in user experience are risky and users often prefer a way to revert back to ”classic view’
    Admittedly it is well intentioned and usage of telemetry to drive UI enhancements sounds like a very good idea…. but clearly isn’t

    • Yann Duran

      I’ve given Microsoft feedback MANY times saying go ahead and create new experiences if you feel you must, but DON’T FORCE IT ON PEOPLE. Give us a way to opt-out of the new experience and use the classic experience if we feel more productive using it. It should be the OUR choice, not some team at Microsoft!

  • f q

    Please bring the old new project dialog back. The new one is wasting our time.

  • James Walker

    This looks horrendous.

    Please stop making changes for the sake of it to a product which is relied on for professional work.

    You claim to have identified a problem (too many top-level categories, although I’ve never found it so…) and then, rather than trying to solve it, just given up and passed the baton to the user!

    The new interface seems to pass all responsibility to the user… there’s no obvious guidance whatsoever on what templates you have installed, and the bizarre decision to prioritise search is just absurd. If you claim users can’t figure out what template to use (unlikely, they’re devs after all…) forcing them to search for something they can’t identity isn’t going to help!

    Now we have to guess the name of the template we’re looking for and push through a two-screen process just to create a new project, instead of clicking a simple Category name and filling in the project name. You’ve made it harder, more time consuming and more confusing.

    Please stop redesigning core UI elements that have served perfectly well for years… This isn’t a real problem despite what your “telemetry” might claim. Did you actually ask any real users before embarking on this… you can’t keep on citing vague “telemetry” benchmarks as the motivator for major change with no option to restore the old UI.

    This is totally uncalled for and seems to be the result, once again, of a self-styled “UX team” saying “remove everything, making it search-based will make it ‘simpler'”.

    We’re devs, we need functional, not simple.

  • cs

    Sorry, but “search first” only works when you “know” what you are looking for. It doesn’t aid discoverability, especially when you are not aware of the possible options that are available…..and “show me everything” actually gets one in a worse situation than before, as there is no structure to build a picture of “collections” of project/template types…..just a “list of results” to scroll throught . Thus, this puts a mental load on your memory on having to know/remember the right combination of search terms in order to “find” what you want. To make matters worse you have “simplified” or rather obscured details about certain project classifications. For example, a developer that is focussed on purely WIN32 app development, now has that hidden…..they can’t search on keyword “WIN32″……it’s all lumped under a generic “Windows” classication…..which makes it more difficult to distinguish from other types of “Windows” applications. The same with “ATL” projects……at least searching for “ATL” brings back one project in the search results but only by accident due to it being used it in the title……it misses the other possible ATL project template types.  By making this change, and not providing the ability  to “switch” back to the old layout/structure….you have dis-invested developers muscle-memory in project creation….learned over a long period.

  • Steve Hurst

    Why waste time on this, this is retro step in my book , your efforts should be focussed on much more important areas of productivity gains  such as  refactoring, managing references, renaming projects and folders across solutions. While I am having a rant,  it would make more sense to rebrand the package manager console  I fear that its  solely responsible to manage nuget packages been superseded , for example  I spend more time  running Entity framework commands in a nuget window  which is counter intuitive.  

  • Джон Шепард

    I deleted Studio 2019 preview just because of the that terrible New Project dialog box, it’s just awful. This is an unsuccessful experiment, the old dialogue is quite great. Please restore an old version, the new dialog looks like as if it is inserted from a completely different type of user interface (tablet) so, it’s really useless on the PC. What’s the point if most of developers still use the mouse and keyboard to enter the program code? So, you need to adapt everything in UI to classic input principle.

  • Oleksiy Gapotchenko

    Sorry to be that guy, but I have to admit that the new dialog is a mess. It -kind of- does the search, but it misses the important aspect – discoverability. Let me try to look at the dialog with the eyes of a beginner: what should I search for? An endless linear list of stuff does not help either as it causes an immediate information overload. Buzz words as a categories do not help either. Developers do not look on things that way. IoT, Cloud, Service meh.

    Despite my countless attempts to get used to it, I had to turn that dialog off and now I start from a blank VS 2019 and then go to File -> Recent Projects and Solutions route. Welcome back to 1999.

    On a side note, VS 2019 also killed a Blue theme by making it purple, and thus hardly usable. Judging from the Dark theme choice in the latest blog posts, I think everybody tends to passively agree on that. Even you cannot use the new Blue (aka Purple) theme. Dark is the only sensible choice now.

    So what do we have in VS2019? Two clearly regressive changes (new dialog and theme). Lot’s of unfixed stuff from previous versions. And tons of new bugs that makes it barely usable. Back in the day such versions were called alpha versions. But you say it’s a release. Go figure.

  • Edward Chmiel

    While I will reserve judgement on the UX design until I play with it a lot, I think you are missing the fundamental problem. That problem is non-familiarity with the various types of projects. Example: “Pig Application” and the description “A project for creating a Pig application.” That is not at all helpful! Never never NEVER simply restate! In other words, I have no idea what a Pig application is, what its for, or anything. A simple link on the description that leads me to a basic understanding page is what is needed, and badly. How can I experiment if I have no idea what I am experimenting with? Having to go out to the web to find out is time consuming and inhibits experimentation. TIA 

  • Eric W

    Can’t search for something if I don’t know what it is. Please give an option to toggle this feature on/off. Also, does this affect the Add Item dialog (from Solution Explorer?)