Business Objects


Getting Started | Expand Your Capabilities | Technical Topics | User Guides & Other Resources


Design to Engage, Part 2

By Justin Cox


Using Good Design Practices to Create Xcelsius Models that Engage and Persuade
(This is part two of a two-part series. View part one HERE.)



Taking proper steps to insure your Xcelsius model follows certain design guidelines and general rules is 80 percent of the battle when creating a data presentation that will engage and persuade. But, what about the other 20 percent? How can you take a good design and make it great? What will give YOUR presentation the WOW factor that will help you Steal the Show at your next meeting? Let’s face it…data is boring, and it needs all the help it can get!


Most presentations loose audience members simply by not appealing to them. A sleek design with clear informative data is a great way to keep an attentive audience on their toes. But what about the CEO who’s thinking about his 2:30 tee time? This demographic requires special attention to detail that most presentations don’t deliver. And, it’s where a strong grasp on Xcelsius -- its interface and design capabilities -- really comes into play. Knowing what you can achieve will help you create more effective presentations.


Knowing what’s possible with Xcelsius


Many exciting design features exist within Xcelsius; you just need to know where to look. Skins, fonts and Global Styles directly affect the appearance of your model, and can aid in the creation process as well. These features can quickly be changed, applied and even modified to create a truly unique and personal presentation. Let’s take a look at these three features in more depth. And, keep in mind that over-using multiple features will actually detract from the purpose of your model. In good design, “less is more”. As we examine these key features, please explore the possibilities along with me using any model of your choice. Take note of the things you like, so you can come back and use them again and again.


Note: It’s a good idea to create a back-up of your Xcelsius model at this time, in case you are not happy with your results or need to revert back to your original model.


1.Skins


Changing the skin of your Xcelsius model can change the size and position of your components. Nine times out of ten you will want to decide on the skin BEFORE creating your model as was discussed in Part 1of this article, for just this reason. We will be exploring Xcelsius skins and other features with the Executive Banking Dashboard example we used in Part 1, to show how these features can improve an already solid design.


The Change Skin dialog box can be found in the View dropdown menu:



Fig. #1



In this dialog box, you can choose a skin from the dropdown menu. Currently, Xcelsius supports Aqua, Aero and élan in the skin library. In the near future the Xcelsius skin library will grow dramatically, increasing the possibilities for unique and stunning designs.


There is also a checkbox within this dialog box, “Reset to Skin Defaults.” If checked, some component parameters will revert to their defined defaults. Such parameters include: text alignment, font size, and default colors.


Note: To keep the layout from changing drastically, first apply the skin WITHOUT “Reset to Skin Defaults” checked. You can always reapply the skin later with this feature enabled.


Applying a new skin is as simple as that! Because our model and layout have already been determined, certain adjustments will be needed when using different skins. Our model consists of multiple files. Try working with just one or two files, and decide what you like before committing to a full design change. Remember our model was originally created with élan. Now let’s try Aqua and Aero. After applying a skin, the components will change slightly, which can affect layout and size. After applying a different skin, make the necessary adjustments to the component sizes and positions.


Note: Background components will need the most adjustments. It will often be necessary to reorganized and sometimes replaced these components with other background sub-skins, depending on what look you are trying to achieve.


After making changes to the skin and adjusting the components, we can see the original compared to the two new skin effects:


élan:




Aqua:




Aero:




You can see from our original design, using different skins will keep the original layout, but change the look and feel dramatically. For this article, we will continue using the élan skin with our Executive Banking Dashboard.


2. Fonts


Fonts can be accessed from the upper menu through File > Font, as seen here:



Fig. #2



Your choice of a font should reflect the appropriateness and setting of your presentation. Two very popular fonts from the Serif and San-Serif family include; Times New Roman (Serif) and Arial (Sans-Serif). These fonts are easy to read, and a typography standard. Knowing when to use a serif vs. a san-serif, however, is a bit more tricky. But let’s keep it simple. Serif fonts, like Times New Roman, include an extra stroke at the ends of each character, giving it an older, more elegant “book style” feel. San-Serifs, such as Arial and Verdana, are much more modern and feel lighter in visual weight. Some studies suggest that numerical values are easier for the eye to read when using a San-Serif font, so if your model is very data driven or numerically heavy, a Sans-Serif would be ideal.


Often a font choice is driven by design, taking into consideration visual aesthetics and an appeal to audience members. Just remember not to “cloud” the message in the data by using overly dramatic and stylized fonts. Here are a few examples of fonts that would probably not be appropriate for data visualization:




These fonts take more time for the eye to adjust to, in turn making the data more convoluted and harder to read. Look through many fonts before deciding which to use. Many free fonts can be downloaded and used with special conditions. The list below contains a few of my favorites:

A great way to preview the fonts that are installed on your computer is to open some software, such as Microsoft Word, and view them from the dropdown menu. It will also save you the time required to apply multiple font changes to your Xcelsius model in order to preview. We’ve decided to use a more conservative, commonly used font, Times New Roman. We’re looking to impress a CEO, and can’t afford to confuse the numbers with a highly stylized font. More than likely, Times New Roman will hit a sub-conscious cord with him too, since he reads this font daily, while looking up stock quotes from the daily newspaper or Wall Street Journal.


3. Styles and Global Styles


Styles in Xcelsius correlate directly to custom colors. When you check “Use Custom Color” from within any component dialog box, you have opted to use a custom style for THAT component. This also means that you will most likely be using a color that is not the default for that skin, and will probably not fit into that specific color scheme. That’s exactly why we created Global Styles in Xcelsius. The Global Styles feature allows you to globally change the custom color parameters for all components, from one dialog box. The Global Styles dialog box can be found from View > Change Style:



Fig. #3



Before we begin changing the Global Styles, we want to define the colors we will use and have an idea how we will use them. This is the hardest part for most people. Finding one or two colors that work well together is hard enough…but five or six? That’s tough! One tip is to stay within the same hue. Similar to a grey scale (colors between black and white), choose a color and then four or five more ranging from light to dark.


Grey scale:




Single Hue:




Another idea is to use a 3 rd party applet or program to help you pick a custom color set. These are personal favorites of mine:


Color Match 5K
Color Wheel Pro
Color Schemer Online v2


Designing for the executive look-and-feel, the color palette I will use for our Banking Dashboard example will look something like this:




Black and grey will serve as the background and set a good solid foundation for the other, lighter colors. I have also decided that the dark red color will be the major marker and accent color. There are two ways to apply colors in Xcelsius;

We will do a little of both. First, we will create a Global Style and apply it across the board. Then, we will go back and make minor adjustments. To get started, open the Global Styles dialog box (View > Change Style). Select a style other than “Default”, this will give you access to global custom color parameters and also show you how each color is applied in the preview window. When assigning colors to Global Styles, there are a few things to understand about the Global Styles dialog box:

Using these concepts, apply your colors appropriately. They should look something like this:



Fig. #4



Don’t forget to go back to the Styles tab and “Save As” your new Global Style. When you’re finished, press the Apply button and your model will be updated with your new Global Style. By pressing “OK” you will set your new style as the Global Style for all further components that are placed on the canvas, unless a skin is changed or you close the application.


After applying this Global Style to all dashboard files, we have one more step. We will need to go back and adjust any special cases where Global Styles did not change our components as we wanted. For our example this will include applying multiple background colors, gradients and lines.


Here is our final Executive Banking Dashboard example:



Fig. #5



Final Tips and Tricks!


To conclude our two-part article on designing to engage, I’d like to share a few more helpful tips and tricks:

  1. Often background images and colors are not fully employed. Try importing a relevant image as the background of your model. If you’re hosting the model on a web server or presenting it in a web browser, consider applying an aspl background or texture.
  2. Attention to detail is key. Use the Align options from the Format > Align dropdown menu to precisely adjust the alignment of components in relationship to each other. Also keep in mind spacing and visual weight. Take a step back from the computer screen and look at your model as a whole. Does anything stick out as unusual or misplaced?
  3. Ask for other peoples’ eyes! When you stare at one thing for too long, you will continue to miss small imperfections, and possibly forget what you were trying to attain in the first place. Ask others for their honest opinion; they will often represent the opinion of a general audience member.
  4. When you’re finished, take a dry run with your model. Become a user and examine in detail the usability, readability and overall message of your presentation. Remember, you are your hardest critic.

Thanks for your interest in this two-part article. I hope it was helpful and informative. Now, you are ready to Steal the Show with your next presentation! Get out there and leave the rest of them in the dust…I dare you.



Getting Started | Expand Your Capabilities | Technical Topics | User Guides & Other Resources