bing product guidelines np

8/9/2019 Bing Product Guidelines NP

1/20

Bing product guidelines 1.0

FINAL


2/20

Bing product guidelinesThis document provides visual guidelines and recommendations to implement the branding for Bing for thirdparties. These guidelines can help echo the Bing product brand experience into your environment.

In This Document

Bing branding guidelinesProvides guidelines for using Bing brand elements

Bing searchbox guidelinesProvides guidelines for implementing a Bing searchbox

Bing searchbox guidelines for third party (web)

Provides options for third party websites for implementing a Bing searchbox

Font guidelines for UIProvides UI guidelines for using Bing brand fonts

Visual elements for Bing search UIProduct colors and elements for Bing search UI

Editorial style

Provides recommendations to give you a headstart in communicating clearly and effectively

Approach to UI error messages

Best practices for error messages

Overview of China Transliterated Logo

How to apply the chinese transliteration logo for third partyThe guidelines are speci c to China only.

China Transliterated Logo searchbox guidelines for third party (web)How to apply the chinese transliteration logo searchbox for third partyThe guidelines are speci c to China only.


3/20

Bing branding guidelinesThis topic provides guidelines for using Bing brand elements for third party API. Branding is the emotionalpositioning of a product as perceived by its customers. Product branding is achieved through a combinationof factors. This includes the product name and logo, use of color, text, graphics, and sound, the style of vaother design elements, marketing, and most important, the attributes of the product experience itself.

Brand Signature OverviewA brand signature is a branding element that communicates brand identity and consists of elements such asthe brand trademarked symbol, the brand name, or the brand logotype.

There are two kinds of Bing brand signatures:

1. Bing text with trademark

2. Bing logo - full color or reverse

Bing brand signatures can be used in the user interface.

Note* The Bing brand signature must be used when showing the Bing searchbox.

Logo usage guidelines

Use the provided logo artwork les without alteration. Any use that falls outside what is outlined herein isstrictly prohibited.

Preferred logo versions

The full-color and reverse full-color versions of the Bing logo are

the only two versions that contain the orange dot. For that

reason, they are the preferred versions of the logo and should be

used whenever possible.

Reverse full-color versions of the Bing logo (with Bing in whiteand the dot over the letter i in orange) have been provided for

use on dark backgrounds.

Refer to the supplemental Bing Partners Guideline At a Glance

for full details, or go tohttps://brandtools.

full color

reverse


4/20

Brand the user interface with the Bing searchboxThe Bing brand signature is required to appear on the same UI screen as the Bing searchbox.

One of the following Bing brand signatures must be used:



Bing logo with searchboxWhen used with the Bing searchbox, the Bing brand signature should be easy to see and easy to read.


5/20

Brand the Input to Submit Search Requests by CategoryThe Bing brand signature must appear on the same UI screen that is used for submitting category queries.

One of the Bing brand signatures must be used on this UI screen:

There are two kinds of Bing brand signatures:



When a Bing brand signature is used with mapsor photography, the brand signature shouldreside in an empty screen area apart from otherUI items or areas of the photograph that drawvisual focus away from the brand signature.

Do not put the Bing brand signature in a loca-tion on the screen where it competes with thefocus of another image, and do not put it in a

visually-busy, distracting screen area.

Put the Bing brand signature in a location on the screen where ithas enough spacing apart from other UI elements, and so that itappears uniform and balanced, and does not appear cluttered oron a visually-busy, distracting background.

* Some examples do not re ect nal product release.Images shown are for illustration purposes only.

small portable device

homepage

maps


6/20

Bing Text Brand Signature GuidelinesThe Bing text brand signature includes the brand text that readsBing (with trademark).

Bing Text Trademark UsageIn some instances, it may be more appropriate to have a text-only mention of either Bing or a speci c Binservice. In that case, on the rst mention of a trademarked name in body copy, the trademark symbol ()

should be used, e.g., Bing.In-depth information regarding use of Microsoft trademarks may be found at the General Microsoft Trade-mark. Guidelines at http://www.microsoft.com/about/legal/trademarks/usage/general.mspx.

For small applications, adjust the size of the trademark symbol so that it is legible but not disproportionatelylarge. For large applications, use your judgment so that the trademark symbol doesnt appear disproportion-ately large. When using the reversed logo in small applications, the trademark symbol can be adjusted butshould be no smaller than 5 points.

Refer to the supplemental Bing Partner Guidelines for details on trademark usage.

Bing Text Elements References to the Bing name in text must always have an uppercase B.

Never abbreviate Bing. For example, do not use BG, B Search, and so on.

Never use Microsoft in the possessive form, such as Microsofts Bing features are excellent. Instead, usecompany name as an adjective. For example, you can say Microsoft Bing features are excellent.

Refer to the supplemental Bing Partner Guidelines for details on copy/text guidelines.

Bing Logo Orientation

The Bing brand signature should never vary in orientation fromhow it appears in the artwork provided in the product. Always posi-tion the Bing logo at a 0 degrees horizontal angle. Never tilt it orposition it at an angle that is not perpendicular.

Refer to the supplemental Bing Partner Guidelines for details onthe DOs & DONT when incorporating the Bing logo.

Bing Logo Minimum SizeThe graphic below shows the Bing logo at its smallest acceptablesize. The logo (excluding the trademark symbol) should never be

less than .625 in print or 45 pixels online.

.625 or 45 px wide


7/20

Logos for dark backgroundsUse the reverse full-color versions of the Bing logo (with the Bing letterforms in white and the dot overletter i in Bing orange) on dark backgrounds.Because it would lack suf cient contrast with the dot over the letter i, the full-color version of the Bingshould never be placed against an orange background. Never use the single color black Bing logo over theorange. If the Bing logo must appear on an orange background, use the single color reverse white version o

Remember that the Bing logo should: Never appear connected to, or as part of, any other symbol or icon.

Never be contained in a box, circle, or other shape.

Never be modi ed in any way. Do not recombine the artwork elements together with other logos orgraphics to create new artwork. Use the artwork as it is provided from the Bing branding team.

The Bing logo brand signature should also not be used by third parties without obtaining written permissionfrom Microsoft, and obtaining approval from the Legal and Corporate Affairs (LCA) department. For more inmation, see this Microsoft Web site.

Clear spaceA minimum clearance must be maintained around the logo and other graphics and visual elements. The clearspace (x) around the logo is equal to the height of the lowercase letter n in the word Bing.

games


8/20

Bing searchbox guidelinesAs the gateway to the Bing search experience, the search box forms an integral part of the Bing brand. Thtext in the entry box may be the search for attribution text as depicted below, or it may be used to placsuggested keyword search text. When combining the text, the Bing orange spy glass icon, and the white ent

eld box, the searchbox becomes a powerful visual representation of the Bing search experience.

Bing searchbox details Font in the Bing searchbox is small/normal or 14pt Arial, Verdana, Helvetica,Sans-Serif

Color of text is #525051

Border around box is 1px solid #ACBABD for primary box. (alternate color #CCCCCC)

Bing searchbox clearspace (no scopes) Always allow for clearspace around the search box that is the equivalent to the height of the box.

NOTE*In order to avoid confusion, the Bing search box should never be used as a supporting graphic (nonworking search box) on a Web site.

Bing search box proportions: The entry eld box may be expanded horizontally, but its width should never be less than ten times its h

Bing search box minimum width


9/20

Third party Bing searchbox guidelinesThese guidelines are speci c to our syndicated search box. The design of the box varies slightly on ourhome page in size only. Our syndication guidelines are intended to accommodate partner web sites andimplementations.

Bing search button color and sizeThe search button in Bing is a gradient orange. The image will be provided by the search team.

Searchbutton is 22x22 442b

Min height: 28 px includes border

SizeThe research done in search on box size indicates that the best relevant results are obtained when a user enters 2-3 words. The optimal box size for 2-3 words is 35 ws.

Text box should be wide enough to accommodate 35 ws


10/20

Third party searchbox examples


11/20

Using the results by Bing AttributionThe logos here are only to be used for display on Search Engine Results Pages when attribution is needed.The phrase preceding the brand is results by and it is localized as well as localizable.

When the text + logo version is used in amarket that requires results by text to belocalized, system text can be used.

Partners can localize the text our use thelocalized strings provided in the appendixbelow.

The font for results by is verdana, 11px

The color is #555 or white, depending onsite background

There are 6 px of space between the textand the logo.

Linking behaviorThe attribution graphic should be hyper-linked to http://bing.com.

The alt text for the graphic should be searchby Bing or powered by Bing


12/20

Font guidelines for UIThis topic provides user-interface (UI) guidelines for using Bing brand fonts.

The following picture shows the options for fonts for using Bing on a portable device.

The Segoe UI and Arial font family in Light, or Bold in Black is the preferred font to use in online commtions. Verdana or Helvetica in Regular, Regular, or Bold in the color Black is the second choice.

When possible, avoid using italic fonts to ensure clarity and readability in the UI.


13/20

Visual elements for Bing search UIWhen you create online use a color scheme that is consistent with the color palette for the Bing product.These colors are an important visual factor of the product UI. The colors that comprise the color paletteare as follows:

Buttons for Bing search UIThere are three avors of buttons to choose from depending on the context of the UI. You must use a coloscheme that is consistent with behavior for the Bing brand. These colors are an important visual factor of thproduct branding.

Orange button can only be used once on a screen as the color is a hightlight for the single main

call to action.

General button can be used multiple times on a screen to support the single call to action button.


14/20

Search results guidelinesThis topic provides UI guidelines for displaying Bing search results by a third party.

No Modi cation of Search Results

Search results can be accessed from Bing through the API. Cannot change, re-order, or remove any portion of the search results from the Bing search engine.

Cannot copy, store, archive, or create a database of the content available through the Bing

search engine.


15/20


16/20

Approach to UI error messagesOften the best error message is no error message. Many errors can be avoided through better design, andthere are often better alternatives to error messages. Its usually better to prevent an error than to report oneThe most obvious error messages to avoid are those that arent actionable. If users are likely to dismiss themessage without doing or changing anything, omit the error message.

Follow prescribed best practices for error messages

Good error messages have:

A problem. States that a problem occurred.

A cause. Explains why the problem occurred.

A solution. Provides a solution so that users can x the problem.

Additionally, good error messages are presented in a way that is: Relevant. The message presents a problem that users care about.

Actionable. Users should either perform an action or change their behavior as the result of the

message.

User-centered. The message describes the problem in terms of target user actions or goals,

not in terms of what the code is unhappy with.

Brief. The message is as short as possible, but no shorter.

Clear. The message uses plain language so that the target users can easily understand problem

and solution.

Speci c. The message describes the problem using speci c language, giving speci c names,

locations, and values of the objects involved.

Courteous. Users shouldnt be blamed or made to feel stupid.

Rare. Displayed infrequently. Frequently displayed error messages are a sign of bad design.


17/20

Overview of China transliterated logoThese apply to branding of search and syndication of our searchbox to other Microsoft web sites such as Mcom. Our search brand in China, Bing. The Chinese character is pronounced bee-ying and itsmeaning is derived from the last two characters of a Chinese proverb , which means ask and youshall nd.

The guidelines below are speci c to China only. We selected a Chinese character to pair up with Bing,thatwould enable us to effectively shape the meaning of the brand, ensure appropriate pronunciation and meetthe unique dynamics in China. This transliteration strategy is a rst for Microsoft to closely align and re ecpositive Chinese association and phonetics into the brand.

The direct translation for Bi-ying is certain to respond or ready to answer. This translation aligns well wiour product vision and will enable us deliver a unique search offering in China.

The Bing logo was created to express the Bing brand personality in a number of ways. The open letterformare friendly and approachable, with a sophisticated simplicity. The essence of the Bing brand personality: ap-proachable, thoughtful, illuminating, and rewarding, is embodied in the orange, elliptical dot over the letteri. The orange dot highlights the Bing moment of decision and supports Bing positioning as the decisionengine. Even though blue is the dominant color in the Bing logo, orange is the highlight or focus color ofBing visual identity system.

All Bing materials must include the logo.

The Bing logo lock-up is comprised of two parts: the Bing brand logotype and the Chinese transliteratioThey have been combined together to create one piece of artwork. Please always use the artwork provided.The transliteration must never be used by itself.

Remember that the Bing brand signature should:

Only be used for marketing Bing products, features, and programs.

Never be modi ed in any way. Do not separate the Chinese transliteration characters from the Binglogotype, or recombine the artwork elements with other logos or graphics to create new artwork. Us

the artwork as it is provided on Media Bank. Never appear connected to, or as part of, any other type, symbol or icon.

The trademark symbol should always accompany the Bing logotype.

Never use the logo contained in a box, circle or other shape.

Never rotate the logo.

The logo is not be used by third parties without gaining written permission from Microsoft andapproval from the Legal and Corporate Affairs (LCA) department. For more information, see http://www.microsoft.com/mscorp/ip/trademarks/logo/programs.mspx.

Refer to the supplemental Bing Partner Guidelines China Logo for logo usage.


18/20

China transliterated logoThird party Bing searchbox guidelinesThese guidelines are speci c to our syndicated search box. The design of the box varies slightly on ourhome page in size only. Our syndication guidelines are intended to accommodate partner web sites andimplementations.

Bing search button color and sizeThe search button in Bing is a gradient orange. The image will be provided by the search team.

Searchbutton is 22x22 442b

Min height: 28 px includes border

SizeThe research done in search on box size indicates that the best relevant results are obtained when a user enters 2-3 words. The optimal box size for 2-3 words is 35 ws.

Text box should be wide enough to accommodate 35 ws


19/20

China third party searchbox examples


20/20

Using the results by Bing AttributionThe logos here are only to be used for display on Search Engine Results Pages when attribution is needed.The phrase preceding the brand is results by and it is localized as well as localizable.

Linking behaviorThe attribution graphic should be hyperlinkedto http://bing.com.

The alt text for the graphic should be searchby Bing or powered by Bing

When the text + logo version is used in amarket that requires results by text to belocalized, system text can be used.

The font for results by for China is

MS Gothic or SimSun, 13px

The color is #555 or white, depending onsite background

There are 6 px of space between the textand the logo.

bing product guidelines np

Documents