Dynamics Community Forum Thread Details

UCI Form Design Guide

Hi All

Does anyone know of a good Form design guide for UCI that explains the capabilities and limitations of laying out forms in UCI? I am interested in best use of sections and tabs, plus how to control the wrapping of controls in a section.

The issue I have is, with the Classic form layout we were able to design the tabs with differing section columns presented on the same screen at the same time enabling us to present the relevant data to the user, this would typically mean that we would have a mix of tabs with differing columns, mostly with single column sections but not always. The tabs provided a way to neatly align sections with each other especially where sections in each column had differing heights.

For instance:

I have read articles that recommend that single column sections are used to make transition from large form factor to small form factor devices make sense, however the way tabs are used in UCI makes it difficult to provide a clean layout without having multiple tabs that present only small snippets of information at a time. The design above results in three tabs, one for the Contacts names etc, one for their contact numbers, one for the address and so on...

Another problem I have is wrapping of controls if anything can be done about the waste of white in some instances.

For instance take this form in UCI:

The tab columns are set to 73% and 27% and the controls in the Contact Method section wrap, when set to 72% and 28% the controls in the Communication details wrap.

From what I have seen the field label width doesn't have any impact on the UCI as far as I can see. I know the user can collapse the Nav menu and its all good, but would be nice to design the forms initially so they don't need to in order to correct the layout. While I am aware the responsive design will change the layout depending on the real estate available, but most of our users use a screen with a standard resolution.

Last layout question is for this section:

Here we have a number of check boxes in different sections, as the controls and labels are small is there a way to condense these so they are not so spread out, in Classic it looked nice, in UCI it doesn't.

Again if I put the sections side by side the check boxes wrap down the screen which looks worse. BTW we have 5 sections so I did look at a vertical layout.

Thanks in advance for any feedback.

Cheers

Alan

Hello Alan,

Thank you for your detailed post, that's great feedback.

In terms of guidance, I advise you refer to these materials:

The Approaching a user experience and Unified Interface transition white paper.
The "Chapter 3: Transition" deck of the Unified Interface Playbook.

Indeed, with a responsive design approach, width that were expressed in pixels aren't reflected as in the legacy web client, neither on forms or views.

If your users are going to have similar configurations, I can only advise to design your forms sections and tabs for their screen resolution and zoom to make sure that they are optimized for these users and reflow nicely.

For your last point on check boxes, have you tried with different layout?
I would try with field labels on the left side instead of on top, and also try to add a flip switch control for the rendering of the two-options field.

Henry

Quick Links