Thursday, May 29, 2008

The ViSit Anywhere User Interface

With the first ViSit Anywhere beta release now shipping, I wanted to give non-beta testers an idea of what the first release is about and what to expect. Before we start, I want to point out that there are two flavors of ViSit Anywhere, standalone and hosted in Microstation. We have made every effort to ensure that the two tools have he same functionality and the same user interaction logic. Unfortunately, the two tools will never be exactly the same. The standalone client allows us a bit more latitude of what we can do with the dialogs and windows and Microstation has additional editing tools and it processes vector and raster graphic more rapidly. In this entry I am going to be showing the standalone tool and I will talk about the Microstation version in the future, but keep in mind, the things I will talk about here apply to both versions.

Another point I want to make is that ViSit Anywhere is a culmination of our experience with ViSit v3 in Microstation and our ViSit/Web product. We appreciated the simpler user interaction in ViSit/Web, but we felt that it lacked the complex editing functionality of Microstation. We have tried to get the best of both world with ViSit Anywhere by providing all the detailed functionality of the Microstation/ViSit product with some of the simply usage idioms of ViSit/Web.

An Office 2007 Ribbon Tool Bar

Lets start with the basic screen shot shown to the left. I have annotated the image with some numeric callouts to highlight some of the features. You might want to open the image in another browser window to follow along (i.e. click right and open in a new window).

As you can see, the application uses the an Office 2007 ribbon tool bar user interface. Under this type of application, a ribbon (callout 1) presents tools as buttons and others UI items across the top of the application, rather than using tool bars. This allows us to group tools according to function. The larger area means that we can use larger buttons which makes them easier to access (and, we hope, understand). If you are worried that the ribbon takes too much space it can be minimized and then accessed as a ribbon popup. This allows maximum space for the graphic and other windows.

In addition, the interface has a user-customizable quick access tool bar (callout 2). Users can quickly and easily add commonly used tools to this tool bar. This makes them instantly available when the ribbon is minimized. It is displayed in the window frame by default, so the tool bar takes zero client space (as shown in the image), but the user can optionally display the toolbar at the bottom of the ribbon to reduce the distance need to reach the a button when performing click-intensive work.

Note also that the ribbon consists of several ribbon pages, similar to a tool bar with tabs. This allows us to group functionality by task. Indeed, when we were designing the application, we made sure to have ribbon pages with all the tools required to perform a given task, even if that meant that some tools are present on several pages (see callout 3).

Finally, note that the graphic space (callout 4) contains a full-featured CAD drawing tool. We can attach and detach maps and data layers as required, including raster images. ViSit Anywhere features an easy to use auto-select interaction mode. With this interaction idiom, the user hovers the mouse over a graphic element to begin the selection, if the user clicks the left mouse button, the element is selected. If the user clicks the right mouse button, the next closest element is selected. Selection is shown by drawing the graphic element in a highlight color. If the mouse pointer is moved, the selection will change. If the user leaves the mouse hover a little longer over the element a tool-tip is shown with information about the element under selection, as shown in the screen shot. Note that the tool-tip is entirely configurable by the ViSit Anywhere administrator, and information in the tool-tip can come from a number sources. For example, the tool-tip in the screen shows the diameter of the pipe under selection and the name of the graphic context used to edit the item. It also shows how many equipment elements are on the pipe. This is not a attribute of the pipe, but is created by counting the number of elements associated with the pipe. We also have information from the active tool, the containing site and the current graphic composition. To a ViSit v3 administrator, this may seem complex, but to the user, the information is natural and simple to understand.

Simplified Spatial Queries

The next screen shot (left) shows another of the features that emerged during development that we have found intuitively interesting and easy to use. That is, spatial requests. In ViSit Anywhere to do a simple fast spatial query all the user must do is to select a spatial table from a drop down list. A data grid opens at the bottom of the main window to hold the results of the query. Each time the user navigates in the graphic (zoom in, zoom-out, pan etc.), the rows of the grid are updated using the extents of the view as the request zone. Once the user has the zone that interests him, it is possible to freeze the query, so that view updates do not change the request results. The user can then highlight and localize the rows in the grid to perform their task. Note the highlight used to show a queried element is not same color as the edit highlight, so this is one way a user can delimit the extents of an editing task and then process the elements one by one. Note also that the data grid has all the features that you would expect from a modern application, such as sorting and filtering of columns and grouping rows hierarchically (as shown in the screen shot). We also provide tools to print or export the (filtered) query results.

Complex Network Editing

I mentioned previously that ViSit Anywhere provides a full-featured CAD tool to perform, for example, complex network edits. There are a lot of interesting things on this screen shot. First, note that the spatial query data grid is still open, but it has been minimized to the tab in the lower left corner of the application. ViSit Anywhere features simple, unambiguous docking windows that really allow users to optimize their workspace.

Now look at the editing operation that is taking that is taking place. This is a network node move. All the connected network segments must move with the node being edited. The network segments are polyline objects, so that when the network segment is stretched or compressed the last line segment in the polyline must change size and orientation. Note also, that the editor shows the vertex points of the line segments making up a network segment. This is very important when performing network segment edits, because the user can move a vertex by clicking on (or nearly on) a segment vertex or insert a new vertex by clicking on a zone with no segment vertex.

Note also, that the network equipment on the segments being moved must also be stretched with the segment. In this case, we maintain the same relative linear position of the segment equipment as the length of the network segment changes.

Modify Attribute Data

I have one final screen shot to show. This one shows how a user can edit the attributes of a network object using the sophisticated data grid controls in ViSit Anywhere.

In this case we are using the Modify Attributes tool and a network valve has been selected. When editing attributes in ViSit Anywhere, we show a modal dialog, which makes the process of submitting new change unambiguous. That is, while the dialog is open the change has not been submitted and by clicking the Cancel button, the change can be abandoned. Oh yeah, don't forget, in ViSit Anywhere you can always undo changes (even changes from a previous session) and the undo will be applied to both the graphic and the attribute data. Changes are final only when they are committed to the server as a new revision.

If you examine the attribute grid, you will note couple of things. First, some columns have been grouped into a section called eau détails régulations. This section is actually a secondary table associated with the equipment table. It is also possible for users to group, hide and rearrange the attributes in the form to suit their needs. The configuration can also be saved and re-loaded to perform specific tasks. The idea here is to allow the user to optimize the work environment to suit the task at hand. This is especially useful when there are a lot of repetitive changes to be made.

Note also that that the attribute grid supports a large number of field editors to help users to enter their data more easily and efficiently.

I think these four screen shots give you the flavor of what ViSit Anywhere is all about (or at least the first beta release). I will write a more detailed description some of the tools I have shown here in a future entry. Maybe I can get a screen cast that demonstrates how easy it is to perform some of these tasks.

No comments: