Redesigning the New Project Dialog

Avatar

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.

Avatar
Pratik Nadagouda

Program Manager, Visual Studio

Follow Pratik   

124 comments

Comments are closed.

  • Avatar
    Adérito Silva

    Hi! From my own experience, I find it more confusing and time consuming to create new projects with the new dialog concept. I was very happy with the old dialog. I would love to get it back as it was or, at least, something that works in a very similar fashion.Thank you and keep up the good work!

    • Avatar
      Michael Taylor

      Agreed. I find the new UI to be utterly useless. I want to create a console-based .NET Framework app in C#. What is in the top couple of scrolls? Console app in .NET Core. Changing the first (of three) drop downs to say I want Console filters down the list but C# Console app for .NET Framework still isn’t in the list. Even worse is that it is very easy to see Console App (NET Framework) and click it not realizing that for reasons that are completely unintuitive VB is higher in the list than C# even though I have yet to create a single VB app. Changing the second (of three) drop downs to say C# finally gets me to what I want. Compare that to VS 2017 where I click on a tree on the left side to select C# and then the right side to exactly what I wanted because the list is sorted alphabetically (by my choice).
      Note that the recent list on the left is only useful if you have a couple of project types you create AND you don’t accidentally select (or need just once) a different type. How exactly is this useful?
      I find it really funny that your target group for research is new VS users. How does this help any who already has experience in the IDE? At a minimal I would expect to be able to group by language because in my experience most dev teams use the same language so having to “select” the right language each time I want to create a different project type doesn’t make any sense to me.

      • Avatar
        Darren Talbot

        I so agree about the Recent List.  I can’t even use it on the old start page for the same reason.  I use maybe 3 project types regularly but the recents shows EVERYTHING you have ever opened even if it was by accident and items cannot be manually removed so they stay there forever.

      • Chris Howell
        Chris Howell

        I had a similar experience trying to create an ASP.NET .NET Framework application. I’ll get used to it, but I found the hierarchy view a bit easier. Maybe they could add the hierarchy back in as a call-out.

      • Avatar
        Yordan .

        The UI team involved into Windows 10 and VS 2019 shall be send to grow potatos, and forbiden to code anything for ethernity !

  • Avatar
    MgSam

    How is lower information density in any way better? This new dialog just ensures that most developers will only ever see the top 5 or so project templates and that the rest of them may as well not even exist. Sure, maybe they’ll get to a code window faster, but it significantly reduces the chances of them finding a more relevant template.
    I appreciate the work you guys put into the product but it just seems like way too many of the features you build are just bike-shedding.
    Surely your telemetry must tell you that one of the things developers spend by far the most time doing is debugging- and the debugging experience has barely changed in 20 years. You guys need to look at OzCode and bring those sorts of features into the core product. And the C# interactive window should be integrated into debugging- the Immediate Window is a crippled experience in comparison.

  • Avatar
    Sergey

    I absolutely positvely hate the new dialog. You say your design goal was “Get to code quickly with the minimum necessary scaffolding and help developers configure their application with the right settings”, if so, you missed a mark by a mile. Prior to this new disastorous effort I could get a quick snapshot of all project types, narrow it down and start a new project in no time. Now once the endless scrolling of the list ends, I could hardly remember what was at the top of the list. So I’m gonna ask, what was the point of fixing what wasn’t broken in the first place?

  • Avatar
    Karl Shifflett

    Pratik, please don’t be offended, but this dialog is unusable.  Please restore the one from 2017.  Don’t spend another minute trying to fix this thing, it’s a UX nightmare for customers.  This thing is a huge waste of time.  
    Just put it out the door, impossible to discover information and besides I don’t have 5 minutes every time I need to create a project.
    Karl

    • Avatar
      Yann Duran

      @Karl Shifflet
      Over 3 months later, Pratik is still trying to convince us that they can fix their new experience, despite the fact that so many angry developers are telling them to just go back to what we had before.
      I’m now using an extension called Classic ‘New Project’ Dialog that brings the old ‘New Project’ experience back. Sadly the new Start Window still forces the new experience on you, but you can at least right-click in a solution and get the classic experience.
      In a similar vein of Developer News, I’m currently working on a start page replacement called Start Page+, that combines functionality from VS2017’s Start Page and VS2019’s Start Window, in a non-modal document tab. A proof-of-concept preview will be in the Market place very soon.

  • Avatar
    Joseph White

    The new dialog looks like an interesting experiment but it takes ten times as many clicks to create a new project. This does not get me to code quicker! 

    • Avatar
      Yann Duran

      It’s ironic isn’t it, that their inital intention was “We initially wanted to flatten the tree so that there was less digging and clicking to do“, but what they’ve produced has resulted in far more clicks than before, with less discoverability than before too.

  • Avatar
    Y Zhang

    The new dialog is really bad! It’s confusing and I have to click next/back while the dialog in 2017 is just one-page. I hate this dialog so I switch back to 2017. I hope you notice that the new dialog is just an unmitigated failure.

  • Avatar
    hitesh davey

    VS2017 new project dialog was more than perfect in comparison with 2019 dialog! There was no need to reinvent the wheel. MS could have used their manpower to improve something else but not new project dialog. If you provide an option (2019 simplified style & 2017 advance style); then your telemetry data will show 99% of the developers (except MS emps) switch back to use the old style dialog for sure.

  • Avatar
    Alexandr Golikov

    I agreed with all above  That new dialog may be have more functionality, but in the same time it’s not intuitive and time consuming.
    Old one was better.

  • Avatar
    Darren Talbot

    I have to agree with all the other posters.  The new dialog is terrible.  It is just information overload. The screen is so cluttered yet actually contains less information. That is a real skill to pull that off. I do not need the clutter of the Tags and Template Description under each and every template title. It just hurts my head trying to filter out the unnecessary information. It was so much better and quicker with the tree at the left, the template list (Titles only)  in the middle and the description at the right. Also, why does it look like a different application? It looks like a monochrome web page pop up instead of part of a supposedly professional desktop application.  Those combo boxes are really disconcerting too.  Instead of working like combo boxes have worked since their inception, these ones clear as soon as you select something.  I thought it was a bug and kept selecting my choices hoping it would finally “stick”. I also dislike the requirement to go “Next” when previously I could access all options on the same page.