Build Windows® 8 Apps with Microsoft® Visual C#® and Visual Basic® Step by Step (2013)

Chapter 2. Windows 8 UI style

After completing this chapter, you will be able to

§ Understand the design concepts underlying the Windows 8 UI style.

§ Understand the user experience of a Windows 8 app.

Why devote a chapter of this book to design concepts? If you are reading this book, you probably want to create great applications for the Windows Store—and great apps must be graphically in sync with the Microsoft Windows 8 ecosystem—which means they must be designed according to the Windows 8 design and usability guidelines. Therefore, it is worthwhile to dedicate a full chapter to exploring the details of the new design language for Windows 8: the Windows 8 UI style.

From the beginning, it is important to understand that a design language is not like a programming language. A design language does not have strict, enforced rules; instead, it is a set of ideas and philosophies related to graphics and—specifically for applications—to the user experience. A design language doesn’t have a “compiler” that lets you know what is right and what is wrong. To discover whether your results are in line with a particular design language, you have to rely not only on your experience and graphic sense, but also, and even more importantly, on the study of the basic ideas behind that design language.

Influences

To fully understand the concepts underlying Windows 8, which represents the (for now) culminating point of a long journey, you need to understand where that journey began. This section touches on the historical artistic movements that inspired the ideas behind the user experience of Windows 8.

The primary source of influence is the School of Architecture, Art, and Design called Bauhaus (its full name was actually Staatliches Bauhaus). Figure 2-1 shows the school’s logo.

Figure 2-1. The logo of the School of Architecture, Art, and Design called Bauhaus.

You could describe this logo in technical terms by specifying the element colors, the thickness of the lines, and so on, but the first thing you notice about this logo is its modernity—even without any knowledge of art history, you have probably assumed that the image is contemporary. Yet the Bauhaus school operated in Germany from 1919 to around 1933! The fundamental principle of the Bauhaus philosophy is the concept of “fair reduction,” that is, removing all the adornments and reducing everything to its essence. It’s this very idea—which results in simplicity—that makes the works of this movement, including the previous logo, so modern.

Bauhaus represented not only a school for learning the art of design, but also a point of reference for the artistic movements generated by rationalism and functionalism, which were part of the modern movement or modern design. Rationalism and functionalism were not confined to architecture and design; they included all forms of art and communication.

Functionalism was originally an architectural movement that held the belief that any building should be functional for its purpose: a school of thought where what is “useful” is opposed to what is “beautiful.” The rules dictated by functionalism are simple but clear:

§ Function comes first.

§ Function determines shape and characteristics of an object.

§ Function makes an object beautiful.

§ In essence, the function is the object.

Those concepts can be easily adapted to the computer world. In fact, saying that “function makes an object beautiful” is the analogue of such common ideas as “an app is beautiful simply because it is useful and because it offers interesting content and important functionality, not because it has nice graphics.”

At the time of the Bauhaus school, the design works were produced only by skilled craftsmen who made unique pieces for their customers. Bauhaus revolutionized the market by claiming that the design could be industrialized without sacrificing quality. To demonstrate that point, it produced some works realized with easy-to-assemble industrial elements. In creating these design elements (chairs, tables, bookcases, and so on), the designers’ attention focused on planning and product design, not on the production itself, as was the case with handcrafted design.

Going into further detail about the works of the Bauhaus school is beyond the scope of this chapter, but the Wikipedia page at http://en.wikipedia.org/wiki/Bauhaus has good general information. You can find more detailed information on the Bauhaus website at http://bauhaus-online.de/en/atlas/das-bauhaus. The influence of the school is apparent; if you just type “Bauhaus furniture” into any search engine you’ll find some products that are still on the market today.

In the world of software development, the concept of industrialization introduced by the Bauhaus school of design morphs into the idea of software industrialization. Actually, you have been industrializing software for many years already using object-oriented techniques. For example, creating a base class with all the shared functionality needed by subclasses avoids wasting time rewriting the same functionality in different final products. Basically, you invest your time in creating projects, not products. These concepts also apply to the user interface. According to this principle, indeed, you should invest your time in creating templates for your graphics, not in drawing each graphic object from scratch every time you need it.

The other source of inspiration for the Windows 8 UI style is the International Typographic Style, or Swiss Design, an artistic movement developed in Switzerland in the 1950s whose style was based on clear typography, symmetry, and the use of few and contrasting colors.

This style has a predilection for photography instead of drawings, and places particular emphasis on typography. In fact, Swiss Design gave rise to fonts that are still largely popular such as Univers and Helvetica, both based on the Akzidenz Grotesk font, shown in Figure 2-2.

Figure 2-2. The Akzidenz Grotesk font.

Swiss Design devised a framework for organizing the information included on a page in a consistent way. This artistic approach acquired the name “grid system.” The core ideas of the grid system were presented in the book Grid Systems in Graphic Design, by Josef Müller-Brockmann, whose book was seminal in spreading the knowledge of the grid layout. The success of such a layout system is attested to by daily experience: the newspaper you read every morning and many of the websites you consult. Moreover, signs in airports, railway stations, and throughout cities use grids to separate the various graphic elements and organize information semantically, as shown in Figure 2-3.

Figure 2-3. A real-world example of the Swiss Design.

In Figure 2-3, you can see a real-world application of some of the ideas of Swiss Design: the grid layout, the simple, straightforward, and clear typography, the wise use of element symmetry, and essential iconography—and if you can see the colors in this picture, you should note that it contains only three major color variations.

One important principle of the International Typographic Style is related to the use of an “international language,” which means that it tried to avoid conventions or styles that could be traced back to specific countries, groups, or companies. Instead, it adopted a style that could be understood anywhere in the world. Figure 2-4 shows an example of such a principle. Even though the first line of the sign is in Italian, the meaning of the iconography is so clear that the underlying text is almost superfluous.

Figure 2-4. A real-world example of the “international language.”

The use of an international language becomes, in the case of Windows 8 applications, absolutely critical. If you want to increase the revenue of your apps, you need to forego concentrating only on what might appeal to your friends, your local customers, or your fellow citizens and instead try to imagine how to communicate your ideas, features, and your messages to an international audience.

Another suggestion from Swiss Design is to reduce the iconography, leaving only the distinctive features of a graphic message. Figure 2-5 is a clear example.

Figure 2-5. A real-world example of a simple iconography.

In Figure 2-5, the directions to get to the departures area are unmistakable. Once you start looking, you’ll notice the hundreds of road signs, television spots, advertisement signs, and so on that are based on an essential iconography.

To sum up the different ideas and philosophies underlying the Windows 8 UI style, the principles are as follows:

§ Enhance the functionality and the content, not the container.

§ Industrialize the software and user interface; create projects and not products.

§ Use clear typography.

§ Take advantage of the grid system.

§ Prefer photos over drawings.

§ Select few and contrasting colors.

§ Strive for international language.

§ Employ essential iconography.

Seeing the Bauhaus style in the Windows 8 UI

Keeping the principles you saw in the previous section in mind, try to find the implementation of those principles in Figure 2-6 of the Windows 8 Start screen.

Figure 2-6. The Windows 8 Start screen.

Enhance the functionality and the content, not the container

Without a doubt, the star of the Windows 8 Start screen is the content. There is no longer an empty desktop with a few colorful icons; the old icons have been replaced with new Tiles. Tiles are personal—they contain important information for the user. Users can customize the appearance of the Start screen to make it unique. The focus of customization lies in the content, which is not impersonal but applies directly to the user—such as contacts from social networks, personal photos, weather forecast based on the user’s current GPS position, interesting news based on user topic selections, and so on. It is clear that the PC customization rises to a new level compared to simply arranging icons or choosing wallpaper, as in previous versions of Windows and other operating systems on the market.

As a developer, you can customize the content that your app’s tiles display, giving you a way to improve the overall quality of your software (see Chapter 9, for further details). Remember that a tile is not just an icon, it’s an extension of your app.

Industrialize the software and user interface, create projects, not products

Tiles are also a good example of the concept of industrialization of the user interface. The old icons are a case in point: graphic designers used to spend several hours to complete each single icon. Now, with tiles, the efforts of Microsoft’s graphic designers have been focused on the creation of “tile projects,” or tile templates, if you prefer. As a developer, you need only provide the content for a tile (text and/or images) and the Windows 8 framework takes care of the rest.

Use clear typography

Focusing on typography, Windows 8 uses a brand new version of the Segoe UI font that has a number of redesigned default characters, new Microsoft OpenType alternates, new weights, and expanded language support. Just open any app in Windows 8 to appreciate the quality of the typography in the new operating system. Notice how the use of fonts with a pronounced difference in size provides a natural semantic organization of information on the Start screen. At first glance you intuitively understand what represents the title of a tile and what represents the content.

Take advantage of the grid system

The grid system has been used extensively in conceiving the new Windows 8 user experience. The Start screen provides a clear example of a layout grid, but a grid-based layout is also clearly distinguishable in various apps. For example, look at the native Weather App in Windows 8 shown in Figure 2-7.

Figure 2-7. The grid system used in the Weather App.

Prefer photos over drawings

With regard to the principle of “prefer photos to drawings” mentioned previously, the Start screen (like many other apps in the Windows Store) is full of examples: the People application uses a collage of your friends’ pictures, Bing shows the photo of the day, the news reader shows the picture of the most important news of a user selected category, and so on.

Select few and contrasting colors

If you take a look at the Windows 8 Start screen, or even at the Weather App, you notice that the foreground color is just one and it stands out clearly against the tile background color. For your information, you can customize the foreground of the tile in a Windows 8 app. In fact, you can choose between a “dark” and a “light” template to achieve a better contrast, and therefore a greater legibility, between the background and foreground.

Strive for international language and employ essential iconography

The last two principles, those relating to international language and the reduction of the iconography, can be described together; one of the ways to make a message more “international” is to use the technique of simplifying the graphics. Look at the Windows Store tile. Its icon is universally recognized and contains the concept of shopping, but it is not an icon with a complex three-dimensional shape or colorful gradient effects; just a simple stroke is sufficient to convey the message. The human mind does not need more information to understand and process the visual input.

NOTE

One piece of advice to improve the international language of your app is to use widely accepted conventions. For example, you do not need to invent a new way to represent navigating to the home page of your app; the classic home-shaped icon is already widely used and accepted. One trick that can help you evaluate whether your app is headed in the right direction for internationalization is to translate all the text in the app into a language unfamiliar to your testers, and then conduct usability tests. If the testers are actually able to perform some or most of the app’s required tasks without depending (too much) on the text, you have achieved a real international language.

Characteristics of a Windows 8 app

The previous section discussed the basics of the design language called Windows 8 UI style; this section defines the characteristic features of a Windows 8 app.

Silhouette

The most important aspect of an operating system is the ability to create a harmonious, homogeneous user experience—switching between applications should not be “traumatic” for the user, instead, apps should seem linked by a common theme in terms of user experience. To achieve this goal, it is essential for Windows 8 apps to have the same “silhouette,” where silhouette means the look of the app at a glance, without focusing on specific functionality or context. Therefore, having the same silhouette means that the basic elements are always positioned in the same location and with the same characteristics (Figure 2-8).

Figure 2-8. A composition of different apps for Windows 8.

Figure 2-8 isn’t a single app; it’s a composition of several different apps for Windows 8 (Bing Sports, Bing Finance, Bing Daily, and Bing Travel). Each app has different features, a different purpose, and a different context, but they all share the same silhouette—the title is in the same position, the back button has the same shape and position, the font is identical, and so on. In addition, the texts are aligned: indeed, if you were to “zoom in” to the first two apps of the composition, you would see that the texts are perfectly in line, as shown in Figure 2-9.

Figure 2-9. The text of two different apps is perfectly in line.

It is precisely this attention to detail that is the key to creating a harmonic system.

The Microsoft website has many documents that relate to various specific techniques for improving the silhouette of your app, but the simplest and most straightforward way is to use the project templates provided by Visual Studio 2012. Figure 2-10 shows some of the project templates for Visual Studio 2012.

Figure 2-10. The project templates provided by Visual Studio 2012.

The Grid App (XAML) template provides a multipage project for navigating multiple layers of content. Users reach details for an item by tapping or clicking on the item itself. The details are then displayed on a dedicated page. The Split App (XAML) template is a good starting point for creating a master/details list, where items appear in a list on the left side of the page and the details for a selected item appear on the right side of the same page.

NOTE

The next chapter provides a more complete description of the various templates.

Selecting the Grid App (XAML) or the Split App (XAML) template results in an app that obviously still needs to be customized and filled with content and functionality, but that already has a silhouette in line with the specifications. Figure 2-11 shows the home page of an app created with the default Grid App (XAML) template.

Figure 2-11. The default layout of a home page created by the Visual Studio 2012 project templates.

If you compare Figure 2-11 with Figure 2-12, which shows a custom photo application, you can see how the project templates provided by Visual Studio 2012 can simplify the development of an app. By starting with these projects, all you have to do to create an app consistent with the operating system is add your own content.

Figure 2-12. The home page of a custom application created using Visual Studio 2012 project templates.

The various templates also include the display of the item details. Figure 2-13 shows the layout of the Grid App (XAML) template.

Figure 2-13. The default layout of an item details page created by the Visual Studio 2012 project templates.

In Figure 2-14, you can see one of the news items from the Bing Daily App. It uses the same layout as the previous figure, but this time is filled with real content.

Figure 2-14. The Bing Daily App.

Full screen

The fundamental purpose of Windows 8 app design is to emphasize the content, not the container. The motto “content not chrome” has become a symbol of the Windows 8 UI style philosophy, but—in addition to what has already been explained in the previous section—it’s important to add another key concept. In earlier versions of Windows, not only was an application relegated to a window, but a good portion of that window was filled with bars, widgets, panes, gadgets, and so on. In contrast, in a Windows 8 app the entire surface of the screen is dedicated to content. Figure 2-15 shows a classic screenshot of Microsoft Internet Explorer running on the desktop. In comparison to the clean Windows 8 design, the application (the website in this case) seems “smothered” by the other onscreen elements.

Figure 2-15. Internet Explorer 10 running on the desktop.

The user experience in Internet Explorer 10, specifically designed for Windows 8, assumes a decidedly new connotation. Figure 2-16 shows the same website in Internet Explorer 10. Notice how the entire screen of the app is now available for content, creating a more immersive user environment.

Figure 2-16. Every Windows Store app runs in full screen mode.

Edges

In Windows 8, the edges of the screen assume a very important role. As a matter of fact, the left side of the screen is entirely dedicated to the “back” functionality—by swiping from left to right (performed on the left side of the screen) Windows will cycle through all the open applications. You can think of this as the new implementation of the classic Alt+Tab functionality, but now based on a gesture. Swiping from the right side of the screen activates the Charms, which are five icons representing operating system functions that provide the following features: Search, Share, Start, Devices, and Settings. Figure 2-17 shows the Charms after activation by a right-to-left swipe.

Figure 2-17. Charms on the right side of the screen.

Because both the left and right side swipe operations are reserved for the operating system, to prevent user frustration you should avoid placing common user interface controls such as buttons in those areas. However, your application can leverage both the top and the bottom edge of the screen to place your own menus and toolbars. A swipe from bottom to top, performed on the bottom side of the screen, or a swipe from top to bottom, performed in the top edge of the screen, activates a custom App Bar control where you can place required buttons and custom controls. These features are available to all Windows 8 applications, including most system applications such as Internet Explorer or Microsoft Office. Figure 2-18 shows the App Bar for Internet Explorer 10.

Figure 2-18. Internet Explorer 10 with the App Bars open.

It’s important to include only the most vital and frequently used controls in the main canvas, leaving the less important commands visible only through edge gestures (typically in the App Bar). A Windows 8 user should be able to discover your application commands in a natural way because nearly all apps on Windows 8 work in exactly the same way.

Comfort and touch

Windows 8 and the innovations concerning the user experience have been developed to satisfy the growing demand for a more touch-friendly operating system. Designing a user interface for tablets, for example, is not just a question of adjusting size and displaying objects in a canvas, but is mainly a rediscovery of the interaction between man and machine. The main input mechanism is represented by touches and gestures, which required a great deal of studies about usability. Microsoft has performed a lot of usability testing with Windows 8 installed on tablet devices to understand how to improve the usability in these contexts. From various experiments, some interesting facts have emerged. One of the first findings is that most users hold the tablet with both hands, but leave their thumbs free to move on the screen. Thanks to this information, Microsoft engineers have developed a sort of map that identifies which areas of the screen are easiest to reach with thumbs, and which are more difficult. The result is shown in Figure 2-19.

Figure 2-19. The map of the easiest areas to reach.

This map makes it easy to see that the inner green areas are the easiest to reach, while the middle yellow ones are less comfortable to reach, and the outer red areas require an even greater effort.

This valuable image is important to you as developer or designer because it reveals that you should put the most common controls in the user interface in the green (inner) area of the image, thus increasing the usability of your application—but remember to avoid areas managed by the operating system. The map can also help you see when to place controls in the App Bar. In fact, according to this scheme you should place the most frequently used commands in the left or right side of the App Bar and less frequently used controls towards the center of the App Bar. Figure 2-20 illustrates some examples.

Figure 2-20. A composition of different App Bars.

Even the Windows 8 touch keyboard presents a nice feature that allows users to split the keyboard into segments so that the most used parts are within the green (inner) area of the scheme. Figure 2-21 illustrates this feature.

Figure 2-21. The software keyboard in the split mode.

It thus becomes crucial to design applications so that they become fully usable with various input modes (it is important to think about touch and gestures, but don’t forget the classic mouse and keyboard). One recommendation is to design your user interface by considering touch input first, and if you use the framework standard controls (which you will become acquainted with in later chapters), you will get support for mouse and keyboard “out of the box,” that is, without the need to write code to specifically enable those input devices. To clarify these concepts, try the following procedure.

Touch, mouse, and keyboard support

1. Start Windows 8.

2. From the Start screen, click or touch the Weather App tile. The Weather App will launch.

3. If you have a touch screen, swipe your finger from bottom to top, starting at the lower edge of the screen. The App Bars will appear.

4. Take a look at the two App Bar controls in the top and bottom of the screen.

5. Close the App Bar by touching the middle of the screen.

If you’re using a mouse, place your mouse cursor anywhere on the screen and right-click. The App Bars will appear. Take a look at the App Bar controls.

6. Close the App Bars by clicking in the middle of the screen.

If you have a touch screen, perform a swipe from right to left in the right-hand side of the screen. The Charms will appear. Take a look at the Charms.

7. Touch the screen inside the app to make the Charms disappear.

If you’re using a keyboard, press Windows+C. Take another look at the Charms.

As you can see, all the native objects of the framework fully support all input modes: touch, mouse, keyboard, and digital stylus. This is definitely a great convenience for developers.

Design the user experience of your apps for touch-first, following the same approach that even the designers of complex applications such as Microsoft Office for Windows 8 have followed. Avoid designing different user interfaces for touch, mouse, and keyboard; use a single layout for all the input modes. If you have a traditional mouse and keyboard setup, you will be able to create and test applications for the touch environment using the Windows 8 Simulator that is included with Visual Studio 2012. In fact, the tool has a command called Basic Touch Mode. In this mode, your mouse pointer becomes like a finger; when you click the simulator it will be handled as a finger touch. It thus becomes vital to understand the new touch language introduced with Windows 8, how to use it in your app, and to avoid inventing new fancy or special gestures that would result only in confusion for the user. Fortunately for all developers, Microsoft designers have performed a sublime job of simplifying the various modes and minimizing the number and the types of gestures supported. The ultimate goal of the new Windows is simplicity of use, and having a large number of complex gestures would certainly decrease the usability of the entire system. Figure 2-22, taken from Microsoft documentation, summarizes the touch gestures supported by the system and explains their meaning.

Figure 2-22. Touch gestures supported by Windows 8.

Gestures such as tap, slide, pinch (and stretch), and rotate are so frequent in any touch system that there is not much to add here to describe them. However, a few of the others deserve some further explanation. The first gesture illustrated in Figure 2-22, “press and hold,” is associated with the action of “learn,” so it should be used to show a tooltip, a help screen, or something that can provide further information and explanation. You should avoid using such a gesture to show a contextual submenu or enable some editing mode. As you can see from the image, there is no double-tap gesture because that was considered to be too difficult to use.

The swipe gesture, typically performed on an element of a collection, allows you to select or deselect an item. If you have a device with touch support, try the following procedure.

Swipe gesture

1. Start Windows 8.

2. In the Start screen, move your finger from the top toward the bottom of a tile.

It now shows a selected checkbox in the top-right corner.

3. Perform a swipe gesture on another tile.

Notice that a selected checkbox appears on that tile.

4. Perform a swipe on the tile you selected at the beginning of this procedure.

Notice how the current element is now deselected.

5. Swipe again on the second tile.

Notice how the second tile is now deselected.

6. Perform another swipe on any tile, but this time keep dragging the tile towards the bottom. You will notice that the tile becomes “detached” from the rest of the Start screen.

7. Drag the tile where you prefer and then release it.

The previous procedure, very trivial and at first glance obvious, has brought some interesting considerations about the touch gesture to light. First, the various gestures are reversible, that is, no matter which state you are in you can always go back to the previous state. Another important consideration is based on the absence (or, at least, the strong reduction) of the “modes.” In the previous procedure, you did not have to choose some other element, such as a menu item, to enter the element selection mode; a gesture was the only thing you needed. Similarly, you did not have to take multiple actions to get to tile positioning mode; a natural gesture (drag and move) was sufficient to complete the step.

Semantic Zoom

Another very important feature of the new Windows 8 touch language is represented by the innovative Semantic Zoom. The pinch and stretch gestures are usually associated with an optical zoom feature, and Windows 8 fully respects this principle, though the Semantic Zoom extends the concept to allow simple navigation among larger data sets. The next procedure illustrates this feature.

Semantic Zoom

1. Start Windows 8.

2. If you have a touch screen, perform a swipe from right to left starting from the right-hand side of the screen and then touch the Search charm.

If you don’t have a touch screen, press Windows+F. Windows 8 will open the search page.

3. Click or tap “Apps” in the list on the righthand side of the screen. The list of applications installed on your PC will appear.

4. If you have a touch screen, perform the pinch gesture in the middle of the screen.

If you don’t have a touch screen, scroll down the mouse wheel while holding the Ctrl button.

Notice the new visualization—a set of letters representing the initials of the applications presented in the previous list.

As you can see, the pinch operation isn’t just an optical zoom (in this case, it would have rendered the same list shown in the previous screenshot, just with different dimensions). Instead, it’s a higher-level semantic visualization of the data.

5. Touch or click a letter. You will go back to the default visualization, but the focus is now on the applications grouped under the letter you selected; in fact, the Semantic Zoom’s purpose is to simplify navigation through long lists of data on a touch device.

As you saw, Semantic Zoom offers two different views of the data: a “zoomed-in” view (the default view), where the list of data is presented expanded, and a “zoomed-out” view that typically represents the grouping keys of the underlying data. For a complete example of these concepts and the use of the SemanticZoom control, see Chapter 9.

Discussing touches and gestures also raises some questions about performance. Mouse and keyboard input is “indirect” input to a device, and people are usually inclined to tolerate slight lags in interface response better using this type of input. In contrast, touch, which is by definition a “direct” input, amplifies any problems associated with an app’s performance. In other words, if you select a user interface element through a gesture, people tend to expect a more immediate response from the app than when using a mouse or the keyboard. For developers, this means you should test your apps fully for performance, especially on low-end devices.

Animations

To increase the perception of fluidity within the entire system, Windows 8 uses lots of animations. If you pay attention, you will notice that the Microsoft designers have inserted animations in most operations: opening an application, removing an element from a list, tapping a user interface control, navigating from one page to another, closing an application, and so on. These animations are light, non-invasive, and non-tiring in the long run. They give a sense of fluidity to the entire system. So you can take advantage of animations easily, Microsoft has developed the Animation Library, a collection of fluid and natural animations that you can use in your applications. Interestingly, the standard framework controls already use the features offered by this library. For example, the GridView control uses animations when you select an element (using the same look and feel as the selection of a tile in the Start screen).

Different form factors

Windows 8 is not just for tablet devices; it can be installed on traditional notebooks, desktops, and ultrabooks. Each device may have its own screen size, resolution, and definition. As a developer or designer, it is your job to make sure that your application can be used on any of these form factors to improve its sales. The good news is that the project templates provided by Visual Studio 2012 and the standard controls of the framework provide excellent scaling support, even though not all that support comes pre-defined “out of the box.” You will always need to use the various controls in the most appropriate way and test your code often to ensure that the user interface adapts appropriately to whatever device is in use. In Chapter 7, you will work with the Windows 8 Simulator installed with Visual Studio 2012. This tool lets you test your Windows 8 app with varying resolutions.

Figure 2-23 shows a screenshot of an app running on a device with a resolution of 1366 × 768 pixels (a tablet device with an 10.6’ screen). Notice how the list of elements exceeds the screen dimensions on the right side.

Figure 2-23. The Bing Travel App running on an 10.6 inch screen.

Figure 2-24 shows the same application running at a resolution of 2560 × 1440 pixels (on a 27-inch screen), where the available space has been used to display more content.

Figure 2-24. The Bing Travel App running on a 27-inch screen.

More specifically, this app is based on the Grid App (XAML) project template and uses a unique GridView control to display the data, so that you don’t need to use different forms for different resolutions—a single layout is sufficient.

As far as the graphic assets are concerned, you have two different options. The first option involves vector art and thus uses Path objects from the XAML framework. The second option consists of rasterized assets (such as .jpg and .png files). For vector art, scaling support is completely transparent and guaranteed, while for raster assets, you can address scaling sufficiently by including three distinct versions of the same image in your Visual Studio 2012 project with a scaling of, respectively, 100 percent, 140 percent, and 180 percent. At runtime, the platform will analyze the device in use and load the most appropriate asset. Figure 2-25 is a rasterized graphic asset from a real app with the three different scales.

Figure 2-25. Different scales of the same graphic asset.

Don’t forget that you must take into account not only the landscape display (the default visualization) but also the portrait display. It’s your job to discover which mode is enabled and what changes to the user interface your app must implement to respond to a change in orientation (for example, the back button might be smaller in the portrait version, the left margin of the application might be different, and so on). Chapter 9 contains an example of these concepts.

Snapped and fill view

The last feature of a Windows 8 app to take into account is related to the “snapped” state of an app. The following procedure is useful to explain the idea.

Snap state

1. Start Windows 8.

2. From the Start screen, launch the Weather App.

3. Press the Window button on the keyboard to go back to the Start screen. If you have a touch device, you can touch the Windows charm.

4. From the Start screen, launch Internet Explorer.

5. Place your mouse cursor in the top-left corner of the screen to open a thumbnail of the previous active application—in this case, that should be the Weather App.

6. Drag the thumbnail to the center of the screen. You’ll see a snapped area outlined on the left. At that point, release the mouse.

The Weather App is running and is in the snapped state, a state that offers a “reduced” visualization of its content (the snap view is 320 pixels wide).

7. Move the delimiter of the snapped area to the right and release the mouse button at around two-thirds of the overall screen size.

Now the Weather App is currently in the filled state, while Internet Explorer has been reduced to the snapped state.

From this procedure, you have learned that an app may be in one of three different states: full screen (default), filled, or snapped. It is a good idea, as a developer or designer, to provide a special display for the snapped status because it allows users to run your app even while performing other activities with other applications. Chapter 9 contains an example on how you can customize your user interface when a change in app state occurs.

Many native Windows 8 applications can inspire you as to how you might want to handle the snapped application state for your apps. Figure 2-26 and Figure 2-27 show side-by-side screenshots of snapped (on the left) and full screen (on the right) applications (the full screen views have been cropped so they’ll fit in this book). Figure 2-26 is taken from the Bing Daily App; Figure 2-27 is taken from the Bing Finance App.

Figure 2-26. The Bing Daily App running in snapped state (on the left) and in full screen state (on the right).

Figure 2-27. The Bing Finance App running in snapped state (on the left) and in full screen state (on the right).

Summary

In this chapter, you have explored the basics of Windows 8 UI style—a little history, the influences, and the philosophy underlying the user experience upon which the entire operating system is based. You’ve seen how Windows 8 values contents over the container (“content not chrome”), a crystal clear typography, the grid system, and the simplification of iconography. You have also seen the basics of how you can design the user experience for your own applications so that they are consistent with the operating system principles. These basics include using the Visual Studio 2012 templates to create a proper “silhouette”; designing the interface for “touch-first,” using common conventions, creating custom tiles, employing App Bars and Charms correctly, and making your application aware of snapped and filled states and orientation changes. Also remember that an app in harmony with the ecosystem of Windows 8 is, most likely, an app that is pleasant to look at and comfortable to use.

Quick reference