Designing Hilo's UX (Windows Store apps using C++ and XAML)

From: Developing an end-to-end Windows Store app using C++ and XAML: Hilo

Previous page | Next page

The document Planning Windows Store apps suggests design guidelines to follow. Here we explain the design process for the Hilo C++ sample app UX and the Windows 8 features that we will use as part of the app. You might want to read Index of UX guidelines for Windows Store apps before you read this document.

Download

After you download the code, see Getting started with Hilo for instructions.

The planning process was iterative. We brainstormed the experience goals, ran them past UX designers and customers, gathered feedback, and incorporated that feedback into our planning. Throughout the development process, we regularly checked with our advisors to make sure that we were moving towards our original goals. For example, we received early feedback to demonstrate how to use C++ Accelerated Massive Parallelism (C++ AMP) in Hilo. We had existing code that applies a cartoon effect to an image, so we added this feature. (For more info, see Asynchronous programming.)

To meet our larger overall goal of demonstrating how to develop a Windows Store app using the latest technologies, we added a feature only when it shows something unique about creating Windows Store apps. For example, the app starts on a hub page instead of directly on the image browser page. We considered adding additional sections to the hub page that let you view pictures in different ways (for example, your tagged "favorites"). But we felt that this distracted from the app's core features. We designed Hilo so that you can extend its functionality.

You will learn

• How we tied our "great at" statement to the app flow.
• How storyboards and prototypes drive design.
• Which Windows 8 features to consider as you plan your app.

Applies to

• Windows Runtime for Windows 8
• XAML

Deciding the UX goals

Hilo is a photo app, and so we wanted to pick the right experiences for users to relive their memories.

Brainstorming the user experience

Our first step was to brainstorm which aspects of a photo app are the most crucial for a great UX and let these features guide us through the design process. Here are some of the features we came up with:

• Browse photos
• Rotate and crop photos
• Perform red-eye reduction and other image manipulations
• Tag and categorize photos
• Synchronize photos across devices
• Create a photo collage
• Create a photo slideshow
• Share photos on the web

What's Hilo great at?

Planning Windows Store apps suggests that you create a "great at" statement to guide your UX planning. Here's the "great at" statement we came up with for Hilo:

Hilo is great at helping people relive their memories.

There were many things that we could have done in Hilo. But we felt that the ability to browse, view, rotate, and crop photos best demonstrate the basics for creating a basic, yet complete, photo app. We focused on the kinds of features that characterize a Windows Store app.

Realistically, the true goal of Hilo is not to provide a great photo app, but to demonstrate the key components and methodologies that make a great app. But we used this statement to guide our design tradeoffs as we built the app. By focusing on the user scenario, and not the individual features, we were better able to focus on what our users can do, and not what the app can do.

[Top]

Deciding the app flow

The app flow ties to our "great at" statement. A flow defines how the user interacts with the app to perform tasks. Windows Store apps should be intuitive and require the fewest interactions. We used two common techniques to help with this step: creating storyboards and mock-ups.

A storyboard defines the flow of an app. Storyboards focus on how we intend the app to behave, and not the specific details of what it will look like. Storyboards help bridge the gap between the idea of the app and its implementation, but are typically faster and cheaper to produce than prototyping the real thing. For Hilo, storyboards were critical to helping us define a UX that naturally flows the user through the experience. This technique has been used in the film industry and is now becoming more common in UX design.

Here is a storyboard.

Note  As we created the storyboard, we realized that grouping pictures by month instead of by folder would tie back to our "great at" statement. People typically associate memories with time more than folders on their computers.

A mockup also demonstrates the flow of the UX, but more closely resembles what the end product will look like. We created mock-ups based on our storyboards and presented them to our advisors for feedback. These mockups also helped each developer get a feel for what the resulting app should look like.

Here is a prototype of the image view page.

Tip  During planning, you can also create small prototypes to validate feasibility. A prototype is a small app that either demonstrates only the flow of the UI or demonstrates some minimal functionality. For example, you can create a prototype that contains only the navigation and commands, but doesn't provide any functionality. By making the experience real through software, prototyping enables you to test and validate the flow of your design on devices such as tablets. You can also create prototypes that demonstrate core aspects of the app. For example, we created a prototype that loads one photo and lets you use touch or the mouse to crop that photo. These prototypes allow you to safely explore possibilities before committing changes to your main code base. Although you can prototype during the planning phase of your app, try not to focus too much on writing code. Design the UX you want and then implement that design when it's ready.

[Top]

Deciding what Windows 8 features to use

Although creativity is key, it's important to provide an experience that's consistent with other Windows Store apps. By doing so, your app will be intuitive to use. We researched the features that the Windows platform provides by looking at MSDN Developer Samples and by talking with others and prototyping. We brainstormed which platform features would best support our app flow and settled on these:

Support for different views and form factors  Windows Store apps run on a variety of devices and orientations. We set out with the goal to enable Hilo to run anywhere—from a small tablet device running in either landscape or portrait mode to a large monitor. The XAML Grid control can adapt to different displays (screens sizes and pixel density) and orientations because it uses the available screen surface to display the appropriate number of elements, while keeping the same interaction principles. We designed each Hilo page to support snap and fill states.

Tiles  An app that feels fresh and engaging keeps your users coming back. We felt that the live tile was a critical component to keep the app feeling fresh and personal to the user.

Tip  Toast notifications and Secondary tiles are also great ways to engage your users and bring them back to your app. Although Hilo doesn't use toast notifications or secondary tiles, you can learn about them by reading Guidelines and checklist for secondary tiles and Guidelines and checklist for toast notifications.

Touch first  Touch is more than simply an alternative to using the mouse because it can add a personal connection between the user and the app. We wanted to make touch a first-class part of the app. For example, touch is a very natural way to enable users to crop and rotate their photos. We also realized that Semantic Zoom would be a great way to help users navigate large sets of pictures in a single view. On the image browser page, when you zoom out, the view changes to a calendar-based view. Users can then quickly browse through their photo collection. For more info on how we implemented touch features, see Using touch.

[Top]

Other features to consider

Although Hilo doesn't use them, here are some other features to include in your planning:

App contracts  Contracts declare how your app interacts with other apps and with Windows. For example, the Share contract lets users share different elements like text, images or other media across social networks and services. For more info, see App contracts and extensions.

Animations  Animations can help make your app engaging or provide visual cues. For more info, see Make animations smooth.

[Top]

Deciding how to sell the app

Although we don't sell the Hilo app through the Windows Store, we considered the best ways to enable the app to make money. Regardless whether customers pay for the app before they use it, whether there is a trial version, or whether the app includes ads, we felt that making the app world-ready would significantly increase the number of customers who can use the app and have a great experience. Being world-ready not only means supporting localized strings, but it is also being aware of how customers from various cultures use software. (For example, the direction in which they read text.) World-readiness is discussed in greater detail in Making your app world ready in this guide.

For more info about making money with your app, see Plan for monetization.

[Top]

Making a good first impression

We looked back at our "great at" statement—Hilo is great at helping people relive their memories—and realized that connecting the users' personal photos to the app experience was key to helping them relive their memories.

Having a dynamic live tile and tile notifications came to mind as the first area to focus on and plan. When the user leaves the app, we want to maintain a good impression by regularly updating the live tile with random recent pictures.

The splash screen is important because it expresses your app's personality. Although we want to show the splash screen for as little time as possible, it gives the user a memorable impression of the feel of your app. We chose a splash screen image that fits the Hilo branding and that ties in to UX as a whole.

Note  Image assets, including the Hilo logo, are placeholders and meant for training purposes only. They cannot be used as a trademark or for other commercial purposes.

We chose a hub as our home page because it immediately shows the primary purpose of the app, to browse and view photos. Because we planned for a great initial experience, users will be sure to explore the rest of the app.

[Top]

Prototyping and validating the design

To help solidify our planning and feel confident to move on to actual development, we presented our wireframes and prototypes to customers. We also cross-checked our planning against the Index UX guidelines for Windows Store apps to ensure we complied with the official guidelines. Doing so early saved us from making too many core design changes later. Of course, as you develop your app, you will find places where you need to rethink your design. But it is best to harden your design early so that you can move on to developing your next great app.

[Top]