Designing great news apps for Windows

This topic describes how to build great news apps for Windows 8.

Overview

Windows 8 provides unparalleled reach across a range of devices, from touch-centered tablets to high-resolution laptop and desktop PCs. These different form factors represent a unique opportunity for news publishers to enable great experiences across a variety of use cases and scenarios and reach a large audience with one app. 

The new Windows Store also provides new opportunities for apps to distribute, promote, and make money on content while providing flexibility if you want to run your own commerce engine for subscriptions.  

This document highlights new capabilities in Windows 8 that are of particular importance for news apps, including:  

• Content before chrome—With Windows 8, your content is king as the operating system fades to the background. Readers will be more engaged and less distracted than before.
• Allow your brand to shine—Windows 8 allows you to bring the prestige and recognition of your brand into an app with live tiles, a splash screen, your logo and more.
• Share contracts and Device contracts—New, top-level operating-system functionality makes content more shareable and helps your app make use of nearby devices.
• Notifications—Use live tiles and toast notifications to alert the user to new content and increase engagement and repeat use.

Layout and navigation in news apps

News apps typically present news in a lot of different categories. Using the hierarchical navigation pattern for Windows Store apps, you can make your app really fast and fluid to use while still putting the content that users care about right up front.

For help choosing the best navigation pattern for your app, see Navigation patterns.

See the Flat navigation pattern in action as part of our App features, start to finish series.

Hierarchical model

In a news app there is often a great deal of content for the user to discover and consume. Also, to manage information density, news apps and websites tend to have a lot of different categories. For example, there's typically a "breaking news" or "top stories" section featured prominently on the top-level page. There are also likely to be various other categories like politics, world news, tech, sports, finance and entertainment, with some articles pulled out and displayed at the app's top level. Using the hierarchical model in Windows 8 for layout and interaction enables your app to bubble interesting content up to the user at the top level, as opposed to burying it behind tabs or menus. That top-level landing page, or "hub", can offer a lot of visual variety, engage users, and draw them into different parts of your app.

When you think about the layout of your app, prioritize scenarios and categories based on their relative importance and on how broadly they appeal to the greatest number of users. For example, top news stories or breaking news categories are typically important to most users of news apps, and so they should be featured prominently in your app's hub page.

This diagram illustrates a hierarchical model for a sample news app.

Your app's hub page

Your app's hub can show top stories, breaking news, content recommended for the user, and featured articles for all the different categories in one easily pannable surface. Each category group can bubble engaging content up to the hub. Tapping a group's header enables the user to drill in to a particular section and see more content.

News categories

Lay out all your app categories flat in the app's hub page and showcase a few articles in each category to draw the user into that category. You can indicate that there are more articles in a category by displaying a count next to the group header, as shown here.

Breaking news

Breaking news is a key scenario for news apps because users are typically interested in the latest and most important news stories. You can highlight breaking news and developing stories at the front of the hub page by making them bigger than other content on your hub, and by using weight and color variations based on the priority of the news.

The following example differentiates live events by using content placement and size as well as having "Live" in red before the headline to draw the user's eye to that content.

Bookmarks/save for later

Users save and bookmark articles to continue reading them later. If your app supports this in a fast and fluid way, users will continue to start your app because returning to articles they saved is a seamless experience for them. Add a section in your hub page called something like "Bookmarks" or "Favorites," to store all of the user's saved articles. Here's an example.

Users can add articles to the "Bookmarks" or "Favorites" section and remove them when they're done reading.

Drop-down header

Using the header also enables users to jump laterally among categories. For example, consider a user who is reading a sports article and wants to go to the entertainment section in your news app. The user can do that easily by using the drop-down header as shown here.

Semantic Zoom

Semantic Zoom enables a user to navigate quickly within a single view. For example, the user can quickly pinch and pan to get from a top news story on their hub to the last news category on the hub page. The following example shows how users can use Semantic Zoom to move quickly between the different news categories.

Here are some more examples Semantic Zoom at work in a news app.

When you use Semantic Zoom, enable the user to rearrange categories on the hub page by selecting a group and moving it around. This enables your users to personalize the app's hub page and can make them love your app even more. For example, a user may prefer your app's "Technology" category and may want to put that before your app's "Politics" category. By providing this ability to your users, you tailor your app's appearance to their preferences.

Semantic Zoom can also be used on a specific category page to navigate among different articles in that category. Semantic Zoom enables your users to jump quickly from article to article.

Your app's article view

Your app’s article view is where your content is displayed. Enabling users to enjoy their experience in this view makes your app stand out because this is where users spend the majority of their time in your app. It is important that you display your content intuitively and make this view visually pleasing. It is also important to ensure that navigation within this view is efficient.

The article view for a news app should pan horizontally so that users can use their thumbs to move through content easily and ergonomically. Additionally, consider breaking articles into pages. Page breaks within an article give users a sense of how far they have read and let them easily get to where they want to go.

However, to achieve a truly great layout and user experience, as you craft your news article, consider users viewing it:

• On a tablet PC
• On a laptop PC
• On a desktop PC

Each of these scenarios benefits from different layouts that take into account the usage patterns of users. For example, when users read news on a tablet they use both portrait and landscape views, whereas on a laptop and desktop PC they will most likely read it in landscape view. Therefore, design article views with both orientations in mind. Furthermore, layout designed for a tablet should also be optimized for touch navigation. As suggested earlier, it is good to break the content into pages. A touch-centered way to add pages is by using Snap Points within your article to create "speed bumps." This tells users where they are in the article as they pan quickly through the article.

Because landscape orientation is more common for users of laptop and desktop PCs, consider how to lay out your article to avoid a boring set of columns. One layout technique is the use of content insets, images, or other media elements that span multiple columns. You can add quotes or have titles that span the entire page to add variety to the layout. Also, for both laptop and desktop scenarios, users mostly use the keyboard and mouse to navigate. It is important, therefore, to make sure your layout responds to both keyboard and mouse input.

In addition, we recommend using the typography grid and size ramp in news and weather apps. This creates a visual hierarchy that enables users to scan and consume a lot of information quickly and easily. Although the recommended font for immersive reading scenarios in Windows 8 is Cambria or Serif, news apps can definitely use their own preferred fonts to showcase their personalities while following the type-ramp guidance. Although the use of the Segoe UI font specified in the type ramp is appropriate for news and weather content, you might consider using Calibri, our recommended "modern document" font, or Cambria, our recommended "traditional document" font. The Georgia font is a popular choice for news sites on the web and so may also be a familiar option. If you decide to specify alternate system fonts, be sure to confirm they are installed with Windows 8 and don’t require the installation of a separate application such as Microsoft Office. If you use your own custom or licensed fonts, make sure you have sufficient legal rights to include them with your app. Regardless of the fonts you use, the Windows 8 type ramp provides good guidance to the maximum number of sizes and styles you should use.

Using a small set of font sizes throughout the app, as recommended in the type-ramp guidance, creates a sense of structure and rhythm in the content. If multiple elements use the same font size in the type ramp and convey different types of information—for example, the user name and comment in the conversations section below, or the article body text and the related-stories header—consider using color, font weight, and font style to establish an information hierarchy.

You can display related articles and comments in the article view to get users to continue their reading experience and stay in your app longer. Here's how that might look.

For more info about best practices for fonts, such as size, color, and weight, see Guidelines and checklist for text and typography (JavaScript) or Displaying and editing text (C#/VB/C++). In Windows Store apps written using XAML, you can use the RichTextBlock and RichTextBlockOverflow controls to manage text overflow. For an example, see XAML text display sample.

Navigating among articles

Users are often interested in a particular topic or news category and may consume multiple articles related to it. If the content in your app tends to be short, let the user pan to the right after the end of the article to get to the next article, and pan to the left before the start of the article to get to the previous article. You can also provide Semantic Zoom in this view to enable users to switch to different articles really quickly.

If the content of each post or article tends to be long, consider putting "previous article" and "next article" buttons in the top app bar so that the user can easily switch to other articles. You can offer these buttons in addition to letting users swipe back and forth between articles. You can play around with different visual styles for such buttons; for example, showing article thumbnails of the previous and next articles gives users a nice preview of the content they’ll be switching to. Alternatively, you could use the standard "previous" and "next" glyphs but play around with making the top app bar translucent or transparent so that it does not distract from the content. Here's an example of such buttons in the top app bar.

Commanding

Commands for common tasks, like "add to bookmarks," "add new feeds," and "pin tile to Start" should all live in the bottom app bar because it consolidates those commands in one place where users can find them reliably.

To learn more about commanding, see Commanding design for Windows Store apps.

Bookmarks

Users typically bookmark articles either from the hub page when they're saving articles to read later, or when they're reading an article and won't be able to finish it until next time. A compelling news app should support both situations, enabling users to bookmark selected articles by using the bottom app bar both from the hub or category pages and while reading an article. The bookmark button should be a toggle— a single button that either adds or removes a bookmark.

Always roam bookmarks so that users can continue to read their bookmarked articles regardless of which device they use. Ensure that the button remains on the left side of the app bar for consistency, as in the following example, even though the button's function is contextual on the hub page but is global in the article view.

See Navigation design for Windows Store apps for more info about app navigation hierarchy.

Text selection

Enable content selection in your app, especially for text in the article view, because users tend to select excerpts from articles. The system automatically shows the context menu for copying the selected content.

Contracts

Your news app should make use of Windows 8 contracts where reasonable to enrich user’s experiences and help connect the app with the rest of their Windows 8 experience . To learn more about contracts, see App contracts and extensions.

The Share contract

The Share contract provides users with a familiar and natural way to share content between two apps. There are many scenarios for sharing content from and to your app that can clearly and positively differentiate your news app from others. With Share in Windows 8, you get all of these scenarios without having to code additional integration into your app. If you want to enable your users to share content from the app, the app should be a Share source. If you want to enable your app to consume data from other apps, the app should be a Share target.

Sharing from your News app

A majority of the apps in the news category are about consuming news content. Sharing articles and interesting stories is a key feature of news apps today, so we think that every one of these apps should be a source for the Share contract.

Being a Share source means making the content in your News app--whether in the form of URIs, bitmaps, HTML, text, storage items or custom data types--available to other apps that can consume these formats. This capability makes many compelling scenarios possible. It is easy to imagine the landscape of social sharing with such a contract. You can make your app instantly able to share to social networks, blogging apps, and mail apps.

Beyond social sharing, the contract enables users to complete research, planning and archival tasks by to sharing News stories with note-taking apps, news aggregators, and other Share targets. As an example, if I want to save a selected excerpt from a news article to my notebook along with a link to the article for future reference, I can do so if the Share source provides the right data types representing that information.

By supporting the Share source contract, you also enable your app to share directly to devices in near field proximity as enabled by Tap and Send.

As a source app, it is important to support as many data types as are meaningful for the content that you would like your users to share. This makes it possible for your users to share your app’s content with a broad set of Share target apps. In the example below, Contoso News is the source app. It is sharing text, a thumbnail, and a link for the article that is in focus. The Share pane has a list of QuickLinks and Share target apps that support sharing these content types.

Sharing to your news app

Some news apps will be great at aggregating articles from other apps, providing a way for the user to organize and consume information from a large set of sources in a familiar and self-curated way. These apps should invest in supporting the Share target contract.

Being a Share target means allowing your app to consume the data provided by the Share source apps in an interesting and meaningful way. In the example below, you can share an article from a news app to a news aggregator for reading later.

To learn more about the Share contract, see Sharing and receiving content.

Comments and integration with other social apps

News apps can deliver value by enabling their users to post comments or discuss articles and tag them by using apps that are integrated with the Share charm. By relying on apps that integrate with the Share charm, you tailor your app's sharing experience to the apps that your users actually use for sharing, and it helps users by centering all their sharing in one consolidated experience. Also, you don't need to spend time coding for specific social networks because when new social networks are launched, your app is integrated with them automatically.

Typography in news apps

Use the typography grid and size ramp in news apps to create a visual hierarchy that enables users to scan and consume a lot of information quickly and easily. Although the use of the Segoe UI font specified in the type ramp is appropriate for news content, you might consider using Calibri, our recommended font for documents in Windows Store apps, or Cambria, our recommended "traditional document" font. The Georgia font is a popular choice for news sites on the web, and so may also be a familiar option for your news app.

If you decide to specify alternate system fonts, be sure to confirm that they are installed with Windows 8; don't require the installation of a separate app such as Microsoft Office. If you use your own custom or licensed fonts, make sure you have sufficient legal rights to include them with your app. Regardless of the fonts you use, the Windows 8 type ramp provides good guidance about the maximum number of sizes and styles you should use.

Using a small set of font sizes throughout the app, as recommended in the type ramp guidance, creates a sense of structure and rhythm in the content. If there are multiple elements that use the same font size in the type ramp but convey different types of information, consider using color, font weight, and style to establish an information hierarchy. The following example shows how you can use font size, color, and weight to create such a hierarchy.

See Guidelines and checklist for text and typography for more info about best practices for fonts, such as size, color, and weight.

Freshness of content

In news scenarios, it is essential for the content of your app to be up to date and fresh. Let's look at the elements that indicate freshness to your users.

Time content was last updated

Displaying "last updated" information to the user builds confidence in the reliability of your news app. Show info about the last update on the canvas in an unobtrusive manner. This info should be displayed in the tertiary info style (9-point) for the type ramp. Here's an example.

Article posting time

Showing when an article was posted is another common way to keep users informed of the freshness of the content they're reading. For such time stamps, use the tertiary info type ramp style and use color and weight to differentiate it from other content in your layout that may use the same type ramp.

Refreshing content

News apps should always show the most up-to-date content. To make sure content in your app is up to date, download data opportunistically. For example, while the user is reading an article, download new content for the hub page so that when the user returns to that page it is up to date. Don't download data in the background when the user is using a wireless mobile connection, however, because apps should minimize background data usage when roaming or using mobile broadband.

In addition, make sure you app can handle offline scenarios by notifying users when content isn't available offline.

If your app needs to update content for a page that a user is currently on, indicate progress at the top of the canvas area that's being updated as described in Guidelines and checklist for progress controls. Also, use animations to insert new content and remove older content from the canvas as described in the Guidelines and checklist for list animations. The following image shows an example with the progress bar at the top of the image.

If your news app hasn't updated its content in a while and the user switches to it, consider obfuscating the old content and showing progress on the canvas to indicate that a lot of content is being updated.

Make sure the app is responsive even while the content is being updated. Also, if the connection is weak, be sure to set a timeout value and display your app's offline UI. The following image shows hub-page content being obfuscated during an update.

Connected and alive

Live tiles and notifications enable fresh content to be displayed when users are on the Start screen. By using these features you can build a connection with the user and make your app alive with activity.

Tiles and notifications

Showing the latest news stories and breaking news on tiles re-engages users and continues to draw them into your app when they happen to discover interesting news stories on the app tile. Here's an example of an app tile that displays a news headline.

Enabling users to pin different news category tiles to Start lets them see notifications tailored to those categories and quickly access the particular kind of news they're interested in. This is another means of drawing users back into your app.

If you allow users to opt-in to toast notifications of breaking news, which will be displayed even when your app isn't running, the app can keep keen users up to date on the latest news and draw them into your app. This should be an opt-in setting that the user can enable via the app settings accessed through the Settings charm because unsolicited notifications may annoy users who did not explicitly express interest in seeing toast for breaking news. Here's and example of a toast notification.

Roaming

Because most people have more than one Windows PC, your news app can give users the experience they expect by providing a consistent user experience across all their Windows 8 PCs. You can roam app settings, article bookmarks, favorite news categories, reading preferences, and any other data in your app that's useful to users across all their PCs. See the Guidelines for roaming application data to learn more about best practices for roaming app data.

Orientation and views

As you design your news app for Windows 8, consider all views for your app, such as various screen resolutions and device sizes.

Portrait and landscape views

Windows 8 makes it easy to scale your design to both portrait layout and high-resolution screens by including more content in your app for larger devices. As shown in the following example that showcases an app in both landscape view and portrait view, your app should continue to pan horizontally in portrait view.

Portrait view is great for reading and consuming large amounts of content. Provide a portrait view for your entire app, but especially for the article view because portrait is a common orientation for reading content.

Touch interaction design has more info about how your app should support panning. Guidelines for layouts has more info about view states, user interactions, and screen orientations.

Snapped view

Windows 8 lets users multitask by "snapping" an app beside another app. Snapped view is a great way to increase your app's time on screen and to engage users for longer periods. Having a snapped state for each view of your app enables users to multitask while using your app, so they keep your app on the screen even when they’re doing other things.

There are many reasons the user may snap your app. Perhaps there are outgoing links within the news article and the user wants to launch a new link in their browser without navigating away from the article. They first snap your news app before following the link. Prhaps the user just wants to make the other app beside it bigger. Whatever the reason for snapping your app, it is important that the action of snapping does not navigate and lose the article that the user was just reading.

When snapped, you should adjust the flow of article pages to pan vertically. News titles in the snapped article page should use a smaller font, typically the "page subheader" text size. For information on recommended font sizes, see Guidelines and checklist for text and typography. If the title is long, the title can wrap to multiple lines. Large images within the article should be scaled fit the 320px width. Multiple images can be stacked vertically as appropriate.

It is strongly encouraged that the contents in the category and hub pages are also reflowed to pan vertically so that context is maintained for the user, even when your news app is resized.

Splash screen

As mentioned earlier, news apps must frequently download fresh content from the web. To make your app fast and responsive, don’t wait until all the images for each category have been downloaded before you show the landing page; waiting can cause users to become impatient. Show the user the app's hub page as soon as the article titles have been downloaded, and then asynchronously load images and other data.

During the short wait for the hub page to appear, display your splash screen along with a message that informs users that your app is downloading content. Here's an example.

Related topics

Commanding design for Windows Store apps

Making great Windows Store apps

Navigation design for Windows Store apps

Touch interaction design

UX guidelines for Windows Store apps

Build date: 6/20/2013