Open eBay Apps

© 2009-2010 eBay, Inc. | All rights reserved Page 1 of 17

Open eBay Apps

Third-Party Developer UI Standards

Version 6.2


Contents

Intent.............................................................................................................................. 3 Page elements........................................................................................................................ 4

eBay-controlled elements ...................................................................................................... 4 What you control .................................................................................................................. 5 Logo................................................................................................................................... 6 Canvas layout ...................................................................................................................... 6 Copyright information ........................................................................................................... 6

Footer ............................................................................................................................. 6 Navigation.............................................................................................................................. 7

Menus................................................................................................................................. 7 Cascading menus .............................................................................................................. 7 Drilldown menus ............................................................................................................... 8 Breadcrumbs .................................................................................................................... 8 Tabs................................................................................................................................ 9 Hyperlinks........................................................................................................................ 9

Formatting ............................................................................................................................. 9 Forms ................................................................................................................................. 9 Lists ................................................................................................................................. 10

Bulleted lists................................................................................................................... 10 Drop-down lists............................................................................................................... 11 Styled lists ..................................................................................................................... 11

Check boxes ...................................................................................................................... 11 Radio buttons .................................................................................................................... 11 Fonts ................................................................................................................................ 12

Font sizes ...................................................................................................................... 12 Font faces ...................................................................................................................... 12 Font styles ..................................................................................................................... 12

Content ................................................................................................................................ 13 Voice ................................................................................................................................ 13 Messaging ......................................................................................................................... 13

Error messages............................................................................................................... 13 Alert messages ............................................................................................................... 13 Notice messages ............................................................................................................. 14 Confirmation messages .................................................................................................... 14

Widgets................................................................................................................................ 14 Widget sizes ...................................................................................................................... 15 Widget elements ................................................................................................................ 16


Intent

This document outlines design guidelines and standards for 3rd party developers working on an application to run on eBay’s site. It includes a style guide, as well as some basic design best practices to help ensure that your application is consistent with eBay standards and easy to use.

This should not be construed as a final document and some items are subject to change.

Page elements This section explains the page elements and what guidelines you should follow when setting up your application.

eBay-controlled elements • eBay global header

• eBay breadcrumb navigation

• Page header and member information display

• eBay tab top bar

• Your logo, account name accompanying icons

• Help link that will contain your help content

• eBay global footer

• Rotating eBay or eBay partner advertisements that may appear at the top of the page.


What you control You control the Canvas – the highlighted area in the screenshot below.

The Canvas has a fixed width of 944 pixels. We recommend that you design your application to fit exactly within the space, not more, not less.

Applications with less than 944 pixels will leave white space around in the Canvas; applications larger than 944 pixels will have a horizontal scroll in page. The canvas does not have a fixed height. You can specify a custom height for your application - but we recommend that you fit your height within 1200 pixels, to make the page easy to scan.

When you are creating your Canvas, make sure to avoid double scroll bars. If you go larger than 944 pixels, you will get a horizontal scroll bar. The scroll bar will cut into the height of the Canvas, which then causes a vertical scroll bar to appear.

To avoid double scroll bars, adjust your CSS so that the elements do not cause scrolling. Or you might want to add overflow-x: hidden and overflow-y: hidden to the body element of your stylesheet.


http://www.brunildo.org/test/Overflowxy2.html

Logo eBay displays your logo (270 pixels x 35 pixels) at the top of the Canvas, so it is visible at all times when a user is in your application. We recommend that you not duplicate it anywhere else on the canvas as it could:

• clutter the limited screen real estate you have

• decrease the performance of your application due to the image file size

Canvas layout Organize your information in the Canvas using columns.

• Limit the number of columns to up to three (left, center and right) fewer columns communicate information clearly.

• Use panels within the columns to separate information. Use background colors to differentiate panels containing more important information from panels with less important information.

• Display the main information in the center column. Avoid using a background color - placing content on white space creates an easier user experience.

Organize information using columns

Copyright information Footer

eBay requires that you create a horizontal footer to complete the Canvas layout. In the footer, you want to link to your company's:

• terms of use (terms and conditions)

• privacy policy

• copyright information

Make sure the links open in new windows to keep your users on the application even when they are reading your company information.

Choose a font size to be smaller than the font size you’re using in the rest of the Canvas. Keep the footer subtle, so that it doesn’t distract your users.

Clearly separate the main content from the footer. Give your footer a contrasting, dull, background color.


Make sure that the background color and design of your footer is different from eBay’s footer to clearly convey that we are two different companies.

Navigation Use navigation to help users understand the structure of your application.

Menus Use hierarchical menus for primary and secondary navigation. Menus make it easier for users to get to where they want to go.

Cascading menus

The Start Menu in Windows is an example of a cascading menu. Clicking Start gives the first window of a cascading menu. You move to Programs, and the second window of the cascade appears. Move from there to Accessories, and then Calculator. Here’s an example of how you can use a cascading menu in your application.


Drilldown menus

The drilldown menu allows users to navigate through a hierarchy and ultimately choose where they want to go. Keep it in a fixed area so that each time the user clicks a category, it changes to show only that category.

Make sure to show all levels at once. Each time the user clicks a category, expand the drilldown region to add a new list for each category.

Here’s an example of how you can use a drilldown menu in your application.

Interaction elements

• Don’t split the primary navigation into two parts. This will distribute your user’s attention between two areas and will make decision-making difficult.

• Secondary navigation should be distributed within the primary navigation. • Left-justify the menu so that the user’s eyes can move in a straight line to scan the information

easily. • Use contrasting colors for the Menu background and the text labels to keep it clear and

readable.

Content elements • Start each menu item with the one or two most information-carrying words. • Avoid using similar labels within the same Menu as it is harder to scan.

Breadcrumbs

Since eBay already displays a breadcrumb trail under the global header, we recommend that you don’t use them within the Canvas. Using the same type of navigation in two different areas of the page will confuse the users.


Tabs

Since eBay already displays Tab top navigation under the global header, we recommend that you don’t use them within the Canvas. Using the same type of navigation in two different areas of the page will confuse the users.

Hyperlinks

Use hyperlinks for primary (navigational) links, contextual (embedded in sentence or block of text) links and secondary (less important) links.

Visual elements

• Clearly differentiate hyperlinks from regular text using [HEX# 0000CC] font to help users recognize that it is a link to another page.

• Indicate hyperlinks that the user clicked with [HEX# 660066].

Content elements • Underline hyperlinks within a sentence or block of text to distinguish them from regular text.

Conventional blue, underlined styles with distinct ‘hover’, ‘active’ and ‘visited’ colors work well.

• Use clear labels to indicate what clicking a link will do. The target of a link must be obvious, that is, the link must tell your users what they will get, where they will go or what will happen when they click it. .

Formatting This section explains the formatting guidelines you should follow when setting up your application.

Forms Use forms for gathering information from your users. Here are some tips on how to keep your forms simple and easy to use.


Visual elements

• Forms should be laid out vertically and should not go over one page. • They can have a variety of different input methods such as text input, check boxes, radio

buttons, and drop-down lists. • Clearly indicate the required fields with a red asterisk sign [*] right before the label. If most

fields are required, then indicate the optional fields. If all fields are required, then no indication is necessary.

• Whenever possible, use field length as an affordance. Otherwise, consider a consistent length that provides enough room for inputs.


• Provide a “Submit” button at the end of the form to help user send the information to you.

Content elements

• Provide clear labels for each field – users should be able to make an association between the label and the text field.

• If your form is too long then divide it into groups and provide a descriptive header for each group. This will help your users scan information a very high level and will give them a sense of how information within the form is related.

Lists Bulleted lists

Use bulleted lists to list important information that should be called out explicitly to summarize or emphasize the things the user really needs to know. Visual elements:

• Distinguish items with numerals or alpha characters. • The appearance of a list should vary with the font and line length as well as the bullet style and

labeling.


Drop-down lists

Use drop-down lists when the number of choices is large or the available display space is highly limited.

Styled lists

Use styled lists to draw more attention to the drop-down list. The styling can include different hover states, color, and may contain icons for specific list options. Do not overuse the styled drop-down list as it will lessen the prominence of the control.

Check boxes Use check boxes when there is a list of options and the user may select none, one or several choices. Each check box is independent of all other check boxes in the list, so selecting one box doesn't uncheck the others.

Visual elements

• Check boxes should be a small square that has a checkmark or an X when selected. • Check boxes default to having none of the options selected. • Visually present groups of choices as groups, and clearly separate them from other groups. • Use subheads to break up a long list of check boxes into logical groups. This makes the choices

faster to scan and easier to understand. The risk is that users might view each subgroup as a separate set of options, but this is not necessarily a problem as each box is an independent choice anyway.

• Lay out your lists vertically with one choice per line.


• Check box settings should be changed by clicking either the box or anywhere within the label.

• Check boxes should normally be "False" (unchecked) by default.

• Check boxes in the indeterminate state have no effect unless their value is changed, in which case all of the associated objects are set to match the value of the Check Box, regardless of their current setting.

• Check boxes can be used to activate contingent controls.

Content elements

• Show clear labels so that the users know what will happen when they select the check box. It should also be clear enough to indicate what will happen if they leave it unchecked.

Radio buttons Use Radio buttons when the set of choices is small and stable, or when ease of selection is an important interaction criterion.

Visual elements

• A radio button should be a small circle that has a solid circle inside it when selected. • A list of radio buttons must always appear unified, so you cannot use sub-headers to break it

up.


• Always offer a default selection for radio button lists. By definition, radio buttons always have exactly one option selected, and you therefore shouldn't display them without a default selection.


• Click label or control to change value • Only one button in the group can be "TRUE" • Can be used to activate contingent controls

Content elements • Labels should clarify what will happen when a radio button is selected. It should also be clear

enough to indicate what will happen if one is not selected. • Because radio buttons require exactly one choice, make sure that the labels are both

comprehensive and clearly distinct.

Fonts Fonts play an important role while designing content. An apt choice of font can make your site more attractive and readable. You should be really careful before choosing a specific font and consider using two different fonts, one for content and one for headings.

Font sizes

• Fonts should strictly follow a size hierarchy. For example:

Header Sub-header

Text • The font size for the Canvas header should not be bigger than the eBay page header.

Font faces

• Choose font faces that are simple and easy to read, sans serif fonts are recommended, e.g. Arial.

• Avoid font faces with complex shapes, e.g. Fonts • Avoid using more then three font faces in a single page.

Font styles

• Do not use bold text for complete paragraphs. • Use bold text judiciously – preferably only when you want to call attention to something. • Don’t use all caps. This reduces users’ scanning speed by 10%. • Avoid italics. • Choose colors for good contrast against backgrounds, e.g. black font over a white background is

the easiest to read. • Avoid red font as it is highly saturated and difficult to read.


Content Voice

• Drive simplicity through content. Be clear, straight-forward and professional. • Avoid company jargon and resist sub-feature branding.

Messaging Communicate key messages to users in a consistent and noticeable area within the canvas.

Error messages

Use when:

• something bad happened as a result of user or system actions. • the user has to take an action to remedy the error and cannot continue. • the user cannot continue due to a system error (remedy should be offered if possible)

Example: Required field not completed by user. Display error messages at the top of the page and inline, where the error occurred.

Alert messages

Use when:

• something important or unexpected happened. • despite the condition, user can still continue without taking action. • when a user is about to take a drastic action.


Notice messages

Use when:

• there's something the user should know. • the user is prompted with information, notice or recommendation. • no action is required by user (could or should do something but does not have to)

- example: "You might want to try...

Confirmation messages

Use when:

• something good happened. • the user initiated action was successful - example: User registered for the site.

Widgets A widget is a mini-version of your application that can be displayed right on eBay’s site. By creating a widget, you can enhance your application’s usage by providing a smaller, less complicated interface.

Your widget can help sellers save time with convenient, at-a-glance personalized updates, considerably reducing their time and effort.


Widget sizes You can create your widget in two different sizes:

• One column (narrow view) with a maximum height of 410 pixels


• Two column (wide view) with a maximum height of 130 pixels

It is required that you create your widget in the narrow view, but the wide view is optional. We recommend that you create both sizes to give your users a choice on how they would like to view your widget.

When you make both sizes available to your users, we would display the links "Narrow view” and “Wide view” in the Edit drop-down menu.

Widget elements Your widget should include the following elements:

• Header or Logo Your widget must contain your application’s name or logo as header. If you’re using a logo as the Widget header, then please make sure it doesn’t exceed 185 pixels in width and 30 pixels in height.

• An Edit link By default, your widget will contain an Edit link at the top right corner. The link will open a drop-down menu with a set of links.

The Customize link will help your users narrow down on the type of information they want to view, if you make it available for your widget. For example, if your application helps upload tracking information and displays real-time shipment status, then they should be able to choose if they want to view tracking information on “items delivered,” “items undelivered’ or “items in transit,” or the status of all shipped items.


The menu can also display links to application details, help content and support information, if your application contains such information.

• A Start link

By default, your widget will contain a Start link at the bottom right corner. The link will refresh the page with the application.


Documents

Open eBay Apps