Dynamics 365 User Interface Refresh

In this article, we are going to take a glance at the user experience refresh coming in the July 2017 release of Dynamics 365.

Dynamics CRM 2013 introduced a redesigned User Experience including simplified navigation, flat user interface and a new form model with an optimized layout. While the updated User Experience provided an efficient single window interface that was much more intuitive than the CRM 2011 interface, there is always room for improvement.

Below is a summary of the top user requests that are being addressed in this release of Dynamics 365:

Too much white space – While some white space is good and in some cases, it helps give emphasis to a content area, we’ve found that in the case of forms and dashboards it negatively impacts the user experience.

No text wrapping on fields labels – If the content of a field label is too long, the text becomes cut-off. This forces designers to limit the characters used in labels which can be problematic when trying to convey information to the user

Header text formatting – Text in the Header of a form can be cut off vertically and horizontally if the field labels or values do not fit within the header space.

Input Fields on Forms are not intuitive – Input fields are often difficult for user to identify due to lack of visual cues

Header and text area separation – There is not a clear separation between the header and content area

Tabs and other controls are not intuitive – Some controls on the forms are not easy to identify. For example, the activity feed tabs appear as text on the form. It is difficult to know that these are content tabs.

Column Spacing – There are inconsistencies between column spacing on forms

Fonts – There are multiple fonts used giving the form an inconsistent look and feel.

Now let’s take a look at the refreshed User Interface that the Dynamics 365 came up with in response to the feedback received.

Borders around the content areas have been added to reduce the white space. The spacing between the columns have also been made uniform.

A “clip board” structure has been added to separate the header from the main content area.

Word Wrapping capabilities have been added to the form fields and headers. Word Wrap can be control by the System Administrator by turning this feature on or off in the System Setting.

The concept of “Empty States” has been added for content areas. This will help users identify content areas that do not yet contain content. If a content area is empty, an icon and helpful message will appear. The helpful message will direct the user as to what next steps to take to add content to the content area.

A visual cue has been added to input fields in the form of a dashed line. The line will display if there is no value in the field, which will help users identify which fields are editable.

Added intuitive styling to help users identify controls that were previously not obvious, such as the activity feed tabs

The fonts have been standardized across the application for a better look and feel

These new components not only apply to forms, but across the entire application…

Dashboards

The “clip board” structure has been applied to Dashboards, giving the interface a more professional look and feel.

Font have been made consistent across all elements

Spacing has been standardized

Grids

Again, the “Clip Board” has been applied to give distinction between the header and the body

Fonts are consistent on all components

The header and footer of the grid have a distinct color, allowing the data in the grid to be encapsulated for a better look and feel

Row height has been increased per rows

Quick Create

Input controls have visual cues to help users identify edible fields

Divider lines have been added between sections

The buttons have been visually enhanced so that the primary button is highlighted

Theming

The refresh also includes theming enhancements. All the component included in the refresh are theme capable. Meaning that custom colors can be applied to match your corporate branding.

Page and section header colors can be customized. When the header color is selected, the system will make recommendations for component colors.

The ability to theme sub grids at the control level has been added. For example, if you have a Lead and Contact sub grid on an Account form, different colors can be assigned to each grid.

This is just one of the many exciting new features or enhancements coming to Dynamics 365 in 2017. To quote the Beatles : It’s getting better all the time