Sneak Peek: Refreshing UI in XtraReports v2009.3

A few weeks ago I published a blog post about the new report designer in our reporting product. This is due to be released very soon and, to be honest, for such a great feature, my post left a little to be desired in terms of details. Alex, who writes for the XtraCharts and XtraReports teams, thought it would be a good idea for me to interview members of the development team and get them to reveal more about the new XtraReports.

For this third and final article, he hooked me up with Konstantin Kosukhin, a.k.a. Konstantin K in the forums. Konstantin rocked my world with the new look-and-feel for the designer: he and I are both fans of Mark Miller's series of posts and talks on The Science of Great UI. This time I'll show lots of before and after pictures: he's done a cracking good job in refreshing the UI. (Yes, I am most definitely punning in the title to this post.) Since this is the last article in this small series, I'd also just like to say thanks to Alex (who likes to be known as Alan in the forums) for setting all this up and the work he did in making sure the interviews came off well.

(Note: Although all screenshots in this article are from the End-User Report Designer, the Visual Studio report designer has all the same enhancements. The only exception is the toolbox and the property grid, which are native VS elements, only available at VS design time).

JMB: What gave you the idea to revamp the designer UI?

Konstantin: Easy. Just look at the designer in v2009.2 and earlier:

 

It's functional in that you can design reports with it, but just look at that visual noise. It looks heavy. It's hard to tell what visual objects are part of the report and what are part of the designer. It violates a lot of the guidance that Mark Miller laid down in his Science of Great UI blog posts.

So, we decided to make the designer's appearance more lightweight and not beat you over the head with it. So we redid some design work and produced this:

I'm sure everyone will agree it looks more restful, and it has not lost any of the functionality.

JMB: Very nice, indeed. I like the attention you paid to reducing contrast and your better use of color. The visual noise is way down. So, take us through the changes to get to this new version.

Konstantin: First up for the chop were the grid lines. Grid lines are shown on the report designer surface to make it easier to move and resize report elements. Previously, we used dotted lines but there was no difference between the major and minor lines. All grid lines were the same. Also, another problem was that the grid line increment was measured in pixels, which was most inconvenient for designing reports that were measured in inches or centimeters.

We threw away the dotted lines and replaces them with thin low-contrast silver grid lines, with the major subdivision lines being slightly darker than the minor ones. The grid line increment is now measured in the units for the current report.

Of course, the new snap lines feature blends in with this new grid very nicely.

JMB: Totally agree. The dotted grid was very 90s and this new version is much better. More modern. What else?

Konstantin: Next on the list was what a selected control looked like. Previously, when a report control was selected, it was drawn with a rather noisy selection rectangle.

We wiped that design to replace it with a very lightweight selection box, with judicious use of some slight bluish color.

Already you can see that the high-contrast color of the control contents stands out from the infrastructure of the designer. Look back at the previous image: the dots were merging with the text to produce a very jagged look.

JMB: I'm liking this new designer more and more. Looking back at the overall picture I see you also altered the report band strips.

Konstantin: Exactly. In the previous version, the strips that indicated the different report bands were brightly colored and used a saturated color as well. They really dragged your focus away from the report controls, arguably the most important elements on the designer surface, to something that was in essence a set of dividing lines.

I mean talk about visual noise: all you can see on the designer surface is band strips. And just look at the jaggies because of the dotted grid lines. For v2009.3 we turned the contrast and color of the strips way down. Just enough to indicate a division, and the name of that division:

JMB: I think you just saved me from a headache.

Konstantin: The final change we made to the designer surface was how we treated the margins of the report. We were way too literal about margins in v2009.2 and earlier:

I mean, after all, the designer surface is supposed to represent a sheet of paper. To emphasize that similarity, we decided to draw indents from the left and top rulers, show the left report margin on the screen, along with making the top and bottom margins always visible on the report designer surface (previously, only the right report margin was visible). This makes it way easier for a user to change the report margins when designing a report without having to resort to using the Property Grid. Just drag and drop.

JMB: I like it. I completely agree that being able to drag the margins to resize them is a much better user experience than having to search for and then select the right property in the Property Grid. I also notice you changed the toolbox.

Konstantin: Yes, this was the final major change we made. We decided that the dock panel we had been using as the toolbox was too heavy for regular use, and felt a simpler bar would be better.

First, it allows us to provide more space for the designer surface, that is, the user's report. Second, it means that someone who writes reports often is not distracted by the icon plus text of the old dock panel but can still locate controls very quickly. For the user who is just starting out with the designer, the names of the toolbox items are displayed in tooltips, and in the previous version (v2009.2) we'd already made the toolbox icons larger. These larger icons are already more recognizable and it becomes easier and quicker to learn which items correspond to which icons.

If someone prefers the older dock panel, you can create a custom end-user designer form with the help of the XRDesignDockManager component.

JMB: I concur. As an example, I use Adobe Illustrator infrequently but regularly, and I certainly don't need the text to go along with the toolbox icons. I've learned enough about the environment that I'm familiar with the 20% I use and I know I can always hover to get the tooltips to learn about the other 80%.

Anyway, Konstantin, thank you for taking the time to explain about the new refreshing look of the XtraReports report designer. I think we'll have to migrate some of your changes over to our other control designers...

Konstantin: No problem, I'll help out for sure. And it was fun to explain what we've done for v2009.3.

Free DevExpress Products - Get Your Copy Today