Web & Mobile Application Branding & User Experience Guide. v 4.0 November 2016

Transcription

1 Web & Mobile Application Branding & User Experience Guide

2 Introduction This guide exists to provide guidance to software designers and developers working on EPRI web application projects and web properties. The use of these guidelines and standards will help maintain EPRI s brand identity and provide a unified customer experience for internal and external customers. The points laid out below should be applied to all web properties and applications, with express permission provided for any variances from standards. Every application developed for, or deployed on the behalf of, EPRI must adhere to the required standards within this document. Requested deviations will be reviewed on a bi-weekly basis by the Web & Mobile leadership team. Non-compliant sites and applications will not be released to a production environment until compliance with these guidelines are met or exception(s) are made to approve the variations. This guide, and the information contained herein, is managed and maintained by the EPRI Web & Mobile group. Other referenced materials are own respectively by their creators. Grand-Fathered Applications Applications developed before the first version of the brand standards were released in October 2010 will be given some latitude in complying with the full set of requirements. If an update is made to the application, the application team should move toward full compliance with these standards and guidelines wherever possible, but are not required to do so. The original release date of your web application determines the applicable standards version: 1. Re-launched Web Applications First Release date is prior to October First Release date is after October 2010 Applications submitted for initial Digital Solutions review in 2016 may use either the original standards or the new web application version. Applications submitted after 2016 must use the new web application standards. Applications will not be permitted to enter production environments without approval from the EPRI Web & Mobile group. In an effort to provide guidelines for modern browsers, as well as a consistent experience for web and mobile users, EPRI has adopted Google s Material Design Guidelines as our visual and user experience standards. Material is a great resource for user experience guidelines, but we at EPRI have more needs that aren t addressed by Google. Therefore, we have supplimented the Material guidelines with Angular Material for developers using AngularJS. Angular Material is both a UI Component framework and a reference implementation of Google's Material Design Specification. Angular Material provides a set of reusable, well-tested, and accessible UI components based on Material Design. And while most everything is covered in all of these specifications, there are still even more items that they don t address, most notably a standard for data grids. For everything else, we are also adopting the Kendo UI framework to handle complex data grids primarily. Read more about Google Material at: Download the Material Lite framework: Read more about Angular Material at: #FFFFFF 50% Read more about Kendo UI here:

3 Example UI FLEX Equipment Maintenance Event Collaboration Site Home Search About Us Help Title of Screen or View of Data 64 Careers Contact EPRI Copyright Policy Privacy Statement Terms of Use EPRI 3420 Hillview Avenue, Palo Alto, California Electric Power Research Institute, Inc All rights reserved

4 The Web & Mobile group reviews all web applications for standards compliance as part of the BETA and pre-production process. However, the earlier in the development process you involve us, the earlier we can provide feedback and help avoid any last minute delays once the code is complete. As the work becomes completed send screenshots, wireframes, or a link to a build of the application on the development server. This will allow us to give feedback early in the process and save rework. From the review, the Web & Mobile group will provide feedback based on the following categories: 1. Changes: Must be met in order for the web application to enter production 2. Recommended Changes: Usability/User Experience Enhancements 3. Notes/Observations: Unusual or unexpected behavior of the web application **The Web & Mobile group may attach sample mockups to the feedback, if applicable. When your web application has been approved by the Web & Mobile group, a notification will be sent to the Security and Software Assessment Services (SSAS) group referenced in your project documentation. When you are ready to involve the Web & Mobile team, please contact: Bing Xie Web & Mobile Program Manager (704) bxie@epri.com Key Stakeholders The Software Security Assessment and Business Applications team in Information Technology are critical stakeholders in the development and release of all web applications at EPRI. If you have questions about engaging the teams, please contact: Related Documents The Web & Mobile group maintains this document and a complete set of HTML template files on the Member Experience website at (employees only). These files may freely be shared with a vendor who is working on the behalf of an EPRI initiative. Additionally, all efforts should ensure that they are meeting the general guidelines outlined in the latest EPRI Graphic Identity Standards. The contents of this document should be seen as web specific extension of those guidelines. Manuel Morales Software Quality Assurance Manager (650) MaMorale@epri.com

5 All web applications must adhere to their specific requirements (re-launch vs. new) listed in this section. Browser Compatibility Browser compatibility standards are non-negotiable, regardless of the standards definition that is applied to your application. Both and must meet the following minimum browser requirements. All EPRI web applications must be fully compatible with: - Internet Explorer 10.x and higher - Firefox Current version - Chrome Current version Re-launched Web Applications must be follow compatible with: - Internet Explorer 8.x and higher - Firefox 10.x and higher - Chrome - Current version Please note, applications for Mobile must clearly document the supported operating systems (ios 4.x/5.x Android 2.x/3.x/4.x etc.) and platforms phone/ tablet. Mobile applications should also clearly specify the optimal display dimensions, orientation(s), and/or form factor. Screen Resolution The recommended resolution for web applications is 1280 x 800 and higher. Web pages should not scroll horizontally at this resolution or higher. The maximum displayed content at this resolution should be 1028 pixels to accommodate for the browser s scroll bar. Responsive or Adaptive scalable layouts should conform to the web browser s viewport size. The content region of such layouts does not need to consume the entire viewport area. Web pages may scroll horizontally on monitors with a screen resolution of 1024 x 768 or less. In these cases, the site should remain usable and navigable. Resolutions at or above 1280 x 800 should not require a horizontal scrollbar at any time. This includes during load, during transition between pages, or due to animation within a page. Appropriate CSS overflow control should be used to negate any potential problems in this area. Browser Window/Tab Management The use of pop-up and modal windows is highly discouraged and should be reserved for cases where no other solution is possible (i.e. inline help). An in-page modal should be used wherever possible. If a link opens in a new tab or pop-up window, it is not allowed on the primary navigation and must be placed within the page content area (preferably in the same location on each). Links leading out of a site or application should be designated with the approved icon and open in a new tab/window. Page Design/Layout - The specific page layout and design will be decided by the Web & Mobile team - The page layout, whenever possible, will use the existing page layout patterns to maintain a normalized structure and appearance of EPRI web properties - Every page is required to have a title - Page titles will be left aligned - Page titles, section headers, and labels should be stored in title case - Do not use all capital, camel case, or all lower case letters - Styling of the text will be accomplished using CSS - Do not underline text, underline is reserved for hyperlinks only

6 CSS Consistent use of a style sheet visually reinforces EPRI s brand by providing a consistent look and feel throughout our web applications. For future compatibility, we suggest using CSS 2 and CSS 3 for use within you application(s). Roboto Our new EPRI Applications and websites are introducting a new base font: Roboto. You can download Roboto from Google Web Fonts for use on your own machine, and instructions on how to include the font into your page are located at: Font / Typography Using a limited set of typographic fonts provides branding support by consistently displaying text throughout our web sites. All text should be displayed using the Roboto font face, with a fall back to Arial, and then the default Sans-Serif font on desktop applications. For the best system integration and performance on Mobile Web devices, the device optimized version of Roboto will outperform and be more legible on small-screen devices. For mobile web applications, the font cascade should be Roboto, Arial, Helvetica, Sans-Serif. Headline Title Subheader Body 2 / Body 1 Caption BUTTON Light theme default type color Regular 24pt Bold 18pt Regular 16pt Medium 14pt Regular 14pt Regular 12pt MEDIUM 14PT Primary # You will not need any other fonts, as Roboto has a variety of weights that will accomodate all of your needs. Default light bg: Google Grey 200, #EEEEEE Secondary Disabled # # % 38%

7 Color Consistent use of the color theme reinforces EPRI s brand by providing a consistent look and feel throughout our web applications. Our Primary Web and Mobile Color Themes come from the Matertial Design Specifications. Our Primary theme is Light, and the colors used are Blue and Grey. Light Color Theme / EPRI Dialog Title Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna wirl aliqua. Up exlaborum incididunt quis nostrud exercitatn. 12:30 For more regarding the Material Design Light Theme, visit: For more regarding the Material Design Color Palette, visit: BUTTON BUTTON PRIMARY SECONDARY

8 C A B E F Title of Screen or View of Data FLEX Equipment Maintenance Event Collaboration Site Home Search About Us Help D A) EPRI Logo In applications and on websites EPRI primarily uses the White EPRI logo referenced in the EPRI Graphic Identity Standards. The Graphic Identity Standards can be found on InsideEPRI at: To ensure that the logo is recognizable, readable, and visually effective, it must be of a certain size and location on your website. The following guidelines should be followed when using the EPRI logo. Standard Logo size is 97 pixels x 22 pixels - Do NOT resize, scale, skew, or otherwise distort the approved logo - The logo has a horizontal configuration. No other configurations are allowed - The logo must be placed in the top left corner of the header with padding of 10 pixels all four sides of logo - The logo is to be vertical aligned middle within the space allowed for it in the header Incorrect Use of Logo: - Do not scan it - Do not recreate, skew, or otherwise distort it in any way - Do not obscure, overlap, or partially cover the logo with other objects - Do not combine it with another symbol, artwork, or logo - Do not attach it to any product or business name - Limit its use to one logo per page - The EPRI logo was created to work best as a simple, two-dimensional design. Three-dimensional effects are not supported at this time. - Do not put a border around the entire logo - The EPRI logo should always stand alone. - Business, product, plant, or location names should not attach to the EPRI corporate logo. B) Application Title - Title placement should be in the top, left corner of the page, approximately 24px from the right edge of the logo - Title should be vertically aligned middle in the header Background Color - The background color of the header top strip should be blue, value #2196F3 C) Navigation - Navigation is used for both internal links and external links - Dropdown navigation should be used if subpages are necessary - The background of each button is # The Hover state is # For more on how to implement Navigation, visit: H G For any question involving the logo, usage, branding, co-branding, or general display, please contact: Jeremy Dreier Sr. Corporate Communications Manager (704) jdreier@epri.com

9 C A B E F Title of Screen or View of Data FLEX Equipment Maintenance Event Collaboration Site Home Search About Us Help D A) Title of Screen or View of Data - The title should be whatever screen or view the user is on, for example Search Reults or About Us. - Font specifics: Roboto-Bold / 18 px / 21 px Leading / #2196F3 - This could alternatively be used for the Welcome Message on the homepage. - Page titles, section headers, and labels should be stored in title case - Do not use all capital, camel case, or all lower case letters - Styling of the text will be accomplished using CSS E) Functional Icons - Icons should reflect top-level actions; link to contact page, link to help page, link to Member Center or log in, trigger submenu. - Icons are #90CAF9 by default; #FFFFFF on Hover; F) Login / Member Center Icon on click, opens a dialog box that allows the user to log in. - If logged in, icons should remain white - If logged out, Icon should remain #90CAF9 like the other icons. - If log in, Log out is not necessary, this icon should link to the Member Center homepage - EPRI.com should always be included and hyperlinked to - Logout link should always be included and point to login.aspx G) Submenu / Utility Icon - All Utility links, Privacy Policay, Careers, etc can be linked in this dropdown menu. - For usage, refer to: H) Search If applicable - If a website needs search functionality for its application, this is the method to use; Do not place the search icon in the blue header - that indicates that it s a global EPRI search. - For usage, refer to: H G Login/Logout Login Access to the application must be controlled through EPRI s OAM access management software. Please contact EPRI s IT department for more details regarding OAM. All web applications must redirect users to to login to the web application. Logout All web applications must contain a logout link located in the utility navigation area of the header. The logout link must redirect users to

10 / Analytics Careers Contact EPRI Copyright Policy Privacy Statement Terms of Use EPRI 3420 Hillview Avenue, Palo Alto, California Electric Power Research Institute, Inc All rights reserved The EPRI footer is required on every page within the web application. - Address Block, Copyright, Policy Links are to be used at the footer of website. - The copyright statement should be placed after the address block in the footer on all EPRI web pages. Protect our intellectual property and publications by including the copyright symbol and statement on them. The copyright indicates that EPRI owns the rights to the materials and that we have exclusive rights to control their distribution and use. Google Analytics Tracking Code In order for us to track activity on your site and provide you with metrics, the following code will need to be inserted in the footer on each page. <!-- BEGIN GOOGLE ANALYTICS CODE --> <script type="text/javascript"> var gajshost = ((" == document.location.protocol)? " : " document.write(unescape("%3cscript src='" + gajshost + "google-analytics.com/ ga.js' type='text/javascript'%3e%3c/script%3e")); </script> <script type="text/javascript"> var pagetracker = _gat._gettracker("ua "); pagetracker._setdomainname("epri.com"); pagetracker._initdata(); pagetracker._trackpageview(); </script> <!-- END GOOGLE ANALYTICS CODE -->

11 / Video: - Preferred solution: HTML5 (<video>) + <object> + <embed> Accepted fallback platforms: - Adobe Flash - Microsoft Silverlight 5 - Streaming from YouTube is permitted - Video must be uploaded to the EPRI YouTube channel - Engage the EPRI Web & Mobile team for assistance - Note: Videos must be publicly available to be utilized in this way Audio: - Preferred solution: HTML5 (<audio>) + <embed> Accepted fallback formats are MP3/MP4 - WAV and WMA formats should be converted to MP3, whenever possible Images: - Image file sizes should not exceed 50K - All images should have alt tag definitions - All images should have their width and height properties set within the HTML - Images resolution should be 72 DPI, or higher for specific targeted solutions - Accepted formats are JPEG, GIF, PNG, and SVG - Thumbnail images should be 90px width, auto height, and 3K or less in size - All images should have their embedded meta-data removed from the file prior to publishing to the website - All images should be losslessly compressed prior to publishing to the website - A service like Kraken.io can be used to help automate the process Icons should be use when documents are linked for direct download. It is highly discouraged to have popup windows, however, if required. The open in new window icon is required. Any icons from Google s Material Design library are acceptable. You can view and search them at:

12 We defer to the Google Material Guidelines for usage. Per Google: A list consists of a single continuous column of tessellated sub-divisions of equal width called rows that function as containers for tiles. Tiles hold content, and can vary in height within a list. Single-line item Single-line item Single-line item Two-line item Secondary text Two-line item Secondary text Line item selected Line item unselected Line item selected Three-line item Secondary line text Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam massa quam. Three-line item Secondary line text Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam massa quam.

13 We defer to the Google Material Guidelines for usage. Per Google: A card is a sheet of material that serves as an entry point to more detailed information. may contain a photo, text, and a link about a single subject. They may display content containing elements of varying size, such as photos with captions of variable length. A card collection is a layout of cards on the same plane. are a convenient means of displaying content composed of different elements. They re also well-suited for showcasing elements whose size or supported actions vary, like photos with captions of variable length. Lorem ipsum dolor sit amet, tale omnis gubergren te qui, ius integre inciderint id. ACTION 1 Title Subhead ACTION 2 Title goes here Subtitle here ACTION 1 ACTION 2

14 & s We defer to the Google Material Guidelines for usage. Per Google: are text labels that appear when the user hovers over, focuses on, or touches an element. identify an element when they are activated. They may contain brief helper text about its function. For example, they may contain text information about actionable icons. Tooltip labels do not receive input focus. s We defer to th Google Material Guidelines for usage. Per Google: s display a list of choices on a transient sheet of material. s appear upon interaction with a button, action, or other control. They display a list of choices, with one choice per line. items may be disabled if not applicable to a certain context. Contextual menus dynamically change their available menu items based on the current state of the app. A menu is a temporary piece of material that appears upon interaction with a button, action, pointer, or other control. It contains at least two menu items. Each menu item consists of a discrete option or action that can affect the app, the view, or selected elements within a view. s should not be used as a primary method for navigation within an app. Align center Arial 100% Arial 100% Calibri Courier Verdana

15 We defer to the Google Material Guidelines for usage. Per Google: inform users about a specific task and may contain critical information, require decisions, or involve multiple tasks. contain text and UI controls. They retain focus until dismissed or a required action has been taken. Use dialogs sparingly because they are interruptive. Some dialog types include: Alerts are urgent interruptions that inform about a situation and require acknowledgement. Simple menus display options for list items, whereas simple dialogs can provide details or actions about a list item. Confirmation dialogs require users to explicitly confirm a choice. Permissions Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisinuli. MORE INFO DECLINE ACCEPT Without title With title Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna wirl aliqua. Ut enim ad minim ikad veniam, quis nostrud exercitatn ullamco laboris nisi ut aliquip. BUTTON BUTTON Permissions Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna wirl aliqua. Up exlaborum incididunt. BUTTON BUTTON

16 We defer to the Google Material Guidelines for usage. Per Google: represent complex entities in small blocks, such as a contact. A chip may contain entities such as a photo, text, rules, an icon, or a contact. Contact chips may represent contact information in a compact way. can be used for various types of entities, including free form text, predefined text, rules, or contacts. may also contain icons. Trevor Hansen Contact Name primary @ .com 2@ .com 3@ .com

17 We defer to the Google Material Guidelines for usage. Per Google: communicate the action that will occur when the user touches them. Material buttons trigger an ink reaction on press. They may display text, imagery, or both. Flat buttons and raised buttons are the most commonly used types. Additional button types include: Persistent footer buttons are flat buttons that may be used in screen footers or dialogs. NORMAL NORMAL Dropdown buttons display multiple selections. Toggle buttons group related options. Icon toggles allow a single choice to be selected or deselected. Flat buttons Flat buttons are text-only buttons. They may be used in dialogs, toolbars, or inline. They do not lift, but fill with color on press. PRESSED PRESSED Raised buttons Raised buttons are rectangular-shaped buttons. They may be used inline. They lift and display ink reactions on press. DISABLED DISABLED Elevation Flat buttons: 0dp Raised buttons: 2dp

18 List Controls We defer to the Google Material Guidelines for List Controls usage. Per Google: List controls display information and actions for list items. List controls provide information, indicate a state, or present actions for list items. List controls appear as icons to the left or right of list text. States and primary actions are placed on the left side of a list tile. Secondary actions and info are placed on the right side of the tile. Types: Checkbox Switch Reorder Expand/collapse Leave-behinds Sliders We defer to the Google Material Guidelines for Sliders usage. Per Google: Sliders let users select from a range of values by moving the slider thumb. Sliders are ideal components for adjusting settings that reflect intensity levels, such as volume, brightness, or color saturation. Sliders may have icons on both ends of the bar that reflect the value intensity. Place the smallest value for the slider range on the left and the largest value on the right. Continuous sliders allow users to select a value along a subjective range. They do not require a specific value to make adjustments, although they may, in some instances, offer an editable numeric value. Discrete sliders allow users to select a specific value from a range. 60

19 We defer to the Google Material Guidelines for usage. Per Google: Text fields allow users to input text, select text, and lookup data via autocompletion. Text fields usually appear in forms. Users may enter text, numbers, or mixed-format types of input. Text field types: Single-line Multi-line Full-width Available functionality: Character counter Auto-complete Search filter fields Password input redaction Single-line input label Input text for a single line field with a max 31 / 50 Multi-line input label Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam gravida venenatis accumsan. In mi massa, tempus Hint text Hint text Input tex Input text Input text Username or Password is incorrect. 110 / 120 Disabled text

20 We defer to the Google Material Guidelines for usage. Per Google: make it easy to explore and switch between different views. enable content organization at a high level, such as switching between views, data sets, or functional aspects of an app. Present tabs as a single row above their associated content. Tab labels should succinctly describe the content within. Because swipe gestures are used for navigating between tabs, don't pair tabs with content that also supports swiping. Types: Fixed Scrollable NO. ONE ITEM TWO THE THIRD

21 We defer to the Google Material Guidelines for Date and Time Pickers usage. Per Google: Pickers provide a simple way to select a single value from a pre-determined set. Date pickers use a dialog window to select a single date. The selected day is indicated by a filled circle. The current day is indicated by a different color and type weight. Time pickers use a dialog to select a single time (in the hours:minutes format) on mobile. They adjust to a user s preferred time setting. Start date 2017 Thu, Apr 13 S M T W T F S 30 April CANCEL 1 OK

22 We are using the Kendo UI implementation. The Kendo UI grid is a powerful widget which allows you to visualize and edit data via its table representation. It provides a variety of options about how to present and perform operations over the underlying data, such as paging, sorting, filtering, grouping, editing, etc. To feed the grid with data, you can supply either local or remote data via the Kendo UI DataSource component, used as a mediator.

23 We are using the Kendo UI upload implementation. The can be used as a drop-in replacement for file input elements. This "synchronous" mode does not require special handling on the server. SUBMIT

24 Some applications will require a progress loader when loading pages or information. For this, we are using the Angular Material Progress implementation.

25 s s, the containers of page content, provide a variety of layout structures using a consistent approach to surfaces, layering, and shadows.

26 Tables - Tables are for tabular data and should not be used for layout, spacing, or other utilitarian needs - Provide a descriptive heading for each table - Ensure that tables have clear, concise, and accurate row and/or column headings - if tables are long, consider the use of pagination and display the number of records that are showing and total number of records (1-20 of 200) - If table headings are sortable provide cues to the user (visual carrot) - Provide users with the ability to export data into standard file types (.pdf,.csv) - Provide filters to help users reduce the amount of possible matches - Search / Filter results Charts and Graphs - Include units of measurement on all charts and graphs - Provide meaningful titles and axis labels for charts and graphs - Use standard scaling practices for charts and graphs - Include a key with each graph - Do not clutter charts and graphs with useless information Only display what is important - Use interactive graphs with filtering and querying Only if the data warrants it Maps - Use vector maps to show points, lines, and areas - Pick appropriate symbols for points - Use raster data for continuous images and photos - Use appropriate scaling techniques - Separate information using layers - Pinpoint locations by latitude and longitude - Provide a legend, Compass Rose (north arrow) and a scale bar - Provide tools for zooming, panning, and centering Feedback Feedback promotes a users confidence in their ability to negotiate and manage the application, and in the underlying functionality that supports their every action. - Feedback must be provided in case of system failure - Error messages should be clear, precise, and help the user solve the problem - Error message should be polite, not intimidating, and should never blame the user - Error messages should list the missing fields or pieces of data needed to successfully complete the action Application Response Time Application and web page response time are an important factor. Decreasing response times and load times can greatly enhance a user s experience with EPRI and can also directly impact the SEO ratings of EPRI s web sites. The table below identifies the three important limits to application response time. Page Load Times Fast page load times are a key element to user retention on your application. The list below identifies types of pages and what their preferred load time should be. Time: seconds The limit for having the user feel that the system is reacting instantaneously. UI Element: None, display result Time: seconds The limit for the user's flow of thought to stay uninterrupted, even though the user will notice the delay. UI Element: Time: 10+ second The limit for keeping the user's attention focused on the dialogue. Users will want to perform other tasks while waiting for the computer to finish, so they should be given feedback indicating when the computer expects to be done. UI Element: Percent-done progress indicators Data Heavy Pages This type of page contains rich interactions, displaying data from a database, querying data from a database, or the use of multimedia 5 seconds average / may not exceed 10 seconds Accessibility By following accessibility guidelines content will be more accessible to a wider range of people with disabilities, including blindness and low vision, deafness and hearing loss, learning disabilities, cognitive limitations, limited movement, speech disabilities, photosensitivity and combinations of these. Following these guidelines will also often make your Web content more usable to users in general and may have the added benefit of being more search engine friendly. It is recommended that all EPRI web applications should conform to Level A of the W3C Web Content Accessibility Guidelines (WCAG) 2.0.