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.

1. HSTW - 101
The Enterprise Software
Makeover Guide
A Harbinger Systems White Paper
© 2010, Harbinger Systems, All Rights Reserved

2. Harbinger Systems
Your partner in technology innovation
About Harbinger Systems: Harbinger Systems (www.harbinger-systems.com) 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. 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. 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. 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. 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. 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. 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. 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 http://www.harbinger-systems.com/tech-
articles/software-dev-company-info-form.htm?code=HSTW102 to request the paper.
Page 9 of 9
© 2010, Harbinger Systems, All Rights Reserved