Designing the Start screen

Discussion in 'Windows 8 News' started by Building Windows 8, Oct 6, 2011.

  1. Building Windows 8

    Building Windows 8

    Oct 6, 2011
    Likes Received:

    Thank you for the comments and feedback on the previous post. We definitely get the message that there's a lot of feedback and passion around the design. We're going to continue talking about the design and answering your questions and comments through these blog posts. We designed Start to be a modern, fast and fluid replacement for the combination of launching, switching, notifying, and at-a-glance viewing of information. That's a tall order. And of course, we set out to do this for the vast majority of customers, who are more familiar with the Start menu, mouse and keyboard, as well as for new customers using touch-capable devices. This post is authored by Alice Steinglass, the group program manager for the Core Experience Evolved team. –Steven
    As we wrote about in our post on evolving the Start menu, after studying real world usage of the Start menu through a variety of techniques, we realized that it was serving mainly as the launcher for programs you rarely use. As more and more launching takes place from the task bar, the Start menu looks like a lot of user interface for programs you don't use very frequently. And the Start menu is not well-optimized for this purpose. It affords limited customization, provides virtually no useful information, and offers only a small space for search results. We found that people “in the know” who valued efficiency were moving away from the Start menu, and pinning their frequently used programs to the taskbar so that they could access them instantly in one click. We see this quite a bit on professional workstations where there are set of tools that all fit on the taskbar and are all used regularly—machines used by engineers, designers, developers, information workers, etc.
    So, as evidence mounts that the menu hasn’t kept up with the modern way in which we use our PCs today, we've seen a growing interest in replacements for the Start menu (whether for touch, or mouse and keyboard). At the same time, we’ve seen an ever-increasing use of cumbersome notification tray icons (with ever-increasing menus and actions), and a continued interest in desktop gadgets that have yet to realize their potential.
    In light of these realizations, we stepped back and reimagined the role of Start in Windows 8. We knew that we already had a powerful launcher for desktop programs in the taskbar. The Start screen is not just a replacement for the Start menu—it is designed to be a great launcher and switcher of apps, a place that is alive with notifications, customizable, powerful, and efficient. It brings together a set of solutions that today are disparate and poorly integrated. As we have said, some of these features, as well as the full scope of mouse and keyboard support, are not included in the Windows 8 Developer Preview, which was focused on building Metro style apps and the WinRT APIs.
    Alive with activity

    As we analyzed Windows systems, we found that the average PC is cluttered with a large array of system tray notifications, a long list of folders and shortcuts for installed software, and applets in numerous places in the system, all begging for your attention. In addition to the programs, people access a large number of websites with updated data from the Internet or a company intranet. These programs and websites consume and present a constant stream of fresh data: new email, business data, communications, articles, pictures, feeds, etc.
    We designed the Windows 8 Start screen so you can create a connected dashboard that keeps you in touch with all the apps, activities, places, and people you care about. The news app shows the latest headlines, the weather app shows the forecast, an RSS app tells you what’s new, a social networking app displays your status, or a game can tell you when it is your turn—and when it isn’t. While these are just examples, it is not hard to imagine the apps you use today (whether in the browser, on the desktop, gadgets, or notifications) being reimagined as Metro style apps that connect to the same exact data sources, but instead provide a rich, customizable, interactive "heads-up display." We expect corporate applications to be developed that display Live tiles for important internal systems and processes too. You can envision even the most mundane uses being improved by this ability to track live data. For example, our development team has been using a Metro style bug tracker (an example of a corporate application) that connects up to our existing bug database. It was a small amount of work to create, and replaced several varied notification tray icons and gadgets in use around the team.
    Fig 1: Live tiles on the Start screen

    Apps can still represent themselves with just an icon and a name. And, for certain tools, that will continue to make sense: Command Prompt, Task Manager, etc. But, for most of today’s more relevant and connected apps, a simple icon and name is limiting, when they have so much more information they can share. And that information can be shared at a glance without any window management or any context change on your part.
    We knew we needed to be able to load live tiles instantly and efficiently. Long battery life and instant performance is fundamental to the experience of any mobile device. If every app launched and loaded a process when you entered Start (the traditional “gadget” model), it would slow down the performance of navigating to it, scrolling, etc. It would also increase the background memory and CPU footprint, which would decrease battery life. Today, when people want to check to see if they have new email, they run their mail app, see an app-specific notification competing with other notifications, or open up another browser tab. If they want to see what’s going on with their social networks, they leave open a bunch of different web sites or apps. If they are waiting for their turn in a game, that app is open. This means they are forced into a situation where they are either impacting their performance and battery life by running each of these programs simultaneously, or they are disconnected and have to constantly open and close programs. Why should your mobile device be so much better at these routine tasks than your PC (of any form factor) which has a vastly larger screen, more storage, and more connectivity and processing power?
    To address this, the Start screen uses a single process to pull down notifications from the Windows Notification Service and keep the tiles up to date. The tiles are cached, so they can load instantly when you go to Start. The result is that the tiles aren’t apps—they are a system-provided surface that can quickly tell you what’s new with your app. They are an extension of the apps you use (or the apps you develop), providing instant access to relevant content without costing battery life or slowing down performance.

    A critical part of creating a meaningful dashboard and launcher is enabling you to customize it to be yours. The old Start menu offered some limited customizability—you could pin a few apps to a short list, and use the customization dialog to choose which of the limited built-in quick links you wanted to show. But, the choices were severely limited. You could not add your own links. You could not link to anything other than an app. You couldn’t change the order of the apps, group apps, or pin more than a few apps. In fact, we’ve heard a lot of complaints about the challenges of ordering the Start menu items manually and maintaining that ordering. The taskbar helps with some of these issues, but it has a limited surface area to work with relative to the screen.
    As we started to design the new Start screen, we considered options where we would automatically sort apps or pin a set of quick links (similar to the right side of the Start menu today). But, in our user research, we found that people didn’t want us to guess what they would use. People who are proficient using their PCs want the flexibility to design their own Start experience. We know in the current Developer Preview, the automatic layout is a particular concern and of course as we said, we're not done yet and this is something we will make sure is under your control. The organizational tools we'll describe below (naming, grouping, zooming) were shown in Jensen Harris’s talk at //build/, but were not in the Developer Preview.
    Good customization options start with organization. The Windows 7 Start menu is just a simple flat list. But, as people collect more and more apps, the ability to organize and group apps together becomes more important. We brought a variety of people of different skill-levels into our test labs and asked them to organize the apps and websites they use frequently. The variability was surprisingly large. People did not fit all their apps into the same predefined groups, or even the same group sizes. Some people had 5 games they thought belonged together. Others had 40. Sometimes a group of tiles had a clear name, like Games or News. Other times, people couldn’t come up with a good name for the groupings they created, and chose to refer to them only as “things I go to frequently,” for instance. Because of this, we designed the Start screen to give you flexibility over the number of groups, the size of any group, the layout of tiles within the group, and whether or not you want to name a group.
    Fig 2: Tiles may be grouped with or without group names

    But creating a custom dashboard is about more than just organizing apps. Organized or proficient users might want custom shortcuts to information or a location within an app. For example, instead of just having the headlines for an entire news site on your Start screen, you might also want a tile that shows the headlines for the Sports or Tech section. With Windows 8, apps can provide these deep links too, so that people can create their own powerful and customized Start experiences. This means that tiles for apps can live alongside tiles that represent links to web pages, albums, playlists, specific people, a level within a game, a particular stock, etc. Any of these secondary tiles can be small or large, and can be put anywhere on the Start screen. They are “live,” just like app tiles, meaning that they are constantly updated with fresh and relevant content. This is a great way for app developers to provide differentiated functionality.
    Fig 3: It’s easy to customize Start by pinning deep links to apps wherever you want them

    Start launches with instant access to everything on the first screen, bounded only by the size of the display. And, while Start supports standard scrolling, people told us they also wanted a way to quickly jump to a particular group. We enabled zoom as a way to step back, survey the landscape of the Start menu, and go directly to any group. We considered starting zoomed out and letting you dive into a group, but early usage data indicated that the vast majority of the time, people activate a tile that is on the first page. The standard zoomed-in view allows you to instantly glance at your dashboard just by hitting the Windows key on the keyboard, and then pressing it again to return to what you were doing. This means that checking anything on the Start screen is always just a single click or key press away. When you compare zoom to meticulously navigating a populated Start menu hierarchy, or uncovering pinned items on the taskbar, the experience is much faster and more fluid, and scales to many more programs and pinned items.
    We of course considered folders, but our experience with folders broadly and in the Start menu tells us that folders are a way of burying things, not organizing them. Folders also make it impossible to see the up-to-date information an app might present. Once the apps are organized into groups, zooming out provides an at-a-glance view of the groups (similar to looking at a folder list). From the zoomed out view, you can jump directly into any group just as you would open a folder. For those wishing to stash certain programs out of sight, you can always remove the pinned icon from Start and use search to access it, or just put the program at the far end of the Start page. This is by far the most efficient way to manage a large library of apps.
    Fig 4: Zooming out in Start makes it easy to see groups of apps and target a specific section of the screen

    Powerful and efficient

    As we covered in our last post, the number of apps and websites that people use has been increasing dramatically over the last 10 years. When people had to go to a physical store and buy every program that existed on their PCs, it made sense to have a Start menu that was optimized for showing around 10 apps. Today, people use so many more apps and websites (which is another way to deliver app-like functionality), that the experience needed to be rethought for how people were using PCs today.
    As we looked at layout options for the Start screen, we considered whether it should be full screen or appear on top of your apps as a small temporary window in the corner. Small popup windows are great for scenarios where you need to see the context of what is on the screen while you’re using it (although modern user interfaces are using popups less and less). For example, it’s a good design for doing advanced font settings in your Word doc. Its small size allows you to look at the text you’re changing on the screen while setting the new font style.
    But, when you’re launching a new app, you’re leaving the thing you’re currently doing. So we wanted to take advantage of the whole screen to make launching and switching apps as efficient as possible. The full-screen Start gives you the power and flexibility to launch more apps with a single click. You can still put your most frequently used desktop apps on the taskbar in desktop. But the new Start screen has space to duplicate the 10-12 app links that you had pinned to the old Start menu, and still fit an additional 12 to 14 items on the first screen of a 1366 x 768 display. With a higher density display, obviously there’s room to add even more apps that you can get to with a single click. As a reminder, Windows 8 requires a 1024 x 768 minimum resolution for Metro style apps, and as long as your screen is at least 1366px wide, you can use snap to show two apps at once. We're aware of the feedback about lack of diagnostic information other than the published system requirements on the download page—rest assured we are working on making this clearer.

    Fig 5: At 1366x768, Start shows 24 custom shortcuts on the first screen
    People also want the efficiency of being able to instantly launch apps, documents, and settings without moving their fingers off the keyboard. We needed to retain this ability from Windows 7 while working to make it even better. If you have only one app with the word Excel in the name, launching it works exactly the same as it always has. Hit Start. Start typing “Ex…” and watch it autocomplete. Hit Enter, and Excel launches. Four keystrokes. Given the significantly increasing number of apps that people are using, search is clearly a more efficient way to access them, whether using a physical or on-screen keyboard. By combining the new Start screen with Search you get an ever-narrowing scope and easy hit targets whether for keyboard, mouse, or touch.
    By comparison, as soon as the user searches for something with many hit results, the Start menu in Windows 7 can’t scale to the results. For example, if you are looking for a Control Panel option with the word “input”, the Start menu only returns the first 3 results in each category. To see the full list of results, you need to arrow down to the category (such as Control Panel), wait for Explorer to open, and then find the result you want there. If you are opening a document, you then need to manually close the Explorer window when you are done. While the new search capabilities in the Vista and Windows 7 Start menu clearly improved your ability to get to your top programs quickly, searching for anything other than a frequently used item remained inefficient and frustrating.
    [​IMG]Fig 6: Limited room in the Start menu prevents a full lists of results from being shown and requires opening Explorer
    With Windows 8, we wanted to minimize the keystrokes to instantly search and launch your app/file/setting/email/etc. Because the search results are full-screen, we can show at least 48 items on most screens, instead of just three. And, if you want to see the rest, you simply scroll (instead of launching Explorer and redoing the search). This simple change allows you to efficiently launch any app or file on the PC with a minimum of keystrokes.
    We looked at two ways of improving the efficiency of search:
    • Putting more on the screen
    • Making it easier and faster to recognize the correct search result
    The Windows 7 model forced all the search results into a standard template of an icon and text. As we looked at different data types, we saw that people could more quickly recognize their search result if the view was tailored to the data. Pictures should be displayed as thumbnails, email messages should say who they are from, videos should include their length, etc. So we designed a search model for the Start screen where each app displays the data in an optimized format. Thus, instead of seeing just 3 results per category type (all as text), you now can hit Start, type a search term, see an entire page of app results, or continue down the list to look at the results for files, settings, email, web, social networks, or any other app on your system. The Search contract is one of the exciting platform APIs in WinRT that developers can take advantage of. It allows this unified search experience while also letting the unique elements of an app's data shine through. It is a win-win for both the person using the app and the app developer.
    Fig 7: The Start screen has plenty of room to show app search results

    Fig 8: Start screen has more room to show you more detailed search results for files

    Fig 9: Search isn’t just restricted to the system—apps can display search results optimized for that app
    A full-screen Start experience empowers you to pick the things you care about (even if you care about way more than 12) and organize them the way you want so you can launch them instantly without scrolling. And, when you want to search, you can instantly see all search results (not just a couple). The design trades off peripheral awareness of what you’re leaving behind in favor of optimizing for where you’re going next, so that you can get there faster and more efficiently.
    Keyboard and mouse

    Because we have often demonstrated touch interactions with Start and its lineage in the Windows Phone Metro style, many believe that our design is all about touch rather than keyboard and mouse, or even that we’re putting the phone interface on a PC—it is neither.
    For mouse people, the position of the Start button in the lower-left corner of Windows 8 makes it an easy click-target (even in a full-screen app). Once in Start, more items are directly accessible to the mouse without scrolling or opening menu flyouts. For keyboard people, pinning frequently used desktop apps on the desktop taskbar enables instant shortcuts: Win+1, Win+2, etc. And, getting to less frequently used apps through search follows the existing paradigm of hitting the Windows key and typing the search term. The larger search results improve speed (both for searching and browsing).
    Of course, there are things we’re still working on, that aren’t yet finished in the Developer Preview. For example, we know there are bugs in interacting at high speed with the scroll wheel on the mouse, and we’re working on fixing these. We’re also adding the ability to instantly zoom out with the mouse and keyboard, and we’re looking at ways to make scrolling faster and easier. And, we are working on fixing a bug in the Developer Preview that causes inconsistent and slow page-down/page-up behavior. We’re also looking at making rearranging more predictable for mouse, keyboard, and touch.
    One picture we often use to talk about change is the following. The y-axis is some measure of efficiency—such as time to complete a task, seconds it takes to do something, etc. The x-axis is calendar time. If someone is proficient with something and then a change takes place, there is by definition a dip in functionality. But after an adjustment period, the metrics of success improve. The net result is that over time, work becomes more efficient, even for the same task. And combined with new tasks and capabilities there is an overall net win.

    The Windows 8, the Start screen is not just a replacement for the Windows 7 Start menu but a bringing together of several different ways of navigating your machine. Even in Windows 7, people who are proficient with Windows are already replacing the Start menu with the taskbar for their frequently used desktop apps.
    For people using mostly desktop apps, the Start screen complements the functionality of the taskbar. Using both together, you have instant access to your most frequently used apps combined with a more powerful way to launch your less frequently used apps (through search or by grouping items on the Start screen). And, for Metro apps, Live tiles transform the Start screen into a dashboard that helps you stay up to date and connected in a high quality experience substantially improved over the notification tray. The new experience offers a way to more efficiently launch apps, stay connected to the most relevant information from apps, and find the things you care about. It also lets you launch and switch quickly between your apps and specific locations within those apps all without sacrificing performance or draining the battery of a laptop or tablet PC.
    Alice Steinglass[​IMG]

    Continue reading...
    Building Windows 8, Oct 6, 2011
    1. Advertisements

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.