Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

The Enterprise Software Makeover Guide


Published on

This Harbinger Systems white paper enumerates ten of the best UI elements that came out of Web 2.0 that have performed well in the enterprise environment over a sustained period of time.

Published in: Technology, Business
  • Be the first to comment

  • Be the first to like this

The Enterprise Software Makeover Guide

  1. 1. HSTW - 101 The Enterprise Software Makeover Guide A Harbinger Systems White Paper © 2010, Harbinger Systems, All Rights Reserved
  2. 2. Harbinger Systems Your partner in technology innovation About Harbinger Systems: Harbinger Systems ( is a leading provider of software engineering services to some of the world's best product companies. This white paper is part of Harbinger’s Web 2.0 practice. Harbinger’s Web 2.0 practice provides software development and testing services for the rich user interface and collaboration needs of enterprise businesses and social web communities. Visit our Web 2.0 Practice page to learn more. Visit our website to download or request our white papers on leading edge technologies and trends. Contents Introduction 3 The Next Generation Enterprise Product 9 Page 2 of 9 © 2010, Harbinger Systems, All Rights Reserved
  3. 3. Introduction As consumer Web 2.0 comes off its peak of hype and popularity, there are simply too many Web 2.0 concepts that have not performed up to the expectations that users and companies have had from them. However, from among the many that failed have emerged a few that have stood the test of time and have proven their value. And these proven concepts are being picked up and implemented by companies in their enterprise-class software, products and tools. This paper enumerates ten of the best UI elements that came out of Web 2.0 that have performed well in the enterprise environment over a sustained period of time. The screens shown in this paper were built at Harbinger Systems. Most of them were built using a Web 2.0 framework called Ext JS. However, barring some minor differences, these are mature Web 2.0 concepts that can be built using any of its competing technologies. 1. USE OF MAPS Figure 1: Drilldown maps for locating your inventory Some information is best displayed on a map. For example, if you want to track your worldwide inventory, there is nothing better than a drilldown map (Figure 1) to show this information. In addition to simply locating where your inventory is, the map also shows more details (like number of SKUs) through the use of floating windows. Page 3 of 9 © 2010, Harbinger Systems, All Rights Reserved
  4. 4. 2. SELECTIVE PANEL REFRESH THROUGH AJAX If we had to pick a poster-child of Web 2.0 or AJAX, it would probably be a screen similar to the one in Figure 2. In-place refreshes of sections of a page liberate user from the frustration of looking at a blank screen while the whole page is reloaded. The user can view and manipulate other parts of the screen while a section refreshes, making the experience seamless and very efficient. Figure 2: Refreshing portions of screen with progress indicator 3. INCREMENTAL USER FEEDBACK MODULE With more and more agile and modular development principles being possible (and indeed the norm) with Web 2.0 development, one of the more useful tools is to have a feedback module built and embedded into the pages that you are developing. Since the deployment of your tool can be done incrementally, gaining valuable feedback from would-be users is as easy as embedding a few lines of code into your pages. Moreover, user feedback can be instantly collated into graphs, charts, ratings and reviews and be incorporated into your development process, saving on costly rework. Figure 3 depicts such a module that can be created as a widget and embedded onto every page that you create. Figure 3: Widget to get feedback from users of a page under development Page 4 of 9 © 2010, Harbinger Systems, All Rights Reserved
  5. 5. 4. DRAG AND DROP FEATURE FOR WYSIWYG EDITING INSIDE BROWSER Figure 4: Items can be dragged and dropped into slots in a WYSIWYG interface Drag and drop of visible components, widgets and controls on the browser page are an important part of Web 2.0 UI. Drag and drop enables users to control the look and feel of their page and consume information in a very efficient manner. Whether it is dashboards or picking up and dropping of items into different slots (like shown in Figure 4), drag and drop truly reduce unnecessary clicks and cumbersome navigations for the users. 5. EFFICIENT USE OF SCREEN REAL ESTATE Figure 5: Use of collapsible, tabbed and accordion panels for better space utilization As enterprise information and reports become more complex, efficient use of screen real estate is one of the top requirements of enterprise tools. The use of screen space is optimized through various techniques such as using collapsible panels, tabbed panes and accordion panels as shown in Figure 5. Page 5 of 9 © 2010, Harbinger Systems, All Rights Reserved
  6. 6. 6. AJAX-ASSISTED SEARCH FIELDS Another popular Web 2.0 UI tool is search fields that are populated with information as the user types. The information can come from a database or a client-side cache. In Figure 6, the vendor name is populated as the user types into the search field. This kind of information retrieval at a quick notice has its challenges with regards to performance. However, there are well-defined strategies to overcome such issues, such as “lazy” information retrieval upon scrolling or using pagination within the search dropdown. Figure 6: Suggestive search for efficient information discovery 7. CONTEXT-SENSITIVE “FLOATS” Context-sensitive help has been the bane of many web applications, with cumbersome message boxes, popup windows and even page loads causing enough distraction to the user. With Web 2.0 UI, creating an experience like the one in Figure 7 is becoming very common. Figure 7: Use of floating windows for additional information Effective use of these floats can mean the difference between a form that is a breeze to fill and a form with endless clicks that directly affect productivity. Page 6 of 9 © 2010, Harbinger Systems, All Rights Reserved
  7. 7. 8. VIRTUAL SCROLLING For a large list of records, it is just too performance-unfriendly to retrieve all of them from the server, not to mention a page refresh or a separate popup window required for such an operation. Traditional web applications resort to pagination, which makes the user experience worse no matter how you try to implement it. With AJAX and some smart programming, you can achieve a great “lazy-loaded scroll bar” which is non-intrusive and very efficient for a user. In Figure 8, while there are 2,548 records, only the first few rows are actually fetched, but the scrollbar is sized and positioned according to 2,548 records. Moving of the thumb retrieves more information through an AJAX call. 9. POWER OF SPREADSHEET INSIDE YOUR BROWSER Figure 8: A powerful spreadsheet-like grid with virtual scrolling Imagine if your system interface and reports could glimmer with the power and interactivity of a spreadsheet! Web 2.0 UI makes it incredibly easy to spread out information and slice and dice it the way you want it. All of the above elements come together and then some more added to give a powerful spreadsheet like UI shown in Figure 8. This spreadsheet-like report can be sorted by columns, and filters can also be applied to it. In fact, this grid packs many small-to-big features including cell formats, coloring and column show / hide. The grid can also provide information neatly categorized according to your selected fields. Figure 9 illustrates such a grid categorized by vendor names – it displays all invoices raised for each vendor in the report and gives a subtotal for each of them. Page 7 of 9 © 2010, Harbinger Systems, All Rights Reserved
  8. 8. Figure 9: Categorizing information on a spreadsheet by vendor name and showing subtotals 10. READYMADE COMPLEX CONTROLS SUCH AS CALENDAR With frameworks as powerful as Ext JS, complex controls are available (and indeed being added regularly) as built-in classes or as part of extensions, which make programming easy and very quick. For example, the calendar control shown in takes no time to build, customize and integrate into your web application. Figure 10: A powerful calendar control which can be integrated with your application within minutes Page 8 of 9 © 2010, Harbinger Systems, All Rights Reserved
  9. 9. The Next Generation Enterprise Product With most of the products requiring undivided attention on core activities such as functionality, performance, security and compliance, UI and usability tend to get overlooked. However, with important changes happening in the world of web-based products, desktop-like interfaces have come to be expected of them. Web 2.0 UI technologies have gone through multiple iterations and improvements to present well-tested and stable interfaces presented in this paper. As you concentrate on the next major release of your product, it is important to be aware that your users are implicitly expecting a web-based product that looks, feels and behaves like a powerful desktop application. Learn More: Which UI technology is best suited for your product needs? Most of the above screens were built using an open source Web 2.0 framework called Ext JS. Explore Ext JS and its competing technologies in the Harbinger Systems paper, HSTW-102.Visit articles/software-dev-company-info-form.htm?code=HSTW102 to request the paper. Page 9 of 9 © 2010, Harbinger Systems, All Rights Reserved