{"id":222658,"date":"2018-12-13T08:30:55","date_gmt":"2018-12-13T16:30:55","guid":{"rendered":"https:\/\/blogs.msdn.microsoft.com\/visualstudio\/?p=20425"},"modified":"2019-02-14T15:23:16","modified_gmt":"2019-02-14T23:23:16","slug":"get-to-code-how-we-designed-the-new-visual-studio-start-window","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/visualstudio\/get-to-code-how-we-designed-the-new-visual-studio-start-window\/","title":{"rendered":"Get to code: How we designed the new Visual Studio start window"},"content":{"rendered":"<p>By now, many of you may have noticed a very prominent change to the launch of Visual Studio in Visual Studio 2019 Preview 1. Our goal with this new experience is to provide rapid access to the most common ways that developers get to their code: whether it\u2019s cloning from an online repository or opening an existing project.<\/p>\n<p><figure id=\"attachment_20435\" aria-labelledby=\"figcaption_attachment_20435\" class=\"wp-caption alignnone\" ><a href=\"https:\/\/devblogs.microsoft.com\/wp-content\/uploads\/sites\/4\/2019\/06\/startwindowP1.png\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" class=\"wp-image-20435\" src=\"https:\/\/devblogs.microsoft.com\/wp-content\/uploads\/sites\/4\/2019\/06\/startwindowP1.png\" alt=\"\" width=\"750\" height=\"513\" \/><\/a><figcaption id=\"figcaption_attachment_20435\" class=\"wp-caption-text\">New start window in Visual Studio 2019<\/figcaption><\/figure><\/p>\n<p>A month ago, we shared a sneak peek of the experience (in the blog post <a href=\"https:\/\/devblogs.microsoft.com\/visualstudio\/a-preview-of-ux-and-ui-changes-in-visual-studio-2019\/\" target=\"_blank\" rel=\"noopener\">A preview of UX and UI changes<\/a>) and mentioned the research and observation that we used as input into the design and development. This is the story about how we got there.<\/p>\n<h2>How &amp; why we began this journey<\/h2>\n<p>Two years ago, we reinvented the Visual Studio installation experience to offer developers the ability to install exactly what they need and reduce the installation footprint of Visual Studio. We broke Visual Studio down into smaller packages and components and then grouped them together into development-focused workloads (which are bundles of packages and components). We quickly realized that the installation was just one piece of the journey our users take when they are getting started with Visual Studio.<\/p>\n<p>We began to think more broadly \u2013 beyond just the installation of the bits, to explore the developer journey of getting to code. This journey starts from the moment you think about that great idea for an app all the way to writing your first lines of code, and integrating Visual Studio into your daily routine. To help us understand what developers were doing throughout their first launch, we built a data informed model of the customer journey.<\/p>\n<p><figure id=\"attachment_20475\" aria-labelledby=\"figcaption_attachment_20475\" class=\"wp-caption alignnone\" ><a href=\"https:\/\/devblogs.microsoft.com\/wp-content\/uploads\/sites\/4\/2019\/06\/VS-Funnel-View-Cropped.png\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" class=\"wp-image-20475\" src=\"https:\/\/devblogs.microsoft.com\/wp-content\/uploads\/sites\/4\/2019\/06\/VS-Funnel-View-Cropped.png\" alt=\"\" width=\"750\" height=\"352\" \/><\/a><figcaption id=\"figcaption_attachment_20475\" class=\"wp-caption-text\">Our Visual Studio Customer Journey<\/figcaption><\/figure><\/p>\n<p>These insights helped improve installation success rates and address common failures but lacked the ability to answer questions around why some users drop off from one step to the next and how do we make sure Visual Studio meets the need of millions of developers? Some of you may even be trying to better understand how to make your own consumer or business customers more successful with your products.<\/p>\n<p>So, from there we turned to existing mechanisms like surveys, interviews, social media (blogs), and A\/B experimentation to help us understand where and how to improve these experiences. The surveys received an overwhelming number of responses (thank you to those of you who contributed!) and provided us with a foundation of anecdotes that helped us understand our individual users even more. They helped us recognize the different types of users coming into our \u201cfront door\u201d, which is to say the first place they learn about Visual Studio and decide to download it. We identified through early cohort analysis, that almost half (50%) of users downloading were brand new to Visual Studio (but not necessarily new to coding) and only some of those users came back to Visual Studio for a second time. This was a surprising moment for us as we had no idea why this was happening!<\/p>\n<h2>Going beyond the data<\/h2>\n<p>We knew we needed deeper insights into how we could help new users be successful with their first time in Visual Studio and assist them in making the best choices along their journey. Fundamentally, we wanted to identify what the \u201cMagic Moment\u201d would be for them in Visual Studio. The \u201cMagic Moment\u201d is a phrase commonly used by product teams that maps a set of events or an experience a user has with a product that transforms them from a casual user trying something out to an avid, loyal user who finds success and even promotes the product. This moment is at the very core of identifying patterns to indicate users who will integrate a product or tool into their daily routine. We didn\u2019t know what our Magic Moment was just yet, but we had a lot of ideas on what we believed it might be, so we asked ourselves:<\/p>\n<p style=\"text-align: center;\"><strong><em>Is there something new Visual Studio users do in the IDE that indicates they will return or abandon after 5 minutes?<\/em><\/strong><\/p>\n<p>We set out to answer this question by:<\/p>\n<ol>\n<li>Observing developers, both brand new to Visual Studio and seasoned, as they find Visual Studio to download, configure, and start writing code.<\/li>\n<li>Identifying the problems that they encountered throughout their journey to code.<\/li>\n<li>Building hypotheses and concepts around getting to a \u201cMagic Moment.\u201d<\/li>\n<li>Validating the hypotheses and concepts via an iterative process of weekly testing and experimentation.<\/li>\n<\/ol>\n<h2>Our iterative process from interns to external users<\/h2>\n<p>We started by asking our summer interns to install and use Visual Studio for the first time in our user experience (UX) lab and document their journey. We were surprised at how long and difficult the journey from download to writing and running code was for them. We also gained insights into their expectations for Visual Studio based on other editors and IDEs they had previous experience with.<\/p>\n<p>Our first step was simple: we gave participants a clean virtual machine with only Windows 10 installed and asked them to find, install, use Visual Studio, and \u201cdo whatever is natural to you to get started.\u201d<\/p>\n<p>We then just watched\u2026<\/p>\n<p><figure id=\"attachment_20465\" aria-labelledby=\"figcaption_attachment_20465\" class=\"wp-caption alignnone\" ><a href=\"https:\/\/devblogs.microsoft.com\/wp-content\/uploads\/sites\/4\/2019\/06\/UXLabParticipant-Comparison.png\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" class=\"wp-image-20465\" src=\"https:\/\/devblogs.microsoft.com\/wp-content\/uploads\/sites\/4\/2019\/06\/UXLabParticipant-Comparison.png\" alt=\"\" width=\"501\" height=\"282\" \/><\/a><figcaption id=\"figcaption_attachment_20465\" class=\"wp-caption-text\">One of our participants in the User Experience lab<\/figcaption><\/figure><\/p>\n<p>Turns out even students think the <a href=\"https:\/\/en.wikipedia.org\/wiki\/The_C_Programming_Language\" target=\"_blank\" rel=\"noopener\">40 year-old concept<\/a> of writing a \u201chello world\u201d app is a great starting place. What also became extremely clear to us was that moment when users were writing and running code \u2013 we saw them become more engaged with Visual Studio and having fun. We saw an emotional change when they wrote their own code, compiled it, fixed some things, and ran it. We had a strong inkling that we were even closer to the \u201cMagic Moment.\u201d<\/p>\n<p>We then scaled up our research to bring in more new and experienced developers every week. We tested out many ideas using low fidelity mockups built in PowerPoint and eventually moved to higher fidelity prototypes. We tried variations of tasks and UIs as we tested our assumptions. There were multiple problems to solve but one of the most significant became clear when we saw new Visual Studio developers struggle when trying to open code or create a new project. The first view of Visual Studio was overwhelming with no clear guidance of what they should do first. So, we set out to focus on that stage of the journey in our designs and storyboards for Visual Studio 2019. The design process looked a little something like this:<\/p>\n<p><figure id=\"attachment_20485\" aria-labelledby=\"figcaption_attachment_20485\" class=\"wp-caption alignnone\" ><a href=\"https:\/\/devblogs.microsoft.com\/wp-content\/uploads\/sites\/4\/2019\/06\/whiteboard.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" class=\"wp-image-20485 size-full\" style=\"padding: 0px;\" src=\"https:\/\/devblogs.microsoft.com\/wp-content\/uploads\/sites\/4\/2019\/06\/whiteboard.jpg\" alt=\"\" width=\"1430\" height=\"308\" \/><\/a><figcaption id=\"figcaption_attachment_20485\" class=\"wp-caption-text\">Visualizing the friction points in the customer journey<\/figcaption><\/figure><\/p>\n<p><figure id=\"attachment_20495\" aria-labelledby=\"figcaption_attachment_20495\" class=\"wp-caption alignnone\" ><a href=\"https:\/\/devblogs.microsoft.com\/wp-content\/uploads\/sites\/4\/2019\/06\/StartWindowFlipBook-Original.gif\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" class=\"wp-image-20495 size-full\" style=\"padding: 0px;\" src=\"https:\/\/devblogs.microsoft.com\/wp-content\/uploads\/sites\/4\/2019\/06\/StartWindowFlipBook-Original.gif\" alt=\"\" width=\"1430\" height=\"400\" \/><\/a><figcaption id=\"figcaption_attachment_20495\" class=\"wp-caption-text\">Evolution of our start window designs<\/figcaption><\/figure><\/p>\n<h2>Bringing all our insights into Visual Studio 2019<\/h2>\n<p>From all the design explorations, experiments, and observations, evolved an idea of the start window which would offer a focused experience to quickly get you to writing those first lines of code. Given our insights, we wanted to ensure users, especially those new to Visual Studio (some who are already experienced in other development tools), could quickly experience that \u201cMagic Moment\u201d of writing their first lines of code and successfully run it each and every time.<\/p>\n<p>The start window would support new Visual Studio users by:<\/p>\n<ol>\n<li>Highlighting the choices, they must make during the early, crucial steps of getting started with Visual Studio.<\/li>\n<li>Removing distractions and providing suggestions for the best path forward.<\/li>\n<li>Enabling a search and filter focused experience for creating a new project.<\/li>\n<li>Promoting a streamlined online repository-first workflow.<\/li>\n<\/ol>\n<p>Developers who are already well-versed and experienced with Visual Studio might be wondering what\u2019s in it for them. What we\u2019ve heard from experienced developers is that onboarding junior developers is very challenging, so we believe the new start window is a step towards ensuring they are more successful in getting to their code each time they open the IDE. We will also continue to preserve and enable existing workflows in the start window to support the muscle memory that experienced users have established with Visual Studio. Lastly, seasoned developers in the user experience lab were delighted by the new \u201cClone and check out code\u201d experience which brings your online repositories right to your fingertips on launch.<\/p>\n<h2>Anatomy of the start window<\/h2>\n<p>We know the list of<strong> recent projects and solutions<\/strong> is one of the most common ways developers open code, so it was very important that we maintain this list in the most prominent part of the start window. We also knew it was VERY important to not break existing flows where developers open projects\/solutions from the desktop (by double-clicking) \u2013 so the start window will never show in this flow, as your code will always take priority and open immediately.<\/p>\n<p>Bringing a more focused, <strong>source-first experience of clone and check out code<\/strong> (like the Start Page had) to the forefront of Visual Studio was an opportunity to not only show new users the power of source providers like GitHub and Azure DevOps. We have also heard from our research with developers that this action is a more prominent part of a their daily workflow.<\/p>\n<p><strong>Opening a project or solution<\/strong> brings forward the concept of Visual Studio project and solution files that you can click on to open your entire codebase if you have an MSBuild-based solution. But if you use a non-MSBuild build system, such as CMake, then we would recommend <strong>opening a local folder <\/strong>instead. We\u2019ve been investing in support to allow you to browse, edit, build, and debug any code without a .sln or project file. You can learn more about Open Folder, including how to configure a different build system to work with it, in our <a href=\"https:\/\/docs.microsoft.com\/en-us\/visualstudio\/ide\/develop-code-in-visual-studio-without-projects-or-solutions?view=vs-2017\" target=\"_blank\" rel=\"noopener\">documentation<\/a>. In addition, if you want to browse loose files in Visual Studio, you can just open the containing folder and pick up the file from the folder view of Solution Explorer.<\/p>\n<p><strong>Creating a new project<\/strong> is a big part of getting to your code in Visual Studio even when it\u2019s prototyping some throwaway code in a simple template (like the Console App) or trying out the capabilities of a new platform or language for the first time. Based on the workloads you install, you\u2019ll always see the most commonly used templates first. We\u2019ve observed that developers first think about the kind of application they want to build (a mobile app, a website, etc.) and not the language \u2013 so we removed the language centric tree hierarchy and have improved searching and filtering to help you get to the right template more quickly. You\u2019ll also find a more prominent list of recently used templates so you can quickly get back to your favorite template with a single click.<\/p>\n<p>Lastly, <strong>continue without code<\/strong> offers developers a one-time escape from the window for the times when a different action is needed to start work (like joining a Live Share collaboration session, or attaching to a process). Alternatively, hitting the ESC key will also dismiss the window and immediately bring up the IDE. If there are other scenarios that you perform frequently and think should have a home on the start window (like for example attaching to a debugger), please upvote or create a suggestion in our <a href=\"https:\/\/aka.ms\/devcomm\" target=\"_blank\" rel=\"noopener\">Developer Community<\/a>.<\/p>\n<h2>What\u2019s next for this experience<\/h2>\n<p>In just a week, after releasing Visual Studio 2019 Preview 1, we\u2019ve heard developers tell us the start window provides a \u201cfocused way to get to the most common things.&#8221; We\u2019re already working on some of your feedback, such as support for Team Foundation Version Control and better scan ability in the recent solutions\/projects list.<\/p>\n<p>The start window experience is just one part of the journey we\u2019re on to continue to streamline the onboarding experience to Visual Studio. Our longer-term vision includes improvements like reducing the number of choices required to download and install and offering relevant samples and tutorials to assist when learning a new language or platform.<\/p>\n<h3>Tell us what you think<\/h3>\n<p>As you can tell from the journey we\u2019ve taken to get here, your feedback is essential to making this experience better. We\u2019d love to have you try it out for a few hours in your everyday work. If it still doesn\u2019t jive with you, then you can revert to the previous Visual Studio \u2018start\u2019 behavior. Go to Tools &gt; Options and search for \u2018Preview Features\u2019 which will allow you to configure this setting along with a few other preview features. Alternatively, you can find the option in Tools &gt; Options | Environment | Startup.<\/p>\n<p><figure id=\"attachment_20445\" aria-labelledby=\"figcaption_attachment_20445\" class=\"wp-caption alignnone\" ><a href=\"https:\/\/devblogs.microsoft.com\/wp-content\/uploads\/sites\/4\/2019\/06\/Preview-Features-Tools-Options.png\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" class=\"wp-image-20445 size-full\" src=\"https:\/\/devblogs.microsoft.com\/wp-content\/uploads\/sites\/4\/2019\/06\/Preview-Features-Tools-Options.png\" alt=\"\" width=\"744\" height=\"434\" \/><\/a><figcaption id=\"figcaption_attachment_20445\" class=\"wp-caption-text\">Tools | Options settings for Preview Features<\/figcaption><\/figure><\/p>\n<p>After you\u2019ve experienced Visual Studio 2019 Preview 1, please help us make this the best Visual Studio yet by letting us know what you like or tell us what is not working well for you. And of course, if you run into any issues, please let us know by using the <a href=\"https:\/\/docs.microsoft.com\/en-us\/visualstudio\/ide\/how-to-report-a-problem-with-visual-studio-2017?view=vs-2017\" target=\"_blank\" rel=\"noopener\">Report a Problem<\/a> tool in Visual Studio. You can also head over to the <a href=\"https:\/\/developercommunity.visualstudio.com\/\" target=\"_blank\" rel=\"noopener\">Visual Studio Developer Community<\/a> to track your issue or, even better, suggest a feature, ask questions, and find answers from other developers.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>A month ago, we shared a sneak peek of the experienc, the blog post A preview of UX and UI changes, and mentioned the research and observation that we used as input into the design and development. This is the story about how we got there.<\/p>\n","protected":false},"author":1106,"featured_media":222775,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1412,155],"tags":[1409,475],"class_list":["post-222658","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-development","category-visual-studio","tag-customer-development","tag-visual-studio-2019"],"acf":[],"blog_post_summary":"<p>A month ago, we shared a sneak peek of the experienc, the blog post A preview of UX and UI changes, and mentioned the research and observation that we used as input into the design and development. This is the story about how we got there.<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/posts\/222658","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/users\/1106"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/comments?post=222658"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/posts\/222658\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/media\/222775"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/media?parent=222658"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/categories?post=222658"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/tags?post=222658"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}