IEEE Mobile/App Guidelines

These guidelines are for branding/visual purposes, and are not meant to be a technical document. The guidelines provided relate to mobile/tablet apps, not the use of mobile websites and mobile optimized/responsive versions of a website. Unless marked as required, all guidelines are best practices to enhance the usability of your mobile/tablet app.

Branding (Required)

All branding elements will be design dependent. Some designs may contain controls at the top, left, or bottom, which may not leave enough room for branding elements. If you have any branding questions regarding your app, please contact the Digital & Creative Innovations Team.

IEEE app name top of mobile app screenApp Name The app name must contain the letters I-E-E-E as part of any title and/or logo. For details on proper implementation, consult "How to use the letters I-E-E-E when designing" section on the Branding and Visual Elements page.

IEEE app name top of mobile splash screenSplash Screen The splash screen is shown while the application initially loads when clicked from the device dashboard and must include the following:

  • IEEE Master Brand - Colors: black or white only (the blue IEEE Master Brand is reserved for enterprise-level websites and IEEE.org)
  • App name or logo (optional)
  • Loader graphic (optional, could be operating system driven)
  • App version number (must be listed, can be alternately made accessible from the app menu and/or settings)

Questions can be directed to the Digital & Creative Innovations Team.

Meta Navigation (required for responsive sites)

IEEE meta navigation on mobile app screenMeta navigation is a menu of links that must appear on all IEEE sites, allowing visitors to quickly access IEEE flagship properties and options. For general information on the meta navigation, consult the "Enterprise-wide meta-navigation" on the Page Layout Requirements page.

  • Responsive corporate/flagship sites must have the meta navigation links included in its design (or a link to “More IEEE sites” linking to the IEEE Sitemap, if the design poses a space constraint).
  • Other responsive IEEE sites must include a link to “More IEEE sites” linking to the IEEE Sitemap at minimum.

Mobile apps are not required to use the meta navigation links.

Single Sign-On And Cart Features (if applicable)

IEEE mobile app sign inIEEE maintains a Single Sign-On (SSO) and eCommerce platform to enable users to move between sites. If your app requires SSO/eCommerce, please contact the IEEE Digital & Creative Innovations team for additional information.

Color

IEEE maintains a specific set of colors to represent its branding. For details, consult the "Color palette" section on the Branding and Visual Elements page.

Imagery And Iconography

Imagery IEEE has created specific image topics to represent its brand. For details on IEEE image usage guidelines, consult the "Imagery" section on the Branding and Visual Elements page. In addition to the general image usage guidelines, mobile applications must take into account the varying resolutions of targeted devices and deliver the best-quality image accordingly. For details on optimizing images for high-resolution devices, consult the following. iOS Human Interface Guidelines: Adaptivity and Layout Android Developers Guide: Supporting Multiple Screens Iconography Icons should be used where possible to save space and provide constant visual cues. However, all icons should be one of the following:

  • Common: The meaning of the icon is generally universally known and accepted, even if that meaning is not intrinsic in its shape. For example, the hexagon is almost universally known for meaning "stop." Rotating icons are commonly known for “loading content.”
  • Recognizable: The meaning is obvious without the context of any related text, generally because the icon has an easily identifiable shape that represents a real-world object. For example, the icon of an umbrella—while not particularly common—is easily recognizable as long as it is not made too abstract.
  • Illustrative: The icon helps reinforce the meaning of the text but may not be immediately obvious without it. This is especially true with instructional text, where the icons might be combined to show a process.

Orientation

Unlike desktops or laptops, mobile devices can be held in two distinct positions. It is important to determine before design starts what orientation will be used: landscape, portrait, or both. For mobile devices, in landscape orientation the design can either scale to fit the page or be redrawn to show additional content. For more information on orientation, see the “Adaptivity and Layout” section of the iOS Human Interface Guidelines and Android Developers Guide. iOS Human Interface Guidelines: Adaptivity and Layout Android Developers Guide: Supporting Multiple Screens

IEEE mobile app portrait and landscape

Content

For details on IEEE content guidelines, consult the "Content" page. The application should contain text that informs a user of the app’s main purpose and how the app relates to the desktop version (if applicable). The style of the text should adhere to the IEEE "Content" guidelines.

IEEE form on mobile app screenForms and Input Fields Forms and input fields are commonly used for capturing user input using on-screen keyboards. Follow the guidelines below when using form elements:

  1. Use placeholder text for input fields where necessary. Apply left justification to the placeholder text.
  2. Use sufficient contrasting colors to distinguish the foreground text color from the background color.
  3. Include an action element to complete processing the form information if applicable.

Gestures Gestures—such as tap, drag, and pinch—are commonly used to interact with apps in place of mouse and keyboard actions. People generally expect gestures to work the same in all the apps they use.

Typography/Font

IEEE has specific typographic fonts for branding. For general information on IEEE typography, consult the "Typography" section on the Branding and Visual Elements page. In addition, designers should keep the following best practices in mind:

  • Test custom fonts: Make sure all styles of a custom font are legible at different sizes.
  • Use one typeface, with many styles: In general, use a single typeface throughout your app.
  • Use weights and styles to create visual contrast: Use different weights and styles of the same typeface to create design contrast.
  • Use white space: Crowding pages with text or other design elements can diminish the effectiveness of the app

Visual App Usage Guide

IEEE visual guide on mobile app screenIt is important to ensure that a user knows how to use your app, so use a visual that highlights key areas within the app. Depending on the complexity of the app, users can benefit from a quick tour/overview of what your app does, but you want to show the app benefits in the tour, not the features. This will help the user understand not only how to use the app, but, more importantly, why they should use the app. It is important, however, to allow experienced users to skip the tour, so provide a simple skip link during the tour.

Monitoring Usage

All apps must be monitored regularly for number of users, usage on different platforms, and performance. Apps should be updated based on monitoring reports as applicable. Recommended tools and relevant links include:

For ongoing user feedback, it is recommended to include a form so users can easily share app feedback. This feedback should be regularly monitored by the app manager or business stakeholder managing the app for making relevant enhancements.

Version Updates

Apps should be regularly evaluated and updated to correct for bugs and to refine the user experience based on customer feedback. Whenever updates occur, a brief description of changes should be provided to the user, and the version number should be clearly displayed on the splash screen and/or the app menu or settings.

IEEE Device App End User Agreements