One of our biggest enhancements for SiteExecutive 2012 EP1 is our new modal dialog system. These newly restructured modal dialogs provide a much more intuitive interface for SiteExecutive 2012. By reengineering the system, we were able to maintain all of the functionality users would expect from a true popup window, i.e. moving and resizing of the dialogs.

old and new

Modal Windows of the past

In the past, the most common way to display a dialog to a user was through what is referred to as a “modal window” or a “popup window”. In time, these popup style dialogs proved to have significant usability issues around the look and feel as well as general functionality.

old dialog

Since these popup windows really were an entirely new browser window, the contents of the new popup were completely separate from the page that had opened it. Accidental stray clicks could cause the popup to lose focus, hiding it behind the main browser window. This lost dialog would then wreak havoc on the content author, preventing any actions from happening within SiteExecutive until the hidden dialog was found. Also, because of the nature of popup windows, browsers commonly block popup windows from opening. This was a significant problem when logging into a SiteExecutive authoring environment for the first time and using a feature that created a dialog. The browser’s popup blocker would prevent the window from opening if not configured to allow popups. The user would then need to refresh the browser to continue working. This caused major usability issues for content authors as well as slowing their productivity.

old dialogs

Another problem that presented itself within these popup windows was that the browser would show this dialog wrapped in the current browser’s user interface, as well as presenting different window styles based on operating system. This method of drastically changing the UI based on platform was often jarring to users when accessing the same functionality on two separate computers running different operating systems or even through two different browsers. In addition, the “modal popup” functionality was sometimes drastically different from browser to browser, and in some cases was completely unsupported.

Modal Dialogs of today

Our newly revamped dialog system in SiteExecutive 2012 remedies many of the problems associated with the previous popup window system. We are now using what is referred to as a “modal dialog” or “Lightbox” style dialog. This was carefully designed and engineered to work within SiteExecutive’s user interface along with existing modules and applications.

new dialog

Rather than creating a new window for each dialog, this system uses plain html within the opening page to house the contents of the dialog. In addition to the dialog, a semi-transparent “cover” is also created, which prevents users from interacting with the elements behind the dialog. By using css we can then layer the cover and dialog on top of the SiteExecutive authoring interface. Through the use of this new method we are able to keep the dialog contents within the same browser window and prevent dialogs from being “lost” behind the main browser window. Never again will users go through the confusion of a locked up SiteExecutive authoring interface due to a hidden dialog! This system also prevents popup blocker issues, since these are not new windows, popup blockers will ignore these dialogs and always allow them to open!

Since these new dialogs are completely built into the SiteExecutive authoring interface, we are able to have complete styling control. This means that the look and feel will not drastically change based on the browser or operating system users are currently using. This is also very cross-browser friendly, allowing us to use a more generic approach to building this system without having to target very specific browsers. This provides users a consistent look and feel across any platform, simplifying their daily tasks within SiteExecutive by allowing them to return to a common interface regardless of where or what operating system with which they are accessing the authoring interface.

Our new dialog system in SiteExecutive solves many of the frustrations of popup style dialogs from the past. The enhanced usability coupled with a more modern and consistent design leads to a much friendlier user experience. To learn more about the new dialog system as well as other exciting new features in SE2012 EP1, join our next complimentary webinar on Tuesday, August 28th.