Review Board has been around for a couple of years now, and the UI really hasn't changed much. The initial UI we wrote worked well enough, but had a number of usability problems we were all too aware of. We knew we needed to address these for the 1.0 release.
During the past month or two, we've been rewriting much of the Review Board UI. It's now based on jQuery, an elegant cross-platform JavaScript toolkit, which allows us to maintain clean code with minimal browser-specific hacks. This means better compatibility with Firefox, Internet Explorer 6/7/8, Safari, and Opera.
In an effort to streamline the code review process, we've made several key changes.
Commenting
The comment/review dialog has been split up and simplified. The old dialog was confusing to many users for a number of reasons. Mainly, it tried to do too much by handling not only commenting on a diff line or screenshot but the reviews as well.
People often tried using the old dialog to reply to existing comments, which led to brand new reviews instead of replies. This was largely due to the way we represented comments on the old dialog.
Now we have a simple comment dialog for both the diff viewer and screenshot pages. The green portion representing the new draft comment provides a single text area for the comment, and Save and Cancel buttons. To the left is a list of existing comments for that region (if any). Each item contains "View" and "Reply" buttons. Clicking these will jump to the reviews page, and in the case of "Reply," a new comment will be added below the comment being replied to on the reviews page. This will hopefully make replying more straightforward. We have some further improvements we'll make in this area in the future.
Editing reviews
The review portion of the dialog is now its own entity. When clicking on "Review" on the review request details box, or when clicking "Edit Review" on the new draft banner (which is docked to the top of a review request page when there's a pending review), a modal box will pop up containing the review.
This new box is a vast improvement over the old review dialog. Like actual reviews, the screenshot and diff fragments are displayed inline, and progressively loaded. Users can make changes to existing comments they've made. The review can be saved, published, or discarded straight from there, or from the banner itself.
No more lost comments
It's harder to lose comments now. When there's a pending comment on a page and the user attempts to move away from the page, a confirmation dialog will appear. This currently happens on the diff viewer and screenshot dialogs only. The functionality will be added in a later change to reviews and the review form.
Feedback and comment previews
There's more feedback now when making changes. When saving or deleting a comment, little bubbles briefly float up near the comment flag or region and let the user know what just happened.
The selected region of the diff viewer used to be indicated by a little arrow in the left-hand column. This was sometimes hard to notice. We now make the border around that region more bold, making it quite clear where you are in the diff viewer.
Hovering over a comment flag or a comment region now shows a little tooltip with the comments. It's very brief. No author information is shown, just the text, but clicking the area provides that additional information.
We provide slightly better error feedback now. The error banners at the top of the page now contain any debug information, such as a backtrace, when something goes wrong. In DEBUG=True installs, this information is very valuable. This certainly makes debugging Review Board itself much easier.
Better action placement
Review request actions ("Set Submitted", "Add Screenshot", etc.) have been moved to the top of the review request box where they're more easily seen. "Set Submitted," "Discard" and "Delete" are no longer top-level actions. They now exist in a "Close" drop-down menu. This saves space and groups them together under one concept -- you're in some way closing a review request out.
More descriptive dialogs
We're working to add some better help to the dialogs. The Upload Diff dialog, for instance, now has descriptions below each field. In the future, we'll add better inline helping throughout the product.
Better browser compatibility
We have much better browser compatibility now. The new UI should work quite well on IE6/7/8, Firefox, Opera, Safari, and Konqueror.
Upgrade Notes
It's very important to clear your server-side cache when upgrading Review Board, or some things just won't work. If using memcached, restart the service.
You may also need to tell your users to clear their browser cache if they run into problems.
Problems?
Please let us know if there are major issues with this rewrite. It's been tested fairly heavily, but may still have unforeseen problems. As always, you can report bugs or post to the mailing list for help.
