One of the difficulties a software developer faces in designing a complex web page is the user interface. Striking a balance between advanced functionality and ease-of-use is a challenge for even the most seasoned designer. Understanding how a user will approach and utilize the page will often determine where certain page elements are located and how they appear; and watching real users use the page is a rare treat. We recently had an opportunity to observe new users work with the PhillyHistory.org search page and made an important discovery. Our most powerful search options – location and address-based searches — were often not being used effectively! Sajara is designed so that the address search option can match street addresses or intersections to map coordinates, automatically move the map to that location, and return assets in the area; all with one click. Our first goal for the re-design of the PhillyHistory.org’s search page was to bring this powerful tool into focus by giving it the place of honor at the top of the search options.
Beyond the fairly simple task of re-ordering search options, we are also excited to launch a new function in Sajara that enables the upload, management, and search of a whole new class of documents: maps. In the new version of Sajara, searching for maps is as simple as searching for photographs and other documents. Simply use the search options or the map to limit your search to a place, subject or time, and use the new tabs to view either photographs or maps. While PhillyHistory.org currently holds 5,000 maps, our archivists will be adding more each week along with new photographs to enrich PhillyHistory.org’s view into the city’s past.
Most importantly, in order to enhance users’ experience on the site, especially with the map search functions, we decided to entirely re-design the search page using OpenLayers and Ext JS. OpenLayers is an open source JavaScript library that enables ‘slippy maps’ to be embedded in any web application. OpenLayers allows communication with most standards-compliant web map services such as ESRI’s ArcIMS, ArcGIS Server and GeoServer, as well as other sources such as GoogleMaps. As an open source framework, OpenLayers separates map tools from map data and enables developers to include layers from several different sources in the same map. Ext JS is a visual framework which offers customizable website pieces (or widgets) that can be easily added, updated, and changed to fit a website’s design.
Shifting PhillyHistory.org from a Microsoft ASP.NET – only framework to one powered by not only ASP.NET but OpenLayers and Ext JS as well, was not a completely smooth affair. Several of the bumps in the road came from learning how to use OpenLayers and Ext JS effectively. While both are written using JavaScript objects, each has its own methods to drive its functionality. Getting a handle on a new framework involves learning how different objects are connected, how they communicate and how to get them to perform at their best. But the result is stunning, smooth, and allows for easy-to-use functionalities. Let us know what you think!
