News apps

Applies to Windows and Windows Phone

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

Overview

Windows 8.1 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.1 that are of particular importance for news apps, including:  

  • Content before chrome—With Windows 8.1, 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.1 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.1 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.

An example of a hierarchical model for a 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.

An example showing how you can indicate there are more news articles

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.

An example of how to indicate there is live 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.

An example of bookmarks

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

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.

An example of how semantic zoom enables quick navigation

Here are some more examples of semantic zoom at work in a news app.

Additional examples of semantic zoom

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.

An example of categories being arranged

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.

An illustration indicating horizontal panning across articles

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.

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.

A user viewing related articles and comments

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.

An example article layout

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.

Example UI with the top app bar demonstrating previous and next

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.

An example showing bookmark button on left side of app bar

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.1 contracts where reasonable to enrich user’s experiences and help connect the app with the rest of their Windows 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.1, 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.

An example of sharing from a news app.

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.

An example of Share pane options for sharing from a news app.

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.

An example of sharing to a news aggregator app.

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.1; 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.1 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.

An example of font sizes and an information 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.

An example demonstrating content freshness

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.

An example of a progress bar

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.

An example showing that content is being updated

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.

Examples of how your app tile can draw the user in

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.

Example of 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 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.

Window resizing

Windows 8.1 lets users multitask by resizing windows to any size, down to a minimum width, and placing apps side-by-side on the screen. Designing your app to work well and narrow widths is a great way to increase your app's time on screen and to engage users for longer periods. It 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 resize 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. Perhaps the user just wants to make another app beside it bigger. Whatever the reason for resizing your app, it is important that the action of resizing does not navigate and lose the article that the user was just reading.

When a user resizes your app so that it is taller than it is wide, consider adjusting the flow of pages to pan vertically. For information about window resizing, see Guidelines for window resizing and scaling to screens.

Examples of narrow width news apps

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.

An example splash screen

Related topics

Commanding design for Windows Store apps
Meet Windows Store apps
Navigation design for Windows Store apps
Touch interaction design
UX guidelines for Windows Store apps

 

 

Show:
© 2014 Microsoft. All rights reserved.