Create Enterprise UIs that your users will love

Michael Prentice

#DevFestFL

Speaker: Michael Prentice

Michael Prentice
@Splaktar

Software Consultant
@DevIntent

Organizer
@GDGSpaceCoast

CTO and co-founder
@MarketAmplified

Angular GDE

Hello and thank you for coming to DevFest Florida this year!

I am based in Melbourne, Florida just 45 minutes east of here on the Atlantic coast.

I run a software consulting company called DevIntent.

I am also an active open source contributor including contributions to the AngularJS and Angular Material projects.

Much of the information that I will share here today is based on my experience consulting on business applications.

Thankfully, I have been blessed to be given the freedom to use Material Design on a wide range of projects.

I am sure that some of you have challenges to getting approval for using Material Design in your organization.

Hopefully the content today will help you make a strong case to your product owner or product manager about the benefits of Material Design.

AngularJS Material In Production

  • GDG-X Boomerang
    • Website template for GDG chapters
  • Harris Dream
    • Data analytics dashboard builder
  • Harris/IATA SkyFusion
    • Aviation management communications tool
  • Self service management tool for an event app company
  • Call center productivity app for a restaurant service company

I got started with AngularJS Material prior to beta.

By the time the project hit 1.0, I found that AngularJS Material was so efficient

that I could skip wireframes and provide clients with functional prototypes in the same amount of time.

I spent a couple of years working with Harris Corporation’s R&D teams to improve their use of AngularJS.

When I left, they had switched from Bootstrap by default to Material Design by default.

Then I went out on my own to help companies implement and refine their implementations of Angular and Material Design.

These companies needed help with AngularJS performance issues, responsive layouts, and guidance in how they were implementing Material Design.

I don’t know if you have any experience with call center software, but it is usually not a pleasing thing to look at or use.

The focus is often on productivity at the cost of employee satisfaction and extra training time to learn an arcane UI.

Even before the Material Design call center app went to production, managers from other departments in the company were

making requests to the Director of Technology to upgrade their internal applications next!

Material Design was a real hit!

Angular Material In Production

  • Market Amplified
    • Data analysis and insights for real estate agents
  • Quoting and ordering system for a metal printing company
  • Pricing and reporting system for a food manufacturer
  • Internal LOB app template for a food manufacturer

I have been working with Angular Material since the alphas a year ago.

The experience last year was quite bumpy during the alpha period, as expected.

However the recent betas have significantly surpassed the capabilities of AngularJS Material.

The project will be entering the release candidate phase soon and is very much worth of your consideration in your next production application.

I have spent most of 2017 working on business applications with Angular Material.

This goal of this talk is to show you why it should be your first choice when starting a new project!

Agenda

  • Define the challenges
  • Material Design goals and concepts
  • Material Design applied to business applications
  • Angular Material
  • Enterprise UI Patterns
  • Other Material Design implementations
  • Other Design Systems

Today we’ll define some of the challenges faced, then dig into some of the core concepts of Material Design.

We’ll see examples of Material Design in used in critical business applications.

Then we’ll look at some of the latest updates to Angular Material before digging into some non-trivial UI patterns.

We’ll wrap up with a review of some alternative technologies and design systems.

Mobility

“The global mobile workforce is set to increase to 1.87 billion people or 42.5% of the global workforce in 2022, up from 38.8% in 2016.”

“By 2025, more than 70% of the workforce will be millennials.”

“They value similar things in an employer brand as they do in a consumer brand and will continue to drive consumerization in enterprise.”

Richard Esposito, GM Mobility Services
IBM Global Technology Services

The global conversion to smartphones is no surprise.

However many Enterprise IT departments are still running critical, internal software that is painful to use on mobile devices.

<show second quote>

As more millennials enter the workforce

<show third quote>

it is getting harder and harder for IT departments to ignore internal applications with poor user experience.

https://www.rcrwireless.com/20170104/opinion/2017-predictions-mobile-workforce-to-drive-further-enterprise-change-in-2017-tag10

Traditional Enterprise UI
State of California

Unsurprisingly, I don’t have permission to show any company’s internal business application horror stories.

So I went online and found some public examples that are good representations of the kind of issues that I have seen in internal LOB applications.

In this example, the state of California has an app for parents who want to calculate child support payments.

They just need to fill out this long form on a single page.

However, they seem unprepared for parents who only have access to the internet from a phone.

Additionally, take note of

https://www.cse.ca.gov/ChildSupport/cse/guidelineCalculator

Traditional Enterprise UI
Landry’s Inc.

This is part of the public facing web app for a multi-billion dollar company with 29,000 employees.

The example on the right is for corporate customers to book significantly large events at venues around the county.

Do you think that this meets the expectations of today’s HR professionals or event planners who often spend most of their day on their smartphone?

The form on the left is used by potential franchisees around the world to apply for the formation of a new franchise location.

This could be a transaction that generates both parties significant revenue over time.

Does this form and layout help make this process more efficient or improve the user experience?

Take note of

http://www.landrysinc.com/groupsEvents/book-restaurant-event.asp

https://www.bloomberg.com/research/stocks/private/snapshot.asp?privcapId=333294

Summary

  • In an eyetracking experiment comparing different kinds of clickability clues, UIs with weak signifiers required more user effort than strong ones.

Recent Study on Clickability Clues
Nielsen Norman Group

Keys to UI Design

  • Contrast
  • Consistency and Repetition
  • Clear Visual Hierarchy
  • Low information density

These apply to designs using Basic HTML, Bootstrap, Flat UI, and Material Design!

You may have read about a recent study that came out in early September. It had a headline grabbing title about how Flat UI designs cause uncertainty in users.

The headline alone had product managers questioning their designers and developers.

However, if you read deeper into the article, you’ll find that the eye tracking research actually confirmed the importance of a number of key UI design guidelines.

If you are building user interfaces and you haven’t embraced the acronym CRAP yet, then I highly recommend that you look into it.
It stands for Contrast.... your important, interactive UI elements need to stand out

Repetition… consistent UI patterns train user’s brains where to look

And then you build a clear visual hierarchy through the use of Alignment and Proximity. This includes intelligent use of negative or whitespace along with grouping items that belong together near each other.

Finally, this study hits on a key human factors issue. Complex, high density user interfaces cause users uncertainty and delay their ability to take action.

Please raise your hand if you have ever seen a complex, high density Enterprise UI?

<respond to audience>

Now let’s take a look at some of the details of study and how Material Design is already built to address them.

“Flat UI” vs Material Design

On the left, we see a traditional link with the blue color and underline.

The right side shows an example of an ultraflat UI where positioning is the only signifier that the element may be interactive.

The eye tracking results showed that users of the flat design would try to click on the header first and often ignore the flat button completely.

Material Design provides a number of different button types to address this type of situation.

First there is the flat button. It stands out through the use of a contrast color in addition to capitalization.

However, these buttons are not designed to be used for your more important actions.

In this case, taking the user to your pearl storefront is a primary action.

Material Design provides raised buttons for the cases where you want a strong clickability signifier and the user’s gaze to be attracted by the color and height of the button.

I know that we haven’t really touched on the concepts of Material Design yet, but I wanted to use this example to alleviate any fears that you may have in relation to user uncertainty.

Material Design Basics

Now we’re going to get into the basic goals and concepts behind Material Design...

Material Design Goals

Create a visual language that synthesizes the classic principles of good design with the innovation and possibility of technology and science.

Develop a single underlying system that allows for a unified experience across platforms and device sizes. Mobile precepts are fundamental, but touch, voice, mouse, and keyboard are all first-class input methods.

The Material Design team has put out some exquisitely crafted statements to describe their system.

However, reading them often leaves people dazed and confused.

I will attempt to distill a few of their statements.

<show second section>

The goal is to enable building applications that can effectively function across a wide range of devices.

This means that users should be able to experience an app on different devices without having to re-learn how to use the app each time.

In business terms, this means reduced training costs when allowing employees to switch between tablets, smartphones, and monitors.

Additionally, it means building voice and touch-friendly UIs so that users across your organization can interact efficiently using touchscreen monitors and mobile devices.

Material Design Concepts - Material

A material metaphor is the unifying theory of a rationalized space and a system of motion. The material is grounded in tactile reality, inspired by the study of paper and ink, technologically advanced and open to imagination and magic.

Here are some examples of materials arranged on a screen.

The materials on the right demonstrate how they are rounded corner rectangles.

I’ve made these materials grey to ensure that they appear properly on the projector screen.

https://stackblitz.com/edit/material-paper-types

Material Design Concepts - Material

A material metaphor is the unifying theory of a rationalized space and a system of motion. The material is grounded in tactile reality, inspired by the study of paper and ink, technologically advanced and open to imagination and magic.

The fundamentals of light, surface, and movement are key to conveying how objects move, interact, and exist in space and in relation to each other. Realistic lighting shows seams, divides space, and indicates moving parts.

The previous material examples demonstrated the use of shadows and surfaces. We’ll take a look at motion in a minute.

Materials can be stacked along the z-axis. A material that is above another will cast a larger shadow based on how much higher it is.

Concepts - Bold, graphic, intentional

The foundational elements of print-based design – typography, grids, space, scale, color, and use of imagery – guide visual treatments.

An emphasis on user actions makes core functionality immediately apparent and provides waypoints for the user.

The guidelines of Material Design encompass these key print and media design aspects.

<show second section>

They do this with a focus on guiding user actions.

The user’s gaze should be attracted to the important components on the screen.

And the UI should help lead them through the completion of their task.

Motion is critical in Material Design.

However, it’s hard for me to explain motion… without motion.

So I’ve got a short video from the Material Design team that will help illustrate these concepts.

Material Design Concepts - Motion

Motion is meaningful and appropriate, serving to focus attention and maintain continuity. Feedback is subtle yet clear. Transitions are efficient yet coherent.

As you just saw, motion is used in meaningful ways in order to increase user efficiency and confidence.

It is based on physics in order to enhance the user’s feeling that the UI is responding to their touch.

The Material Design spec covers a number of mathematical formulas that you can use in your animations.

They even show the formulas in action, so that you can see their performance when used to animate an object.

Image: http://thepixelpedia.com/full-stack-developer

The end result of of this collection of concepts is a well thought out system that follows established design principles.

Your business can directly lean on the Material Design spec by pointing developers at the guidelines, giving them access to a Material Design component library, and then asking them to follow the spec as close as they can.

Image credit: Shutterstock

Another approach is to ask your designers and developers to use the Material Design spec as a starting point for collaboratively enhancing your company’s brand and building your proprietary design language.

Material Design Flexibility

I want to cover one more concept by example before we move on.

Material Design is a set of guidelines.

Your company is welcome to customize and push the limits of these guidelines to fit your brand, design language, and the needs of your end users.

I’ll quickly highlight one example that I ran into on a recent project.

According to the Material Design spec, list items can be clickable and their text should generally be the same as your primary text color. This is usually a black or dark grey.

In this case we followed the guidelines by default and then started some user testing.

We used an app called Fullstory to let us see what users were doing on the page.

To our great dismay, many users were scrolling the list and paging through the subdivisions but never once clicking an item!

Much of the value of our application lies behind this page, so we needed users to click these list items.

In order to achieve this, we added an underline and our primary color to the list item names.

This isn’t within the Material Design spec, but it’s up to us to define how we extend those guidelines.

Upon pushing this change to production, we immediately saw almost every user clicking on the list items and getting to the information that they needed.

We went a little beyond this as well by adding brief some instructions to a card at the top of the page.

Now I hope that this helped you connect the general UI design guidelines to Material Design.

Business Success with Material Design

Next, I want to highlight some standout business applications that are built with Material...

SkyFusion Information System
Harris Corporation

Harris Corporation, with headquarters here in Central Florida, has been using Material Design for a couple of years now.

This application is used by International Air Navigation Service Providers, Airports, and Airlines to share real-time aviation advisories.

The tool and its use of Material Design helps increase operational efficiency and seamless communication across air traffic borders.

It is built with AngularJS Material.

ProsperWorks CRM

ProsperWorks is a B2B Software-as-a-Service startup which was founded just 4 years ago.

Their use of Material Design is well coordinated across Android, iOS, and the web.

Customers and investors have embraced to their product which greatly improves upon the UX of traditional CRM software.

In this incredibly mature and competitive market, they are seeing strong successes.

Last month, they raised 53 Million dollars.

Here are some examples of their business-focused application.

Note the meaningful use of white space and typography to create a visual hierarchy.

The labels are smaller and have less contrast, this allows the data to stand out.

<show second image>

A number of different navigation components are used. In this case, there are 3 tabs.

You can also see the use of a Floating Action Button, or FAB, here.

This is used for the primary action on the screen, in this case the creation of a new activity record.

<show third image>

Icons are used to great effect throughout the app.

This screen also demonstrates the use of a material list.

ProsperWorks CRM

Form editing is clean and intuitive.

<show second image>

Here’s another material list with a different set of features.

The FAB allows creation of a new task.

Tapping a checkbox allows for toggling task completion.

And tapping on the text of a list item opens an individual task.

<show third image>

ProsperWorks uses colors to indicate when a user has moved to a different section of the app.

In this case, we moved from the Projects section into the Tasks section.

ProsperWorks CRM

The previous examples were built with native Android SDKs.

The web app is build using Ember.

Note how the application divides and makes use of the extra screen real estate.

One area is for navigation.

Then the remaining 3 areas are broken up into separate interactive sections.

The first allows the user to edit the Project.

The second handles logging of activities.

And the third allows the user to manage their tasks and other related data.

Note how these sections map to the tabs used in the phone interface.

This is an application of Material Design’s Transform Pattern.

The spec includes many different patterns like this in the Layout section under Responsive UI.

Angular Material

We’ve covered the concepts and seen Material Design in action.

Now let’s get into some of the specifics related to Angular.

Project Status

  • RC.0 released on 11/6
    • Built on Angular v5.0.0
    • All md- prefixes converted to mat-
      • Auto update existing projects w/ angular-material-prefix-updater tool
  • Component Dev Kit (CDK) extracted and documented
  • Q3 Roadmap complete!
  • Q4 Roadmap is available
    • Release candidate builds and stable release
    • Material Tree component
    • Improvements to tables, overlays, and more

The first release candidate came out last week! This is a very significant milestone!

There were some breaking changes related to prefixes in the last beta release.

Thankfully the team has provided a tool to automatically migrate existing projects to the new mat- prefix.

This change should help the ngUpgrade story quite a bit.

The Component Dev Kit has been extracted from the core project and documentation was just made available last month.

You should check out Jeremy Elbourn’s talk on the CDK from AngularMix last month

and if you want a deeper dive into the CDK, Kristiyan Kostadinov gave a deeper talk that is available on YouTube.

All of the goals in the Q3 roadmap have been met. You can find the roadmap in the GitHub README.md file.

And the team just posted the Q4 roadmap a couple of weeks ago.

The primary goal is to get out a stable release that lines up with the Angular versioning.

What’s New?
Nested Menus

Support for dynamically nested menus

What’s New?
Stepper

Stepper component for using the wizard design pattern

What’s New?
Tables

A long requested feature of AngularJS Material,

Data tables have been added.

There are two flavors.

Vanilla from the CDK or Material Design from the material package.

What’s New?
Paginator

What’s a table without paging?

Angular Material has this covered for you.

I actually implemented this in one of my apps and then a week later it was released in Angular Material.

I was quite happy to remove my implementation and my responsibility for maintaining it.

What’s New?
Sort Headers

Sorting of styled and unstyled tables is supported as well.

What’s New?
Expansion Panels

Expansion panels were almost impossible to implement in AngularJS Material.

The new Angular Animation package from Mattias has made this possible in Angular Material.

This component is great for the search panels that LOB applications often over use.

What’s New?
Customized Panels

Customization of Autocomplete and Datepicker panels has been made much easier.

Note that I was just having fun with these examples.

The low contrast on the datepicker would be a problem in a real app.

Note that they require ViewEncapsulation.None on your component or global styles as they are outside of your component’s styling scope.

Enterprise Patterns

So Angular Material has all of these great components, but how do you combine them to build out your applications?

I have some Stackblitz examples for a number of enterprise use cases that we’ll walk through now.

Tabbed Navigation

There are fixed and scrollable tabs.

Scrollable tabs are used when you have many different tabs.

You should avoid nesting tabs within tabs.

I’ve found that the best practice is to limit your app to 5 fixed tabs.

If you need more than 5 navigation options, I would suggest using another UI component.

https://stackblitz.com/edit/material-dynamic-tabbed-navigation?file=app/app.component.html

Responsive Button Bar

This is a common pattern in Material Design where an overflow menu is used to hold the options that don’t fit on the page.

This is important to business applications as there are often a number of options or actions to apply.

It starts with the best discoverability on desktop via the use of button names.

Then it shrinks down to using icon buttons on mobile.

https://stackblitz.com/edit/material-responsive-button-bar?file=app%2Fbutton-bar%2Fbutton-bar.component.ts

Responsive Button Bar - Desktop

Here’s an example on desktop where the overflow menu is not needed at all.

https://stackblitz.com/edit/material-responsive-button-bar?file=app%2Fbutton-bar%2Fbutton-bar.component.ts (same as previous slide)

Flowing Button Bar

Now this component isn’t covered by the Material Design spec, but it is something that I’ve run into with business customers.

Unlike scrollable tabs, this component has great discovery as all options are visible and usable with a single click versus horizontal scrolling + a click.

Obviously it takes up more vertical screen real estate than tabs.

Additionally, it works best on tablet screens and larger as the vertical space used gets too large with many options and smaller screens.

Note that the height of this component is dynamic based on the flowing layout of the buttons and the width of the screen.

So you’ll need to consider these factors before using this component.

For alignment, the buttons need to have fixed widths (via CSS) and button names need to be kept short.

This component can hook into component-based navigation (preferred) of the content area (i.e. replacing the content area w/ another content component)

or for a longer document, it can be based on scroll position within that document.

https://stackblitz.com/edit/material-dynamic-flow-button-bar?file=app%2Fapp.component.html

Deep Nav Systems - TopNav

Thanks to Kristiyan Kostadinov for his work on supporting nested menus in Angular Material!

The documentation doesn’t cover using these nested menus with dynamic data.

So I’ve created an example that includes a TopNav menu button bar and nested menus, icons, and associated routes.

It’s based on example JSON data that you might receive from an API and the structure should be customized for your application.

https://stackblitz.com/edit/dynamic-nested-topnav-menu?file=app/app.component.ts

Deep Nav Systems - SideNav

As you may have seen when looking at the dynamic nested topnav menus example, it doesn’t fit well on small screens.

In that case, you may want to move your navigation into the sidenav.

This examples shows you how to do that with the same dynamic nested structure and some bonus animations.

https://stackblitz.com/edit/dynamic-nested-sidenav-menu?file=app%2Fapp.component.html

Wrapping Up

Wide Range of Implementations

There are many options for Material Design implementations.

These are just a few of the best options for the web.

You can find these links in the slides that I will share.

Other Design Systems

Built for Angular

Others

There are alternatives to Material Design.

These include a couple with full Angular support like Clarity and Lightning.

I’ve also provided a number of other enterprise design systems for you to look into if desired.

Summary

  • Material Design is great for Enterprise applications
  • Angular Material will be ready for the Enterprise very soon

  • Material Design doesn’t work for your company
    • Selecting a design system is still recommended

In summary,

Material Design is flexible enough to work for most Enterprise applications.

Angular Material is getting more stable and robust.

There should be a stable release in the coming months.

If you are starting a new project, you should seriously consider Angular Material.

If your company is looking for something different, I would still recommend that you standardize a design system for use across your enterprise.

The Material Design spec lays out a lot of the groundwork, it’s up to your designers to build on top of it.

References

Thank you!

Create Enterprise UIs that your users will love - DevFestFL 2017 - Google Slides