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

  • Bob Noordam

    I have written many UI parts for our internal CRM, and have removed something more then once after a ‘great idea ™’ turned out to be an actual downgrade for the users. This new startup experience and creation dialog is one of those cases. Get rid of it, live and learn.

  • Giang Nguyen

    Can’t wait for the day the developer can choose the new project dialog the way they want it (with new design or old one). Thanks for the efforts aber in my opinion the the new design is very unproductive. At least one should be able to resize the dialog to see more.

  • Peter Bille Larsen

    The new dialog is not useful for VS. It’s a great usability concept, but when creating a project I need to see all the different templates and possiblities. Now I have to guess, which template to use, because they are hidden from start. Old one back => soon as possible.It’s like a road map, where all the streets are hidden, you can only find a street by typing its name, and since you don’t know the name, you can never use the map.

  • SuperCocoLoco .

    The new Project Dialog is the absolute worst and most confusing thing about about VS2019. The UX design of the new dialog is, like Sype 8, a completely unuseable and ugly nigthmare. Visual Studio users are desktop users, not tablet or mobile users, but Microsoft are obsesive creating mobile/tablet/cloud UX design for desktop computers, like Windows 8 or Windows 10.
    Please, get back and restore the old new project Window dialog and the Start Page.

  • SuperCocoLoco .

    The new Project Dialog is the absolute worst and most confusing thing about about VS2019. The UX design of the new dialog is, like Sype 8, a completely unuseable and ugly nigthmare. Visual Studio users are desktop users, not tablet or mobile users, but Microsoft are obsesive creating mobile/tablet/cloud UX design for desktop computers, like Windows 8 or Windows 10.
    Please, bring back and restore the old new project Window dialog and the Start Page.

  • Nitin Sawant

    the new dialog is BS, cant choose the version of asp.net when creating asp.net project.

    how do I switch back to old dialog?

  • Nitin Sawant

    no bueno,

    You added new dialog OK
    but why remove the older one? it was good
    new one is not at all good

    how do I switch to older version of the dialog?
    I am not able to select android API level version when creating Xamarin forms application

  • Chuck Ryan

    Well I finally got around to setting up my laptop and installing VS 2019 16.03 and took a good look at your new dialog. Next I played around with it for a while, trying various filtering options and looking at the list of project templates, closed the dialog and opened Send Feedback to search the feature reuests. I attempted to upvote one and add a comment but it always locked after clicking submit, so I came here.
    Serious question, is there some kind of contest going on inside the VS dev team to see who can create the most rediculous feature?

    The dialog is unreadable.
    The scrolling is so choppy that I cannot follow it with my eyes.
    The filtering is confusing and many project types seem to be missing from where I would expect to see them.
    The dialog is fixed size.

    What were you thinking when you created this?

    As far as the various responses you are making asking how this can be improved, it cannot, it is total garbage and needs to be disposed of.

  • Pratik NadagoudaMicrosoft employee

    Thanks for all the feedback folks. We totally hear and understand how the dialog doesn’t work for your use cases. Designing something new is an iterative process. We are actively reviewing suggestions and working on improvements in the experience. We want these to target the functional usability issues that you all have brought up. Here’s a list of suggestion tickets on Developer Community related to the new project dialog. Each of them has a design concept that proposes a solution to the usability issue. We’d really appreciate if you engage with the suggestions through your votes and comments. Thank you!

    Problem: Too many clicks to use filters

    1. You can see the active filter value within the combo boxes for language, platform and project type dropdowns. Clicking on it will display the dropdown and allow you to change the filter. You can clear all filters at once by the ‘Clear filters’ button on the top right.

    Problem: Can’t see enough templates

    2. You can toggle an option that removes the descriptions from the template list so you can see a condensed list view with just title and tags.

    3. You can resize the dialog by dragging the edges in order to see more templates in the list. By horizontally dragging, you can expand the recent templates list to show the top tags for platform and project type along with language.

    Problem: Filters don’t show relevant results

    4. In the default filter dropdown, you first see the categories of tags for templates you have installed above a line. Below the line, you can see other available options that you can click on to install the templates and toolsets required for them.

    Problem: Hard to find newly installed templates

    5. After installing new templates through a Visual Studio component or extension, you open the new project dialog and see the new templates are floated to the top of the list with a ‘NEW’ label on the template itself and the filter dropdowns that have new templates. 

    6. You can toggle an option that sorts the template list by ‘installed date’, ‘alphanumerical’, or the default (popularity)

    Problem: Recent templates list filled with unwanted templates

    7. You can pin templates from the recent templates list or from the main list onto the recent list through a single click star. You can also reorder and remove recent templates from the list.

    Problem: Difficult to browse through templates

    8. You can see all the filters in a single view which overlays the template list by clicking on the ‘Filters’ button.

    Problem: Zero results on searching

    9. You can optionally see other suggested results below your main results list that are related but outside of your search and filter constraints. These can also include available templates from other VS components not installed or the online marketplace.

    • Chuck Ryan

      Or how about this idea… You include the old dialog style and set your search first design, one I have never seen work well unless the user is intimately familiar with the contents being searched, as the default. Next you allow us to change the default back to the old style and quit wasting our time as we have work to do!

    • Hitesh Davey

      …”Designing something new is an iterative process. ” this is true but kindly don’t force every developer to use your new project dialog by hook or by crook. I am not sure about other developers in your VS team but I was very much okay with the 2017 style new project dialog. This 2019 dialog is like a show stopper for me. You can maintain 2019 dialog as default style but at least provide an option to switch to 2017 style. Imagine a case whereby you are forced to like and wear attire you don’t feel comfortable wearing it.

    • SuperCocoLoco .

      Problem: Nobody wants the new project dialog because is an unusable mess and it does not provide anything at all.
      Only one Solution: Restore the old new project dialog and you can throw the new one in the trash and stop wasting time with unnecessary things.
      Seems that you not hear and understand nothing.

    • Weijie JIN

      Sorry to conclude: you are not capable for this job, here’s why:
      1. You don’t have your own idea what requests should be accepted and what should be rejected.
      2. Your whole ideas are based on tickets from Developer Community, that’s horrible! You don’t have any idea!!
      3. You messed up a good product, wasted a lot of people’s time telling you, you are doing wrong.

      Sorry maybe this will hurt your feeling, but this is what I am thinking according to your reply.

    • f q

      Please bring the tree view back! The design of new project dialg is wasting our time

    • Soft Works

      Pratik – What you’re effectively saying here is: “Thanks for the feeback, but we don’t care.”
      You haven’t addressed any of the detailed and well-explained concerns at all. Not even partially. Not even remotely.
      Instead, you’re presenting a list of 9 items that are hardly matching anybody’s expressed concerns here. It should have become clear that almost nobody (except very few) is interested in detail adjustments to the new dialog.
      You say that you’re acting based on user telemetry/feedback… (which has become subject of doubt for many)
      …how can it be possible that – at the same time – you’re so incredibly ignorant about the feedback you’re getting here?

    • WM Z

      “Thanks for all the feedback folks. We totally hear and understand how the dialog doesn’t work for your use cases.”
      I register an account simply to express my unsatisfiedness to you.
      That’s the most upsetting “thanks” and “understand”ing. None of the above 1-9 solves any of our problem.
      Dude, we really “thank you” for presenting such a mess!
      Your words were so kind and polite but your behavior was so harsh and rude. You could had been providing a single option and let people switch back to previous classic design which had been proven to be productive and efficient for so many years.

      Please revert to the classic design, put it as the default one and make your “new” design an “experimental” option.
      BTW, please bring back the “Save solution on creating new project” option. What number of telemetry told you guys that we don’t need it?

    • daan verstraten

      The old dialog was indeed something that you had to learn, but it didn’t take much to learn it. but once you had it learned it was a huge time benefit.
      The new screen is easy to learn, but so difficult to find what you need. or to look for it. its take a lot more time on what you’re looking for or exploring what you have.

  • Yordan .

    The VS2019 way of presenting things looks like we – the developers are supposed to be 11 years old childs working on a tablets, having absolutely no clue what we are doing. The same absurd UI ideology we are witnes inside Windows 10.I very dislike it.To be honest – if I left my brother to design something for a tablets – he will come up with definately the same ideology, because he have no clue what’s all about. This is the way I feel this dialog and generally the Windows 10 UI approach is made. It’s made from a peoples which have absolutely no clue what they are doing at all.

    • Chuck Ryan

      It appears to be a continuation of the ‘modern’ Microsoft development policies that started with Windows 8 and Visual Studio 2012. The outright rejection of OS and IDE’s rediculous flat/colorless UI paradigm bruised their collective developer ego’s so badly that now they refuse to accept any form of negative feedback by their customers and plow ahead no matter what.

      • André Ziegler

        “that now they refuse to accept any form of negative feedback by their customers and plow ahead no matter what.”
        that’s the point. Pratik Nadagouda is defending his work like Steven Sinofsky in b8 blog about the wrong Windows 8 design.
        With 16.2 the extension to load old start page is also broken, so for us VS2019 (and .net core 3.0) will be skipped.

        • Chuck Ryan

          Yes they have moved way past stubborn, passed completely blind and settled into childish actions to force their worst ideas on us.

        • Yann Duran

          I was afraid they might remove the code for the old Start Page, which is why I started working on a start page replacement, called Start Page+. A proof-of-concept preview should be on the Marketplace very soon.