black book_web

27
CONTENTS The Changing Face of Design 1 Opportunities 3 Features and Considerations 5 Axis of Delight 2 Opportunities 4 Meet the Team 7 Certification 6 App tiles / Splash Screen / Windowing / Navigation / Search / Share Voice / Pen / Vision / Cloud / And Beyond... BLACK BOOK Design: Vol. I DX Quality Experience & Design © Microsoft 2014-2015. All rights reserved.

Upload: jeeyoung-jung

Post on 16-Jul-2015

78 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Black Book_WEB

CONTENTS

The Changing Face of Design1

Opportunities

3 Features and Considerations

5

Axis of Delight2

Opportunities

4

Meet the Team 7

Certification6

App tiles / Splash Screen / Windowing / Navigation / Search / Share

Voice / Pen / Vision / Cloud / And Beyond...

BLACKBOOK

Design: Vol. I

DX Quality Experience & Design

© Microsoft 2014-2015. All rights reserved.

Page 2: Black Book_WEB

BLACK BOOK: DESIGN VOL. I 5BLACK BOOK: DESIGN VOL. I4

Over the past two years, both the available guidance and prevailing attitudes toward design on the Windows platform have been undergoing constant evolution. With significant windowing, form factors and integration opportunities emerging around each corner of the company as we continue toward our One Microsoft goal, these changes are still far from over. There is no doubt that we must continue to explore, expand and refine the Microsoft Design Language, and this places a unique opportunity before Developer Experience and Evangelism. The purpose of Blackbook: Design 2014 is not to replace the publicly available guidance found online. Rather, the Blackbook is intended to serve as a high level framing of the content for professional designers fluent in other platforms approaching the Microsoft ecosystem for the first time. Ambient Intelligence will also require ambient creativity to fully realize sustainable, enjoyable, integrated experiences that delight our customers. This book is not intended as a prescriptive guide or replacement for a well thought out design strategy. The process of professional design requires conversation, analysis, critique and iteration. It is in this spirit the guide is presented; a high level overview of the trends, constraints, opportunities and affordances evolving in our cloud first, mobile first future.

1CHARACTERISTICS OF

A QUALITY APP

Page 3: Black Book_WEB

BLACK BOOK: DESIGN VOL. I 7BLACK BOOK: DESIGN VOL. I6

Great design is great design, regardless of platform or product. The goodness of a design, while notoriously difficult to quantify, is often measured by how well the design accomplishes its task in a way most pleasing to its intended audience. While this may appear a simple definition, the nuance and complexity that may arise in evaluating the true purpose and nature of the app is often a challenge. Since apps don’t exist in isolation, the extended environments in which an app will be deployed may also have some significant influence on determining the best design for the app.

When deploying an app on the Windows ecosystem, therefore, there are five design principles which Microsoft embraces and promotes in its own platform that you should be aware of.

While these design principles inform the choices Microsoft is making as it designs its own devices, services and digital offerings, how they each may map to the particular needs of your app is determined by the type of app you are creating and the expectations of your user.

2 AXIS OF DELIGHT

MICROSOFT DESIGN PRINCIPLES

Pride in Craftsmanship

Fast and Fluid

Authentically Digital

Do More with Less

Win as One

Page 4: Black Book_WEB

BLACK BOOK: DESIGN VOL. I 9BLACK BOOK: DESIGN VOL. I8

Great design is not a one-size-fits-all solution, nor can it be commoditized, templatized or widely distributed. Elements and choices that make one app amazing may be inappropriate, wildly out of place, or downright damaging to the design of another app. The professional designer exists to navigate these complexities and craft an experience that solves the right problem, the right way, with the maximum amount of delight afforded by the solution.

However, virtually all apps can be plotted upon a common axis of functionality, ranging from apps that can best be described as transactional utilities, to apps that desire to create a full immersive, virtual experience for their consumer. It is possible to design delightful experiences at any point along this axis, though a great design on one side of the spectrum may look completely different from a great design at the other end. To better illustrate the point, let us look at two very well designed experiences in the real world that exist at opposite ends of the axis of delight: McDonald’s and Starbucks. There is no doubt that the design of each experience has been finely crafted to accomplish their respective goals. Think of the carefully crafted choices around color, layout, discoverability and visual identity that each employ.

The McDonald’s experience is famous for its red and golden yellow color scheme, though this color combination is frequently found in many fast food companies as well, including Burger King, KFC and In-N-Out to name a few. These visual choices are by design. Yellow, among other psychological factors, is intended to trigger appetite, hunger and friendliness. Red, on the other hand, is the color of energy and excitement. The combination is clear: eat and get out– the epitome of fast food. Meanwhile, the behavioral design and usability of their menuing system is paragon of discoverability. Wherever you

are around the world, you walk into a McDonald’s and you already have your bearings. Everything is familiar, nothing is hidden, and satisfaction is a simple, single click away. The less cognitive energy required the better. And while the reflective design of McDonald’s may hold some negative connotations for adults who may not wish to be associated with the “fast food lifestyle,” that’s fine. They’re not the target audience anyway. Why else would the sightlines of their layout be optimized for younger, lower eyes to clearly see, desire and demand the co-branded goodies available this week in the latest Happy Meal cross promotional toy tie-in? Each design choice is optimized for consistently delivering high frequency, low friction transactions of commoditized goods; a model of amazing utility design at scale.

Starbucks, on the other hand, has designed an experience that is opposite in almost every choice of color, discoverability, layout and visual identity. Instead of red and yellow, Starbucks is one of the only global brands that extensively embraces green: a choice that triggers relaxation and environmental associations. The discoverability of the menu is mainly there as a suggestion, nobody ever orders off of the menu anyway. Every transaction enforces the experience that you are a unique individual of discerning taste, willing to pay for the finer delights in life. Each design choice is optimized to create a custom, personalized and reflective design experience. The extended layout of each coffee shop promotes exploration, curiosity and an opportunity to signify social status. And while McDonald’s addresses reflective design challenges by constantly co-branding with child friendly, pop culture references, Starbucks itself is the brand to be desired. Their iconic logo is tastefully but prominently marked onto all their goods, so their customers may self-identify as belonging to this particular consumer tribe. Embracers and promoters of the Starbucks lifestyle of accessible luxury and upward mobility all

Page 5: Black Book_WEB

BLACK BOOK: DESIGN VOL. I 11BLACK BOOK: DESIGN VOL. I10

wrapped in an environmentally conscious palette, of course. We all know it’s not about the coffee at all, but about the experience and brand. And we’re wiling to pay a premium for it. On the other end of the axis, Starbucks sits as a model of immersive design.

A good understanding of where your app falls on the axis of delight will help you design the right experience for what your app is attempting to accomplish. The further on the utility side of the axis, the more your app should behave predictably, employing common navigational solutions and shared metaphors with the operating system, prioritizing familiarity and task flow. For apps of this type, chrome should not come at the expense of the content, or worse, be used to cover up or distract from a poorly thought out solution. For utility style apps, the audience is assuming the role of a user, and as such, expect the transaction to occur smoothly, consistently, quickly and pleasantly to let them get back to their lives.

However, as the business strategy of some apps shift more toward the immersive side, lifestyle experiences and brand differentiation will come more into play. Unique design choices should be made that best capture the visceral, behavioral and reflective experiences desired by the intended audience and a unique voice and personality start to gain as much value as the stated purpose of the app. Apps on the far end of this spectrum, of course, are usually

UTILITIESTransactional

Content over Chrome

Expected Metaphors

Transparent Interface

IMMERSIVEImmersive

Chrome as Content

Branded Interface

Unique Metaphors

dominated by highly immersive games, where the participant isn’t looking to complete a transaction to get back to their life, but is desiring to escape from their life for a while and get lost in an alternate experience. As consumers become increasingly more design savvy, businesses across nearly all domains are continuing to find success by leveraging a more immersive experience as a critical business differentiator, taking a traditional commoditized good (such as buying coffee at McDonald’s) and crafting a more delightful experience around it and selling it at a premium (such as buying coffee at Starbucks). Regardless of where your app falls on this axis of utility, you can design a delightful experience that solves the true task you are trying to solve in a way that brings maximum emotional validation for your audience and ongoing success for your efforts.

Finally, let’s take a look again at Microsoft’s 5 Design Principles and map them to this Axis of Delight we’ve been exploring so far. In doing so, we will notice a peculiar pattern emerge.

Since operating systems are the underlying framework and services upon which all other apps are built, it makes perfect sense that Microsoft’s own design principles will skew heavily toward the transactional elements of good design. It is with this filter firmly in place that you, as a professional designer, are better prepared to evaluate the public

UTILITIES IMMERSIVE

Pride In Craftsmanship

Fast and Fluid

Win as One

Do More with Less

Authentically Digital

MICROSOFT DESIGN

PRINCIPLES

Page 6: Black Book_WEB

BLACK BOOK: DESIGN VOL. I 13BLACK BOOK: DESIGN VOL. I12

guidance currently available around designing Microsoft applications and judge them based on the unique needs of your particular application.

Some of these principles are true and should be adhered to regardless of where your app will sit on the Axis of Delight. Both Pride of Craftsmanship and Fast and Fluid are universally true. Your app should be well built, manage resources carefully, and be both designed and developed to perform well across a variety of form factors and power usage scenarios. This is especially true as cloud first and mobile first realities require more attention to detail than ever before. Calculations per watt and cost per pixel become players in determining how successful of an experience your app will be able to provide its user. As we shift toward ubiquitous computing across smaller devices, design decisions need to take into account power and scale factors that may have been less prioritized in the past. Windows is slowly converging into a unified, cloud powered collection of devices and services that span desktops, tablets, phones, gaming consoles and the internet itself. This intelligent mesh of utilities that is available to each new app entering the Microsoft ecosystem provides collaborative opportunities for your app to leverage; this is what it meant by the third universally true principal, Winning as One. From data-rich, transactional apps leveraging live tile updates, to premium apps leveraging search and share contracts, to games that manage identity and data syncing across devices in seamless ways, each of these apps craft an enhanced experience by taking advantage of features being baked into the emerging shared platform of the Windows ecosystem. But Do More With Less and being Authentically Digital is a strategy that is more true the more your

app prioritizes transactional efficiency. It informs all of the choices we make for our own software and system framing as Microsoft, but again, the operating system is primarily a utility, so this makes sense. Your app mileage may vary, and your particular brand differentiator or client visual identity may require a very non-minimalist or modern style treatment. Just because Microsoft’s own visual identity guidelines embrace a modernist aesthetic, that doesn’t mean that every app must sacrifice their own branding identity for the sake of the underlying framework, especially as those apps move further along the axis of delight. But as with all apps, great design will be judged by how well the app delivers on its intended purpose while providing the most desirable experience expected from the interaction. So in conclusion, designing great Microsoft applications is not about forcing the pixels to look or act a certain way or imposing a strict set of rules that dictate in advance what each design decision should be, but by crafting an amazing experience that takes full advantage of the entire Windows ecosystem. The rest of the Blackbook will help you better understand both the constraints and the unique opportunities of the Microsoft platform to help you design the best app experience possible. Q

Page 7: Black Book_WEB

BLACK BOOK: DESIGN VOL. I 15BLACK BOOK: DESIGN VOL. I14

3. FEATURES AND CONSIDERATIONSAPP TILES / SPLASH SCREEN / WINDOWING / NAVIGATION / SEARCH / SHARE

Page 8: Black Book_WEB

BLACK BOOK: DESIGN VOL. I 17BLACK BOOK: DESIGN VOL. I16

APP TILES

The app tile is the first point of contact the user will have with your app. If you are porting an existing app from another platform, you may not initially recognize the value that the app tile can add to your app in the Windows ecosystem. App tiles can either be static or live; in other words, the tile can either simply show your brand’s logo and serve as an entrance into your app, or flip through live content. Maybe your app has live scores, messages, or frequently changing information that the user wants to stay updated on—for these cases, live tiles present an excellent opportunity to showcase that information. The more useful and engaging app an app tile is, the more likely the user is to pin it to their start screen, which has been shown to increase engagement with the app.

aka.ms/wintiles aka.ms/wp8tiles

There are many templates available in the tile library that you can explore. From the small tile to the large square and wide tiles, there are several size and content considerations to take into account. Larger tile sizes allow for changing content to be showcased in peek or cycle style, while the smaller sizes don’t allow for content updates. Talk with your designers and business team and strategize on how you can make the best use of your app tile—how can you hook users into your app earlier?

Page 9: Black Book_WEB

BLACK BOOK: DESIGN VOL. I 19BLACK BOOK: DESIGN VOL. I18

Weather on Windows

Xbox Music on Windows Phone

Tiles on the start screen can be either wide or square, and each size supports multiple tile styles. Explore these styles in the Tile Template Library.

Tile Size

Keep in mind that Windows and Windows Phone apps can be displayed on a wide variety of screen resolutions and aspect ratios, so be sure to provide tile assets for each size. For a deeper dive into tile requirements, supported resolutions, and specific tile sizes, explore the links provided.

Secondary tiles are pinned by the user to bookmark deep linked content—for example, users can pin the stock quotes that are important to them on the start screen from the Finance app, which allows frequent and easy access to the content that they care about. Secondary tiles is a feature that can provide a tremendous amount of efficiency for your users.

Secondary Tiles

Finance app

Finance secondary tiles

Page 10: Black Book_WEB

BLACK BOOK: DESIGN VOL. I 21BLACK BOOK: DESIGN VOL. I20

App Tile Glossary

An image that represents your app on the Start Screen. It can be either static or live, and all apps have at least one default tile.

App tiles are an integral feature on the Windows platform, so there are several terms around the topic. Use this glossary as a starting point to acquaint yourself with app tiles and notifications.

App tile that presents new and valuable content that invites the user to re-engage with your app. Live tiles can present new information in peek or cycle mode.

Allows a user to launch directly from the Start screen to a specific location in an app. The app decides which content to offer as a pinning option, but the user chooses whether the secondary tile will be created or deleted.

App tile

SecondaryTile

Live Tile

SPLASH SCREEN

How you want to design your splash screen is another feature you want to consider. Splash screens are 620x300 Images that are shown in the center of the screen on Windows Store applications (also available, but not required, on Windows Phone applications). Apps are also required to specify a solid color that will fill the space around the image. As your app is starting up, the splash screen image and background color appear briefly and you should ensure that the image rotates with orientation changes.

aka.ms/Thxc28 aka.ms/G45lp5

A splash screen image and background color are required for Windows

All apps must have a splash screen image that is 620 x 300 pixels for scaling at 1x; it’s recommended to provide an image for 1.4x and 1.8x as well

If your app needs additional time preparing its UI or loading network data, feel free to employ an extended splash screen

Ensure that your splash screen image rotates with the device

1.4

1.8620x300

Page 11: Black Book_WEB

BLACK BOOK: DESIGN VOL. I 23BLACK BOOK: DESIGN VOL. I22

Extended Splash Screen Extended Splash Screen

Extended Splash ScreenThe extended splash screen presents a unique opportunity for apps that want to present a very smooth opening to the app start screen or require extra time loading, such as games or other data-dense apps. The user is initially presented with a static splash screen which then transitions to a more dynamic splash screen, which could do anything from show loading progress to something more imaginative to indicate loading. The extended splash screen lets the experience

Foursquare: Splash ScreenRoyal Revolt II: Splash Screen

be delightful as users are on-boarding your app, and creates a relationship with the user before your app even begins. Note that a splash screen must not be on a screen for more than two seconds without showing some kind of progress to pass certification tests, so use an extended splash screen if your app needs longer two seconds to start loading.

Page 12: Black Book_WEB

BLACK BOOK: DESIGN VOL. I 25BLACK BOOK: DESIGN VOL. I24

WINDOWING aka.ms/E6hmby aka.ms/B7o328

Windowing is the backbone of your app—how you handle responsive design is going to inform all the other design decisions you make. From 8-inch handheld devices to 82-inch Perceptive Pixel displays, Windows apps live on an incredibly broad range of form factors and screen resolutions, which makes windowing and resizing a constant reality on our platform. Windows Store apps also have the unique ability to split screens, allowing users to multitask and view multiple apps side-by-side. This feature presents an excellent opportunity for increased usage of your app as users are able to keep multiple apps on the screen, but also introduces resizing considerations that perhaps you haven’t considered when designing for other platforms.

In Windows 8.1, users can resize apps continuously down to a minimum width; the default minimum is 500 pixels, but if your app needs to go narrower, you can customize to a minimum of 320 pixels. This means that your app should be functional and good looking at any size down to the minimum. If you choose to keep the default minimum width, the system will automatically resize your app when the user opens another app in split view. However, if you choose to modify your app’s minimum width to 320px, there are a few design considerations to take into account to ensure full functionality of your app in tall and narrow layouts:

Another important part of windowing is system-wide gestures. There are certain gestures reserved by the system, such as swiping from the right edge exposing the charm bar on Windows, which you will need to take into consideration when designing the gestures on your app.

Be sure to scale down the essential commands: back button, app bars (if you choose to use them), message dialogues, layouts, settings panes.

If your app uses horizontal scrolling in full screen view, consider vertical scrolling in tall view.

If your app uses vertical scrolling in full screen view, consider only displaying one pane in narrow layout.

Ensure that the app stays in the current position and focus of the app when resized to tall or narrow layout.

Page 13: Black Book_WEB

BLACK BOOK: DESIGN VOL. I 27BLACK BOOK: DESIGN VOL. I26

Screen Scaling Here’s what you should know about our platform in order to ensure successful scaling to varying pixel densities and screen resolutions on every device:

320 Narrow width (optional)

500 Minimum width that apps must support

672 50% width on 1366x768

857Common height for small devices

Your app will be automatically scaled by the system depending on the device’s physical screen size, form factor, DPI, and screen resoluttion. Windows automatically resizes your app based on the following scaling plateaus for Windows Store: 1.0 (or 100%), 1.4, and 1.8 (2.4 for Windows Phone apps). Scalable vector graphics are automatically scaled by the system. Images sized to multiples of 5px are ideal in order to avoid pixel shifting at 140%, 180%, and 240% scaling.

1024

768

1080

1440

1366 1920 2560

••

BLACK BOOK: DESIGN VOL. I 27BLACK BOOK: DESIGN VOL. I26

Page 14: Black Book_WEB

BLACK BOOK: DESIGN VOL. I 29BLACK BOOK: DESIGN VOL. I28

System Edge Gestures Orientation & Rotation When familiarizing yourself with the system, you’ll discover the following swipe gestures on the left, right, and top edges:

Swiping from the right edge of the screen reveals the charms that expose system commands

Swiping from the top edge of the screen reveals the top and bottom app bars

Swiping from the bottom edge of the screen reveals the top and bottom app bars

Sliding from the top edge toward the bottom edge of the screen closes the current app

Swiping from the left edge cycles through currently running apps

Sliding from the top edge down and to the left or right edge plac-es the current app on that side of the screen

When designing your app, you have two layout options: dynamic or fixed layout. Although dynamic layouts are more common, you have the freedom to decide how your app reacts to orientation changes. For both layouts, the system has affordances to accommodate accordingly. The system automatically handles portrait or landscape orientation for apps with dynamic layout when the user rotates the device, in addition to adapting to changes in screen size and resolution. Windows accommodates apps with a fixed layout, in which the screen does not rotate with the device, with a “scale-to-fit” approach. The “scale-to-fit” feature automatically fills the screen on different screen sizes. This feature is built into the platform, but there are steps to take to implement it.

Window Resizing

Note these unique UI features when a user has multiple apps on the screen:

If a user invokes the charms, the charms apply to the last app that the user used, regardless of the size of the app or the position of the app on the screen.Between each app on the screen is a handle. Users resize app windows by sliding the handle. The handle also shows which app has focus.If a user grabs the handle between apps and tries to resize an app to a width that is less than the app’s minimum width, the app leaves the screen.If a user rotates a device or monitor while multiple apps are on the screen, the apps do not switch orientation.

Page 15: Black Book_WEB

BLACK BOOK: DESIGN VOL. I 31BLACK BOOK: DESIGN VOL. I30

NAVIGATIONaka.ms/Qiedc0 aka.ms/O5p5jy

Once you have your windowing strategy, then comes navigation. The starter templates in Visual Studio provide a certain way of thinking about windowing and navigation, but they aren’t prescriptive. However, there is a starting point—for example, Windows navigation utilizes horizontal scrolling by default.

Application Bars

is fully customizable to fit with your app’s design. is generally used for navigation controls within the app, secondary to navigation controls on the canvas. can be divided into multiple sections, from broad to specific navigation.

is fully customizable to fit with your app’s design. is generally used for commands, if not placed on the canvas.command icons can be customized.should have predictable commands. should open when an associated item is selected and stay sticky as items are selected and showing contextual commands.should not house account management, settings, or critical commands.items usually sit at the left and/or right so they can easily be reached with thumbs when holding a tablet.

The Top App Bar

Windows

The Bottom App Bar

••

•••••

• •

BLACK BOOK: DESIGN Vol. I30

Page 16: Black Book_WEB

BLACK BOOK: DESIGN VOL. I 33BLACK BOOK: DESIGN VOL. I32

The default app bar is a row of icon buttons and an ellipsis at the bottom of the phone’s screen. Clicking the ellipsis reveals the labels for the icon buttons and the menu items if they are enabled. The app bar automatically adjusts with orientation changes; when the phone is in landscape orientation, the app bar appears on the side of the screen vertically to maximize space for page content. The app bar height in portrait mode and width in landscape mode is fixed at 72 pixels, and can’t be modified. You can decide whether the app bar is set to be displayed or hidden in your app.

Icons with labels

Windows Phone

Mini size

Default size

menu item 1

menu item 2

menu item 3

Expedia app is a great horizontal scroll app that leverages all of the Windows defaults. In the case of Expedia, which features a lot of pictures and maps, horizontal panning made the most sense and creates a delightful experience for the user.

In addition to the row of icons, you can add a text-based menu list that slides up from underneath the icons when the user clicks the ellipsis. This animation is built-in to the app bar.

Example of Navigation

Expedia

Page 17: Black Book_WEB

BLACK BOOK: DESIGN VOL. I 35BLACK BOOK: DESIGN VOL. I34

Fresh Paint

Fresh Paint is a great first-party app that utilizes many system defaults in a customizable way that yields an immersive experience for the user. Fresh Paint uses the bottom command bar and the top app bar, but customizes both to be integrated into the theme of the app and opts to use vertical, rather than horizontal, scrolling. This is a fantastic example of an app that’s thinking about navigation, leveraging the metaphors, and making the app unique in a very custom way while still using several of the defaults.

Xbox Music

Xbox Music is a brilliant example of an app with a unique visual identity that has thought about windowing and navigation, and uses the system in the best way possible to solve the problem it’s trying to solve. By default, the app uses vertical scrolling to pan through its dense content and the command bar is anchored off to the left with a hamburger menu to allow for partial collapsing. This is an excellent example of a great app that doesn’t use any of the windowing or navigation templates, and veers from the expected. Use the Xbox Music app as an example to push the boundaries, make it your own, and embrace your brand to make a fantastic app experience for your customers.

Page 18: Black Book_WEB

BLACK BOOK: DESIGN VOL. I 37BLACK BOOK: DESIGN VOL. I36

SEARCHaka.ms/Bxuf2c aka.ms/Tmjj7u

As you’re researching our platform and going through the design guidance online, you might find some varying information on search; this is because search is a topic that has been consistently evolving over the past couple years. When we started, search was exclusively on the charm bar. At the present moment, the search bar can be used on the canvas to allow users to search and get results from within the app. The thinking around search has evolved into freedom to utilize the search bar in a way that makes the most sense for your app; if search is an integral part of your app, there are no boundaries to placing the search icon or field directly on the canvas. Make sure to keep in mind that some information might be outdated as you do your own deep dives into Windows design.

Search is an important command in Skype, so the search icon is easily accessible at the top of the canvas.

Our first-party apps are evolving in their usage of the search bar as well, as evidenced by the search bar in the Windows Store app.

MicrosoftMahjong

TripAdvisorFree 299 Travel

AllrecipesFree 1,296 Food & Dining

The Weather ChannelFree 5,035 News & Weather

MintFree 3,524 Finance

Hulu PlusFree 9,928 Entertainment

500pxFree 440 Photo

Getting Started Better Together

Collections See all

OEM picks See all

Adobe Photoshop ExpressFree 5,540Photo

OpenTableFree 511Food & Dining

LINEFree 13,155Social

ExpediaFree 342Travel

SongzaFree 1,601Music & VIdeo

UrbanspoonFree 586Food & Dining

Featured See all

Weather Music Lovers

Store

Halo: Spartan AssaultJoin the battle against Covenant forces Installed 2,617

Home Top charts Categories Collections Account Search for apps

Examples of Search

Skype

Windows Store

Page 19: Black Book_WEB

BLACK BOOK: DESIGN VOL. I 39BLACK BOOK: DESIGN VOL. I38

SHARE

Fresh Paint

aka.ms/P88xaa

Share is a feature on our platform that allows users to easily share content between apps, and is a true value-add to the Windows platform. You can choose to let your app share content to others, such as Facebook, and/or receive content from others. Like many of the features on Windows, sharing in and out is fully supported, end-to-end, by the system after implementation in your app. The share command (one of five charms on the system) can be found on the right bar, accessed by hovering in the top or bottom right corners or swiping from the right.

Fresh Paint is a great example of an app that uses share as a receiver and a sender (i.e. implements both source and target contracts). For example, a user can share a Fresh Paint masterpiece “out” directly to email or Twitter, or can share “in” a photo from their computer to the app.

Fruits

Example of Share

Xbox Music

Check out how Xbox music uses share from IE to allow users to make playlists with ease. From a list of artists and songs on an IE page, Xbox Music acts as a receiver, and searches and compiles the list of songs into an accessible playlist that users can then play the music from.

Page 20: Black Book_WEB

BLACK BOOK: DESIGN VOL. I 41BLACK BOOK: DESIGN VOL. I40

4. OPPORTUNITIESVOICE / PEN / VISION / CLOUD / AND BEYOND...

Page 21: Black Book_WEB

BLACK BOOK: DESIGN VOL. I 43BLACK BOOK: DESIGN VOL. I42

VOICE

With the proliferation of XBOX ONE voice commands and the arrival of Cortana on Windows Phone, 2014 has seen a tremendous update in Voice recognition and navigation. As you design your application, think carefully about which scenarios a voice command structure or navigation metaphor could enhance your experience.

As Cortana changes the way people interact with their Windows Phones, are there formatting considerations you can add to your application to make your content and data formatted emails more recognizable to your user’s personal assistant?

By harnessing the power of speech recognition on our mobile platform, XBOX ONE and emerging Windows Store app features, you could soon be bringing the same wonder directly to your app.

BLACK BOOK: DESIGN VOL. I 43BLACK BOOK: DESIGN VOL. I42

Page 22: Black Book_WEB

BLACK BOOK: DESIGN VOL. I 45BLACK BOOK: DESIGN VOL. I44

PENIn both very large as well as small, portable form factors, Windows is building a rich system of pen-based functionality. The precision tip pen and handwriting recognition that augments the written words open a world of possibilities.

On large PPI experiences, the natural user interactions that a pen-based experience provides is ideal for creative and architectural tasks, where direct manipulation of elements is crucial for a finessed, well designed experience.

On smaller devices, the power of pen-based technologies for traditionally analog style activities, like taking notes or drawing to filling in the weekend crossword puzzle is also driving a forward thinking investment into pen enabled scenarios.

Incorporating pen features into your own app may allow you to create deeply immersive experiences for your users as well.

Page 23: Black Book_WEB

BLACK BOOK: DESIGN VOL. I 47BLACK BOOK: DESIGN VOL. I46

VISION

Create digital camera lenses that integrate into Windows Phone to bring real-time image pre-processing to a device. Augment reality, translate text into other languages, the opportunities are endless… Kinect gives computers eyes, ears, and a brain. Quickly build apps with touchless gestures and speech on Xbox or Windows using Kinect. Integrating vision also opens up computing to scenarios in accessibil-ity, rehabilitation, commercial, and consumer fields. Map the world in 3D and explore immersive worlds by walking through them.

Page 24: Black Book_WEB

BLACK BOOK: DESIGN VOL. I 49BLACK BOOK: DESIGN VOL. I48

CLOUDWhat Cloud First design really means for your user is an expectation of secure, ubiquitous access to their content, data and services everywhere and anywhere. When we couple the identity management features of Windows 8 with each users OneDrive account, we enable scenarios where data seamlessly follows the user across devices and touch points in their digital life.

How can your application be enhanced by designing for this emerging Cloud First, Mobile First world? How can your application benefit from an integrated OneDrive experience so your application can synchronize your user’s content across devices and instances?

How can you application be enhanced by leveraging cloud based, shared resources across your users as well? What about enhancements to your mobile experiences by pushing off higher services up to cloud by leveraging Azure mobile services or Bing APIs?

The Cloud has revolutionized the technology landscape. What can it do for your app as well?

Page 25: Black Book_WEB

BLACK BOOK: DESIGN VOL. I 51BLACK BOOK: DESIGN VOL. I50

AND BEYOND...When we combine the Natural User Interface paradigms coming out on Windows, such as Pen, Voice, Vision and Touch inputs, with cloud based computation and synchronization through Azure, Bing, OneNote and OneDrive, we see a significant opportunity for early adopters to redefine the way people interact with software.

From Kinect based applications that allow the hearing impaired to translate Chinese sign language into Text To Speech output in a myriad of languages, to future visions of young students exploring their world in more organic, natural, and collaborative modalities, our broad developer ecosystem of cloud based services and devices is the infrastructure for this coming future.

Leveraging these emerging opportunities in your own app can be a powerful differentiator and enable your own users to find success in the activities they value most.

Page 26: Black Book_WEB

Ken UrquhartSENIOR DIRECTOR, QED

Partners with you to deliver quality app experiences and design innovation.

Charles TorreLEAD, QUALITY ENGINEERING

Collaborates with you to drive quality into your app development process.

Drives high-quality app experiences for you in partnership with design agencies.

Eric HavirLEAD, DESIGN STRATEGY

Engages with you to discover and deliver compelling app experiences.

Sally SolaroLEAD, DESIGN STRATEGY

Delivers delightful app experiences to your customers.

Jeeyoung JungINTERACTION DESIGNER

Rick BarrazaLEAD, DESIGN STRATEGY

Delivers the magic of cutting-edge design to your most demanding customers.

Engages with you to select the best quality plan for your app.

Joyce KimDESIGN STRATEGIST

Collaborates with you directly to deliver higher quality app experiences.

Rich LaryQUALITY ENGINEER

Works with you to evaluate, review and enhance the quality and usability of app frameworks and APIs.

Oni ObiQUALITY ENGINEER

“The highest quality apps deliver magical experiences when people-first design meets the right technologies.

– Ken Urquhart“

Meet the QED TEAM

GET IN TOUCH!Please send questions, feedback, and requests to:

[email protected]

Page 27: Black Book_WEB

Series Concept: Rick Barraza

Series Editors: Joyce Kim and Ken Urquhart

Series Designer: Jeeyoung Jung

© Microsoft 2014-2015. All rights reserved.