Design to Engage
Presented by Crystal Xcelsius

By Justin Cox, User Interface Engineer, Business Objects

From clean reports to stunning dashboards, a good design can make or break a presentation. Considering basic design principles -- like layout and color -- from the beginning, will not only improve the way your Crystal Xcelsius model looks but will also optimize your workflow. Design first with some basic guidelines, and you’ll be guaranteed to “steal the show” at your next meeting.

Getting Prepared

Good designers follow basic rules BEFORE starting any project by defining a few simple unknowns. These unknowns help to identify the goals and limitations of the project. Ask yourself three basic questions, and answer them before you start building your Crystal Xcelsius model.

1. Who is my audience?
2. What information am I trying to represent?
3. How will the final result be presented to the audience?
4. Who is my audience?

Knowing who your audience is allows you to quickly determine whether or not a specific design is appropriate. For example; a cartoon-like look-and-feel would not be appropriate for a financial scorecard, nor would a bland color scheme work for a PowerPoint presentation at a sales rally. It is easiest to tackle this question by imagining yourself as an audience member. What would you like to see? What would be most helpful to you? Most of the time, the audience is not considered when first designing a Crystal Xcelsius model and is often an after-thought. As a result, the viewer’s experience can be uninspired and uninformed. So, write up a short list, identifying the types of people who will be using or viewing your Crystal Xcelsius model.

For our example in this article, we are creating an Executive Banking Dashboard. This dashboard will be used by top management of a prominent bank. With just this much information, we can assume the Crystal Xcelsius model will need to have a conservative, business-like look-and-feel, with data and information presented in a professional and precise manner.
2. What information am I trying to represent?

Another important step is to clearly define the information you will be representing. Often this is just the particular KPI’s or data values being presented in the model. Component selection is a huge part in deciding how to represent data. You will want to choose components that are appropriate for the data you are representing.

For our Executive Banking Dashboard example, there will be multiple KPI’s. Each KPI representation should have the proper balance of components and text as not to “overload” the audience experience. As a basic rule, try to keep visual elements and components to a minimum. Most of these KPI’s will consist of one display component, such as a chart, and a few input control components, such as sliders or dials.

To take this concept a step further, consider the relative importance of each group or category of data values. In the design world, this ordering helps you define how and where each element will be displayed. Using this hierarchy will lead your audience visually through your model exactly as you intended.

You might be asking, “How can I do this?” The simplest way to achieve visual hierarchy is to give the more important elements visual weight through size. In short, make the more important components larger than others and they will attract more attention. For a more in-depth explanation of visual hierarchy, check out Visual Hierarchy by Pete Faraday from Microsoft.

Again, consider making a short list of the data groups or components you will be representing, and their relative importance to the viewer. If all data groups are equally important (that is, it is not important to attract attention to any particular group first) then you will want to use a layout that supports this determination (figure 1).

Figure 1   This figure shows how to give an equal amount of importance to each panel through visual hierarchy. Notice how each panel is spaced evenly apart and equal in size. 
  
For our Executive Banking Dashboard example, we want the audience to focus on the KPI’s, as this will be where the heart of the information is displayed. Subtle attention will be drawn towards the menu system on the left and also the upper banner (figure 2).

Figure 2   Notice how an exaggerated amount of space is given to the area where the KPI’s will be displayed. Even though the viewer’s eyes may first spot the banner or menu, ultimately they will stop over the KPI area to more closely investigate its contents.

How will the final result be presented to the audience?

Knowing how your model will ultimately be shown to the audience is another important thing to know before starting to build your model. If the model will be presented in a web page, then you will want to explore the required dimensions and size. Taking into consideration the final viewing size and orientation, will help you layout your model correctly from the beginning.

If you are working within a wide rectangle, then use a workspace that is also wide and rectangular. The easiest way to do this is to define that space and edit the canvas size accordingly. In the Crystal Xcelsius work area, this can be done by going to File > Properties…and then adjusting the Width and Height as required (figure 3).

Figure 3   For our example, the dashboard will be used in a PowerPoint presentation that will be given at the quarterly bank management meeting.

Okay, you’re almost ready!

The last thing to consider before actually creating your model is to identify any guidelines, resources or tools you may already have to work with. Is this model part of a larger design; that is, is it going to be presented within a website that may already have a specific design you could use? Do you have any images, logos or other art that must be included in this model? Is there a specific color scheme that you are trying to achieve?

By pulling together these and other resources, you can greatly decrease unnecessary or inappropriate design time. Other resources to keep in mind are those that are included in Crystal Xcelsius, such as; skins, global styles and font choices. Most importantly, have an overall idea of what YOU like and what you are trying to achieve. If you can picture your model in your mind, then you are ready to begin the building process!

Now, let’s get started!

To design our Executive Banking Dashboard example, we begin by setting (File > Properties) the Crystal Xcelsius canvas to a size that is appropriate for a PowerPoint presentation. Using a canvas size of about 950 pixels in width by 650 pixels in height will give us the proper ratio for our PowerPoint presentation, and also provide plenty of room to work on a computer running a resolution of 1280 x 1024. Remember that your final output swf file can always be resized, but you will always want to keep the original aspect ratio.

After reviewing the available Crystal Xcelsius skins (View > Change Skin) we have opted to use “élan”, because of its clean look and subtle effects. At this point, we aren’t going to worry much about color and instead focus on the overall layout. Crystal Xcelsius skins are designed to look good “out of the box”, so for the purposes of laying out our model, the default color will be fine for now. Take note that our colors will be changed at a later time. Unless a specific color palette has already been defined, we suggest using the default colors until a suitable layout is achieved. (Note: more information on applying color will be explained in part 2 of this article in next month’s newsletter.)

Using the Primary Background of élan, we define the background for our model. Using the secondary background in the élan skin, we begin to layout the different sections, keeping in mind the concepts of visual hierarchy. We have also used a few rectangles to define the space where some of our titles will go (figure 4).

Figure 4 With only four elements, we can see the layout of our model already begin to take shape.

Because the space for our KPI’s is defined, we can continue adding elements to the overall model before working on the specific KPI’s. Remember, we are continuing to use the default colors of élan. Next we will add the menu, dashboard title and the company logo that we had previously gathered as a resource (fig. 5).

Figure 5 Adding just a few more elements before building our KPI’s gives us a clear sense as to how our final model is laid out.

In our own Getting Prepared step, we previously have defined 10 different KPI’s that will be included in our model. Because all of these KPI’s are equally important we have decided to represent them in the same area on the dashboard, and interchange them by use of a menu to the left. Now, we will build each individual KPI representation. Because we are using non-embedded swf files for the KPI’s, we will construct each in a separate Crystal Xcelsius file (xlf). This, in itself, can pose a design challenge.

There are a few things to consider when building individual pieces of a larger model. First you will want to use the exact same color palette. In our case, this will be easy as we will just continue using élan’s default color scheme. Secondly you will want to make sure you are building the KPI’s to the size and proportions necessary. This can be difficult, as there is no easy way in Crystal Xcelsius to check the size of an individual component. A simple trial and error works best. Create a new file and using a rectangle component test a few different sizes. If you, like me, are interested in getting the exact size, then consider using a third party program such as the JR Screen Ruler.

After determining the proper size and aspect ratio for our individual KPI presentation, we use the same size for all our KPI source files. If possible, it is handy to build from one KPI file to the next, creating exact duplicates and only changing the components. Another great idea is to leave all visual elements, such as backgrounds and images, out of your individual KPI files. Often it is temping to go “overboard” with design on these smaller pieces of the model. Keep in mind that every element that is introduced to the KPI will need to work with the larger dashboard aesthetics. Most often it is only necessary to include the bare minimum components themselves (figure 6).

Figure 6 This example of the Growth KPI does a great job of limiting visual elements to only those elements that actually represent data values. 

We also considered the concepts of visual hierarchy within each individual KPI representation. In fig. 6, we’ve placed more importance on the column chart as it is the main source of useful data. Although the sliders are smaller and take up less space, the overall design is still very well balanced. We continue designing the rest of our KPI representations keeping each as simple as possible. This will help later when we add those special touches that take our model from good to GREAT! At this point, we have a solid model with a very well structured design. Go ahead, give it a try!

Learn more about Business Objects and Crystal Xcelsius in our Contributor’s section.