1 Tactical UI Evaluations Driving interface consistency Chris Irwin Creative Director Q4-2014 2 1. Executive summary 3 2. Color 5 3. Typography Iconography Logos Patterns Page Layout Applying the Guide Resources 63 Table of Contents 3 1. Executive Summary 4 Having been developed independently, our current applications reflect varying design and UX strategies. Aligning these, at first glance, seems to be an enormous undertaking. However, by breaking the process down into manageable steps, much can be done to move them all towards a common look and feel. We call this first step Tactical UI. This document serves to provide you with the tools to enable the first steps towards true design integration. By leveraging these guidelines, patterns and structures, your team will be able to update the design of your applications to align closer to the Nexxus design guidelines. Not everything in this document may be able to be implemented to the fullest for your specific application, due to technical limitations. However, by endeavoring to come as close as possible, and to adhere to the spirit of these guidelines, your application will look, work and be better. Executive Summary Overview IMS Health Confidential 5 2. Color 6 Color is a integral part of any design. In user interface design, the use of color should be approached in a systematic fashion, in order to leverage our inherent responses to the light around us. The following section outlines the Nexxus palette and the next few chapters will describe the specific usages for each color in typography, UI elements and branding. Color Overview IMS Health Confidential 7 Color Library Palette IMS Health Confidential Primary ColorsHexRGB Atmosphere#25b4ff37,180,255 Navy#1c298028,41,128 Teal#37dad355,218,211 Secondary ColorsHexRGB Blue#25b4ff37,180,255 Green#1c298028,41,128 Orange#37dad355,218,211 Coral#fb4f39251,79,57 Support ColorsHexRGB Charcoal#3a4f5a58,79,90 Natural#f7f5f4247,245,244 Yellow#ffcf32255,207,50 Grey#8eafbf142,175,191 8 Color Palette UI Usage IMS Health Confidential ColorsFont Usage AtmosphereAll Navigational items on white, gray bg GrayField Labels Charcoal Titles, Base text, Chart Text, Column Headers ColorsElement usage AtmosphereAll Navigational items on white, gray bg Grey 100%, 50%, 25%Borders, Chart Axis, Separators Natural 100% 50%Alternate content background Red Alerts, Missed Target Indicators, Negative Numbers Atmosphere 25%Selection Highlights White (#fff)Main Content Background OrangeData Visualizations TealData Visualizations YellowData Visualizations BlueData Visualizations 9 Color User Interface Example IMS Health Confidential 10 3. Typography 11 The appropriate and consistent use of typography can have a major impact on both the aesthetic perception and actual usability of an application. Providing our users with visual cues as to the purpose and meaning of the text with which they are interacting is a powerful tool. The following section outlines the typographical structure for Nexxus applications. The key, as it often is, is simplicity. Typography Overview IMS Health Confidential 12 Typography Proxima Nova, Primary Font IMS Health Confidential LevelPXsEMsLine heightExample usage Base text14px1em1.5em (21px)Body text H130px2.1429em1.4em (42px)Page title H220px1.4286em1.05em (21px)Section title H318px1.2857em1.1667em (21px)Sub section title H416px1.1429em1.3125em (21px)Paragraph title H514px1em1.5em (21px)Column header H612px0.8571em1.75em (21px)Footnote 13 Typography User Interface Examples IMS Health Confidential 14 4. Iconography 15 The consistent use of iconography will have an immediate impact on the strength of brand, visual consistency, and usability of an application. Just like type, iconography is a powerful way to provide our users with visual cues as to the purpose and meaning of the interactions within the interface. Iconography Overview IMS Health Confidential 16 Typography Nexxucons IMS Health Confidential We have designed an icon font titled Nexxucons, which can be found in the UI Library. Icon fonts are scalable vector icons that can be easily customized with CSS and look great on any resolution. They also will play nice with older browsers, as well as reduce HTTP requests. 17 Typography UI Example IMS Health Confidential 18 5. Logos 19 In order to consistently brand our application suite, a set of logos has been developed for each application, and the suite as a whole. The following section provides you with an overview of these logos and their proper usage. The primary consideration is that each product uses its unique logo and lockup when referencing brand identity in areas such as primary navigation, log-in and product generateds. Reserve the Nexxus logomark for situations when referencing the suite, and the interconnectivity of the applications within it, like the footer. Logos Overview IMS Health Confidential 20 Logos Examples IMS Health Confidential 21 Logos Mobile Usage IMS Health Confidential The product specific logomark is the one that should be used on the home screen and launcher icons, startup and sign in screens. 22 Logos Web Usage IMS Health Confidential The product specific logomark is the one that should be used on the sign in screen and the primary navigation. Reserve Nexxus use for the footer. 23 6. Patterns 24 A user interface consists of a myriad of individual patterns, all of which combine to create an overall UI aesthetic. Aligning these patterns across our applications, and to each other, contributes greatly to a unified user experience and appreciation for our applications. The following section provides you with the specifications for the most commonly used patterns within the Nexxus suite. This does not cover every possible pattern in each application, but we have identified these as primary candidates for update due to the high ratio of low effort to implement vs. high impact on the overall UI design. Patterns Overview IMS Health Confidential 25 Patterns Hyperlinks IMS Health Confidential Standard Normal#25b4ff Hover#25b4ff; underline Alternative (footer/utility) Normal#8eafbf Hover#8eafbf; underline 26 Patterns Buttons IMS Health Confidential ExamplesCSS All Buttons.button{ border-radius:3px; padding:10px 17px 10px 17px; font-family: Proxima Nova, Helvetica, Arial, sans-serif; font-size:14px; } Atmosphere (default).button atmosphere{ background:#25b4ff; color: #fff; box-shadow: inset px rgba(0,0,0,0.03) } White (alternative).button white{ background:#fff; color: #3a4f5a; box-shadow: inset px rgba(142,175,191,0.5) } 27 Patterns Button Hovers IMS Health Confidential ExamplesCSS Atmosphere hover.button atmosphere:hover{ background-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.03) 100%); White hover.button white:hover{ background-image: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(142,175,191,0.15) 100%); 28 Patterns Button Focus IMS Health Confidential ExamplesCSS Atmosphere focus.button atmosphere:focus{ background-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.05) 100%); box-shadow: inset px rgba(0,0,0,0.1); White focus.button white:focus{ background-image: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(142,175,191,0.15) 100%); box-shadow: inset px rgba(142,175,191,1); 29 Patterns Tabs IMS Health Confidential ExamplesStyle Guidance Tab Text: Atmosphere, Title Caps Selected Tab Text: Charcoal, Title Caps Tab Outline: solid 1px #8eafbf, 3px border-radius Tab Hover: background hover, rbga(37,180,255,0.15) 30 Patterns Dropdowns IMS Health Confidential ExamplesStyle Guidance Dropdown field border: solid 1px rgba(142,175,191,0.5) border-radius: 3px background: #FFFFFF color: #3A4F5A box-shadow: 0px 1px 4px rgba(0,0,0,0.15); Dropdown list Border: solid 1px rgba(142,175,191,0.5) border-radius: 3px Background: #FFFFFF Color: #3A4F5A box-shadow: 0px 1px 4px rgba(0,0,0,0.15); Selected in list background: rbga(37,180,255,0.25) color: #FFFFFF Highlighted in list background: rbga(37,180,255,0.1) Color: #3A4F5A 31 Patterns Tables IMS Health Confidential ExamplesStyle Guidance Row/column header text* Color: #3A4F5A Data text* Color: #3A4F5A If text is clickable, use navigation color: #25B4FF Column alignment Standard: left Number data: right Header row border-bottom: solid 1px #3A4F5A Alternate row shading background: rgba(142,175,191,0.15); Hover row shading background: rgba(37,180,255,0.15); Border-left: solid 3px #25b4ff; 32 Patterns Modal Windows IMS Health Confidential ExamplesStyle Guidance Modal-box background: #FFFFFF Border-radius: 3px; UI-Dimmer background: rgba(0,0,0,0.3) Title Size page 8 Color page 12 Input fields Page 36 Buttons Default page 26 Hover page 27 Input page 28 33 Patterns Tooltips IMS Health Confidential ExamplesStyle Guidance Toolltip shape border-radius: 3px; background: #ffffff border: solid1px rgba(142,175,191,0.5) box-shadow: 0px 1px 4px rgba(0,0,0,0.15); Toolltip text As per Standard text guidelines Toolltip behaviour transform: translateY(-10px); transition: opacity.3s ease-in-out; 34 Patterns Checkboxes IMS Health Confidential ExamplesStyle Guidance Unchecked border-radius: 3px; background-color: #ffffff box-shadow: inset px rgba(142,175,191,0.5) Checked background-color: #25B4FF box-shadow: inset px rgba(142,175,191,0.5) 35 Patterns Radio Buttons IMS Health Confidential ExamplesStyle Guidance Unselected background-color: #ffffff box-shadow: inset px rgba(142,175,191,0.5) Selected background-color: #25B4FF box-shadow: inset px rgba(142,175,191,0.5) 36 Patterns Input Fields IMS Health Confidential ExamplesStyle Guidance Standard with placeholder text: border-radius: 3px; box-shadow: inset px #8eafbf background-color: #FFFFFF color: rgba(142,175,191,0.5) Standard with input text: box-shadow: inset px #8eafbf color: #3A4F5A Selected with input text: box-shadow: inset px #25b4ff color: #3A4F5A Validation fail with input text: box-shadow: inset px #fb4f39 color: #3A4F5A 37 Patterns Pagination IMS Health Confidential ExamplesStyle Guidance Page link: color: #25B4FF ; Page link hover: background: rbga(37,180,255,0.25); border-radius:3px; Selected page text: color:#3a4f5a; Pagination behavior: Maximum of 5 pages. For more than five, second to last page converts to ellipsis 38 Patterns Breadcrumbs IMS Health Confidential ExamplesStyle Guidance Navigable levels = Hyperlink Color: #25B4FF Chevron separators Color: #8EAFBF Chevron icon provided in Nexxucons font Current level =Title Color: #8EAFBF 39 Patterns User Interface Examples IMS Health Confidential 40 7. Page Layout 41 The applications which comprise the Nexxus product suite all come with their own specific page layouts. However, there are common layout structures across the applications. Standardizing the placement and appearance of these structures will be a major step towards product alignment. The following section outlines the two primary page structures for Nexxus and how they can be applied. It is understood that this particular update can be the cause of the most effort in terms of redevelopment, but also provide the greatest benefits for consistency in user experience. Page Layout Overview IMS Health Confidential 42 Page Layout One Column IMS Health Confidential Primary navigation Secondary Navigation Main Content Footer Branding Utility navigation The basic user interface has been divided into 6 sections. How they appear and function will serve to create a common user experience for our applications. Option 1(right) consists of one column and has the primary navigation being handled on the top of the interface. 43 Page Layout One Column Example IMS Health Confidential 44 Page Layout One Column Specs IMS Health Confidential Navigation Bar Style Guidance standard fixed height: 70px background-color: #25b4ff; background-image: linear-gradient(180deg, rgba(255,255,255,0.02) 0%, rgba(0,0,0,0.02) 100%); box-shadow: 0px 1px 4px rgba(0,0,0,0.15); on-page-scroll, box-shadow: 0px 2px 6px rgba(0,0,0,0.2); Example 45 Page Layout One Column Specs IMS Health Confidential Footer Branding 50px 70px Style Guidance standard fixed height: 70px Logo must use an SVG Margin-left: 50px; 46 Page Layout One Column Specs IMS Health Confidential Primary Navigation 2 nd tier nav dropdown upon hover 150px Unordered list 125px Style Guidance Font: 14px, rgba(250,250,250,1) hover: rgba(250,250,250,0.5) List items all are padding-right:34px UL is Margin-left: 150px; Width will vary based on application 47 Page Layout One Column Specs IMS Health Confidential Utility Navigation* * For specifications on the Utility Widget, see page 54 Style Guidance Width:300px (fixed) Margin-left:125px; Margin-right:50px; Product grid icon has padding-left: 35px; requires click to open Notification icon requires click to open Username: 14px rgba(250,250,250,1) Production Environment: 12px rgba(250,250,250,0.5) 50px 300px 125px 35px 48 Page Layout One Column Specs IMS Health Confidential Footer 50px Varies 50px 25px Style Guidance Margin:50px; Border-top: solid 1px #8eafbf; Width varies Padding-top:25px; Font: 12px, #8eafbf Nexxus logo: align right; 49 Page Layout Two Column IMS Health Confidential Option 2(right) has the primary navigation being handled in the left side of the user interface. It is important that you choose only one version per application. Your decision should be driven by factors around what creates the best experience for your user, if the application is for tablet or desktop, and what your current legacy structure is. Primary navigation Secondary Navigation Main Content Footer Branding Utility navigation 50 Page Layout Two Column IMS Health Confidential 51 Page Layout Two Column Specs IMS Health Confidential Navigation Sidebar 40px 145px Style Guidance fixed height: 100%; Fixed width:225px; background-color: #25b4ff; Padding:40px 40px 80px 40px; 80px 52 Page Layout Two Column Specs IMS Health Confidential Branding 75px Style Guidance Max-width:145px; Logo must use an SVG Padding-bottom 75px; 145px 53 Page Layout Two Column Specs IMS Health Confidential Primary Navigation 20px Style Guidance Titles: 14px, Uppercase, rgba(37,180,255,0.5) Titles padding-bottom 20px; LI: 14px, rgba(250,250,250,1), line-height; 21px; UL: padding-bottom 50px; Icons: max-width 18px; padding-right:15px; 50px 18px 54 Page Layout All Columns Specs IMS Health Confidential Utility Navigation A. Username and product instance/info B. Non-standard combined select/dropdown/tooltip functionality C. Long, scrollable list inside a dropdown D. Standard button hierarchy E. Styling located in UI Library 55 8. Applying the Guide 56 Now that all the tools and guidance have been documented, how is the best way to proceed? The following is a case study which takes you through an example of a rebranding process for one screen from the Nexxus Marketing application. This step-by-step description will show how a systematic approach, using rules-based design, can be easily and effectively implemented through a process of analyzing and applying. While we dont cover all the patterns listed previous, you will notice how addressing color, typography, design patterns, and page layout alone can have a huge impact on the visual aesthetic of our products. Applying the Guide Overview IMS Health Confidential 57 Applying the Guide Analyze Current UI IMS Health Confidential 58 Applying the Guide Identify Color Usage IMS Health Confidential Take a look at your applications screen and pick out each different color which is being used, and identify what it is being used for. This will later allow you to map the color usage to the updated palette. It may also highlight other areas where the color palette may be simplified. In this example, we see that two different shades of blue are used for hyperlinks (breadcrumbs and filters). 7 IDNameColorUsage 1 Base text#333333Basic text 2 Background grey #f5f5f4Alternate row shading 3 Background grey fade #ffffff to #eaeaea Primary navigation, Table header control, buttons 4 Highlight Blue #2f6ca2Table header border, breadcrumb, primary nav indicator 5 Link Blue#0000ccFilter links 6 Table row highlight #454545Table row highlight 7 Line#eaeaeaBorders, 59 Applying the Guide Assess Typography IMS Health Confidential By systematically identifying each use of text on the screen, it is possible to categorize the various different typographical styles used. This may serve to highlight the existing complexity and allow you to identify opportunities to simplify the use of text during the re-design process. For example, on this screen, three distinct text styles are used in the footer. This can certainly be optimized. IDNameSizeColor Weigh t 1Primary nav bold 2 Primary nav dropdown 93%#464646bold 3 Account button em#666bold 4Breadcrumbs bold 5Page title146.5% bold 6Button em#666bold 7Filter label #666 8Filter data #3b5ecf 9 Record indicator # Table column header 85%#4d5963bold 11Table data # Utility nav85%#757575bold 13 Language select 93%#757575bold 14Copyright85%# Terms/privacy85%#757575bold 60 Applying the Guide Determine UI Patterns IMS Health Confidential The next step is to identify those patterns used in your screen which match the updated patterns in this document. It is likely that your application will have patterns not covered in this initial UI document. For those cases, rely on the basic branding principles in this document, and your judgement and knowledge of the application to determine how they should be updated. IDName 1 Breadcrumbs 2 Buttons 3 Hyperlinks 4 Input fields 5 Pagination 6 Tables 7 Checkboxes 8 Icons 61 Applying the Guide Align Page Structure IMS Health Confidential The final exercise is to determine the page structure of your applications interfaces in order to compare and align to the guidelines within. This final step may have the greatest technological/development impact so, again, rely on your best judgment to determine what can and should be updated. 62 Applying the Guide Updated UI IMS Health Confidential 63 9. Resources 64 Hopefully this document has given you the tools, process and confidence needed in order to start to align your application to the Nexxus UI guidelines. Of course, during any development process, unexpected issues and questions will arise. The next page provides you with the contact information for any issues which is not directly addressed by this document or those resources. We are here to help! Resources Overview IMS Health Confidential 65 Resources Contact List IMS Health Confidential Chris Irwin Creative Director, Technology & Applications Derek Slager Director of Platform Engineering, Technology & Applications Jason Lockwood Sr. Manager Platform UI, Technology & Applications Joshua Ellis Sr. Manager Product UX, Technology & Applications