IEEE Web Presence Style Guide

Click the topic of interest below to review related styles and standards.

The importance of site standards

Visiting an IEEE Web site is often the first interaction a person has with the IEEE. This could be a conference site, a society site, or the IEEE main site at www.ieee.org, among others. It is important that this interaction is a positive one as it becomes a reflection on the organization hosting the site as well as on IEEE.

As an international standards developing organization, IEEE is compelled to present a Web presence that reflects adherence to a set of organizational guidelines as well as industry best practices. Additionally, the standards outlined in this guide should be followed for the following reasons.

• To leverage and maintain the reputation of the IEEE across the entire IEEE Web presence.
• To leverage and maintain the reputation of IEEE societies, the IEEE standards association, and other organizational units.
• To quickly orient visitors to where they are in the IEEE Web space.
• To create a cohesive user experience for visitors who may be traversing multiple IEEE sites.

 top of page

IEEE Webmaster and Web Manager Responsibilities

Every IEEE Webmaster or manager who creates or maintains a web site assumes personal responsibility for its accuracy, professionalism, and quality.

IEEE Webmasters and managers shall continuously assure that their respective web sites:

• Are consistent with the IEEE mission and are used strictly for IEEE related purposes;
• Uphold optimum user experience as the core criterion for design, content development and related site decisions;
• Comply with the guidelines established in this document and related IEEE policy;
• Follow ownership rights of intellectual property;
• Are developed and managed with a responsible use of resources;
• Protect confidential and copyrighted information and materials;
• Use licensed software;
• Do not link to sites that are not complementary to the IEEE mission;
• Are reviewed periodically to ensure the information contained in them is accurate and up to date.

Additionally, IEEE Webmasters and Web managers are required to announce any new Web sites by sending an announcement to the IEEE webmaster noting the URL as well as a brief explanation of purpose or content.

top of page

Site headers and templates

When developing a new template or header for an IEEE Web site, the following guidelines should be followed:

1. The IEEE Master Brand (use the 125th Anniversary Mark during 2009) should appear in the upper right hand corner of the site header and should be presented according to the IEEE Master Brand guidelines within this guide.
   
2. The logo or name of the site must appear in the upper left hand corner of the site header and should link to the home page of the site. This logo or name should appear larger in size than the IEEE logo to avoid confusion as to which site the visitor is on (See note under IEEE Master Brand guidelines.)
3. The purpose of the site should be obvious either through the site header or through positioning copy placed prominently within the site header.
4. The top utility links of the site should contain a link to the "Home" page of that site (typically the far left link). They should also contain a link to "IEEE Home" (www.ieee.org). Other recommended links include "Contact" and "Sitemap."
5. Although additional colors may be used within site page templates, efforts to incorporate colors from or complimentary to the IEEE color palette are encouraged in order to create a more unified look and feel between the sites.
6. Content, including graphics, should be professional, meaningful and should support the purpose of the site;
7. IEEE sites should utilize a font designed especially for screen such as Verdana, Trebuchet, or Georgia and should present body text at a minimum of 10pt.
8. The new IEEE main site design will be optimized for a screen width of 1024. It will also be centered within the page.  Several other prominent IEEE sites (IEEE Xplore, IEEE Spectrum, IEEE Global History Network) are being designed or redesigned to this same specification.  A consistent page width and placement throughout the presence will present screen-shift as the user moves from site to site.

 top of page

Sample Page Layout

The sample wireframe below illustrates many of the IEEE Web presence standards as they might be applied on a second level (not "home") page.

top of page

 Usability is the ease with which people can employ a particular tool or object in order to achieve a particular goal. Sites designed with human psychology and physiology in mind are deemed highly usable.  

User-centered design (UCD) is a philosophy in which the needs, wants, and limitations of the end user are considered at each stage of the process. Similarly, user centered content is developed by taking the following questions into account:

• Who is your audience?
• What content are they looking for?
• What do they know about the topic/issue?
• What are their reasons for reading this text/page?

Creating highly usable sites is a primary objective for the IEEE for the following reasons:

• increasing the likelihood and speed with which users will accomplish tasks;
• making the site easier for users to learn and more satisfying to use;
• strengthens the IEEE brand and reputation.

top of page

 As of 1998, under Section 508 of the U.S. Rehabilitation Act, U.S. federal agencies must give disabled employees and members of the public access to information that is comparable to the access available to others. IEEE also strives to maintain a Web presence in accordance with Section 508, so as not to interfere with an individual's ability to obtain and use IEEE information quickly and easily. You can assist with this process by:

• using conventions such as verbal tags or identification of graphics and format devices, like frames, so that assistive devices can "read" them for the user in a sensible way;
• providing a text equivalent (words to represent the purpose) for every non-text element via "alt" tag, "longdesc", or in element content;
• offering a text equivalent of any audio media (including the audio is part of a multimedia presentation) such as a text transcript;
• using some other method of identification in addition to color (such as text labels) for identifying screen elements or controls so that persons who are color blind or have low vision may find the Web page usable;
• providing redundant text links when a server-side image map - a map which only specifies the coordinates within the image when the mouse was depressed - is used, allowing access to the page for anyone not able to see or accurately click on the map;
• using appropriate table tags as opposed to using a preformatted table in association with the "<pre>" tag;
• avoiding flashing or flickering elements such as those added through animated GIF's, Java applets, or third-party plug-ins or applications which cause the screen to flicker with a frequency greater than 2 Hz and lower than 55 Hz as this may trigger a seizure for some individuals.

Accessible sites offer significant advantages that go beyond access. For example, those with "text-only" options provide a faster downloading alternative and can facilitate transmission of web-based data to cell phones and personal digital assistants.

More information about creating accessible Web content can be found at the Section 508 Web site.

top of page

Importance of consistency

Consistency is the cornerstone of usability. As the user moves through a site, the visual treatment provides instant reassurance that they are in the desired location, and gives an overall impression of professionalism and reliability. Visual treatment applies not only to obvious elements like logos and navigation, but also to content elements, fonts, colors, and backgrounds. Both internal and external consistency should be considered.

• Internally consistency occurs when guidelines and conventions are applied throughout all site content, e.g., search is found in the same place on every page.
• External consistency refers to consistency with general practice, i.e., presenting navigation in the left column of a page. This allows users to apply rules they've learned elsewhere. Users bring their own experience and expectations to any site they visit. If you ignore that, you risk causing confusion and alienation.

top of page

Color palette

The IEEE main site is currently being redesigned and a broader range of color will be utilized. This color palette can be referenced in the IEEE Visual Identity Guidelines (PDF, 3.11MB) document within the "Brand Basics: Color" section.  Although additional colors may be used within site page templates, efforts to incorporate colors from or complementary to the IEEE color palette will create a more unified look and feel between the sites.top of page

Typography

IEEE sites should utilize a font designed especially for screen such as Verdana, Trebuchet, or Georgia and should present text at a minimum of 10pt. The IEEE main site uses Verdana and use of this font is encouraged.

top of page

Definition and types of content

Content is a piece of information. Here are some examples of page elements that may individually or collectively be considered content:

• contact information (name, phone number, e-mail address, etc.);
• meaningful images or illustrations;
• a paragraph, set of bullets, or other copy (words) with or without contextual links.

Page elements which have content implications, but which will be addressed separately from content in this guide include:

• navigation;
• page headers and footers;
• interactive devices;
• stand-alone links.

top of page

Amount of content

Short pages, those containing one or two screens of text at most, work best for the first few levels of a Web site where users are scanning for link choices. Longer pages (those that require more scrolling) may be more acceptable deeper within the site where related content can be printed and read later.

The primary measure of page length should be content. Think through your material; create logical divisions and subdivisions based on the structure of your information. You should not arbitrarily divide your information simply to conform to acceptable page length.

When creating deeper pages within the site where scrolling is needed, the following devices should be considered to make the content more easily readable and navigable.

• table of contents (preceded by an, "On this page:" header) linking to bookmarks throughout the page with "top of page" links after each to return the user to "top";
• subheadings and relevant links (where appropriate) to serve as signposts for the user;
• bulleted copy and meaningful graphics or pull quotes to break up larger blocks of text;
• end links allowing the user to access other relevant pages without having to scroll back to the top of the page.

top of page

Writing for the Web

Topics covered in this section include:

• Writing for Web versus writing for print
• Printing versus reading online
• Considering user goals and language
• Establishing context
• Scannability
• Making effective use of lists
• Tone and voice
• Shared vocabulary and word styles
• References to IEEE
• International writing guidelines

top of page

Writing for Web versus writing for print

Writing for the Web is very different than writing for print. You cannot simply move your print documents onto Web pages. This would not be using the medium to its best advantage. Developing content for a Web site very often means writing new material.

Web readers typically do not read a page from start to finish on the computer screen. Instead, they scan a site for relevant items and then print the information for later use. Generally speaking, word count of a written piece for the Web should be about half the word count used when writing for print.

back to writing topics

Printing versus reading online

If your topic includes extensive information, dividing it into multiple pages may make it easier to read online. However, many people prefer to read lengthy or complicated texts offline. Multiple pages will make it harder for users to print your information. Therefore, if your content is likely to be printed, either present it as a single Web page or divide it into subdivisions. In either case, you should provide a link to a printable version.

back to writing topics

Considering user goals and language

When describing something a user can do on the Web site, describe it in terms the user would use. The imperative voice (commanding) is attention-grabbing and helpful, so it should go at the front of a phrase, i.e., "Find XYZ here" "Subscribe to XYZ" "Place order." The user likes to feel like they are in control.

back to writing topics

Establishing context

Since users can enter a Web site at any page and move between pages as they chose, every page should be independent. Explain the topic of each page without making assumptions about the previous page seen by the user. Links to background or explanatory information help users who do not have the necessary knowledge to understand the page itself.

back to writing topics

Scannability

The following tactics will help ensure that Web readers will maximize the information you are presenting to them.

• Use shorter line lengths (55 characters per line) rather than longer lengths (100 characters per line).
• Links can perform double duty as highlighted keywords since hyperlinks already stand out by virtue of being colored.
• Use lists rather than paragraphs wherever possible.
• Include only one main idea in each paragraph.
• Put the most important information at the top so users don’t have to scroll. Start the page with the conclusion as well as a short summary of the remaining content.
• Use headings to guide the reader through the relevant points in the document.
• Never use capitalization for emphasis. Only use all caps in short labels or titles.
• Keep it simple. Complicated writing and complex words are even harder to understand online. Write to the point, trying to avoid flowery language.
• Be concise and focused. Provide useful and usable content that supports the goals of the Web site.

back to writing topics

Making effective use of lists

Follow these guidelines when presenting your content in a list format.

• Use numbered lists when the order of entries is important.
• Use bulleted lists whenever the order of the entries is not important.
• Generally, limit the number of items in a single list to no more than nine.
• Generally, limit lists to no more than two levels: primary and secondary.

back to writing topics

Tone and voice

Within each IEEE site, there should be a consistent tone that is professional and appropriate for the IEEE organization. As visitors move from page to page within the site they should not be aware that different areas of content have been developed by different individuals. Here are some guidelines and best practices all IEEE publishers should follow to provide a seamless experience and a consistent voice for site visitors.

• Third person is the preferred writing style on the IEEE main site, with second person the default for instructional material. When using first person language, there is a risk that “we” or “our” may be used in various parts of the site to refer to different groups. Therefore, referring to specific organizational units by name is recommended, i.e., "IEEE conducts meetings.." or "The Regional Activities Board will meet...".
• For public content (not in any personalized area such as myIEEE, etc.) and where information is directed at the user, refer to the user as “you.”
• Use everyday, common language. Compared to print, the Web is a more informal and immediate medium.
• Focus on the user’s needs rather than presenting the organizational view of IEEE. Only define or describe individual organizational units (OUs) or Boards when doing so is integral to the user's understanding of the surrounding content or when user involvement in the organization is being solicited.
• Avoid making exaggerated claims or using overly boastful language to describe products and services. Use factual information in place of “marketese” to present information more objectively.
• Avoid IEEE jargon and terms or explanations that may not be understood by non-members or a more general audience. Spell out acronyms on first usage or avoid entirely if not essential.
• Write in the active voice, which emphasizes the “doer” of the action, not the “receiver.”
  Yes - “IEEE members hold more patents than any other professional society members.”
  No - “More patents have been awarded to IEEE members than to members of any other professional society.”
  (The first sentence is shorter, yet it conveys the same message as the other.)
• Use conventional terminology when providing directions or instructions. There is a varied understanding among users as to what many Web site features are called. If using terminology specific to IEEE, make sure to explain or define it as needed.
• Avoid using self-referential terms, such as “click here,” “follow this link,” and “this Web site.” Writing well for the Web means taking advantage of the options the Web offers but, at the same time, not calling attention to the Web.

back to writing topics

Shared vocabulary and word styles

This section is intended to provide the preferred usage and presentation of common words on the IEEE Web site. The following words should be presented as shown here. 

• Web
• Internet
• online
• offline
• e-mail
• World Wide Web
• Web page
• Web site

The following words should be used to imply the meaning indicated here.

visitors - unidentified users of the IEEE web site; the public ("users" should not appear in public-facing copy)

Web site (or site) - a collection of pages with a common purpose, URL, and look and feel (i.e., IEEE Xplore)

Web site section (or site section) - the top-level categories of the site ("tabs" is also acceptable; "portals" or "iportals" is non-standard and should not be used); care should be taken to not use this term in a manner that could be confused with Sections of the IEEE

site subsection - internally, we use this term to refer to collection of pages grouped together within a section, however, when referring to these section in copy "section" is sufficient

Web page - a collection of content presented at a single URL

**This section will be expanded to include IEEE terminology**

back to writing topics 

References to IEEE

Avoid adding an apostrophe to the name IEEE, such as "IEEE's publication…" Instead use “... publication of IEEE.”

Use “IEEE,” not the “Institute of Electrical and Electronics Engineers” or “the Institute.”

Use “IEEE” not “we” or "our,” but only use IEEE when referring to an activity or policy of the overall organization.

Use "IEEE" not "the IEEE" unless IEEE is acting as a brand name or adjective and the article would be required if IEEE were removed from the sentence (examples: IEEE is the world's leading technical professional association. The IEEE Web site is vast.).

When “IEEE” is part of the name of a product, publication, service, society or other title, it should never be dropped. This applies to first and subsequent references. (examples: IEEE Xplore®, IEEE Spectrum, IEEE Computer Society)

back to writing topics 

International writing guidelines

• Dates: According to Section 9 of the IEEE Bylaws, the following standard date formats should be used
  Formal correspondence: DD Month YYYY (example: 17 September 1999)
  Computer applications including the Web: YYYY-MM-DD (example: 1999-09-17). Another choice is the "short form," which appears as: YY-MM-DD (example: 99-09-17). However, the long form should be used whenever possible.
• Phone numbers: The IEEE style for listing U.S. phone numbers is: plus sign/one/area code/number (Example: +1 732 555 1212). When providing non-U.S. phone numbers, always use the correct country code.When creating Web forms for broader audiences, make sure that the confirmation does not automatically attach the U.S. code to all telephone numbers.
• Seasons: When it’s winter or fall in the U.S., it’s spring or summer in other parts of the world. Instead of referring to a time period by season, use the month or quarter of the year.
• Time Zone: Although time format is not specified in the IEEE Bylaws, we recommend using local, military, and UTC (example: 2:00 p.m. EST / 14:00 / 1800 UTC-05). Please refer to http://www.timeanddate.com/worldclock/meeting.html and always specify the time zone you are referencing.
• Currency: When referencing to U.S. currency, include a “US” in front of the dollar sign (Example: US$25).
• Humor and Colloquialism: Avoid using puns, clichés, popular expressions, and jargon in your writing; most won’t translate across cultures.

back to writing topics

top of page

Graphics as content

Graphic elements on a page are an important part of a visitor's impression of the IEEE Web site and consequently of the IEEE brand.  Graphics should only be added after careful consideration has determined that they align with the overall look of the Web site, and add value to the user experience.

Usability testing has shown that clip-art and stock photography is not valued by many of our users, and should therefore be avoided in favor of "real" images that help to illustrate a point, or nothing at all.

top of page

Data and statistics

When using statistical data on your page, make sure the information is current and up-to-date.

All statistical data should be accompanied by the source from which it was derived along with the date the data was compiled.

top of page

Legal considerations

Using content from someone else’s Web site without asking permission is considered copyright infringement even if the copied content does not display a copyright notice. In the U.S., practically everything considered a private work and created after 1 April 1989 is copyrighted and protected whether it has a notice or not. This also applies to pictures and graphics, as well as scanned pictures from magazines.

top of page

Timeliness of content

Update pages regularly in order to keep information timely and accurate. Data such as statistics, numbers, and examples all need to be recent and up-to-date. If such information is outdated, your credibility, along with the credibility of your pages, suffers. Users will be less apt to trust any information they come across on a site if some of the information is found to be outdated.

top of page

When to use graphics and images

Images should be used sparingly to enhance the written content and add to the visual interest of the page. IEEE.org users like images that have an obvious purpose.

Be tasteful and don't let images overwhelm the user.

top of page

Formats and types

• The most widely used and supported graphics format on the Web is GIF. Most of the major Web browsers now also support JPEG.
• For photographs, a JPEG generally provides excellent quality with much smaller file sizes than GIF, but it does not work as well as GIF for line art and art with large blocks of color.
• It is recommended that representative samples of graphics be converted to both GIF and JPEG, then compare file sizes, image quality, and downloading speeds before making a final decision.
• GIF: solid colored images, line art, clip art, 256 colors maximum, transparent images.
• JPEG: photographs, continuous tone images, gradients
• Graphics created on Macs which have higher quality video may not look as good on a PC. Graphics should be checked on an older Windows machine with a low-end video card. Also, Mac monitors tend to be brighter than PCs.

top of page

Size and quality optimization

• To assure reasonable performance for most users, Web pages should not exceed the maximum of 30-45K including graphics. Therefore, it is important to optimize images before inserting them into your Web page. Scaling the image in a content management system will not reduce the size of the file.
• Avoid large mapped graphic menus. They may be very slow to load, and take longer to comprehend than simple menu lists.
• Reduce resolution to 72 dpi. Some computer monitors cannot display higher resolutions and file size increases with resolution.
• Choose your colors wisely (fewer colors = lower file size). Reduce color depth of GIF graphics to less than 8 bits (256 colors). Depending on the nature of a graphic, 7-bit or 6-bit color (or even lower) may be acceptable, particularly if the graphic has limited colors. Use browser safe colors.
• Keep graphics small (i.e., 10K or less for thumbnails and 40K or less for full size graphics), or it will make the downloading of your pages unacceptably slow.
• Test your graphics on multiple Web browsers

top of page

Graphic compression

There are a variety of software packages available to assist you in compressing your graphics for use on the Web including, Netmechanic Acceleration GIFBot and Macromedia Fireworks. GIFBot is a downloadable software that is available free on the Web at http://www.netmechanic.com/accelerate.htm and will compress both JPEGs and GIFs by up to 90%.

The following online tutorials offer information on optimizing your graphics for the Web.

http://www.webreference.com/dev/graphics/index.html

http://www.webreference.com/dev/graphics/compress.html

top of page

Captioning

When meaningful images are used—which should always be the case—captions should be used to help the user understand the context, content, and source of the image.

top of page

Accessibility considerations

It is important to provide meaningful text substitutes for users who don't display images. For example, when picturing the medal of honor recipient, use "IEEE Medal of Honor recipient Jim Smith" instead of simply "man."

Alt tags can be used to give both disabled and non-disabled users a higher confidence that what they are clicking on will bring them to their desired destination.

top of page

IEEE Master Brand

The following guidelines should be adhered to when using the IEEE Master Brand on IEEE Web sites.

*Effective 1 September 2008 - 31 December 2009 - IEEE is celebrating its 125th Anniversary in 2009. IEEE entities are being asked to help commemorate this accomplishment by using the 125th Anniversary Mark, in place of the IEEE Master Brand, on materials created for 2009. Please refer to the 125th Anniversary Mark Guidelines (PDF, 3 MB) for more details on how this mark should be used on IEEE Web sites.

• The IEEE Master Brand must appear in the header within the top one-third of the screen view (in 1024 × 768 pixel resolution) of all IEEE Web sites.
• The Master Brand should link back to http://www.ieee.org.
• The Master Brand should appear at a minimum of 100 pixels wide by 33 pixels high.
• It is not appropriate to incorporate the IEEE Master Brand into background or wallpaper treatments.
• The site identifier or logo should appear larger in size than the IEEE Master Brand to avoid confusion as to which site the visitor is on.
• The Master Brand should be displayed in accordance with the IEEE Visual Identity Guidelines (PDF, 3.11 MB). If you have questions, please contact the IEEE Corporate Strategy and Communications team.

top of page

Navigation presentation and naming conventions

Consistency makes sites easier to use, because visitors don't have to learn new tricks as they move around. This is particularly important when planning navigation, as it is one of the first and most commonly used tools on any page of a Web site. Please follow these guidelines.

• Left-hand navigation should serve as a pure menu for the section it resides within.  Therefore, links to other areas of the site should be included elsewhere. Repeating them in multiple navigations confuses the user.
• All links in the left-hand navigation should open an HTML page within the same browser window. This is the expected experience and enables the visitor to go "back" without having to close a window.
• Avoid "mail to" links in navigation menus by creating a contact page where such links can be found. If it is unclear by the link name that a mail window will launch, use an alt-tag or screen-tip indicating "mail window will open" or "mail to: ."
• Group similar items into discrete sections using either expanded navigation or navigation headers. This will allow the user to more quickly do a mental sort of the options.
• Navigation should not contain anchor links within the same page unless it is made clear within the heading.
• The optimum number of links within left-side navigation is 5-10, and should not exceed 15.
• "Home" should always link to the home page of the site. References to the index page of a particular section should not use "Home" as a standalone term. These links should include the name of the specific section (i.e."Conferences Home," "History Center Home"). Other global terms like "Sitemap" and "Contact" should also be modified within the section to indicate the specific information to which they refer.
• Readers prefer navigation at the bottom of each page (so they don't have to scroll up after they've finished reading). Browsers want the navigation at the top (so they won't have to scroll past content that doesn't interest them). Provide both options by adding "back to top" or other useful links at the bottom of each page.

top of page

Anchor links

When the user must scroll in order to view all page content and/or content "below the fold" is not obvious from the page title, anchor links should be used to inform the user of all content topics included within the page. The table of contents at the top of this Style Guide is an example of how anchor links can be used to improve usability. Basic navigation and link naming conventions apply to anchor links. When anchor links are used, "back" options should also be provided at the bottom of each topic.

top of page

Breadcrumb navigation

Breadcrumb navigation on internal site pages provides additional orientation to users. A breadcrumb trail is a special kind of navigation bar, featuring a hierarchical row of links. As the user moves deeper into the site, the breadcrumb trail should show the closest direct path back to the home page.

top of page

Text links

• Avoid one-word hyperlinks. Seven words is the ideal link length to provide context to the user. When linking to a file to download, list the file type in parenthesis. For example: Download Membership Application (PDF, 25KB)
• If it is unclear by the link name that a mail window will launch, use an alt-tag or screen-tip indicating "mail window will open" or "mail to: ."
• “New windows” should only be used for non-HTML pages such as PDF’s or PowerPoint files. This is because the user may inadvertently close the window after viewing such documents. All HTML pages (either on IEEE site or on another site) should open in the same window. Read "Open New Windows for PDF and other Non-Web Documents" from Jakob Nielsen's Alertbox, August 29, 2005 for more information.
• Write links that accurately describe the information at the destination page. Links within paragraphs should not interfere with the reading of information either on the computer screen or when printed. Avoid the click here syndrome.
  For example:
  Use: "IEEE Web publishers can find graphics approved for Web use in the IEEE Graphics Library."
  Not: "Here is a link to IEEE graphics." Or: "For IEEE graphics, click here."

top of page

Naming files and folders

Unlike the names of files on your personal computer, the names of your Web page files are not purely for your own reference. The names help users understand where they are within the Web site, and to navigate back to particular content.  The following guidelines should be used:

• Directory and file names should be made as short as possible, while still having meaning to the user, to avoid excessively long URLs.
• The landing page of a section should be named "index," while all other files (pages) within the folder should have names that refer to the page title.
• Each file name within a section should be unique.
• Use all lowercase and avoid special characters when creating file and folder names. Underscores (_) or hyphens (-) are acceptable.

top of page

Page length

Short pages, those containing one or two screens of text at most, work best for the first few levels of a Web site where users are scanning for link choices. Longer pages (those that require more scrolling) may be more acceptable deeper within the site where related content can be printed and read later.

The primary measure of page length should be content. Think through your material; create logical divisions and subdivisions based on the structure of your information. You should not arbitrarily divide your information simply to conform to acceptable page length.

When creating deeper pages within the site, where scrolling may not be avoidable, the following devices should be considered to make the content more easily readable and navigable:

• anchor links to bookmarks throughout the page with "back" links to return the user to "top"
• subheadings and relevant links (where appropriate) to serve as signposts for the user
• bulleted copy and meaningful graphics or pull quotes to break up larger blocks of text
• end links allowing the user to access other relevant pages without having to scroll back to the top of the page

top of page

Landing pages

Landing pages are the "home" or "index" pages within a Web site section. There is only one landing page for each section. Generally speaking, short pages containing one or two screens of text at most, work best for the first few levels of a Web site where users are scanning for link choices. Landing pages should serve as an overview for the section and may also introduce the newest information added or changes to the site section.

top of page

Placement of page elements

Place images and text on pages in a way that creates a clear visual hierarchy in order to :

• show importance or priority of elements on the page;
• show relationships between elements;
• aid scanning and comprehension.

The IEEE Web site uses left alignment for headings, sub-headings and text. Centered text prevents the user from quickly scanning down a single column on a page.

To follow are some ways to show importance or priority.

• Place important elements nearer the top of the page
• Make important elements bigger, bolder
• Use white space around important elements to make them stand out

To follow are some ways to show relationships between content.

• Grouping items together or placing them in proximity to each other shows similarity.
• Nesting items under another item shows a child/parent relationship.
• Items presented with the same color, size, orientation or font style may indicate their similarity

Other tips for creating a more readable, interesting page layout include:

• using headings and sub-headings;
• breaking text into short paragraphs;
• using bulleted lists;
• incorporating links to other relevant content within your text;
• using left and right columns for appropriate content;
• using images, charts, graphs and/or tables to present or support complex information.

top of page

Copy width

Lines of text should be no longer than half the width of the screen for optimum readability.  

top of page

Interactivity guidelines

Follow these guidelines when designing an interactive user experience:

• When asking a user to begin an interactive process, clearly identify the number of steps at the beginning of multi-page sequences. i.e.: Page 1 of 8.
• Place controls (such as buttons) consistently on the right side, to indicate action.
• When asking a user to complete a form, clearly mark all required fields. Provide a human option just in case.
• Provide an e-mail address or telephone help number for the user.
• Avoid pop-ups. If unavoidable, never use them until after the user has traveled two or three clicks into the site. User-activated pop-ups (such as a glossary or a tutorial) may be used to assist the user in order to avoid leaving the original page.
• Clearly indicate free versus subscription-based content before users venture the link to access the content. If login is required, make username and password fields available on the page or clearly indicate that the content "requires login" to avoid an unexpected a browser prompt.
• Always declare non-HTML files in advance, and provide an HTML version of the content as the primary presentation, when possible. Indicate file type and size.
• Generally speaking, Web content should be presented as HTML (a Web page). Word documents should only be used in rare circumstances. Similarly, PDF files should only be used when document formatting must be retained. Neither format should be used simply to avoid the extra effort of creating an HTML version. Convenience to the user should be primary.

top of page