In one of our last projects, we built a platform independent desktop client completely based HTML5 for the UI. HTML 5 provides a powerful way to build UI. Coupled with JQuery and H-UBU, we have developed a pretty exciting UI. One of the issues faced during this development was the management of the user interactions:
- How to report info or error to the user without breaking the interaction flow using the jquery-toastmessage-plugin
- How to explain to the user, he has to wait a couple of seconds while hard work is done in the background without too much frustration using the jquery-waitingpopup-plugin
To deal with those issues, and enhance the user experience, the akquinet Web team has developed these two JQuery plugins which might be handy for your next web based applications as well.
“Do you wanna have some toasts” – jquery-toastmessage-plugin
If you are developing Android applications you might be familiar with the concept of toast. Toast messages are a concept of showing informations or errors to the user in a very seamless and natural way. It is close to Mac OS Growl notifications. They may or may not disrupt the user and they are still informative. It’s a quite nice way to report info or error to the user without breaking the interaction flow.
To bring that concept of a notification system into the world of web technologies we built the jquery-toastmessage-plugin. This JQuery plugin provides a mechanism to toast messages.
The main features are:
- Informations are toasted providing the info to the user in a seamless and natural way
- Toasts may or may not disrupt the user and they are still informative
- 4 different predefined types of toasts: notice, success, warning and error
- Fully customizable: style, position…
- Easy to use API, integrated in jQuery
The following methods will display a toast message of different types:
$().toastmessage('showNoticeToast', 'some message here');
$().toastmessage('showSuccessToast', "some message here");
$().toastmessage('showWarningToast', "some message here");
$().toastmessage('showErrorToast', "some message here");
To be available, you just need to load jquery, the plugin and the CSS:
<link type="text/css" href="css/jquery.toastmessage-min.css" rel="stylesheet"/> <script type="text/javascript" src="jquery-1.4.4.min.js"></script> <script type="text/javascript" src="jquery.toastmessage-min.js"></script>
For further information and a little demo just have a look here.
The plugin is open source and licensed under ASL 2.0. The source code is provided on github.
“All good things to those who wait” – jquery-waitingpopup-plugin
Another simple but very handy JQuery plugin is the “jquery-waitingpopup-plugin”. This plugin provides an easy way to show up a modal waiting popup window when your application is doing some heavy work in the background and your UI should not be accessible in the meantime. The current screen will be faded out slightly and a popup window will be opened with some informations about was is going on right now. Furthermore the screen in the background is completely locked for any user interactions.
You are able to show and hide the waiting popup manually, or to register the waiting popup for all jQuery AJAX requests.
The main features are:
- Using a modal dialog and blocking the UI from further user interactions
- Showing and hiding with an easy to use API
- Registration at a JQuery Ajax Events handler (all Ajax request will show and hide the waiting popup)
- UI is fully customizable using CSS
- Easy to use API, integrated into jQuery
// initializing the plugin once $().waitingpopup(); // To open the waitingpopup you have to call: $().waitingpopup("open"); // To close a waitingpopup you have to call: $().waitingpopup("close");
To use the plugin, you just need to import jQuery, the plugin and a CSS:
<link type="text/css" href="css/jquery-ui-1.8.7.custom-min.css" rel="stylesheet"/> <link type="text/css" href="css/jquery.waitingpopup-min.css" rel="stylesheet"/> <script type="text/javascript" src="jquery-1.4.4.min.js"></script> <script type="text/javascript" src="jquery-ui-1.8.7.custom.min.js"></script> <script type="text/javascript" src="jquery.waitingpopup-min.js"></script>
For further information and a little demo just have a look here.
The plugin is open source and licensed under ASL 2.0. The source code is provided on github.
Conclusion
This blog post has presented two jQuery plugins to enhance the user interactions. The Toast Plugin provides a new way to inform the user without breaking the interaction flow. The Waiting Popup proposes an easy and nice way to block the interactions until hard work is done in the background. Those two plugins were created by the akquinet Web team and were open sourced on GitHub.