1 Introduction

When a software company develops multiple products and employs many UX teams, standard UI guidelines help balance the experience across all these products, creating an advantageous consistency. Guidelines can strengthen a company’s brand and increase development efficiency, making it easy for teams to re-use and replicate company-wide patterns and color schemes. They help provide consistent design language. Users of multiple products from the company can then navigate and complete their tasks with a smaller learning curve and an easier transition between products [1].

Large companies that produce many products struggle to maintain consistency while innovatively solving for unique requirements and distinct use cases. Companies that succeed learn to balance both. Having a coherent design vision and overall consistency can also help sales teams effectively showcase products when they are selling multiple products to the IT users of fortune 500 companies. The onboarding experience for the customers using multiple products is made easier.

This cohesive experience starts with the visual language. A product graphic interface’s visual language is made of collection of components or elements [2].

Our challenge at Symantec was to understand what critical design elements should be prioritized in adoption of company-wide guidelines, to maximize the advantages of consistent brand and design elements, while still allowing for unique individual product requirements and making guideline adoption easier for development teams.

2 Objective

Understand which aspects of visual design guidelines (such as color, button, font, navigation structure and controls) create the greatest perception of consistency across products. The goal of our research is to find out the minimum threshold that can bring about a sense of being from the same company even when multiple factors make the product user interfaces unique from each other. This paper helps identify which elements and which combinations can help build such associations.

3 Related Work and Discussion

User interface guidelines first appeared in a digital world in 1986 with the introduction of a single set of guidelines for U.S. Air Force, mostly used for mainframe technology [3]. Our secondary research indicates that a recurring goal has been on how to make guidelines more acceptable while designing & developing products.

We found efforts that stressed strategies for promoting common UI guidelines as done by Adobe researchers [4] or by Cisco researchers [5]. Efforts like research-based web design and usability guidelines [6] have data available by looking at trends in the digital communications and by aggregating available secondary research resources.

However, the user input in creating interface guidelines was hard to find. This gap in the available research made us look at more consumer focused product models like Google, who have ready access to users of all types. Google operates on the belief that users get deeply passionate about the products they work on because they ‘live’ these products [7]. Hence Google has a user database that they tap into all the time to get feedback on new product ideas and guidelines. In enterprise, users are harder to source and our research did not reveal similar or parallel efforts. All Google products have buttons, top-bar, consistent grid structure and search as common elements and part of their guidelines. Very often, such a design vision is difficult to permeate through the entire product families of a big company. Identifying the minimum threshold of consistent UI elements to promote brand recognition and enable cross-product learning, would help us maximize adoption of guidelines as well as the benefits of using them.

4 Research Methodology

Our research largely involves users as primary information source. In all, we conducted five user studies across U.S and India, with an external panel of usability testers (n = 450). Three studies were qualitative (n = 42) and two with quantitative (n = 408).

This research experiment was designed as a modified A/B testing where we showed participants two pages (1280 × 1024 pixels) on a screen monitor. The pages had one UI element that was different, while other UI elements were the same. For example, if we were testing for background color, the screen would have one page with white background while the other page would have black background. Other elements like header-footer color, controls used (textbox, checkboxes, tabs, tables) and button colors were all the same in both pages. Refer Table 1 for other comparisons. Elements were disguised so that they did not look identical, also the content was gibberish in order to remove bias and ensure that users could focus on visual elements. We included home pages, dashboards, and list pages, e.g., visual elements on an alerts page of one product should be consistent with the dashboard of other product.

Table 1. List of screens showing tested UI elements and expectations
Full size table

Participants were asked to look at two screens to compare and had to answer, “Are the two screens from the same company?” with ‘Yes’ or ‘No’ (henceforth called ‘Association’). If the user answers, “No, the screens are not from the same company”, we assume it implies that that tested variable is important in creating association. And if 6 out of 10 users answered ‘No’, then we can say ‘association score’ created by the tested variable is 60.

For quantitative research, we carried out surveys using an online tool. To gather qualitative answers, we conducted multiple rounds of 1:1 sessions.

The user-base of enterprise products in Symantec approximates to 430,000 users (FY2013-14). Our addressable market for enterprise products is less than even our own consumer product market. In addition, users are hard to recruit because of the challenging and diligent nature of their jobs. Given such constraints we knew we could not expect to find enough of our users to complete a long complex survey in time to break down and analyze every relevant aspect of our guidelines project. Instead, we took to new innovative research tools to get a better understanding of which elements are most powerful in creating a perception of consistency.

Based on Gestalt’s theories, we know that users view the screen as a consolidated perception; and it is difficult to pick one design element at a time and analyze it separately to make a judgment. With this understanding, we worked around to devise a simple technique to still arrive at the minimum common UI elements.

Based on our experience and existing literature [8], we identified five visual elements and UI components namely background color, header-footer, UI controls, page layout and button color (Fig. 1), which were weighed for this purpose. Also, there are other design elements that we could not include like typography since large product companies like ours have trademarked their own branding fonts (e.g., Symantec Sans).

Fig. 1.
figure 1figure 1

A typical screen with UI components marked for reference

Full size image

5 Results

The results from the qualitative study (column 2 in the Table 2 below) indicated that background color, button color and header-footer are the elements which when varied make the pages look different. For example, when we varied the button colors (one page with orange button color and other page with blue button color), most participants said that the UI pages did not belong to the same company and pointed out button color as one of the prominent reason for saying so. Therefore to bring consistency among products, button color appears to be one of the key elements to consider.

Table 2. Stage 1- UI screen comparisons, qualitative results, survey outcomes and observations
Full size table

Participants said that the background color, buttons, top bar, menu layout and font color were the elements that helped them gauge similarity. Highlighted table rows, visual representations like graphs and data boxes were other items mentioned as deciding factors for the association.

Our crowd-sourced data showed that association score of background color is 52, followed by header-footer at 47 and button color at 46. Controls and page layout had approximately an association score of 30 each. Therefore, we infer that teams can use this ranking as a guide to choose factors in order to increase brand association between the product lines.

In a follow-up study (Table 3), we wanted to further understand how various combinations in the background color of the content area plus header-footer would lead to increase or decrease in association. We picked these two, as they were top ranked as explained earlier. We found that having same background colors creates the highest association of being from the same company (85). When the background color of the pages is black and one of them has white header-footer color, it is only 51.5 association score and 48.5 drop off in recognition. Complete white and complete black screens have reduced sameness (further goes down to 39). All other combinations appear to reduce the sameness factor. Therefore, one could infer that having all white or all black background color plus header-footer increases sameness.

Table 3. Stage 2- UI screen comparisons, qualitative results, survey outcomes and observations
Full size table

Case Study to Show Implementation. When a family of four products was evaluating the background color for their UI, they found that products when viewed together the inconsistencies became obvious especially when the end-user may be same. In this case, two had white and other two had black. The product teams required real validation from the field to arrive at decisions.

This research recommended use of same background color, and helped teams make an informed decision to align on background color before releasing a family of products with significant inconsistencies in look and feel.

6 Future Research

To make it more robust, future research can deep dive in other UI elements. We can also validate it with some more techniques like multidimensional scaling (MDS) with bigger sample size.