Clean, Open, Simple Design

We embrace a design that gives the user a feeling of simplicity and clarity.

• By using ample whitespace to trap key information and actions, the layout can be a more effective guide for the user.
• Bright, high-contrast colors communicate boldness and professionalism, while giving the user a solid foundation of confidence.
• If the aesthetics of a site make it look easy to use, users report that they have a more successful experience.
• There is a tendency sometimes to see an open space on a page and say, "We should put XYZ there." But much of good UX and design is more about what you DON'T put on the page, rather than just what you do.
• Good editing of content can lead to cleaner pages, which in turn creates more simple user experiences.
• Why Simpler Sites Are Scientifically Better
• Minimal Business/Coprate Designs

One UX to Rule them All

In the modern world, more web/app content is delivered via mobile device than ever before.

• Our site must look and function equally as well across all top-level browsers and mobile devices.
• Even if the application has a native app, our web-based site and application must be equally accessible across any screen, any device.
• Through responsive design, and use of liquid layouts the goal is to allow all page content to expand/contract to gracefully fill its viewport space, and collapse tabled content into simple interactions that allow user to view important data, and take action.

• 67% of users are more likely to purchase a product or service from a mobile-friendly site.

• 48% of users feel frustrated and annoyed when they get to a site that's not mobile-friendly.

• 74% of users are more likely to return to a mobile-friendly site.

• Adobe Liquid Layout Guidelines

Make It Familiar

A key point to remember is this: users spend 99% of their time on the Web/Mobile on other websites and applications.

• This means you cannot depart from familiar layouts and interaction methods without negatively impacting the user.
• A rule of thumb for UX I use is: If sites and apps like Google, Facebook, Youtube, Instagram, Twitter, Netflix, Amazon, CNN, ESPN, Microsoft, Apple, and similar sites are using this method, your UX is likely fine.
• If none of those sites/app are using the UX you propose, you should rethink your approach.
• This doesn't mean you can simply copy Amazon and think it will automatically be a great experience for your users. But making sure your site interactions are familiar will leverage proven methods for your users.

Step Into the User's Mind

A maxim you'll hear me repeat: If you built your application to work perfectly for you, you've built the wrong system.

• In addition to being Designers & Developers, UX Folk, Marketing & BizDev, we are also users and consumers of UX methods all around us.
• As advanced users, our skill and success on the web is due to our experience. We've all found good methods that work for us as we traverse the web.
• We can hack and find work-arounds to find our way through a bad UI, or a poorly architected site, and find our way out of the woods with relative ease.
• Now picture some who is a total rookie with limited experience. I picture my 80-year-old mom. Someone who can barely check e-mail. They hit obstacles on most sites and apps they encounter.
• Now look at our site/app. Would a rookie be able to use it effectively? Are we building it so that a novice can do it?
• Imagine that an HR department hires Billy to manage their hiring process. Billy has experience with HR, but Billy spends most of his Web time on social media.
• Are our layouts and UX methods as simple to use as a social media site/app?

They should be.

At-a-Glance Education

UX is like telling a joke: If you have to explain it, it isn't that good.

• Studies show the users typically do not read site content, mostly just page titles, headers, and bullets.
• They tend to skip instructional text and large blocks of text.
• How many times have I made a difficult-to-use page, and I think "I'll add instructions to fix it" as a solution. It is a signal to me that I should stop and re-think my methodology and implementation.
• Copy will never solve a poor user experience.
• We aspire to a level of intuitiveness that will enable a user to be successful without training, instructions, or fuss. They see it, they get it. That is the bar we have set.
• Nielsen Article: Scanning Patterns

The Right Clicks: More Important than the Fewest

There used to be a time where the most important metric for UX was to count "how many clicks" to get from points A to Z.

• In the UX world what has become more important is that you present Right Clicks.
• Data presented at the An Event Apart conference in 2016, showed that users were OK with extra clicks if it reduced their confusion.
• The point here is that shotgunning as much data and as many actions as will fit on a screen in the name of "fewer clicks" makes for a confusing experience for users.
• The best user experiences are ones that feed the user in smaller, digestible chunks.
• You simplify pages by following simple, familiar: Click-to-Act methods. Let the user isolate, then act.
• Why Counting Clicks Is a Thing of the Past
• Breaking the 3-Clicks "Rule" of UX

Only Show Relevant Info & Actions

Users need information and clear actions to be successful in their experience.

• To accommodate this, we only present information that is needed by them: for example, we may use internal IDs or roles to keep track of information in our internal system. Those items are meaningful to us, but may not be to the user.
• Any time we are graying-out or disabling data, we should ask ourselves, "Should we remove this altogether?"
• We only show actions that they can take. For example we don't show buttons they can't use, or search fields that are disabled.
• If the user can take action on it, show the button, field, link, or action.
• If the user is not informed by it, or can't take action on it, the button or action link should not show (i.e. No disabled buttons or fields).
  Before:
  
  After:
  

Or in other words, a user shouldn't have to search for relevant information or actions.

Standard Logo

This is for normal usage.

 

On Dark Background

This is for usage on a dark background.

 

All Black

This is for cases where the logo must be all black.

All White

This is for cases where the logo must be all white.

Main Colors

Typeface

We use a cascade of fonts in the font-family, from optimal to acceptable, with a baseline size.

font-family: "Roboto Condensed","Helvetica Neue", Helvetica, "Open Sans", sans-serif;font-size: 12px;

Body Text

Body text is selected for optimal legibility and scalability. In this case we selected Roboto Condensed with a baseline size at around 12px;

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc neque neque, dignissim in neque convallis, egestas pharetra risus. In imperdiet tortor et porttitor aliquam. Pellentesque interdum orci vitae turpis vestibulum, id sagittis velit ultrices. Nullam in sollicitudin ipsum. Mauris eget dolor vita

Links

Links are typically underlined and blue #336699, with a green #a6cb0b hover.

Pellentesque interdum 

Liquid Layout

The page elements are pliable, like a liquid filling a bottle, they expand and contract themselves based on their own attributes, to fill their container element: Ex: width:100%

Adaptive Layout

The page elements are fixed, and their attributes are physically changed by our application to fit their viewport size: Ex: width:1000px > width:400px

We Use the Best of Both

While we use a combination of both, your work will be with the Adaptive Layouts native to PrimeNG.

You can specify a different number of sections for large, medium, and small viewports. The elements change how many sections they fill up based on their classes:

<div class="p-grid">
  <div class="p-col-12 p-md-6 p-lg-3">Lorem</div>
  <div class="p-col-12 p-md-6 p-lg-3">Ipsum</div>
  <div class="p-col-12 p-md-6 p-lg-3">Dolor</div>
  <div class="p-col-12 p-md-6 p-lg-3">Est</div>
  <div class="p-col-12 p-md-6 p-lg-4">Divisia</div>
  <div class="p-col-12 p-md-6 p-lg-4">Tres</div>
  <div class="p-col-12 p-md-12 p-lg-4">Partes</div>
</div>

PLEASE NOTE: You must wrap a <p-grid> around every responsive construction. If you have nested constructions, each one needs to be wrapped in a <p-grid>

• Large Viewport
  p-lg-3 will spread the element across 4 of the sections, p-lg-4 will spread the elements across 3 of the sections (will look like fig1).
• Medium Viewport
  p-md-6 will spread the elements across half the sections (will look like fig2). Take note that the last cell in the construction is different and will take up all 12 sections in a medium viewport.
• Small Viewport
  p-col-12 will fill the element across all 12 sections (will look like fig3).

Page Structure

• HEAD: Contains Meta definitions and calls to Scripts and CSS Styles.
• BODY: Contains the 3 major page sections - Header, Main, and Footer.
• HEADER: Contains branding and Nav elements.
• NAV: Contains a UL structure of links to the main site pages.
• MAIN: Contains the main content of the page broken down into Sections (Uses unique class [class="area-page"] ex: class="hcm-jobreq" or class="home-main")

  <p-breadcrumb [model]="breadcrumb"></p-breadcrumb>
  <h1>Page Title</h1>
  <main class="uniquename">
      <div class="instruction-text">Lorem ipsum dolor.</div>
      <section>
          This is where your content goes.
      </section>
  </main>

• This gives us flexibility to have GLOBAL styles, but also page-specific styles. From the global stylesheet, not in page.
• It is always preferred to use a style in the component stylesheet, or the main global stylesheet. Sometimes, an inline style will be needed, but only after exhausting other methods.
• PAGE TITLE: Contains a descriptive title for the page (i.e. Employee Profile, Expense Report)

• SECTION: Contains the constructions and presentation elements of the page - Articles, Tables, Forms, etc.
• ARTICLE: Contains any content. It can function as an identifiable sub-section.
• TABLE: Contains data. Tables are not to be used to create layout. Tables typically have controls such as search, filtering, and pagination.
• FORM: Contains typically Input, Select, TextArea etc. fields, action links, and buttons.
• FOOTER: Contains copyright and legal information, and key links.

HTML Deprecated & Less-Preferred Attributes

Following is the list of less-browser-friendly or deprecated HTML attributes ot tags, and alternative CSS options available.

Component Level CSS Issues

• Some styles are overridden by more persisted styles in stylesheets up the hierarchy.
• Sometimes the styles don't even render in the dom.
• If your component-level css is not working, add your style to global.css with comments.
• Make sure any style you add has the unique <main class="uniquename"> for your page.

Example

/* Forced width on project input fields - Jin */
.project-main td input{width:100px;}

• Using standard tabset components should inherit all the appropriate styles as necessary.
• In general, each tab should either have its own save button, or should prompt the user to save unsaved data before leaving each tab.

<p-tabView (onChange)="onTabChange($event)"  [activeIndex]="tabIndex">
      <p-tabPanel header="Lorem">Your Content Here</p-tabPanel>
      <p-tabPanel header="Ipsum">Your Content Here</p-tabPanel>
    </p-tabView>

Buttons

Buttons should be for only the most important actions on the page (typically a page-level Save/Cancel, or an Accept/Decline in a dialog). For each page, there should only be one set of buttons, at the bottom-right of the page for optimal usability.

Competing Buttons Confuse Users

If everything is bolded [or a button], then nothing is bolded [or a button.]

There are typically three types of buttons: action, inaction, and negative. The right-most button is the Action button, which is for the positive actions like Save, Continue, or Submit. Inaction buttons are the lesser actions like Close or Cancel. Negative buttons are actions like Delete.

High Converting Buttons

Button/Icon	Syntax
	<button pButton class="button-action" icon="fa fa-check" label="Save" type="button" (click)="function()" pTooltip="Save"></button>
	<button pButton class="button-inaction" icon="fa fa-close" label="Cancel" type="button" (click)="function()" pTooltip="Cancel"></button>
	<button pButton class="button-negative" icon="fa fa-close" label="Delete" type="button" (click)="function()" pTooltip="Delete"></button>
	<button pButton class="icon-action" icon="fa fa-pencil" type="button" (click)="function()" pTooltip="Edit"></button>
	<button pButton class="icon-negative" icon="fa fa-trash" type="button" (click)="function()" pTooltip="Delete"></button>

Secondary Actions

Secondary actions are for times on the page where you need to trigger an action that is not at the same level as Save/Cancel (typically Add/Edit actions, or See More actions. These actions are bolded links with an appropriate icon.

<button pButton class="action-secondary" icon="fa fa-plus" type="button" (click)="function()" pTooltip="Add"></button>

NGX Charts

Tables, Rows, & Columns

Tables are mostly focused on presenting data and taking action on that data. For a good table presentation, actions and controls must be obvious, relevant, clear and in the right position.

We have a common table wrapper that is used across the board.

• Across the top of the table are a standard set of tools/actions. You select their alignment using the corresponding ng-template: 
  • <ng-template #rightCaption>
  • <ng-template #leftCaption>

• Actions that affect the table itself such as refresh and viewing options align to the left.
• Table filter search box aligns to the center.
• Actions like "Add" or "Generate" are typically aligned right.
• Tables typically have an action column to the very of the table which contains icons for actions like "Edit" or "Delete"

• Number records and pagination are displayed bottom-right of the table
• For the most part, columns where the cells contain unique values should be sortable. Columns which have the same content should not be (ie Actions)

Table Code Example: <app-data-table #dt [columns]="tableColumns" [value]="positions" sortField="positionTitle" [bodyTemplate]="body" [leftCaptionTemplate]="leftCaption" [rightCaptionTemplate]="rightCaption"> <ng-template #leftCaption> <button pButton type="button" class="icon-action" icon="fa fa-refresh" pTooltip="Refresh Positions" tooltipPosition="top" (click)="onClickGetPosition()"> </button> </ng-template> <ng-template #rightCaption> <button pButton type="button" class="action-secondary" icon="fa fa-plus" label="Position" pTooltip="Add New Position" tooltipPosition="top" (click)="onClickAddPosition()"> </button> </ng-template> <ng-template #body let-columns="columns" let-row="row"> <tr> <td *ngFor="let col of columns" [ngSwitch]="col.field"> <span class="p-column-title"></span> <span class="p-cell"> <div *ngSwitchCase="'positionTitle'"> <a (click)="onClickShowDialog(row.positionTitle)"></a> </div> <div *ngSwitchCase="'positionDuties'"> <button pButton type="button" class="icon-action" icon="fa fa-external-link" pTooltip="View details." tooltipPosition="top" (click)="onClickShowDialog(row.positionDuties)"></button> </div> <div *ngSwitchCase="'qualification'"> <button pButton type="button" class="icon-action" icon="fa fa-external-link" pTooltip="View details." tooltipPosition="top" (click)="onClickShowDialog(row.qualification)"></button> </div> <div *ngSwitchCase="'action'"> <button pButton type="button" class="icon-action" icon="fa fa-pencil" pTooltip="Update Position" tooltipPosition="top" (click)="onClickEditPosition(row)" [disabled]="!row.positionGradeId"> </button> <button pButton type="button" class="icon-negative" icon="fa fa-trash" pTooltip="Delete Position" tooltipPosition="top" (click)="onClickDeletePosition(row)" [disabled]="!row.positionGradeId"> </button> </div> <div *ngSwitchDefault> <app-data-table-renderer [row]="row" [col]="col"></app-data-table-renderer> </div> </span> </td> </tr> </ng-template> </app-data-table>

P-Table Column Headers

Using this method will allow for table column headers to appear on all-sized viewports: <td *ngFor="let col of columns" [ngSwitch]="col.field"> <span class="p-column-title">{{col.header}}</span> <span class="p-cell"> Your Content Here </span> </td>

Expandable Rows

• Expanded icon toggles from ">" to "v"
• Expanded row has a background color to isolate it from other page content.

Form Syntax and Usage

Forms are primarily for users to fill out and submit. If a user is not informed by and cannot take action on a field, it should not display.

Desktop View

Labels/fields naturally flow independently into 2 columns

• Layout should be 2-Column Vertical Stack: For easier scanning, avoid horizontal forms.
• Forms should have a title and instructional text.
• Labels should be bold and to the left of the field (right-justified) on large viewports, or on medium-to-small viewports above the field (left-justified).
• Form fields should be the generally the same width.
• If a form field or tab does not inform the user, nor can a user take action, the field should not display.
• Labels for form fields should not have a colon.
• p-dropdowns should not have an appendTo="body" parameter.

Think of Forms on an Axis

Placeholder Copy Used in Field

Forms Are Responsive

Use a standard PrimeNG Grid construction of p-lg-4/p-lg-8 to layout your forms. If you have longer labels, you might need to go p-lg-5/p-lg-7. Be sure to wrap each construction in a p-grid and include a p-col-12 in your construction for small viewports.

Large Viewport

Small Viewport

Toggles, Checkboxes, and Radio Buttons

Icon Library

We use the Awesome Fonts Icon Library. It uses a typeface to render icons, which allows us to control their size, shape, color, and characteristics just like text.

• fa-lg
• fa-2x
• fa-3x
• fa-4x
• fa-5x

Icon Color: can be controlled like a font color through css: .fa-pencil{color:blue;}

Commons Icons in App

More compatible icons can be found here

Common Toast Messages in App

In-Page Help

In the upper-right corner of the <main> wrapper of each page, the In-Page Help icon appears, which shows a list of context-sensitive help topics. These topics could take the user to articles, or spawn a dialog with a OneLynk Training Video.

<div class="page-help-topics"><button pButton type="button" (click)="help.toggle($event)" class="icon-action" icon="fa fa-question-circle" pTooltip="View Help Topics" tooltipPosition="top"></button>
    <p-overlayPanel #help>
      <h4><i class="fa fa-question-circle"></i> Help Topics</h4>
      <ul>
        <li><a (click)="display11=true">How do I see an overview?</a></li>
        <li><a (click)="display12=true">How do I view my Worklist?</a></li>
        <li><a (click)="display13=true">How do manage Worklist items?</a></li>
      </ul>
    </p-overlayPanel>
    <p-dialog header="Show Me | WorkGroups: Overview" [(visible)]="display11" [modal]="true" [responsive]="true">
      <iframe *ngIf="display11" width="560" height="315" src="https://www.youtube.com/embed/XusBB1Kiq1w?start=0;autoplay=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
        allowfullscreen></iframe>
    </p-dialog>
    <p-dialog header="Show Me | WorkGroups: Your Worklist" [(visible)]="display12" [modal]="true" [responsive]="true">
      <iframe *ngIf="display12" width="560" height="315" src="https://www.youtube.com/embed/XusBB1Kiq1w?start=287;autoplay=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
        allowfullscreen></iframe>
    </p-dialog>
    <p-dialog header="Show Me | WorkGroups: Managing a Worklist Item" [(visible)]="display13" [modal]="true" [responsive]="true">
      <iframe *ngIf="display13" width="560" height="315" src="https://www.youtube.com/embed/XusBB1Kiq1w?start=491;autoplay=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
        allowfullscreen></iframe>
    </p-dialog>
  </div>

  <!-- In Your component.ts -->
  display11: boolean = false
  display12: boolean = false
  display13: boolean = false

Inline Help Links

To place a help link next to a label, place the following syntax after the text in the label, still inside the <label>:

  <!-- Inline Help -->
  <label>Label 1
      <button class="help-tip" type="button" pButton icon="fa fa-info-circle" pTooltip="Lorem ipsum dolor" tooltipPosition="top"></button>
  </label>

If input criteria is required beore the table can render OR you only have <4 fields, you should show the fields.

Otherwise, use an expandable search section.

Search Panel Code Example: <div style="margin: 15px 0px 10px 0;"> <button pButton class="action-secondary" (click)="showSearch = !showSearch" icon="fa fa-search" label="Search"></button> </div> <div *ngIf="showSearch" class="searchPanel"> <div class="p-grid"> <div class="p-col-12 p-md-6 p-lg-6"> <div class="p-grid"> <div class="p-col-12 p-md-4 p-lg-4"> <label> Project Name&nbsp;</label></div> <div class="p-col-12 p-md-8 p-lg-8"> <input style="width:220px;" required name="name" maxlength="55" type="text" [(ngModel)]="projectSearchObject.projectName" pInputText/> </div> </div> </div> <div class="p-col-12 p-md-6 p-lg-6"> <div class="p-grid"> <div class="p-col-12 p-md-4 p-lg-4"> <label> Customer&nbsp;</label></div> <div class="p-col-12 p-md-8 p-lg-8"> <p-dropdown [options]="customersSearchDropDownOptions" placeholder="Select..." filter="true" [(ngModel)]="projectSearchObject.customerId" style="max-width:220px;"></p-dropdown> </div> </div> </div> <div class="p-col-12"> <div class="p-grid"> <div class="p-col-12 p-md-2 p-lg-2"></div> <div class="p-col-12 p-md-10 p-lg-10"> <button pButton class="inaction-secondary" (click)="onClearSearch()" icon="fa fa-eraser" label="Clear"></button> <button pButton class="action-secondary" (click)="onClickSearch()" icon="fa fa-search" label="Go"></button> </div> </div> </div> </div> </div>