Design case study: Enterprise line of business Windows Runtime app
Windows 8.1 is a great platform for building apps that increase productivity, ease deployment, and allow your employees to interact with their PC in a more natural way. This article shows you how to design and develop enterprise line of business (LOB) Windows Store apps for Windows 8.1. It provides guidelines and advice for developers who want to take advantage of the new capabilities in Windows 8.1. It also provides suggestions for how to leverage new form factors to create engaging experiences for enterprise users.
Line of business (LOB) apps in the enterprise create a unique set of challenges for developers. Apps that are targeted toward the general consumer are marketed to the entire world through the Windows Store, but an LOB app is generally only deployed to users that take part in business operations for a particular enterprise. Additionally, LOB apps typically work with back-end data stores, are targeted toward specific business processes, and must adhere to restricted security policies. To ensure the security of company resources, LOB apps need to have tight control over app updates. Some examples of enterprise LOB apps include point-of-sale apps, product catalogs, dashboards, in-field or sales apps, workflow management apps, and monitoring and response apps.
For this case study, we spoke with the development team at Sonoma Partners LLC, a firm that uses Microsoft solutions to create apps for enterprise customers. While Sonoma Partners' customers already had apps for users working at the office, they wanted Sonoma Partners to build new experiences for their increasingly mobile workforce. One customer needed to create an app for customer representatives working in the field. These field representatives needed a portable solution that would allow them to work remotely at customer sites, in their car, at a coffee shop, and so on. A smartphone proved too small for the field reps' needs, and a laptop was too large. In this case, a tablet device was the perfect device.
In this article we'll take a look at the requirements that Sonoma Partners were given for this particular LOB app, discuss how Windows 8.1 and Windows Store app design helped them create a solution, and how you can use Windows Store apps to create exceptional user experiences for your own organization. In order to protect the intellectual property of Sonoma Partners and their customer, in this case study we show a generic Fabrikam app based on Sonoma Partners' design.
For this case study, Fabrikam is a widget manufacturer that needs an app for its business-to-business field representatives.
Windows 8.1 is designed to run on devices that range from handheld tablets to large all-in-one PCs. These devices can use touch, pen, or mouse and keyboard as their primary inputs. Windows and apps work well across each input.
Before they designed the app, Sonoma spent time with the customer. They looked into the particular use cases for the app and studied its users. By narrowing to a few core use cases, they focused the app. A helpful way to capture this is a "great at" statement—for example, this particular app is "great at letting field representatives stay on top of their customer accounts on a daily basis while out in the field." Having this statement serves as a focal point. It hints at the primary scenarios and form factors for the app.
Since field representatives spend the majority of their time on the road, they are likely to carry ultraportable PCs. Tablets, convertibles, and the next generation of touch-based laptops supported by Windows 8.1 are a great fit for these scenarios. These new devices are much more portable than traditional laptops, while allowing for increased productivity compared to smartphones. They are lightweight, have extremely long battery life, take up little space in a bag or on a desk, and can easily be passed to someone for viewing.
These new categories of PCs also come with built-in geolocation capabilities and cameras. These capabilities enabled Sonoma Partners to easily add mapping, photo, and video capabilities to their app. This made it simple for a representative to get directions to their next appointment, or capture an image or video while in the field. Windows Store apps also work on all-in-ones and with mouse and keyboard at the office, so they are never confined to a particular form factor.
Windows Store apps are built around new Windows UI, which emphasizes content. All non-essential elements recede to the background. This is done through clean and open layouts, which feature a clear information hierarchy, purposeful animations, and direct touch-first interactions.
With these principles in mind, Sonoma Partners developed the "great at" statement into a concrete list of scenarios. These scenarios helped outline the flow of the app—what would a user do first, what would a user do next? For this particular app, it became clear that scenarios like scheduling appointments with customers, managing orders, and reviewing sales data were important.
Based on the above analysis, it's clear that this LOB app featured quite a bit of data flowing through it. Special care in the organization and visual management of this data was critical to making the app usable while adhering to new Windows UI.
It was clear to Sonoma that sales accounts and orders made up the core elements of this app. For a field representative, those are their lifeblood, so it makes sense to form groupings or hierarchies around this content.
Unlike traditional desktop applications, Windows Store apps do not use tabs and menus for navigation. Instead, Windows Store apps use flat or hierarchical navigation patterns made up of full-screen pages or views. The large volume of content in this app, as well as its type, nicely fit a hierarchical navigation pattern. In this case, orders and contacts are tied to accounts, and appointments are tied to contacts.
The focal point of the hierarchical pattern is the hub page, which is the primary page of the app. The hub page consists of various visually distinct sections that correspond to different areas of the app. These sections expose unique content or functionality directly on the page. In the case of Sonoma Partners, it was clear that the hub page would surface content about accounts and orders—appointments, to-dos, unfilled orders, direct links to top accounts, and trending sales data were all important to an on-the-go representative.
As a designer or app creator, you can define each page of the hierarchy separately. Then use the navigation classes to manage the flow of your app. An example flow is shown in the following figure.
As on the web, you can define navigation that occurs when a user clicks on a particular piece of content or section of the page. In Windows Store apps, navigation is also managed through a permanent back button on each page, or by using the real estate in the top app bar.
For help choosing the best navigation pattern for your app, see Navigation patterns.
The principle of letting content shine through is at the core of Windows Store apps. Anything that helps present or interact with content (also known as chrome) can clutter up the experience and detract from the purpose of the app. In Windows Store apps, commands are very seldom found on the page itself (though if they are particularly important, they can be). Instead, content should be manipulated directly where possible, for example by pinching to zoom, or through commands on the app bar.
The app bar appears at the top and bottom edges of the app. The top is generally used for navigation. The app bar contains commands that are contextual to the current page and the selected content, as shown in the following figure.
The app bar is usually off screen and out of the way, but it can be revealed by swiping from the top or bottom edge with a finger, right-clicking with a mouse, or pressing Windows logo key+Z on a keyboard. Additionally, the app bar automatically appears whenever a selection is made within an app's content. Because the app bar is a system gesture that is used throughout Windows Store apps, it is a familiar experience for your users. This makes the app easier to learn.
Have a look at these topics for details on how to use the app bar in your own app.
- Quickstart: Adding app bars
- Quickstart: Adding an app bar with commands
- Quickstart: adding an app bar with custom content
- Guidelines for app bars
An LOB app, such as the one built by Sonoma Partners, typically has a lot of content to manage. How do you create a touch-first experience that uses clean and open layouts, while making it easy for the user to quickly navigate through large amounts of content in a single view? Provide semantic zoom.
Semantic zoom is zooming behavior that allows you to zoom out of a view with a pinch touch gesture, or with a button for a mouse and keyboard. In the zoomed-out state, a user sees a summarized view of the content that can be used for navigation or to provide more meaningful context. For example, zooming out of a list of contacts may present a list of letters with the number of contacts under each letter—clicking on the letter "A" would take you to the list of contacts starting with "A". In the following figure, semantic zoom enables an easy overview of key data while also allowing navigation of the long hub view.
As the figure shows, semantic zoom is partly about grouping data together for easier navigation. In this case, navigation moves from one end of a long list to the other end, the equivalent of "optical zoom". Semantic zoom also allows you to use the zoomed-out view to provide counts and statistics that describe the overall data in a summarized way. This gives users quick and easy access to important details about the big picture.
Because the semantic zoom control is based on templates that you supply, you have the freedom to provide whatever views are valuable to your users and make them available with a simple pinch gesture. Do your users prefer dates displayed as a list, or as a calendar? Do they want to see names with or without photos? With semantic zoom, there are many exciting data visualization possibilities.
Have a look at these topics for details on how to use the semantic zoom control in your app.
Windows 8.1 runs on a large variety of devices, new and old. Windows Store apps run on tablets while on the go, all-in-ones at the office, professional high dots per inch (HDPI) monitors connected to powerful desktops, and anything in between. Instead of having to create multiple pages to support multiple screen sizes, Sonoma Partners simply had to define multiple layouts for the same page. Each layout specifies how UI elements are displayed for a particular view, as well as which UI elements are displayed depending on how much screen real estate is available. The user interaction, data binding, and other components of the app do not change. Only the display area changes.
Sonoma had to do similar work to support different orientations and multitasking with narrow widths, as shown in the following figure.
The ability of the user to resize the app to any width allowed Sonoma to design the app to meet the varying preferences and ergonomics needs of users. Users were not restricted to a particular layout. The app is more convenient for users because it can be viewed alongside other enterprise apps, such as an email app.
Have a look at this topic for details on design for different window sizes in your app: Guidelines for window sizes and scaling to screens.
Contracts enable your app to participate in common Windows interactions. By implementing contracts in your app, you can provide users with an experience that is consistent across Windows.
Searching across the system and the web is a core experience in Windows. Users can easily search for apps, files and settings by using a search box on the app canvas or by swiping from the right (or moving the mouse to the right corner) and clicking or tapping the Search charm. Apps can also take advantage of this experience by implementing the Search contract, which allows users to search globally from within their app. Sonoma Partners took full advantage of this by implementing support for finding a particular account, contact or order. This is shown in the following figure.
By implementing the Search contract, your app makes itself searchable outside its own confines. This improves the productivity of your users. For example, an employee may begin a search for a sales contact from the Start screen. They may then look through their email app for recent messages, then move over to the LOB app to search for orders. You as the developer have full control over the search experience and any indexing that may need to be implemented.
The Search contract is simple to set up. A contract is, effectively, an agreement between your app and the operating system. The contract describes the requirements for your app to use this capability. For the Search contract, this means that you must add an event handler that listens for when the user enters a query. You can even provide suggestions as the user enters a search term. When it receives a query, the LOB app searches its data and displays relevant results.
You can also add an in-app search box so you can completely customize the search experience within your app. Have a look at the following topic for an example of how to implement the Search contract in your app: Quickstart: Adding search to an app. This topic describes all of the contracts available to Windows Store apps: App contracts and extensions.
As with the Search contract, you can leverage the Settings contract to create a familiar experience for user-specific settings. These settings may include toast notification options, device access, and location settings. You can also create a familiar experience for values that are global to your app but may change, such as server names, locations, and login information. For LOB Windows store apps, other things for which the Settings contract is ideal include account management settings such as user identity and permissions, multiple account management, sign out, and account details. The Settings charm simplifies the experience for your users and reduces clutter within your app. For example, you don't need to take up space with a dedicated settings button. The Settings charm presents a standardized experience across Windows Store apps.
For information on implementing the Settings contract in your app, see Adding app settings.
Almost by definition, field representatives travel frequently. While on the road, they often need a quick spot-check on where they need to be next. By supporting live tiles in the app, the tile itself can inform the field rep about their upcoming appointments without a need to run the app. Sonoma extended their app even further by supporting secondary tiles, which can be pinned to the Start screen. Secondary tiles are shown in the following figure.
These secondary tiles allow easy access to important sales accounts and customers by taking users directly to the relevant detail page and supporting live tile updates for that particular account.
Tiles come in three square sizes (small. medium, and large) and one wide size. Several template variations are provided for the medium, large, and wide sizes.
While the user is using another app, a toast can notify the user of important information. Clicking or tapping on the toast instantly switches into the app. Sonoma used toasts to notify the field rep of an upcoming appointment, a change in order status, and other important information, as shown in the following figure.
For information on how to use live tiles, toast notifications, and secondary tiles in your app, have a look at these topics.
To enhance the user experience and streamline the workflow of field representatives, Sonoma wanted to leverage the new capabilities available on next generation Windows PCs. One of these capabilities was geolocation. By combining geolocation capabilities with Bing Maps, Sonoma was able to show the user's current position in a map view along with meeting and customer locations. This is a more intuitive experience than what is traditionally possible.
See these topics for information on how to use geolocation and Bing Maps in your own Windows Store apps.
In addition to geolocation support, Sonoma Partners was able to use the integrated camera and file picker support in Windows 8.1. This greatly simplified the process of adding images and videos to the LOB app. With this functionality, a user could easily add a photo of a customer by using the built-in camera, local disk, the cloud, or even third-party services. For information on how you can add file picker support and camera capabilities to your Windows Store apps, see Capturing or rendering audio, video, and images and Accessing data and files.
Sonoma Partners created their Windows Store app as part of an overall solution to manage their customer's apps for enterprise data and processes. All of those apps rely on Microsoft Dynamics CRM as the data store. Because the Windows Store app developed by Sonoma Partners was designed for representatives in the field, they needed to connect to the enterprise data over public networks. By using secured web services, Sonoma Partners was able to deliver Microsoft Dynamics CRM data to the Windows Store app without exposing any of the customer's sensitive data. Web services provide a common framework for describing and sharing data, and they are a great way to work with data in a distributed environment.
For details on how you can connect to web services from your app, see the following topics.
- Connecting to a web service
- Quickstart: Connecting using XML HTTP Request (IXHR2)
- Quickstart: Connecting to a web service with WinJS.xhr
- Windows Communication Foundation Services and WCF Data Services in Visual Studio
- Get started with Microsoft Azure Mobile Services
Windows Store apps can also store data local to the application for offline access and usage by the application. This can be useful for scenarios with offline data that synchronizes with the central data store periodically, or when a connection is available. For more info, see Working with data and files.
Windows Store apps that need offline data access require relational databases for data storage. For these scenarios, Windows Store apps can use SQLite for Windows Runtime. For more info, see SQLite with Windows 8 apps.
As with any app, data binding is a powerful tool that simplifies your code. Windows Store apps have a number of resources and controls that you can use for data binding, including the ListView control or the FlipView control. For details and examples, see Data binding.
As mentioned earlier, Sonoma Partners uses Microsoft Dynamics CRM as the data store for their app. As a result, user sign-in information is also conveniently managed by Microsoft Dynamics CRM. Just as with the data, Sonoma Partners created a web service with Windows Communication Foundation (WCF) to handle logins. Again, this was secured using Secure Sockets Layer (SSL). When the app is loaded, the user sees a sign-in screen following the splash screen, as shown in the following figure.
To create a better user experience, Sonoma Partners made use of the Windows 8.1 password vault. This freed the user from repeatedly having to sign in to the app.
Your Windows Store apps can support any number of authentication capabilities including domain sign in, multi-factor authentication using smart cards, or Microsoft accounts. You can also manage all the credentials provided in the app through password vaults, so that the application does not have to prompt the user for credentials to the same service during every access. These credentials should be managed by the user through the Settings pane for the app. For information on the password vault, see the PasswordVault reference documentation.
To develop their solution, Sonoma Partners turned to Microsoft Visual Studio 2012 for a powerful and familiar development environment for writing the code for their Windows Store app. For designing the UI, Sonoma Partners used Microsoft Expression Blend with Microsoft Visual Studio. This enabled them to separate the background code from the UI elements of their Windows Store app. The separation of code from UI freed the designers to create an engaging user experience, while the developers connected the UI to the data, devices, and capabilities of the app.
You can download Visual Studio, including Expression Blend, at Developer downloads for programming Windows Store apps. The following figures show both Expression Blend and Visual Studio in action.
Apps must be tested to ensure they're of high quality and that there are no surprises.
The Windows App Certification Kit, which is available through the Windows Software Development Kit (SDK) for Windows 8.1, validates apps' technical compliance and ensure that they follow the best practices and recommendations for Windows Store app design. For more information, see Using the Windows App Certification Kit.
Visual Studio includes a number of tools for comprehensively testing apps on a development PC. Along with the Visual Studio debugger, there is an emulator, and the Visual Studio testing framework is also included. For more information, see Debugging and testing Windows Store apps and the Channel 9 video, Manual testing of Windows 8 Windows Store apps.
Apps should always be tested on a PC other than the development PC. Apps should also be tested on different architectures, different versions of the operating system installed, and different form factors. For information on running apps on a PC other than a development PC, see Running Windows Store apps from Visual Studio and Get a developer license.
While the Windows Store is a great way to market and distribute apps, LOB apps will most often be distributed directly to the end-user by the IT organization within the company. This process of installing apps without going through the Windows Store is called side-loading. Here are some best practices to help ensure that users have a great experience with installing and running these side-loaded apps for the first time.
- Use the Windows App Certification Kit—As mentioned earlier, before distributing an app, run the certification tests in the Windows App Certification Kit to ensure that it meets the requirements of a Windows Store app.
- Sign the app—Use a trusted certificate authority (CA) to sign the app with an enterprise certificate. This is part of the deployment process, whether or not the app is distributed through the Windows Store. The certificate must be trusted on all of the PCs that will run the app, and the publisher name in the certificate must match the publisher name of the app.
- Set group policy—Ensure that group policy is set to install all trusted apps. This allows the group's users to install side-loaded apps.
- Deploy the app—There are a number of options for distributing apps to users on a network. Common app management solutions like Microsoft System Center are available, or users can install the app by using a Windows PowerShell script.
For details on the different ways that LOB app can be deployed and app updates can be managed, see Deploying enterprise apps and What's New in Windows 8.1, Bring Your Own Device (BYOD) Enhancements.
As with previous versions of Windows, IT managers can continue to use tools such as Windows Intune and Microsoft System Center Configuration Manager to manage access to enterprise LOB apps. With the introduction of the Windows Store, IT managers will want to ensure that user access to the Windows Store is compliant with company policy.
For Windows Store apps, IT managers have several options for managing apps both internally distributed and using the Windows Store.
- The management tools available from System Center Configuration Manager and Windows Intune, or third-party MDMs, can control which apps can be distributed to the enterprise user base.
- Company policy may enable user access to the Windows Store, but only for particular apps. In this case, IT managers can restrict which apps that enterprise users have access to in the Windows Store by using the AppLocker tool.
- Company policy may restrict access to the Windows Store for all but a selected set of users or PCs. In this case, IT managers can use a group policy to disable access to the Windows Store for restricted users or PCs.