SlideShare une entreprise Scribd logo
1  sur  27
Télécharger pour lire hors ligne
CONTENTS
The Changing Face of Design1
Opportunities
3 Features and Considerations
5
Axis of Delight2
Opportunities
4
Meet the Team7
Certification6
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.
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
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
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
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
UTILITIES
Transactional
Content over Chrome
Expected Metaphors
Transparent Interface
IMMERSIVE
Immersive
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
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
BLACK BOOK: DESIGN VOL. I 15BLACK BOOK: DESIGN VOL. I14
3. FEATURES AND CONSIDERATIONS
APP TILES / SPLASH SCREEN / WINDOWING / NAVIGATION /
SEARCH / SHARE
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?
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
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
Secondary
Tile
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.8
620x300
BLACK BOOK: DESIGN VOL. I 23BLACK BOOK: DESIGN VOL. I22
Extended Splash Screen Extended Splash Screen
Extended Splash Screen
The 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.
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.
•
•
•
•
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
857
Common 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
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.
•
•
•
•
BLACK BOOK: DESIGN VOL. I 31BLACK BOOK: DESIGN VOL. I30
NAVIGATION
aka.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
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
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.
BLACK BOOK: DESIGN VOL. I 37BLACK BOOK: DESIGN VOL. I36
SEARCH
aka.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.
Microsoft
Mahjong
TripAdvisor
Free 299
Travel
Allrecipes
Free 1,296
Food & Dining
The Weather Channel
Free 5,035
News & Weather
Mint
Free 3,524
Finance
Hulu Plus
Free 9,928
Entertainment
500px
Free 440
Photo
Getting Started Better Together
Collections See all
OEM picks See all
Adobe Photoshop
Express
Free
5,540
Photo
OpenTable
Free
511
Food & Dining
LINE
Free
13,155
Social
Expedia
Free
342
Travel
Songza
Free
1,601
Music & VIdeo
Urbanspoon
Free
586
Food & Dining
Featured See all
Weather Music Lovers
Store
Halo: Spartan Assault
Join the battle against Covenant forces
Installed 2,617
Home Top charts Categories Collections Account Search for apps
Examples of Search
Skype
Windows Store
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.
BLACK BOOK: DESIGN VOL. I 41BLACK BOOK: DESIGN VOL. I40
4. OPPORTUNITIES
VOICE / PEN / VISION / CLOUD / AND BEYOND...
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
BLACK BOOK: DESIGN VOL. I 45BLACK BOOK: DESIGN VOL. I44
PEN
In 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.
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.
BLACK BOOK: DESIGN VOL. I 49BLACK BOOK: DESIGN VOL. I48
CLOUD
What 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?
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.
Ken Urquhart
SENIOR DIRECTOR, QED
Partners with you to deliver quality app
experiences and design innovation.
Charles Torre
LEAD, 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 Havir
LEAD, DESIGN STRATEGY
Engages with you to discover and deliver
compelling app experiences.
Sally Solaro
LEAD, DESIGN STRATEGY
Delivers delightful app experiences to your
customers.
Jeeyoung Jung
INTERACTION DESIGNER
Rick Barraza
LEAD, 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 Kim
DESIGN STRATEGIST
Collaborates with you directly to deliver
higher quality app experiences.
Rich Lary
QUALITY ENGINEER
Works with you to evaluate, review and
enhance the quality and usability of app
frameworks and APIs.
Oni Obi
QUALITY 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:
askQED@microsoft.com
Series Concept: Rick Barraza
Series Editors: Joyce Kim and Ken Urquhart
Series Designer: Jeeyoung Jung
© Microsoft 2014-2015. All rights reserved.

Contenu connexe

Tendances

Academy PRO: UI\UX. Introduction.
Academy PRO: UI\UX. Introduction.Academy PRO: UI\UX. Introduction.
Academy PRO: UI\UX. Introduction.Binary Studio
 
Haxz 10 pitch presentation
Haxz 10 pitch presentationHaxz 10 pitch presentation
Haxz 10 pitch presentationXinyaoXu
 
IxD & UX Design - Personifying Digital Interactions
IxD & UX Design - Personifying Digital InteractionsIxD & UX Design - Personifying Digital Interactions
IxD & UX Design - Personifying Digital InteractionsJayan Narayanan
 
Designing Brand Identity: What's a Brand?
Designing Brand Identity: What's a Brand?Designing Brand Identity: What's a Brand?
Designing Brand Identity: What's a Brand?Yazan Al Tamimi
 
IDEA TO IDENTITY: THE DESIGN OF BRAND
IDEA TO IDENTITY:  THE DESIGN OF BRANDIDEA TO IDENTITY:  THE DESIGN OF BRAND
IDEA TO IDENTITY: THE DESIGN OF BRANDSudio Sudarsan
 
Building A Better AIESEC Brand Experience
Building A Better AIESEC Brand ExperienceBuilding A Better AIESEC Brand Experience
Building A Better AIESEC Brand ExperienceKarina Ananta
 
Web design - What's Trending in 2021 - Mantran
Web design - What's Trending in 2021 - MantranWeb design - What's Trending in 2021 - Mantran
Web design - What's Trending in 2021 - MantranMantran
 
Top ui ux design trends for mobile apps 2021
Top ui ux design trends for mobile apps 2021Top ui ux design trends for mobile apps 2021
Top ui ux design trends for mobile apps 2021sravanthisravanthi6
 
32 Enviable Inbound Marketing Examples by HubSpot
32 Enviable Inbound Marketing Examples by HubSpot32 Enviable Inbound Marketing Examples by HubSpot
32 Enviable Inbound Marketing Examples by HubSpotNguyễn Hùng
 
Understanding The Importance Of Responsive Design For Your Websites
Understanding The Importance Of Responsive Design For Your WebsitesUnderstanding The Importance Of Responsive Design For Your Websites
Understanding The Importance Of Responsive Design For Your WebsitesUma_sri
 
UI Design Trends for 2017
UI Design Trends for 2017UI Design Trends for 2017
UI Design Trends for 2017Idean France
 
Lillian Tong_The UX Factor_Voyeur
Lillian Tong_The UX Factor_VoyeurLillian Tong_The UX Factor_Voyeur
Lillian Tong_The UX Factor_VoyeurLillian Tong
 
The Importance of UI/UX Design in Mobile App Development
The Importance of UI/UX Design in Mobile App DevelopmentThe Importance of UI/UX Design in Mobile App Development
The Importance of UI/UX Design in Mobile App DevelopmentDivyaConsagous
 
Introduction to Augmented Reality - Please Share !
 Introduction to Augmented Reality  - Please Share !  Introduction to Augmented Reality  - Please Share !
Introduction to Augmented Reality - Please Share ! Navjeet Chhina
 
Top Website Designing Trends To Look For In 2021
Top Website Designing Trends To Look For In 2021Top Website Designing Trends To Look For In 2021
Top Website Designing Trends To Look For In 2021WebConnect Pvt Ltd
 
What’s the difference between a UX and UI designer? (Part two)
What’s the difference between a UX and UI designer? (Part two)What’s the difference between a UX and UI designer? (Part two)
What’s the difference between a UX and UI designer? (Part two)iFactory Digital
 
Snap: 10 creative business designs and what you can learn from them
Snap: 10 creative business designs and what you can learn from themSnap: 10 creative business designs and what you can learn from them
Snap: 10 creative business designs and what you can learn from themSnap
 
NDC Sydney 2018 | Bots - the Next UI Revolution | Adam Stephensen
NDC Sydney 2018 | Bots - the Next UI Revolution | Adam StephensenNDC Sydney 2018 | Bots - the Next UI Revolution | Adam Stephensen
NDC Sydney 2018 | Bots - the Next UI Revolution | Adam StephensenAdam Stephensen
 
THE FUTURE OF BRAND, TECH & BUSINESS IS EXPERIENCE
THE FUTURE OF BRAND, TECH & BUSINESS IS EXPERIENCETHE FUTURE OF BRAND, TECH & BUSINESS IS EXPERIENCE
THE FUTURE OF BRAND, TECH & BUSINESS IS EXPERIENCEsinnerschrader
 

Tendances (20)

Academy PRO: UI\UX. Introduction.
Academy PRO: UI\UX. Introduction.Academy PRO: UI\UX. Introduction.
Academy PRO: UI\UX. Introduction.
 
Haxz 10 pitch presentation
Haxz 10 pitch presentationHaxz 10 pitch presentation
Haxz 10 pitch presentation
 
IxD & UX Design - Personifying Digital Interactions
IxD & UX Design - Personifying Digital InteractionsIxD & UX Design - Personifying Digital Interactions
IxD & UX Design - Personifying Digital Interactions
 
Designing Brand Identity: What's a Brand?
Designing Brand Identity: What's a Brand?Designing Brand Identity: What's a Brand?
Designing Brand Identity: What's a Brand?
 
IDEA TO IDENTITY: THE DESIGN OF BRAND
IDEA TO IDENTITY:  THE DESIGN OF BRANDIDEA TO IDENTITY:  THE DESIGN OF BRAND
IDEA TO IDENTITY: THE DESIGN OF BRAND
 
Building A Better AIESEC Brand Experience
Building A Better AIESEC Brand ExperienceBuilding A Better AIESEC Brand Experience
Building A Better AIESEC Brand Experience
 
Web design - What's Trending in 2021 - Mantran
Web design - What's Trending in 2021 - MantranWeb design - What's Trending in 2021 - Mantran
Web design - What's Trending in 2021 - Mantran
 
Top ui ux design trends for mobile apps 2021
Top ui ux design trends for mobile apps 2021Top ui ux design trends for mobile apps 2021
Top ui ux design trends for mobile apps 2021
 
32 Enviable Inbound Marketing Examples by HubSpot
32 Enviable Inbound Marketing Examples by HubSpot32 Enviable Inbound Marketing Examples by HubSpot
32 Enviable Inbound Marketing Examples by HubSpot
 
Understanding The Importance Of Responsive Design For Your Websites
Understanding The Importance Of Responsive Design For Your WebsitesUnderstanding The Importance Of Responsive Design For Your Websites
Understanding The Importance Of Responsive Design For Your Websites
 
UI Design Trends for 2017
UI Design Trends for 2017UI Design Trends for 2017
UI Design Trends for 2017
 
Lillian Tong_The UX Factor_Voyeur
Lillian Tong_The UX Factor_VoyeurLillian Tong_The UX Factor_Voyeur
Lillian Tong_The UX Factor_Voyeur
 
The Importance of UI/UX Design in Mobile App Development
The Importance of UI/UX Design in Mobile App DevelopmentThe Importance of UI/UX Design in Mobile App Development
The Importance of UI/UX Design in Mobile App Development
 
Introduction to Augmented Reality - Please Share !
 Introduction to Augmented Reality  - Please Share !  Introduction to Augmented Reality  - Please Share !
Introduction to Augmented Reality - Please Share !
 
Branding and its importance
Branding and its importanceBranding and its importance
Branding and its importance
 
Top Website Designing Trends To Look For In 2021
Top Website Designing Trends To Look For In 2021Top Website Designing Trends To Look For In 2021
Top Website Designing Trends To Look For In 2021
 
What’s the difference between a UX and UI designer? (Part two)
What’s the difference between a UX and UI designer? (Part two)What’s the difference between a UX and UI designer? (Part two)
What’s the difference between a UX and UI designer? (Part two)
 
Snap: 10 creative business designs and what you can learn from them
Snap: 10 creative business designs and what you can learn from themSnap: 10 creative business designs and what you can learn from them
Snap: 10 creative business designs and what you can learn from them
 
NDC Sydney 2018 | Bots - the Next UI Revolution | Adam Stephensen
NDC Sydney 2018 | Bots - the Next UI Revolution | Adam StephensenNDC Sydney 2018 | Bots - the Next UI Revolution | Adam Stephensen
NDC Sydney 2018 | Bots - the Next UI Revolution | Adam Stephensen
 
THE FUTURE OF BRAND, TECH & BUSINESS IS EXPERIENCE
THE FUTURE OF BRAND, TECH & BUSINESS IS EXPERIENCETHE FUTURE OF BRAND, TECH & BUSINESS IS EXPERIENCE
THE FUTURE OF BRAND, TECH & BUSINESS IS EXPERIENCE
 

En vedette

Blue Button Mashup Challenge Get Real Consulting Slide Deck
Blue Button Mashup Challenge Get Real Consulting Slide DeckBlue Button Mashup Challenge Get Real Consulting Slide Deck
Blue Button Mashup Challenge Get Real Consulting Slide Deckhealth2dev
 
Simón el bobito, por Diego Piedrahíta
Simón el bobito, por Diego PiedrahítaSimón el bobito, por Diego Piedrahíta
Simón el bobito, por Diego PiedrahítaDiegoPiedra8
 
Launch of Vietnamese Edition of DigiMarketing: The Esential Guide to New Medi...
Launch of Vietnamese Edition of DigiMarketing: The Esential Guide to New Medi...Launch of Vietnamese Edition of DigiMarketing: The Esential Guide to New Medi...
Launch of Vietnamese Edition of DigiMarketing: The Esential Guide to New Medi...Ian Fenwick, Digital Marketing
 
Manual instruções porta bebes front ingleysina
Manual instruções porta bebes front ingleysinaManual instruções porta bebes front ingleysina
Manual instruções porta bebes front ingleysinaViver Qualidade
 
Sinead Reen - Breaking the Mould
Sinead Reen - Breaking the MouldSinead Reen - Breaking the Mould
Sinead Reen - Breaking the MouldRealsmartmedia
 
Diario Resumen 20150320
Diario Resumen 20150320Diario Resumen 20150320
Diario Resumen 20150320Diario Resumen
 
El futuro de la profesión de embriólogo
El futuro de la profesión de embriólogoEl futuro de la profesión de embriólogo
El futuro de la profesión de embriólogoCarlos Bezos Daleske
 
Modalidades de turismo rural en el eje cafetero
Modalidades de turismo rural en el eje cafeteroModalidades de turismo rural en el eje cafetero
Modalidades de turismo rural en el eje cafeterohelbus20
 
Etssldsh
EtssldshEtssldsh
Etssldshlausan
 
ORACIONES
ORACIONESORACIONES
ORACIONESi_lobmy
 
Copywriting + Keyword research per l'editoria e blog #WUD16
Copywriting + Keyword research per l'editoria e blog #WUD16 Copywriting + Keyword research per l'editoria e blog #WUD16
Copywriting + Keyword research per l'editoria e blog #WUD16 Ivano Di Biasi
 

En vedette (20)

Rubik Introduction Feb2010
Rubik Introduction Feb2010Rubik Introduction Feb2010
Rubik Introduction Feb2010
 
Blue Button Mashup Challenge Get Real Consulting Slide Deck
Blue Button Mashup Challenge Get Real Consulting Slide DeckBlue Button Mashup Challenge Get Real Consulting Slide Deck
Blue Button Mashup Challenge Get Real Consulting Slide Deck
 
Factura de venta
Factura de ventaFactura de venta
Factura de venta
 
Simón el bobito, por Diego Piedrahíta
Simón el bobito, por Diego PiedrahítaSimón el bobito, por Diego Piedrahíta
Simón el bobito, por Diego Piedrahíta
 
Planificación Curricular
Planificación CurricularPlanificación Curricular
Planificación Curricular
 
LA JALVIA Edición 28 Diciembre 2014
LA JALVIA Edición 28 Diciembre 2014LA JALVIA Edición 28 Diciembre 2014
LA JALVIA Edición 28 Diciembre 2014
 
Launch of Vietnamese Edition of DigiMarketing: The Esential Guide to New Medi...
Launch of Vietnamese Edition of DigiMarketing: The Esential Guide to New Medi...Launch of Vietnamese Edition of DigiMarketing: The Esential Guide to New Medi...
Launch of Vietnamese Edition of DigiMarketing: The Esential Guide to New Medi...
 
Manual instruções porta bebes front ingleysina
Manual instruções porta bebes front ingleysinaManual instruções porta bebes front ingleysina
Manual instruções porta bebes front ingleysina
 
Sinead Reen - Breaking the Mould
Sinead Reen - Breaking the MouldSinead Reen - Breaking the Mould
Sinead Reen - Breaking the Mould
 
Diario Resumen 20150320
Diario Resumen 20150320Diario Resumen 20150320
Diario Resumen 20150320
 
Viaje a costa brava
Viaje a costa bravaViaje a costa brava
Viaje a costa brava
 
Cartilla buen inicio del año escolar 2014
Cartilla buen inicio del año escolar  2014Cartilla buen inicio del año escolar  2014
Cartilla buen inicio del año escolar 2014
 
DOFA.NUEVOS ENTORNOS DIGITALES
DOFA.NUEVOS ENTORNOS DIGITALESDOFA.NUEVOS ENTORNOS DIGITALES
DOFA.NUEVOS ENTORNOS DIGITALES
 
Max neef desarrollo a escala humana
Max neef desarrollo a escala humanaMax neef desarrollo a escala humana
Max neef desarrollo a escala humana
 
El futuro de la profesión de embriólogo
El futuro de la profesión de embriólogoEl futuro de la profesión de embriólogo
El futuro de la profesión de embriólogo
 
Mama, soy community manager
Mama, soy community managerMama, soy community manager
Mama, soy community manager
 
Modalidades de turismo rural en el eje cafetero
Modalidades de turismo rural en el eje cafeteroModalidades de turismo rural en el eje cafetero
Modalidades de turismo rural en el eje cafetero
 
Etssldsh
EtssldshEtssldsh
Etssldsh
 
ORACIONES
ORACIONESORACIONES
ORACIONES
 
Copywriting + Keyword research per l'editoria e blog #WUD16
Copywriting + Keyword research per l'editoria e blog #WUD16 Copywriting + Keyword research per l'editoria e blog #WUD16
Copywriting + Keyword research per l'editoria e blog #WUD16
 

Similaire à Black Book_WEB

Archana Belani_SAPTAIDC_portfolio_linked_141015
Archana Belani_SAPTAIDC_portfolio_linked_141015Archana Belani_SAPTAIDC_portfolio_linked_141015
Archana Belani_SAPTAIDC_portfolio_linked_141015Archana Belani
 
Creating Seamless User Experiences in Website Design
Creating Seamless User Experiences in Website DesignCreating Seamless User Experiences in Website Design
Creating Seamless User Experiences in Website DesignHub & Spoke
 
UI/UX Design Trends 2023 – You’ll Love It
UI/UX Design Trends 2023 – You’ll Love ItUI/UX Design Trends 2023 – You’ll Love It
UI/UX Design Trends 2023 – You’ll Love ItBMN Infotech
 
Are You A User Centred Designer?
Are You A User Centred Designer?Are You A User Centred Designer?
Are You A User Centred Designer?Johnson Goh
 
A smart guide to app development
A smart guide to app developmentA smart guide to app development
A smart guide to app developmentEmma Mitchell
 
App Development Smart Guide
App Development Smart GuideApp Development Smart Guide
App Development Smart GuideEmma Mitchell
 
interaction design trends 2015 _ 2016
interaction design trends 2015 _ 2016interaction design trends 2015 _ 2016
interaction design trends 2015 _ 2016Halil Eren Çelik
 
Impact of Visual Design on UX
Impact of Visual Design on UXImpact of Visual Design on UX
Impact of Visual Design on UXMayank Ranjan
 
SaptaIDC portfolio_010116
SaptaIDC portfolio_010116SaptaIDC portfolio_010116
SaptaIDC portfolio_010116Archana Belani
 
Article on User Experience 2004
Article on User Experience 2004Article on User Experience 2004
Article on User Experience 2004Different
 
UX Strategy - An Overview
UX Strategy - An OverviewUX Strategy - An Overview
UX Strategy - An OverviewSonal Malhotra
 
Coursera | Alphonso Morris - What’s Product Design vs UX vs UI? What is Growt...
Coursera | Alphonso Morris - What’s Product Design vs UX vs UI? What is Growt...Coursera | Alphonso Morris - What’s Product Design vs UX vs UI? What is Growt...
Coursera | Alphonso Morris - What’s Product Design vs UX vs UI? What is Growt...Fonz Morris
 
Creating a Destination
Creating a DestinationCreating a Destination
Creating a Destinationidfive_Ideas
 
Top User Experience Strategies For User-Centric Design
Top User Experience Strategies For User-Centric DesignTop User Experience Strategies For User-Centric Design
Top User Experience Strategies For User-Centric DesignOn Demand Clone
 
Mobile App design trends you must watch out in coming years
Mobile App design trends you must watch out in coming yearsMobile App design trends you must watch out in coming years
Mobile App design trends you must watch out in coming yearsAkhilesh Choudhary
 
Visualizing & Creating High-Performance Customer-Centric Design
Visualizing & Creating High-Performance Customer-Centric DesignVisualizing & Creating High-Performance Customer-Centric Design
Visualizing & Creating High-Performance Customer-Centric DesignChloë Bregman, CSPO
 
2017 ux and design predictions
2017 ux and design predictions2017 ux and design predictions
2017 ux and design predictionsCodal
 
Portfolio of Tiago Tomás
Portfolio of Tiago TomásPortfolio of Tiago Tomás
Portfolio of Tiago TomásTiago Tomás
 

Similaire à Black Book_WEB (20)

Engaging platforms
Engaging platformsEngaging platforms
Engaging platforms
 
Archana Belani_SAPTAIDC_portfolio_linked_141015
Archana Belani_SAPTAIDC_portfolio_linked_141015Archana Belani_SAPTAIDC_portfolio_linked_141015
Archana Belani_SAPTAIDC_portfolio_linked_141015
 
Creating Seamless User Experiences in Website Design
Creating Seamless User Experiences in Website DesignCreating Seamless User Experiences in Website Design
Creating Seamless User Experiences in Website Design
 
UI/UX Design Trends 2023 – You’ll Love It
UI/UX Design Trends 2023 – You’ll Love ItUI/UX Design Trends 2023 – You’ll Love It
UI/UX Design Trends 2023 – You’ll Love It
 
Are You A User Centred Designer?
Are You A User Centred Designer?Are You A User Centred Designer?
Are You A User Centred Designer?
 
A smart guide to app development
A smart guide to app developmentA smart guide to app development
A smart guide to app development
 
App Development Smart Guide
App Development Smart GuideApp Development Smart Guide
App Development Smart Guide
 
interaction design trends 2015 _ 2016
interaction design trends 2015 _ 2016interaction design trends 2015 _ 2016
interaction design trends 2015 _ 2016
 
Impact of Visual Design on UX
Impact of Visual Design on UXImpact of Visual Design on UX
Impact of Visual Design on UX
 
SaptaIDC portfolio_010116
SaptaIDC portfolio_010116SaptaIDC portfolio_010116
SaptaIDC portfolio_010116
 
Article on User Experience 2004
Article on User Experience 2004Article on User Experience 2004
Article on User Experience 2004
 
UX Publishing
UX PublishingUX Publishing
UX Publishing
 
UX Strategy - An Overview
UX Strategy - An OverviewUX Strategy - An Overview
UX Strategy - An Overview
 
Coursera | Alphonso Morris - What’s Product Design vs UX vs UI? What is Growt...
Coursera | Alphonso Morris - What’s Product Design vs UX vs UI? What is Growt...Coursera | Alphonso Morris - What’s Product Design vs UX vs UI? What is Growt...
Coursera | Alphonso Morris - What’s Product Design vs UX vs UI? What is Growt...
 
Creating a Destination
Creating a DestinationCreating a Destination
Creating a Destination
 
Top User Experience Strategies For User-Centric Design
Top User Experience Strategies For User-Centric DesignTop User Experience Strategies For User-Centric Design
Top User Experience Strategies For User-Centric Design
 
Mobile App design trends you must watch out in coming years
Mobile App design trends you must watch out in coming yearsMobile App design trends you must watch out in coming years
Mobile App design trends you must watch out in coming years
 
Visualizing & Creating High-Performance Customer-Centric Design
Visualizing & Creating High-Performance Customer-Centric DesignVisualizing & Creating High-Performance Customer-Centric Design
Visualizing & Creating High-Performance Customer-Centric Design
 
2017 ux and design predictions
2017 ux and design predictions2017 ux and design predictions
2017 ux and design predictions
 
Portfolio of Tiago Tomás
Portfolio of Tiago TomásPortfolio of Tiago Tomás
Portfolio of Tiago Tomás
 

Black Book_WEB

  • 1. CONTENTS The Changing Face of Design1 Opportunities 3 Features and Considerations 5 Axis of Delight2 Opportunities 4 Meet the Team7 Certification6 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.
  • 2. 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
  • 3. 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
  • 4. 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
  • 5. 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 UTILITIES Transactional Content over Chrome Expected Metaphors Transparent Interface IMMERSIVE Immersive 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
  • 6. 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
  • 7. BLACK BOOK: DESIGN VOL. I 15BLACK BOOK: DESIGN VOL. I14 3. FEATURES AND CONSIDERATIONS APP TILES / SPLASH SCREEN / WINDOWING / NAVIGATION / SEARCH / SHARE
  • 8. 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?
  • 9. 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
  • 10. 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 Secondary Tile 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.8 620x300
  • 11. BLACK BOOK: DESIGN VOL. I 23BLACK BOOK: DESIGN VOL. I22 Extended Splash Screen Extended Splash Screen Extended Splash Screen The 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.
  • 12. 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. • • • •
  • 13. 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 857 Common 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
  • 14. 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. • • • •
  • 15. BLACK BOOK: DESIGN VOL. I 31BLACK BOOK: DESIGN VOL. I30 NAVIGATION aka.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
  • 16. 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
  • 17. 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.
  • 18. BLACK BOOK: DESIGN VOL. I 37BLACK BOOK: DESIGN VOL. I36 SEARCH aka.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. Microsoft Mahjong TripAdvisor Free 299 Travel Allrecipes Free 1,296 Food & Dining The Weather Channel Free 5,035 News & Weather Mint Free 3,524 Finance Hulu Plus Free 9,928 Entertainment 500px Free 440 Photo Getting Started Better Together Collections See all OEM picks See all Adobe Photoshop Express Free 5,540 Photo OpenTable Free 511 Food & Dining LINE Free 13,155 Social Expedia Free 342 Travel Songza Free 1,601 Music & VIdeo Urbanspoon Free 586 Food & Dining Featured See all Weather Music Lovers Store Halo: Spartan Assault Join the battle against Covenant forces Installed 2,617 Home Top charts Categories Collections Account Search for apps Examples of Search Skype Windows Store
  • 19. 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.
  • 20. BLACK BOOK: DESIGN VOL. I 41BLACK BOOK: DESIGN VOL. I40 4. OPPORTUNITIES VOICE / PEN / VISION / CLOUD / AND BEYOND...
  • 21. 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
  • 22. BLACK BOOK: DESIGN VOL. I 45BLACK BOOK: DESIGN VOL. I44 PEN In 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.
  • 23. 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.
  • 24. BLACK BOOK: DESIGN VOL. I 49BLACK BOOK: DESIGN VOL. I48 CLOUD What 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?
  • 25. 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.
  • 26. Ken Urquhart SENIOR DIRECTOR, QED Partners with you to deliver quality app experiences and design innovation. Charles Torre LEAD, 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 Havir LEAD, DESIGN STRATEGY Engages with you to discover and deliver compelling app experiences. Sally Solaro LEAD, DESIGN STRATEGY Delivers delightful app experiences to your customers. Jeeyoung Jung INTERACTION DESIGNER Rick Barraza LEAD, 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 Kim DESIGN STRATEGIST Collaborates with you directly to deliver higher quality app experiences. Rich Lary QUALITY ENGINEER Works with you to evaluate, review and enhance the quality and usability of app frameworks and APIs. Oni Obi QUALITY 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: askQED@microsoft.com
  • 27. Series Concept: Rick Barraza Series Editors: Joyce Kim and Ken Urquhart Series Designer: Jeeyoung Jung © Microsoft 2014-2015. All rights reserved.