Remix Those Sample Viewers Elevate your RIA and stand out from the crowd By Brian Noyle and Dave Bouwman, DTSAgile Ladies and gentlemen, we are facing an epidemic…an epidemic of “sameness.” Esri has provided the development community with starter kits for ArcGIS Server. These sample viewers, available for the JavaScript and Flex APIs, are a great starting point for creating map-centric Rich Internet Applications (RIAs). The pluggable nature of starter kits facilitates significant reuse of components. There are dozens of plug-and-play components available to developers in the Esri code galleries. While the speed and ease with which these sites can be built and deployed is excellent, the downside is the wave of cookie-cutter sites emerging on the Internet. It is clear that in many cases, little or no thought has been given to originality, branding, or how the user should interact with the site. Web Server the brand and intent of the organization. You wouldn’t lift someone else’s site en masse for your corporate site, so why would you simply copy another site’s mapping apps? Since Esri has done most of the heavy lifting and provided very pluggable, reusable frameworks in multiple Web technologies free of charge to the development community, we assert that a little extra time and effort is all it takes to elevate offerings to the next level and provide a thoughtful, attractive, and unique experience to users. In this article, we’ll point out a few of our beefs with cookie-cutter sites and illustrate the results of our efforts to take a starter kit and remix the interface to produce a more highly polished site. Remix from a Wish List As we’ve noted in our published articles, blogs, and presentations, we like our applications to be as focused as possible. Every mouse click and drop-down menu that we can remove from an application improves the user’s experience. Here are some items selected from our (incomplete) user interface (UI) and application behavior wish list.  We want top-level menu items that do something on-click as opposed to always revealing a pull-down menu. A top-level print menu should open the print dialog box when it is clicked rather than reveal a single menu item that is also called Print.  Many RIAs rolling out the door these days are information exploration tools. In the age of Google, search is king. A search box should always be available and occupy a prominent place in the UI at all times.  If this site will have a full bleed or wallto-wall map, we want a full-width banner with plenty of room for commonly used top-level items.  We want a limited set of basemaps available and want them displayed as top-level icons on the menu. Clicking them will turn on the layer. The active layer should have a glow indicating that it’s…well…active.  We never want to hide navigation down a level in the application. Navigation and bookmarking should be front and center.  We want widgets that can be set to never close. We’ve frequently seen cases where users can’t figure out how to reopen a widget that has been closed.  In numerous other usability rants, we’ve expressed the philosophy that map content should be limited to a basemap and some minimum number of operational layers so that legends and layer lists become superfluous. If they must be shown, table of contents features should be inconspicuous.  Whichever starter kit is chosen, the look and feel must be customized for each client or delivery. It’s not enough to simply replace the Esri logo and move on. If possible, use custom icon packs and unique skins. The Remix in Action In our example scenario, we’ll start with the Flex Starter Kit and build a data visualization application that allows foresters and policy makers to explore data pertaining to the effects of common forest pests in the United States. Conversations with target users convinced us that navigation should be minimal and search is paramount. In addition, we’re willing to sacrifice map space to accommodate a panel on the right side due to the richness of the data. Finally, since we’ve been around the block a time or two, we’ve got some ideas for a novel way to visualize pest impacts on the landscape in time series so that needs to be worked in as well. This example isn’t going to use all the items in our wish list, but we’ll pull a few of the ideas in and let the rest of the list serve as fodder for future sites. Sketch It Out Whenever we start out on a new project or new set of features for an existing project, we like to develop wireframes (among other things) for the simple reason that debugging and accommodating changes on paper is much cheaper than fixing things once the site is built. Depending on the project and client, we’ll create pencil and paper sketches or use Microsoft Visio or products like Balsamiq or the Pencil Project to create mockups. Figure 1 shows how our Flex Starter Kit remix looked on paper. ASP.NET MVC App. Controller Back End Services IIS SWF JSON Figure 2: Generalized system architecture for our remixed application In comments made on a blog post on this topic by one of the authors (see blog. davebouwman.com/index.php/2009/11/ re-mixing-the-flex-sample-viewer/), Stu Rich reminded us that the power of the sample application is that it proves the critical path and provides us with many different tools to choose from when building applications in the RIA space. At the same time, the job of the thoughtful designer/developer is to choose just the essential tools and design them so their use will be intuitively obvious. At the same time, the designer and developer should take care to make each site distinctive. Sites should reflect 42 ArcUser Spring 2010 www.esri.com