Modal: Design for Enterprise — Part II

Let’s continue after the part — I:
https://medium.com/@debajyotim/modal-design-for-enterprise-part-i-267aa07d54e9

Where we have already discussed about the anatomy of a modal, what are the major parts it should contain and how we can maintain the consistency among all the scenarios for all the devices.

Let’s resume from where we adjourned.

Modal Body

1. Consistent in all the modals.
2. Can contain any template as per need. That means modal body content could be anything. It could be a form, a bunch of text, maybe a grid or whatever.
3. If the content is more than the maximum available area (which is 80% of the screen, as per our rule we discussed earlier), the body should have an automatic scroll.

Modal Footer

1. Consistent in all the modals.
2. Should contain at least one action.
3. If there is more than one action, they should be grouped appropriately and YES action should be the primary.
4. Footer can accommodate a maximum of 3 actions.
5. If there is a clear requirement of having more than 3 actions, the most left button should behave like “More”. That means the 3rd or the left button could be an ellipsis which shows other options as per the context.

Button Orders

1. Usually, a modal has 2 actions. One is YES (confirming) and other is NO (dismissive).
2. The YES button should be on the right always.
3. The YES action should be the primary button.
4. The NO button should be placed directly to the left of YES.
5. The YES and NO should be grouped and placed on the right of the footer.
6. If there is a clear requirement of having an extra button, that should be grouped separately and placed on the left of the footer.
7. When user acknowledgment is required to proceed, a single action button may be presented.
8. The single-action should be a secondary button.
9. The single-action button should be placed on the right side of the footer.
10. Side-by-side buttons are always recommended. But, for a few scenarios, like a longer button label or a smaller real estate, there is a chance for an exception.
11. For exceptions, the YES button should be the first option always.

Button Focus

The primary action button should be focused by default.

If there is no active primary button in the modal, the first active button should be in focus.

Scenarios

Modal: Scenario — I

Scenario — I

Imagine, this modal appears when the user wants to exit an application after making some changes.

The Discard and Save both allow the user to exit the application, but the Save performs an extra task.

The Close button just dismisses the popup without a decision and the user stays in the application.

Modal: Scenario — II

Scenario — II

Imagine, this modal appears to convey a message or show an instruction.

The OK and Close both dismiss the modal, but OK may record a decision made here.

Modal: Scenario — III

Scenario — III

The Done, Discard and Close all dismiss the modal, but the Done submits the form, the Discard clears the form and the Close just closes the modal without making any decision. So, if the user opens the modal again without refreshing the primary window, the entered value should remain there.

Modal: Scenario — IV

Scenario — IV

Imagine, this modal contains a long data entry form and the user is entering the fields one by one.

It is logical to have call to actions fixed at the bottom, so anytime the user can make a decision. For example, the user wants to fill only the required fields for this time and submit.

Modal: Scenario — V

Scenario — V

A full page modal is not recommended as a human brain can not process more than 70 characters in a single line.

Modal: Scenario — VI

Scenario — VI

According to our structure, any content could fit in the modal body, even a filter.

For filter, Reset could be an extra button which sits at the left side to create a visual group.

Technicals

Now let’s talk about some technical stuff — how can we achieve this responsive modal, which is minimalistic not only in terms of design but also as per HTML and CSS structure.

HTML

<div class=”debs-modal-wrapper” tabindex=”-1">
<div class=”debs-modal-dialog”>
<div class=”debs-modal-header”>
<h2>Modal Title</h2>
<a title=”Close Modal (Esc)” class=”debs-btn-close debs-modal-close” role=”closeModal”>Close</a>
</div>
<div class=”debs-modal-body”>

</div>
<div class=”debs-modal-footer”>
<div class=”debs-modal-action-bar”>
<div class=”debs-modal-actions”>
<input type=”submit” value=”Primary” class=”debs-btn debs-btn-primary” role=”closeModal”><input type=”button” value=”Secondary” class=”debs-btn” role=”closeModal”>
</div>
<input type=”button” value=”Agreement” class=”debs-btn” role=”loadData” data-target=”long-text”>
</div>
</div>
</div>
</div>

CSS

.debs-modal-wrapper{
display: none;
}
.debs-modal-dialog{
width: 90%;
max-width: 600px;
max-height: 80%;
overflow: hidden;
background: #fff;
border-radius: 5px;
box-shadow: 0 0 20px rgba(0,0,0,0.2);
position: fixed;
z-index: 10001;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
display: flex;
flex-direction: column;
}
.debs-modal-header{
border-top: 3px solid #DA4800;
padding: 15px 20px;
min-height: 52px;
}
.debs-modal-header h2{
font-size: 20px;
line-height: 24px;
color: #000;
padding-right: 20px;
}
.debs-modal-close{
opacity: 0.5;
right: -5px;
}

.debs-modal-header,
.debs-modal-action-bar{
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: flex-start;
justify-content: space-between;
}

.debs-modal-body{
padding: 0 30px 10px 20px;
margin: 10px 0 20px;
overflow: auto;
-webkit-overflow-scrolling: touch;
}

.debs-modal-footer{
background: #F5F5F5;
border-top: 1px solid #D8D8D8;
height: 52px;
padding: 3px 5px;
}
.debs-modal-action-bar{
flex-direction: row-reverse;
}
.debs-modal-actions{
display: flex;
flex-direction: row-reverse;
}

See Codepen for more details and experience the modal live.
https://codepen.io/debajyotimitra/project/editor/AYNqek

I will conclude my story here. Please share your feedback if it was helpful for your design and development. Thanks for reading.